player setting

src/auto-imports.d.ts

@@ -220,6 +220,7 @@ declare global {
   const usePageLeave: typeof import('@vueuse/core')['usePageLeave']
   const useParallax: typeof import('@vueuse/core')['useParallax']
   const usePermission: typeof import('@vueuse/core')['usePermission']
+  const usePlayerStore: typeof import('./store/player')['usePlayerStore']
   const usePointer: typeof import('@vueuse/core')['usePointer']
   const usePointerSwipe: typeof import('@vueuse/core')['usePointerSwipe']
   const usePreferredColorScheme: typeof import('@vueuse/core')['usePreferredColorScheme']

src/components.d.ts

@@ -39,6 +39,7 @@ declare module '@vue/runtime-core' {
     ConfigNotification: typeof import('./views/config-notification.vue')['default']
     ConfigNotificcation: typeof import('./views/config-notificcation.vue')['default']
     ConfigParser: typeof import('./views/config-parser.vue')['default']
+    ConfigPlayer: typeof import('./views/config-player.vue')['default']
     ConfigProxy: typeof import('./views/config-proxy.vue')['default']
     copy: typeof import('./basic/ab-switch copy.vue')['default']
     Login: typeof import('./pages/login.vue')['default']

src/pages/index/config.vue

@@ -22,6 +22,8 @@ definePage({
 
     <config-proxy></config-proxy>
 
+    <config-player></config-player>
+
     <div fx-cer justify-end gap-8px col-span-2>
       <ab-button type="warn" @click="getConfig">Cancel</ab-button>
       <ab-button @click="setConfig">Apply</ab-button>

src/pages/index/player.vue

@@ -2,11 +2,22 @@
 definePage({
   name: 'Player',
 });
+
+const { url } = storeToRefs(usePlayerStore());
 </script>
 
 <template>
+  <template v-if="url === ''">
+    <div wh-full f-cer text-h1 text-primary>
+      <RouterLink to="/config" hover:underline
+        >Please set up the media player</RouterLink
+      >
+    </div>
+  </template>
+
   <iframe
-    src="http://192.168.0.100:8096"
+    v-else
+    :src="url"
     frameborder="0"
     allowfullscreen="true"
     w-full
@@ -15,5 +26,3 @@ definePage({
     rounded-12px
   ></iframe>
 </template>
-
-<style lang="scss" scope></style>

src/router/index.ts

@@ -6,6 +6,8 @@ const router = createRouter({
 
 router.beforeEach((to) => {
   const { isLogin } = useAuth();
+  const { type, url } = storeToRefs(usePlayerStore());
+
   if (!isLogin.value && to.path !== '/login') {
     return { name: 'Login' };
   }
@@ -14,6 +16,11 @@ router.beforeEach((to) => {
     return { name: 'Index' };
   }
 
+  if (type.value === 'jump' && url.value !== '' && to.path === '/player') {
+    open(url.value);
+    return false;
+  }
+
   watch(isLogin, (val) => {
     if (to.path === '/login' && val) {
       router.replace({ name: 'Index' });

src/store/player.ts

@@ -0,0 +1,13 @@
+type MediaPlayerType = 'jump' | 'iframe';
+
+export const usePlayerStore = defineStore('player', () => {
+  const types = ref<MediaPlayerType[]>(['jump', 'iframe']);
+  const type = useLocalStorage<MediaPlayerType>('media-player-type', 'jump');
+  const url = useLocalStorage<string>('media-player-url', '');
+
+  return {
+    types,
+    type,
+    url,
+  };
+});

src/views/ab-sidebar.vue

@@ -49,6 +49,7 @@ const items = [
     icon: Download,
     label: 'Downloader',
     path: '/downloader',
+    hidden: true,
   },
   {
     id: 5,

src/views/config-player.vue

@@ -0,0 +1,23 @@
+<script lang="ts" setup>
+const { types, type, url } = storeToRefs(usePlayerStore());
+</script>
+
+<template>
+  <ab-fold-panel title="Media Player Setting">
+    <div space-y-12px>
+      <ab-setting
+        type="select"
+        label="type"
+        v-model:data="type"
+        :prop="{ items: types }"
+      ></ab-setting>
+
+      <ab-setting
+        type="input"
+        label="url"
+        :prop="{ placeholder: 'media player url' }"
+        v-model:data="url"
+      ></ab-setting>
+    </div>
+  </ab-fold-panel>
+</template>