WebPlay/client
1
1
Fork 0
Code Issues 10 Pull Requests Packages Projects Releases Wiki Activity

Compare commits

base: WebPlay:dfa44db91fdba0d822bcd312f5ca9dfd0aa8ad55
Branches Tags
WebPlay:main
WebPlay:dev
WebPlay:mongodb-6
..
compare: WebPlay:a96c3ccacb75074101e5110af2f8007fe65c47dc
Branches Tags
WebPlay:main
WebPlay:dev
WebPlay:mongodb-6

No commits in common. "dfa44db91fdba0d822bcd312f5ca9dfd0aa8ad55" and "a96c3ccacb75074101e5110af2f8007fe65c47dc" have entirely different histories.
dfa44db91f ... a96c3ccacb

3 changed files with 81 additions and 79 deletions
Show Stats Expand all files Collapse all files

15
src/components/dialogs/AlbumViewer.vue
View File

@ -3,8 +3,9 @@
<div id="albumViewer" class="flex-row"> <div id="albumViewer" class="flex-row">
<div id="header" class="flex-column grow"> <div id="header" class="flex-column grow">
<div id="background" :style="coverBackground" /> <div id="background" :style="coverBackground" />
<div id="title" class="flex-column pa grow z1"> <div it="title" class="flex-column pa grow z1">
<img class="glow ma" :src="cover" /> <img class="glow ma" :src="cover" />
<span id="stats" class="center"> <span id="stats" class="center">
{{ selectedAlbum.title }} {{ selectedAlbum.title }}
<br /> <br />
@ -17,18 +18,20 @@
<b>{{ album_duration }}</b> <b>{{ album_duration }}</b>
</span> </span>
<div class="grow"> </div> <div class=" grow">
</div>
<div class="flex-row grow ma-top"> <div class="flex-row grow ma-top">
<button class="flat ma-right" title="Favourite" @click="toggleFavourite"> <button class="flat ma-right" title="Favourite" @click="toggleFavourite">
<awesome-icon :icon="['fas', 'star']" size="2x" class="white-text favourite active" v-if="isFavourite" /> <awesome-icon :icon="['fas', 'star']" size="2x" class="white-text favourite active" v-if="isFavourite" />
<awesome-icon :icon="['far', 'star']" size="2x" class="white-text favourite" v-else /> <awesome-icon :icon="['far', 'star']" size="2x" class="white-text favourite" v-else />
</button> </button>
<button class="flat ma-right" title="Keep playing" @click="playProgress" v-if="selectedAlbum.progress"> <button class="flat ma-right" @click="playProgress" v-if="selectedAlbum.progress">
<awesome-icon icon="play" size="2x" class="primary-text" /> <awesome-icon icon="play" size="2x" class="primary-text" title="Keep playing" />
</button> </button>
<button class="flat ma-right" title="Play" @click="playAlbum" v-else> <button class="flat ma-right" @click="playAlbum" v-else>
<awesome-icon icon="play" size="2x" class="white-text" /> <awesome-icon icon="play" size="2x" class="white-text" title="Play" />
</button> </button>
<button @click="gotoPrevAlbum" class="flat ma-left ma-right" :title="prevAlbum.name" :disabled="!prevAlbum._id"> <button @click="gotoPrevAlbum" class="flat ma-left ma-right" :title="prevAlbum.name" :disabled="!prevAlbum._id">
<awesome-icon icon="angle-left" class="ma4 white-text" /> <awesome-icon icon="angle-left" class="ma4 white-text" />

141
src/components/dialogs/BoxViewer.vue
View File

