remove for offline content

- added translateion for logout
- destroy offline strorage with player

src/assets/version.json

@@ -1,3 +1,3 @@
 {
-  "date": "2023-09-22"
+  "date": "2023-10-08"
 }

src/components/Library.vue

@@ -87,7 +87,6 @@ const setProxy = async () => {
   OpenOffline = async () => {
     if (window.offline) {
       const songs = await window.offline.list();
-      console.log();
       results.resetItems();
       results.setItem('songs', {
         title: 'Hyp • ' + t('title.offline'),
@@ -439,7 +438,7 @@ onMounted(async () => {
       <AlbumItem
         :name="t('title.offline')"
         :grad="useRand()"
-        @open-album="OpenOffline()" />
+        @open-album="OpenOffline" />
       <AlbumItem
         v-for="i in list"
         :key="i.name"
@@ -489,7 +488,7 @@ onMounted(async () => {
       </p>
     </form>
 
-    <button v-if="auth" @click="Logout" class="logout textbox">Logout</button>
+    <button v-if="auth" @click="Logout" class="logout textbox">{{ t('title.logout') }}</button>
   </div>
 </template>
 

src/components/Player.vue

@@ -124,6 +124,10 @@ function destroy() {
     window.audioPlayer.destroy();
     window.audioPlayer = undefined;
   }
+  if (window.offline) {
+    window.offline.destroy();
+    window.offline = undefined;
+  }
 }
 
 const titleState = ['Playing', 'Paused'];

src/components/Search.vue

@@ -1,5 +1,12 @@
 <script setup>
-import { ref, watch, onActivated, onUpdated, onDeactivated } from 'vue';
+import {
+  ref,
+  watch,
+  computed,
+  onActivated,
+  onUpdated,
+  onDeactivated,
+} from 'vue';
 
 import Btn from './Btn.vue';
 import SongItem from './SongItem.vue';
@@ -29,6 +36,10 @@ const emit = defineEmits(['play-urls']),
   isSearch = ref(/search/.test(location.pathname)),
   albumMenu = ref(false);
 
+const plId = computed(
+  (x = results.items?.songs?.items?.[0]) => x?.playlistId || !!x?.offlineUri,
+);
+
 const shuffleAdd = () => {
     const songs = results.items.songs.items.map(i => ({
         url: i.url,
@@ -114,22 +125,25 @@ const shuffleAdd = () => {
       });
     }
   },
-  removePlaylist = async id => {
+  removePlaylist = async () => {
     const consent = confirm('Confirm?');
 
-    console.log(id, consent);
+    if (!plId.value || !consent) return;
 
-    if (!id || !consent) return;
-
-    console.log(id, consent);
-
-    if (useVerifyAuth(id)) {
-      const { message } = await useAuthRemovePlaylist(id);
+    if (plId.value === true)
+      window.offline &&
+        Promise.all(
+          (await window.offline.list()).map(i =>
+            window.offline.remove(i.offlineUri),
+          ),
+        );
+    else if (useVerifyAuth(plId.value)) {
+      const { message } = await useAuthRemovePlaylist(plId.value);
       if (message != 'ok') {
         alert(message);
         return;
       }
-    } else useRemovePlaylist(id);
+    } else useRemovePlaylist(plId.value);
 
     useRoute('/library');
     nav.state.page = 'library';
@@ -286,11 +300,9 @@ onDeactivated(() => {
               @click="shuffleAdd"></button>
 
             <button
-              v-if="results.items?.songs?.items?.[0]?.playlistId"
+              v-if="plId"
               class="bi bi-trash3 clickable"
-              @click="
-                removePlaylist(results.items?.songs?.items?.[0]?.playlistId)
-              "></button>
+              @click="removePlaylist"></button>
           </div>
         </Transition>
       </template>
@@ -323,6 +335,7 @@ onDeactivated(() => {
         :key="song.url || song.id"
         :index="index"
         :playlistId="song.playlistId"
+        :offlineUri="song.offlineUri"
         :author="song.uploaderName || song.artist || song.subtitle"
         :title="song.title || song.name"
         :channel="

src/components/SongItem.vue

@@ -27,6 +27,7 @@ const props = defineProps({
     play: String,
     art: String,
     playlistId: String,
+    offlineUri: String,
   }),
   emit = defineEmits(['open-song', 'nxt-song', 'remove']);
 
@@ -60,6 +61,7 @@ const openSong = el => {
       thumbnails: [{ url: props.art }],
     });
   },
+  rm = () => emit('remove', props.index),
   Remove = () => {
     const auth = useStore().getItem('auth'),
       isRemote = results.items?.songs?.title?.startsWith('Playlist - ');
@@ -80,13 +82,12 @@ const openSong = el => {
         console.log(json);
 
         if (!json.error) {
-          if (json.message == 'ok') emit('remove', props.index);
+          if (json.message == 'ok') rm();
         } else alert(json.error);
       });
-    } else
-      useUpdatePlaylist(props.playlistId, props.index, () =>
-        emit('remove', props.index),
-      );
+    } else if (props.offlineUri)
+      window.offline && window.offline.remove(props.offlineUri).then(rm);
+    else useUpdatePlaylist(props.playlistId, props.index, () => rm());
   },
   Share = () => {
     const data = {
@@ -132,7 +133,7 @@ onMounted(() => {
       <Transition name="fade">
         <div v-if="show" class="popup ign">
           <span
-            v-if="playlistId"
+            v-if="playlistId || offlineUri"
             class="bi bi-dash-lg clickable ign"
             @click="Remove"></span>
           <span

src/locales/en.json

@@ -12,6 +12,7 @@
     "spotlight": "Spotlight",
     "community": "Community",
     "login": "Login",
+    "logout": "Logout",
     "local": "Local",
     "remote": "Remote",
     "search": "Search",