mirror of
https://github.com/KevinMidboe/zoff.git
synced 2025-10-29 18:00:23 +00:00
playlist
This commit is contained in:
Kasper Rynning-Tønnesen
@@ -1,11 +1,11 @@
|
||||
<template>
|
||||
<div class="context-menu-container" :style="'top:' + mouseY + 'px;left:' + mouseX + 'px;'">
|
||||
<ul>
|
||||
<li>Copy link</li>
|
||||
<li>Find similar</li>
|
||||
<li>Added by {{ addedBy }}</li>
|
||||
<li @click="copyLink">Copy link</li>
|
||||
<li @click="findSimilar">Find similar</li>
|
||||
<li class="addedBy">Added by {{ addedBy }}</li>
|
||||
<hr />
|
||||
<li>Delete</li>
|
||||
<li @click="deleteSong" :disabled="loggedIn">Delete</li>
|
||||
</ul>
|
||||
<div class="context-menu-background" @mouseout="closeSelf" @click="closeSelf"></div>
|
||||
</div>
|
||||
@@ -35,6 +35,11 @@ export default {
|
||||
type: Number
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
loggedIn: function() {
|
||||
return false;
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
closeSelf: function(e) {
|
||||
if (e.toElement == null || e.toElement.nodeName == null) {
|
||||
@@ -44,6 +49,15 @@ export default {
|
||||
return;
|
||||
}
|
||||
this.$emit("closeContextMenu");
|
||||
},
|
||||
copyLink: function() {
|
||||
console.log("copy link of", this.id);
|
||||
},
|
||||
findSimilar: function() {
|
||||
console.log("find similar of", this.id);
|
||||
},
|
||||
deleteSong: function() {
|
||||
console.log("delete song of", this.id);
|
||||
}
|
||||
}
|
||||
};
|
||||
@@ -81,9 +95,13 @@ export default {
|
||||
cursor: pointer;
|
||||
padding: 5px 15px;
|
||||
|
||||
&:hover {
|
||||
&:hover:not(.addedBy) {
|
||||
background-color: #ffffff15;
|
||||
}
|
||||
|
||||
&.addedBy {
|
||||
cursor: initial;
|
||||
}
|
||||
}
|
||||
|
||||
& hr {
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
<template>
|
||||
<div class="playlist-conatiner">
|
||||
<div class="song-container" v-for="(song, i) in paginatedList" :key="i">
|
||||
<div class="playlist-element" v-for="(song, i) in paginatedList" :key="i">
|
||||
<Song
|
||||
class="song"
|
||||
:title="song.title"
|
||||
@@ -9,9 +9,10 @@
|
||||
:addedBy="song.added_by"
|
||||
:id="song.id"
|
||||
:type="song.type"
|
||||
:duration="song.duration"
|
||||
@contextmenu="moreInfo"
|
||||
/>
|
||||
<div class="song-context-button" @click="moreInfo($event, song.id)">more</div>
|
||||
<div class="song-context-button" @click="moreInfo($event, song.id)">. . .</div>
|
||||
</div>
|
||||
<div class="pagination-buttons">
|
||||
<button @click="firstPage" :disabled="disabledPrev" class="first"><</button>
|
||||
@@ -59,15 +60,19 @@ export default {
|
||||
}
|
||||
},
|
||||
async beforeMount() {
|
||||
const request = await fetch("https://zoff.me/api/list/summér", {
|
||||
method: "POST"
|
||||
});
|
||||
const playlist = await request.json();
|
||||
if (this.playlist.error == true) {
|
||||
console.error(this.playlist.error);
|
||||
return;
|
||||
try {
|
||||
const request = await fetch("https://zoff.me/api/list/summér", {
|
||||
method: "POST"
|
||||
});
|
||||
const playlist = await request.json();
|
||||
if (this.playlist.error == true) {
|
||||
console.error(this.playlist.error);
|
||||
return;
|
||||
}
|
||||
this.playlist = playlist.results;
|
||||
} catch (e) {
|
||||
alert("TIMEOUT");
|
||||
}
|
||||
this.playlist = playlist.results;
|
||||
},
|
||||
methods: {
|
||||
moreInfo: function(e, id) {
|
||||
@@ -113,31 +118,63 @@ export default {
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
.song-container {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
& .song {
|
||||
width: 75%;
|
||||
}
|
||||
& .song-context-button {
|
||||
width: 25%;
|
||||
.playlist-conatiner {
|
||||
background-color: #2d2d2d;
|
||||
padding-top: 5px;
|
||||
|
||||
& .playlist-element {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
}
|
||||
flex-direction: row;
|
||||
box-shadow: 0px 0px 2px #000000;
|
||||
border-radius: 5px;
|
||||
background: #2d2d2d;
|
||||
color: white;
|
||||
margin: 5px 5px;
|
||||
cursor: pointer;
|
||||
|
||||
.pagination-buttons {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
&:hover {
|
||||
box-shadow: 0px 0px 3px #000000;
|
||||
}
|
||||
|
||||
& button {
|
||||
width: 35%;
|
||||
height: 30px;
|
||||
&:active {
|
||||
background: #000000;
|
||||
}
|
||||
|
||||
&.first,
|
||||
&.last {
|
||||
& .song {
|
||||
width: 90%;
|
||||
}
|
||||
& .song-context-button {
|
||||
width: 10%;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
border-left: 1px solid black;
|
||||
}
|
||||
}
|
||||
|
||||
.pagination-buttons {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
color: white;
|
||||
padding: 10px 0;
|
||||
|
||||
& span {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
& button {
|
||||
width: 35%;
|
||||
height: 30px;
|
||||
background: transparent;
|
||||
color: white;
|
||||
border: none;
|
||||
|
||||
&.first,
|
||||
&.last {
|
||||
width: 10%;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -1,12 +1,17 @@
|
||||
<template>
|
||||
<div class="song-container">
|
||||
<div class="song-voteable-container" @click="clickedSong" @contextmenu="$emit('contextmenu', $event, id)">
|
||||
<div
|
||||
class="song-voteable-container"
|
||||
@click="clickedSong"
|
||||
@contextmenu="$emit('contextmenu', $event, id)"
|
||||
>
|
||||
<div class="song-thumbnail">
|
||||
<img :src="thumbnail" :alt="title" />
|
||||
<span class="song-duration">{{ durationInString }}</span>
|
||||
</div>
|
||||
<div class="song-info">
|
||||
<div class="song-title">{{ title }}</div>
|
||||
<div class="song-votes">{{ votes }} vote{{votes > 1 ? "s" : null }}</div>
|
||||
<div class="song-votes">{{ votes }} vote{{votes > 1 || votes == 0 ? "s" : null }}</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -41,8 +46,12 @@ export default {
|
||||
type: String
|
||||
},
|
||||
type: {
|
||||
required: true,
|
||||
type: String
|
||||
required: true,
|
||||
type: String
|
||||
},
|
||||
duration: {
|
||||
required: true,
|
||||
type: Number
|
||||
}
|
||||
},
|
||||
data() {
|
||||
@@ -52,11 +61,20 @@ export default {
|
||||
mouseY: 0
|
||||
};
|
||||
},
|
||||
computed: {
|
||||
durationInString: function() {
|
||||
let time = this.duration;
|
||||
let minutes = Math.floor(time / 60);
|
||||
time = time - minutes * 60;
|
||||
let minutesString = (minutes + "").padStart(2, "0");
|
||||
let secondString = (time + "").padStart(2, "0");
|
||||
return `${minutesString}:${secondString}`;
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
clickedSong: function() {
|
||||
console.log("Clicked on song with info", this.title, this.id);
|
||||
},
|
||||
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
@@ -65,19 +83,38 @@ export default {
|
||||
.song-container {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
color: white;
|
||||
|
||||
.song-voteable-container {
|
||||
width: 75%;
|
||||
display: flex;
|
||||
|
||||
& .song-votes {
|
||||
color: lightgrey;
|
||||
}
|
||||
|
||||
& .song-thumbnail {
|
||||
width: 25%;
|
||||
position: relative;
|
||||
|
||||
& img {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
border-top-left-radius: 7.5px;
|
||||
border-bottom-left-radius: 7.5px;
|
||||
}
|
||||
|
||||
& .song-duration {
|
||||
position: absolute;
|
||||
bottom: 5px;
|
||||
left: 0px;
|
||||
border-top-left-radius: 4px;
|
||||
border-top-right-radius: 4px;
|
||||
border-bottom-left-radius: 5px;
|
||||
padding: 0 5px;
|
||||
background: #000000A0;
|
||||
color:white;
|
||||
}
|
||||
}
|
||||
|
||||
& .song-info {
|
||||
|
||||
1
frontend/styles/normalize.scss
vendored
1
frontend/styles/normalize.scss
vendored
@@ -2,4 +2,5 @@
|
||||
body {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
font-family: sans-serif;
|
||||
}
|
||||
5
package-lock.json
generated
5
package-lock.json
generated
@@ -13385,6 +13385,11 @@
|
||||
"integrity": "sha512-4gDntzrifFnCEvyoO8PqyJDmguXgVPxKiIxrBKjIowvL9l+N66196+72XVYR8BBf1Uv1Fgt3bGevJ+sEmxfZzw==",
|
||||
"dev": true
|
||||
},
|
||||
"vuex": {
|
||||
"version": "3.1.2",
|
||||
"resolved": "https://registry.npmjs.org/vuex/-/vuex-3.1.2.tgz",
|
||||
"integrity": "sha512-ha3jNLJqNhhrAemDXcmMJMKf1Zu4sybMPr9KxJIuOpVcsDQlTBYLLladav2U+g1AvdYDG5Gs0xBTb0M5pXXYFQ=="
|
||||
},
|
||||
"watchpack": {
|
||||
"version": "1.6.0",
|
||||
"resolved": "https://registry.npmjs.org/watchpack/-/watchpack-1.6.0.tgz",
|
||||
|
||||
@@ -54,6 +54,7 @@
|
||||
},
|
||||
"homepage": "https://github.com/zoff-music/zoff#readme",
|
||||
"dependencies": {
|
||||
"@babel/polyfill": "~7.2",
|
||||
"bad-words": "^1.6.5",
|
||||
"bcrypt-nodejs": "0.0.3",
|
||||
"body-parser": "^1.18.3",
|
||||
@@ -66,6 +67,7 @@
|
||||
"express-handlebars": "^3.0.2",
|
||||
"express-recaptcha": "^3.0.1",
|
||||
"express-session": "^1.15.6",
|
||||
"extract-text-webpack-plugin": "^3.0.2",
|
||||
"farmhash": "^3.0.0",
|
||||
"feature-policy": "^0.2.0",
|
||||
"gulp-clean-css": "^4.2.0",
|
||||
@@ -88,9 +90,8 @@
|
||||
"socket.io-redis": "^5.2.0",
|
||||
"sticky-session": "^1.1.2",
|
||||
"uniqid": "5.0.3",
|
||||
"@babel/polyfill": "~7.2",
|
||||
"extract-text-webpack-plugin": "^3.0.2",
|
||||
"vue": "~2.6",
|
||||
"vue-router": "~3.0"
|
||||
"vue-router": "~3.0",
|
||||
"vuex": "^3.1.2"
|
||||
}
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user