Hide change volume on ios

HeHang0 · Nov 10, 2023 · 1ca51d3 · 1ca51d3
1 parent 837c4f1
commit 1ca51d3
Show file tree

Hide file tree

Showing 17 changed files with 82 additions and 76 deletions.
diff --git a/web/src/components/Footer.vue b/web/src/components/Footer.vue
@@ -2,6 +2,7 @@
 import { usePlayStore } from '../stores/play';
 import { SortType } from '../utils/type';
 import { LogoImage } from '../utils/logo';
+import { isIOS } from '../utils/utils';
 interface Props {
   full?: boolean;
 }
@@ -44,16 +45,16 @@ const play = usePlayStore();
           <img :src="play.music.image || LogoImage" />
         </div>
         <div class="music-footer-title">
-          <div class="music-footer-title-name" :title="play.music.name">
+          <div
+            class="music-footer-title-name text-overflow-1"
+            :title="play.music.name">
             {{ play.music.name || '' }}
           </div>
-          <div class="music-footer-title-singer">
-            <span class="music-list-item-vip music-icon" v-if="play.music.vip">
-              V
-            </span>
-            <div :title="play.music.singer">
-              {{ play.music.singer || '' }}
-            </div>
+          <div
+            class="music-footer-title-singer text-overflow-1"
+            :class="play.music.vip ? 'music-footer-title-vip' : ''"
+            :title="play.music.singer">
+            <span>{{ play.music.singer || '' }}</span>
           </div>
         </div>
       </div>
@@ -152,10 +153,11 @@ const play = usePlayStore();
             </span>
           </template>
         </el-popover>
-        <span class="music-icon" title="静音" @click="play.mute">
+        <span v-if="!isIOS" class="music-icon" title="静音" @click="play.mute">
           {{ play.playStatus.volume > 0 ? '音' : '静' }}
         </span>
         <el-slider
+          v-if="!isIOS"
           v-model="play.playStatus.volume"
           @mousedown="play.playStatus.disableUpdateVolume = true"
           @change="play.changeVolume"
@@ -221,7 +223,7 @@ const play = usePlayStore();
     display: flex;
     align-items: center;
     height: 100%;
