Custom timeline & timeline tooltip

src/shared/components/VideoPlayer/CustomTimeline.style.ts

@@ -0,0 +1,142 @@
+import { css } from '@emotion/react'
+import styled from '@emotion/styled'
+
+import { colors, transitions, zIndex } from '@/shared/theme'
+
+import { CustomControls, TRANSITION_DELAY } from './VideoPlayer.style'
+
+import { Text } from '../Text'
+
+type ProgressControlProps = {
+  isFullScreen?: boolean
+  isScrubbing?: boolean
+}
+
+// expand ProgressControl area when scrubbing
+const scrubbingStyles = (isFullScreen?: boolean) => css`
+  height: 100vh;
+  bottom: ${isFullScreen ? 0 : '-200px'};
+  padding-bottom: ${isFullScreen ? `1.5em 1.5em` : '200px'};
+`
+
+export const ProgressControl = styled.div<ProgressControlProps>`
+  padding: ${({ isFullScreen }) => (isFullScreen ? `1.5em 1.5em` : `0`)};
+  position: absolute;
+  height: 1.5em;
+  z-index: ${zIndex.nearOverlay};
+  left: 0;
+  bottom: 0;
+  width: 100%;
+  cursor: pointer;
+  display: flex;
+  align-items: flex-end;
+  ${({ isScrubbing, isFullScreen }) => isScrubbing && scrubbingStyles(isFullScreen)};
+  :hover ${() => SeekBar} {
+    height: 0.5em;
+  }
+  :hover ${() => PlayProgressThumb} {
+    opacity: 1;
+  }
+  :hover ${() => MouseDisplayWrapper} {
+    opacity: 1;
+  }
+  :hover ${() => MouseDisplayTooltip} {
+    transform: translateY(-0.5em) !important;
+    opacity: 1;
+  }
+  :hover ~ ${CustomControls} {
+    opacity: 0;
+    transform: translateY(0.5em) !important;
+  }
+
+  ${() => SeekBar} {
+    ${({ isScrubbing }) => isScrubbing && `height: 0.5em`}
+  }
+
+  ${() => MouseDisplayWrapper}, ${() => PlayProgressThumb} {
+    ${({ isScrubbing }) => isScrubbing && `opacity: 1`}
+  }
+  ${() => MouseDisplayTooltip} {
+    ${({ isScrubbing }) => isScrubbing && `transform: translateY(-0.5em) !important`}
+  }
+  ~ ${CustomControls} {
+    ${({ isScrubbing }) => isScrubbing && `opacity: 0; transform: translateY(0.5em) !important`};
+  }
+`
+
+export const SeekBar = styled.div`
+  position: relative;
+  width: 100%;
+  height: 0.25em;
+  background-color: ${colors.transparentWhite[32]};
+  transition: height ${transitions.timings.player} ${TRANSITION_DELAY} ${transitions.easing};
+`
+
+export const LoadProgress = styled.div`
+  height: 100%;
+  background-color: ${colors.transparentWhite[32]};
+`
+
+export const MouseDisplayWrapper = styled.div`
+  width: 100%;
+  opacity: 0;
+  transition: opacity 200ms ${transitions.easing};
+`
+
+export const MouseDisplay = styled.div`
+  height: 100%;
+  position: absolute;
+  top: 0;
+  background-color: ${colors.transparentWhite[32]};
+`
+
+type MouseDisplayTooltipProps = {
+  isFullScreen?: boolean
+}
+
+export const MouseDisplayTooltip = styled.div<MouseDisplayTooltipProps>`
+  pointer-events: none;
+  user-select: none;
+  opacity: 0;
+  position: absolute;
+  padding: ${({ isFullScreen }) => (isFullScreen ? `0` : `0 1em`)};
+  bottom: 1.5em;
+  transition: transform ${transitions.timings.player} ${TRANSITION_DELAY} ${transitions.easing},
+    opacity ${transitions.timings.player} ${TRANSITION_DELAY} ${transitions.easing};
+`
+
+export const StyledTooltipText = styled(Text)`
+  /* 14px */
+  font-size: 0.875em;
+  pointer-events: none;
+  text-shadow: 0 1px 2px ${colors.transparentBlack[32]};
+  font-feature-settings: 'tnum' on, 'lnum' on;
+`
+
+export const PlayProgressWrapper = styled.div`
+  width: 100%;
+`
+
+export const PlayProgress = styled.div`
+  position: absolute;
+  top: 0;
+  height: 100%;
+  background-color: ${colors.blue[500]};
+  z-index: 1;
+`
+
+export const PlayProgressThumb = styled.button`
+  cursor: pointer;
+  border: none;
+  opacity: 0;
+  z-index: 1;
+  content: '';
+  height: 1em;
+  width: 1em;
+  top: -0.25em;
+  position: absolute;
+  box-shadow: 0 1px 2px ${colors.transparentBlack[32]};
+  border-radius: 100%;
+  background: ${colors.white} !important;
+  transition: opacity ${transitions.timings.player} ${TRANSITION_DELAY} ${transitions.easing} !important;
+`

