Style for android

web/index.html

@@ -5,6 +5,7 @@
     <meta
       name="viewport"
       content="width=device-width, initial-scale=1.0, viewport-fit=cover" />
+    <meta name="mobile-web-app-capable" content="yes" />
     <meta name="apple-mobile-web-app-capable" content="yes" />
     <meta
       name="apple-mobile-web-app-status-bar-style"

web/src/App.vue

@@ -6,7 +6,7 @@ import Footer from './components/Footer.vue';
 import CurrentList from './components/CurrentList.vue';
 import PlayDetail from './components/PlayDetail.vue';
 import WindowHelper from './components/WindowHelper.vue';
-import { isIOS, isInStandaloneMode, webView2Services } from './utils/utils';
+import { fixIos15IPhone8Height, webView2Services } from './utils/utils';
 import { MusicConnection } from './stores/connection';
 import { usePlayStore } from './stores/play';
 import { useSettingStore } from './stores/setting';
@@ -29,9 +29,8 @@ iconLink.rel = 'icon';
 iconLink.href = LogoCircleImage;
 document.head.appendChild(iconLink);
 new MusicConnection(webView2Services.enabled);
+fixIos15IPhone8Height();
 let rootClass = webView2Services.enabled ? 'webview-host' : '';
-if (isInStandaloneMode) rootClass += ' standalone';
-if (isIOS) rootClass += ' ios';
 </script>
 
 <template>

web/src/components/PlayDetail.vue

