From 1ca51d3e5c09298dc3ebcef4740ef1d33d9db499 Mon Sep 17 00:00:00 2001 From: He Hang Date: Sat, 11 Nov 2023 00:11:50 +0800 Subject: [PATCH] Hide change volume on ios --- web/src/components/Footer.vue | 95 ++++++++++++----------- web/src/components/Header.vue | 2 +- web/src/components/MusicList.vue | 2 +- web/src/components/Playlist.vue | 2 +- web/src/components/SideMenu.vue | 2 +- web/src/components/player/DefaultMode.vue | 6 +- web/src/components/player/Jukebox.vue | 2 +- web/src/components/player/Lyric.vue | 15 +++- web/src/components/player/LyricMode.vue | 3 - web/src/style/base.less | 2 +- web/src/utils/http.ts | 5 +- web/src/utils/utils.ts | 10 ++- web/src/views/playlist.vue | 4 +- web/src/views/ranking.vue | 2 +- web/src/views/recommend.vue | 2 +- web/src/views/search.vue | 2 +- web/src/views/setting.vue | 2 +- 17 files changed, 82 insertions(+), 76 deletions(-) diff --git a/web/src/components/Footer.vue b/web/src/components/Footer.vue index 952ad25..dd64551 100644 --- 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();
-
+
{{ play.music.name || '' }}
-
- - V - -
- {{ play.music.singer || '' }} -
+
+ {{ play.music.singer || '' }}
@@ -152,10 +153,11 @@ const play = usePlayStore(); - + {{ play.playStatus.volume > 0 ? '音' : '静' }} 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,26 +357,28 @@ 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; @@ -379,12 +386,6 @@ const play = usePlayStore(); } } } - &-layout-left { - .music-footer-second-text { - margin-left: 5px; - text-align: center; - } - } } } diff --git a/web/src/components/Header.vue b/web/src/components/Header.vue index 8b12e23..075bffd 100644 --- 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 index 770e6eb..7fe0601 100644 --- 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 index 8d24a63..94fea55 100644 --- a/web/src/components/Playlist.vue +++ b/web/src/components/Playlist.vue @@ -87,7 +87,7 @@ const props = withDefaults(defineProps(), { } } } -@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 index b8e4d3d..f86a3c1 100644 --- 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 index 5b44489..e6522ea 100644 --- 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 index 2e858e5..dafb2b2 100644 --- a/web/src/components/player/Jukebox.vue +++ b/web/src/components/player/Jukebox.vue @@ -74,7 +74,7 @@ const discElement: Ref = 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 index 9a3edb1..0a93b43 100644 --- a/web/src/components/player/Lyric.vue +++ b/web/src/components/player/Lyric.vue @@ -86,6 +86,7 @@ onUnmounted(() => {
+
 
{ class="music-lyric-line"> {{ line }}
+
 
@@ -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; - } } } diff --git a/web/src/components/player/LyricMode.vue b/web/src/components/player/LyricMode.vue index 6ea4548..657d00a 100644 --- 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; - } } diff --git a/web/src/style/base.less b/web/src/style/base.less index 8cf66ce..66d07fe 100644 --- 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 index 50b353f..72ebddf 100644 --- 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 index 46c5708..c8c24d4 100644 --- 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 index 34d8400..b493752 100644 --- 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 index 69033c0..6bfce1f 100644 --- 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; diff --git a/web/src/views/recommend.vue b/web/src/views/recommend.vue index 18cdbff..12c8ee2 100644 --- a/web/src/views/recommend.vue +++ b/web/src/views/recommend.vue @@ -115,7 +115,7 @@ onUnmounted(unWatch); .music-recommend { height: 100%; padding: 0 var(--music-page-padding-horizontal); - @media (max-width: 720px), (max-height: 720px) { + @media (max-width: 800px) { padding: 0 10px; } } diff --git a/web/src/views/search.vue b/web/src/views/search.vue index ad3f874..1c92f1e 100644 --- a/web/src/views/search.vue +++ b/web/src/views/search.vue @@ -158,7 +158,7 @@ onUnmounted(unWatch); padding: 0 calc(var(--music-page-padding-horizontal) - 10px); } } -@media (max-width: 720px), (max-height: 720px) { +@media (max-width: 800px) { .music-search { &-header { flex-direction: column; diff --git a/web/src/views/setting.vue b/web/src/views/setting.vue index d783567..45d07ac 100644 --- a/web/src/views/setting.vue +++ b/web/src/views/setting.vue @@ -1132,7 +1132,7 @@ onUnmounted(unWatch); } } } -@media (max-width: 720px), (max-height: 720px) { +@media (max-width: 800px) { .music-setting { &-body { table > tr {