Fix current list ui

web/public/worker.js

@@ -37,6 +37,7 @@ async function cacheThenNetwork(request) {
     routerPattern.test(requestUrl);
   if (
     requestUrl.startsWith('http') &&
+    response.status == 200 &&
     (cacheRouter || (willCache && response.ok))
   ) {
     try {

web/src/App.vue

@@ -98,5 +98,8 @@ onMounted(() => {
     position: relative;
     min-height: 100%;
   }
+  :deep(.el-overlay) {
+    z-index: 2001;
+  }
 }
 </style>

web/src/components/CurrentList.vue

@@ -2,7 +2,14 @@
 import { ElMessageBox } from 'element-plus';
 import MusicList from './MusicList.vue';
 import { usePlayStore } from '../stores/play';
+import { scrollToElement } from '../utils/utils';
+import { ref } from 'vue';
 const play = usePlayStore();
+const portrait = window.matchMedia('(orientation: portrait)');
+const drawerDirection = ref(portrait.matches ? 'btt' : 'rtl');
+portrait.addEventListener('change', () => {
+  drawerDirection.value = portrait.matches ? 'btt' : 'rtl';
+});
 function clear() {
   ElMessageBox.confirm('', '确定要清空播放列表吗？', {
     closeOnClickModal: false,
@@ -14,13 +21,25 @@ function clear() {
     })
     .catch(() => {});
 }
+function onOpen() {
+  const index = play.musicList.findIndex(
+    item => item.id === play.music?.id && item.type == play.music?.type
+  );
+  if (index < 0) return;
+  const elements = document.querySelectorAll(
+    '.music-current-list-content .music-list-item'
+  );
+  scrollToElement(elements.item(index) as HTMLElement, false, true);
+}
 </script>
 
 <template>
   <el-drawer
     class="music-current-list"
     v-model="play.currentListShow"
-    :with-header="false">
+    :with-header="false"
+    @opened="onOpen"
+    :direction="drawerDirection">
     <div class="music-current-list-header">
       <span class="music-current-list-header-title">
         播放列表
@@ -93,8 +112,22 @@ function clear() {
   height: calc(100% - 192px) !important;
   min-height: 80% !important;
   border-radius: var(--music-border-radius);
-  top: 50% !important;
-  transform: translateY(-50%);
+  margin-top: min(10%, 96px);
+  // top: 50% !important;
+  // transform: translateY(-50%);
+  @media (orientation: portrait) {
+    width: 100% !important;
+    height: calc(100% - 80px - calc(var(--sab) / 1.5)) !important;
+    margin-top: 0;
+    top: 0;
+    border-radius: 0 0 var(--music-border-radius) var(--music-border-radius);
+  }
+  @media (max-height: 600px) and (orientation: landscape) {
+    height: calc(100% - 80px - calc(var(--sab) / 1.5)) !important;
+    margin-top: 0;
+    border-radius: var(--music-border-radius) 0 var(--music-border-radius)
+      var(--music-border-radius);
+  }
   .el-drawer__body {
     padding: 0;
   }

web/src/components/PlayDetail.vue

@@ -87,6 +87,7 @@ function setMouseStillness() {
 }
 let isTouching = false;
 function checkMouseStillness() {
+  if (isMobile) return;
   if (isTouching) {
     isTouching = false;
     return;
@@ -98,6 +99,7 @@ function checkMouseStillness() {
   mouseStillnessTimeout = setTimeout(setMouseStillness, 5000);
 }
 function setMouseMotion() {
+  if (isMobile) return;
   mouseStillness.value = false;
   clearTimeout(mouseStillnessTimeout);
 }
@@ -139,7 +141,6 @@ beforeResolve(() => {
   }
   if (play.playDetailShow) play.playDetailShow = false;
 });
-
 watch(() => play.playDetailShow, setTheme);
 </script>
 
@@ -152,11 +153,11 @@ watch(() => play.playDetailShow, setTheme);
     <div
       class="music-play-detail-layout"
       ref="pageElement"
-      @mouseleave="!isMobile ? checkMouseStillness : void 0"
+      @mouseleave="checkMouseStillness"
       :style="imageThemeStyle">
       <div
         class="music-play-detail-header"
-        @mouseenter="!isMobile ? setMouseMotion : void 0"
+        @mouseenter="setMouseMotion"
         :style="mouseStillness ? 'opacity:0' : ''">
         <span>
           <el-button class="music-button-pure music-icon" @click="close"
@@ -199,7 +200,7 @@ watch(() => play.playDetailShow, setTheme);
       <div
         class="music-play-detail-body"
         :class="mouseStillness ? '' : 'music-play-detail-body-short'"
-        @mousemove="!isMobile ? onMouseMove : void 0"
+        @mousemove="onMouseMove"
         @touchstart.stop="onTouchStart">
         <LyricMode v-if="play.playerMode == 'lyric'" />
         <PolarBearMode

web/src/components/player/PolarBearMode.vue

@@ -75,8 +75,7 @@ onMounted(async () => {
 });
 function calcSeat() {
   if (!snowContainer.value) return;
-  const screenRatio =
-    snowContainer.value.offsetWidth / snowContainer.value.offsetHeight;
+  const screenRatio = window.innerWidth / window.innerHeight;
   const imageRatio = 1924 / 1080;
   let screenHeight = 0;
   let screenWidth = 0;
@@ -191,6 +190,7 @@ onUnmounted(() => {
     text-align: center;
     transform: translateX(-50%);
     opacity: 0;
+    margin-top: var(--sat, 0);
     transition: opacity 0.3s, width 0.3s;
     & > span {
       font-size: 18px;

web/src/style/base.less

@@ -78,6 +78,10 @@
   --music-affix-background: var(--music-background);
 }
 
+.dark.pure {
+  --music-background: black;
+}
+
 .red {
   --music-side-background: rgb(255, 58, 58);
   --music-side-text-color: white;

web/src/utils/lyric.ts

@@ -18,7 +18,7 @@ export type LyricLineChange = (
   duration?: number
 ) => void;
 
-const devicePixelRatio = Math.max(window.devicePixelRatio || 1, 1.5) * 2;
+const devicePixelRatio = (window.devicePixelRatio || 1) * 2;
 let defaultFont = '';
 export class LyricManager {
   private static lyricOption = {} as Record<LyricOptionsKey, any>;

web/src/utils/utils.ts

@@ -126,6 +126,19 @@ export const isMobile =
 export const isSafari =
   !isWindows && !isAndroid && /Safari|AppleWebKit/i.test(navigator.userAgent);
 
+export function scrollToElement(
+  ele: HTMLElement,
+  center?: boolean,
+  smooth?: boolean
+) {
+  if (!ele) return;
+  const scrollParams: ScrollIntoViewOptions = {
+    behavior: smooth ? 'smooth' : 'instant',
+    block: center ? 'center' : 'start'
+  };
+  ele.scrollIntoView(scrollParams);
+}
+
 export function scrollToElementId(
   id: string,
   center?: boolean,
@@ -137,7 +150,7 @@ export function scrollToElementId(
     behavior: smooth ? 'smooth' : 'instant',
     block: center ? 'center' : 'start'
   };
-  ele && ele.scrollIntoView(scrollParams);
+  ele.scrollIntoView(scrollParams);
 }
 
 // export function scrollToElementId(

web/src/views/setting.vue

@@ -31,6 +31,7 @@ import {
 import { LogoCircleImage } from '../utils/logo';
 import { ThemeColorManager } from '../utils/color';
 import DroidImage from '../assets/images/droid.svg';
+import AppleImage from '../assets/images/apple.svg';
 import { getServiceWorkerRegistration } from '../sw/register';
 
 const { currentRoute, replace, options } = useRouter();
@@ -200,15 +201,20 @@ const delayShutdown = ref(false);
 const themes = ref([
   {
     id: '',
-    name: '默认',
+    name: '亮色',
     color: 'white'
   },
   {
     id: 'dark',
     name: '深色',
-    color: 'black'
+    color: '#13131a'
   },
   setting.customTheme,
+  {
+    id: 'dark pure',
+    name: '暗色',
+    color: 'black'
+  },
   {
     id: 'red',
     name: '红',
@@ -804,7 +810,7 @@ onUnmounted(unWatch);
                 v-model="setting.pageValue.lyric.fontSize"
                 @change="setting.setLyricOptions">
                 <el-option
-                  v-for="(_item, index) in new Array(50)"
+                  v-for="(_item, index) in new Array(53)"
                   :key="index"
                   :label="index + 20"
                   :value="index + 20">
@@ -828,7 +834,8 @@ onUnmounted(unWatch);
                 size="large">
               </el-checkbox>
             </div>
-            <div class="music-setting-lyric-item">
+            <div
+              class="music-setting-lyric-item music-setting-lyric-item-portrait-top">
               <span class="music-setting-lyric-item-title">配色方案</span>
               <div class="music-setting-lyric-item-color">
                 <el-select
@@ -860,6 +867,27 @@ onUnmounted(unWatch);
                 </span>
               </div>
             </div>
+            <div
+              class="music-setting-lyric-item music-setting-lyric-item-portrait-top">
+              <span class="music-setting-lyric-item-title"
+                >预<span style="opacity: 0">占位</span>览</span
+              >
+              <div
+                class="music-setting-lyric-item-preview"
+                :style="{
+                  fontSize: setting.pageValue.lyric.fontSize + 'px',
+                  fontFamily: setting.pageValue.lyric.fontFamily,
+                  color: setting.pageValue.lyric.fontColor,
+                  textShadow: setting.pageValue.lyric.effect
+                    ? '0 0 1px ' + setting.pageValue.lyric.effectColor
+                    : 'none',
+                  fontWeight: setting.pageValue.lyric.fontBold
+                    ? 'bold'
+                    : 'normal'
+                }">
+                音乐和
+              </div>
+            </div>
           </td>
         </tr>
         <tr>
@@ -910,6 +938,17 @@ onUnmounted(unWatch);
                 </div>
                 <p>Android版</p>
               </a>
+              <a
+                class="music-setting-about-card"
+                href="https://hehang0.github.io/musiche/Musiche.ipa"
+                target="_blank">
+                <div
+                  class="logo-app"
+                  style="--logo-app-color: var(--music-footer-background)">
+                  <img :src="AppleImage" />
+                </div>
+                <p>IOS版</p>
+              </a>
               <a
                 v-if="
                   !isInStandaloneMode &&
@@ -1196,6 +1235,16 @@ onUnmounted(unWatch);
           background-color: var(--fix-color);
         }
       }
+      &-preview {
+        border-radius: var(--music-border-radius);
+        border: 1px solid var(--music-button-info-border-color);
+        flex: 1;
+        height: 100px;
+        text-align: center;
+        line-height: 100px;
+        background-color: var(--music-side-background);
+        letter-spacing: 6px;
+      }
       .el-select {
         width: 140px;
         &.short {
@@ -1374,7 +1423,7 @@ onUnmounted(unWatch);
     }
     &-lyric {
       &-item {
-        &:last-child {
+        &-portrait-top {
           align-items: baseline;
         }
         &-fix-color {

windows/LyricWindow.xaml.cs

@@ -16,8 +16,10 @@ namespace Musiche
     /// <summary>
     /// LyricWindow.xaml 的交互逻辑
     /// </summary>
+    public delegate void LyricLockedChangedEventHandler(object sender, bool locked);
     public partial class LyricWindow : Window
     {
+        public event LyricLockedChangedEventHandler LyricLockedChanged;
         private bool closeFlag = false;
         private bool locked = false;
         private readonly DropShadowEffect lyricEffect;
@@ -261,7 +263,7 @@ private void LockWindow(object sender, MouseButtonEventArgs e)
             SetLocked(label.Content?.ToString() == "锁");
         }
 
-        private void SetLocked(bool isLock, bool isInitial=false)
+        public void SetLocked(bool isLock, bool isInitial=false)
         {
             locked = isLock;
             LockLabel.Content = locked ? "解" : "锁";
@@ -277,6 +279,7 @@ private void SetLocked(bool isLock, bool isInitial=false)
                 LyricBorder.Background = locked ? Brushes.Transparent : hoverBackground;
                 ResizeGrid.Visibility = locked ? Visibility.Collapsed : Visibility.Visible;
             }
+            LyricLockedChanged?.Invoke(this, isLock);
         }
 
         private void CloseWindow(object sender, MouseButtonEventArgs e)