From 039ededd1359810a167944ba68fdb516a0d76d55 Mon Sep 17 00:00:00 2001 From: mebtte Date: Sun, 17 Sep 2023 17:50:08 +0800 Subject: [PATCH] audio buffered percent --- apps/pwa/src/components/slider.tsx | 9 +++- apps/pwa/src/global_style.ts | 4 ++ apps/pwa/src/pages/player/context.ts | 2 + .../pages/player/controller/controller.tsx | 8 ++- .../src/pages/player/controller/progress.tsx | 24 --------- .../pages/player/controller/progress_bar.tsx | 51 +++++++++++++++++++ apps/pwa/src/pages/player/index.tsx | 2 + .../player/lyric_panel/controller/index.tsx | 6 ++- .../{slider.tsx => progress_bar.tsx} | 27 +++++++++- .../pages/player/lyric_panel/lyric_panel.tsx | 2 + 10 files changed, 103 insertions(+), 32 deletions(-) delete mode 100644 apps/pwa/src/pages/player/controller/progress.tsx create mode 100644 apps/pwa/src/pages/player/controller/progress_bar.tsx rename apps/pwa/src/pages/player/lyric_panel/controller/{slider.tsx => progress_bar.tsx} (65%) diff --git a/apps/pwa/src/components/slider.tsx b/apps/pwa/src/components/slider.tsx index d48d2a69..cecde311 100644 --- a/apps/pwa/src/components/slider.tsx +++ b/apps/pwa/src/components/slider.tsx @@ -3,6 +3,7 @@ import { HtmlHTMLAttributes, PointerEvent, PointerEventHandler, + ReactNode, useRef, useState, } from 'react'; @@ -10,20 +11,21 @@ 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, '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}
= { @@ -40,6 +42,8 @@ const CSS_VARIABLE_MAP_VALUE: Record = { [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` diff --git a/apps/pwa/src/pages/player/context.ts b/apps/pwa/src/pages/player/context.ts index 688a1b58..502f8818 100644 --- a/apps/pwa/src/pages/player/context.ts +++ b/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({ audioLoading: false, audioPaused: true, audioDuration: 0, + audioBufferedPercent: 0, playlist: [], diff --git a/apps/pwa/src/pages/player/controller/controller.tsx b/apps/pwa/src/pages/player/controller/controller.tsx index 6cc14dee..c8682da9 100644 --- a/apps/pwa/src/pages/player/controller/controller.tsx +++ b/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 ( ); diff --git a/apps/pwa/src/pages/player/lyric_panel/controller/slider.tsx b/apps/pwa/src/pages/player/lyric_panel/controller/progress_bar.tsx similarity index 65% rename from apps/pwa/src/pages/player/lyric_panel/controller/slider.tsx rename to apps/pwa/src/pages/player/lyric_panel/controller/progress_bar.tsx index a33186c2..d8c41de6 100644 --- a/apps/pwa/src/pages/player/lyric_panel/controller/slider.tsx +++ b/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 ( ); diff --git a/apps/pwa/src/pages/player/lyric_panel/lyric_panel.tsx b/apps/pwa/src/pages/player/lyric_panel/lyric_panel.tsx index 9e572de3..05379dc3 100644 --- a/apps/pwa/src/pages/player/lyric_panel/lyric_panel.tsx +++ b/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} /> );