add a diffrent icon, if media is playing

use flat dialog for box view
Merge branch 'main' into dev
2024-09-24 00:00:30 +02:00 · 2024-02-22 23:32:00 +01:00 · 2024-02-22 22:08:39 +01:00 · 2024-02-22 22:07:05 +01:00 · 2024-02-21 16:06:47 +01:00 · 2024-02-21 15:43:46 +01:00
7 changed files with 180 additions and 151 deletions
--- a/public/config.json
+++ b/public/config.json
@@ -1,5 +1,5 @@
 {
  "backend_de": "http://localhost:31204",
  "backend_dev": "https://webplay.rocks",
-  "backend": "https://webplay.rocks"
+  "backend": ""
 }
--- a/public/static/app.css
+++ b/public/static/app.css
@@ -625,9 +625,8 @@ td.fillCell>* {
  }

  #artists .artistCover {
-    min-width: 100%;
+    width: 160px;
    height: initial;
-    min-height: 128px;
  }

  #artists .artistName {
--- a/src/components/base-components/Dialog.vue
+++ b/src/components/base-components/Dialog.vue
@@ -420,11 +420,17 @@ export default {
  flex-grow: 1;
 }

+
 .dialog-body.flat-dialog-header {
  border-top-left-radius: 8px;
  border-top-right-radius: 8px;
 }

+.dialog-window.fullscreen .dialog-body.flat-dialog-header {
+  border-top-left-radius: 0px;
+  border-top-right-radius: 0px;
+}
+
 .dialog-body.hideXScroll {
  overflow-x: hidden;
 }
@@ -492,6 +498,11 @@ export default {
    border-top-right-radius: 0;
  }

