audio buffered percent

apps/pwa/src/components/slider.tsx

@@ -3,27 +3,29 @@ import {
   HtmlHTMLAttributes,
   PointerEvent,
   PointerEventHandler,
+  ReactNode,
   useRef,
   useState,
 } from 'react';
 import styled from 'styled-components';
 import classnames from 'classnames';
 import { IS_TOUCHABLE } from '@/constants/browser';
 import { flexCenter } from '@/style/flexbox';
+import absoluteFullSize from '@/style/absolute_full_size';
 
 const THUMB_SIZE = 24;
 const Style = styled.div`
   position: relative;
 
   height: 5px;
-  background-color: rgb(145 222 202);
+  background-color: ${CSSVariable.BACKGROUND_COLOR_LEVEL_THREE};
   cursor: pointer;
   -webkit-tap-highlight-color: transparent;
   touch-action: none;
   transition: 100ms;
 
   > .progress {
-    height: 100%;
+    ${absoluteFullSize}
 
     background-color: ${CSSVariable.COLOR_PRIMARY};
     transform-origin: left;
@@ -67,11 +69,13 @@ function Slider({
   onChange,
   max = 1,
   className,
+  secondTrack,
   ...props
 }: Omit<HtmlHTMLAttributes<HTMLDivElement>, 'onChange'> & {
   current: number;
   onChange?: (v: number) => void;
   max?: number;
+  secondTrack?: ReactNode;
 }) {
   const pointerDownRef = useRef(false);
 
@@ -117,6 +121,7 @@ function Slider({
       onPointerUp={onPointerUp}
       onPointerMove={onPointerMove}
     >
+      {secondTrack}
       <div
         className="progress"
         style={{

apps/pwa/src/global_style.ts

@@ -19,6 +19,8 @@ export enum CSSVariable {
   BACKGROUND_COLOR_LEVEL_ONE = 'var(--background-color-level-one)',
   BACKGROUND_COLOR_LEVEL_TWO = 'var(--background-color-level-two)',
   BACKGROUND_COLOR_LEVEL_THREE = 'var(--background-color-level-three)',
+  BACKGROUND_COLOR_LEVEL_FOUR = 'var(--background-color-level-four)',
+  BACKGROUND_COLOR_LEVEL_FIVE = 'var(--background-color-level-five)',
 }
 
 const CSS_VARIABLE_MAP_VALUE: Record<CSSVariable, string> = {
@@ -40,6 +42,8 @@ const CSS_VARIABLE_MAP_VALUE: Record<CSSVariable, string> = {
   [CSSVariable.BACKGROUND_COLOR_LEVEL_ONE]: 'rgb(44 182 125 / 0.06)',
   [CSSVariable.BACKGROUND_COLOR_LEVEL_TWO]: 'rgb(44 182 125 / 0.1)',
   [CSSVariable.BACKGROUND_COLOR_LEVEL_THREE]: 'rgb(44 182 125 / 0.14)',
+  [CSSVariable.BACKGROUND_COLOR_LEVEL_FOUR]: 'rgb(44 182 125 / 0.18)',
+  [CSSVariable.BACKGROUND_COLOR_LEVEL_FIVE]: 'rgb(44 182 125 / 0.22)',
 };
 
 export const GlobalStyle = createGlobalStyle`

apps/pwa/src/pages/player/context.ts

