Classifier: Custom Video Controls

packages/lib-classifier/src/components/Classifier/components/SubjectViewer/components/SingleVideoViewer/README.md

@@ -7,7 +7,7 @@ The only allowed video media type is mp4.
 
 ## Features
 
-SingleVideoViewerContainer handles state for SingleVideoViewer and VideoController. It's also contains an svg and InteractionLayer for drawing on a video subject.
+SingleVideoViewerContainer handles state for the `react-player` component and VideoController. It's also contains an svg and InteractionLayer for drawing on a video subject.
 
 Refs
 - `interactionLayerSVG`: Reference to svg element displayed on top of video subject. Needed for drawing tools' InteractionLayer.
@@ -24,12 +24,14 @@ Props
 State Variables
 - `clientWidth`: (number) Returned from `getBoundingClientRect()` on the <video> element in `react-player`.
 - `duration`: (number) Duration of the video subject. Seconds rounded to 3 decimal places.
+- `fullscreen`: (boolean) Whether or not the video is displayed fullscreen.
 - `isPlaying`: (boolean) Whether or not the video subject is playing.
-- `isSeeking`: (boolean) Whether or not a user is interacting with the VideoController > Slider.
 - `playbackRate`: (number) 1, 0.5, or 0.25 ratio determines the speed of video playback.
-- `timeStamp`: (number) Current played timestamp of video subject.
+- `timeStamp`: (number) Represented by percent of subject played (0 to 1).
 - `videoHeight`: (number) Natural height of video subject file.
 - `videoWidth`: (number) Natural width of the video subject file.
+- `volume`: (number) Number between 0 and 1. It's passed to the react-player to control volume.
+- `volumeOpen`: (boolean) Determines whether the VideoController's volume range input is displayed or not.
 
 ## External Setup: Workflows and Subjects
 

packages/lib-classifier/src/components/Classifier/components/SubjectViewer/components/SingleVideoViewer/SingleVideoViewerContainer.js

@@ -2,17 +2,17 @@ import PropTypes from 'prop-types'
 import styled from 'styled-components'
 import { Box } from 'grommet'
 import { MobXProviderContext } from 'mobx-react'
-import React, { useContext, useState, useRef } from 'react'
+import React, { useContext, useMemo, useState, useRef } from 'react'
 import { useTranslation } from 'react-i18next'
 import asyncStates from '@zooniverse/async-states'
+import ReactPlayer from 'react-player'
 
 import SVGContext from '@plugins/drawingTools/shared/SVGContext'
 
+import getFixedNumber from '../../helpers/getFixedNumber'
 import InteractionLayer from '../InteractionLayer'
 import locationValidator from '../../helpers/locationValidator'