@@ -41,16 +41,17 @@ const cancelFullScreen =
   (document as any).msExitFullscreen;
 function requestFullscreen() {
   if (document.fullscreenElement) {
-    cancelFullScreen && cancelFullScreen.call(null);
+    cancelFullScreen && cancelFullScreen.call(document);
   } else {
     if (!pageElement.value) return;
-
-    const requestFullscreen =
-      pageElement.value.requestFullscreen ||
-      (pageElement.value as any).mozRequestFullScreen ||
-      (pageElement.value as any).webkitRequestFullScreen ||
-      (pageElement.value as any).msRequestFullscreen;
-    requestFullscreen && requestFullscreen.call(null);
+    if (pageElement.value.requestFullscreen)
+      pageElement.value.requestFullscreen();
+    else if ((pageElement.value as any).mozRequestFullScreen)
+      (pageElement.value as any).mozRequestFullScreen();
+    else if ((pageElement.value as any).webkitRequestFullScreen)
+      (pageElement.value as any).webkitRequestFullScreen();
+    else if ((pageElement.value as any).msRequestFullscreen)
+      (pageElement.value as any).msRequestFullscreen();
   }
 }
 function checkFullscreen() {
@@ -174,8 +175,8 @@ beforeResolve(() => {
     --el-dropdown-menu-box-shadow: transparent;
     --el-dropdown-menuItem-hover-fill: transparent;
     --el-dropdown-menuItem-hover-color: transparent;
-    padding-left: var(--music-page-padding-horizontal);
-    padding-right: var(--music-page-padding-horizontal);
+    padding: env(safe-area-inset-top, 0) var(--music-page-padding-horizontal) 0
+      var(--music-page-padding-horizontal);
     .music-button-pure {
       width: 40px;
       height: 40px;

web/src/components/Playlist.vue

@@ -19,7 +19,9 @@ const props = withDefaults(defineProps<Props>(), {
         <img
           class="music-play-list-item-image"
           :src="item.image || LogoImage" />
-        <div class="music-play-list-item-name" v-html="item.name"></div>
+        <div
+          class="music-play-list-item-name text-overflow-3"
+          v-html="item.name"></div>
       </div>
     </RouterLink>
     <el-skeleton class="music-play-list-item" animated :loading="loading">
@@ -88,14 +90,14 @@ const props = withDefaults(defineProps<Props>(), {
 @media (max-width: 720px), (max-height: 720px) {
   .music-play-list {
     grid-column-gap: 4px;
-    grid-row-gap: 2px;
-    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
+    grid-row-gap: 4px;
+    grid-template-columns: repeat(auto-fill, minmax(130px, 1fr));
     a {
       padding: 0;
     }
     &-item {
-      width: unset;
-      height: unset;
+      width: 100%;
+      height: 100%;
       &-name {
         width: 100%;
       }

web/src/components/SideMenu.vue

@@ -4,7 +4,7 @@ import { useRoute, useRouter } from 'vue-router';
 import { usePlayStore } from '../stores/play';
 import { LogoImage, LogoCircleImage } from '../utils/logo';
 import { useSettingStore } from '../stores/setting';
-const { options } = useRouter();
+const { options, push } = useRouter();
 const route = useRoute();
 const play = usePlayStore();
 const setting = useSettingStore();
@@ -28,12 +28,18 @@ function createMyPlaylists() {
   play.createMyPlaylists(playListName.value);
   createPlaylistShow.value = false;
 }
+function toHome() {
+  push('/');
+}
 </script>
 
 <template>
   <el-aside class="music-aside">
     <div class="music-aside-title">
-      <img :src="LogoCircleImage" class="music-aside-title-logo" />
+      <img
+        :src="LogoCircleImage"
+        class="music-aside-title-logo"
+        @click="toHome" />
       <span class="music-aside-title-text"> 音乐和 </span>
     </div>
     <el-scrollbar>

web/src/components/player/Lyric.vue

@@ -115,7 +115,8 @@ onUnmounted(() => {
     font-size: 16px;
     display: flex;
     & > div {
-      width: 200px;
+      max-width: 200px;
+      text-align: left;
       & > span {
         opacity: 0.6;
         cursor: default;

web/src/stores/setting.ts

@@ -34,6 +34,9 @@ const controlKeys = [
 const darkModeMediaQuery = window.matchMedia('(prefers-color-scheme: dark)');
 const appleMobileWebAppStatusBarStyle: HTMLMetaElement | null =
   document.querySelector('meta[name="apple-mobile-web-app-status-bar-style"]');
+const themeColor: HTMLMetaElement | null = document.querySelector(
+  'meta[name="theme-color"]'
+);
 export const useSettingStore = defineStore('setting', {
   state: () => ({
     maximized: false,
@@ -259,8 +262,11 @@ export const useSettingStore = defineStore('setting', {
       });
       if (appleMobileWebAppStatusBarStyle) {
         appleMobileWebAppStatusBarStyle.content = dark
-          ? 'black-translucent'
-          : 'default';
+          ? 'light-content'
+          : 'dark-content';
+      }
+      if (themeColor) {
+        themeColor.content = dark ? '#13131a' : '#f7f7f7';
       }
       musicOperate('/theme?theme=' + preferredColorScheme);
     },

web/src/style/base.less

@@ -49,6 +49,13 @@
   }
 }
 
+:root {
+  --sat: env(safe-area-inset-top);
+  --sar: env(safe-area-inset-right);
+  --sab: env(safe-area-inset-bottom);
+  --sal: env(safe-area-inset-left);
+}
+
 .dark {
   --music-background: rgb(19, 19, 26);
   --music-background-hover: rgb(33, 33, 39);
@@ -122,12 +129,19 @@ html,
 body,
 #app {
   overflow: hidden;
-  height: 100vh;
-  width: 100vw;
+  height: 100%;
+  width: 100%;
   margin: 0;
   padding: 0;
 }
 
+@media (display-mode: standalone) {
+  html {
+    height: 100vh;
+    width: 100vw;
+  }
+}
+
 body {
   color: var(--music-text-color);
   transition: color 0.5s;
@@ -226,4 +240,15 @@ body {
   white-space: pre-line;
   overflow-wrap: break-word;
   line-height: 1.6;
+}
+
+.text-overflow-3 {
+  /* flex: 1; */
+  overflow: hidden;
+  text-overflow: ellipsis;
+  display: -webkit-box;
+  -webkit-line-clamp: 3;
+  -webkit-box-orient: vertical;
+  white-space: pre-line;
+  overflow-wrap: break-word;
 }

web/src/utils/api/migu.ts

@@ -631,6 +631,9 @@ export async function singerSongs(id: string) {
 }
 
 export async function lyric(music: Music): Promise<string> {
+  if (!music.lyricUrl) {
+    await musicDetail(music);
+  }
   if (!music.lyricUrl) return '';
   const res = await fetch(parseHttpProxyAddress(music.lyricUrl));
   return await res.text();

web/src/utils/audio.ts

@@ -20,14 +20,27 @@ export class AudioPlayer {
       this.statusChange.bind(this, undefined)
     );
     this.audio.addEventListener('timeupdate', this.timeUpdate.bind(this));
+    this.initMediaMeta();
   }
+  initMediaMeta() {
+    if (!('mediaSession' in navigator)) return;
+    navigator.mediaSession.setActionHandler('stop', this.pause);
+    navigator.mediaSession.setActionHandler(
+      'previoustrack',
+      this.sendMessage.bind(this, 'last', true)
+    );
 
+    navigator.mediaSession.setActionHandler(
+      'nexttrack',
+      this.sendMessage.bind(this, 'next', true)
+    );
+  }
   setFadeIn(fadeIn: boolean) {
     this.fadeIn = fadeIn;
   }
 
   mediaMeta(meta: MediaMetadataInit) {
-    if (!navigator.mediaSession) return;
+    if (!('mediaSession' in navigator)) return;
     navigator.mediaSession.metadata = new MediaMetadata({
       ...meta,
       title: meta.title || document.title

web/src/utils/lyric.ts

@@ -19,6 +19,7 @@ export class LyricManager {
   private id: string = '';
   private length: number = 0;
   private parsed: boolean = false;
+  private parsing: boolean = false;
   private music: Music | null = null;
   private lyricList: LyricLine[] = [];
   private lyricChanges: LyricChange[] = [];
@@ -79,7 +80,11 @@ export class LyricManager {
 
   public updateLyric(music: Music) {
     const remoteId = `${music.type}${music.id}`;
-    if (this.parsed && this.id == remoteId && this.length == music.length) {
+    if (
+      (this.parsed || this.parsing) &&
+      this.id == remoteId &&
+      this.length == music.length
+    ) {
       return;
     }
     this.id = remoteId;
@@ -141,7 +146,9 @@ export class LyricManager {
 
   private async parseLyric() {
     if (!this.music || this.parsed) return;
+    this.parsing = true;
     const lyric = await api.lyric(this.music);
+    this.parsing = false;
     if (!lyric) {
       this.publishLyric();
       return;

web/src/utils/utils.ts

@@ -43,7 +43,8 @@ try {
 } catch (error) {}
 
 export const isInStandaloneMode = Boolean(
-  'standalone' in window.navigator && window.navigator.standalone
+  ('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/
@@ -98,6 +99,35 @@ export function getRandomInt(min: number, max: number, ignore?: number) {
   }
 }
 
+export function fixIos15IPhone8Height() {
+  if (!isInStandaloneMode || !isIOS) return;
+  if (
+    !getComputedStyle(document.documentElement)
+      .getPropertyValue('--sat')
+      ?.startsWith('0')
+  )
+    return;
+  if (
+    !getComputedStyle(document.documentElement)
+      .getPropertyValue('--sal')
+      ?.startsWith('0')
+  )
+    return;
+  if (
+    !getComputedStyle(document.documentElement)
+      .getPropertyValue('--sar')
+      ?.startsWith('0')
+  )
+    return;
+  if (
+    !getComputedStyle(document.documentElement)
+      .getPropertyValue('--sab')
+      ?.startsWith('0')
+  )
+    return;
+  document.body.parentElement!.style.height = '100%';
+}
+
 export function duration2Millisecond(duration: string) {
   if (!duration || typeof duration != 'string') duration = '';
   duration = duration.replace(/[\[\]\s]/g, '');

web/src/views/playlist.vue

@@ -361,11 +361,14 @@ onUnmounted(unWatch);
     & > .el-scrollbar {
       padding: 0 !important;
     }
+  }
+}
+@media (max-width: 720px) and (orientation: portrait) {
+  .music-playlist {
     &-header {
       flex-direction: column;
       align-items: flex-start;
       height: unset !important;
-      padding: 0 10px;
       &-image {
         height: unset;
         width: 100%;

web/vite.config.ts

@@ -24,11 +24,11 @@ const plugins = [
       name: 'Musiche',
       short_name: 'Musiche',
       description: '音乐播放器[支持网易云、QQ音乐、咪咕音乐].',
-      start_url: '',
-      scope: '.',
+      start_url: '/musiche/recommend',
+      scope: '/musiche/',
       display: 'standalone',
       background_color: '#ffffff',
-      theme_color: '#000000',
+      theme_color: '#ffffff',
       icons: [
         {
           src: 'logo-circle.png',