@ -1,81 +1,70 @@
<template> <template>
<DialogBase ref="dialogWindow" :title="selectedBox.title" @canceled="closed" :showFooter="false" :closeOnEscape="selectedVideo._id == null" :disableXscroll="true" :disableYscroll="true" :flatDialogHeader="true"> <DialogBase ref="dialogWindow" :title="selectedBox.title" @canceled="closed" :showFooter="false" :closeOnEscape="selectedVideo._id == null" :disableXscroll="true" :disableYscroll="true">
<div id="boxViewer" class="flex-row"> <div id="boxViewer" class="flex-row">
<div id="header" class="flex-column grow"> <div id="header" class="flex-column">
<div id="background" :style="coverBackground" /> <div id="background" :style="coverBackground" />
<div id="title" class="grow z1 pa flex-column"> <div class="grow z1 center flex-column">
<img class="glow ma" :src="cover" /> <img class="glow ma24" :src="cover" @dblclick="dblclick" />
<span id="stats" class="center"> </div>
<b>{{ selectedBox.title }}</b> <awesome-icon icon="star" size="2x" class="favourite ma4 z2" :class="{ active: isFavourite }" @click="toggleFavourite" />
<br /> <awesome-icon icon="play" size="2x" class="keepPlaying ma4 primary-text" @click="playProgress" v-if="selectedBox.progress" title="Keep playing" />
<b>{{ box_videos.length }}</b> Videos
</span>
<div class="grow"> </div> <div id="stats" class="flex-row z1">
<div class="flex-row ma-top grow"> <DropDown v-if="$store.getters['user/isAdministrator']">
<button class="flat ma-right" title="Favourite" @click="toggleFavourite"> <button class="flat center" :title="visibility_text">
<awesome-icon :icon="['fas', 'star']" size="2x" class="white-text favourite active" v-if="isFavourite" /> <awesome-icon :icon="visibility_icon" />
<awesome-icon :icon="['far', 'star']" size="2x" class="white-text favourite" v-else />
</button> </button>
<button class="flat ma-right" title="Keep playing" @click="playProgress" v-if="selectedBox.progress"> <template v-slot:dropdown-content>
<awesome-icon icon="play" size="2x" class="primary-text" /> <div>
</button> <button v-for="(item, i) in $store.state.system.lists.visibility" :key="i" @click="setVisibility(item)">
<button class="flat ma-right" title="Play" @dblclick="dblclick" v-else> <awesome-icon :icon="getVisibilityIcon(item)" />{{
<awesome-icon icon="play" size="2x" class="white-text" /> getVisibilityText(item)
</button> }}
<button @click="gotoPrevBox" class="flat ma-left ma-right" :title="prevBox.name" :disabled="!prevBox._id"> </button>
<awesome-icon icon="angle-left" class="ma4 white-text" /> <hr />
</button> <button v-if="!selectedBox.share._id" @click="shareEnable">
<button @click="gotoNextBox" class="flat" :title="nextBox.name" :disabled="!nextBox._id"> <awesome-icon icon="share" />Share this box
<awesome-icon icon="angle-right" class="ma4 white-text" /> </button>
</button> <button v-if="selectedBox.share._id" @click="addShareUrlToClipboard">
<div class="grow"></div> <awesome-icon icon="clipboard" />Copy url into clipboard
<DropDown v-if="$store.getters['user/isAdministrator']"> </button>
<button class="flat center" :title="visibility_text"> <button v-if="selectedBox.share._id" @click="shareDisable">
<awesome-icon :icon="visibility_icon" class="white-text" /> <awesome-icon icon="share" />Remove share
</button> </button>
<template v-slot:dropdown-content> </div>
<div> </template>
<button v-for="(item, i) in $store.state.system.lists.visibility" :key="i" @click="setVisibility(item)"> </DropDown>
<awesome-icon :icon="getVisibilityIcon(item)" />{{ <div class="grow flex-column">
getVisibilityText(item) <p class="ma4 center">
}} <span class="">
</button> <b>{{ selectedBox.title }}</b>
<hr /> <br />
<button v-if="!selectedBox.share._id" @click="shareEnable"> <b>{{ box_videos.length }}</b> Videos
<awesome-icon icon="share" />Share this box </span>
</button> </p>
<button v-if="selectedBox.share._id" @click="addShareUrlToClipboard">
<awesome-icon icon="clipboard" />Copy url into clipboard
</button>
<button v-if="selectedBox.share._id" @click="shareDisable">
<awesome-icon icon="share" />Remove share
</button>
</div>
</template>
</DropDown>
<DropDown v-if="$store.getters['user/isAdministrator']">
<button class="flat center">
<awesome-icon icon="ellipsis-v" class="white-text" />
</button>
<template v-slot:dropdown-content>
<div>
<button @click="uploadNewCover">
<awesome-icon icon="image" />Set new Cover...
</button>
<button @click="resetCover">
<awesome-icon icon="eraser" />Reset Cover
</button>
<hr />
<button @click="mergeBox">
<awesome-icon icon="compress-alt" />Merge Boxes...
</button>
</div>
</template>
</DropDown>
</div> </div>
<DropDown v-if="$store.getters['user/isAdministrator']">
<button class="flat center">
<awesome-icon icon="ellipsis-v" />
</button>
<template v-slot:dropdown-content>
<div>
<button @click="uploadNewCover">
<awesome-icon icon="image" />Set new Cover...
</button>
<button @click="resetCover">
<awesome-icon icon="eraser" />Reset Cover
</button>
<hr />
<button @click="mergeBox">
<awesome-icon icon="compress-alt" />Merge Boxes...
</button>
</div>
</template>
</DropDown>
</div> </div>
</div> </div>
<ul id="videoList" class="videos"> <ul id="videoList" class="videos">
<li v-for="item in selectedBox.videos" :key="item._id"> <li v-for="item in selectedBox.videos" :key="item._id">
<VideoItem :video="item" /> <VideoItem :video="item" />
@ -276,7 +265,7 @@ export default {
<style scoped> <style scoped>
#boxViewer { #boxViewer {
height: 486px; height: 462px;
} }
#header { #header {
@ -291,8 +280,13 @@ export default {
#stats { #stats {
z-index: 2; z-index: 2;
align-items: center;
color: var(--white); color: var(--white);
text-shadow: 0 1px 2px black; text-shadow: 0 1px 2px black;
line-height: 1.4;
background-color: #ffffff40;
border-top: 1px solid #ffffff20;
border-bottom: 1px solid #00000020;
} }
.dropdown-activator button { .dropdown-activator button {
@ -300,6 +294,11 @@ export default {
height: 32px; height: 32px;
} }
#stats p {
max-width: 192px;
align-self: center;
}
#videoList { #videoList {
background-color: var(--white); background-color: var(--white);
z-index: 1; z-index: 1;

4
src/views/Home.vue
View File

@ -81,13 +81,13 @@ export default {
messageCommands: [ messageCommands: [
{ {
title: "Scan for Music files", title: "Scan for Music files",
subtitle: "Scan your server for music files…", subtitle: "Scann your server for music files…",
icon: "music", icon: "music",
command: "scanMusic", command: "scanMusic",
}, },
{ {
title: "Scan for Video files", title: "Scan for Video files",
subtitle: "Scan your server for video files…", subtitle: "Scann your server for video files…",
icon: "video", icon: "video",
command: "scanVideos", command: "scanVideos",
}, },