From fa29e9839bbf66d48c7f8e62ee9118e5014758b8 Mon Sep 17 00:00:00 2001
From: WRXinYue <3322543587@qq.com>
Date: Fri, 23 Aug 2024 16:04:43 +0800
Subject: [PATCH] feat: add wallpaper video player

---
 demo/valaxy.config.ts                         |   2 +
 theme/assets/icon/pause@32x32.png             | Bin 0 -> 721 bytes
 .../{play-video.png => icon/play@32x32.png}   | Bin
 theme/components/SakuraBackgroundDisplay.vue  |  83 +++++++++++++++---
 theme/components/SakuraBanner.vue             |  10 ++-
 .../themes/InfoOverlayThemeSakura.vue         |  12 ++-
 theme/node/config.ts                          |   2 +
 theme/stores/wallpaper.ts                     |   4 +-
 theme/types/index.d.ts                        |   8 ++
 9 files changed, 105 insertions(+), 16 deletions(-)
 create mode 100644 theme/assets/icon/pause@32x32.png
 rename theme/assets/{play-video.png => icon/play@32x32.png} (100%)

diff --git a/demo/valaxy.config.ts b/demo/valaxy.config.ts
index 5ed73a9d..7bec65ae 100644
--- a/demo/valaxy.config.ts
+++ b/demo/valaxy.config.ts
@@ -30,6 +30,8 @@ export default defineConfig<ThemeConfig>({
         'https://wrxinyue-images.s3.bitiful.net/wallpaper/Genshin Impact - Yae Miko (4) Cybust PC.mp4',
         'https://wrxinyue-images.s3.bitiful.net/pc-wallpaper/wallhaven-yxwy7k.jpg',
       ],
+      playerUrl: 'https://valaxy-theme-sakura.s3.bitiful.net/PV/563098369-1-208.mp4',
+      // playerUrl: 'https://valaxy-theme-sakura.s3.bitiful.net/PV/Original PV Little love song MONGOL 800 cover by Amatsuki.mp4',
       style: '',
 
       typewriter: true,
diff --git a/theme/assets/icon/pause@32x32.png b/theme/assets/icon/pause@32x32.png
new file mode 100644
index 0000000000000000000000000000000000000000..22b719ab30a3d1b28efa90131a2c3a16689ee0c7
GIT binary patch
literal 721
zcmeAS@N?(olHy`uVBq!ia0vp^3LwnE3?yBabR7dyTLOGST!D0~Pe{C97!bwzh5`|U
zjZC5m!nq&bKfZtGa#eQT#`#l#f}cJ<-M41m%jb6<KfIn5mH7JAy}P$AynXZF!M!Wb
zp4_@};l$q6b0@WTbk^4AC!}UX#3u(uty(mH*_7@RhxcAQd-TTjvnP-2ozmHL=J<i_
zOJ~fVI;FX^qQ0o~*umYaX7tbM@9%GJ-Lz)KnpqQg1Ub`y?iMKt@(X78bHn`Q{iT!A
zv<^zVYHM^besN6vrD@Mb1_s6*o-U3d7N>iIGs~L{1X?)cLe_3`G!trK+^JJ>`}6<*
z>(fpz-BSCuCgFav`sS1G)?7<6c_Zw6{rM7mnaukarDs^BWKLQl`Qq7v>z?<0k3Bd#
zJNCuz#C@H%2FuFLkINsh7Hu+gTluTw(UZnf)gu1~H4C&l1?F(O@uw?%KU>LEeey+C
zs8ExGhO8vx%+Rm$3GxQ7Zq12nWEG5fYO7W-O{1UbI!|Te$?(RF<p=g;YwyTiqVxS&
z#YM(B8qXHDIz722_<!#qhp*>-<_F%1v#~sP`OrFLA+GZ>na;M)R1Ze3msPPiy|l|K
zcui96im!=>GdwNi)^l>@FxU2`Si9wmUOPU$Ys2Y|v?Yn22PVfl&5)Wk@5dI!60ZRJ
zi~rTmY;-wLc|*}e)nnRfOO`y}75d&+KSa!%_-p1G-H#8au$)_2rDo<;62Ebc2#Z-(
zN)_wxomY9H?@C^~w>HUIXKnf)yS&Gzr(Zs0F!iC-;Tz&JrcK+dz?Bh@))M{vr*uSr
zZ>DnROfl`O{R=arZ^zHGyzf<gdZ~Wxx$f_*xAq-8)08qlU-bC5+MQD?=QNuB&iz`p
oqw4d^$NQ&m-~I2{+h6reAM677=N<h$85qY5p00i_>zopr02xnRL;wH)

literal 0
HcmV?d00001

diff --git a/theme/assets/play-video.png b/theme/assets/icon/play@32x32.png
similarity index 100%
rename from theme/assets/play-video.png
rename to theme/assets/icon/play@32x32.png
diff --git a/theme/components/SakuraBackgroundDisplay.vue b/theme/components/SakuraBackgroundDisplay.vue
index 7cca14a0..a39076db 100644
--- a/theme/components/SakuraBackgroundDisplay.vue
+++ b/theme/components/SakuraBackgroundDisplay.vue
@@ -4,6 +4,8 @@ import { isVideoUrl } from '../utils'
 import { getLocalStorageItem, setLocalStorageItem } from '../utils/storage'
 import { useSakuraAppStore } from '../stores'
 import { useThemeConfig } from '../composables'
+import playIconUrl from '../assets/icon/play@32x32.png'
+import pauseIconUrl from '../assets/icon/pause@32x32.png'
 
 const props = withDefaults(defineProps<{
   urls?: string[] | string
@@ -21,6 +23,8 @@ const themeConfig = useThemeConfig()
 const urls = computed(() => props.urls || themeConfig.value.banner.urls || '')
 const currentWallpaperUrl = computed(() => typeof urls.value === 'string' ? urls.value : urls.value[currentIndex.value])
 const isCurrentMediaVideo = computed(() => isVideoUrl(currentWallpaperUrl.value))
+const currentIconUrl = computed(() => sakura.isPlaying ? pauseIconUrl : playIconUrl)
+const banner = computed(() => themeConfig.value.banner)
 
 watch(() => sakura.wallpaperIndex[storageKey], (newIndex) => {
   setLocalStorageItem(storageKey, newIndex!)
@@ -31,6 +35,10 @@ watch(() => urls.value.length, async (length) => {
   sakura.wallpaperLength[storageKey] = length
 })
 
+function togglePlayPause() {
+  sakura.isPlaying = !sakura.isPlaying
+}
+
 onMounted(() => {
   currentIndex.value = getLocalStorageItem(storageKey) || 0
   sakura.wallpaperIndex[storageKey] = currentIndex.value
@@ -39,16 +47,69 @@ onMounted(() => {
 </script>
 
 <template>
-  <div class="sakura-background-display h-100vh w-full">
-    <template v-if="isCurrentMediaVideo">
-      <video :key="currentWallpaperUrl" class="block h-full w-full bg-cover object-cover" preload="auto" autoplay loop muted>
-        <source :src="currentWallpaperUrl" type="video/mp4">
-        Your browser does not support video tags
-      </video>
-    </template>
-    <template v-else>
-      <img v-if="currentWallpaperUrl" alt="Image Wallpaper" class="block h-full w-full bg-cover bg-center object-cover" :src="currentWallpaperUrl">
-      <div v-else class="default-wallpaper h-full w-full" />
-    </template>
+  <div class="sakura-background-display h-100vh w-full overflow-hidden">
+    <Transition
+      :name="sakura.wallpaperOperation === 'nextMedia' ? 'slide-right'
+        : sakura.wallpaperOperation === 'prevMedia' ? 'slide-left'
+          : 'fade'"
+      mode="out-in"
+    >
+      <template v-if="sakura.isPlaying || isCurrentMediaVideo">
+        <video
+          :key="sakura.isPlaying ? banner.playerUrl : currentWallpaperUrl"
+          class="min-h-full min-w-full object-cover"
+          preload="auto" autoplay :loop="!sakura.isPlaying" :muted="!sakura.isPlaying"
+          :disablePictureInPicture="banner.disablePictureInPicture"
+          @ended="sakura.isPlaying = false"
+        >
+          <source :src="sakura.isPlaying ? banner.playerUrl : currentWallpaperUrl" type="video/mp4">
+          Your browser does not support video tags
+        </video>
+      </template>
+      <template v-else>
+        <img v-if="currentWallpaperUrl" :key="currentWallpaperUrl" alt="Image Wallpaper" class="block h-full w-full bg-cover bg-center object-cover" :src="currentWallpaperUrl">
+        <div v-else class="default-wallpaper h-full w-full" />
+      </template>
+    </Transition>
   </div>
+  <img :src="currentIconUrl" z-5 class="animation-fly absolute bottom-2 right-2 h-8 w-8 cursor-pointer" style="animation-duration: 2s; --translate-distance: 0.2em" @click="togglePlayPause">
 </template>
+
+<style lang="scss" scoped>
+.fade-enter-active,
+.fade-leave-active {
+  transition: opacity 0.5s;
+}
+
+.fade-enter,
+.fade-leave-to {
+  opacity: 0;
+}
+
+.slide-right {
+  &-enter-active,
+  &-leave-active {
+    transition: transform 1s ease;
+  }
+
+  &-enter-from,
+  &-leave-to {
+    transform: translateX(-100%);
+  }
+
+  &-enter-to,
+  &-leave-from {
+    transform: translateX(0);
+  }
+}
+
+.slide-left-enter-active,
+.slide-left-leave-active {
+  transition: transform 1s ease;
+}
+
+.slide-left-enter,
+.slide-left-leave-to {
+  transform: translateX(100%);
+}
+</style>
diff --git a/theme/components/SakuraBanner.vue b/theme/components/SakuraBanner.vue
index 29cc6d39..035a6ab0 100644
--- a/theme/components/SakuraBanner.vue
+++ b/theme/components/SakuraBanner.vue
@@ -1,6 +1,7 @@
 <script lang="ts" setup>
 import { computed } from 'vue'
 import { useMounted } from '@vueuse/core'
+import { useSakuraAppStore } from '../stores'
 import { useThemeConfig } from '../composables'
 import type { Banner } from '../types/index'
 
@@ -9,19 +10,24 @@ const props = defineProps<{
 }>()
 
 const themeConfig = useThemeConfig()
+const sakura = useSakuraAppStore()
 const isMounted = useMounted()
 
 const banner = computed(() => props.banner || themeConfig.value.banner)
+const overlayBarClass = computed(() => sakura.isPlaying ? 'animation-fade-out-down' : 'animation-fade-in-up')
 </script>
 
 <template>
   <header class="sakura-banner <md:px-5">
     <template v-if="isMounted">
-      <div class="absolute top-0 h-full w-full overflow-hidden" :class="[banner.style && 'banner-style', banner.style]">
+      <div class="absolute inset-0 overflow-hidden" :class="[banner.style && 'banner-style', banner.style]">
         <slot name="background-display" />
 
-        <slot name="overlay-bar" />
+        <div :class="overlayBarClass">
+          <slot name="overlay-bar" />
+        </div>
       </div>
+
       <div z-4>
         <slot name="info-overlay" />
       </div>
diff --git a/theme/components/themes/InfoOverlayThemeSakura.vue b/theme/components/themes/InfoOverlayThemeSakura.vue
index a0b89004..7a1e2fff 100644
--- a/theme/components/themes/InfoOverlayThemeSakura.vue
+++ b/theme/components/themes/InfoOverlayThemeSakura.vue
@@ -22,21 +22,29 @@ const { hitokoto, fetchHitokoto } = useAddonHitokoto(themeConfig.value.banner.hi
 const banner = computed(() => props.banner || themeConfig.value.banner)
 
 function prevMedia() {
+  sakura.wallpaperOperation = 'prevMedia'
   sakura.wallpaperIndex[storageKey] = (sakura.wallpaperIndex[storageKey] - 1 + sakura.wallpaperLength[storageKey]) % sakura.wallpaperLength[storageKey]
+  setTimeout(() => {
+    sakura.wallpaperOperation = ''
+  }, 0)
 }
 
 function nextMedia() {
+  sakura.wallpaperOperation = 'nextMedia'
   sakura.wallpaperIndex[storageKey] = (sakura.wallpaperIndex[storageKey] + 1) % sakura.wallpaperLength[storageKey]
+  setTimeout(() => {
+    sakura.wallpaperOperation = ''
+  }, 0)
 }
 </script>
 
 <template>
   <div class="info-overlay-theme-sakura">
     <slot name="highlighted-text">
-      <SakuraGlitchText :text="banner.title" />
+      <SakuraGlitchText :class="sakura.isPlaying ? 'animation-fade-out-up' : 'animation-fade-in-down'" :text="banner.title" />
     </slot>
 
-    <div class="card-wrapper">
+    <div class="card-wrapper" :class="sakura.isPlaying ? 'animation-slit-out-horizontal' : 'animation-slit-in-horizontal'">
       <slot name="muted-text">
         <div class="flex justify-center">
           <span class="inline-block" i-fa6-solid-quote-left />
diff --git a/theme/node/config.ts b/theme/node/config.ts
index 7b36afd5..b5234742 100644
--- a/theme/node/config.ts
+++ b/theme/node/config.ts
@@ -21,6 +21,8 @@ export const defaultThemeConfig: ThemeConfig = {
 
     typewriter: false,
     enableHitokoto: false,
+
+    disablePictureInPicture: false,
   },
 
   navbar: [],
diff --git a/theme/stores/wallpaper.ts b/theme/stores/wallpaper.ts
index fc74a55f..27630696 100644
--- a/theme/stores/wallpaper.ts
+++ b/theme/stores/wallpaper.ts
@@ -3,6 +3,8 @@ import { ref } from 'vue'
 export function useWallpaper() {
   const wallpaperIndex = ref<{ [key: string]: number }>({})
   const wallpaperLength = ref<{ [key: string]: number }>({})
+  const wallpaperOperation = ref<'prevMedia' | 'nextMedia' | ''>()
+  const isPlaying = ref(false)
 
-  return { wallpaperIndex, wallpaperLength }
+  return { wallpaperIndex, wallpaperLength, wallpaperOperation, isPlaying }
 }
diff --git a/theme/types/index.d.ts b/theme/types/index.d.ts
index 9b829027..8d4f70f6 100644
--- a/theme/types/index.d.ts
+++ b/theme/types/index.d.ts
@@ -129,6 +129,14 @@ export interface Banner {
    * @default undefined
    */
   waveTheme?: 'fish' | 'horizontal' | 'ripple' | 'yunCloud'
+
+  /**
+   * @zh 自定义视频, 可以放PV MV之类的
+   * @en Custom Video
+   */
+  playerUrl?: string
+
+  disablePictureInPicture?: boolean
 }
 
 export type SidebarMulti = (string | SidebarItem)[]