Player bar UI, context menu

Marekkon5 · Nov 18, 2023 · ee0a495 · ee0a495
1 parent d8a0493
commit ee0a495
Show file tree

Hide file tree

Showing 7 changed files with 116 additions and 17 deletions.
diff --git a/client/src/App.vue b/client/src/App.vue
@@ -259,7 +259,10 @@ watch(useRoute(), (r) => {
     // @ts-ignore
     contentContainer.value!.$el.style.overflowY = "hidden";
     if (r.path == '/quicktag') showSide();
-    if (r.path == '/tageditor') footer.value = true;
+    if (r.path == '/tageditor') {
+        hideSide();
+        footer.value = true;
+    }
 });
 
 // Show again scrollbar after transition

diff --git a/client/src/components/PlayerBar.vue b/client/src/components/PlayerBar.vue
@@ -3,8 +3,24 @@
 
     <div class="row q-mx-md">
         <!-- Meta -->
-        <div class="row q-mr-md" style="width: 17vw; max-width: 17vw;">
-            <div class="column q-mt-sm q-pt-xs" style="width: calc(100% - 50px);">
+        <div class="row" style="width: 17vw; max-width: 17vw;">
+
+            <!-- Album art -->
+            <div class='q-mt-sm'>
+                <q-img 
+                    :src='art' 
+                    width='46px' 
+                    height='46px' 
+                    class='rounded-borders' 
+                    :placeholder-src='PLACEHOLDER_IMG'
+                >
+                    <template v-slot:error>
+                        <q-img :src='PLACEHOLDER_IMG' width='46px' height='46px' class='rounded-borders'></q-img>
+                    </template>
+                </q-img>
+            </div>
+
+            <div class="column q-mt-sm q-pt-xs q-pl-sm" style="width: calc(100% - 50px);">
                 <div class="text-caption text-weight-bold full-width">
                     <div v-if="$1t.player.value.title" class="text-no-wrap overflow-hidden" style="text-overflow: ellipsis">
                         {{ $1t.player.value.title }}
@@ -18,10 +34,11 @@
                 </div>
             </div>
 
-            <!-- Controls -->
-            <div class="col q-mt-sm" style="margin-left: 16px">
-                <!-- Play button -->
-                <q-btn
+        </div>
+
+        <div class="col row">
+            <!-- Play button -->
+            <q-btn
                     round
                     flat
                     icon="mdi-play"
@@ -42,11 +59,8 @@
                     @click="$1t.player.value.pause()"
                     ref='playButton'
                 ></q-btn>
-            </div>
-        </div>
 
-        <div class="col">
-            <Waveform></Waveform>
+            <div><Waveform></Waveform></div>
         </div>
 
         <!-- Browse button -->
@@ -90,10 +104,11 @@
 <script lang='ts' setup>
 import Waveform from './Waveform.vue';
 import PlaylistDropZone from "./PlaylistDropZone.vue";
-import { Playlist } from '../scripts/utils';
-import { onDeactivated, onMounted, ref, watch } from 'vue';
+import { Playlist, httpUrl } from '../scripts/utils';
+import { computed, onDeactivated, onMounted, ref, watch } from 'vue';
 import { get1t } from '../scripts/onetagger';
 import { useRoute, useRouter } from 'vue-router';
+import { PLACEHOLDER_IMG } from '../scripts/quicktag';
 
 const $1t = get1t();
 const qtPlaylist = ref<Playlist>({});
@@ -130,4 +145,7 @@ watch(useRoute(), (r) => {
     if (r.path == '/quicktag') enablePlaylist.value = true;
     else enablePlaylist.value = false;
 });
+
+const art = computed(() => `${httpUrl()}/thumb?path=${encodeURIComponent($1t.player.value.path??'')}`);
+
 </script>
diff --git a/client/src/components/QuickTagContextMenu.vue b/client/src/components/QuickTagContextMenu.vue
@@ -2,19 +2,85 @@
     <q-menu touch-position context-menu class='no-menu-shadow'>
         <q-list>
 
+            <!-- Manual tag -->
             <q-item dense clickable @click='emit("manual-tag")' v-close-popup>
+                <q-item-section avatar>
+                    <q-icon name='mdi-magnify'></q-icon>
+                </q-item-section>
                 <q-item-section>
                     Manual Tag
                 </q-item-section>
             </q-item>
 
+            <!-- Edit tags -->
+            <q-item dense clickable v-close-popup @click='tagEditor'>
+                <q-item-section avatar>
+                    <q-icon name='mdi-pencil'></q-icon>
+                </q-item-section>
+                <q-item-section>
+                    Edit tags
+                </q-item-section>
+            </q-item>
+
+            <!-- Delete file -->
+            <q-item dense clickable v-close-popup @click='deleteFile'>
+                <q-item-section avatar>
+                    <q-icon name='mdi-delete' color='red'></q-icon>
+                </q-item-section>
+                <q-item-section class='text-red'>
+                    Delete
+                </q-item-section>
+            </q-item>
+
+
         </q-list>
     </q-menu>
 </template>
 
 <script lang='ts' setup>
