|
|
@@ -34,106 +34,16 @@
|
|
|
</table>
|
|
|
</div>
|
|
|
</div>
|
|
|
- <div class='modal' :class="{ 'is-active': isEditActive }">
|
|
|
- <div class='modal-background'></div>
|
|
|
- <div class='modal-card'>
|
|
|
- <section class='modal-card-body'>
|
|
|
-
|
|
|
- <h5 class='has-text-centered'>Video Preview</h5>
|
|
|
- <div class='video-container'>
|
|
|
- <div id='player'></div>
|
|
|
- <p class='control has-addons'>
|
|
|
- <a class='button'>
|
|
|
- <i class='material-icons' @click='video.settings("pause")' v-if='!video.paused'>pause</i>
|
|
|
- <i class='material-icons' @click='video.settings("play")' v-else>play_arrow</i>
|
|
|
- </a>
|
|
|
- <a class='button' @click='video.settings("stop")'>
|
|
|
- <i class='material-icons'>stop</i>
|
|
|
- </a>
|
|
|
- <a class='button' @click='video.settings("skipToLast10Secs")'>
|
|
|
- <i class='material-icons'>fast_forward</i>
|
|
|
- </a>
|
|
|
- </p>
|
|
|
- </div>
|
|
|
- <p style="margin-top: 0; position: relative;">
|
|
|
- <input type="range" id="volumeSlider" min="0" max="100" class="active" v-on:change="changeVolume()" v-on:input="changeVolume()">
|
|
|
- </p>
|
|
|
-
|
|
|
- <h5 class='has-text-centered'>Thumbnail Preview</h5>
|
|
|
- <img class='thumbnail-preview' :src='editing.song.thumbnail' onerror="this.src='/assets/notes.png'">
|
|
|
-
|
|
|
- <label class='label'>Thumbnail URL</label>
|
|
|
- <p class='control'>
|
|
|
- <input class='input' type='text' v-model='editing.song.thumbnail'>
|
|
|
- </p>
|
|
|
-
|
|
|
- <h5 class='has-text-centered'>Edit Info</h5>
|
|
|
-
|
|
|
- <p class='control'>
|
|
|
- <label class='checkbox'>
|
|
|
- <input type='checkbox' v-model='editing.song.explicit'>
|
|
|
- Explicit
|
|
|
- </label>
|
|
|
- </p>
|
|
|
- <label class='label'>Song ID</label>
|
|
|
- <p class='control'>
|
|
|
- <input class='input' type='text' v-model='editing.song._id'>
|
|
|
- </p>
|
|
|
- <label class='label'>Song Title</label>
|
|
|
- <p class='control'>
|
|
|
- <input class='input' type='text' v-model='editing.song.title'>
|
|
|
- </p>
|
|
|
- <div class='control is-horizontal'>
|
|
|
- <div class='control is-grouped'>
|
|
|
- <div>
|
|
|
- <p class='control has-addons'>
|
|
|
- <input class='input' id='new-artist' type='text' placeholder='Artist'>
|
|
|
- <a class='button is-info' @click='addTag("artists")'>Add Artist</a>
|
|
|
- </p>
|
|
|
- <span class='tag is-info' v-for='(index, artist) in editing.song.artists' track-by='$index'>
|
|
|
- {{ artist }}
|
|
|
- <button class='delete is-info' @click='removeTag("artists", index)'></button>
|
|
|
- </span>
|
|
|
- </div>
|
|
|
- <div>
|
|
|
- <p class='control has-addons'>
|
|
|
- <input class='input' id='new-genre' type='text' placeholder='Genre'>
|
|
|
- <a class='button is-info' @click='addTag("genres")'>Add Genre</a>
|
|
|
- </p>
|
|
|
- <span class='tag is-info' v-for='(index, genre) in editing.song.genres' track-by='$index'>
|
|
|
- {{ genre }}
|
|
|
- <button class='delete is-info' @click='removeTag("genres", index)'></button>
|
|
|
- </span>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- <label class='label'>Song Duration</label>
|
|
|
- <p class='control'>
|
|
|
- <input class='input' type='text' v-model='editing.song.duration'>
|
|
|
- </p>
|
|
|
- <label class='label'>Skip Duration</label>
|
|
|
- <p class='control'>
|
|
|
- <input class='input' type='text' v-model='editing.song.skipDuration'>
|
|
|
- </p>
|
|
|
-
|
|
|
- </section>
|
|
|
- <footer class='modal-card-foot'>
|
|
|
- <a class='button is-success' @click='save(editing.song)'>
|
|
|
- <i class='material-icons save-changes'>done</i>
|
|
|
- <span> Save</span>
|
|
|
- </a>
|
|
|
- <a class='button is-danger' @click='cancel()'>
|
|
|
- <span> Cancel</span>
|
|
|
- </a>
|
|
|
- </footer>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
+ <edit-song v-show='isEditActive'></edit-song>
|
|
|
</template>
|
|
|
|
|
|
<script>
|
|
|
import { Toast } from 'vue-roaster';
|
|
|
|
|
|
+ import EditSong from '../Modals/EditSong.vue';
|
|
|
+
|
|
|
export default {
|
|
|
+ components: { EditSong },
|
|
|
data() {
|
|
|
return {
|
|
|
songs: [],
|
|
|
@@ -210,10 +120,6 @@
|
|
|
_this.toggleModal();
|
|
|
});
|
|
|
},
|
|
|
- cancel: function () {
|
|
|
- let _this = this;
|
|
|
- _this.toggleModal();
|
|
|
- },
|
|
|
remove: function (id, index) {
|
|
|
this.songs.splice(index, 1);
|
|
|
this.socket.emit('songs.remove', id, res => {
|
theflametrooper