From 487064cbe9eb76751a59cc02b0e97f8d17e30adc Mon Sep 17 00:00:00 2001
From: Rewrite0 <49576640+Rewrite0@users.noreply.github.com>
Date: Sun, 28 May 2023 15:57:21 +0800
Subject: [PATCH] player setting

---
 src/auto-imports.d.ts       |  1 +
 src/components.d.ts         |  1 +
 src/pages/index/config.vue  |  2 ++
 src/pages/index/player.vue  | 15 ++++++++++++---
 src/router/index.ts         |  7 +++++++
 src/store/player.ts         | 13 +++++++++++++
 src/views/ab-sidebar.vue    |  1 +
 src/views/config-player.vue | 23 +++++++++++++++++++++++
 8 files changed, 60 insertions(+), 3 deletions(-)
 create mode 100644 src/store/player.ts
 create mode 100644 src/views/config-player.vue

diff --git a/src/auto-imports.d.ts b/src/auto-imports.d.ts
index 10f6f225..913b102e 100644
--- a/src/auto-imports.d.ts
+++ b/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']
diff --git a/src/components.d.ts b/src/components.d.ts
index 415117f1..c494a931 100644
--- a/src/components.d.ts
+++ b/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']
diff --git a/src/pages/index/config.vue b/src/pages/index/config.vue
index e2b85722..857c64ba 100644
--- a/src/pages/index/config.vue
+++ b/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>
diff --git a/src/pages/index/player.vue b/src/pages/index/player.vue
index 58559801..c97ec45a 100644
--- a/src/pages/index/player.vue
+++ b/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>
diff --git a/src/router/index.ts b/src/router/index.ts
index 502ea848..8a9ff55a 100644
--- a/src/router/index.ts
+++ b/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' });
diff --git a/src/store/player.ts b/src/store/player.ts
new file mode 100644
index 00000000..3e403406
--- /dev/null
+++ b/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,
+  };
+});
diff --git a/src/views/ab-sidebar.vue b/src/views/ab-sidebar.vue
index 4524760f..715fafcf 100644
--- a/src/views/ab-sidebar.vue
+++ b/src/views/ab-sidebar.vue
@@ -49,6 +49,7 @@ const items = [
     icon: Download,
     label: 'Downloader',
     path: '/downloader',
+    hidden: true,
   },
   {
     id: 5,
diff --git a/src/views/config-player.vue b/src/views/config-player.vue
new file mode 100644
index 00000000..888a07ff
--- /dev/null
+++ b/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>