+import { toRefs } from 'vue';
+import { get1t } from '../scripts/onetagger';
+import { useRouter } from 'vue-router';
+import { useQuasar } from 'quasar';
 
 const emit = defineEmits(['manual-tag']);
+const props = defineProps({
+    path: { type: String, required: true }
+});
+const { path } = toRefs(props);
+const $1t = get1t();
+const $q = useQuasar();
+const $router = useRouter();
+
+// Open tag editor
+function tagEditor() {
+    $1t.quickTag.value.toTagEditor = path.value;
+    $router.push('/tageditor');
+}
+
+// Delete file option
+function deleteFile() {
+    // Confirm dialog
+    $q.dialog({
+        title: 'Delete File',
+        message: 'Do you really want to delete the selected file?',
+        persistent: false,
+        ok: {
+            color: 'red'                        
+        },
+        cancel: {
+            color: ''
+        }
+    }).onOk(() => {
+        if ($1t.player.value.path == path.value)
+            $1t.player.value.stop();
+        $1t.send('deleteFiles', { paths: [path.value] });
+        setTimeout(() => {
+            $1t.quickTag.value.track.removeAll();
+            $1t.loadQuickTag();
+        }, 50);
+    });
+}
 
 </script>
 

diff --git a/client/src/components/QuickTagTile.vue b/client/src/components/QuickTagTile.vue
@@ -94,7 +94,7 @@
 </template>
 
 <script lang='ts' setup>
-import { computed, ref, toRef } from 'vue';
+import { computed, toRef } from 'vue';
 import { get1t } from '../scripts/onetagger.js';
 import { CAMELOT_KEYS, CustomTagInfo, KEY_COLORS, OPENKEY_KEYS, PLACEHOLDER_IMG, QTTrack } from '../scripts/quicktag.js';
 import { httpUrl } from '../scripts/utils.js';

diff --git a/client/src/scripts/quicktag.ts b/client/src/scripts/quicktag.ts
@@ -11,6 +11,9 @@ class QuickTag {
     /// Number of tracks to save
     saving: number = 0;
 
+    // Track to load in tag editor
+    toTagEditor?: string;
+
     constructor() {}
 
     /// Wait for saving to finish

diff --git a/client/src/views/QuickTag.vue b/client/src/views/QuickTag.vue
@@ -50,15 +50,21 @@
         <div v-for='item in tracks' :key='item.path' v-if='!$1t.settings.value.quickTag.thinTracks'>
             <q-intersection style='height: 116px;' @click.native='(e: MouseEvent) => trackClick(item, e)' once>
                 <QuickTagTile :track='item' :no-art-cache="noArtCacheList.includes(item.path)"></QuickTagTile>
-                <QuickTagContextMenu @manual-tag="onManualTag(item.path)"></QuickTagContextMenu>
+                <QuickTagContextMenu 
+                    @manual-tag="onManualTag(item.path)"
+                    :path="item.path"
+                ></QuickTagContextMenu>
             </q-intersection>
         </div>
         <!-- Thin tracks -->
         <div :style='`width: ${tracklistWidth}`'>
             <div v-for='(item, i) in tracks' :key='item.path' v-if='$1t.settings.value.quickTag.thinTracks'>
                 <q-intersection style='height: 32px;' @click.native='(e: MouseEvent) => trackClick(item, e)' once>
                     <QuickTagTileThin :track='item' :odd='i % 2 == 1'></QuickTagTileThin>
-                    <QuickTagContextMenu @manual-tag="onManualTag(item.path)"></QuickTagContextMenu>
+                    <QuickTagContextMenu 
+                        @manual-tag="onManualTag(item.path)"
+                        :path="item.path"
+                    ></QuickTagContextMenu>
                 </q-intersection>
             </div>
         </div>

diff --git a/client/src/views/TagEditor.vue b/client/src/views/TagEditor.vue
@@ -747,7 +747,10 @@ onMounted(() => {
     loadFiles();
 
     // Load QT track
-    if ($1t.quickTag.value.track.tracks.length == 1) {
+    if ($1t.quickTag.value.toTagEditor) {
+        loadFile($1t.quickTag.value.toTagEditor);
+        $1t.quickTag.value.toTagEditor = undefined;
+    } else if ($1t.quickTag.value.track.tracks.length == 1) {
         loadFile($1t.quickTag.value.track.tracks[0].path);
     }
 })