chore: update types

zmccc · Sep 17, 2021 · 02f5c05 · 02f5c05
1 parent 5c396fc
commit 02f5c05
Show file tree

Hide file tree

Showing 23 changed files with 234 additions and 148 deletions.
diff --git a/.eslintignore b/.eslintignore
@@ -1,3 +1,2 @@
-**/dist
-**/esm
-**/cjs
+dist
+coverage
diff --git a/packages/griffith-hls/src/Video.tsx → packages/griffith-hls/src/VideoComponent.tsx b/packages/griffith-hls/src/Video.tsx → packages/griffith-hls/src/VideoComponent.tsx
@@ -13,10 +13,10 @@ type VideoProps = NativeVideoProps & {
   onRef(el: HTMLVideoElement | null): void
 }
 
-export default class Video extends Component<VideoProps> {
+export default class VideoComponent extends Component<VideoProps> {
   hls: any
-  src: any
-  video: any
+  src!: string
+  video: HTMLVideoElement | null = null
   manuallyBuildAdaptiveM3U8Blob = false
   hasLoadStarted = false
 
@@ -35,7 +35,7 @@ export default class Video extends Component<VideoProps> {
       this.src = URL.createObjectURL(master)
       this.manuallyBuildAdaptiveM3U8Blob = true
     } else {
-      this.src = src
+      this.src = src!
     }
 
     this.hls.loadSource(this.src)
@@ -57,15 +57,15 @@ export default class Video extends Component<VideoProps> {
         } else {
           // TODO: 没有在 hls 的 API 内部找到顺畅切换 source 的方法
           // 因此这里比较直接和生硬
-          const currentTime = this.video.currentTime
+          const currentTime = this.video!.currentTime
           this.hls.destroy()
           this.hls = new Hls({autoStartLoad: false})
           this.hls.attachMedia(this.video)
           this.hls.loadSource(source.source)
-          this.video.currentTime = currentTime
+          this.video!.currentTime = currentTime
           this.hls.startLoad()
           if (!paused) {
-            this.video.play()
+            void this.video!.play()
           }
         }
       } else {

diff --git a/packages/griffith-hls/src/index.ts b/packages/griffith-hls/src/index.ts
@@ -1,4 +1,4 @@
-import VideoComponent from './Video'
+import VideoComponent from './VideoComponent'
 
 export default {
   pluginName: 'griffith-hls',

diff --git a/packages/griffith-hls/src/utils/createMasterM3U8.ts b/packages/griffith-hls/src/utils/createMasterM3U8.ts
@@ -1,19 +1,28 @@
-export default function createMasterM3U8(list: any) {
+type Item = {
+  bandwidth: number
+  resolution: {
+    height: number
+    width: number
+  }
+  source: string
+}
+
+export default function createMasterM3U8(list: Item[]) {
   const result = []
   result.push('#EXTM3U')
 
-  list.forEach((item: any) => {
-    const meta = {
+  list.forEach((item) => {
+    const meta: Record<string, unknown> = {
       'PROGRAM-ID': '1',
       BANDWIDTH: String(item.bandwidth),
     }
     if (item.resolution) {
       const {width, height} = item.resolution
-      ;(meta as any).RESOLUTION = `${width}x${height}`
+      meta.RESOLUTION = `${width}x${height}`
     }
     result.push(
       `#EXT-X-STREAM-INF:${Object.entries(meta)
-        .map(([key, value]) => `${key}=${value}`)
+        .map(([key, value]) => `${key}=${value as string}`)
         .join(',')}`
     )
 

diff --git a/packages/griffith-hls/src/utils/getMasterM3U8Blob.ts b/packages/griffith-hls/src/utils/getMasterM3U8Blob.ts
@@ -1,7 +1,14 @@
 import createMasterM3U8 from './createMasterM3U8'
 
-export default (sources: any) => {
-  const list = sources.map((item: any) => ({
+type Source = {
+  source: string
+  bitrate: number
+  height: number
+  width: number
+}
+
+export default (sources: Source[]): Blob => {
+  const list = sources.map((item) => ({
     source: item.source,
     bandwidth: item.bitrate * 1024,
 

diff --git a/packages/griffith/package.json b/packages/griffith/package.json
@@ -23,6 +23,7 @@
   },
   "dependencies": {
     "@types/lodash": "^4.14.172",
+    "@types/react": "^17.0.21",
     "aphrodite": "^2.4.0",
     "eventemitter3": "^3.1.0",
     "griffith-hls": "^1.18.0",

diff --git a/packages/griffith/src/components/Controller.tsx b/packages/griffith/src/components/Controller.tsx
@@ -15,24 +15,26 @@ import PipButtonItem from './items/PipButtonItem'
 import styles from './Controller.styles'
 import PlaybackRateMenuItem from './items/PlaybackRateMenuItem'
 
-type OwnProps = {
+export type ToggleType = 'button' | 'keyCode' | 'video' | null
+
+type ControllerProps = {
   standalone?: boolean
   isPlaying?: boolean
   duration?: number
-  currentTime?: number
-  volume?: number
+  currentTime: number
+  volume: number
   buffered?: number
   isFullScreen?: boolean
   isPageFullScreen: boolean
   isPip: boolean
-  onDragStart?: (...args: any[]) => any
-  onDragEnd?: (...args: any[]) => any
-  onPlay?: (...args: any[]) => any
-  onPause?: (...args: any[]) => any
-  onSeek?: (...args: any[]) => any
+  onDragStart?: () => void
+  onDragEnd?: () => void
+  onPlay?: (type: ToggleType) => void
+  onPause?: (type: ToggleType) => void
+  onSeek?: (currentTime: number) => void
   onQualityChange?: (...args: any[]) => any
-  onVolumeChange?: (...args: any[]) => any
-  onToggleFullScreen?: (...args: void[]) => void
+  onVolumeChange?: (volume: number) => void
+  onToggleFullScreen?: () => void
   onTogglePageFullScreen: (...args: void[]) => void
   onTogglePip?: (...args: void[]) => void
   onProgressDotHover?: (...args: any[]) => any
@@ -49,11 +51,14 @@ type OwnProps = {
   hiddenPlaybackRateItem?: boolean
 }
 
-type State = any
-
-type Props = OwnProps & typeof Controller.defaultProps
+type State = {
+  slideTime?: number | null
+  isVolumeHovered: boolean
+  isVolumeDragging: boolean
+  isVolumeKeyboard: boolean
+}
 
-class Controller extends Component<Props, State> {
+class Controller extends Component<ControllerProps, State> {
   static defaultProps = {
     show: false,
     standalone: false,
@@ -91,7 +96,8 @@ class Controller extends Component<Props, State> {
     }
   }
 
-  shouldComponentUpdate(nextProps: Props) {
+  shouldComponentUpdate(nextProps: ControllerProps) {
+    // eslint-disable-next-line @typescript-eslint/no-unsafe-return
     return this.props.show || nextProps.show
   }
 
@@ -102,13 +108,13 @@ class Controller extends Component<Props, State> {
     }
   }
 
-  onDragMove = (slideTime: any) => {
+  onDragMove = (slideTime: number) => {
     const {duration} = this.props
     slideTime = clamp(slideTime, 0, duration)
     this.setState({slideTime})
   }
 
-  handleToggle = (type: any) => {
+  handleToggle = (type: ToggleType) => {
     const {isPlaying, onPlay, onPause} = this.props
     if (!isPlaying && onPlay) {
       onPlay(type)
@@ -118,7 +124,7 @@ class Controller extends Component<Props, State> {
     }
   }
 
-  handleSeek = (currentTime: any) => {
+  handleSeek = (currentTime: number) => {
     const {duration, onSeek} = this.props
     currentTime = clamp(currentTime, 0, duration)
     if (onSeek) {
@@ -127,7 +133,7 @@ class Controller extends Component<Props, State> {
     }
   }
 
-  handleVolumeChange = (volume: any) => {
+  handleVolumeChange = (volume: number) => {
     volume = clamp(volume, 0, 1)
     const {onVolumeChange} = this.props
     if (onVolumeChange) {
@@ -174,7 +180,7 @@ class Controller extends Component<Props, State> {
     }
   }
 
-  handleKeyDown = (event: any) => {
+  handleKeyDown = (event: KeyboardEvent) => {
     const {duration, currentTime, volume, show, onToggleFullScreen} = this.props
     let handled = true
     switch (event.keyCode) {

diff --git a/packages/griffith/src/components/MinimalTimeline.tsx b/packages/griffith/src/components/MinimalTimeline.tsx
@@ -22,7 +22,8 @@ class MinimalTimeline extends Component<Props> {
     progressDots: [] as ProgressDot[],
   }
 
-  shouldComponentUpdate(nextProps: Props) {
+  shouldComponentUpdate(nextProps: Props): boolean {
+    // eslint-disable-next-line @typescript-eslint/no-unsafe-return
     return this.props.show || nextProps.show
   }
 

diff --git a/packages/griffith/src/components/Player.tsx b/packages/griffith/src/components/Player.tsx
@@ -27,7 +27,7 @@ import Icon from './Icon'
 import * as icons from './icons/display/index'
 import Loader from './Loader'
 import Video from './Video'
-import Controller from './Controller'
+import Controller, {ToggleType} from './Controller'
 import VolumeItem from './items/VolumeItem'
 import MinimalTimeline from './MinimalTimeline'
 import getBufferedTime from '../utils/getBufferedTime'
@@ -97,7 +97,25 @@ type OuterPlayerProps = {
 export type PlayerProps = Omit<InnerPlayerProps, keyof ProviderOnlyProps> &
   OuterPlayerProps
 
-type State = any
+type State = {
+  isPlaybackStarted: boolean
+  isNeverPlayed: boolean
+  lastAction?: 'play' | 'pause' | null
+  isDataLoaded: boolean
+  isPlaying: boolean
+  isLoading: boolean
+  duration: number
+  currentTime: number
+  volume: number
+  buffered: {start: number; end: number}[][]
+  isControllerShown: boolean
+  isControllerHovered: boolean
+  isControllerDragging: boolean
+  type: ToggleType
+  hovered: boolean
+  pressed: boolean
+  isEnterPageFullScreen: boolean
+}
 
 class InnerPlayer extends Component<InnerPlayerProps, State> {
   static contextType = VideoSourceContext
@@ -136,9 +154,12 @@ class InnerPlayer extends Component<InnerPlayerProps, State> {
 
   // refs
   playerRef = React.createRef<HTMLDivElement>()
-  videoRef = React.createRef()
+  videoRef = React.createRef<{
+    root: HTMLVideoElement
+    seek(currentTime: number): void
+  }>()
 
-  static getDerivedStateFromProps = (props: any, state: any) => {
+  static getDerivedStateFromProps = (props: InnerPlayerProps, state: any) => {
     const {duration} = props
 
     const shouldUpdateDuration = duration && !state.duration
@@ -159,7 +180,7 @@ class InnerPlayer extends Component<InnerPlayerProps, State> {
 
     const historyVolume = storage.get('@griffith/history-volume')
     if (historyVolume) {
-      this.setState({volume: historyVolume})
+      this.setState({volume: historyVolume as number})
     }
 
     this.actionSubscriptions_ = [
@@ -177,7 +198,7 @@ class InnerPlayer extends Component<InnerPlayerProps, State> {
       ),
     ]
 
-    if ((this as any).videoRef.current.root) {
+    if (this.videoRef.current!.root) {
       if (this.props.muted) {
         this.handleVideoVolumeChange(0)
       }
@@ -210,7 +231,7 @@ class InnerPlayer extends Component<InnerPlayerProps, State> {
     isControllerHovered,
     isControllerDragging,
     currentTime,
-  }: any) => {
+  }: Partial<State>) => {
     // 播放中：暂停 或 Controller shown/hovered/dragging 时展示 Controller
     if (isPlaybackStarted) {
       return (
@@ -235,11 +256,11 @@ class InnerPlayer extends Component<InnerPlayerProps, State> {
   initPip = () => {
     if (
       !this.props.disablePictureInPicture &&
-      (this as any).videoRef.current.root &&
+      this.videoRef.current!.root &&
       !Pip.inited
     ) {
       Pip.init(
-        (this as any).videoRef.current.root,
+        this.videoRef.current!.root,
         () => this.props.onEvent(EVENTS.ENTER_PIP),
         () => this.props.onEvent(EVENTS.EXIT_PIP)
       )
@@ -266,7 +287,7 @@ class InnerPlayer extends Component<InnerPlayerProps, State> {
     }
   }
 
-  handlePlay = (type: 'video' | null = null) => {
+  handlePlay = (type: ToggleType = null) => {
     const {onEvent, onBeforePlay} = this.props
     const {currentSrc} = this.context
     onEvent(EVENTS.REQUEST_PLAY)
@@ -293,7 +314,7 @@ class InnerPlayer extends Component<InnerPlayerProps, State> {
       })
   }
 
-  handlePause = (type: 'video' | 'button' | null = null) => {
+  handlePause = (type: ToggleType = null) => {
     this.props.onEvent(EVENTS.REQUEST_PAUSE)
     const {isLoading} = this.state
 
@@ -368,7 +389,7 @@ class InnerPlayer extends Component<InnerPlayerProps, State> {
       !isPlaybackStarted && !isNeverPlayed && stateCurrentTime !== 0 // 播放结束，显示「重新播放」状态
     this.setState({currentTime})
     // TODO 想办法去掉这个实例方法调用
-    ;(this as any).videoRef.current.seek(currentTime)
+    this.videoRef.current!.seek(currentTime)
     if (isPlayEnded) {
       this.handlePlay()
     }
@@ -814,7 +835,8 @@ const Player: React.FC<PlayerProps> = ({
           <InternalMessageContext.Consumer>
             {({emitEvent, subscribeAction}) => (
               <VideoSourceProvider
-                onEvent={emitEvent}
+                // TODO：改名 emitEvent
+                onEvent={emitEvent as any}
                 sources={sources}
                 id={id}
                 defaultQuality={defaultQuality}