src/shared/components/VideoPlayer/CustomTimeline.tsx

@@ -0,0 +1,175 @@
+import { clamp, round } from 'lodash'
+import React, { useEffect, useRef } from 'react'
+import { useState } from 'react'
+import { VideoJsPlayer } from 'video.js'
+
+import { formatDurationShort } from '@/utils/time'
+
+import {
+  LoadProgress,
+  MouseDisplay,
+  MouseDisplayTooltip,
+  MouseDisplayWrapper,
+  PlayProgress,
+  PlayProgressThumb,
+  PlayProgressWrapper,
+  ProgressControl,
+  SeekBar,
+  StyledTooltipText,
+} from './CustomTimeline.style'
+import { PlayerState } from './VideoPlayer'
+
+type CustomTimelineProps = {
+  player?: VideoJsPlayer | null
+  isFullScreen?: boolean
+  playerState: PlayerState
+}
+
+const UPDATE_INTERVAL = 30
+
+export const CustomTimeline: React.FC<CustomTimelineProps> = ({ player, isFullScreen, playerState }) => {
+  const playProgressRef = useRef<HTMLDivElement>(null)
+  const seekBarRef = useRef<HTMLDivElement>(null)
+  const mouseDisplayTooltipRef = useRef<HTMLDivElement>(null)
+
+  const [playProgressWidth, setPlayProgressWidth] = useState(0)
+  const [loadProgressWidth, setLoadProgressWidth] = useState(0)
+  const [mouseDisplayWidth, setMouseDisplayWidth] = useState(0)
+  const [mouseDisplayTooltipTime, setMouseDisplayTooltipTime] = useState('0:00')
+  const [mouseDisplayTooltipWidth, setMouseDisplayTooltipWidth] = useState(0)
+  const [isScrubbing, setIsScrubbing] = useState(false)
+  const [playedBefore, setPlayedBefore] = useState(false)
+
+  useEffect(() => {
+    if (!player || !playedBefore) {
+      return
+    }
+    if (isScrubbing) {
+      player.pause()
+    } else {
+      player.play()
+      setPlayedBefore(false)
+    }
+  }, [isScrubbing, player, playedBefore])
+
+  useEffect(() => {
+    const playProgress = playProgressRef.current
+    if (!player || !playerState || playerState === 'ended' || playerState === 'error' || !playProgress || isScrubbing) {
+      return
+    }
+
+    const interval = window.setInterval(() => {
+      const duration = player.duration()
+      const currentTime = player.currentTime()
+      const buffered = player.buffered()
+
+      // set playProgress
+
+      const progressPercentage = round((currentTime / duration) * 100, 2)
+      setPlayProgressWidth(progressPercentage)
+
+      // set loadProgress
+
+      // get all buffered time ranges
+      const bufferedTimeRanges = Array.from({ length: buffered.length }).map((_, idx) => ({
+        bufferedStart: buffered.start(idx),
+        bufferedEnd: buffered.end(idx),
+      }))
+
+      const currentBufferedTimeRange = bufferedTimeRanges.find(
+        (el) => el.bufferedEnd > currentTime && el.bufferedStart < currentTime
+      )
+
+      if (currentBufferedTimeRange) {
+        const loadProgressPercentage = round((currentBufferedTimeRange.bufferedEnd / duration) * 100, 2)
+        setLoadProgressWidth(loadProgressPercentage)
+      } else {
+        setLoadProgressWidth(0)
+      }
+    }, UPDATE_INTERVAL)
+    return () => {
+      clearInterval(interval)
+    }
+  }, [isScrubbing, player, playerState])
+
+  const handleMouseAndTouchMove = (e: React.MouseEvent | React.TouchEvent) => {
+    const seekBar = seekBarRef.current
+    const mouseDisplayTooltip = mouseDisplayTooltipRef.current
+    if (!seekBar || !mouseDisplayTooltip || !player) {
+      return
+    }
+    // this will prevent hiding controls when scrubbing on mobile
+    player.enableTouchActivity()
+
+    const duration = player.duration()
+
+    // position of seekBar
+    const { x: seekBarPosition, width: seekBarWidth } = seekBar.getBoundingClientRect()
+    const position = 'clientX' in e ? e.clientX - seekBarPosition : e.touches[0].clientX - seekBarPosition
+    const percentage = clamp(round((position / seekBarWidth) * 100, 2), 0, 100)
+    setMouseDisplayWidth(percentage)
+    setMouseDisplayTooltipWidth(mouseDisplayTooltip.clientWidth)
+
+    // tooltip text
+    if (duration) {
+      setMouseDisplayTooltipTime(formatDurationShort(round((percentage / 100) * duration)))
+    }
+    if (isScrubbing) {
+      if (!player.paused()) {
+        setPlayedBefore(true)
+      }
+      setPlayProgressWidth(percentage)
+    }
+  }
+
+  const handleJumpToTime = (e: React.MouseEvent) => {
+    const seekBar = seekBarRef.current
+    if (!seekBar || isScrubbing) {
+      return
+    }
+
+    const { x: seekBarPosition, width: seekBarWidth } = seekBar.getBoundingClientRect()
+    const mousePosition = e.clientX - seekBarPosition
+
+    const percentage = clamp(round(mousePosition / seekBarWidth, 4), 0, 100)
+    const newTime = percentage * (player?.duration() || 0)
+    player?.currentTime(newTime)
+  }
+
+  return (
+    <ProgressControl
+      isScrubbing={isScrubbing}
+      isFullScreen={isFullScreen}
+      onMouseMove={handleMouseAndTouchMove}
+      onTouchMove={handleMouseAndTouchMove}
+      onMouseLeave={() => setIsScrubbing(false)}
+      onClick={handleJumpToTime}
+      onMouseDown={() => setIsScrubbing(true)}
+      onTouchStart={() => setIsScrubbing(true)}
+      onMouseUp={() => setIsScrubbing(false)}
+      onTouchEnd={() => setIsScrubbing(false)}
+    >
+      <SeekBar ref={seekBarRef}>
+        <LoadProgress style={{ width: loadProgressWidth + '%' }} />
+        <MouseDisplayWrapper>
+          <MouseDisplay style={{ width: mouseDisplayWidth + '%' }} />
+          <MouseDisplayTooltip
+            ref={mouseDisplayTooltipRef}
+            style={{
+              left: `clamp(0px, calc(${mouseDisplayWidth}% - ${
+                mouseDisplayTooltipWidth / 2
+              }px), calc(100% - ${mouseDisplayTooltipWidth}px))`,
+            }}
+            isFullScreen={isFullScreen}
+          >
+            <StyledTooltipText variant="body2">{mouseDisplayTooltipTime}</StyledTooltipText>
+          </MouseDisplayTooltip>
+        </MouseDisplayWrapper>
+        <PlayProgressWrapper>
+          <PlayProgress style={{ width: playProgressWidth + '%' }} ref={playProgressRef} />
+          <PlayProgressThumb style={{ left: `clamp(0px, calc(${playProgressWidth}% - 0.5em), calc(100% - 1em))` }} />
+        </PlayProgressWrapper>
+      </SeekBar>
+    </ProgressControl>
+  )
+}