-import SingleVideoViewer from './SingleVideoViewer'
-import VideoController from '../VideoController/VideoController'
-import getFixedNumber from '../../helpers/getFixedNumber'
+import VideoController from './components/VideoController'
 
 const SubjectContainer = styled.div`
   position: relative;
@@ -40,12 +40,14 @@ function SingleVideoViewerContainer({
 }) {
   const [clientWidth, setClientWidth] = useState(0)
   const [duration, setDuration] = useState(0)
+  const [fullscreen, setFullscreen] = useState(false)
   const [isPlaying, setIsPlaying] = useState(false)
-  const [isSeeking, setIsSeeking] = useState(false)
-  const [playbackRate, setPlaybackRate] = useState(1)
+  const [playbackRate, setPlaybackRate] = useState('1x')
   const [timeStamp, setTimeStamp] = useState(0)
   const [videoHeight, setVideoHeight] = useState(0)
   const [videoWidth, setVideoWidth] = useState(0)
+  const [volume, setVolume] = useState(1)
+  const [volumeOpen, toggleVolumeOpen] = useState(false)
 
   const interactionLayerSVG = useRef()
   const playerRef = useRef()
@@ -83,17 +85,14 @@ function SingleVideoViewerContainer({
     }
   }
 
-  const enableDrawing = loadingState === asyncStates.success && enableInteractionLayer
+  const enableDrawing = enableInteractionLayer && loadingState === asyncStates.success
 
-  /* ==================== SingleVideoViewer react-player ==================== */
+  /* ==================== react-player ==================== */
 
   const handleVideoProgress = reactPlayerState => {
-    const { played } = reactPlayerState
-    const fixedNumber = getFixedNumber(played, 5)
-    // TO DO: Why wouldn't you set timestamp when seeking?
-    if (!isSeeking) {
-      setTimeStamp(fixedNumber)
-    }
+    const { played } = reactPlayerState // percentage of video played (0 to 1)
+    const fixedNumber = getFixedNumber(played, 3)
+    setTimeStamp(fixedNumber)
   }
 
   const handleVideoDuration = duration => {
@@ -113,25 +112,75 @@ function SingleVideoViewerContainer({
     setPlaybackRate(rate)
   }
 
-  const handleSliderMouseUp = () => {
-    setIsSeeking(false)
+  const handleSliderChange = e => {
+    const newTimeStamp = e.target.value
+    playerRef?.current.seekTo(newTimeStamp, 'seconds')
   }
 
-  const handleSliderMouseDown = () => {
-    setIsPlaying(false)
-    setIsSeeking(true)
+  const handleVolume = e => {
+    setVolume(e.target.value)
   }
 
-  /* When VideoController > Slider is clicked or scrubbed */
-  const handleSliderChange = e => {
-    const played = getFixedNumber(e.target.value, 5)
-    playerRef?.current.seekTo(played)
+  const handleVolumeOpen = () => {
+    const prevVolumeOpen = volumeOpen
+    toggleVolumeOpen(!prevVolumeOpen)
+  }
+
+  const handleFullscreen = () => {
+    if (fullscreen) {
+      try {
+        document.exitFullscreen()
+        setFullscreen(false)
+      } catch (error) {
+        console.log(error)
+      }
+    } else {
+      try {
+        playerRef.current?.getInternalPlayer().requestFullscreen()
+        setFullscreen(true)
+      } catch (error) {
+        console.log(error)
+      }
+    }
   }
 
   const handlePlayerError = (error) => {
     onError(error)
   }
 
+  const sanitizedRate = Number(playbackRate.slice(0, -1))
+
+  /* Memoized so onProgress() and setTimeStamp() don't trigger each other */
+  const memoizedViewer = useMemo(() => (
+    <ReactPlayer
+      controls={false}
+      height='100%'
+      onDuration={handleVideoDuration}
+      onEnded={handleVideoEnded}
+      onError={handlePlayerError}
+      onReady={onReactPlayerReady}
+      onProgress={handleVideoProgress}
+      playing={isPlaying}
+      playbackRate={sanitizedRate}
+      progressInterval={100} // milliseconds
+      ref={playerRef}
+      width='100%'
+      volume={volume}
+      url={videoSrc}
+      config={{
+        file: { // styling the <video> element
+          attributes: {
+            style: {
+              display: 'block',
+              height: '100%',
+              width: '100%'
+            }
+          }
+        }
+      }}
+    />
+  ), [isPlaying, playbackRate, videoSrc, volume])
+
   const canvas = transformLayer?.current
   const interactionLayerScale = clientWidth / videoWidth
   const svgStyle = {}
@@ -144,17 +193,7 @@ function SingleVideoViewerContainer({
       {videoSrc
         ? (
           <SubjectContainer>
-            <SingleVideoViewer
-              isPlaying={isPlaying}
-              onDuration={handleVideoDuration}
-              onEnded={handleVideoEnded}
-              onError={handlePlayerError}
-              onReactPlayerReady={onReactPlayerReady}
-              onProgress={handleVideoProgress}
-              playbackRate={playbackRate}
-              playerRef={playerRef}
-              url={videoSrc}
-            />
+            {memoizedViewer}
             {enableDrawing && (
               <DrawingLayer>
                 <Box overflow='hidden'>
@@ -188,15 +227,18 @@ function SingleVideoViewerContainer({
           <Box>{t('SubjectViewer.SingleVideoViewerContainer.error')}</Box>
           )}
       <VideoController
-        isPlaying={isPlaying}
-        played={timeStamp}
-        playbackRate={playbackRate}
         duration={duration}
+        isPlaying={isPlaying}
+        handleFullscreen={handleFullscreen}
+        handleVolumeOpen={handleVolumeOpen}
         onPlayPause={handlePlayPause}
-        onSpeedChange={handleSpeedChange}
-        onSliderMouseUp={handleSliderMouseUp}
-        onSliderMouseDown={handleSliderMouseDown}
         onSliderChange={handleSliderChange}
+        onSpeedChange={handleSpeedChange}
+        onVolumeChange={handleVolume}
+        playbackRate={playbackRate}
+        timeStamp={timeStamp}
+        volume={volume}
+        volumeOpen={volumeOpen}
       />
     </>
   )

packages/lib-classifier/src/components/Classifier/components/SubjectViewer/components/SingleVideoViewer/SingleVideoViewerContainer.spec.js

@@ -3,6 +3,8 @@ import { render, screen, waitFor } from '@testing-library/react'
 import { expect } from 'chai'
 import { Factory } from 'rosie'
 import { Provider } from 'mobx-react'
+import { Grommet } from 'grommet'
+import zooTheme from '@zooniverse/grommet-theme'
 
 import mockStore from '@test/mockStore'
 import SingleVideoViewerContainer from './SingleVideoViewerContainer'
@@ -12,7 +14,8 @@ describe('Component > SingleVideoViewerContainer', function () {
     const mockSubject = Factory.build('subject', {
       locations: [
         {
-          'video/mp4': 'https://panoptes-uploads.zooniverse.org/subject_location/239f17f7-acf9-49f1-9873-266a80d29c33.mp4'
+          'video/mp4':
+            'https://panoptes-uploads.zooniverse.org/subject_location/239f17f7-acf9-49f1-9873-266a80d29c33.mp4'
         }
       ]
     })
@@ -24,9 +27,9 @@ describe('Component > SingleVideoViewerContainer', function () {
     it('should render a video html element with subject url as src', async function () {
       const { container } = render(
         <Provider classifierStore={store}>
-          <SingleVideoViewerContainer
-            subject={mockSubject}
-          />
+          <Grommet theme={zooTheme}>
+            <SingleVideoViewerContainer subject={mockSubject} />
+          </Grommet>
         </Provider>
       )
       // We need to wait for React Player to be ready
@@ -49,11 +52,15 @@ describe('Component > SingleVideoViewerContainer', function () {
     it('should display an error message and no video html element ', function () {
       const { container } = render(
         <Provider classifierStore={store}>
-          <SingleVideoViewerContainer />
+          <Grommet theme={zooTheme}>
+            <SingleVideoViewerContainer />
+          </Grommet>
         </Provider>
       )
       const videoElement = container.querySelector('video')
-      const errorMessage = screen.getByText('SubjectViewer.SingleVideoViewerContainer.error')
+      const errorMessage = screen.getByText(
+        'SubjectViewer.SingleVideoViewerContainer.error'
+      )
       expect(videoElement).to.be.null()
       expect(errorMessage).exists()
     })

packages/lib-classifier/src/components/Classifier/components/SubjectViewer/components/SingleVideoViewer/components/VideoController/README.md

@@ -0,0 +1,27 @@
+# VideoController
+
+Used in SingleVideoViewer. Custom video controls are necessary for building drawing tools layers on top of a video subject. The `react-player` used to display a video subject has built-in controls, but their position overlaps some of the video. When an svg is placed on top of the player to record annotations, the built-in controls become unusable, hence the need for custom controls displayed below the subject.
+
+## Features
+
+- Play
+- Pause
+- Display timestamp
+- Scrubbing
+- Change playback rate
+- Adjust the volume
+- Request fullscreen
+
+## Props
+- `duration`: (number) Duration of video subject in seconds.
+- `isPlaying`: (boolean) State variable in SingleVideoViewerContainer determines if video player is playing.
+- `handleFullscreen`: (func) Function passed from SingleVideoViewerContainer and called when fullscreen button is clicked.
+- `handleVolumeOpen`: (func) Function passed from SingleVideoViewerContainer and called when volume icon is clicked.
+- `onPlayPause`: (func) Function passed from SingleVideoViewerContainer and called when player is played or paused.
+- `onSpeedChange`: (func) Function passed from SingleVideoViewerContainer and called when the playback rate Select component is changed.
+- `onSliderChange`: (func) Function passed from SingleVideoViewerContainer and called when Slider input is changed.
+- `onVolumeChange`: (func) Called when the volume range input is changed.
+- `playbackRate`: (number) From 0 to 1.
+- `timeStamp`: (number) Measured from 0 to 1. The percentage of the video subject played.
+- `volume`: (number) Number between 0 and 1.
+- `volumeOpen`: (boolean) Controls whether the volume range input is displayed or not.