@@ -9,6 +9,7 @@ interface Context {
   audioLoading: boolean;
   audioPaused: boolean;
   audioDuration: number;
+  audioBufferedPercent: number;
 
   playlist: (MusicWithSingerAliases & { index: number })[];
 
@@ -25,6 +26,7 @@ const context = createContext<Context>({
   audioLoading: false,
   audioPaused: true,
   audioDuration: 0,
+  audioBufferedPercent: 0,
 
   playlist: [],
 

apps/pwa/src/pages/player/controller/controller.tsx

@@ -6,7 +6,7 @@ import { ZIndex } from '../constants';
 import Cover from './cover';
 import Operation from './operation';
 import Info from './info';
-import Progress from './progress';
+import ProgressBar from './progress_bar';
 import Time from './time';
 import Context from '../context';
 
@@ -57,13 +57,17 @@ function Controller() {
     audioPaused,
     audioLoading,
     audioDuration,
+    audioBufferedPercent,
   } = useContext(Context);
   const queueMusic = playqueue[currentPlayqueuePosition];
 
   const { miniMode } = theme.useState();
   return (
     <Style>
-      <Progress duration={audioDuration} />
+      <ProgressBar
+        duration={audioDuration}
+        bufferedPercent={audioBufferedPercent}
+      />
       <div className="content">
         <Cover cover={getResizedImage({ url: queueMusic.cover, size: 200 })} />
         <div className="rest">

apps/pwa/src/pages/player/controller/progress_bar.tsx

@@ -0,0 +1,51 @@
+import Slider from '@/components/slider';
+import { CSSProperties } from 'react';
+import styled from 'styled-components';
+import absoluteFullSize from '@/style/absolute_full_size';
+import { CSSVariable } from '@/global_style';
+import useAudioCurrentMillisecond from '../use_audio_current_millisecond';
+import playerEventemitter, {
+  EventType as PlayerEventType,
+} from '../eventemitter';
+
+const style: CSSProperties = {
+  zIndex: 1,
+};
+const SecondTrack = styled.div`
+  ${absoluteFullSize}
+  background-color: ${CSSVariable.BACKGROUND_COLOR_LEVEL_FIVE};
+  transform-origin: left;
+`;
+
+function Progress({
+  duration,
+  bufferedPercent,
+}: {
+  duration: number;
+  bufferedPercent: number;
+}) {
+  const onChange = (p: number) =>
+    playerEventemitter.emit(PlayerEventType.ACTION_SET_TIME, {
+      second: duration * p,
+    });
+
+  const currentMillisecond = useAudioCurrentMillisecond();
+  const percent = duration ? currentMillisecond / 1000 / duration : 0;
+
+  return (
+    <Slider
+      current={percent}
+      onChange={onChange}
+      style={style}
+      secondTrack={
+        <SecondTrack
+          style={{
+            transform: `scaleX(${bufferedPercent * 100}%)`,
+          }}
+        />
+      }
+    />
+  );
+}
+
+export default Progress;

apps/pwa/src/pages/player/index.tsx

@@ -70,6 +70,7 @@ function Wrapper() {
     loading: audioLoading,
     paused: audioPaused,
     duration: audioDuration,
+    bufferedPercent: audioBufferedPercent,
   } = useAudio({ queueMusic });
 
   useKeyboard({ paused: audioPaused, queueMusic, musicbillList });
@@ -89,6 +90,7 @@ function Wrapper() {
         audioLoading,
         audioPaused,
         audioDuration,
+        audioBufferedPercent,
 
         playlist,
 

apps/pwa/src/pages/player/lyric_panel/controller/index.tsx

@@ -2,7 +2,7 @@ import styled from 'styled-components';
 import { QueueMusic } from '../../constants';
 import Operation from './operation';
 import Info from './info';
-import Slider from './slider';
+import ProgressBar from './progress_bar';
 
 const Style = styled.div`
   z-index: 2;
@@ -28,16 +28,18 @@ function Controller({
   paused,
   duration,
   loading,
+  bufferedPercent,
 }: {
   queueMusic: QueueMusic;
   paused: boolean;
   duration: number;
   loading: boolean;
+  bufferedPercent: number;
 }) {
   return (
     <Style>
       <Info queueMusic={queueMusic} />
-      <Slider duration={duration} />
+      <ProgressBar duration={duration} bufferedPercent={bufferedPercent} />
       <Operation queueMusic={queueMusic} paused={paused} loading={loading} />
     </Style>
   );

apps/pwa/src/pages/player/lyric_panel/controller/slider.tsx → apps/pwa/src/pages/player/lyric_panel/controller/progress_bar.tsx

@@ -1,6 +1,7 @@
 import styled from 'styled-components';
 import Slider from '@/components/slider';
 import { CSSVariable } from '@/global_style';
+import absoluteFullSize from '@/style/absolute_full_size';
 import playerEventemitter, {
   EventType as PlayerEventType,
 } from '../../eventemitter';
@@ -25,8 +26,19 @@ const Style = styled.div`
     transform: scale(0.9);
   }
 `;
+const SecondTrack = styled.div`
+  ${absoluteFullSize}
+  background-color: ${CSSVariable.BACKGROUND_COLOR_LEVEL_FIVE};
+  transform-origin: left;
+`;
 
-function Wrapper({ duration }: { duration: number }) {
+function Wrapper({
+  duration,
+  bufferedPercent,
+}: {
+  duration: number;
+  bufferedPercent: number;
+}) {
   const onTimeChange = (p: number) =>
     playerEventemitter.emit(PlayerEventType.ACTION_SET_TIME, {
       second: duration * p,
@@ -37,7 +49,18 @@ function Wrapper({ duration }: { duration: number }) {
   return (
     <Style>
       <div className="time">{formatSecond(currentMillisecond / 1000)}</div>
-      <Slider current={percent} onChange={onTimeChange} className="slider" />
+      <Slider
+        current={percent}
+        onChange={onTimeChange}
+        className="slider"
+        secondTrack={
+          <SecondTrack
+            style={{
+              transform: `scaleX(${bufferedPercent * 100}%)`,
+            }}
+          />
+        }
+      />
       <div className="time">{formatSecond(duration)}</div>
     </Style>
   );

apps/pwa/src/pages/player/lyric_panel/lyric_panel.tsx

@@ -22,6 +22,7 @@ function LyricPanel({ style }: { style: unknown }) {
     audioPaused,
     audioDuration,
     audioLoading,
+    audioBufferedPercent,
     playqueue,
     currentPlayqueuePosition,
   } = useContext(Context);
@@ -37,6 +38,7 @@ function LyricPanel({ style }: { style: unknown }) {
         paused={audioPaused}
         duration={audioDuration}
         loading={audioLoading}
+        bufferedPercent={audioBufferedPercent}
       />
     </Style>
   );