+  .dialog-body.flat-dialog-header {
+    border-top-left-radius: 0;
+    border-top-right-radius: 0;
+  }
+
  .dialog-window.playing {
    margin-bottom: 60px;
    height: calc(100% - 60px);
--- a/src/components/dialogs/AlbumViewer.vue
+++ b/src/components/dialogs/AlbumViewer.vue
@@ -1,17 +1,46 @@
 <template>
-  <DialogBase ref="dialogWindow" :title="album_title" @canceled="closed" :showFooter="false" :disableXscroll="true" :disableYscroll="true">
+  <DialogBase ref="dialogWindow" :title="album_title" @canceled="closed" :showFooter="false" :disableXscroll="true" :disableYscroll="true" :flatDialogHeader="true">
    <div id="albumViewer" class="flex-row">
-      <div id="header" class="flex-column">
+      <div id="header" class="flex-column grow">
        <div id="background" :style="coverBackground" />
-        <div class="grow z1 center flex-column">
-          <img class="glow ma24" :src="cover" @dblclick="dblclick" />
-        </div>
-        <awesome-icon icon="star" size="2x" class="favourite ma4" :class="{ active: isFavourite }" @click="toggleFavourite" title="Favourite" />
-        <awesome-icon icon="play" size="2x" class="keepPlaying ma4 primary-text" @click="playProgress" v-if="selectedAlbum.progress" title="Keep playing" />
-        <div id="stats" class="flex-row z1">
+        <div id="title" class="flex-column pa grow z1">
+          <img class="glow ma" :src="cover" />
+          <span id="stats" class="center">
+            {{ selectedAlbum.title }}
+            <br />
+            by
+            <b @click="gotoArtist" class="pointer">{{ selectedAlbum.artist_name }}</b>
+            <br />
+            <span v-if="album_year">
+              from year <b>{{ album_year }}</b> </span><br />
+            <b>{{ album_tracks.length }}</b> Tracks with a duration of
+            <b>{{ album_duration }}</b>
+          </span>
+          <div class="grow"> </div>
+          <div class="flex-row grow ma-top">
+            <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="['far', 'star']" size="2x" class="white-text favourite" v-else />
+            </button>
+            <button class="flat ma-right" title="Keep playing" v-if="selectedAlbum._id == selectedTrackContainer._id && isPlaying">
+              <awesome-icon icon="compact-disc" size="2x" class="primary-text" />
+            </button>
+            <button class="flat ma-right" title="Keep playing" @click="playProgress" v-else-if="selectedAlbum.progress">
+              <awesome-icon icon="play" size="2x" class="primary-text" />
+            </button>
+            <button class="flat ma-right" title="Play" @click="playAlbum" v-else>
+              <awesome-icon icon="play" size="2x" class="white-text" />
+            </button>
+            <button @click="gotoPrevAlbum" class="flat ma-left ma-right" :title="prevAlbum.name" :disabled="!prevAlbum._id">
+              <awesome-icon icon="angle-left" class="ma4 white-text" />
+            </button>
+            <button @click="gotoNextAlbum" class="flat" :title="nextAlbum.name" :disabled="!nextAlbum._id">
+              <awesome-icon icon="angle-right" class="ma4 white-text" />
+            </button>
+            <div class="grow"></div>
            <DropDown v-if="$store.getters['user/isAdministrator']">
              <button class="flat center" :title="visibility_text">
-              <awesome-icon :icon="visibility_icon" />
+                <awesome-icon :icon="visibility_icon" class="white-text" />
              </button>
              <template v-slot:dropdown-content>
                <div>
@@ -33,24 +62,9 @@
                </div>
              </template>
            </DropDown>
-          <div class="grow flex-column">
-            <p class="ma4 center">
-              <span class="grow center">
-                by
-                <b @click="gotoArtist" class="pointer">{{
-                  selectedAlbum.artist_name
-                }}</b>
-                <br />
-                <span v-if="album_year">
-                  from year <b>{{ album_year }}</b> </span><br />
-                <b>{{ album_tracks.length }}</b> Tracks with a duration of
-                <b>{{ album_duration }}</b>
-              </span>
-            </p>
-          </div>
            <DropDown v-if="$store.getters['user/isAdministrator']">
              <button class="flat center">
-              <awesome-icon icon="ellipsis-v" />
+                <awesome-icon icon="ellipsis-v" class="white-text" />
              </button>
              <template v-slot:dropdown-content>
                <div>
@@ -69,6 +83,7 @@
            </DropDown>
          </div>
        </div>
+      </div>
      <ul id="trackList" class="tracks">
        <li v-for="track in selectedAlbum.tracks" :key="track._id">
          <TrackItem :track="track" :showCover="false" />
@@ -100,7 +115,7 @@ export default {
        window.location.origin + "/#/share?id=" + this.selectedAlbum.share._id;
      navigator.clipboard.writeText(url);
    },
-    dblclick() {
+    playAlbum() {
      this.$store.commit("tracks/resetSelectedTrack");
      this.$store.commit("radios/resetSelectedRadio");
      this.$store.dispatch("tracks/playContainer", this.selectedAlbum);
@@ -231,7 +246,9 @@ export default {
      nextAlbum: ["albums/nextAlbum"],
      selectedAlbum: ["albums/selectedAlbum"],
      selectedTrack: ["tracks/selectedTrack"],
+      selectedTrackContainer: ["tracks/selectedTrackContainer"],
      favourites: ["user/favourites"],
+      isPlaying: ["player/isPlaying"],
    }),
    album_title() {
      return this.selectedAlbum.title;
@@ -332,11 +349,13 @@ export default {

 <style scoped>
 #albumViewer {
-  height: 366px;
+  height: 400px;
  width: 640px;
 }

 #header {
+  width: 304px;
+  height: 400px;
  position: relative;
  background-color: black;
 }
@@ -348,13 +367,8 @@ export default {

 #stats {
  z-index: 2;
-  align-items: center;
  color: var(--white);
  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 {
--- a/src/components/dialogs/ArtistViewer.vue
+++ b/src/components/dialogs/ArtistViewer.vue
@@ -17,11 +17,14 @@
              <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 />
            </button>
-            <button class="flat ma-right" v-if="selectedArtist.progress">
-              <awesome-icon icon="play" size="2x" class="primary-text " @click="playProgress" title="Keep playing" />
+            <button class="flat ma-right" title="Keep playing" v-if="selectedArtist._id == selectedTrackContainer._id && isPlaying">
+              <awesome-icon icon="compact-disc" size="2x" class="primary-text" />
            </button>
-            <button class="flat ma-right" v-else>
-              <awesome-icon icon="play" size="2x" class="white-text" @click="playArtist" title="Play" />
+            <button class="flat ma-right" @click="playProgress" title="Keep playing" v-else-if="selectedArtist.progress">
+              <awesome-icon icon="play" size="2x" class="primary-text" />
+            </button>
+            <button class="flat ma-right" @click="playArtist" title="Play" v-else>
+              <awesome-icon icon="play" size="2x" class="white-text" />
            </button>
            <button @click="gotoPrevArtist" class="flat ma-left ma-right" :title="prevArtist.name" :disabled="!prevArtist._id">
              <awesome-icon icon="angle-left" class="ma4 white-text" />
@@ -176,6 +179,7 @@ export default {
      nextArtist: ["artists/nextArtist"],
      selectedArtist: ["artists/selectedArtist"],
      selectedTrack: ["tracks/selectedTrack"],
+      selectedTrackContainer: ["tracks/selectedTrackContainer"],
      favourites: ["user/favourites"],
      isPlaying: ["player/isPlaying"]
    }),
--- a/src/components/dialogs/BoxViewer.vue
+++ b/src/components/dialogs/BoxViewer.vue
@@ -1,18 +1,38 @@
 <template>
-  <DialogBase ref="dialogWindow" :title="selectedBox.title" @canceled="closed" :showFooter="false" :closeOnEscape="selectedVideo._id == null" :disableXscroll="true" :disableYscroll="true">
+  <DialogBase ref="dialogWindow" :title="selectedBox.title" @canceled="closed" :showFooter="false" :closeOnEscape="selectedVideo._id == null" :disableXscroll="true" :disableYscroll="true" :flatDialogHeader="true">
    <div id="boxViewer" class="flex-row">
-      <div id="header" class="flex-column">
+      <div id="header" class="flex-column grow">
        <div id="background" :style="coverBackground" />
-        <div class="grow z1 center flex-column">
-          <img class="glow ma24" :src="cover" @dblclick="dblclick" />
-        </div>
-        <awesome-icon icon="star" size="2x" class="favourite ma4 z2" :class="{ active: isFavourite }" @click="toggleFavourite" />
-        <awesome-icon icon="play" size="2x" class="keepPlaying ma4 primary-text" @click="playProgress" v-if="selectedBox.progress" title="Keep playing" />
+        <div id="title" class="grow z1 pa flex-column">
+          <img class="glow ma" :src="cover" />
+          <span id="stats" class="center">
+            <b>{{ selectedBox.title }}</b>
+            <br />
+            <b>{{ box_videos.length }}</b> Videos
+          </span>

-        <div id="stats" class="flex-row z1">
+          <div class="grow"> </div>
+          <div class="flex-row ma-top grow">
+            <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="['far', 'star']" size="2x" class="white-text favourite" v-else />
+            </button>
+            <button class="flat ma-right" title="Keep playing" @click="playProgress" v-if="selectedBox.progress">
+              <awesome-icon icon="play" size="2x" class="primary-text" />
+            </button>
+            <button class="flat ma-right" title="Play" @dblclick="dblclick" v-else>
+              <awesome-icon icon="play" size="2x" class="white-text" />
+            </button>
+            <button @click="gotoPrevBox" class="flat ma-left ma-right" :title="prevBox.name" :disabled="!prevBox._id">
+              <awesome-icon icon="angle-left" class="ma4 white-text" />
+            </button>
+            <button @click="gotoNextBox" class="flat" :title="nextBox.name" :disabled="!nextBox._id">
+              <awesome-icon icon="angle-right" class="ma4 white-text" />
+            </button>
+            <div class="grow"></div>
            <DropDown v-if="$store.getters['user/isAdministrator']">
              <button class="flat center" :title="visibility_text">
-              <awesome-icon :icon="visibility_icon" />
+                <awesome-icon :icon="visibility_icon" class="white-text" />
              </button>
              <template v-slot:dropdown-content>
                <div>
@@ -34,18 +54,9 @@
                </div>
              </template>
            </DropDown>
-          <div class="grow flex-column">
-            <p class="ma4 center">
-              <span class="">
-                <b>{{ selectedBox.title }}</b>
-                <br />
-                <b>{{ box_videos.length }}</b> Videos
-              </span>
-            </p>
-          </div>
            <DropDown v-if="$store.getters['user/isAdministrator']">
              <button class="flat center">
-              <awesome-icon icon="ellipsis-v" />
+                <awesome-icon icon="ellipsis-v" class="white-text" />
              </button>
              <template v-slot:dropdown-content>
                <div>
@@ -64,7 +75,7 @@
            </DropDown>
          </div>
        </div>
-
+      </div>
      <ul id="videoList" class="videos">
        <li v-for="item in selectedBox.videos" :key="item._id">
          <VideoItem :video="item" />
@@ -265,7 +276,7 @@ export default {

 <style scoped>
 #boxViewer {
-  height: 462px;
+  height: 486px;
 }

 #header {
@@ -280,13 +291,8 @@ export default {

 #stats {
  z-index: 2;
-  align-items: center;
  color: var(--white);
  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 {
@@ -294,11 +300,6 @@ export default {
  height: 32px;
 }

-#stats p {
-  max-width: 192px;
-  align-self: center;
-}
-
 #videoList {
  background-color: var(--white);
  z-index: 1;
--- a/src/views/Home.vue
+++ b/src/views/Home.vue
@@ -81,13 +81,13 @@ export default {
      messageCommands: [
        {
          title: "Scan for Music files",
-          subtitle: "Scann your server for music files…",
+          subtitle: "Scan your server for music files…",
          icon: "music",
          command: "scanMusic",
        },
        {
          title: "Scan for Video files",
-          subtitle: "Scann your server for video files…",
+          subtitle: "Scan your server for video files…",
          icon: "video",
          command: "scanVideos",
        },
Author	SHA1	Message	Date
Artem Anufrij	78e89d0c02	add a diffrent icon, if media is playing All checks were successful continuous-integration/drone Build is passing Details continuous-integration/drone/pr Build is passing Details	2024-09-24 00:00:30 +02:00
Artem Anufrij	f3bfe8b9ed	use flat dialog for box view All checks were successful continuous-integration/drone/push Build is passing Details continuous-integration/drone/pr Build is passing Details	2024-02-22 23:32:00 +01:00
Artem Anufrij	7e014b29a2	Merge branch 'main' into dev All checks were successful continuous-integration/drone/push Build is passing Details continuous-integration/drone/pr Build is passing Details	2024-02-22 22:08:39 +01:00
Artem Anufrij	d6a1e55e0d	fix type "scan" All checks were successful continuous-integration/drone/push Build is passing Details continuous-integration/drone/pr Build is passing Details	2024-02-22 22:07:05 +01:00
Artem Anufrij	a96c3ccacb	public/config.json aktualisiert All checks were successful continuous-integration/drone/push Build is passing Details	2024-02-21 16:06:47 +01:00
Artem Anufrij	ba175afbf7	public/config.json aktualisiert All checks were successful continuous-integration/drone Build is passing Details	2024-02-21 15:43:46 +01:00
Artem Anufrij	2ed91884df	Merge pull request 'fix round corners' (#36 ) from dev into main All checks were successful continuous-integration/drone/push Build is passing Details Reviewed-on: #36	2023-11-05 18:38:59 +01:00
Artem Anufrij	37e4856cdc	fix round corners All checks were successful continuous-integration/drone/push Build is passing Details continuous-integration/drone/pr Build is passing Details	2023-11-05 18:37:01 +01:00
Artem Anufrij	3dd098584c	Merge pull request 'Flat Album dialog' (#34 ) from dev into main All checks were successful continuous-integration/drone Build is passing Details Reviewed-on: #34	2023-11-05 18:15:02 +01:00
Artem Anufrij	9ab6c3bb94	Merge branch 'main' into dev	2023-11-05 18:14:38 +01:00
Artem Anufrij	0f931e218a	use flat dialog for albums	2023-11-05 18:12:41 +01:00
Artem Anufrij	96fe5f0505	use smaller artists cover All checks were successful continuous-integration/drone/push Build is passing Details	2023-10-05 15:50:11 +02:00