useMediaControls

1'use client'
2 
3import * as React from 'react'
4 
5interface MediaControls {
6  play: () => Promise<void>
7  pause: () => void
8  toggle: () => Promise<void>
9  stop: () => void
10  toggleMute: (isMuted?: boolean) => void
11  setVolume: (volume: number) => void
12  setCurrentTime: (time: number) => void
13  isPlaying: boolean
14  isMuted: boolean
15  volume: number
16  currentTime: number
17  duration: number
18}
19 
20export function useMediaControls(
21  mediaRef: React.RefObject<HTMLMediaElement | null>,
22): MediaControls {
23  const [state, setState] = React.useState({
24    isPlaying: false,
25    isMuted: false,
26    volume: 1,
27    currentTime: 0,
28    duration: 0,
29  })
30 
31  React.useEffect(() => {
32    const media = mediaRef.current
33 
34    if (!media)
35      return
36 
37    const abortController = new AbortController()
38 
39    media.addEventListener('play', () => setState(s => ({ ...s, isPlaying: true })), { signal: abortController.signal })
40    media.addEventListener('pause', () => setState(s => ({ ...s, isPlaying: false })), { signal: abortController.signal })
41    media.addEventListener('volumechange', () => setState(s => ({
42      ...s,
43      volume: media.volume,
44      isMuted: media.muted,
45    })), { signal: abortController.signal })
46    media.addEventListener('timeupdate', () => setState(s => ({ ...s, currentTime: media.currentTime })), { signal: abortController.signal })
47    media.addEventListener('durationchange', () => setState(s => ({ ...s, duration: media.duration })), { signal: abortController.signal })
48    media.addEventListener('ended', () => setState(s => ({ ...s, isPlaying: false })), { signal: abortController.signal })
49 
50    setState({
51      isPlaying: !media.paused,
52      isMuted: media.muted,
53      volume: media.volume,
54      currentTime: media.currentTime,
55      duration: media.duration || 0,
56    })
57 
58    return () => {
59      abortController.abort()
60    }
61  }, [mediaRef])
62 
63  const play = React.useCallback(async () => {
64    if (mediaRef.current) {
65      await mediaRef.current.play()
66    }
67  }, [mediaRef])
68 
69  const pause = React.useCallback(() => {
70    if (mediaRef.current) {
71      mediaRef.current.pause()
72    }
73  }, [mediaRef])
74 
75  const toggle = React.useCallback(async () => {
76    if (mediaRef.current) {
77      if (state.isPlaying) {
78        mediaRef.current.pause()
79      }
80      else {
81        await mediaRef.current.play()
82      }
83    }
84  }, [mediaRef, state.isPlaying])
85 
86  const stop = React.useCallback(() => {
87    if (mediaRef.current) {
88      mediaRef.current.pause()
89// … truncated