Merge pull request 'fix type "scan"' (#38 ) from dev into main

Reviewed-on: #38
use flat dialog for box view
2024-02-22 23:37:10 +01: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
3 changed files with 79 additions and 81 deletions
--- a/src/components/dialogs/AlbumViewer.vue
+++ b/src/components/dialogs/AlbumViewer.vue
@ -3,9 +3,8 @@
    <div id="albumViewer" class="flex-row">
      <div id="header" class="flex-column grow">
        <div id="background" :style="coverBackground" />
-        <div it="title" class="flex-column pa grow z1">
+        <div id="title" class="flex-column pa grow z1">
          <img class="glow ma" :src="cover" />
-
          <span id="stats" class="center">
            {{ selectedAlbum.title }}
            <br />
@ -18,20 +17,18 @@
            <b>{{ album_duration }}</b>

          </span>
-          <div class=" grow">
-
-          </div>
+          <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" @click="playProgress" v-if="selectedAlbum.progress">
-              <awesome-icon icon="play" size="2x" class="primary-text" title="Keep playing" />
+            <button class="flat ma-right" title="Keep playing" @click="playProgress" v-if="selectedAlbum.progress">
+              <awesome-icon icon="play" size="2x" class="primary-text" />
            </button>
-            <button class="flat ma-right" @click="playAlbum" v-else>
-              <awesome-icon icon="play" size="2x" class="white-text" title="Play" />
+            <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" />
--- a/src/components/dialogs/BoxViewer.vue
+++ b/src/components/dialogs/BoxViewer.vue
@ -1,70 +1,81 @@
 <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">
-          <DropDown v-if="$store.getters['user/isAdministrator']">
-            <button class="flat center" :title="visibility_text">
-              <awesome-icon :icon="visibility_icon" />
+          <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>
-            <template v-slot:dropdown-content>
-              <div>
-                <button v-for="(item, i) in $store.state.system.lists.visibility" :key="i" @click="setVisibility(item)">
-                  <awesome-icon :icon="getVisibilityIcon(item)" />{{
-                    getVisibilityText(item)
-                  }}
-                </button>
-                <hr />
-                <button v-if="!selectedBox.share._id" @click="shareEnable">
-                  <awesome-icon icon="share" />Share this box
-                </button>
-                <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>
-          <div class="grow flex-column">
-            <p class="ma4 center">
-              <span class="">
-                <b>{{ selectedBox.title }}</b>
-                <br />
-                <b>{{ box_videos.length }}</b> Videos
-              </span>
-            </p>
+            <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" class="white-text" />
+              </button>
+              <template v-slot:dropdown-content>
+                <div>
+                  <button v-for="(item, i) in $store.state.system.lists.visibility" :key="i" @click="setVisibility(item)">
+                    <awesome-icon :icon="getVisibilityIcon(item)" />{{
+                      getVisibilityText(item)
+                    }}
+                  </button>
+                  <hr />
+                  <button v-if="!selectedBox.share._id" @click="shareEnable">
+                    <awesome-icon icon="share" />Share this box
+                  </button>
+                  <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>
-          <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>
-
      <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	dfa44db91f	Merge pull request 'fix type "scan"' (#38 ) from dev into main All checks were successful continuous-integration/drone/push Build is passing Details Reviewed-on: #38	2024-02-22 23:37:10 +01: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