-    min-width: 880px;
+    width: 100%;
     padding: var(--el-footer-padding);
     &-left {
       .music-footer-second-text {
@@ -230,7 +232,9 @@ const play = usePlayStore();
     }
     &-left,
     &-right {
-      width: 300px;
+      max-width: 300px;
+      width: 30%;
+      min-width: 150px;
       display: flex;
       align-items: center;
     }
@@ -250,7 +254,7 @@ const play = usePlayStore();
       display: flex;
       flex-direction: column;
       align-items: center;
-      min-width: 0;
+      min-width: 225px;
       &-operate {
         text-align: center;
         span + span {
@@ -259,7 +263,6 @@ const play = usePlayStore();
       }
       &-progress {
         width: 100%;
-        padding: 0 20px;
         display: flex;
         align-items: center;
         & > span:first-child {
@@ -314,36 +317,38 @@ const play = usePlayStore();
   }
   &-title {
     height: 100%;
-    display: flex;
-    align-items: flex-start;
-    flex-direction: column;
-    justify-content: center;
-    margin-left: 15px;
+    // display: flex;
+    // align-items: flex-start;
+    // flex-direction: column;
+    // justify-content: center;
+    margin: 0 15px;
+    width: calc(100% - 90px);
     &-name {
-      width: 220px;
-    }
-    &-name,
-    &-singer > div {
-      overflow: hidden;
-      white-space: nowrap;
-      text-overflow: ellipsis;
+      width: 100%;
     }
     &-singer {
-      display: flex;
-      align-items: center;
-      width: 220px;
-      span {
-        color: #ff5252;
-        margin-right: 5px;
-        line-height: 12px;
-        opacity: 1;
-        cursor: default;
-      }
-      div {
+      width: 100%;
+      & > span {
         font-size: 13px;
         opacity: 0.6;
       }
     }
+    &-vip {
+      padding-left: 25px;
+      &::before {
+        content: 'V';
+        font-family: 'icon-font';
+        position: absolute;
+        font-size: 24px;
+        left: 0;
+        top: 50%;
+        transform: translateY(-50%);
+        color: #ff5252;
+        opacity: 1;
+      }
+      // font-size: 24px;
+      // cursor: default;
+    }
   }
   :deep(.el-scrollbar__view) {
     overflow-y: hidden;
@@ -352,39 +357,35 @@ const play = usePlayStore();
     display: none !important;
   }
 }
-@media (max-width: 720px), (max-height: 720px) {
+@media (max-width: 800px) {
   .music-footer {
     &-title {
       display: none;
     }
     &-layout {
-      min-width: 100%;
       &-left {
         width: 60px;
+        min-width: unset;
+        .music-footer-second-text {
+          margin-left: 5px;
+          text-align: center;
+        }
       }
       &-right {
         width: unset;
+        min-width: unset;
         .el-slider {
           display: none;
         }
       }
       &-center {
-        &-progress {
-          padding: 0;
-        }
         &-operate {
           span + span {
             margin-left: 10px;
           }
         }
       }
     }
-    &-layout-left {
-      .music-footer-second-text {
-        margin-left: 5px;
-        text-align: center;
-      }
-    }
   }
 }
 </style>
diff --git a/web/src/components/Header.vue b/web/src/components/Header.vue
@@ -141,7 +141,7 @@ onUnmounted(unWatch);
   }
 }
 
-@media (max-width: 720px), (max-height: 720px) {
+@media (max-width: 800px) {
   .music-header {
     min-width: unset;
     &-content {

diff --git a/web/src/components/MusicList.vue b/web/src/components/MusicList.vue
@@ -586,7 +586,7 @@ function openMenu(music: Music, e: any) {
     }
   }
 }
-@media (max-width: 720px), (max-height: 720px) {
+@media (max-width: 800px) {
   .music-list {
     &-header {
       &-title {

diff --git a/web/src/components/Playlist.vue b/web/src/components/Playlist.vue
@@ -87,7 +87,7 @@ const props = withDefaults(defineProps<Props>(), {
     }
   }
 }
-@media (max-width: 720px), (max-height: 720px) {
+@media (max-width: 800px) {
   .music-play-list {
     grid-column-gap: 4px;
     grid-row-gap: 4px;

diff --git a/web/src/components/SideMenu.vue b/web/src/components/SideMenu.vue
@@ -372,7 +372,7 @@ function toHome() {
 :deep(.el-dialog__body) {
   padding: 0;
 }
-@media (max-width: 720px), (max-height: 720px) {
+@media (max-width: 800px) {
   .music-aside {
     width: calc(50px + calc(env(safe-area-inset-left, 0) / 1.5));
     padding-left: calc(env(safe-area-inset-left, 0) / 1.5);

diff --git a/web/src/components/player/DefaultMode.vue b/web/src/components/player/DefaultMode.vue
@@ -24,7 +24,7 @@ const play = usePlayStore();
   justify-content: space-evenly;
   &-lyric {
     height: calc(100% - 50px);
-    width: 40vw;
+    width: 45vw;
     padding-top: 50px;
   }
   &-jukebox {
@@ -33,7 +33,7 @@ const play = usePlayStore();
   }
 }
 
-@media (max-width: 720px), (max-height: 720px) {
+@media (max-width: 800px) {
   .music-play-detail-default {
     &-lyric {
       height: unset;
@@ -47,7 +47,7 @@ const play = usePlayStore();
   }
 }
 
-@media (max-width: 720px) {
+@media (max-width: 800px) {
   .music-play-detail-default {
     flex-direction: column;
     &-lyric {

diff --git a/web/src/components/player/Jukebox.vue b/web/src/components/player/Jukebox.vue
@@ -74,7 +74,7 @@ const discElement: Ref<HTMLImageElement | null> = ref(null);
     }
   }
 }
-@media (max-width: 720px), (max-height: 720px) {
+@media (max-width: 800px) {
   .music-jukebox {
     &-stylus {
       img {

diff --git a/web/src/components/player/Lyric.vue b/web/src/components/player/Lyric.vue
@@ -86,13 +86,15 @@ onUnmounted(() => {
       </div>
     </div>
     <div class="music-lyric-content" v-show="musicLyric.length > 0">
+      <div class="music-lyric-line">&nbsp;</div>
       <div
         v-for="(line, index) in musicLyric"
         :id="lyricLineIdPrefix + index"
         :class="index == currentLine ? 'music-lyric-line-active' : ''"
         class="music-lyric-line">
         {{ line }}
       </div>
+      <div class="music-lyric-line">&nbsp;</div>
     </div>
   </div>
 </template>
@@ -104,6 +106,7 @@ onUnmounted(() => {
   display: flex;
   flex-direction: column;
   justify-content: center;
+  padding: var(--music-page-padding-horizontal);
   &-pure {
     text-align: center;
   }
@@ -141,6 +144,13 @@ onUnmounted(() => {
     &::-webkit-scrollbar-thumb {
       background-color: transparent;
     }
+    -webkit-mask: linear-gradient(
+      0,
+      rgba(0, 0, 0, 0) 0%,
+      rgba(0, 0, 0, 1) 15%,
+      rgba(0, 0, 0, 1) 85%,
+      rgba(0, 0, 0, 0) 100%
+    );
   }
   &-line {
     opacity: 0.6;
@@ -156,15 +166,12 @@ onUnmounted(() => {
     }
   }
 }
-@media (max-width: 720px), (max-height: 720px) {
+@media (max-width: 800px) {
   .music-lyric {
     &-header {
       height: unset;
       margin-bottom: 10px;
     }
-    &-pure {
-      padding: 0 0 10px 0;
-    }
   }
 }
 </style>
diff --git a/web/src/components/player/LyricMode.vue b/web/src/components/player/LyricMode.vue
@@ -12,8 +12,5 @@ import Lyric from './Lyric.vue';
 .music-mode-lyric {
   height: 100%;
   width: 100%;
-  & > .music-lyric {
-    padding: 30px 0;
-  }
 }
 </style>
diff --git a/web/src/style/base.less b/web/src/style/base.less
@@ -43,7 +43,7 @@
       rgb(235, 240, 251),
       rgb(248, 239, 241));
 
-  @media (max-width: 720px),
+  @media (max-width: 800px),
   (max-height: 720px) {
     --music-page-padding-horizontal: 10px;
   }

diff --git a/web/src/utils/http.ts b/web/src/utils/http.ts
@@ -5,9 +5,8 @@ const musicRouterPrefix = localStorage.getItem('musiche-router-prefix');
 const history = musicRouterPrefix ? '/' + musicRouterPrefix : '';
 
 const httpAddress = import.meta.env.DEV ? '127.0.0.1:54621' : location.host;
-const proxyAddress =
-  (!webView2Services.enabled &&
-    localStorage.getItem('musiche-proxy-address')) ||
+const proxyAddress = 'https://music.picapico.top/proxy';
+(!webView2Services.enabled && localStorage.getItem('musiche-proxy-address')) ||
   `//${httpAddress}/proxy`;
 const useLocalAudio = !webView2Services.enabled;
 var localAudio: AudioPlayer | null = null;

diff --git a/web/src/utils/utils.ts b/web/src/utils/utils.ts
@@ -46,8 +46,11 @@ export const isInStandaloneMode = Boolean(
   ('standalone' in window.navigator && window.navigator.standalone) ||
     window.matchMedia('(display-mode: standalone)').matches
 );
-export const isIOS = !!navigator.userAgent.match(
-  /\(i[^;]+;( U;)? CPU.+Mac OS X/
+export const isIOS = !!(
+  navigator.userAgent.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/) ||
+  (/Mac OS X/.test(navigator.userAgent) &&
+    navigator.maxTouchPoints &&
+    navigator.maxTouchPoints > 2)
 );
 
 export function scrollToElementId(
@@ -100,8 +103,7 @@ export function getRandomInt(min: number, max: number, ignore?: number) {
 }
 
 export function fixNotchIPhoneHeight() {
-  if (!('standalone' in window.navigator && window.navigator.standalone))
-    return;
+  if (!isInStandaloneMode || !isIOS) return;
   const computeStyle = getComputedStyle(document.documentElement);
   const sat = computeStyle.getPropertyValue('--sat') || '0';
   const sal = computeStyle.getPropertyValue('--sal') || '0';

diff --git a/web/src/views/playlist.vue b/web/src/views/playlist.vue
@@ -356,14 +356,14 @@ onUnmounted(unWatch);
     padding: 0 calc(var(--music-page-padding-horizontal) - 10px);
   }
 }
-@media (max-width: 720px), (max-height: 720px) {
+@media (max-width: 800px) {
   .music-playlist {
     & > .el-scrollbar {
       padding: 0 !important;
     }
   }
 }
-@media (max-width: 720px) and (orientation: portrait) {
+@media (max-width: 800px) and (orientation: portrait) {
   .music-playlist {
     &-header {
       flex-direction: column;

diff --git a/web/src/views/ranking.vue b/web/src/views/ranking.vue
@@ -168,7 +168,7 @@ onUnmounted(unWatch);
     padding: 0 calc(var(--music-page-padding-horizontal) - 10px);
   }
 }
-@media (max-width: 720px), (max-height: 720px) {
+@media (max-width: 800px) {
   .music-ranking {
     &-header {
       flex-direction: column;