From 838c5ebd1964535342c620c42a9d7cd36b96a72d Mon Sep 17 00:00:00 2001
From: Delilah Clement <delilahclement@gmail.com>
Date: Mon, 12 Sep 2022 16:05:08 -0500
Subject: [PATCH 01/34] Prepare SingleVideoViewer for adding unit tests -
 Remove defaultProps - Rename some variables for clarity - Add Readme info

---
 .../components/SingleVideoViewer/README.md    |  33 ++-
 .../SingleVideoViewer/SingleVideoViewer.js    |  27 +--
 .../SingleVideoViewer.spec.js                 |  18 --
 .../SingleVideoViewerConnector.spec.js        |  36 ----
 .../SingleVideoViewerContainer.js             | 130 +++++------
 .../SingleVideoViewerContainer.spec.js        | 203 ------------------
 .../helpers/getFixedNumber/README.md          |   7 +
 7 files changed, 97 insertions(+), 357 deletions(-)
 delete mode 100644 packages/lib-classifier/src/components/Classifier/components/SubjectViewer/components/SingleVideoViewer/SingleVideoViewer.spec.js
 delete mode 100644 packages/lib-classifier/src/components/Classifier/components/SubjectViewer/components/SingleVideoViewer/SingleVideoViewerConnector.spec.js
 delete mode 100644 packages/lib-classifier/src/components/Classifier/components/SubjectViewer/components/SingleVideoViewer/SingleVideoViewerContainer.spec.js
 create mode 100644 packages/lib-classifier/src/components/Classifier/components/SubjectViewer/helpers/getFixedNumber/README.md

diff --git a/packages/lib-classifier/src/components/Classifier/components/SubjectViewer/components/SingleVideoViewer/README.md b/packages/lib-classifier/src/components/Classifier/components/SubjectViewer/components/SingleVideoViewer/README.md
index 8e0da57fb2..e759ccbaa5 100644
--- a/packages/lib-classifier/src/components/Classifier/components/SubjectViewer/components/SingleVideoViewer/README.md
+++ b/packages/lib-classifier/src/components/Classifier/components/SubjectViewer/components/SingleVideoViewer/README.md
@@ -1,13 +1,42 @@
 # Single Video Viewer
 
 The Single Video Viewer is a variant of the Subject Viewer that's used to
-display video media.
+display video media. See also [Subject Viewers Info](https://github.com/zooniverse/front-end-monorepo/blob/master/packages/lib-classifier/src/components/Classifier/components/SubjectViewer/README.md).
 
 The only allowed video media type is mp4.
 
 ## Features
 
-// TODO Will be updated as the new video feature is built.
+SingleVideoViewerContainer handles state for SingleVideoViewer and VideoController. It's also contains an svg and InteractionLayer for drawing on a video subject. The svg layer is displayed regardless of whether a project has drawing tools enabled?
+
+When SingleVideoViewerContainer mounts, it creates a <video> HTML element in `preload()` and sets the `src` as the subject's url.
+
+Then, `getVideoSize()` returns the following dimensions:
+- `clientHeight` and `clientWidth` are the dimensions of the SVG placed on top of the video player for drawing tool interactions.
+- `naturalHeight` and `naturalWidth` are the dimensions of the <video> displaying the subject.
+
+Refs
+- `interactionLayerSVG`: Reference to svg element displayed on top of video subject. Needed for drawing tools' InteractionLayer.
+- `player`: Reference to `react-player` components.
+- `transformLayer`: Needed for drawing tools' InteractionLayer.
+
+Props
+- `enableInteractionLayer`: (boolean) When `true`, the <InteractionLayer> is rendered on top of the video subject.
+= `loadingState`: (asyncStates)
+- `onError`: (function) Passed from `SubjectViewerStore` and called if `onLoad()` fails.
+- `onKeyDown`: (function) Used for drawing tools components.
+- `onReady`: (function) Called after component mounts with dimensions of <video> and svg interaction layer. Function is passed from `SubjectViewerStore` and those dimensions are added to classification metatdata.
+- `subject`: (object) Passed from mobx store via SingleVideoViewerConnector.
+
+State Variables
+- `clientWidth`: (number) Returned from `getBoundingClientRect()` on the svg element that belongs to InteractionLayer for drawing tools.
+- `duration`: (number) Duration of the video subject. Seconds rounded to 3 decimal places.
+= `isPlaying`: (boolean) Whether or not the video subject is playing.
+- `isSeeking`: (boolean) Whether or not a user is interacting with the VideoController > Slider
+= `naturalHeight`: (number) Height of <video> displaying the subject.
+= `naturalWidth`: (number) Width of the <video> displaying the subject.
+- `played`: (number) Current played timestamp of video subject.
+- `vid`: (html element) <video> displaying the subject. 
 
 ## External Setup: Workflows and Subjects
 
diff --git a/packages/lib-classifier/src/components/Classifier/components/SubjectViewer/components/SingleVideoViewer/SingleVideoViewer.js b/packages/lib-classifier/src/components/Classifier/components/SubjectViewer/components/SingleVideoViewer/SingleVideoViewer.js
index cd907d5f3d..6b231f4660 100644
--- a/packages/lib-classifier/src/components/Classifier/components/SubjectViewer/components/SingleVideoViewer/SingleVideoViewer.js
+++ b/packages/lib-classifier/src/components/Classifier/components/SubjectViewer/components/SingleVideoViewer/SingleVideoViewer.js
@@ -18,14 +18,14 @@ const Container = styled.div`
 `
 
 const SingleVideoViewer = ({
-  url,
-  isPlaying,
-  playbackRate,
-  progressInterval,
-  onProgress,
-  playerRef,
-  onDuration,
-  onEnded
+  url = '',
+  isPlaying = false,
+  playbackRate = 1,
+  progressInterval = 100,
+  onProgress = () => {},
+  playerRef = () => {},
+  onDuration = () => {},
+  onEnded = () => {}
 }) => {
   return (
     <Container>
@@ -57,15 +57,4 @@ SingleVideoViewer.propTypes = {
   onEnded: PropTypes.func
 }
 
-SingleVideoViewer.defaultProps = {
-  playerRef: () => {},
-  url: '',
-  isPlaying: false,
-  playbackRate: 1,
-  progressInterval: 100,
-  onProgress: () => {},
-  onDuration: () => {},
-  onEnded: () => {}
-}
-
 export default SingleVideoViewer
diff --git a/packages/lib-classifier/src/components/Classifier/components/SubjectViewer/components/SingleVideoViewer/SingleVideoViewer.spec.js b/packages/lib-classifier/src/components/Classifier/components/SubjectViewer/components/SingleVideoViewer/SingleVideoViewer.spec.js
deleted file mode 100644
index 4f156d7784..0000000000
--- a/packages/lib-classifier/src/components/Classifier/components/SubjectViewer/components/SingleVideoViewer/SingleVideoViewer.spec.js
+++ /dev/null
@@ -1,18 +0,0 @@
-import React from 'react'
-import { shallow } from 'enzyme'
-
-import SingleVideoViewer from './SingleVideoViewer'
-
-let wrapper
-
-describe('Component > SingleVideoViewer', function () {
-  beforeEach(function () {
-    wrapper = shallow(
-      <SingleVideoViewer height={200} width={100} viewBox='0 0 100 100' />
-    )
-  })
-
-  it('should render without crashing', function () {
-    expect(wrapper).to.be.ok()
-  })
-})
diff --git a/packages/lib-classifier/src/components/Classifier/components/SubjectViewer/components/SingleVideoViewer/SingleVideoViewerConnector.spec.js b/packages/lib-classifier/src/components/Classifier/components/SubjectViewer/components/SingleVideoViewer/SingleVideoViewerConnector.spec.js
deleted file mode 100644
index 116636470d..0000000000
--- a/packages/lib-classifier/src/components/Classifier/components/SubjectViewer/components/SingleVideoViewer/SingleVideoViewerConnector.spec.js
+++ /dev/null
@@ -1,36 +0,0 @@
-import { shallow } from 'enzyme'
-import React from 'react'
-import sinon from 'sinon'
-import SingleVideoViewerConnector from './SingleVideoViewerConnector'
-import SingleVideoViewerContainer from './SingleVideoViewerContainer'
-
-const mockStore = {
-  classifierStore: {
-    subjects: {
-      active: { id: '1' }
-    }
-  }
-}
-
-describe('SingleVideoViewerConnector', function () {
-  let wrapper, useContextMock, containerProps
-  before(function () {
-    useContextMock = sinon.stub(React, 'useContext').callsFake(() => mockStore)
-    wrapper = shallow(<SingleVideoViewerConnector />)
-    containerProps = wrapper.find(SingleVideoViewerContainer).props()
-  })
-
-  after(function () {
-    useContextMock.restore()
-  })
-
-  it('should render without crashing', function () {
-    expect(wrapper).to.be.ok()
-  })
-
-  it('should pass the active subject as a prop', function () {
-    expect(containerProps.subject).to.deep.equal(
-      mockStore.classifierStore.subjects.active
-    )
-  })
-})
diff --git a/packages/lib-classifier/src/components/Classifier/components/SubjectViewer/components/SingleVideoViewer/SingleVideoViewerContainer.js b/packages/lib-classifier/src/components/Classifier/components/SubjectViewer/components/SingleVideoViewer/SingleVideoViewerContainer.js
index f60f647b07..520323af0b 100644
--- a/packages/lib-classifier/src/components/Classifier/components/SubjectViewer/components/SingleVideoViewer/SingleVideoViewerContainer.js
+++ b/packages/lib-classifier/src/components/Classifier/components/SubjectViewer/components/SingleVideoViewer/SingleVideoViewerContainer.js
@@ -1,6 +1,6 @@
 import React from 'react'
 import PropTypes from 'prop-types'
-import styled, { css } from 'styled-components'
+import styled from 'styled-components'
 import asyncStates from '@zooniverse/async-states'
 import { Box } from 'grommet'
 
@@ -27,19 +27,20 @@ class SingleVideoViewerContainer extends React.Component {
   constructor() {
     super()
 
-    this.videoViewer = React.createRef()
+    this.interactionLayerSVG = React.createRef()
+    this.player = React.createRef()
     this.transformLayer = React.createRef()
 
     this.state = {
-      vid: '',
+      clientWidth: 0,
+      duration: 0,
       isPlaying: false,
-      playbackRate: 1,
       played: 0,
-      duration: 0,
+      playbackRate: 1,
       isSeeking: false,
-      clientWidth: 0,
+      naturalHeight: 0,
       naturalWidth: 0,
-      naturalHeight: 0
+      vid: null
     }
   }
 
@@ -59,8 +60,9 @@ class SingleVideoViewerContainer extends React.Component {
       } = await this.getVideoSize()
       const target = { clientHeight, clientWidth, naturalWidth, naturalHeight }
       this.setState({
-        naturalWidth: naturalWidth,
-        naturalHeight: naturalHeight
+        clientWidth: clientWidth,
+        naturalHeight: naturalHeight,
+        naturalWidth: naturalWidth
       })
       onReady({ target })
     } catch (error) {
@@ -70,15 +72,11 @@ class SingleVideoViewerContainer extends React.Component {
 
   async getVideoSize() {
     const vid = await this.preload()
-    const svg = this.videoViewer.current
+    const svg = this.interactionLayerSVG.current
     const { width: clientWidth, height: clientHeight } = svg
       ? svg.getBoundingClientRect()
       : {}
 
-    this.setState({
-      clientWidth: clientWidth
-    })
-
     return {
       clientHeight,
       clientWidth,
@@ -91,14 +89,14 @@ class SingleVideoViewerContainer extends React.Component {
     const { subject } = this.props
     if (subject && subject.locations) {
       const videoUrl = Object.values(subject.locations[0])[0]
-      const vid = await this.fetchVideo(videoUrl)
+      const vid = await this.createVideoElement(videoUrl)
       this.setState({ vid })
       return vid
     }
     return {}
   }
 
-  fetchVideo(url) {
+  createVideoElement(url) {
     return new Promise((resolve, reject) => {
       const video = document.createElement('video')
       video.onloadedmetadata = () => resolve(video)
@@ -108,13 +106,9 @@ class SingleVideoViewerContainer extends React.Component {
     })
   }
 
-  /* ==================== video player ==================== */
-  handlePlayerRef = (player) => {
-    this.player = player
-  }
-
-  handleVideoProgress = (state) => {
-    const { played } = state
+  /* ==================== SingleVideoViewer react-player ==================== */
+  handleVideoProgress = (reactPlayerState) => {
+    const { played } = reactPlayerState
     const fixedNumber = getFixedNumber(played, 5)
     this.setState((prevState) => {
       if (prevState.isSeeking) return null
@@ -134,8 +128,8 @@ class SingleVideoViewerContainer extends React.Component {
     this.setState((prevState) => ({ isPlaying: !prevState.isPlaying }))
   }
 
-  handleSpeedChange = (s) => {
-    this.setState({ playbackRate: s })
+  handleSpeedChange = (rate) => {
+    this.setState({ playbackRate: rate })
   }
 
   handleSliderMouseUp = () => {
@@ -146,17 +140,16 @@ class SingleVideoViewerContainer extends React.Component {
     this.setState({ isPlaying: false, isSeeking: true })
   }
 
-  // Updates slider as video plays
-  // Slider is clickable; video jumps to time where user clicks
+  // Why is this a setState call?
   handleSliderChange = (e) => {
     const played = getFixedNumber(e.target.value, 5)
     this.setState(
       (prevState) => {
-        const { entities } = prevState
+        // what are entities? what is this for loop doing?
         let { focusing } = prevState
         if (focusing) {
-          const { incidents } = entities.annotations[focusing]
-          for (let i = 0; i < incidents.length; i += 1) {
+          const { incidents } = prevState?.entities?.annotations?.focusing
+          for (let i = 0; i < incidents?.length; i += 1) {
             if (played >= incidents[i].time) {
               if (i !== incidents.length - 1 && played >= incidents[i + 1].time)
                 continue
@@ -167,84 +160,72 @@ class SingleVideoViewerContainer extends React.Component {
         }
         return { played, focusing }
       },
+      // Updates VideoController > Slider as video plays
       () => {
-        this.player.seekTo(played)
+        this.player?.current.seekTo(played)
       }
     )
   }
 
   render() {
-    const { loadingState, enableInteractionLayer, onKeyDown } = this.props
+    const { 
+      enableInteractionLayer = true,
+      loadingState = asyncStates.initialized,
+      onKeyDown 
+    } = this.props
+
     const {
-      vid,
+      clientWidth,
+      duration,
       isPlaying,
-      playbackRate,
       played,
-      duration,
-      clientWidth,
+      playbackRate,
+      naturalHeight,
       naturalWidth,
-      naturalHeight
+      vid
     } = this.state
 
-    // Erik Todo
-    // const { naturalHeight, naturalWidth, src } = vid
-
     if (loadingState === asyncStates.error) {
       return <div>Something went wrong.</div>
     }
 
-    // Erik Todo
-    // if (!src) {
-    //   return null
-    // }
-
-    // if (!naturalWidth) {
-    //   return null
-    // }
-
-    const canvas = this.transformLayer.current
-    const transform = ``
-    const scale = clientWidth / naturalWidth
-
-    const enableDrawing =
-      loadingState === asyncStates.success && enableInteractionLayer
+    const canvas = this.transformLayer?.current // why do this here instead of in <g>?
+    const interactionLayerScale = clientWidth / naturalWidth
 
     return (
       <>
         <ScreenContainer>
           <SingleVideoViewer
-            playerRef={this.handlePlayerRef}
-            url={vid.src}
             isPlaying={isPlaying}
-            playbackRate={playbackRate}
-            onProgress={this.handleVideoProgress}
             onDuration={this.handleVideoDuration}
             onEnded={this.handleVideoEnded}
+            onProgress={this.handleVideoProgress}
+            playbackRate={playbackRate}
+            playerRef={this.player}
+            url={vid?.src}
           />
 
-          {/* Drawing Layer */}
+          {/* Drawing Layer */
+          /* Could this be moved to its own component file and why does it have an animation? */}
           <DrawingLayer>
             <Box animation='fadeIn' overflow='hidden'>
               <SVGContext.Provider value={{ canvas }}>
                 <svg
-                  ref={this.videoViewer}
+                  ref={this.interactionLayerSVG}
                   focusable
                   onKeyDown={onKeyDown}
                   tabIndex={0}
                   viewBox={`0 0 ${naturalWidth} ${naturalHeight}`}
                   xmlns='http://www.w3.org/2000/svg'
                 >
-                  {/* {title?.id && title?.text && (
-                  <title id={title.id}>{title.text}</title>
-                )} */}
-                  <g ref={this.transformLayer} transform={transform}>
+                  <g ref={this.transformLayer} transform=''>
                     {enableInteractionLayer && (
                       <InteractionLayer
-                        scale={scale}
-                        played={played}
+                        scale={interactionLayerScale}
                         duration={duration}
-                        width={naturalWidth}
                         height={naturalHeight}
+                        played={played}
+                        width={naturalWidth}
                       />
                     )}
                   </g>
@@ -270,23 +251,14 @@ class SingleVideoViewerContainer extends React.Component {
 }
 
 SingleVideoViewerContainer.propTypes = {
-  loadingState: PropTypes.string,
   enableInteractionLayer: PropTypes.bool,
+  loadingState: PropTypes.string,
   onError: PropTypes.func,
-  onReady: PropTypes.func,
   onKeyDown: PropTypes.func,
-  // viewBox: PropTypes.string.isRequired,
+  onReady: PropTypes.func,
   subject: PropTypes.shape({
     locations: PropTypes.arrayOf(locationValidator)
   })
 }
 
-SingleVideoViewerContainer.defaultProps = {
-  loadingState: asyncStates.initialized,
-  enableInteractionLayer: true,
-  onKeyDown: () => true,
-  onError: () => true,
-  onReady: () => true
-}
-
 export default SingleVideoViewerContainer
diff --git a/packages/lib-classifier/src/components/Classifier/components/SubjectViewer/components/SingleVideoViewer/SingleVideoViewerContainer.spec.js b/packages/lib-classifier/src/components/Classifier/components/SubjectViewer/components/SingleVideoViewer/SingleVideoViewerContainer.spec.js
deleted file mode 100644
index aae4091ef9..0000000000
--- a/packages/lib-classifier/src/components/Classifier/components/SubjectViewer/components/SingleVideoViewer/SingleVideoViewerContainer.spec.js
+++ /dev/null
@@ -1,203 +0,0 @@
-// import { shallow } from 'enzyme'
-// import sinon from 'sinon'
-// import React from 'react'
-
-// import { DraggableImage, SingleImageViewerContainer } from './SingleImageViewerContainer'
-// import SingleImageViewer from './SingleImageViewer'
-
-// describe('Component > SingleImageViewerContainer', function () {
-//   let wrapper
-//   const height = 200
-//   const width = 400
-//   const DELAY = 0
-//   const HTMLImgError = {
-//     message: 'The HTML img did not load'
-//   }
-
-//   // mock an image that loads after a delay of 0.1s
-//   class ValidImage {
-//     constructor () {
-//       this.naturalHeight = height
-//       this.naturalWidth = width
-//       setTimeout(() => this.onload(), DELAY)
-//     }
-//   }
-
-//   // mock an image that errors after a delay of 0.1s
-//   class InvalidImage {
-//     constructor () {
-//       this.naturalHeight = height
-//       this.naturalWidth = width
-//       setTimeout(() => this.onerror(HTMLImgError), DELAY)
-//     }
-//   }
-
-//   describe('without a subject', function () {
-//     const onError = sinon.stub()
-
-//     before(function () {
-//       wrapper = shallow(<SingleImageViewerContainer onError={onError} />)
-//     })
-
-//     it('should render without crashing', function () {
-//       expect(wrapper).to.be.ok()
-//     })
-
-//     it('should render null', function () {
-//       expect(wrapper.type()).to.be.null()
-//     })
-//   })
-
-//   describe('with a valid subject', function () {
-//     let imageWrapper
-//     const onReady = sinon.stub()
-//     const onError = sinon.stub()
-
-//     beforeEach(function (done) {
-//       onReady.callsFake(() => done())
-//       onError.callsFake(() => done())
-//       const subject = {
-//         id: 'test',
-//         locations: [
-//           { 'image/jpeg': 'https://some.domain/image.jpg' }
-//         ],
-//         metadata: {
-//           default_frame: "0"
-//         }
-//       }
-//       wrapper = shallow(
-//         <SingleImageViewerContainer
-//           ImageObject={ValidImage}
-//           subject={subject}
-//           onError={onError}
-//           onReady={onReady}
-//         />
-//       )
-//       imageWrapper = wrapper.find(SingleImageViewer)
-//       wrapper.instance().imageViewer = {
-//         current: {
-//           clientHeight: 50,
-//           clientWidth: 100,
-//           addEventListener: sinon.stub(),
-//           getBoundingClientRect: sinon.stub().callsFake(() => ({ width: 100, height: 50 })),
-//           removeEventListener: sinon.stub()
-//         }
-//       }
-//     })
-
-//     afterEach(function () {
-//       onReady.resetHistory()
-//     })
-
-//     it('should render without crashing', function () {
-//       expect(wrapper).to.be.ok()
-//     })
-
-//     it('should record the original image dimensions on load', function () {
-//       const svg = wrapper.instance().imageViewer.current
-//       const fakeEvent = {
-//         target: {
-//           clientHeight: 0,
-//           clientWidth: 0
-//         }
-//       }
-//       const expectedEvent = {
-//         target: {
-//           clientHeight: svg.clientHeight,
-//           clientWidth: svg.clientWidth,
-//           naturalHeight: height,
-//           naturalWidth: width
-//         }
-//       }
-//       expect(onReady).to.have.been.calledOnceWith(expectedEvent)
-//       expect(onError).to.not.have.been.called()
-//     })
-
-//     it('should pass the original image dimensions to the SVG image', function () {
-//       const { height, width } = wrapper.find(SingleImageViewer).props()
-//       expect(height).to.equal(height)
-//       expect(width).to.equal(width)
-//     })
-
-//     it('should render an svg image', function () {
-//       const image = wrapper.find('image')
-//       expect(image).to.have.lengthOf(1)
-//       expect(image.prop('xlinkHref')).to.equal('https://some.domain/image.jpg')
-//     })
-
-//     describe('with dragging enabled', function () {
-//       it('should render a draggable image', function () {
-//         wrapper.setProps({ move: true })
-//         const image = wrapper.find(DraggableImage)
-//         expect(image).to.have.lengthOf(1)
-//         expect(image.prop('xlinkHref')).to.equal('https://some.domain/image.jpg')
-//       })
-//     })
-//   })
-
-//   describe('with an invalid subject', function () {
-//     let imageWrapper
-//     const onReady = sinon.stub()
-//     const onError = sinon.stub()
-
-//     before(function () {
-//       sinon.stub(console, 'error')
-//     })
-
-//     beforeEach(function (done) {
-//       onReady.callsFake(() => done())
-//       onError.callsFake(() => done())
-//       const subject = {
-//         id: 'test',
-//         locations: [
-//           { 'image/jpeg': '' }
-//         ]
-//       }
-//       wrapper = shallow(
-//         <SingleImageViewerContainer
-//           ImageObject={InvalidImage}
-//           subject={subject}
-//           onError={onError}
-//           onReady={onReady}
-//         />
-//       )
-//       imageWrapper = wrapper.find(SingleImageViewer)
-//       wrapper.instance().imageViewer = {
-//         current: {
-//           clientHeight: 50,
-//           clientWidth: 100,
-//           addEventListener: sinon.stub(),
-//           getBoundingClientRect: sinon.stub().callsFake(() => ({ width: 100, height: 50 })),
-//           removeEventListener: sinon.stub()
-//         }
-//       }
-//     })
-
-//     afterEach(function () {
-//       onError.resetHistory()
-//       onReady.resetHistory()
-//     })
-
-//     after(function () {
-//       console.error.restore()
-//     })
-
-//     it('should render without crashing', function () {
-//       expect(wrapper).to.be.ok()
-//     })
-
-//     it('should log an error from an invalid image', function () {
-//       const fakeEvent = {
-//         target: {
-//           clientHeight: 0,
-//           clientWidth: 0
-//         }
-//       }
-//       expect(onError.withArgs(HTMLImgError)).to.have.been.calledOnce()
-//     })
-
-//     it('should not call onReady', function () {
-//       expect(onReady).to.not.have.been.called()
-//     })
-//   })
-// })
diff --git a/packages/lib-classifier/src/components/Classifier/components/SubjectViewer/helpers/getFixedNumber/README.md b/packages/lib-classifier/src/components/Classifier/components/SubjectViewer/helpers/getFixedNumber/README.md
new file mode 100644
index 0000000000..87db273336
--- /dev/null
+++ b/packages/lib-classifier/src/components/Classifier/components/SubjectViewer/helpers/getFixedNumber/README.md
@@ -0,0 +1,7 @@
+# getFixedNumber
+
+This function is used in SingleVideoViewerContainer. It takes two variables:
+- `number`: This is the `played` state variable in SingleVideoViewerContainer or InteractionLayer. The timestamp of a video subject.
+- `digits`: The number of decimal places to round to.
+
+It returns one number rounded to the number of decimal places defined by `digits`.

From f2e15e517d3da83456f5abd46f2ecfa1bbd1722f Mon Sep 17 00:00:00 2001
From: Delilah Clement <delilahclement@gmail.com>
Date: Mon, 12 Sep 2022 16:19:27 -0500
Subject: [PATCH 02/34] clean up a bit

---
 .../SingleVideoViewerContainer.js             | 49 ++++++++++---------
 1 file changed, 25 insertions(+), 24 deletions(-)

diff --git a/packages/lib-classifier/src/components/Classifier/components/SubjectViewer/components/SingleVideoViewer/SingleVideoViewerContainer.js b/packages/lib-classifier/src/components/Classifier/components/SubjectViewer/components/SingleVideoViewer/SingleVideoViewerContainer.js
index 520323af0b..8a01e7942e 100644
--- a/packages/lib-classifier/src/components/Classifier/components/SubjectViewer/components/SingleVideoViewer/SingleVideoViewerContainer.js
+++ b/packages/lib-classifier/src/components/Classifier/components/SubjectViewer/components/SingleVideoViewer/SingleVideoViewerContainer.js
@@ -140,31 +140,32 @@ class SingleVideoViewerContainer extends React.Component {
     this.setState({ isPlaying: false, isSeeking: true })
   }
 
-  // Why is this a setState call?
+  /* When VideoController > Slider is clicked or scrubbed */
   handleSliderChange = (e) => {
     const played = getFixedNumber(e.target.value, 5)
-    this.setState(
-      (prevState) => {
-        // what are entities? what is this for loop doing?
-        let { focusing } = prevState
-        if (focusing) {
-          const { incidents } = prevState?.entities?.annotations?.focusing
-          for (let i = 0; i < incidents?.length; i += 1) {
-            if (played >= incidents[i].time) {
-              if (i !== incidents.length - 1 && played >= incidents[i + 1].time)
-                continue
-              if (incidents[i].status !== SHOW) focusing = ''
-              break
-            } else if (i === incidents.length - 1) focusing = ''
-          }
-        }
-        return { played, focusing }
-      },
-      // Updates VideoController > Slider as video plays
-      () => {
-        this.player?.current.seekTo(played)
-      }
-    )
+    this.player?.current.seekTo(played)
+
+    /* Can't find a use case for this code, not sure of its purpose */
+    
+    // this.setState(
+    //   (prevState) => {
+    //     console.log(prevState)
+    //     // what are entities? what is this for loop doing?
+    //     let { focusing } = prevState
+    //     if (focusing) {
+    //       const { incidents } = prevState?.entities?.annotations?.focusing
+    //       for (let i = 0; i < incidents?.length; i += 1) {
+    //         if (played >= incidents[i].time) {
+    //           if (i !== incidents.length - 1 && played >= incidents[i + 1].time)
+    //             continue
+    //           if (incidents[i].status !== SHOW) focusing = ''
+    //           break
+    //         } else if (i === incidents.length - 1) focusing = ''
+    //       }
+    //     }
+    //     return { played, focusing }
+    //   }
+    // )
   }
 
   render() {
@@ -189,7 +190,7 @@ class SingleVideoViewerContainer extends React.Component {
       return <div>Something went wrong.</div>
     }
 
-    const canvas = this.transformLayer?.current // why do this here instead of in <g>?
+    const canvas = this.transformLayer?.current
     const interactionLayerScale = clientWidth / naturalWidth
 
     return (

From 5ad95cef792df655ef16bdc05ec6d23ef9543462 Mon Sep 17 00:00:00 2001
From: Delilah Clement <delilahclement@gmail.com>
Date: Tue, 13 Sep 2022 09:19:24 -0500
Subject: [PATCH 03/34] create default storybook for SingleVideoViewerContainer

---
 .../SingleVideoViewer/SingleVideoViewer.js    |   8 +-
 .../SingleVideoViewer.stories.js              | 146 ++++++------------
 2 files changed, 52 insertions(+), 102 deletions(-)

diff --git a/packages/lib-classifier/src/components/Classifier/components/SubjectViewer/components/SingleVideoViewer/SingleVideoViewer.js b/packages/lib-classifier/src/components/Classifier/components/SubjectViewer/components/SingleVideoViewer/SingleVideoViewer.js
index 6b231f4660..d32950380d 100644
--- a/packages/lib-classifier/src/components/Classifier/components/SubjectViewer/components/SingleVideoViewer/SingleVideoViewer.js
+++ b/packages/lib-classifier/src/components/Classifier/components/SubjectViewer/components/SingleVideoViewer/SingleVideoViewer.js
@@ -20,12 +20,12 @@ const Container = styled.div`
 const SingleVideoViewer = ({
   url = '',
   isPlaying = false,
+  onDuration = () => {},
+  onEnded = () => {},
+  onProgress = () => {},
   playbackRate = 1,
   progressInterval = 100,
-  onProgress = () => {},
-  playerRef = () => {},
-  onDuration = () => {},
-  onEnded = () => {}
+  playerRef = null
 }) => {
   return (
     <Container>
diff --git a/packages/lib-classifier/src/components/Classifier/components/SubjectViewer/components/SingleVideoViewer/SingleVideoViewer.stories.js b/packages/lib-classifier/src/components/Classifier/components/SubjectViewer/components/SingleVideoViewer/SingleVideoViewer.stories.js
index 3439f85bcc..8f2cacdefc 100644
--- a/packages/lib-classifier/src/components/Classifier/components/SubjectViewer/components/SingleVideoViewer/SingleVideoViewer.stories.js
+++ b/packages/lib-classifier/src/components/Classifier/components/SubjectViewer/components/SingleVideoViewer/SingleVideoViewer.stories.js
@@ -1,109 +1,59 @@
-import React from 'react';
-import zooTheme from '@zooniverse/grommet-theme';
-import { Box, Grommet } from 'grommet';
-import { Provider } from 'mobx-react';
-import { Factory } from 'rosie';
-import SubjectViewerStore from '@store/SubjectViewerStore';
-import SingleImageViewer from '@viewers/components/SingleImageViewer';
-import ImageToolbar from '../../../ImageToolbar';
-import readme from './README.md';
-import backgrounds from '../../../../../../../.storybook/lib/backgrounds';
+import React from 'react'
+import zooTheme from '@zooniverse/grommet-theme'
+import { Box, Grommet } from 'grommet'
+import { Factory } from 'rosie'
 
-const config = {
-  notes: {
-    markdown: readme,
-  },
-};
-
-const subject = Factory.build('subject', {
-  locations: [{ 'image/jpeg': 'http://placekitten.com/500/300' }],
-});
+import SingleVideoViewerContainer from './SingleVideoViewerContainer'
 
-const mockStore = {
-  classifications: {
-    active: {
-      annotations: new Map(),
-    },
-  },
-  fieldGuide: {
-    setModalVisibility: () => {},
-  },
-  subjects: {
-    active: subject,
-  },
-  subjectViewer: SubjectViewerStore.create({}),
-  workflows: {
-    active: {}
-  },
-  workflowSteps: {
-    activeStepTasks: [],
-  },
-};
-
-function ViewerContext(props) {
-  const { children, theme } = props;
-  return (
-    <Provider classifierStore={mockStore}>
-      <Grommet theme={theme}>{children}</Grommet>
-    </Provider>
-  );
+const background = {
+  dark: 'dark-1',
+  light: 'light-1'
 }
 
-const darkThemeConfig = Object.assign({}, config, {
-  backgrounds: backgrounds.darkDefault,
-});
+const subject = Factory.build('subject', {
+  locations: [
+    {
+      'video/mp4': 'https://panoptes-uploads.zooniverse.org/subject_location/239f17f7-acf9-49f1-9873-266a80d29c33.mp4'
+    }
+  ]
+})
 
 export default {
   title: 'Subject Viewers / SingleVideoViewer',
-
-  parameters: {
-    component: SingleImageViewer,
+  component: SingleVideoViewerContainer,
+  args: {
+    enableInteractionLayer: false,
+    dark: false,
+    onError: () => {},
+    onReady: () => {},
+    onKeyDown: () => {},
+    subject: subject
   },
-};
-
-export const LightTheme = () => {
-  return (
-    <ViewerContext theme={zooTheme}>
-      <Box height="medium" width="large">
-        <SingleImageViewer />
-      </Box>
-    </ViewerContext>
-  );
-};
-
-LightTheme.story = {
-  name: 'light theme',
-  parameters: config,
-};
-
-export const DarkTheme = () => {
-  const darkZooTheme = Object.assign({}, zooTheme, { dark: true });
-  return (
-    <ViewerContext theme={darkZooTheme}>
-      <Box height="medium" width="large">
-        <SingleImageViewer />
-      </Box>
-    </ViewerContext>
-  );
-};
-
-DarkTheme.story = {
-  name: 'dark theme',
-  parameters: darkThemeConfig,
-};
+  parameters: {
+    viewport: {
+      defaultViewport: 'responsive'
+    }
+  }
+}
 
-export const WithZoomControls = () => {
+export const Default = ({
+  enableInteractionLayer,
+  dark,
+  onError,
+  onReady,
+  subject
+}) => {
+  const themeMode = dark ? 'dark' : 'light'
   return (
-    <ViewerContext theme={zooTheme}>
-      <Box direction="row" height="500px" width="large">
-        <SingleImageViewer />
-        <ImageToolbar />
+    <Grommet background={background} theme={zooTheme} themeMode={themeMode}>
+      <Box width='large'>
+        <SingleVideoViewerContainer
+          enableInteractionLayer={enableInteractionLayer}
+          onError={onError}
+          onReady={onReady}
+          subject={subject}
+        />
       </Box>
-    </ViewerContext>
-  );
-};
-
-WithZoomControls.story = {
-  name: 'with zoom controls',
-  parameters: config,
-};
+    </Grommet>
+  )
+}

From 2f61ab38de517694a2165e9361c6b773f0c3e29f Mon Sep 17 00:00:00 2001
From: Delilah Clement <delilahclement@gmail.com>
Date: Tue, 13 Sep 2022 11:09:23 -0500
Subject: [PATCH 04/34] working toward handling loading states - install
 @storybook/testing-react - delete SingleVideoViewerConnector

---
 packages/lib-classifier/package.json          |  1 +
 .../components/SingleVideoViewer/README.md    | 10 ++--
 .../SingleVideoViewer/SingleVideoViewer.js    |  2 +-
 .../SingleVideoViewer.spec.js                 |  8 +++
 .../SingleVideoViewerConnector.js             | 21 --------
 .../SingleVideoViewerContainer.spec.js        | 23 +++++++++
 ... => SingleVideoViewerContainer.stories.js} | 51 +++++++++++++++++--
 .../components/SingleVideoViewer/index.js     |  3 +-
 yarn.lock                                     |  8 +--
 9 files changed, 90 insertions(+), 37 deletions(-)
 create mode 100644 packages/lib-classifier/src/components/Classifier/components/SubjectViewer/components/SingleVideoViewer/SingleVideoViewer.spec.js
 delete mode 100644 packages/lib-classifier/src/components/Classifier/components/SubjectViewer/components/SingleVideoViewer/SingleVideoViewerConnector.js
 create mode 100644 packages/lib-classifier/src/components/Classifier/components/SubjectViewer/components/SingleVideoViewer/SingleVideoViewerContainer.spec.js
 rename packages/lib-classifier/src/components/Classifier/components/SubjectViewer/components/SingleVideoViewer/{SingleVideoViewer.stories.js => SingleVideoViewerContainer.stories.js} (51%)

diff --git a/packages/lib-classifier/package.json b/packages/lib-classifier/package.json
index dbd2ecf9cc..bfd3ebfabc 100644
--- a/packages/lib-classifier/package.json
+++ b/packages/lib-classifier/package.json
@@ -67,6 +67,7 @@
     "@storybook/builder-webpack5": "~6.5.0",
     "@storybook/manager-webpack5": "~6.5.0",
     "@storybook/react": "~6.5.0",
+    "@storybook/testing-react": "~1.3.0",
     "@testing-library/dom": "~8.17.1",
     "@testing-library/react": "~12.1.2",
     "@testing-library/react-hooks": "~8.0.0",
diff --git a/packages/lib-classifier/src/components/Classifier/components/SubjectViewer/components/SingleVideoViewer/README.md b/packages/lib-classifier/src/components/Classifier/components/SubjectViewer/components/SingleVideoViewer/README.md
index e759ccbaa5..905e5908fc 100644
--- a/packages/lib-classifier/src/components/Classifier/components/SubjectViewer/components/SingleVideoViewer/README.md
+++ b/packages/lib-classifier/src/components/Classifier/components/SubjectViewer/components/SingleVideoViewer/README.md
@@ -22,11 +22,11 @@ Refs
 
 Props
 - `enableInteractionLayer`: (boolean) When `true`, the <InteractionLayer> is rendered on top of the video subject.
-= `loadingState`: (asyncStates)
-- `onError`: (function) Passed from `SubjectViewerStore` and called if `onLoad()` fails.
+= `loadingState`: (asyncStates) Passed from SubjectViewer. This is the viewer's loading state, not the subject's loading state.
+- `onError`: (function) Passed from SubjectViewer and called if `onLoad()` fails.
 - `onKeyDown`: (function) Used for drawing tools components.
-- `onReady`: (function) Called after component mounts with dimensions of <video> and svg interaction layer. Function is passed from `SubjectViewerStore` and those dimensions are added to classification metatdata.
-- `subject`: (object) Passed from mobx store via SingleVideoViewerConnector.
+- `onReady`: (function) Called after component mounts with dimensions of <video> and svg interaction layer. Function is passed from SubjectViewer and  dimensions are added to classification metatdata.
+- `subject`: (object) Passed from mobx store via SubjectViewer.
 
 State Variables
 - `clientWidth`: (number) Returned from `getBoundingClientRect()` on the svg element that belongs to InteractionLayer for drawing tools.
@@ -36,7 +36,7 @@ State Variables
 = `naturalHeight`: (number) Height of <video> displaying the subject.
 = `naturalWidth`: (number) Width of the <video> displaying the subject.
 - `played`: (number) Current played timestamp of video subject.
-- `vid`: (html element) <video> displaying the subject. 
+- `vid`: (html element) <video> displaying the subject.
 
 ## External Setup: Workflows and Subjects
 
diff --git a/packages/lib-classifier/src/components/Classifier/components/SubjectViewer/components/SingleVideoViewer/SingleVideoViewer.js b/packages/lib-classifier/src/components/Classifier/components/SubjectViewer/components/SingleVideoViewer/SingleVideoViewer.js
index d32950380d..28b994572c 100644
--- a/packages/lib-classifier/src/components/Classifier/components/SubjectViewer/components/SingleVideoViewer/SingleVideoViewer.js
+++ b/packages/lib-classifier/src/components/Classifier/components/SubjectViewer/components/SingleVideoViewer/SingleVideoViewer.js
@@ -47,7 +47,7 @@ const SingleVideoViewer = ({
 }
 
 SingleVideoViewer.propTypes = {
-  playerRef: PropTypes.func,
+  playerRef: PropTypes.object,
   url: PropTypes.string,
   isPlaying: PropTypes.bool,
   playbackRate: PropTypes.number,
diff --git a/packages/lib-classifier/src/components/Classifier/components/SubjectViewer/components/SingleVideoViewer/SingleVideoViewer.spec.js b/packages/lib-classifier/src/components/Classifier/components/SubjectViewer/components/SingleVideoViewer/SingleVideoViewer.spec.js
new file mode 100644
index 0000000000..39feda6184
--- /dev/null
+++ b/packages/lib-classifier/src/components/Classifier/components/SubjectViewer/components/SingleVideoViewer/SingleVideoViewer.spec.js
@@ -0,0 +1,8 @@
+import React from 'react'
+import { render, screen } from '@testing-library/react'
+
+import SingleVideoViewer from './SingleVideoViewer'
+
+describe('Component > SingleVideoViewer', function () {
+
+})
\ No newline at end of file
diff --git a/packages/lib-classifier/src/components/Classifier/components/SubjectViewer/components/SingleVideoViewer/SingleVideoViewerConnector.js b/packages/lib-classifier/src/components/Classifier/components/SubjectViewer/components/SingleVideoViewer/SingleVideoViewerConnector.js
deleted file mode 100644
index 96443330be..0000000000
--- a/packages/lib-classifier/src/components/Classifier/components/SubjectViewer/components/SingleVideoViewer/SingleVideoViewerConnector.js
+++ /dev/null
@@ -1,21 +0,0 @@
-import React from 'react'
-import { MobXProviderContext, observer } from 'mobx-react'
-import SingleVideoViewerContainer from './SingleVideoViewerContainer'
-
-function useStores() {
-  const stores = React.useContext(MobXProviderContext)
-
-  const { active: subject } = stores.classifierStore.subjects
-
-  return {
-    subject
-  }
-}
-
-function SingleVideoViewerConnector(props) {
-  const { subject } = useStores()
-
-  return <SingleVideoViewerContainer subject={subject} {...props} />
-}
-
-export default observer(SingleVideoViewerConnector)
diff --git a/packages/lib-classifier/src/components/Classifier/components/SubjectViewer/components/SingleVideoViewer/SingleVideoViewerContainer.spec.js b/packages/lib-classifier/src/components/Classifier/components/SubjectViewer/components/SingleVideoViewer/SingleVideoViewerContainer.spec.js
new file mode 100644
index 0000000000..578ec0745e
--- /dev/null
+++ b/packages/lib-classifier/src/components/Classifier/components/SubjectViewer/components/SingleVideoViewer/SingleVideoViewerContainer.spec.js
@@ -0,0 +1,23 @@
+import React from 'react'
+import * as stories from './SingleVideoViewerContainer.stories'
+import { render } from '@testing-library/react'
+import { composeStories } from '@storybook/testing-react'
+
+describe.only('Component > SingleVideoViewerContainer', function () {
+  
+  describe('with a video subject src', function () {
+    
+    it('should render a video html element with subject url as src', function () {
+      const { Default } = composeStories(stories)
+      const { getByRole } = render(<Default />)
+      // const videoElement = getByRole('video')
+      // expect(videoElement).exists()
+    })
+  })
+
+  describe('without a video subject src', function () {
+    it('should not render a video html element ', function () {
+      
+    })
+  })
+})
diff --git a/packages/lib-classifier/src/components/Classifier/components/SubjectViewer/components/SingleVideoViewer/SingleVideoViewer.stories.js b/packages/lib-classifier/src/components/Classifier/components/SubjectViewer/components/SingleVideoViewer/SingleVideoViewerContainer.stories.js
similarity index 51%
rename from packages/lib-classifier/src/components/Classifier/components/SubjectViewer/components/SingleVideoViewer/SingleVideoViewer.stories.js
rename to packages/lib-classifier/src/components/Classifier/components/SubjectViewer/components/SingleVideoViewer/SingleVideoViewerContainer.stories.js
index 8f2cacdefc..de557c6805 100644
--- a/packages/lib-classifier/src/components/Classifier/components/SubjectViewer/components/SingleVideoViewer/SingleVideoViewer.stories.js
+++ b/packages/lib-classifier/src/components/Classifier/components/SubjectViewer/components/SingleVideoViewer/SingleVideoViewerContainer.stories.js
@@ -10,6 +10,7 @@ const background = {
   light: 'light-1'
 }
 
+// Can't use { SubjectFactory } from '@test/factories because video locations isn't handled yet
 const subject = Factory.build('subject', {
   locations: [
     {
@@ -26,8 +27,7 @@ export default {
     dark: false,
     onError: () => {},
     onReady: () => {},
-    onKeyDown: () => {},
-    subject: subject
+    onKeyDown: () => {}
   },
   parameters: {
     viewport: {
@@ -40,8 +40,7 @@ export const Default = ({
   enableInteractionLayer,
   dark,
   onError,
-  onReady,
-  subject
+  onReady
 }) => {
   const themeMode = dark ? 'dark' : 'light'
   return (
@@ -49,6 +48,7 @@ export const Default = ({
       <Box width='large'>
         <SingleVideoViewerContainer
           enableInteractionLayer={enableInteractionLayer}
+          loadingState='success'
           onError={onError}
           onReady={onReady}
           subject={subject}
@@ -57,3 +57,46 @@ export const Default = ({
     </Grommet>
   )
 }
+
+export const Loading = ({
+  enableInteractionLayer,
+  dark,
+  onError,
+  onReady
+}) => {
+  const themeMode = dark ? 'dark' : 'light'
+  return (
+    <Grommet background={background} theme={zooTheme} themeMode={themeMode}>
+      <Box width='large'>
+        <SingleVideoViewerContainer
+          enableInteractionLayer={enableInteractionLayer}
+          loadingState='loading'
+          onError={onError}
+          onReady={onReady}
+          subject={subject}
+        />
+      </Box>
+    </Grommet>
+  )
+}
+
+export const NoSubject = ({
+  enableInteractionLayer,
+  dark,
+  onError,
+  onReady
+}) => {
+  const themeMode = dark ? 'dark' : 'light'
+  return (
+    <Grommet background={background} theme={zooTheme} themeMode={themeMode}>
+      <Box width='large'>
+        <SingleVideoViewerContainer
+          enableInteractionLayer={enableInteractionLayer}
+          loadingState='error'
+          onError={onError}
+          onReady={onReady}
+        />
+      </Box>
+    </Grommet>
+  )
+}
diff --git a/packages/lib-classifier/src/components/Classifier/components/SubjectViewer/components/SingleVideoViewer/index.js b/packages/lib-classifier/src/components/Classifier/components/SubjectViewer/components/SingleVideoViewer/index.js
index 115882fce6..35aa1b0a4c 100644
--- a/packages/lib-classifier/src/components/Classifier/components/SubjectViewer/components/SingleVideoViewer/index.js
+++ b/packages/lib-classifier/src/components/Classifier/components/SubjectViewer/components/SingleVideoViewer/index.js
@@ -1,3 +1,2 @@
-export { default } from './SingleVideoViewerConnector'
-export { default as SingleVideoViewerContainer } from './SingleVideoViewerContainer'
+export { default } from './SingleVideoViewerContainer'
 export { default as SingleVideoViewer } from './SingleVideoViewer'
diff --git a/yarn.lock b/yarn.lock
index 603623c8cc..6d66c65fea 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -16557,10 +16557,10 @@ trim-trailing-lines@^1.0.0:
   resolved "https://registry.yarnpkg.com/trim-trailing-lines/-/trim-trailing-lines-1.1.4.tgz#bd4abbec7cc880462f10b2c8b5ce1d8d1ec7c2c0"
   integrity sha512-rjUWSqnfTNrjbB9NQWfPMH/xRK1deHeGsHoVfpxJ++XeYXE0d6B1En37AHfw3jtfTU7dzMzZL2jjpe8Qb5gLIQ==
 
-trim@0.0.1, trim@~1.0:
-  version "1.0.1"
-  resolved "https://registry.yarnpkg.com/trim/-/trim-1.0.1.tgz#68e78f6178ccab9687a610752f4f5e5a7022ee8c"
-  integrity sha512-3JVP2YVqITUisXblCDq/Bi4P9457G/sdEamInkyvCsjbTcXLXIiG7XCb4kGMFWh6JGXesS3TKxOPtrncN/xe8w==
+trim@0.0.1:
+  version "0.0.1"
+  resolved "https://registry.yarnpkg.com/trim/-/trim-0.0.1.tgz#5858547f6b290757ee95cccc666fb50084c460dd"
+  integrity sha512-YzQV+TZg4AxpKxaTHK3c3D+kRDCGVEE7LemdlQZoQXn0iennk10RsIoY6ikzAqJTc9Xjl9C1/waHom/J86ziAQ==
 
 triple-beam@^1.3.0:
   version "1.3.0"

From 6d0d984225a6019f6faa73b559777dcfae8682e0 Mon Sep 17 00:00:00 2001
From: Delilah Clement <delilahclement@gmail.com>
Date: Tue, 13 Sep 2022 11:15:52 -0500
Subject: [PATCH 05/34] more renaming for clarity

---
 .../SingleVideoViewer/SingleVideoViewerContainer.js  | 12 ++++++------
 1 file changed, 6 insertions(+), 6 deletions(-)

diff --git a/packages/lib-classifier/src/components/Classifier/components/SubjectViewer/components/SingleVideoViewer/SingleVideoViewerContainer.js b/packages/lib-classifier/src/components/Classifier/components/SubjectViewer/components/SingleVideoViewer/SingleVideoViewerContainer.js
index 8a01e7942e..fb243026d4 100644
--- a/packages/lib-classifier/src/components/Classifier/components/SubjectViewer/components/SingleVideoViewer/SingleVideoViewerContainer.js
+++ b/packages/lib-classifier/src/components/Classifier/components/SubjectViewer/components/SingleVideoViewer/SingleVideoViewerContainer.js
@@ -12,7 +12,7 @@ import SingleVideoViewer from './SingleVideoViewer'
 import VideoController from '../VideoController/VideoController'
 import getFixedNumber from '../../helpers/getFixedNumber'
 
-const ScreenContainer = styled.div`
+const SubjectContainer = styled.div`
   position: relative;
 `
 
@@ -171,7 +171,7 @@ class SingleVideoViewerContainer extends React.Component {
   render() {
     const { 
       enableInteractionLayer = true,
-      loadingState = asyncStates.initialized,
+      loadingState: viewerLoadingState = asyncStates.initialized,
       onKeyDown 
     } = this.props
 
@@ -186,8 +186,8 @@ class SingleVideoViewerContainer extends React.Component {
       vid
     } = this.state
 
-    if (loadingState === asyncStates.error) {
-      return <div>Something went wrong.</div>
+    if (viewerLoadingState === asyncStates.error) {
+      return <div>There was an error loading the viewer</div>
     }
 
     const canvas = this.transformLayer?.current
@@ -195,7 +195,7 @@ class SingleVideoViewerContainer extends React.Component {
 
     return (
       <>
-        <ScreenContainer>
+        <SubjectContainer>
           <SingleVideoViewer
             isPlaying={isPlaying}
             onDuration={this.handleVideoDuration}
@@ -234,7 +234,7 @@ class SingleVideoViewerContainer extends React.Component {
               </SVGContext.Provider>
             </Box>
           </DrawingLayer>
-        </ScreenContainer>
+        </SubjectContainer>
         <VideoController
           isPlaying={isPlaying}
           played={played}

From 0f1feb182556e8ce0339479c05804e2be209cecf Mon Sep 17 00:00:00 2001
From: Delilah Clement <delilahclement@gmail.com>
Date: Tue, 13 Sep 2022 12:20:44 -0500
Subject: [PATCH 06/34] refactor SingleVideoViewerContainer as a functional
 component

---
 .../SingleVideoViewer/SingleVideoViewer.js    |  14 +-
 .../SingleVideoViewerContainer.stories.js     |   2 +-
 .../SingleVideoViewerContainerFunctional.js   | 192 ++++++++++++++++++
 .../components/SingleVideoViewer/index.js     |   2 +-
 4 files changed, 202 insertions(+), 8 deletions(-)
 create mode 100644 packages/lib-classifier/src/components/Classifier/components/SubjectViewer/components/SingleVideoViewer/SingleVideoViewerContainerFunctional.js

diff --git a/packages/lib-classifier/src/components/Classifier/components/SubjectViewer/components/SingleVideoViewer/SingleVideoViewer.js b/packages/lib-classifier/src/components/Classifier/components/SubjectViewer/components/SingleVideoViewer/SingleVideoViewer.js
index 28b994572c..f590b5666d 100644
--- a/packages/lib-classifier/src/components/Classifier/components/SubjectViewer/components/SingleVideoViewer/SingleVideoViewer.js
+++ b/packages/lib-classifier/src/components/Classifier/components/SubjectViewer/components/SingleVideoViewer/SingleVideoViewer.js
@@ -23,6 +23,7 @@ const SingleVideoViewer = ({
   onDuration = () => {},
   onEnded = () => {},
   onProgress = () => {},
+  onReactPlayerReady = () => {},
   playbackRate = 1,
   progressInterval = 100,
   playerRef = null
@@ -30,17 +31,18 @@ const SingleVideoViewer = ({
   return (
     <Container>
       <ReactPlayer
-        ref={playerRef}
         controls={false}
-        url={url}
+        height='100%'
+        onDuration={onDuration}
+        onEnded={onEnded}
+        onReady={onReactPlayerReady}
+        onProgress={onProgress}
         playing={isPlaying}
         playbackRate={playbackRate}
         progressInterval={progressInterval}
-        onProgress={onProgress}
-        onDuration={onDuration}
-        onEnded={onEnded}
+        ref={playerRef}
         width='100%'
-        height='100%'
+        url={url}
       />
     </Container>
   )
diff --git a/packages/lib-classifier/src/components/Classifier/components/SubjectViewer/components/SingleVideoViewer/SingleVideoViewerContainer.stories.js b/packages/lib-classifier/src/components/Classifier/components/SubjectViewer/components/SingleVideoViewer/SingleVideoViewerContainer.stories.js
index de557c6805..8f8283604f 100644
--- a/packages/lib-classifier/src/components/Classifier/components/SubjectViewer/components/SingleVideoViewer/SingleVideoViewerContainer.stories.js
+++ b/packages/lib-classifier/src/components/Classifier/components/SubjectViewer/components/SingleVideoViewer/SingleVideoViewerContainer.stories.js
@@ -3,7 +3,7 @@ import zooTheme from '@zooniverse/grommet-theme'
 import { Box, Grommet } from 'grommet'
 import { Factory } from 'rosie'
 
-import SingleVideoViewerContainer from './SingleVideoViewerContainer'
+import SingleVideoViewerContainer from './'
 
 const background = {
   dark: 'dark-1',
diff --git a/packages/lib-classifier/src/components/Classifier/components/SubjectViewer/components/SingleVideoViewer/SingleVideoViewerContainerFunctional.js b/packages/lib-classifier/src/components/Classifier/components/SubjectViewer/components/SingleVideoViewer/SingleVideoViewerContainerFunctional.js
new file mode 100644
index 0000000000..a1e17240c3
--- /dev/null
+++ b/packages/lib-classifier/src/components/Classifier/components/SubjectViewer/components/SingleVideoViewer/SingleVideoViewerContainerFunctional.js
@@ -0,0 +1,192 @@
+import PropTypes from 'prop-types'
+import styled from 'styled-components'
+import asyncStates from '@zooniverse/async-states'
+import { Box } from 'grommet'
+import React, { useState, useRef } from 'react'
+
+import SVGContext from '@plugins/drawingTools/shared/SVGContext'
+
+import InteractionLayer from '../InteractionLayer'
+import locationValidator from '../../helpers/locationValidator'
+import SingleVideoViewer from './SingleVideoViewer'
+import VideoController from '../VideoController/VideoController'
+import getFixedNumber from '../../helpers/getFixedNumber'
+
+const SubjectContainer = styled.div`
+  position: relative;
+`
+
+const DrawingLayer = styled.div`
+  position: absolute;
+  top: 0px;
+  width: 100%;
+  cursor: default;
+`
+
+function SingleVideoViewerContainer({
+  enableInteractionLayer = true,
+  loadingState: viewerLoadingState = asyncStates.initialized,
+  onError = () => true,
+  onReady = () => true,
+  onKeyDown = () => true,
+  subject
+}) {
+  const [clientWidth, setClientWidth] = useState(0)
+  const [duration, setDuration] = useState(0)
+  const [isPlaying, setIsPlaying] = useState(false)
+  const [timeStamp, setTimeStamp] = useState(0)
+  const [playbackRate, setPlaybackRate] = useState(1)
+  const [isSeeking, setIsSeeking] = useState(false)
+  const [videoHeight, setVideoHeight] = useState(0)
+  const [videoWidth, setVideoWidth] = useState(0)
+
+  const interactionLayerSVG = useRef()
+  const playerRef = useRef()
+  const transformLayer = useRef()
+
+  /* ==================== load subject ==================== */
+
+  const onReactPlayerReady = () => {
+    try {
+      const reactPlayerVideoHeight = playerRef.current?.getInternalPlayer().videoHeight
+      const reactPlayerVideoWidth = playerRef.current?.getInternalPlayer().videoWidth
+      setVideoHeight(reactPlayerVideoHeight)
+      setVideoWidth(reactPlayerVideoWidth)
+
+      const { width: svgClientWidth, height: svgClientHeight } = interactionLayerSVG.current?.getBoundingClientRect()
+      setClientWidth(svgClientWidth)
+
+      const target = { svgClientHeight, svgClientWidth, reactPlayerVideoWidth, reactPlayerVideoHeight }
+      onReady({ target })
+    } catch (error) {
+      onError(error)
+    }
+  }
+
+  /* ==================== SingleVideoViewer 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 handleVideoDuration = duration => {
+    setDuration(duration)
+  }
+
+  const handleVideoEnded = () => {
+    setIsPlaying(false)
+  }
+
+  const handlePlayPause = () => {
+    const prevStatePlaying = isPlaying
+    setIsPlaying(!prevStatePlaying)
+  }
+
+  const handleSpeedChange = rate => {
+    setPlaybackRate(rate)
+  }
+
+  const handleSliderMouseUp = () => {
+    setIsSeeking(false)
+  }
+
+  const handleSliderMouseDown = () => {
+    setIsPlaying(false)
+    setIsSeeking(true)
+  }
+
+  /* When VideoController > Slider is clicked or scrubbed */
+  const handleSliderChange = e => {
+    const played = getFixedNumber(e.target.value, 5)
+    this.player?.current.seekTo(played)
+  }
+
+  if (viewerLoadingState === asyncStates.error) {
+    return <div>There was an error loading the viewer</div>
+  }
+
+  const canvas = transformLayer?.current
+  const interactionLayerScale = clientWidth / videoWidth
+
+  const videoSrc = Object.values(subject?.locations[0])[0]
+
+  return (
+    <>
+      {videoSrc
+        ? (
+          <SubjectContainer>
+            <SingleVideoViewer
+              isPlaying={isPlaying}
+              onDuration={handleVideoDuration}
+              onEnded={handleVideoEnded}
+              onReactPlayerReady={onReactPlayerReady}
+              onProgress={handleVideoProgress}
+              playbackRate={playbackRate}
+              playerRef={playerRef}
+              url={videoSrc}
+            />
+            {/* Drawing Layer */
+            /* Could this be moved to its own component file? */}
+            <DrawingLayer>
+              <Box overflow='hidden'>
+                <SVGContext.Provider value={{ canvas }}>
+                  <svg
+                    ref={interactionLayerSVG}
+                    focusable
+                    onKeyDown={onKeyDown}
+                    tabIndex={0}
+                    viewBox={`0 0 ${videoWidth} ${videoHeight}`}
+                    xmlns='http://www.w3.org/2000/svg'
+                  >
+                    <g ref={transformLayer} transform=''>
+                      {enableInteractionLayer && (
+                        <InteractionLayer
+                          scale={interactionLayerScale}
+                          duration={duration}
+                          height={videoHeight}
+                          played={timeStamp}
+                          width={videoWidth}
+                        />
+                      )}
+                    </g>
+                  </svg>
+                </SVGContext.Provider>
+              </Box>
+            </DrawingLayer>
+          </SubjectContainer>
+          )
+        : (
+          <Box>Unable to load the subject</Box>
+          )}
+      <VideoController
+        isPlaying={isPlaying}
+        played={timeStamp}
+        playbackRate={playbackRate}
+        duration={duration}
+        onPlayPause={handlePlayPause}
+        onSpeedChange={handleSpeedChange}
+        onSliderMouseUp={handleSliderMouseUp}
+        onSliderMouseDown={handleSliderMouseDown}
+        onSliderChange={handleSliderChange}
+      />
+    </>
+  )
+}
+
+SingleVideoViewerContainer.propTypes = {
+  enableInteractionLayer: PropTypes.bool,
+  loadingState: PropTypes.string,
+  onError: PropTypes.func,
+  onKeyDown: PropTypes.func,
+  onReady: PropTypes.func,
+  subject: PropTypes.shape({
+    locations: PropTypes.arrayOf(locationValidator)
+  })
+}
+
+export default SingleVideoViewerContainer
diff --git a/packages/lib-classifier/src/components/Classifier/components/SubjectViewer/components/SingleVideoViewer/index.js b/packages/lib-classifier/src/components/Classifier/components/SubjectViewer/components/SingleVideoViewer/index.js
index 35aa1b0a4c..5e90c90cc9 100644
--- a/packages/lib-classifier/src/components/Classifier/components/SubjectViewer/components/SingleVideoViewer/index.js
+++ b/packages/lib-classifier/src/components/Classifier/components/SubjectViewer/components/SingleVideoViewer/index.js
@@ -1,2 +1,2 @@
-export { default } from './SingleVideoViewerContainer'
+export { default } from './SingleVideoViewerContainerFunctional'
 export { default as SingleVideoViewer } from './SingleVideoViewer'

From d49c09e9471c05a26796ead9f6190a1768ef4559 Mon Sep 17 00:00:00 2001
From: Delilah Clement <delilahclement@gmail.com>
Date: Tue, 13 Sep 2022 15:22:18 -0500
Subject: [PATCH 07/34] add translation to SubjectViewer and unit tests for
 SingleVideoViewerContainer

---
 packages/lib-classifier/package.json          |   1 -
 .../components/SubjectViewer/SubjectViewer.js |   4 +-
 .../SingleVideoViewer/SingleVideoViewer.js    |   2 +
 .../SingleVideoViewerContainer.js             | 334 +++++++-----------
 .../SingleVideoViewerContainer.spec.js        |  62 +++-
 .../SingleVideoViewerContainer.stories.js     |  30 +-
 .../SingleVideoViewerContainerFunctional.js   | 192 ----------
 .../components/SingleVideoViewer/index.js     |   2 +-
 .../src/translations/en/components.json       |   4 +
 yarn.lock                                     |   8 +-
 10 files changed, 202 insertions(+), 437 deletions(-)
 delete mode 100644 packages/lib-classifier/src/components/Classifier/components/SubjectViewer/components/SingleVideoViewer/SingleVideoViewerContainerFunctional.js

diff --git a/packages/lib-classifier/package.json b/packages/lib-classifier/package.json
index bfd3ebfabc..dbd2ecf9cc 100644
--- a/packages/lib-classifier/package.json
+++ b/packages/lib-classifier/package.json
@@ -67,7 +67,6 @@
     "@storybook/builder-webpack5": "~6.5.0",
     "@storybook/manager-webpack5": "~6.5.0",
     "@storybook/react": "~6.5.0",
-    "@storybook/testing-react": "~1.3.0",
     "@testing-library/dom": "~8.17.1",
     "@testing-library/react": "~12.1.2",
     "@testing-library/react-hooks": "~8.0.0",
diff --git a/packages/lib-classifier/src/components/Classifier/components/SubjectViewer/SubjectViewer.js b/packages/lib-classifier/src/components/Classifier/components/SubjectViewer/SubjectViewer.js
index 596386e231..cafe1cd0aa 100644
--- a/packages/lib-classifier/src/components/Classifier/components/SubjectViewer/SubjectViewer.js
+++ b/packages/lib-classifier/src/components/Classifier/components/SubjectViewer/SubjectViewer.js
@@ -1,6 +1,7 @@
 import asyncStates from '@zooniverse/async-states'
 import PropTypes from 'prop-types'
 import React from 'react'
+import { useTranslation } from 'react-i18next'
 
 import { withStores } from '@helpers'
 import getViewer from './helpers/getViewer'
@@ -34,12 +35,13 @@ function SubjectViewer({
   subjectQueueState = asyncStates.initialized,
   subjectReadyState
 }) {
+  const { t } = useTranslation('components')
   switch (subjectQueueState) {
     case asyncStates.initialized: {
       return null
     }
     case asyncStates.loading: {
-      return (<div>Loading</div>)
+      return (<div>{t('SubjectViewer.loading')}</div>)
     }
     case asyncStates.error: {
       console.error('There was an error loading the subjects')
diff --git a/packages/lib-classifier/src/components/Classifier/components/SubjectViewer/components/SingleVideoViewer/SingleVideoViewer.js b/packages/lib-classifier/src/components/Classifier/components/SubjectViewer/components/SingleVideoViewer/SingleVideoViewer.js
index f590b5666d..fe1e7438c1 100644
--- a/packages/lib-classifier/src/components/Classifier/components/SubjectViewer/components/SingleVideoViewer/SingleVideoViewer.js
+++ b/packages/lib-classifier/src/components/Classifier/components/SubjectViewer/components/SingleVideoViewer/SingleVideoViewer.js
@@ -22,6 +22,7 @@ const SingleVideoViewer = ({
   isPlaying = false,
   onDuration = () => {},
   onEnded = () => {},
+  onError = () => {},
   onProgress = () => {},
   onReactPlayerReady = () => {},
   playbackRate = 1,
@@ -35,6 +36,7 @@ const SingleVideoViewer = ({
         height='100%'
         onDuration={onDuration}
         onEnded={onEnded}
+        onError={onError}
         onReady={onReactPlayerReady}
         onProgress={onProgress}
         playing={isPlaying}
diff --git a/packages/lib-classifier/src/components/Classifier/components/SubjectViewer/components/SingleVideoViewer/SingleVideoViewerContainer.js b/packages/lib-classifier/src/components/Classifier/components/SubjectViewer/components/SingleVideoViewer/SingleVideoViewerContainer.js
index fb243026d4..40eb706e13 100644
--- a/packages/lib-classifier/src/components/Classifier/components/SubjectViewer/components/SingleVideoViewer/SingleVideoViewerContainer.js
+++ b/packages/lib-classifier/src/components/Classifier/components/SubjectViewer/components/SingleVideoViewer/SingleVideoViewerContainer.js
@@ -1,8 +1,8 @@
-import React from 'react'
 import PropTypes from 'prop-types'
 import styled from 'styled-components'
-import asyncStates from '@zooniverse/async-states'
 import { Box } from 'grommet'
+import React, { useEffect, useState, useRef } from 'react'
+import { useTranslation } from 'react-i18next'
 
 import SVGContext from '@plugins/drawingTools/shared/SVGContext'
 
@@ -23,232 +23,172 @@ const DrawingLayer = styled.div`
   cursor: default;
 `
 
-class SingleVideoViewerContainer extends React.Component {
-  constructor() {
-    super()
-
-    this.interactionLayerSVG = React.createRef()
-    this.player = React.createRef()
-    this.transformLayer = React.createRef()
-
-    this.state = {
-      clientWidth: 0,
-      duration: 0,
-      isPlaying: false,
-      played: 0,
-      playbackRate: 1,
-      isSeeking: false,
-      naturalHeight: 0,
-      naturalWidth: 0,
-      vid: null
+function SingleVideoViewerContainer({
+  enableInteractionLayer = true,
+  onError = () => true,
+  onReady = () => true,
+  onKeyDown = () => true,
+  subject
+}) {
+  const [clientWidth, setClientWidth] = useState(0)
+  const [duration, setDuration] = useState(0)
+  const [isPlaying, setIsPlaying] = useState(false)
+  const [timeStamp, setTimeStamp] = useState(0)
+  const [playbackRate, setPlaybackRate] = useState(1)
+  const [isSeeking, setIsSeeking] = useState(false)
+  const [videoHeight, setVideoHeight] = useState(0)
+  const [videoWidth, setVideoWidth] = useState(0)
+  const [videoSrc, setVideoSrc] = useState('')
+
+  const interactionLayerSVG = useRef()
+  const playerRef = useRef()
+  const transformLayer = useRef()
+
+  const { t } = useTranslation('components')
+
+  /* ==================== load subject ==================== */
+
+  useEffect(() => {
+    if (subject) {
+      setVideoSrc(Object.values(subject.locations[0])[0])
     }
-  }
+  }, [subject])
 
-  componentDidMount() {
-    this.onLoad()
-  }
-
-  /* ==================== get subject ==================== */
-  async onLoad() {
-    const { onError, onReady } = this.props
+  const onReactPlayerReady = () => {
     try {
-      const {
-        clientHeight,
-        clientWidth,
-        naturalHeight,
-        naturalWidth
-      } = await this.getVideoSize()
-      const target = { clientHeight, clientWidth, naturalWidth, naturalHeight }
-      this.setState({
-        clientWidth: clientWidth,
-        naturalHeight: naturalHeight,
-        naturalWidth: naturalWidth
-      })
+      const reactPlayerVideoHeight = playerRef.current?.getInternalPlayer().videoHeight
+      const reactPlayerVideoWidth = playerRef.current?.getInternalPlayer().videoWidth
+      setVideoHeight(reactPlayerVideoHeight)
+      setVideoWidth(reactPlayerVideoWidth)
+
+      const { width: svgClientWidth, height: svgClientHeight } = interactionLayerSVG.current?.getBoundingClientRect()
+      setClientWidth(svgClientWidth)
+
+      const target = {
+        clientHeight: svgClientHeight,
+        clientWidth: svgClientWidth,
+        naturalHeight: reactPlayerVideoHeight,
+        naturalWidth: reactPlayerVideoWidth
+      }
       onReady({ target })
+      console.log('HERE')
     } catch (error) {
       onError(error)
     }
   }
 
-  async getVideoSize() {
-    const vid = await this.preload()
-    const svg = this.interactionLayerSVG.current
-    const { width: clientWidth, height: clientHeight } = svg
-      ? svg.getBoundingClientRect()
-      : {}
-
-    return {
-      clientHeight,
-      clientWidth,
-      naturalHeight: vid.videoHeight,
-      naturalWidth: vid.videoWidth
-    }
-  }
-
-  async preload() {
-    const { subject } = this.props
-    if (subject && subject.locations) {
-      const videoUrl = Object.values(subject.locations[0])[0]
-      const vid = await this.createVideoElement(videoUrl)
-      this.setState({ vid })
-      return vid
-    }
-    return {}
-  }
-
-  createVideoElement(url) {
-    return new Promise((resolve, reject) => {
-      const video = document.createElement('video')
-      video.onloadedmetadata = () => resolve(video)
-      video.onerror = reject
-      video.src = url
-      return video
-    })
-  }
-
   /* ==================== SingleVideoViewer react-player ==================== */
-  handleVideoProgress = (reactPlayerState) => {
+
+  const handleVideoProgress = reactPlayerState => {
     const { played } = reactPlayerState
     const fixedNumber = getFixedNumber(played, 5)
-    this.setState((prevState) => {
-      if (prevState.isSeeking) return null
-      return { played: fixedNumber }
-    })
+    // TO DO: Why wouldn't you set timestamp when seeking?
+    if (!isSeeking) {
+      setTimeStamp(fixedNumber)
+    }
   }
 
-  handleVideoDuration = (duration) => {
-    this.setState({ duration })
+  const handleVideoDuration = duration => {
+    setDuration(duration)
   }
 
-  handleVideoEnded = () => {
-    this.setState({ isPlaying: false })
+  const handleVideoEnded = () => {
+    setIsPlaying(false)
   }
 
-  handlePlayPause = () => {
-    this.setState((prevState) => ({ isPlaying: !prevState.isPlaying }))
+  const handlePlayPause = () => {
+    const prevStatePlaying = isPlaying
+    setIsPlaying(!prevStatePlaying)
   }
 
-  handleSpeedChange = (rate) => {
-    this.setState({ playbackRate: rate })
+  const handleSpeedChange = rate => {
+    setPlaybackRate(rate)
   }
 
-  handleSliderMouseUp = () => {
-    this.setState({ isSeeking: false })
+  const handleSliderMouseUp = () => {
+    setIsSeeking(false)
   }
 
-  handleSliderMouseDown = () => {
-    this.setState({ isPlaying: false, isSeeking: true })
+  const handleSliderMouseDown = () => {
+    setIsPlaying(false)
+    setIsSeeking(true)
   }
 
   /* When VideoController > Slider is clicked or scrubbed */
-  handleSliderChange = (e) => {
+  const handleSliderChange = e => {
     const played = getFixedNumber(e.target.value, 5)
-    this.player?.current.seekTo(played)
-
-    /* Can't find a use case for this code, not sure of its purpose */
-    
-    // this.setState(
-    //   (prevState) => {
-    //     console.log(prevState)
-    //     // what are entities? what is this for loop doing?
-    //     let { focusing } = prevState
-    //     if (focusing) {
-    //       const { incidents } = prevState?.entities?.annotations?.focusing
-    //       for (let i = 0; i < incidents?.length; i += 1) {
-    //         if (played >= incidents[i].time) {
-    //           if (i !== incidents.length - 1 && played >= incidents[i + 1].time)
-    //             continue
-    //           if (incidents[i].status !== SHOW) focusing = ''
-    //           break
-    //         } else if (i === incidents.length - 1) focusing = ''
-    //       }
-    //     }
-    //     return { played, focusing }
-    //   }
-    // )
+    playerRef?.current.seekTo(played)
   }
 
-  render() {
-    const { 
-      enableInteractionLayer = true,
-      loadingState: viewerLoadingState = asyncStates.initialized,
-      onKeyDown 
-    } = this.props
-
-    const {
-      clientWidth,
-      duration,
-      isPlaying,
-      played,
-      playbackRate,
-      naturalHeight,
-      naturalWidth,
-      vid
-    } = this.state
-
-    if (viewerLoadingState === asyncStates.error) {
-      return <div>There was an error loading the viewer</div>
-    }
-
-    const canvas = this.transformLayer?.current
-    const interactionLayerScale = clientWidth / naturalWidth
-
-    return (
-      <>
-        <SubjectContainer>
-          <SingleVideoViewer
-            isPlaying={isPlaying}
-            onDuration={this.handleVideoDuration}
-            onEnded={this.handleVideoEnded}
-            onProgress={this.handleVideoProgress}
-            playbackRate={playbackRate}
-            playerRef={this.player}
-            url={vid?.src}
-          />
-
-          {/* Drawing Layer */
-          /* Could this be moved to its own component file and why does it have an animation? */}
-          <DrawingLayer>
-            <Box animation='fadeIn' overflow='hidden'>
-              <SVGContext.Provider value={{ canvas }}>
-                <svg
-                  ref={this.interactionLayerSVG}
-                  focusable
-                  onKeyDown={onKeyDown}
-                  tabIndex={0}
-                  viewBox={`0 0 ${naturalWidth} ${naturalHeight}`}
-                  xmlns='http://www.w3.org/2000/svg'
-                >
-                  <g ref={this.transformLayer} transform=''>
-                    {enableInteractionLayer && (
-                      <InteractionLayer
-                        scale={interactionLayerScale}
-                        duration={duration}
-                        height={naturalHeight}
-                        played={played}
-                        width={naturalWidth}
-                      />
-                    )}
-                  </g>
-                </svg>
-              </SVGContext.Provider>
-            </Box>
-          </DrawingLayer>
-        </SubjectContainer>
-        <VideoController
-          isPlaying={isPlaying}
-          played={played}
-          playbackRate={playbackRate}
-          duration={duration}
-          onPlayPause={this.handlePlayPause}
-          onSpeedChange={this.handleSpeedChange}
-          onSliderMouseUp={this.handleSliderMouseUp}
-          onSliderMouseDown={this.handleSliderMouseDown}
-          onSliderChange={this.handleSliderChange}
-        />
-      </>
-    )
+  const handlePlayerError = (error) => {
+    onError(error)
   }
+
+  const canvas = transformLayer?.current
+  const interactionLayerScale = clientWidth / videoWidth
+
+  return (
+    <>
+      {videoSrc
+        ? (
+          <SubjectContainer>
+            <SingleVideoViewer
+              isPlaying={isPlaying}
+              onDuration={handleVideoDuration}
+              onEnded={handleVideoEnded}
+              onError={handlePlayerError}
+              onReactPlayerReady={onReactPlayerReady}
+              onProgress={handleVideoProgress}
+              playbackRate={playbackRate}
+              playerRef={playerRef}
+              url={videoSrc}
+            />
+            {/* Drawing Layer */
+            /* Could this be moved to its own component file? */}
+            <DrawingLayer>
+              <Box overflow='hidden'>
+                <SVGContext.Provider value={{ canvas }}>
+                  <svg
+                    ref={interactionLayerSVG}
+                    focusable
+                    onKeyDown={onKeyDown}
+                    tabIndex={0}
+                    viewBox={`0 0 ${videoWidth} ${videoHeight}`}
+                    xmlns='http://www.w3.org/2000/svg'
+                  >
+                    <g ref={transformLayer} transform=''>
+                      {enableInteractionLayer && (
+                        <InteractionLayer
+                          scale={interactionLayerScale}
+                          duration={duration}
+                          height={videoHeight}
+                          played={timeStamp}
+                          width={videoWidth}
+                        />
+                      )}
+                    </g>
+                  </svg>
+                </SVGContext.Provider>
+              </Box>
+            </DrawingLayer>
+          </SubjectContainer>
+          )
+        : (
+          <Box>{t('SubjectViewer.SingleVideoViewerContainer.error')}</Box>
+          )}
+      <VideoController
+        isPlaying={isPlaying}
+        played={timeStamp}
+        playbackRate={playbackRate}
+        duration={duration}
+        onPlayPause={handlePlayPause}
+        onSpeedChange={handleSpeedChange}
+        onSliderMouseUp={handleSliderMouseUp}
+        onSliderMouseDown={handleSliderMouseDown}
+        onSliderChange={handleSliderChange}
+      />
+    </>
+  )
 }
 
 SingleVideoViewerContainer.propTypes = {
diff --git a/packages/lib-classifier/src/components/Classifier/components/SubjectViewer/components/SingleVideoViewer/SingleVideoViewerContainer.spec.js b/packages/lib-classifier/src/components/Classifier/components/SubjectViewer/components/SingleVideoViewer/SingleVideoViewerContainer.spec.js
index 578ec0745e..97e7db75b4 100644
--- a/packages/lib-classifier/src/components/Classifier/components/SubjectViewer/components/SingleVideoViewer/SingleVideoViewerContainer.spec.js
+++ b/packages/lib-classifier/src/components/Classifier/components/SubjectViewer/components/SingleVideoViewer/SingleVideoViewerContainer.spec.js
@@ -1,23 +1,61 @@
 import React from 'react'
-import * as stories from './SingleVideoViewerContainer.stories'
-import { render } from '@testing-library/react'
-import { composeStories } from '@storybook/testing-react'
+import { render, screen, waitFor } from '@testing-library/react'
+import { expect } from 'chai'
+import { Factory } from 'rosie'
+import { Provider } from 'mobx-react'
+
+import mockStore from '@test/mockStore'
+import SingleVideoViewerContainer from './SingleVideoViewerContainer'
 
 describe.only('Component > SingleVideoViewerContainer', function () {
-  
   describe('with a video subject src', function () {
-    
-    it('should render a video html element with subject url as src', function () {
-      const { Default } = composeStories(stories)
-      const { getByRole } = render(<Default />)
-      // const videoElement = getByRole('video')
-      // expect(videoElement).exists()
+    const mockSubject = Factory.build('subject', {
+      locations: [
+        {
+          'video/mp4': 'https://panoptes-uploads.zooniverse.org/subject_location/239f17f7-acf9-49f1-9873-266a80d29c33.mp4'
+        }
+      ]
+    })
+
+    const store = mockStore({
+      subject: mockSubject
+    })
+
+    it('should render a video html element with subject url as src', async function () {
+      const { container } = render(
+        <Provider classifierStore={store}>
+          <SingleVideoViewerContainer
+            subject={mockSubject}
+          />
+        </Provider>
+      )
+      // We need to wait for React Player to be ready
+      await waitFor(() => {
+        const videoElement = container.querySelector('video')
+        expect(videoElement).exists()
+      })
     })
   })
 
   describe('without a video subject src', function () {
-    it('should not render a video html element ', function () {
-      
+    const emptySubject = Factory.build('subject', {
+      locations: []
+    })
+
+    const store = mockStore({
+      subject: emptySubject
+    })
+
+    it('should display an error message and no video html element ', function () {
+      const { container } = render(
+        <Provider classifierStore={store}>
+          <SingleVideoViewerContainer />
+        </Provider>
+      )
+      const videoElement = container.querySelector('video')
+      const errorMessage = screen.getByText('SubjectViewer.SingleVideoViewerContainer.error')
+      expect(videoElement).to.be.null()
+      expect(errorMessage).exists()
     })
   })
 })
diff --git a/packages/lib-classifier/src/components/Classifier/components/SubjectViewer/components/SingleVideoViewer/SingleVideoViewerContainer.stories.js b/packages/lib-classifier/src/components/Classifier/components/SubjectViewer/components/SingleVideoViewer/SingleVideoViewerContainer.stories.js
index 8f8283604f..0009eca714 100644
--- a/packages/lib-classifier/src/components/Classifier/components/SubjectViewer/components/SingleVideoViewer/SingleVideoViewerContainer.stories.js
+++ b/packages/lib-classifier/src/components/Classifier/components/SubjectViewer/components/SingleVideoViewer/SingleVideoViewerContainer.stories.js
@@ -10,7 +10,6 @@ const background = {
   light: 'light-1'
 }
 
-// Can't use { SubjectFactory } from '@test/factories because video locations isn't handled yet
 const subject = Factory.build('subject', {
   locations: [
     {
@@ -24,10 +23,7 @@ export default {
   component: SingleVideoViewerContainer,
   args: {
     enableInteractionLayer: false,
-    dark: false,
-    onError: () => {},
-    onReady: () => {},
-    onKeyDown: () => {}
+    dark: false
   },
   parameters: {
     viewport: {
@@ -48,29 +44,6 @@ export const Default = ({
       <Box width='large'>
         <SingleVideoViewerContainer
           enableInteractionLayer={enableInteractionLayer}
-          loadingState='success'
-          onError={onError}
-          onReady={onReady}
-          subject={subject}
-        />
-      </Box>
-    </Grommet>
-  )
-}
-
-export const Loading = ({
-  enableInteractionLayer,
-  dark,
-  onError,
-  onReady
-}) => {
-  const themeMode = dark ? 'dark' : 'light'
-  return (
-    <Grommet background={background} theme={zooTheme} themeMode={themeMode}>
-      <Box width='large'>
-        <SingleVideoViewerContainer
-          enableInteractionLayer={enableInteractionLayer}
-          loadingState='loading'
           onError={onError}
           onReady={onReady}
           subject={subject}
@@ -92,7 +65,6 @@ export const NoSubject = ({
       <Box width='large'>
         <SingleVideoViewerContainer
           enableInteractionLayer={enableInteractionLayer}
-          loadingState='error'
           onError={onError}
           onReady={onReady}
         />
diff --git a/packages/lib-classifier/src/components/Classifier/components/SubjectViewer/components/SingleVideoViewer/SingleVideoViewerContainerFunctional.js b/packages/lib-classifier/src/components/Classifier/components/SubjectViewer/components/SingleVideoViewer/SingleVideoViewerContainerFunctional.js
deleted file mode 100644
index a1e17240c3..0000000000
--- a/packages/lib-classifier/src/components/Classifier/components/SubjectViewer/components/SingleVideoViewer/SingleVideoViewerContainerFunctional.js
+++ /dev/null
@@ -1,192 +0,0 @@
-import PropTypes from 'prop-types'
-import styled from 'styled-components'
-import asyncStates from '@zooniverse/async-states'
-import { Box } from 'grommet'
-import React, { useState, useRef } from 'react'
-
-import SVGContext from '@plugins/drawingTools/shared/SVGContext'
-
-import InteractionLayer from '../InteractionLayer'
-import locationValidator from '../../helpers/locationValidator'
-import SingleVideoViewer from './SingleVideoViewer'
-import VideoController from '../VideoController/VideoController'
-import getFixedNumber from '../../helpers/getFixedNumber'
-
-const SubjectContainer = styled.div`
-  position: relative;
-`
-
-const DrawingLayer = styled.div`
-  position: absolute;
-  top: 0px;
-  width: 100%;
-  cursor: default;
-`
-
-function SingleVideoViewerContainer({
-  enableInteractionLayer = true,
-  loadingState: viewerLoadingState = asyncStates.initialized,
-  onError = () => true,
-  onReady = () => true,
-  onKeyDown = () => true,
-  subject
-}) {
-  const [clientWidth, setClientWidth] = useState(0)
-  const [duration, setDuration] = useState(0)
-  const [isPlaying, setIsPlaying] = useState(false)
-  const [timeStamp, setTimeStamp] = useState(0)
-  const [playbackRate, setPlaybackRate] = useState(1)
-  const [isSeeking, setIsSeeking] = useState(false)
-  const [videoHeight, setVideoHeight] = useState(0)
-  const [videoWidth, setVideoWidth] = useState(0)
-
-  const interactionLayerSVG = useRef()
-  const playerRef = useRef()
-  const transformLayer = useRef()
-
-  /* ==================== load subject ==================== */
-
-  const onReactPlayerReady = () => {
-    try {
-      const reactPlayerVideoHeight = playerRef.current?.getInternalPlayer().videoHeight
-      const reactPlayerVideoWidth = playerRef.current?.getInternalPlayer().videoWidth
-      setVideoHeight(reactPlayerVideoHeight)
-      setVideoWidth(reactPlayerVideoWidth)
-
-      const { width: svgClientWidth, height: svgClientHeight } = interactionLayerSVG.current?.getBoundingClientRect()
-      setClientWidth(svgClientWidth)
-
-      const target = { svgClientHeight, svgClientWidth, reactPlayerVideoWidth, reactPlayerVideoHeight }
-      onReady({ target })
-    } catch (error) {
-      onError(error)
-    }
-  }
-
-  /* ==================== SingleVideoViewer 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 handleVideoDuration = duration => {
-    setDuration(duration)
-  }
-
-  const handleVideoEnded = () => {
-    setIsPlaying(false)
-  }
-
-  const handlePlayPause = () => {
-    const prevStatePlaying = isPlaying
-    setIsPlaying(!prevStatePlaying)
-  }
-
-  const handleSpeedChange = rate => {
-    setPlaybackRate(rate)
-  }
-
-  const handleSliderMouseUp = () => {
-    setIsSeeking(false)
-  }
-
-  const handleSliderMouseDown = () => {
-    setIsPlaying(false)
-    setIsSeeking(true)
-  }
-
-  /* When VideoController > Slider is clicked or scrubbed */
-  const handleSliderChange = e => {
-    const played = getFixedNumber(e.target.value, 5)
-    this.player?.current.seekTo(played)
-  }
-
-  if (viewerLoadingState === asyncStates.error) {
-    return <div>There was an error loading the viewer</div>
-  }
-
-  const canvas = transformLayer?.current
-  const interactionLayerScale = clientWidth / videoWidth
-
-  const videoSrc = Object.values(subject?.locations[0])[0]
-
-  return (
-    <>
-      {videoSrc
-        ? (
-          <SubjectContainer>
-            <SingleVideoViewer
-              isPlaying={isPlaying}
-              onDuration={handleVideoDuration}
-              onEnded={handleVideoEnded}
-              onReactPlayerReady={onReactPlayerReady}
-              onProgress={handleVideoProgress}
-              playbackRate={playbackRate}
-              playerRef={playerRef}
-              url={videoSrc}
-            />
-            {/* Drawing Layer */
-            /* Could this be moved to its own component file? */}
-            <DrawingLayer>
-              <Box overflow='hidden'>
-                <SVGContext.Provider value={{ canvas }}>
-                  <svg
-                    ref={interactionLayerSVG}
-                    focusable
-                    onKeyDown={onKeyDown}
-                    tabIndex={0}
-                    viewBox={`0 0 ${videoWidth} ${videoHeight}`}
-                    xmlns='http://www.w3.org/2000/svg'
-                  >
-                    <g ref={transformLayer} transform=''>
-                      {enableInteractionLayer && (
-                        <InteractionLayer
-                          scale={interactionLayerScale}
-                          duration={duration}
-                          height={videoHeight}
-                          played={timeStamp}
-                          width={videoWidth}
-                        />
-                      )}
-                    </g>
-                  </svg>
-                </SVGContext.Provider>
-              </Box>
-            </DrawingLayer>
-          </SubjectContainer>
-          )
-        : (
-          <Box>Unable to load the subject</Box>
-          )}
-      <VideoController
-        isPlaying={isPlaying}
-        played={timeStamp}
-        playbackRate={playbackRate}
-        duration={duration}
-        onPlayPause={handlePlayPause}
-        onSpeedChange={handleSpeedChange}
-        onSliderMouseUp={handleSliderMouseUp}
-        onSliderMouseDown={handleSliderMouseDown}
-        onSliderChange={handleSliderChange}
-      />
-    </>
-  )
-}
-
-SingleVideoViewerContainer.propTypes = {
-  enableInteractionLayer: PropTypes.bool,
-  loadingState: PropTypes.string,
-  onError: PropTypes.func,
-  onKeyDown: PropTypes.func,
-  onReady: PropTypes.func,
-  subject: PropTypes.shape({
-    locations: PropTypes.arrayOf(locationValidator)
-  })
-}
-
-export default SingleVideoViewerContainer
diff --git a/packages/lib-classifier/src/components/Classifier/components/SubjectViewer/components/SingleVideoViewer/index.js b/packages/lib-classifier/src/components/Classifier/components/SubjectViewer/components/SingleVideoViewer/index.js
index 5e90c90cc9..35aa1b0a4c 100644
--- a/packages/lib-classifier/src/components/Classifier/components/SubjectViewer/components/SingleVideoViewer/index.js
+++ b/packages/lib-classifier/src/components/Classifier/components/SubjectViewer/components/SingleVideoViewer/index.js
@@ -1,2 +1,2 @@
-export { default } from './SingleVideoViewerContainerFunctional'
+export { default } from './SingleVideoViewerContainer'
 export { default as SingleVideoViewer } from './SingleVideoViewer'
diff --git a/packages/lib-classifier/src/translations/en/components.json b/packages/lib-classifier/src/translations/en/components.json
index 04c9aa9dec..465f080b15 100644
--- a/packages/lib-classifier/src/translations/en/components.json
+++ b/packages/lib-classifier/src/translations/en/components.json
@@ -156,6 +156,7 @@
     "previous": "Go to previous step"
   },
   "SubjectViewer": {
+    "loading": "Loading a subject",
     "BarChartViewer": {
       "chartLabel": "Bar chart"
     },
@@ -191,6 +192,9 @@
         "nextFrameLabel": "Next"
       }
     },
+    "SingleVideoViewerContainer": {
+      "error": "There was an error loading the subject."
+    },
     "VariableStarViewer": {
       "controls": "controls",
       "figCaption": "HR Diagram",
diff --git a/yarn.lock b/yarn.lock
index 6d66c65fea..603623c8cc 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -16557,10 +16557,10 @@ trim-trailing-lines@^1.0.0:
   resolved "https://registry.yarnpkg.com/trim-trailing-lines/-/trim-trailing-lines-1.1.4.tgz#bd4abbec7cc880462f10b2c8b5ce1d8d1ec7c2c0"
   integrity sha512-rjUWSqnfTNrjbB9NQWfPMH/xRK1deHeGsHoVfpxJ++XeYXE0d6B1En37AHfw3jtfTU7dzMzZL2jjpe8Qb5gLIQ==
 
-trim@0.0.1:
-  version "0.0.1"
-  resolved "https://registry.yarnpkg.com/trim/-/trim-0.0.1.tgz#5858547f6b290757ee95cccc666fb50084c460dd"
-  integrity sha512-YzQV+TZg4AxpKxaTHK3c3D+kRDCGVEE7LemdlQZoQXn0iennk10RsIoY6ikzAqJTc9Xjl9C1/waHom/J86ziAQ==
+trim@0.0.1, trim@~1.0:
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/trim/-/trim-1.0.1.tgz#68e78f6178ccab9687a610752f4f5e5a7022ee8c"
+  integrity sha512-3JVP2YVqITUisXblCDq/Bi4P9457G/sdEamInkyvCsjbTcXLXIiG7XCb4kGMFWh6JGXesS3TKxOPtrncN/xe8w==
 
 triple-beam@^1.3.0:
   version "1.3.0"

From 6735ede189360407a888edb6e26f0bdf31f58a3a Mon Sep 17 00:00:00 2001
From: Delilah Clement <delilahclement@gmail.com>
Date: Tue, 13 Sep 2022 15:49:17 -0500
Subject: [PATCH 08/34] add SingleVideoViewer unit test

---
 .../SubjectViewer/SubjectViewer.spec.js           |  2 +-
 .../SingleVideoViewer/SingleVideoViewer.spec.js   | 15 ++++++++++++---
 .../SingleVideoViewerContainer.spec.js            |  2 +-
 3 files changed, 14 insertions(+), 5 deletions(-)

diff --git a/packages/lib-classifier/src/components/Classifier/components/SubjectViewer/SubjectViewer.spec.js b/packages/lib-classifier/src/components/Classifier/components/SubjectViewer/SubjectViewer.spec.js
index 58d7486d94..fd7aab7763 100644
--- a/packages/lib-classifier/src/components/Classifier/components/SubjectViewer/SubjectViewer.spec.js
+++ b/packages/lib-classifier/src/components/Classifier/components/SubjectViewer/SubjectViewer.spec.js
@@ -19,7 +19,7 @@ describe('Component > SubjectViewer', function () {
 
   it('should render a loading indicator if the subject store is loading', function () {
     const wrapper = shallow(<SubjectViewer subjectQueueState={asyncStates.loading} />)
-    expect(wrapper.text()).to.equal('Loading')
+    expect(wrapper.text()).to.equal('SubjectViewer.loading')
   })
 
   it('should render nothing if the subject store errors', function () {
diff --git a/packages/lib-classifier/src/components/Classifier/components/SubjectViewer/components/SingleVideoViewer/SingleVideoViewer.spec.js b/packages/lib-classifier/src/components/Classifier/components/SubjectViewer/components/SingleVideoViewer/SingleVideoViewer.spec.js
index 39feda6184..e1442f54b2 100644
--- a/packages/lib-classifier/src/components/Classifier/components/SubjectViewer/components/SingleVideoViewer/SingleVideoViewer.spec.js
+++ b/packages/lib-classifier/src/components/Classifier/components/SubjectViewer/components/SingleVideoViewer/SingleVideoViewer.spec.js
@@ -1,8 +1,17 @@
 import React from 'react'
-import { render, screen } from '@testing-library/react'
-
+import { render, waitFor } from '@testing-library/react'
+import { expect } from 'chai'
 import SingleVideoViewer from './SingleVideoViewer'
 
 describe('Component > SingleVideoViewer', function () {
+  const mockUrl = 'https://zooniverse.org/test1234.mp4'
 
-})
\ No newline at end of file
+  it('render a video element with a src', async function () {
+    const { container } = render(<SingleVideoViewer url={mockUrl} />)
+    await waitFor(() => {
+      const videoElement = container.querySelector('video')
+      expect(videoElement).exists()
+      expect(videoElement.src).to.equal(mockUrl)
+    })
+  })
+})
diff --git a/packages/lib-classifier/src/components/Classifier/components/SubjectViewer/components/SingleVideoViewer/SingleVideoViewerContainer.spec.js b/packages/lib-classifier/src/components/Classifier/components/SubjectViewer/components/SingleVideoViewer/SingleVideoViewerContainer.spec.js
index 97e7db75b4..c7e2051d42 100644
--- a/packages/lib-classifier/src/components/Classifier/components/SubjectViewer/components/SingleVideoViewer/SingleVideoViewerContainer.spec.js
+++ b/packages/lib-classifier/src/components/Classifier/components/SubjectViewer/components/SingleVideoViewer/SingleVideoViewerContainer.spec.js
@@ -7,7 +7,7 @@ import { Provider } from 'mobx-react'
 import mockStore from '@test/mockStore'
 import SingleVideoViewerContainer from './SingleVideoViewerContainer'
 
-describe.only('Component > SingleVideoViewerContainer', function () {
+describe('Component > SingleVideoViewerContainer', function () {
   describe('with a video subject src', function () {
     const mockSubject = Factory.build('subject', {
       locations: [

From 7be841ca4216cf553c8254f16af8bf7df9bf7a24 Mon Sep 17 00:00:00 2001
From: Delilah Clement <delilahclement@gmail.com>
Date: Tue, 13 Sep 2022 16:16:31 -0500
Subject: [PATCH 09/34] clean up SingleVideoViewerContainer's readme

---
 .../components/SingleVideoViewer/README.md    | 26 +++++++------------
 .../SingleVideoViewerContainer.js             |  7 +++--
 2 files changed, 13 insertions(+), 20 deletions(-)

diff --git a/packages/lib-classifier/src/components/Classifier/components/SubjectViewer/components/SingleVideoViewer/README.md b/packages/lib-classifier/src/components/Classifier/components/SubjectViewer/components/SingleVideoViewer/README.md
index 905e5908fc..81b4d43213 100644
--- a/packages/lib-classifier/src/components/Classifier/components/SubjectViewer/components/SingleVideoViewer/README.md
+++ b/packages/lib-classifier/src/components/Classifier/components/SubjectViewer/components/SingleVideoViewer/README.md
@@ -7,36 +7,30 @@ 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. The svg layer is displayed regardless of whether a project has drawing tools enabled?
-
-When SingleVideoViewerContainer mounts, it creates a <video> HTML element in `preload()` and sets the `src` as the subject's url.
-
-Then, `getVideoSize()` returns the following dimensions:
-- `clientHeight` and `clientWidth` are the dimensions of the SVG placed on top of the video player for drawing tool interactions.
-- `naturalHeight` and `naturalWidth` are the dimensions of the <video> displaying the subject.
+SingleVideoViewerContainer handles state for SingleVideoViewer 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.
-- `player`: Reference to `react-player` components.
+- `playerRef`: Reference to `react-player` component.
 - `transformLayer`: Needed for drawing tools' InteractionLayer.
 
 Props
 - `enableInteractionLayer`: (boolean) When `true`, the <InteractionLayer> is rendered on top of the video subject.
-= `loadingState`: (asyncStates) Passed from SubjectViewer. This is the viewer's loading state, not the subject's loading state.
 - `onError`: (function) Passed from SubjectViewer and called if `onLoad()` fails.
-- `onKeyDown`: (function) Used for drawing tools components.
 - `onReady`: (function) Called after component mounts with dimensions of <video> and svg interaction layer. Function is passed from SubjectViewer and  dimensions are added to classification metatdata.
+- `onKeyDown`: (function) Used for drawing tools components.
 - `subject`: (object) Passed from mobx store via SubjectViewer.
 
 State Variables
 - `clientWidth`: (number) Returned from `getBoundingClientRect()` on the svg element that belongs to InteractionLayer for drawing tools.
 - `duration`: (number) Duration of the video subject. Seconds rounded to 3 decimal places.
-= `isPlaying`: (boolean) Whether or not the video subject is playing.
-- `isSeeking`: (boolean) Whether or not a user is interacting with the VideoController > Slider
-= `naturalHeight`: (number) Height of <video> displaying the subject.
-= `naturalWidth`: (number) Width of the <video> displaying the subject.
-- `played`: (number) Current played timestamp of video subject.
-- `vid`: (html element) <video> displaying the subject.
+- `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.
+- `videoHeight`: (number) Height of <video> displaying the subject.
+- `videoWidth`: (number) Width of the <video> displaying the subject.
+- `videoSrc`: (string) Source string of the video subject.
 
 ## External Setup: Workflows and Subjects
 
diff --git a/packages/lib-classifier/src/components/Classifier/components/SubjectViewer/components/SingleVideoViewer/SingleVideoViewerContainer.js b/packages/lib-classifier/src/components/Classifier/components/SubjectViewer/components/SingleVideoViewer/SingleVideoViewerContainer.js
index 40eb706e13..97b56542fc 100644
--- a/packages/lib-classifier/src/components/Classifier/components/SubjectViewer/components/SingleVideoViewer/SingleVideoViewerContainer.js
+++ b/packages/lib-classifier/src/components/Classifier/components/SubjectViewer/components/SingleVideoViewer/SingleVideoViewerContainer.js
@@ -33,9 +33,9 @@ function SingleVideoViewerContainer({
   const [clientWidth, setClientWidth] = useState(0)
   const [duration, setDuration] = useState(0)
   const [isPlaying, setIsPlaying] = useState(false)
-  const [timeStamp, setTimeStamp] = useState(0)
-  const [playbackRate, setPlaybackRate] = useState(1)
   const [isSeeking, setIsSeeking] = useState(false)
+  const [playbackRate, setPlaybackRate] = useState(1)
+  const [timeStamp, setTimeStamp] = useState(0)
   const [videoHeight, setVideoHeight] = useState(0)
   const [videoWidth, setVideoWidth] = useState(0)
   const [videoSrc, setVideoSrc] = useState('')
@@ -143,8 +143,7 @@ function SingleVideoViewerContainer({
               playerRef={playerRef}
               url={videoSrc}
             />
-            {/* Drawing Layer */
-            /* Could this be moved to its own component file? */}
+            {/* Drawing Layer */}
             <DrawingLayer>
               <Box overflow='hidden'>
                 <SVGContext.Provider value={{ canvas }}>

From 9458a80e7d81ab2ff8784b203a7932bf91f0b1cc Mon Sep 17 00:00:00 2001
From: Delilah Clement <delilahclement@gmail.com>
Date: Thu, 15 Sep 2022 12:34:06 -0500
Subject: [PATCH 10/34] use ternary for videoSrc in SingleVideoViewerContainer

---
 .../SubjectViewer/components/SingleVideoViewer/README.md  | 1 -
 .../SingleVideoViewer/SingleVideoViewerContainer.js       | 8 +-------
 2 files changed, 1 insertion(+), 8 deletions(-)

diff --git a/packages/lib-classifier/src/components/Classifier/components/SubjectViewer/components/SingleVideoViewer/README.md b/packages/lib-classifier/src/components/Classifier/components/SubjectViewer/components/SingleVideoViewer/README.md
index 81b4d43213..f2276902b9 100644
--- a/packages/lib-classifier/src/components/Classifier/components/SubjectViewer/components/SingleVideoViewer/README.md
+++ b/packages/lib-classifier/src/components/Classifier/components/SubjectViewer/components/SingleVideoViewer/README.md
@@ -30,7 +30,6 @@ State Variables
 - `timeStamp`: (number) Current played timestamp of video subject.
 - `videoHeight`: (number) Height of <video> displaying the subject.
 - `videoWidth`: (number) Width of the <video> displaying the subject.
-- `videoSrc`: (string) Source string of the video subject.
 
 ## External Setup: Workflows and Subjects
 
diff --git a/packages/lib-classifier/src/components/Classifier/components/SubjectViewer/components/SingleVideoViewer/SingleVideoViewerContainer.js b/packages/lib-classifier/src/components/Classifier/components/SubjectViewer/components/SingleVideoViewer/SingleVideoViewerContainer.js
index 97b56542fc..c67b1ba192 100644
--- a/packages/lib-classifier/src/components/Classifier/components/SubjectViewer/components/SingleVideoViewer/SingleVideoViewerContainer.js
+++ b/packages/lib-classifier/src/components/Classifier/components/SubjectViewer/components/SingleVideoViewer/SingleVideoViewerContainer.js
@@ -38,7 +38,6 @@ function SingleVideoViewerContainer({
   const [timeStamp, setTimeStamp] = useState(0)
   const [videoHeight, setVideoHeight] = useState(0)
   const [videoWidth, setVideoWidth] = useState(0)
-  const [videoSrc, setVideoSrc] = useState('')
 
   const interactionLayerSVG = useRef()
   const playerRef = useRef()
@@ -48,11 +47,7 @@ function SingleVideoViewerContainer({
 
   /* ==================== load subject ==================== */
 
-  useEffect(() => {
-    if (subject) {
-      setVideoSrc(Object.values(subject.locations[0])[0])
-    }
-  }, [subject])
+  const videoSrc = subject ? Object.values(subject.locations[0])[0] : null
 
   const onReactPlayerReady = () => {
     try {
@@ -71,7 +66,6 @@ function SingleVideoViewerContainer({
         naturalWidth: reactPlayerVideoWidth
       }
       onReady({ target })
-      console.log('HERE')
     } catch (error) {
       onError(error)
     }

From 36c692a92a0a5727198e14357db47636a95ed37a Mon Sep 17 00:00:00 2001
From: Delilah Clement <delilahclement@gmail.com>
Date: Thu, 15 Sep 2022 14:00:35 -0500
Subject: [PATCH 11/34] only render the drawing tools interaction layers when
 enableDrawing is true

---
 .../components/SingleVideoViewer/README.md    |  6 +-
 .../SingleVideoViewerContainer.js             | 59 ++++++++++---------
 2 files changed, 35 insertions(+), 30 deletions(-)

diff --git a/packages/lib-classifier/src/components/Classifier/components/SubjectViewer/components/SingleVideoViewer/README.md b/packages/lib-classifier/src/components/Classifier/components/SubjectViewer/components/SingleVideoViewer/README.md
index f2276902b9..d146b6aa85 100644
--- a/packages/lib-classifier/src/components/Classifier/components/SubjectViewer/components/SingleVideoViewer/README.md
+++ b/packages/lib-classifier/src/components/Classifier/components/SubjectViewer/components/SingleVideoViewer/README.md
@@ -22,14 +22,14 @@ Props
 - `subject`: (object) Passed from mobx store via SubjectViewer.
 
 State Variables
-- `clientWidth`: (number) Returned from `getBoundingClientRect()` on the svg element that belongs to InteractionLayer for drawing tools.
+- `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.
 - `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.
-- `videoHeight`: (number) Height of <video> displaying the subject.
-- `videoWidth`: (number) Width of the <video> displaying the subject.
+- `videoHeight`: (number) Natural height of video subject file.
+- `videoWidth`: (number) Natural width of the video subject file.
 
 ## External Setup: Workflows and Subjects
 
diff --git a/packages/lib-classifier/src/components/Classifier/components/SubjectViewer/components/SingleVideoViewer/SingleVideoViewerContainer.js b/packages/lib-classifier/src/components/Classifier/components/SubjectViewer/components/SingleVideoViewer/SingleVideoViewerContainer.js
index c67b1ba192..6ced771b22 100644
--- a/packages/lib-classifier/src/components/Classifier/components/SubjectViewer/components/SingleVideoViewer/SingleVideoViewerContainer.js
+++ b/packages/lib-classifier/src/components/Classifier/components/SubjectViewer/components/SingleVideoViewer/SingleVideoViewerContainer.js
@@ -1,8 +1,9 @@
 import PropTypes from 'prop-types'
 import styled from 'styled-components'
 import { Box } from 'grommet'
-import React, { useEffect, useState, useRef } from 'react'
+import React, { useState, useRef } from 'react'
 import { useTranslation } from 'react-i18next'
+import asyncStates from '@zooniverse/async-states'
 
 import SVGContext from '@plugins/drawingTools/shared/SVGContext'
 
@@ -24,7 +25,8 @@ const DrawingLayer = styled.div`
 `
 
 function SingleVideoViewerContainer({
-  enableInteractionLayer = true,
+  enableInteractionLayer = false,
+  loadingState = asyncStates.initialized,
   onError = () => true,
   onReady = () => true,
   onKeyDown = () => true,
@@ -53,15 +55,17 @@ function SingleVideoViewerContainer({
     try {
       const reactPlayerVideoHeight = playerRef.current?.getInternalPlayer().videoHeight
       const reactPlayerVideoWidth = playerRef.current?.getInternalPlayer().videoWidth
+
+      const reactPlayerClientHeight = playerRef.current?.getInternalPlayer().getBoundingClientRect().height
+      const reactPlayerClientWidth = playerRef.current?.getInternalPlayer().getBoundingClientRect().width
+
       setVideoHeight(reactPlayerVideoHeight)
       setVideoWidth(reactPlayerVideoWidth)
-
-      const { width: svgClientWidth, height: svgClientHeight } = interactionLayerSVG.current?.getBoundingClientRect()
-      setClientWidth(svgClientWidth)
+      setClientWidth(reactPlayerClientWidth)
 
       const target = {
-        clientHeight: svgClientHeight,
-        clientWidth: svgClientWidth,
+        clientHeight: reactPlayerClientHeight,
+        clientWidth: reactPlayerClientWidth,
         naturalHeight: reactPlayerVideoHeight,
         naturalWidth: reactPlayerVideoWidth
       }
@@ -71,6 +75,8 @@ function SingleVideoViewerContainer({
     }
   }
 
+  const enableDrawing = loadingState === asyncStates.success && enableInteractionLayer
+
   /* ==================== SingleVideoViewer react-player ==================== */
 
   const handleVideoProgress = reactPlayerState => {
@@ -137,20 +143,19 @@ function SingleVideoViewerContainer({
               playerRef={playerRef}
               url={videoSrc}
             />
-            {/* Drawing Layer */}
-            <DrawingLayer>
-              <Box overflow='hidden'>
-                <SVGContext.Provider value={{ canvas }}>
-                  <svg
-                    ref={interactionLayerSVG}
-                    focusable
-                    onKeyDown={onKeyDown}
-                    tabIndex={0}
-                    viewBox={`0 0 ${videoWidth} ${videoHeight}`}
-                    xmlns='http://www.w3.org/2000/svg'
-                  >
-                    <g ref={transformLayer} transform=''>
-                      {enableInteractionLayer && (
+            {enableDrawing && (
+              <DrawingLayer>
+                <Box overflow='hidden'>
+                  <SVGContext.Provider value={{ canvas }}>
+                    <svg
+                      ref={interactionLayerSVG}
+                      focusable
+                      onKeyDown={onKeyDown}
+                      tabIndex={0}
+                      viewBox={`0 0 ${videoWidth} ${videoHeight}`}
+                      xmlns='http://www.w3.org/2000/svg'
+                    >
+                      <g ref={transformLayer} transform=''>
                         <InteractionLayer
                           scale={interactionLayerScale}
                           duration={duration}
@@ -158,12 +163,12 @@ function SingleVideoViewerContainer({
                           played={timeStamp}
                           width={videoWidth}
                         />
-                      )}
-                    </g>
-                  </svg>
-                </SVGContext.Provider>
-              </Box>
-            </DrawingLayer>
+                      </g>
+                    </svg>
+                  </SVGContext.Provider>
+                </Box>
+              </DrawingLayer>
+            )}
           </SubjectContainer>
           )
         : (

From fec8ad305506ea6df330a77da607ca9f520ea842 Mon Sep 17 00:00:00 2001
From: Delilah Clement <delilahclement@gmail.com>
Date: Thu, 15 Sep 2022 15:17:47 -0500
Subject: [PATCH 12/34] Remove FormattedTime and defaultProps

---
 .../SingleVideoViewerContainer.js             |  2 +-
 .../VideoController/VideoController.js        | 52 ++++++++-----------
 .../components/FormattedTime/FormattedTime.js | 18 -------
 .../components/FormattedTime/index.js         |  1 -
 .../components/Slider/Slider.js               | 19 +++----
 5 files changed, 31 insertions(+), 61 deletions(-)
 delete mode 100644 packages/lib-classifier/src/components/Classifier/components/SubjectViewer/components/VideoController/components/FormattedTime/FormattedTime.js
 delete mode 100644 packages/lib-classifier/src/components/Classifier/components/SubjectViewer/components/VideoController/components/FormattedTime/index.js

diff --git a/packages/lib-classifier/src/components/Classifier/components/SubjectViewer/components/SingleVideoViewer/SingleVideoViewerContainer.js b/packages/lib-classifier/src/components/Classifier/components/SubjectViewer/components/SingleVideoViewer/SingleVideoViewerContainer.js
index 6ced771b22..4dbdce201a 100644
--- a/packages/lib-classifier/src/components/Classifier/components/SubjectViewer/components/SingleVideoViewer/SingleVideoViewerContainer.js
+++ b/packages/lib-classifier/src/components/Classifier/components/SubjectViewer/components/SingleVideoViewer/SingleVideoViewerContainer.js
@@ -176,7 +176,7 @@ function SingleVideoViewerContainer({
           )}
       <VideoController
         isPlaying={isPlaying}
-        played={timeStamp}
+        timeStamp={timeStamp}
         playbackRate={playbackRate}
         duration={duration}
         onPlayPause={handlePlayPause}
diff --git a/packages/lib-classifier/src/components/Classifier/components/SubjectViewer/components/VideoController/VideoController.js b/packages/lib-classifier/src/components/Classifier/components/SubjectViewer/components/VideoController/VideoController.js
index 92690a10f4..5be831301c 100644
--- a/packages/lib-classifier/src/components/Classifier/components/SubjectViewer/components/VideoController/VideoController.js
+++ b/packages/lib-classifier/src/components/Classifier/components/SubjectViewer/components/VideoController/VideoController.js
@@ -3,8 +3,7 @@ import PropTypes from 'prop-types'
 import { Box, Button, Select, ThemeContext } from 'grommet'
 import { CirclePlay, PauseFill } from 'grommet-icons'
 import { useTranslation } from 'react-i18next'
-
-import FormattedTime from './components/FormattedTime/FormattedTime'
+import formatTimeStamp from '@helpers/formatTimeStamp'
 import Slider from './components/Slider/Slider'
 
 const customSelectTheme = {
@@ -19,15 +18,15 @@ const customSelectTheme = {
 }
 
 const VideoController = ({
-  isPlaying,
-  onPlayPause,
-  onSpeedChange,
-  played,
-  playbackRate,
-  duration,
-  onSliderMouseUp,
-  onSliderMouseDown,
-  onSliderChange
+  duration = 0,
+  isPlaying = false,
+  onPlayPause = () => true,
+  onSpeedChange = () => true,
+  onSliderChange = () => true,
+  onSliderMouseDown = () => true,
+  onSliderMouseUp = () => true,
+  playbackRate = 1,
+  timeStamp = 0
 }) => {
   const { t } = useTranslation('components')
   const playPauseLabel = isPlaying
@@ -43,7 +42,7 @@ const VideoController = ({
     >
       <Box pad={{ horizontal: 'xsmall', top: 'xsmall' }}>
         <Slider
-          played={played}
+          timeStamp={timeStamp}
           onMouseUp={onSliderMouseUp}
           onMouseDown={onSliderMouseDown}
           onChange={onSliderChange}
@@ -62,9 +61,13 @@ const VideoController = ({
           </Box>
 
           <Box direction='row' alignSelf='center'>
-            <FormattedTime displayTime={played * duration} />
+            <time dateTime={`P${Math.round(timeStamp * duration)}S`}>
+              {formatTimeStamp(timeStamp * duration)}
+            </time>
             {' / '}
-            <FormattedTime displayTime={duration} />
+            <time dateTime={`P${Math.round(duration)}S`}>
+              {formatTimeStamp(duration)}
+            </time>
           </Box>
         </Box>
 
@@ -85,26 +88,15 @@ const VideoController = ({
 }
 
 VideoController.propTypes = {
-  isPlaying: PropTypes.bool,
-  played: PropTypes.number,
-  playbackRate: PropTypes.number,
   duration: PropTypes.number,
+  isPlaying: PropTypes.bool,
   onPlayPause: PropTypes.func,
   onSpeedChange: PropTypes.func,
-  onSliderMouseUp: PropTypes.func,
   onSliderMouseDown: PropTypes.func,
-  onSliderChange: PropTypes.func
-}
-VideoController.defaultProps = {
-  isPlaying: false,
-  played: 0,
-  playbackRate: 1,
-  duration: 0,
-  onPlayPause: () => {},
-  onSpeedChange: () => {},
-  onSliderMouseUp: () => {},
-  onSliderMouseDown: () => {},
-  onSliderChange: () => {}
+  onSliderMouseUp: PropTypes.func,
+  onSliderChange: PropTypes.func,
+  playbackRate: PropTypes.number,
+  timeStamp: PropTypes.number
 }
 
 export default VideoController
diff --git a/packages/lib-classifier/src/components/Classifier/components/SubjectViewer/components/VideoController/components/FormattedTime/FormattedTime.js b/packages/lib-classifier/src/components/Classifier/components/SubjectViewer/components/VideoController/components/FormattedTime/FormattedTime.js
deleted file mode 100644
index b426e8db03..0000000000
--- a/packages/lib-classifier/src/components/Classifier/components/SubjectViewer/components/VideoController/components/FormattedTime/FormattedTime.js
+++ /dev/null
@@ -1,18 +0,0 @@
-import React from 'react'
-import PropTypes from 'prop-types'
-import formatTimeStamp from '@helpers/formatTimeStamp'
-
-const FormattedTime = ({ displayTime }) => (
-  <time dateTime={`P${Math.round(displayTime)}S`}>
-    {formatTimeStamp(displayTime)}
-  </time>
-)
-
-FormattedTime.propTypes = {
-  displayTime: PropTypes.number
-}
-FormattedTime.defaultProps = {
-  displayTime: 0
-}
-
-export default FormattedTime
diff --git a/packages/lib-classifier/src/components/Classifier/components/SubjectViewer/components/VideoController/components/FormattedTime/index.js b/packages/lib-classifier/src/components/Classifier/components/SubjectViewer/components/VideoController/components/FormattedTime/index.js
deleted file mode 100644
index 75263666e7..0000000000
--- a/packages/lib-classifier/src/components/Classifier/components/SubjectViewer/components/VideoController/components/FormattedTime/index.js
+++ /dev/null
@@ -1 +0,0 @@
-export { default } from './FormattedTime'
diff --git a/packages/lib-classifier/src/components/Classifier/components/SubjectViewer/components/VideoController/components/Slider/Slider.js b/packages/lib-classifier/src/components/Classifier/components/SubjectViewer/components/VideoController/components/Slider/Slider.js
index e21ef36720..8e5155f191 100644
--- a/packages/lib-classifier/src/components/Classifier/components/SubjectViewer/components/VideoController/components/Slider/Slider.js
+++ b/packages/lib-classifier/src/components/Classifier/components/SubjectViewer/components/VideoController/components/Slider/Slider.js
@@ -11,7 +11,7 @@ const customThemeRangeInput = {
     track: {
       color: 'accent-1',
       height: '6px',
-      extend: () => `border-radius: 10px`,
+      extend: () => 'border-radius: 10px',
       lower: {
         color: '#F0B200'
       },
@@ -25,7 +25,12 @@ const customThemeRangeInput = {
   }
 }
 
-const Slider = ({ played, onMouseUp, onMouseDown, onChange }) => {
+const Slider = ({
+  timeStamp = 0,
+  onMouseUp = () => true,
+  onMouseDown = () => true,
+  onChange = () => true
+}) => {
   const { t } = useTranslation('components')
   return (
     <Grommet theme={customThemeRangeInput}>
@@ -35,7 +40,7 @@ const Slider = ({ played, onMouseUp, onMouseDown, onChange }) => {
           min={0}
           max={1}
           step={0.0001}
-          value={played}
+          value={timeStamp}
           onMouseUp={onMouseUp}
           onMouseDown={onMouseDown}
           onChange={onChange}
@@ -47,18 +52,10 @@ const Slider = ({ played, onMouseUp, onMouseDown, onChange }) => {
 }
 
 Slider.propTypes = {
-  className: PropTypes.string,
   onMouseUp: PropTypes.func,
   onMouseDown: PropTypes.func,
   onChange: PropTypes.func,
   played: PropTypes.number
 }
-Slider.defaultProps = {
-  className: '',
-  onMouseUp: () => {},
-  onMouseDown: () => {},
-  onChange: () => {},
-  played: 0
-}
 
 export default Slider

From c5f371a5fbf9d66d480f6c098b56d9e727524793 Mon Sep 17 00:00:00 2001
From: Delilah Clement <delilahclement@gmail.com>
Date: Thu, 15 Sep 2022 15:24:08 -0500
Subject: [PATCH 13/34] combine Slider component into VideoController file

---
 .../VideoController/VideoController.js        | 46 +++++++++++---
 .../components/Slider/Slider.js               | 61 -------------------
 .../components/Slider/index.js                |  1 -
 3 files changed, 38 insertions(+), 70 deletions(-)
 delete mode 100644 packages/lib-classifier/src/components/Classifier/components/SubjectViewer/components/VideoController/components/Slider/Slider.js
 delete mode 100644 packages/lib-classifier/src/components/Classifier/components/SubjectViewer/components/VideoController/components/Slider/index.js

diff --git a/packages/lib-classifier/src/components/Classifier/components/SubjectViewer/components/VideoController/VideoController.js b/packages/lib-classifier/src/components/Classifier/components/SubjectViewer/components/VideoController/VideoController.js
index 5be831301c..89e46a089c 100644
--- a/packages/lib-classifier/src/components/Classifier/components/SubjectViewer/components/VideoController/VideoController.js
+++ b/packages/lib-classifier/src/components/Classifier/components/SubjectViewer/components/VideoController/VideoController.js
@@ -1,10 +1,9 @@
 import React from 'react'
 import PropTypes from 'prop-types'
-import { Box, Button, Select, ThemeContext } from 'grommet'
+import { Box, Button, Grommet, RangeInput, Select, ThemeContext } from 'grommet'
 import { CirclePlay, PauseFill } from 'grommet-icons'
 import { useTranslation } from 'react-i18next'
 import formatTimeStamp from '@helpers/formatTimeStamp'
-import Slider from './components/Slider/Slider'
 
 const customSelectTheme = {
   textInput: {
@@ -17,6 +16,28 @@ const customSelectTheme = {
   }
 }
 
+const customThemeRangeInput = {
+  global: {
+    spacing: '16px'
+  },
+  rangeInput: {
+    track: {
+      color: 'accent-1',
+      height: '6px',
+      extend: () => 'border-radius: 10px',
+      lower: {
+        color: '#F0B200'
+      },
+      upper: {
+        color: 'dark-4'
+      }
+    },
+    thumb: {
+      color: '#F0B200'
+    }
+  }
+}
+
 const VideoController = ({
   duration = 0,
   isPlaying = false,
@@ -41,12 +62,21 @@ const VideoController = ({
       }}
     >
       <Box pad={{ horizontal: 'xsmall', top: 'xsmall' }}>
-        <Slider
-          timeStamp={timeStamp}
-          onMouseUp={onSliderMouseUp}
-          onMouseDown={onSliderMouseDown}
-          onChange={onSliderChange}
-        />
+        <Grommet theme={customThemeRangeInput}>
+          <Box>
+            <RangeInput
+              a11yTitle={t('SubjectViewer.VideoController.scrubber')}
+              min={0}
+              max={1}
+              step={0.0001}
+              value={timeStamp}
+              onMouseUp={onSliderMouseUp}
+              onMouseDown={onSliderMouseDown}
+              onChange={onSliderChange}
+              onInput={onSliderChange}
+            />
+          </Box>
+        </Grommet>
       </Box>
 
       <Box direction='row' justify='between'>
diff --git a/packages/lib-classifier/src/components/Classifier/components/SubjectViewer/components/VideoController/components/Slider/Slider.js b/packages/lib-classifier/src/components/Classifier/components/SubjectViewer/components/VideoController/components/Slider/Slider.js
deleted file mode 100644
index 8e5155f191..0000000000
--- a/packages/lib-classifier/src/components/Classifier/components/SubjectViewer/components/VideoController/components/Slider/Slider.js
+++ /dev/null
@@ -1,61 +0,0 @@
-import React from 'react'
-import PropTypes from 'prop-types'
-import { Grommet, Box, RangeInput } from 'grommet'
-import { useTranslation } from 'react-i18next'
-
-const customThemeRangeInput = {
-  global: {
-    spacing: '16px'
-  },
-  rangeInput: {
-    track: {
-      color: 'accent-1',
-      height: '6px',
-      extend: () => 'border-radius: 10px',
-      lower: {
-        color: '#F0B200'
-      },
-      upper: {
-        color: 'dark-4'
-      }
-    },
-    thumb: {
-      color: '#F0B200'
-    }
-  }
-}
-
-const Slider = ({
-  timeStamp = 0,
-  onMouseUp = () => true,
-  onMouseDown = () => true,
-  onChange = () => true
-}) => {
-  const { t } = useTranslation('components')
-  return (
-    <Grommet theme={customThemeRangeInput}>
-      <Box>
-        <RangeInput
-          a11yTitle={t('SubjectViewer.VideoController.scrubber')}
-          min={0}
-          max={1}
-          step={0.0001}
-          value={timeStamp}
-          onMouseUp={onMouseUp}
-          onMouseDown={onMouseDown}
-          onChange={onChange}
-          onInput={onChange}
-        />
-      </Box>
-    </Grommet>
-  )
-}
-
-Slider.propTypes = {
-  onMouseUp: PropTypes.func,
-  onMouseDown: PropTypes.func,
-  onChange: PropTypes.func,
-  played: PropTypes.number
-}
-
-export default Slider
diff --git a/packages/lib-classifier/src/components/Classifier/components/SubjectViewer/components/VideoController/components/Slider/index.js b/packages/lib-classifier/src/components/Classifier/components/SubjectViewer/components/VideoController/components/Slider/index.js
deleted file mode 100644
index 19a6da94ba..0000000000
--- a/packages/lib-classifier/src/components/Classifier/components/SubjectViewer/components/VideoController/components/Slider/index.js
+++ /dev/null
@@ -1 +0,0 @@
-export { default } from './Slider'

From 610c0732f92cded31d3ec2450ea913b407940208 Mon Sep 17 00:00:00 2001
From: Delilah Clement <delilahclement@gmail.com>
Date: Thu, 15 Sep 2022 20:19:15 -0500
Subject: [PATCH 14/34] Working toward imporoving VideoController performance

---
 .../components/SingleVideoViewer/README.md    |  3 +-
 .../SingleVideoViewer/SingleVideoViewer.js    | 14 +++---
 .../SingleVideoViewerContainer.js             | 39 ++++++---------
 .../components/VideoController/README.md      | 22 +++++++++
 .../VideoController/VideoController.js        | 48 +++++++++----------
 .../components}/VideoController/index.js      |  0
 .../components/VideoController/README.md      |  0
 .../src/helpers/formatTimeStamp/README.md     |  4 +-
 .../formatTimeStamp/formatTimeStamp.js        | 21 ++++----
 9 files changed, 81 insertions(+), 70 deletions(-)
 create mode 100644 packages/lib-classifier/src/components/Classifier/components/SubjectViewer/components/SingleVideoViewer/components/VideoController/README.md
 rename packages/lib-classifier/src/components/Classifier/components/SubjectViewer/components/{ => SingleVideoViewer/components}/VideoController/VideoController.js (76%)
 rename packages/lib-classifier/src/components/Classifier/components/SubjectViewer/components/{ => SingleVideoViewer/components}/VideoController/index.js (100%)
 delete mode 100644 packages/lib-classifier/src/components/Classifier/components/SubjectViewer/components/VideoController/README.md

diff --git a/packages/lib-classifier/src/components/Classifier/components/SubjectViewer/components/SingleVideoViewer/README.md b/packages/lib-classifier/src/components/Classifier/components/SubjectViewer/components/SingleVideoViewer/README.md
index d146b6aa85..a4798883d3 100644
--- a/packages/lib-classifier/src/components/Classifier/components/SubjectViewer/components/SingleVideoViewer/README.md
+++ b/packages/lib-classifier/src/components/Classifier/components/SubjectViewer/components/SingleVideoViewer/README.md
@@ -25,9 +25,8 @@ 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.
 - `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.
 
diff --git a/packages/lib-classifier/src/components/Classifier/components/SubjectViewer/components/SingleVideoViewer/SingleVideoViewer.js b/packages/lib-classifier/src/components/Classifier/components/SubjectViewer/components/SingleVideoViewer/SingleVideoViewer.js
index fe1e7438c1..0b2dafca68 100644
--- a/packages/lib-classifier/src/components/Classifier/components/SubjectViewer/components/SingleVideoViewer/SingleVideoViewer.js
+++ b/packages/lib-classifier/src/components/Classifier/components/SubjectViewer/components/SingleVideoViewer/SingleVideoViewer.js
@@ -20,19 +20,19 @@ const Container = styled.div`
 const SingleVideoViewer = ({
   url = '',
   isPlaying = false,
-  onDuration = () => {},
-  onEnded = () => {},
-  onError = () => {},
-  onProgress = () => {},
-  onReactPlayerReady = () => {},
+  onDuration = () => true,
+  onEnded = () => true,
+  onError = () => true,
+  onProgress = () => true,
+  onReactPlayerReady = () => true,
   playbackRate = 1,
-  progressInterval = 100,
+  progressInterval = 100, // milliseconds
   playerRef = null
 }) => {
   return (
     <Container>
       <ReactPlayer
-        controls={false}
+        controls
         height='100%'
         onDuration={onDuration}
         onEnded={onEnded}
diff --git a/packages/lib-classifier/src/components/Classifier/components/SubjectViewer/components/SingleVideoViewer/SingleVideoViewerContainer.js b/packages/lib-classifier/src/components/Classifier/components/SubjectViewer/components/SingleVideoViewer/SingleVideoViewerContainer.js
index 4dbdce201a..31fef20542 100644
--- a/packages/lib-classifier/src/components/Classifier/components/SubjectViewer/components/SingleVideoViewer/SingleVideoViewerContainer.js
+++ b/packages/lib-classifier/src/components/Classifier/components/SubjectViewer/components/SingleVideoViewer/SingleVideoViewerContainer.js
@@ -10,8 +10,7 @@ import SVGContext from '@plugins/drawingTools/shared/SVGContext'
 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;
@@ -32,10 +31,10 @@ function SingleVideoViewerContainer({
   onKeyDown = () => true,
   subject
 }) {
+  console.log('** render **')
   const [clientWidth, setClientWidth] = useState(0)
   const [duration, setDuration] = useState(0)
   const [isPlaying, setIsPlaying] = useState(false)
-  const [isSeeking, setIsSeeking] = useState(false)
   const [playbackRate, setPlaybackRate] = useState(1)
   const [timeStamp, setTimeStamp] = useState(0)
   const [videoHeight, setVideoHeight] = useState(0)
@@ -80,12 +79,12 @@ function SingleVideoViewerContainer({
   /* ==================== SingleVideoViewer react-player ==================== */
 
   const handleVideoProgress = reactPlayerState => {
+    console.log('on progress')
+    // played is the percentage of video played as determined by react-player (0 to 1)
     const { played } = reactPlayerState
-    const fixedNumber = getFixedNumber(played, 5)
-    // TO DO: Why wouldn't you set timestamp when seeking?
-    if (!isSeeking) {
-      setTimeStamp(fixedNumber)
-    }
+    // fixedNumber is played fixed to 3 decimal places (0 to 1)
+    const fixedNumber = parseFloat(played.toFixed(3))
+    // setTimeStamp(fixedNumber) // This function causes this component to lag, is there something to memoize?
   }
 
   const handleVideoDuration = duration => {
@@ -105,19 +104,11 @@ function SingleVideoViewerContainer({
     setPlaybackRate(rate)
   }
 
-  const handleSliderMouseUp = () => {
-    setIsSeeking(false)
-  }
-
-  const handleSliderMouseDown = () => {
-    setIsPlaying(false)
-    setIsSeeking(true)
-  }
-
   /* When VideoController > Slider is clicked or scrubbed */
   const handleSliderChange = e => {
-    const played = getFixedNumber(e.target.value, 5)
-    playerRef?.current.seekTo(played)
+    console.log('slider change')
+    const newTimeStamp = e.target.value // This is in seconds, not percentage
+    playerRef?.current.seekTo(newTimeStamp, 'seconds')
   }
 
   const handlePlayerError = (error) => {
@@ -175,15 +166,13 @@ function SingleVideoViewerContainer({
           <Box>{t('SubjectViewer.SingleVideoViewerContainer.error')}</Box>
           )}
       <VideoController
-        isPlaying={isPlaying}
-        timeStamp={timeStamp}
-        playbackRate={playbackRate}
         duration={duration}
+        isPlaying={isPlaying}
         onPlayPause={handlePlayPause}
-        onSpeedChange={handleSpeedChange}
-        onSliderMouseUp={handleSliderMouseUp}
-        onSliderMouseDown={handleSliderMouseDown}
         onSliderChange={handleSliderChange}
+        onSpeedChange={handleSpeedChange}
+        playbackRate={playbackRate}
+        timeStamp={timeStamp}
       />
     </>
   )
diff --git a/packages/lib-classifier/src/components/Classifier/components/SubjectViewer/components/SingleVideoViewer/components/VideoController/README.md b/packages/lib-classifier/src/components/Classifier/components/SubjectViewer/components/SingleVideoViewer/components/VideoController/README.md
new file mode 100644
index 0000000000..f6620ffce0
--- /dev/null
+++ b/packages/lib-classifier/src/components/Classifier/components/SubjectViewer/components/SingleVideoViewer/components/VideoController/README.md
@@ -0,0 +1,22 @@
+# 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.
+
+## Features
+
+- Play
+- Pause
+- Display timestamp
+- Scrubbing
+- Change playback rate
+
+## Props
+- `duration`: (number) Duration of video subject in seconds.
+- `isPlaying`: (boolean) State variable in SingleVideoViewerContainer determines if video player is playing.
+- `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.
+- `onSliderMouseDown`: (func) Function passed from SingleVideoViewerContainer and called during mousedown event on Slider input.
+- `onSliderMouseUp`: (func) Function passed from SingleVideoViewerContainer and called during mouseup event on Slide input.
+- `playbackRate`: (number) From 0 to 1.
+- `timeStamp`: (number) Measured from 0 to 1. The percentage of the video subject played.
diff --git a/packages/lib-classifier/src/components/Classifier/components/SubjectViewer/components/VideoController/VideoController.js b/packages/lib-classifier/src/components/Classifier/components/SubjectViewer/components/SingleVideoViewer/components/VideoController/VideoController.js
similarity index 76%
rename from packages/lib-classifier/src/components/Classifier/components/SubjectViewer/components/VideoController/VideoController.js
rename to packages/lib-classifier/src/components/Classifier/components/SubjectViewer/components/SingleVideoViewer/components/VideoController/VideoController.js
index 89e46a089c..af242d6c32 100644
--- a/packages/lib-classifier/src/components/Classifier/components/SubjectViewer/components/VideoController/VideoController.js
+++ b/packages/lib-classifier/src/components/Classifier/components/SubjectViewer/components/SingleVideoViewer/components/VideoController/VideoController.js
@@ -1,4 +1,4 @@
-import React from 'react'
+import React, { useMemo } from 'react'
 import PropTypes from 'prop-types'
 import { Box, Button, Grommet, RangeInput, Select, ThemeContext } from 'grommet'
 import { CirclePlay, PauseFill } from 'grommet-icons'
@@ -44,15 +44,17 @@ const VideoController = ({
   onPlayPause = () => true,
   onSpeedChange = () => true,
   onSliderChange = () => true,
-  onSliderMouseDown = () => true,
-  onSliderMouseUp = () => true,
   playbackRate = 1,
-  timeStamp = 0
+  timeStamp = 0 // A percentage between 0 and 1
 }) => {
   const { t } = useTranslation('components')
-  const playPauseLabel = isPlaying
-    ? 'SubjectViewer.VideoController.pause'
-    : 'SubjectViewer.VideoController.play'
+  const playPauseLabel = isPlaying ? 'SubjectViewer.VideoController.pause' : 'SubjectViewer.VideoController.play'
+
+  const sliderValue = timeStamp * duration
+
+  const displayedDuration = useMemo(() => {
+    return formatTimeStamp(duration)
+  }, [duration])
 
   return (
     <Box
@@ -61,24 +63,22 @@ const VideoController = ({
         light: 'light-3'
       }}
     >
+
+      {/* Slider */}
       <Box pad={{ horizontal: 'xsmall', top: 'xsmall' }}>
         <Grommet theme={customThemeRangeInput}>
-          <Box>
-            <RangeInput
-              a11yTitle={t('SubjectViewer.VideoController.scrubber')}
-              min={0}
-              max={1}
-              step={0.0001}
-              value={timeStamp}
-              onMouseUp={onSliderMouseUp}
-              onMouseDown={onSliderMouseDown}
-              onChange={onSliderChange}
-              onInput={onSliderChange}
-            />
-          </Box>
+          <RangeInput
+            a11yTitle={t('SubjectViewer.VideoController.scrubber')}
+            min={0}
+            max={duration}
+            step={0.1}
+            value={sliderValue}
+            onChange={onSliderChange}
+          />
         </Grommet>
       </Box>
 
+      {/* Play/Pause */}
       <Box direction='row' justify='between'>
         <Box direction='row'>
           <Box alignSelf='center' pad={{ horizontal: 'small' }}>
@@ -90,17 +90,19 @@ const VideoController = ({
             />
           </Box>
 
+          {/* Time */}
           <Box direction='row' alignSelf='center'>
-            <time dateTime={`P${Math.round(timeStamp * duration)}S`}>
+            <time dateTime={`P${Math.round(sliderValue)}S`}>
               {formatTimeStamp(timeStamp * duration)}
             </time>
             {' / '}
             <time dateTime={`P${Math.round(duration)}S`}>
-              {formatTimeStamp(duration)}
+              {displayedDuration}
             </time>
           </Box>
         </Box>
 
+        {/* Rate */}
         <Box direction='row' alignSelf='center' pad={{ right: 'small' }}>
           <ThemeContext.Extend value={customSelectTheme}>
             <Select
@@ -122,8 +124,6 @@ VideoController.propTypes = {
   isPlaying: PropTypes.bool,
   onPlayPause: PropTypes.func,
   onSpeedChange: PropTypes.func,
-  onSliderMouseDown: PropTypes.func,
-  onSliderMouseUp: PropTypes.func,
   onSliderChange: PropTypes.func,
   playbackRate: PropTypes.number,
   timeStamp: PropTypes.number
diff --git a/packages/lib-classifier/src/components/Classifier/components/SubjectViewer/components/VideoController/index.js b/packages/lib-classifier/src/components/Classifier/components/SubjectViewer/components/SingleVideoViewer/components/VideoController/index.js
similarity index 100%
rename from packages/lib-classifier/src/components/Classifier/components/SubjectViewer/components/VideoController/index.js
rename to packages/lib-classifier/src/components/Classifier/components/SubjectViewer/components/SingleVideoViewer/components/VideoController/index.js
diff --git a/packages/lib-classifier/src/components/Classifier/components/SubjectViewer/components/VideoController/README.md b/packages/lib-classifier/src/components/Classifier/components/SubjectViewer/components/VideoController/README.md
deleted file mode 100644
index e69de29bb2..0000000000
diff --git a/packages/lib-classifier/src/helpers/formatTimeStamp/README.md b/packages/lib-classifier/src/helpers/formatTimeStamp/README.md
index 94d423eabc..6643d0308a 100644
--- a/packages/lib-classifier/src/helpers/formatTimeStamp/README.md
+++ b/packages/lib-classifier/src/helpers/formatTimeStamp/README.md
@@ -2,7 +2,7 @@
 
 A helper function to convert a number to a string formatted as `mm:ss:ms` or `ss:ms`
 
-The Zooniverse video player has a slider who's values are 0.0 to 1.0. As a video plays, the handle will progress from 0.0 (start of the video) to 1.0 (end of the video). This function converts the decimal number to a human readable timestamp and is used in the video controller and sent as a property for temporal drawing tools.
+The Zooniverse video player has a slider who's percentage `timeStamp` values are 0.0 to 1.0. As a video plays, the slider input will progress from 0 (start of the video) to 1 (end of the video). This function converts the decimal number to a human readable timestamp. The returned value is used in the VideoController and sent to the store as a property for temporal drawing tools.
 
 ### accepts
 
@@ -16,4 +16,4 @@ E.g. `4.025` or `8.480`
 
 ### returns
 
-The function returns a string representing the current timestamp as `mm:ss:ms` or `ss:ms`
+The function returns a string representing the current timestamp as `mm:ss` or `hh:ss`.
diff --git a/packages/lib-classifier/src/helpers/formatTimeStamp/formatTimeStamp.js b/packages/lib-classifier/src/helpers/formatTimeStamp/formatTimeStamp.js
index b3d9d28f8a..7a048bcffd 100644
--- a/packages/lib-classifier/src/helpers/formatTimeStamp/formatTimeStamp.js
+++ b/packages/lib-classifier/src/helpers/formatTimeStamp/formatTimeStamp.js
@@ -1,17 +1,18 @@
 function formatTimeStamp(displayTime, duration) {
-  const currentVideoTime = duration ? displayTime * duration : displayTime
+  // timeStamp is in seconds
+  const timeStamp = duration ? displayTime * duration : displayTime
 
-  const pad = (string, digits) =>
-    ('0'.repeat(digits - 1) + string).slice(-digits)
+  let date
 
-  const date = new Date(currentVideoTime * 1000)
-  const mm = pad(date.getUTCMinutes(), 2)
-  const ss = pad(date.getUTCSeconds(), 2)
-  const ms = pad(date.getUTCMilliseconds(), 3)
-  if (mm > 0) {
-    return `${mm}:${ss}:${ms}`
+  if (timeStamp < 60) {
+    // timestamp is less than 1 minute (mm.ss)
+    date = new Date(timeStamp * 1000).toISOString().substring(14, 19)
+  } else if (timeStamp < 3600) {
+    // or timestamp is less than 1 hour (hh.mm)
+    date = new Date(timeStamp * 1000).toISOString().substring(11, 16)
   }
-  return `${ss}:${ms}`
+  const formattedTimeStamp = date.replace('.', ':')
+  return formattedTimeStamp
 }
 
 export default formatTimeStamp

From 249a3030f40980ce10c09daae3a8b9f98c332afe Mon Sep 17 00:00:00 2001
From: Delilah Clement <delilahclement@gmail.com>
Date: Fri, 16 Sep 2022 09:42:26 -0500
Subject: [PATCH 15/34] memoize ReactPlayer for slider performance

---
 .../SingleVideoViewer/SingleVideoViewer.js    |  4 +--
 .../SingleVideoViewerContainer.js             | 34 ++++++++++---------
 2 files changed, 19 insertions(+), 19 deletions(-)

diff --git a/packages/lib-classifier/src/components/Classifier/components/SubjectViewer/components/SingleVideoViewer/SingleVideoViewer.js b/packages/lib-classifier/src/components/Classifier/components/SubjectViewer/components/SingleVideoViewer/SingleVideoViewer.js
index 0b2dafca68..7ee18de3d3 100644
--- a/packages/lib-classifier/src/components/Classifier/components/SubjectViewer/components/SingleVideoViewer/SingleVideoViewer.js
+++ b/packages/lib-classifier/src/components/Classifier/components/SubjectViewer/components/SingleVideoViewer/SingleVideoViewer.js
@@ -26,7 +26,6 @@ const SingleVideoViewer = ({
   onProgress = () => true,
   onReactPlayerReady = () => true,
   playbackRate = 1,
-  progressInterval = 100, // milliseconds
   playerRef = null
 }) => {
   return (
@@ -41,7 +40,7 @@ const SingleVideoViewer = ({
         onProgress={onProgress}
         playing={isPlaying}
         playbackRate={playbackRate}
-        progressInterval={progressInterval}
+        progressInterval={100} // milliseconds
         ref={playerRef}
         width='100%'
         url={url}
@@ -55,7 +54,6 @@ SingleVideoViewer.propTypes = {
   url: PropTypes.string,
   isPlaying: PropTypes.bool,
   playbackRate: PropTypes.number,
-  progressInterval: PropTypes.number,
   onProgress: PropTypes.func,
   onDuration: PropTypes.func,
   onEnded: PropTypes.func
diff --git a/packages/lib-classifier/src/components/Classifier/components/SubjectViewer/components/SingleVideoViewer/SingleVideoViewerContainer.js b/packages/lib-classifier/src/components/Classifier/components/SubjectViewer/components/SingleVideoViewer/SingleVideoViewerContainer.js
index 31fef20542..e5157022e8 100644
--- a/packages/lib-classifier/src/components/Classifier/components/SubjectViewer/components/SingleVideoViewer/SingleVideoViewerContainer.js
+++ b/packages/lib-classifier/src/components/Classifier/components/SubjectViewer/components/SingleVideoViewer/SingleVideoViewerContainer.js
@@ -1,7 +1,7 @@
 import PropTypes from 'prop-types'
 import styled from 'styled-components'
 import { Box } from 'grommet'
-import React, { useState, useRef } from 'react'
+import React, { useMemo, useState, useRef } from 'react'
 import { useTranslation } from 'react-i18next'
 import asyncStates from '@zooniverse/async-states'
 
@@ -31,7 +31,6 @@ function SingleVideoViewerContainer({
   onKeyDown = () => true,
   subject
 }) {
-  console.log('** render **')
   const [clientWidth, setClientWidth] = useState(0)
   const [duration, setDuration] = useState(0)
   const [isPlaying, setIsPlaying] = useState(false)
@@ -79,12 +78,10 @@ function SingleVideoViewerContainer({
   /* ==================== SingleVideoViewer react-player ==================== */
 
   const handleVideoProgress = reactPlayerState => {
-    console.log('on progress')
     // played is the percentage of video played as determined by react-player (0 to 1)
     const { played } = reactPlayerState
-    // fixedNumber is played fixed to 3 decimal places (0 to 1)
     const fixedNumber = parseFloat(played.toFixed(3))
-    // setTimeStamp(fixedNumber) // This function causes this component to lag, is there something to memoize?
+    setTimeStamp(fixedNumber)
   }
 
   const handleVideoDuration = duration => {
@@ -118,22 +115,27 @@ function SingleVideoViewerContainer({
   const canvas = transformLayer?.current
   const interactionLayerScale = clientWidth / videoWidth
 
+  /* Memoized so onProgress() and setTimeStamp() don't trigger each other */
+  const memoizedViewer = useMemo(() => (
+    <SingleVideoViewer
+      isPlaying={isPlaying}
+      onDuration={handleVideoDuration}
+      onEnded={handleVideoEnded}
+      onError={handlePlayerError}
+      onReactPlayerReady={onReactPlayerReady}
+      onProgress={handleVideoProgress}
+      playbackRate={playbackRate}
+      playerRef={playerRef}
+      url={videoSrc}
+    />
+  ), [isPlaying, playbackRate, videoSrc])
+
   return (
     <>
       {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'>

From 96f36b8220c981b7db0c70934f230d83aaaf884d Mon Sep 17 00:00:00 2001
From: Delilah Clement <delilahclement@gmail.com>
Date: Fri, 16 Sep 2022 10:11:51 -0500
Subject: [PATCH 16/34] clean up formatTimeStamp and its unit tests

---
 .../SingleVideoViewer/SingleVideoViewer.js    |  2 +-
 .../src/helpers/formatTimeStamp/README.md     | 10 +++----
 .../formatTimeStamp/formatTimeStamp.js        | 18 ++++++-------
 .../formatTimeStamp/formatTimeStamp.spec.js   | 26 +++++++++++--------
 4 files changed, 30 insertions(+), 26 deletions(-)

diff --git a/packages/lib-classifier/src/components/Classifier/components/SubjectViewer/components/SingleVideoViewer/SingleVideoViewer.js b/packages/lib-classifier/src/components/Classifier/components/SubjectViewer/components/SingleVideoViewer/SingleVideoViewer.js
index 7ee18de3d3..4cbe9efe2a 100644
--- a/packages/lib-classifier/src/components/Classifier/components/SubjectViewer/components/SingleVideoViewer/SingleVideoViewer.js
+++ b/packages/lib-classifier/src/components/Classifier/components/SubjectViewer/components/SingleVideoViewer/SingleVideoViewer.js
@@ -31,7 +31,7 @@ const SingleVideoViewer = ({
   return (
     <Container>
       <ReactPlayer
-        controls
+        controls={false}
         height='100%'
         onDuration={onDuration}
         onEnded={onEnded}
diff --git a/packages/lib-classifier/src/helpers/formatTimeStamp/README.md b/packages/lib-classifier/src/helpers/formatTimeStamp/README.md
index 6643d0308a..cd4f751a71 100644
--- a/packages/lib-classifier/src/helpers/formatTimeStamp/README.md
+++ b/packages/lib-classifier/src/helpers/formatTimeStamp/README.md
@@ -1,19 +1,19 @@
 # formatTimeStamp
 
-A helper function to convert a number to a string formatted as `mm:ss:ms` or `ss:ms`
+A helper function to convert a number in seconds to a human readable string `mm:ss`. We're assuming the timestamp of a video subject is always less than 1 hour.
 
-The Zooniverse video player has a slider who's percentage `timeStamp` values are 0.0 to 1.0. As a video plays, the slider input will progress from 0 (start of the video) to 1 (end of the video). This function converts the decimal number to a human readable timestamp. The returned value is used in the VideoController and sent to the store as a property for temporal drawing tools.
+The Zooniverse video player has a slider who's percentage `timeStamp` values are 0 to 1. As a video subject plays, the slider input will progress from 0 (start of the video) to 1 (end of the video). This function converts the decimal number to a human readable timestamp. The returned value is used in the VideoController and sent to the store as a property for temporal drawing tools.
 
 ### accepts
 
-**displayTime:** Required. Type: number. Number must be between 0 and 1 having 3 decimal places. This represents the current position (time) on the video slider.
+**displayTime:** Required. Type: number. Number must be between 0 and 1. This represents the current position (timeStamp) on the video slider.
 
 E.g. `0.287` or `0.962`
 
-**duration:** Optional. Type: number. This is the total length of the video. This must be a number with 3 decimal places.
+**duration:** Optional. Type: number. This is the total length of the video. This must be a number.
 
 E.g. `4.025` or `8.480`
 
 ### returns
 
-The function returns a string representing the current timestamp as `mm:ss` or `hh:ss`.
+The function returns a string representing the current timestamp as `mm:ss`.
diff --git a/packages/lib-classifier/src/helpers/formatTimeStamp/formatTimeStamp.js b/packages/lib-classifier/src/helpers/formatTimeStamp/formatTimeStamp.js
index 7a048bcffd..e13eed7aaf 100644
--- a/packages/lib-classifier/src/helpers/formatTimeStamp/formatTimeStamp.js
+++ b/packages/lib-classifier/src/helpers/formatTimeStamp/formatTimeStamp.js
@@ -2,17 +2,17 @@ function formatTimeStamp(displayTime, duration) {
   // timeStamp is in seconds
   const timeStamp = duration ? displayTime * duration : displayTime
 
-  let date
+  if (timeStamp < 1) {
+    return '0:00'
+  }
 
-  if (timeStamp < 60) {
-    // timestamp is less than 1 minute (mm.ss)
-    date = new Date(timeStamp * 1000).toISOString().substring(14, 19)
-  } else if (timeStamp < 3600) {
-    // or timestamp is less than 1 hour (hh.mm)
-    date = new Date(timeStamp * 1000).toISOString().substring(11, 16)
+  let date
+  date = new Date(timeStamp * 1000).toISOString().substring(14, 19)
+  date.replace('.', ':')
+  if (date.slice(0, 2) === '00') {
+    date = date.slice(1)
   }
-  const formattedTimeStamp = date.replace('.', ':')
-  return formattedTimeStamp
+  return date
 }
 
 export default formatTimeStamp
diff --git a/packages/lib-classifier/src/helpers/formatTimeStamp/formatTimeStamp.spec.js b/packages/lib-classifier/src/helpers/formatTimeStamp/formatTimeStamp.spec.js
index 150aad3acd..9574a06c4e 100644
--- a/packages/lib-classifier/src/helpers/formatTimeStamp/formatTimeStamp.spec.js
+++ b/packages/lib-classifier/src/helpers/formatTimeStamp/formatTimeStamp.spec.js
@@ -2,21 +2,25 @@ import { expect } from 'chai'
 import formatTimeStamp from './formatTimeStamp'
 
 describe('Helpers > formatTimeStamp', function () {
-  it('should be a function', function () {
-    expect(formatTimeStamp).to.be.a('function')
-  })
-
-  describe('Valid output', function () {
-    it('should return 04:000', function () {
-      const timestamp1 = formatTimeStamp(0.5, 8)
+  describe('Input time greater than 1 second', function () {
+    it('should return time in seconds as a readable mm:ss timestamp', function () {
+      const timeStamp1 = formatTimeStamp(0.500, 20.000)
+      expect(timeStamp1).to.equal('0:10')
 
-      expect(timestamp1).to.equal('04:000')
+      const timeStamp2 = formatTimeStamp(0.500, 1200.000)
+      expect(timeStamp2).to.equal('10:00')
     })
 
-    it('should return 03:038', function () {
-      const timestamp1 = formatTimeStamp(0.7548, 4.025)
+    it('should remove double zeros from the mm indices', function () {
+      const timeStamp = formatTimeStamp(0.755, 4.025)
+      expect(timeStamp).to.equal('0:03')
+    })
+  })
 
-      expect(timestamp1).to.equal('03:038')
+  describe('Input time less than 1 second', function () {
+    it('should return 0:00', function () {
+      const timeStamp = formatTimeStamp(0.010, 20.000)
+      expect(timeStamp).to.equal('0:00')
     })
   })
 })

From 720cae4285117930e1c9695ffdc69ce04d581f4c Mon Sep 17 00:00:00 2001
From: Delilah Clement <delilahclement@gmail.com>
Date: Fri, 16 Sep 2022 10:26:50 -0500
Subject: [PATCH 17/34] getFixedNumber unit tests and docs

---
 .../SubjectViewer/helpers/getFixedNumber/README.md |  6 ++++--
 .../helpers/getFixedNumber/getFixedNumber.spec.js  | 14 ++++++++++++++
 2 files changed, 18 insertions(+), 2 deletions(-)
 create mode 100644 packages/lib-classifier/src/components/Classifier/components/SubjectViewer/helpers/getFixedNumber/getFixedNumber.spec.js

diff --git a/packages/lib-classifier/src/components/Classifier/components/SubjectViewer/helpers/getFixedNumber/README.md b/packages/lib-classifier/src/components/Classifier/components/SubjectViewer/helpers/getFixedNumber/README.md
index 87db273336..d900a26edd 100644
--- a/packages/lib-classifier/src/components/Classifier/components/SubjectViewer/helpers/getFixedNumber/README.md
+++ b/packages/lib-classifier/src/components/Classifier/components/SubjectViewer/helpers/getFixedNumber/README.md
@@ -1,7 +1,9 @@
 # getFixedNumber
 
-This function is used in SingleVideoViewerContainer. It takes two variables:
-- `number`: This is the `played` state variable in SingleVideoViewerContainer or InteractionLayer. The timestamp of a video subject.
+This function is used in SingleVideoViewerContainer. It's equivalent to `parseFloat(played.toFixed(3))`, but `toFixed()` is an unreliable rounding function.
+
+`getFixedNumber` takes two variables:
+- `number`: This is the timestamp value in SingleVideoViewerContainer or InteractionLayer.
 - `digits`: The number of decimal places to round to.
 
 It returns one number rounded to the number of decimal places defined by `digits`.
diff --git a/packages/lib-classifier/src/components/Classifier/components/SubjectViewer/helpers/getFixedNumber/getFixedNumber.spec.js b/packages/lib-classifier/src/components/Classifier/components/SubjectViewer/helpers/getFixedNumber/getFixedNumber.spec.js
new file mode 100644
index 0000000000..15a354e4e0
--- /dev/null
+++ b/packages/lib-classifier/src/components/Classifier/components/SubjectViewer/helpers/getFixedNumber/getFixedNumber.spec.js
@@ -0,0 +1,14 @@
+import getFixedNumber from './'
+
+describe.only('Helper > getFixedNumber', function () {
+  it('should round the input `number` to the `digits` decimal places', function () {
+    const test1 = getFixedNumber(0.12345678, 3)
+    expect(test1).to.equal(0.123)
+
+    const test2 = getFixedNumber(7463785.1234567, 5)
+    expect(test2).to.equal(7463785.12346)
+
+    const test3 = getFixedNumber(0.5, 0)
+    expect(test3).to.equal(1)
+  })
+})

From 8b9af19627feebf739e8e17b6adaf6d6e5523c0c Mon Sep 17 00:00:00 2001
From: Delilah Clement <delilahclement@gmail.com>
Date: Fri, 16 Sep 2022 10:53:57 -0500
Subject: [PATCH 18/34] handle invalid inputs to getFixedNumber() and
 formatTimeStamp()

---
 .../SingleVideoViewerContainer.js               |  3 ++-
 .../helpers/getFixedNumber/README.md            |  4 ++--
 .../helpers/getFixedNumber/getFixedNumber.js    |  3 +++
 .../getFixedNumber/getFixedNumber.spec.js       | 12 +++++++++++-
 .../helpers/formatTimeStamp/formatTimeStamp.js  |  4 ++++
 .../formatTimeStamp/formatTimeStamp.spec.js     | 17 +++++++++++++----
 6 files changed, 35 insertions(+), 8 deletions(-)

diff --git a/packages/lib-classifier/src/components/Classifier/components/SubjectViewer/components/SingleVideoViewer/SingleVideoViewerContainer.js b/packages/lib-classifier/src/components/Classifier/components/SubjectViewer/components/SingleVideoViewer/SingleVideoViewerContainer.js
index e5157022e8..699a885749 100644
--- a/packages/lib-classifier/src/components/Classifier/components/SubjectViewer/components/SingleVideoViewer/SingleVideoViewerContainer.js
+++ b/packages/lib-classifier/src/components/Classifier/components/SubjectViewer/components/SingleVideoViewer/SingleVideoViewerContainer.js
@@ -7,6 +7,7 @@ import asyncStates from '@zooniverse/async-states'
 
 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'
@@ -80,7 +81,7 @@ function SingleVideoViewerContainer({
   const handleVideoProgress = reactPlayerState => {
     // played is the percentage of video played as determined by react-player (0 to 1)
     const { played } = reactPlayerState
-    const fixedNumber = parseFloat(played.toFixed(3))
+    const fixedNumber = getFixedNumber(played)
     setTimeStamp(fixedNumber)
   }
 
diff --git a/packages/lib-classifier/src/components/Classifier/components/SubjectViewer/helpers/getFixedNumber/README.md b/packages/lib-classifier/src/components/Classifier/components/SubjectViewer/helpers/getFixedNumber/README.md
index d900a26edd..a38e786022 100644
--- a/packages/lib-classifier/src/components/Classifier/components/SubjectViewer/helpers/getFixedNumber/README.md
+++ b/packages/lib-classifier/src/components/Classifier/components/SubjectViewer/helpers/getFixedNumber/README.md
@@ -1,9 +1,9 @@
 # getFixedNumber
 
-This function is used in SingleVideoViewerContainer. It's equivalent to `parseFloat(played.toFixed(3))`, but `toFixed()` is an unreliable rounding function.
+This function is used in SingleVideoViewerContainer. It's equivalent to `parseFloat(number.toFixed(digits))`, but `toFixed()` is an unreliable rounding function.
 
 `getFixedNumber` takes two variables:
-- `number`: This is the timestamp value in SingleVideoViewerContainer or InteractionLayer.
+- `number`: This is the timestamp value in SingleVideoViewerContainer or InteractionLayer. Must be a number.
 - `digits`: The number of decimal places to round to.
 
 It returns one number rounded to the number of decimal places defined by `digits`.
diff --git a/packages/lib-classifier/src/components/Classifier/components/SubjectViewer/helpers/getFixedNumber/getFixedNumber.js b/packages/lib-classifier/src/components/Classifier/components/SubjectViewer/helpers/getFixedNumber/getFixedNumber.js
index 2b371fd1e1..99f513ce3d 100644
--- a/packages/lib-classifier/src/components/Classifier/components/SubjectViewer/helpers/getFixedNumber/getFixedNumber.js
+++ b/packages/lib-classifier/src/components/Classifier/components/SubjectViewer/helpers/getFixedNumber/getFixedNumber.js
@@ -1,3 +1,6 @@
 export default function getFixedNumber(number, digits) {
+  if (number === 0) {
+    return 0
+  }
   return Math.round(number * 10 ** digits) / 10 ** digits
 }
diff --git a/packages/lib-classifier/src/components/Classifier/components/SubjectViewer/helpers/getFixedNumber/getFixedNumber.spec.js b/packages/lib-classifier/src/components/Classifier/components/SubjectViewer/helpers/getFixedNumber/getFixedNumber.spec.js
index 15a354e4e0..6543b1b040 100644
--- a/packages/lib-classifier/src/components/Classifier/components/SubjectViewer/helpers/getFixedNumber/getFixedNumber.spec.js
+++ b/packages/lib-classifier/src/components/Classifier/components/SubjectViewer/helpers/getFixedNumber/getFixedNumber.spec.js
@@ -1,6 +1,16 @@
 import getFixedNumber from './'
 
-describe.only('Helper > getFixedNumber', function () {
+describe('Helper > getFixedNumber', function () {
+  it('if number === 0, it should return 0', function () {
+    const test = getFixedNumber(0, 3)
+    expect(test).to.equal(0)
+  })
+
+  it('if number is negative, it should return a negative number', function () {
+    const test = getFixedNumber(-123.123456789, 2)
+    expect(test).to.equal(-123.12)
+  })
+
   it('should round the input `number` to the `digits` decimal places', function () {
     const test1 = getFixedNumber(0.12345678, 3)
     expect(test1).to.equal(0.123)
diff --git a/packages/lib-classifier/src/helpers/formatTimeStamp/formatTimeStamp.js b/packages/lib-classifier/src/helpers/formatTimeStamp/formatTimeStamp.js
index e13eed7aaf..b993c95601 100644
--- a/packages/lib-classifier/src/helpers/formatTimeStamp/formatTimeStamp.js
+++ b/packages/lib-classifier/src/helpers/formatTimeStamp/formatTimeStamp.js
@@ -2,6 +2,10 @@ function formatTimeStamp(displayTime, duration) {
   // timeStamp is in seconds
   const timeStamp = duration ? displayTime * duration : displayTime
 
+  if (typeof timeStamp !== 'number' || isNaN(timeStamp)) {
+    return 'NaN'
+  }
+
   if (timeStamp < 1) {
     return '0:00'
   }
diff --git a/packages/lib-classifier/src/helpers/formatTimeStamp/formatTimeStamp.spec.js b/packages/lib-classifier/src/helpers/formatTimeStamp/formatTimeStamp.spec.js
index 9574a06c4e..e6c3fd2791 100644
--- a/packages/lib-classifier/src/helpers/formatTimeStamp/formatTimeStamp.spec.js
+++ b/packages/lib-classifier/src/helpers/formatTimeStamp/formatTimeStamp.spec.js
@@ -3,12 +3,12 @@ import formatTimeStamp from './formatTimeStamp'
 
 describe('Helpers > formatTimeStamp', function () {
   describe('Input time greater than 1 second', function () {
-    it('should return time in seconds as a readable mm:ss timestamp', function () {
+    it('should return time in seconds as a readable mm:ss timestamp string', function () {
       const timeStamp1 = formatTimeStamp(0.500, 20.000)
       expect(timeStamp1).to.equal('0:10')
 
-      const timeStamp2 = formatTimeStamp(0.500, 1200.000)
-      expect(timeStamp2).to.equal('10:00')
+      const timeStamp2 = formatTimeStamp(1200.000)
+      expect(timeStamp2).to.equal('20:00')
     })
 
     it('should remove double zeros from the mm indices', function () {
@@ -18,9 +18,18 @@ describe('Helpers > formatTimeStamp', function () {
   })
 
   describe('Input time less than 1 second', function () {
-    it('should return 0:00', function () {
+    it('should return string `0:00`', function () {
       const timeStamp = formatTimeStamp(0.010, 20.000)
       expect(timeStamp).to.equal('0:00')
     })
   })
+
+  describe('Invalid input time', function () {
+    it('should return string `NaN`', function () {
+      const timeStamp1 = formatTimeStamp('0.123')
+      expect(timeStamp1).to.equal('NaN')
+      const timeStamp2 = formatTimeStamp(NaN)
+      expect(timeStamp2).to.equal('NaN')
+    })
+  })
 })

From d9e5729584541c28ccce1af07d4148e410746b7f Mon Sep 17 00:00:00 2001
From: Delilah Clement <delilahclement@gmail.com>
Date: Fri, 16 Sep 2022 11:10:20 -0500
Subject: [PATCH 19/34] handle playback rate label

---
 .../components/SingleVideoViewer/SingleVideoViewer.js       | 6 ++++--
 .../SingleVideoViewer/SingleVideoViewerContainer.js         | 2 +-
 .../components/VideoController/VideoController.js           | 4 ++--
 3 files changed, 7 insertions(+), 5 deletions(-)

diff --git a/packages/lib-classifier/src/components/Classifier/components/SubjectViewer/components/SingleVideoViewer/SingleVideoViewer.js b/packages/lib-classifier/src/components/Classifier/components/SubjectViewer/components/SingleVideoViewer/SingleVideoViewer.js
index 4cbe9efe2a..ccd2805686 100644
--- a/packages/lib-classifier/src/components/Classifier/components/SubjectViewer/components/SingleVideoViewer/SingleVideoViewer.js
+++ b/packages/lib-classifier/src/components/Classifier/components/SubjectViewer/components/SingleVideoViewer/SingleVideoViewer.js
@@ -25,9 +25,11 @@ const SingleVideoViewer = ({
   onError = () => true,
   onProgress = () => true,
   onReactPlayerReady = () => true,
-  playbackRate = 1,
+  playbackRate = '1x',
   playerRef = null
 }) => {
+  const sanitizedRate = Number(playbackRate.slice(0, -1))
+
   return (
     <Container>
       <ReactPlayer
@@ -39,7 +41,7 @@ const SingleVideoViewer = ({
         onReady={onReactPlayerReady}
         onProgress={onProgress}
         playing={isPlaying}
-        playbackRate={playbackRate}
+        playbackRate={sanitizedRate}
         progressInterval={100} // milliseconds
         ref={playerRef}
         width='100%'
diff --git a/packages/lib-classifier/src/components/Classifier/components/SubjectViewer/components/SingleVideoViewer/SingleVideoViewerContainer.js b/packages/lib-classifier/src/components/Classifier/components/SubjectViewer/components/SingleVideoViewer/SingleVideoViewerContainer.js
index 699a885749..d52b2ae31d 100644
--- a/packages/lib-classifier/src/components/Classifier/components/SubjectViewer/components/SingleVideoViewer/SingleVideoViewerContainer.js
+++ b/packages/lib-classifier/src/components/Classifier/components/SubjectViewer/components/SingleVideoViewer/SingleVideoViewerContainer.js
@@ -35,7 +35,7 @@ function SingleVideoViewerContainer({
   const [clientWidth, setClientWidth] = useState(0)
   const [duration, setDuration] = useState(0)
   const [isPlaying, setIsPlaying] = 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)
diff --git a/packages/lib-classifier/src/components/Classifier/components/SubjectViewer/components/SingleVideoViewer/components/VideoController/VideoController.js b/packages/lib-classifier/src/components/Classifier/components/SubjectViewer/components/SingleVideoViewer/components/VideoController/VideoController.js
index af242d6c32..68ca416c65 100644
--- a/packages/lib-classifier/src/components/Classifier/components/SubjectViewer/components/SingleVideoViewer/components/VideoController/VideoController.js
+++ b/packages/lib-classifier/src/components/Classifier/components/SubjectViewer/components/SingleVideoViewer/components/VideoController/VideoController.js
@@ -44,7 +44,7 @@ const VideoController = ({
   onPlayPause = () => true,
   onSpeedChange = () => true,
   onSliderChange = () => true,
-  playbackRate = 1,
+  playbackRate = '1x',
   timeStamp = 0 // A percentage between 0 and 1
 }) => {
   const { t } = useTranslation('components')
@@ -107,7 +107,7 @@ const VideoController = ({
           <ThemeContext.Extend value={customSelectTheme}>
             <Select
               a11yTitle={t('SubjectViewer.VideoController.playbackSpeed')}
-              options={[0.25, 0.5, 1]}
+              options={['0.25x', '0.5x', '1x']}
               value={playbackRate}
               onChange={({ option }) => onSpeedChange(option)}
               plain

From e8cc4d61e024e0eb96ba3236fc456bbb17827bb4 Mon Sep 17 00:00:00 2001
From: Delilah Clement <delilahclement@gmail.com>
Date: Mon, 19 Sep 2022 11:51:08 -0500
Subject: [PATCH 20/34] add unit tests for VideoController

---
 .../SingleVideoViewerContainer.js             |  5 +-
 .../VideoController/VideoController.js        |  4 +-
 .../VideoController/VideoController.spec.js   | 93 +++++++++++++++++++
 .../helpers/getFixedNumber/getFixedNumber.js  |  4 +-
 4 files changed, 99 insertions(+), 7 deletions(-)
 create mode 100644 packages/lib-classifier/src/components/Classifier/components/SubjectViewer/components/SingleVideoViewer/components/VideoController/VideoController.spec.js

diff --git a/packages/lib-classifier/src/components/Classifier/components/SubjectViewer/components/SingleVideoViewer/SingleVideoViewerContainer.js b/packages/lib-classifier/src/components/Classifier/components/SubjectViewer/components/SingleVideoViewer/SingleVideoViewerContainer.js
index d52b2ae31d..c4f4516f63 100644
--- a/packages/lib-classifier/src/components/Classifier/components/SubjectViewer/components/SingleVideoViewer/SingleVideoViewerContainer.js
+++ b/packages/lib-classifier/src/components/Classifier/components/SubjectViewer/components/SingleVideoViewer/SingleVideoViewerContainer.js
@@ -81,7 +81,7 @@ function SingleVideoViewerContainer({
   const handleVideoProgress = reactPlayerState => {
     // played is the percentage of video played as determined by react-player (0 to 1)
     const { played } = reactPlayerState
-    const fixedNumber = getFixedNumber(played)
+    const fixedNumber = getFixedNumber(played, 3)
     setTimeStamp(fixedNumber)
   }
 
@@ -104,8 +104,7 @@ function SingleVideoViewerContainer({
 
   /* When VideoController > Slider is clicked or scrubbed */
   const handleSliderChange = e => {
-    console.log('slider change')
-    const newTimeStamp = e.target.value // This is in seconds, not percentage
+    const newTimeStamp = e.target.value
     playerRef?.current.seekTo(newTimeStamp, 'seconds')
   }
 
diff --git a/packages/lib-classifier/src/components/Classifier/components/SubjectViewer/components/SingleVideoViewer/components/VideoController/VideoController.js b/packages/lib-classifier/src/components/Classifier/components/SubjectViewer/components/SingleVideoViewer/components/VideoController/VideoController.js
index 68ca416c65..e2984da5c6 100644
--- a/packages/lib-classifier/src/components/Classifier/components/SubjectViewer/components/SingleVideoViewer/components/VideoController/VideoController.js
+++ b/packages/lib-classifier/src/components/Classifier/components/SubjectViewer/components/SingleVideoViewer/components/VideoController/VideoController.js
@@ -93,7 +93,7 @@ const VideoController = ({
           {/* Time */}
           <Box direction='row' alignSelf='center'>
             <time dateTime={`P${Math.round(sliderValue)}S`}>
-              {formatTimeStamp(timeStamp * duration)}
+              {formatTimeStamp(sliderValue)}
             </time>
             {' / '}
             <time dateTime={`P${Math.round(duration)}S`}>
@@ -125,7 +125,7 @@ VideoController.propTypes = {
   onPlayPause: PropTypes.func,
   onSpeedChange: PropTypes.func,
   onSliderChange: PropTypes.func,
-  playbackRate: PropTypes.number,
+  playbackRate: PropTypes.string,
   timeStamp: PropTypes.number
 }
 
diff --git a/packages/lib-classifier/src/components/Classifier/components/SubjectViewer/components/SingleVideoViewer/components/VideoController/VideoController.spec.js b/packages/lib-classifier/src/components/Classifier/components/SubjectViewer/components/SingleVideoViewer/components/VideoController/VideoController.spec.js
new file mode 100644
index 0000000000..553335dda7
--- /dev/null
+++ b/packages/lib-classifier/src/components/Classifier/components/SubjectViewer/components/SingleVideoViewer/components/VideoController/VideoController.spec.js
@@ -0,0 +1,93 @@
+import React from 'react'
+import { fireEvent, render, screen } from '@testing-library/react'
+import userEvent from '@testing-library/user-event'
+import sinon from 'sinon'
+import { expect } from 'chai'
+
+import formatTimeStamp from '@helpers/formatTimeStamp'
+import VideoController from './VideoController'
+
+describe.only('Component > VideoController', function () {
+  let onPlayPauseSpy, onSpeedChangeSpy
+  const subjectDuration = 10.0
+  const subjectTimeStamp = 0.2
+
+  beforeEach(function () {
+    onPlayPauseSpy = sinon.spy()
+    onSpeedChangeSpy = sinon.spy()
+  })
+
+  it('should display the video subject timestamp and duration', function () {
+    render(
+      <VideoController
+        duration={subjectDuration}
+        timeStamp={subjectTimeStamp}
+      />
+    )
+    const durationText = screen.getByText(formatTimeStamp(subjectDuration))
+    expect(durationText).exists()
+    const timeStampText = screen.getByText(
+      formatTimeStamp(subjectTimeStamp, subjectDuration)
+    )
+    expect(timeStampText).exists()
+  })
+
+  it('should handle play and pause', async function () {
+    const user = userEvent.setup({ delay: null })
+    const { rerender } = render(
+      <VideoController
+        duration={subjectDuration}
+        isPlaying={false}
+        onPlayPause={onPlayPauseSpy}
+        timeStamp={subjectTimeStamp}
+      />
+    )
+    const playButton = screen.getByLabelText(
+      'SubjectViewer.VideoController.play'
+    )
+    await user.pointer({
+      keys: '[MouseLeft]',
+      target: playButton
+    })
+    expect(onPlayPauseSpy).to.have.been.calledOnce()
+
+    rerender(
+      <VideoController
+        duration={subjectDuration}
+        isPlaying
+        onPlayPause={onPlayPauseSpy}
+        timeStamp={subjectTimeStamp}
+      />
+    )
+
+    const pauseButton = screen.getByLabelText(
+      'SubjectViewer.VideoController.pause'
+    )
+    await user.pointer({
+      keys: '[MouseLeft]',
+      target: pauseButton
+    })
+    expect(onPlayPauseSpy).to.have.been.calledTwice()
+  })
+
+  it('should change the playback rate', async function () {
+    sinon.stub(window, 'scrollTo')
+    render(
+      <VideoController
+        duration={subjectDuration}
+        timeStamp={subjectTimeStamp}
+        onSpeedChange={onSpeedChangeSpy}
+      />
+    )
+
+    const speedInput = screen.getByLabelText(
+      'SubjectViewer.VideoController.playbackSpeed; Selected: 1x'
+    )
+
+    fireEvent.change(speedInput, { target: { value: '0.25x' } })
+    expect(speedInput.value).to.equal('0.25x')
+
+    // The following assertion does not work with a Grommet Select ¯\_(ツ)_/¯
+    // expect(onSpeedChangeSpy).to.have.been.calledOnce()
+  })
+})
diff --git a/packages/lib-classifier/src/components/Classifier/components/SubjectViewer/helpers/getFixedNumber/getFixedNumber.js b/packages/lib-classifier/src/components/Classifier/components/SubjectViewer/helpers/getFixedNumber/getFixedNumber.js
index 99f513ce3d..09d66e95b6 100644
--- a/packages/lib-classifier/src/components/Classifier/components/SubjectViewer/helpers/getFixedNumber/getFixedNumber.js
+++ b/packages/lib-classifier/src/components/Classifier/components/SubjectViewer/helpers/getFixedNumber/getFixedNumber.js
@@ -1,6 +1,6 @@
 export default function getFixedNumber(number, digits) {
-  if (number === 0) {
-    return 0
+  if (!digits) {
+    console.log('getFixedNumber: Missing digits variable')
   }
   return Math.round(number * 10 ** digits) / 10 ** digits
 }

From 5d626951b184165f80386722388547d553086728 Mon Sep 17 00:00:00 2001
From: Delilah Clement <delilahclement@gmail.com>
Date: Mon, 19 Sep 2022 15:34:45 -0500
Subject: [PATCH 21/34] create custom theme for VideoController

---
 .../SingleVideoViewer/SingleVideoViewer.js    |  64 --------
 .../SingleVideoViewer.spec.js                 |  17 --
 .../SingleVideoViewerContainer.js             |  39 +++--
 .../VideoController/VideoController.js        | 153 ++++++++----------
 .../components/VideoController/theme.js       |  41 +++++
 .../components/SingleVideoViewer/index.js     |   3 +-
 6 files changed, 139 insertions(+), 178 deletions(-)
 delete mode 100644 packages/lib-classifier/src/components/Classifier/components/SubjectViewer/components/SingleVideoViewer/SingleVideoViewer.js
 delete mode 100644 packages/lib-classifier/src/components/Classifier/components/SubjectViewer/components/SingleVideoViewer/SingleVideoViewer.spec.js
 create mode 100644 packages/lib-classifier/src/components/Classifier/components/SubjectViewer/components/SingleVideoViewer/components/VideoController/theme.js

diff --git a/packages/lib-classifier/src/components/Classifier/components/SubjectViewer/components/SingleVideoViewer/SingleVideoViewer.js b/packages/lib-classifier/src/components/Classifier/components/SubjectViewer/components/SingleVideoViewer/SingleVideoViewer.js
deleted file mode 100644
index ccd2805686..0000000000
--- a/packages/lib-classifier/src/components/Classifier/components/SubjectViewer/components/SingleVideoViewer/SingleVideoViewer.js
+++ /dev/null
@@ -1,64 +0,0 @@
-import React from 'react'
-import PropTypes from 'prop-types'
-import styled from 'styled-components'
-import ReactPlayer from 'react-player'
-
-const Container = styled.div`
-  animation: fadein 1s 0s forwards;
-
-  @keyframes fadein {
-    from {
-      opacity: 0;
-    }
-
-    to {
-      opacity: 100%;
-    }
-  }
-`
-
-const SingleVideoViewer = ({
-  url = '',
-  isPlaying = false,
-  onDuration = () => true,
-  onEnded = () => true,
-  onError = () => true,
-  onProgress = () => true,
-  onReactPlayerReady = () => true,
-  playbackRate = '1x',
-  playerRef = null
-}) => {
-  const sanitizedRate = Number(playbackRate.slice(0, -1))
-
-  return (
-    <Container>
-      <ReactPlayer
-        controls={false}
-        height='100%'
-        onDuration={onDuration}
-        onEnded={onEnded}
-        onError={onError}
-        onReady={onReactPlayerReady}
-        onProgress={onProgress}
-        playing={isPlaying}
-        playbackRate={sanitizedRate}
-        progressInterval={100} // milliseconds
-        ref={playerRef}
-        width='100%'
-        url={url}
-      />
-    </Container>
-  )
-}
-
-SingleVideoViewer.propTypes = {
-  playerRef: PropTypes.object,
-  url: PropTypes.string,
-  isPlaying: PropTypes.bool,
-  playbackRate: PropTypes.number,
-  onProgress: PropTypes.func,
-  onDuration: PropTypes.func,
-  onEnded: PropTypes.func
-}
-
-export default SingleVideoViewer
diff --git a/packages/lib-classifier/src/components/Classifier/components/SubjectViewer/components/SingleVideoViewer/SingleVideoViewer.spec.js b/packages/lib-classifier/src/components/Classifier/components/SubjectViewer/components/SingleVideoViewer/SingleVideoViewer.spec.js
deleted file mode 100644
index e1442f54b2..0000000000
--- a/packages/lib-classifier/src/components/Classifier/components/SubjectViewer/components/SingleVideoViewer/SingleVideoViewer.spec.js
+++ /dev/null
@@ -1,17 +0,0 @@
-import React from 'react'
-import { render, waitFor } from '@testing-library/react'
-import { expect } from 'chai'
-import SingleVideoViewer from './SingleVideoViewer'
-
-describe('Component > SingleVideoViewer', function () {
-  const mockUrl = 'https://zooniverse.org/test1234.mp4'
-
-  it('render a video element with a src', async function () {
-    const { container } = render(<SingleVideoViewer url={mockUrl} />)
-    await waitFor(() => {
-      const videoElement = container.querySelector('video')
-      expect(videoElement).exists()
-      expect(videoElement.src).to.equal(mockUrl)
-    })
-  })
-})
diff --git a/packages/lib-classifier/src/components/Classifier/components/SubjectViewer/components/SingleVideoViewer/SingleVideoViewerContainer.js b/packages/lib-classifier/src/components/Classifier/components/SubjectViewer/components/SingleVideoViewer/SingleVideoViewerContainer.js
index c4f4516f63..dc0437fbcd 100644
--- a/packages/lib-classifier/src/components/Classifier/components/SubjectViewer/components/SingleVideoViewer/SingleVideoViewerContainer.js
+++ b/packages/lib-classifier/src/components/Classifier/components/SubjectViewer/components/SingleVideoViewer/SingleVideoViewerContainer.js
@@ -4,13 +4,13 @@ import { Box } from 'grommet'
 import React, { 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 './components/VideoController'
 
 const SubjectContainer = styled.div`
@@ -76,11 +76,10 @@ function SingleVideoViewerContainer({
 
   const enableDrawing = loadingState === asyncStates.success && enableInteractionLayer
 
-  /* ==================== SingleVideoViewer react-player ==================== */
+  /* ==================== react-player ==================== */
 
   const handleVideoProgress = reactPlayerState => {
-    // played is the percentage of video played as determined by react-player (0 to 1)
-    const { played } = reactPlayerState
+    const { played } = reactPlayerState // percentage of video played (0 to 1)
     const fixedNumber = getFixedNumber(played, 3)
     setTimeStamp(fixedNumber)
   }
@@ -102,7 +101,6 @@ function SingleVideoViewerContainer({
     setPlaybackRate(rate)
   }
 
-  /* When VideoController > Slider is clicked or scrubbed */
   const handleSliderChange = e => {
     const newTimeStamp = e.target.value
     playerRef?.current.seekTo(newTimeStamp, 'seconds')
@@ -112,24 +110,41 @@ function SingleVideoViewerContainer({
     onError(error)
   }
 
-  const canvas = transformLayer?.current
-  const interactionLayerScale = clientWidth / videoWidth
+  const sanitizedRate = Number(playbackRate.slice(0, -1))
 
   /* Memoized so onProgress() and setTimeStamp() don't trigger each other */
   const memoizedViewer = useMemo(() => (
-    <SingleVideoViewer
-      isPlaying={isPlaying}
+    <ReactPlayer
+      controls={false}
+      height='100%'
       onDuration={handleVideoDuration}
       onEnded={handleVideoEnded}
       onError={handlePlayerError}
-      onReactPlayerReady={onReactPlayerReady}
+      onReady={onReactPlayerReady}
       onProgress={handleVideoProgress}
-      playbackRate={playbackRate}
-      playerRef={playerRef}
+      playing={isPlaying}
+      playbackRate={sanitizedRate}
+      progressInterval={100} // milliseconds
+      ref={playerRef}
+      width='100%'
       url={videoSrc}
+      config={{
+        file: { // styling the <video> element
+          attributes: {
+            style: {
+              display: 'block',
+              height: '100%',
+              width: '100%'
+            }
+          }
+        }
+      }}
     />
   ), [isPlaying, playbackRate, videoSrc])
 
+  const canvas = transformLayer?.current
+  const interactionLayerScale = clientWidth / videoWidth
+
   return (
     <>
       {videoSrc
diff --git a/packages/lib-classifier/src/components/Classifier/components/SubjectViewer/components/SingleVideoViewer/components/VideoController/VideoController.js b/packages/lib-classifier/src/components/Classifier/components/SubjectViewer/components/SingleVideoViewer/components/VideoController/VideoController.js
index e2984da5c6..099d0b7fc2 100644
--- a/packages/lib-classifier/src/components/Classifier/components/SubjectViewer/components/SingleVideoViewer/components/VideoController/VideoController.js
+++ b/packages/lib-classifier/src/components/Classifier/components/SubjectViewer/components/SingleVideoViewer/components/VideoController/VideoController.js
@@ -1,42 +1,12 @@
 import React, { useMemo } from 'react'
 import PropTypes from 'prop-types'
-import { Box, Button, Grommet, RangeInput, Select, ThemeContext } from 'grommet'
-import { CirclePlay, PauseFill } from 'grommet-icons'
+import { Box, Button, RangeInput, Select, Text, ThemeContext } from 'grommet'
+import { CirclePlay, Volume, PauseFill } from 'grommet-icons'
 import { useTranslation } from 'react-i18next'
-import formatTimeStamp from '@helpers/formatTimeStamp'
-
-const customSelectTheme = {
-  textInput: {
-    extend: 'text-align: center; padding: 0; width: 40px;'
-  },
-  select: {
-    icons: {
-      margin: 'xxsmall'
-    }
-  }
-}
+import { withThemeContext } from '@zooniverse/react-components'
 
-const customThemeRangeInput = {
-  global: {
-    spacing: '16px'
-  },
-  rangeInput: {
-    track: {
-      color: 'accent-1',
-      height: '6px',
-      extend: () => 'border-radius: 10px',
-      lower: {
-        color: '#F0B200'
-      },
-      upper: {
-        color: 'dark-4'
-      }
-    },
-    thumb: {
-      color: '#F0B200'
-    }
-  }
-}
+import controlsTheme from './theme'
+import formatTimeStamp from '@helpers/formatTimeStamp'
 
 const VideoController = ({
   duration = 0,
@@ -48,7 +18,9 @@ const VideoController = ({
   timeStamp = 0 // A percentage between 0 and 1
 }) => {
   const { t } = useTranslation('components')
-  const playPauseLabel = isPlaying ? 'SubjectViewer.VideoController.pause' : 'SubjectViewer.VideoController.play'
+  const playPauseLabel = isPlaying
+    ? 'SubjectViewer.VideoController.pause'
+    : 'SubjectViewer.VideoController.play'
 
   const sliderValue = timeStamp * duration
 
@@ -57,16 +29,49 @@ const VideoController = ({
   }, [duration])
 
   return (
-    <Box
-      background={{
-        dark: 'dark-3',
-        light: 'light-3'
-      }}
-    >
+    <ThemeContext.Extend value={controlsTheme}>
+      <Box
+        background='neutral-7'
+        direction='row'
+        gap='small'
+        pad='xsmall'
+        style={{ border: 'solid 1px red' }}
+      >
+        {/* Play/Pause */}
+        <Button
+          a11yTitle={t(playPauseLabel)}
+          onClick={onPlayPause}
+          icon={
+            isPlaying ? (
+              <PauseFill color='white' size='small' />
+            ) : (
+              <CirclePlay color='white' size='medium' />
+            )
+          }
+          plain
+          margin={isPlaying ? '6px' : '0'}
+        />
 
-      {/* Slider */}
-      <Box pad={{ horizontal: 'xsmall', top: 'xsmall' }}>
-        <Grommet theme={customThemeRangeInput}>
+        {/* Time */}
+        <Box direction='row' align='center'>
+          <Text size='small'>
+            <time dateTime={`P${Math.round(sliderValue)}S`}>
+              {formatTimeStamp(sliderValue)}
+            </time>
+            {' / '}
+            <time dateTime={`P${Math.round(duration)}S`}>
+              {displayedDuration}
+            </time>
+          </Text>
+        </Box>
+
+        {/* Slider */}
+        <Box
+          basis='1/2'
+          direction='row'
+          align='center'
+          pad={{ right: 'xsmall' }}
+        >
           <RangeInput
             a11yTitle={t('SubjectViewer.VideoController.scrubber')}
             min={0}
@@ -74,48 +79,29 @@ const VideoController = ({
             step={0.1}
             value={sliderValue}
             onChange={onSliderChange}
+            style={{
+              display: 'block',
+              width: '100%'
+            }}
           />
-        </Grommet>
-      </Box>
-
-      {/* Play/Pause */}
-      <Box direction='row' justify='between'>
-        <Box direction='row'>
-          <Box alignSelf='center' pad={{ horizontal: 'small' }}>
-            <Button
-              a11yTitle={t(playPauseLabel)}
-              onClick={onPlayPause}
-              icon={isPlaying ? <PauseFill /> : <CirclePlay />}
-              plain
-            />
-          </Box>
-
-          {/* Time */}
-          <Box direction='row' alignSelf='center'>
-            <time dateTime={`P${Math.round(sliderValue)}S`}>
-              {formatTimeStamp(sliderValue)}
-            </time>
-            {' / '}
-            <time dateTime={`P${Math.round(duration)}S`}>
-              {displayedDuration}
-            </time>
-          </Box>
         </Box>
 
         {/* Rate */}
-        <Box direction='row' alignSelf='center' pad={{ right: 'small' }}>
-          <ThemeContext.Extend value={customSelectTheme}>
-            <Select
-              a11yTitle={t('SubjectViewer.VideoController.playbackSpeed')}
-              options={['0.25x', '0.5x', '1x']}
-              value={playbackRate}
-              onChange={({ option }) => onSpeedChange(option)}
-              plain
-            />
-          </ThemeContext.Extend>
-        </Box>
+        <Select
+          a11yTitle={t('SubjectViewer.VideoController.playbackSpeed')}
+          options={['0.25x', '0.5x', '1x']}
+          value={playbackRate}
+          onChange={({ option }) => onSpeedChange(option)}
+          plain
+          size='small'
+          style={{
+            color: 'white',
+            display: 'block',
+            width: '36px'
+          }}
+        />
       </Box>
-    </Box>
+    </ThemeContext.Extend>
   )
 }
 
@@ -129,4 +115,5 @@ VideoController.propTypes = {
   timeStamp: PropTypes.number
 }
 
-export default VideoController
+export default withThemeContext(VideoController)
+export { VideoController }
diff --git a/packages/lib-classifier/src/components/Classifier/components/SubjectViewer/components/SingleVideoViewer/components/VideoController/theme.js b/packages/lib-classifier/src/components/Classifier/components/SubjectViewer/components/SingleVideoViewer/components/VideoController/theme.js
new file mode 100644
index 0000000000..46f9e10219
--- /dev/null
+++ b/packages/lib-classifier/src/components/Classifier/components/SubjectViewer/components/SingleVideoViewer/components/VideoController/theme.js
@@ -0,0 +1,41 @@
+const controlsTheme = {
+  global: {
+    input: {
+      display: 'block',
+      padding: {
+        horizontal: '0',
+        vertical: '0'
+      }
+    },
+    spacing: '10px'
+  },
+  select: {
+    background: 'black',
+    icons: {
+      color: 'white',
+      margin: 0
+    },
+    options: {
+      text: {
+        size: 'small'
+      }
+    }
+  },
+  rangeInput: {
+    track: {
+      color: 'accent-1',
+      height: '3px',
+      lower: {
+        color: 'white'
+      },
+      upper: {
+        color: 'dark-4'
+      }
+    },
+    thumb: {
+      color: 'white'
+    }
+  }
+}
+
+export default controlsTheme
diff --git a/packages/lib-classifier/src/components/Classifier/components/SubjectViewer/components/SingleVideoViewer/index.js b/packages/lib-classifier/src/components/Classifier/components/SubjectViewer/components/SingleVideoViewer/index.js
index 35aa1b0a4c..5449546abb 100644
--- a/packages/lib-classifier/src/components/Classifier/components/SubjectViewer/components/SingleVideoViewer/index.js
+++ b/packages/lib-classifier/src/components/Classifier/components/SubjectViewer/components/SingleVideoViewer/index.js
@@ -1,2 +1 @@
-export { default } from './SingleVideoViewerContainer'
-export { default as SingleVideoViewer } from './SingleVideoViewer'
+export { default } from './SingleVideoViewerContainer'
\ No newline at end of file

From f8454ae709775a6b6e286ee89434611db2188aad Mon Sep 17 00:00:00 2001
From: Delilah Clement <delilahclement@gmail.com>
Date: Mon, 19 Sep 2022 16:23:12 -0500
Subject: [PATCH 22/34] add volume and fullscreen controls

---
 .../SingleVideoViewerContainer.js             | 28 +++++++++++
 .../VideoController/VideoController.js        | 50 ++++++++++++++++++-
 2 files changed, 76 insertions(+), 2 deletions(-)

diff --git a/packages/lib-classifier/src/components/Classifier/components/SubjectViewer/components/SingleVideoViewer/SingleVideoViewerContainer.js b/packages/lib-classifier/src/components/Classifier/components/SubjectViewer/components/SingleVideoViewer/SingleVideoViewerContainer.js
index dc0437fbcd..f34fc75e42 100644
--- a/packages/lib-classifier/src/components/Classifier/components/SubjectViewer/components/SingleVideoViewer/SingleVideoViewerContainer.js
+++ b/packages/lib-classifier/src/components/Classifier/components/SubjectViewer/components/SingleVideoViewer/SingleVideoViewerContainer.js
@@ -34,11 +34,13 @@ function SingleVideoViewerContainer({
 }) {
   const [clientWidth, setClientWidth] = useState(0)
   const [duration, setDuration] = useState(0)
+  const [fullscreen, setFullscreen] = useState(false)
   const [isPlaying, setIsPlaying] = useState(false)
   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 interactionLayerSVG = useRef()
   const playerRef = useRef()
@@ -106,6 +108,28 @@ function SingleVideoViewerContainer({
     playerRef?.current.seekTo(newTimeStamp, 'seconds')
   }
 
+  const handleVolume = e => {
+    setVolume(e.target.value)
+  }
+
+  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)
   }
@@ -127,6 +151,7 @@ function SingleVideoViewerContainer({
       progressInterval={100} // milliseconds
       ref={playerRef}
       width='100%'
+      volume={volume}
       url={videoSrc}
       config={{
         file: { // styling the <video> element
@@ -185,11 +210,14 @@ function SingleVideoViewerContainer({
       <VideoController
         duration={duration}
         isPlaying={isPlaying}
+        handleFullScreen={handleFullScreen}
         onPlayPause={handlePlayPause}
         onSliderChange={handleSliderChange}
         onSpeedChange={handleSpeedChange}
+        onVolumeChange={handleVolume}
         playbackRate={playbackRate}
         timeStamp={timeStamp}
+        volume={volume}
       />
     </>
   )
diff --git a/packages/lib-classifier/src/components/Classifier/components/SubjectViewer/components/SingleVideoViewer/components/VideoController/VideoController.js b/packages/lib-classifier/src/components/Classifier/components/SubjectViewer/components/SingleVideoViewer/components/VideoController/VideoController.js
index 099d0b7fc2..285f909c2a 100644
--- a/packages/lib-classifier/src/components/Classifier/components/SubjectViewer/components/SingleVideoViewer/components/VideoController/VideoController.js
+++ b/packages/lib-classifier/src/components/Classifier/components/SubjectViewer/components/SingleVideoViewer/components/VideoController/VideoController.js
@@ -1,21 +1,31 @@
 import React, { useMemo } from 'react'
 import PropTypes from 'prop-types'
 import { Box, Button, RangeInput, Select, Text, ThemeContext } from 'grommet'
-import { CirclePlay, Volume, PauseFill } from 'grommet-icons'
+import {
+  CirclePlay,
+  Expand,
+  Volume,
+  VolumeMute,
+  PauseFill
+} from 'grommet-icons'
 import { useTranslation } from 'react-i18next'
 import { withThemeContext } from '@zooniverse/react-components'
 
+// add custom icon sizing here
 import controlsTheme from './theme'
 import formatTimeStamp from '@helpers/formatTimeStamp'
 
 const VideoController = ({
   duration = 0,
   isPlaying = false,
+  handleFullScreen = () => true,
   onPlayPause = () => true,
   onSpeedChange = () => true,
   onSliderChange = () => true,
+  onVolumeChange = () => true,
   playbackRate = '1x',
-  timeStamp = 0 // A percentage between 0 and 1
+  timeStamp = 0, // A percentage between 0 and 1
+  volume = 1
 }) => {
   const { t } = useTranslation('components')
   const playPauseLabel = isPlaying
@@ -100,6 +110,41 @@ const VideoController = ({
             width: '36px'
           }}
         />
+
+        {/* Volume */}
+        <Box
+          // overflow='visible'
+          style={{
+            position: 'relative'
+          }}
+        >
+          <Button icon={<Volume size='medium' color='white' />} plain />
+          <RangeInput
+            a11yTitle={''}
+            min={0}
+            max={1}
+            step={0.25}
+            onChange={onVolumeChange}
+            style={{
+              background: 'black',
+              border: 'solid 1px green',
+              position: 'absolute',
+              right: 0,
+              top: '-30px',
+              width: '120px',
+              height: '30px',
+              padding: '8px'
+            }}
+            value={volume}
+          />
+        </Box>
+
+        {/* Full Screen */}
+        <Button
+          icon={<Expand size='medium' color='white' />}
+          plain
+          onClick={handleFullScreen}
+        />
       </Box>
     </ThemeContext.Extend>
   )
@@ -111,6 +156,7 @@ VideoController.propTypes = {
   onPlayPause: PropTypes.func,
   onSpeedChange: PropTypes.func,
   onSliderChange: PropTypes.func,
+  onVolumeChange: PropTypes.func,
   playbackRate: PropTypes.string,
   timeStamp: PropTypes.number
 }

From 73dd3c0bf074feb3ea0bc94af3e48e3628a912a6 Mon Sep 17 00:00:00 2001
From: Delilah Clement <delilahclement@gmail.com>
Date: Tue, 20 Sep 2022 15:28:25 -0500
Subject: [PATCH 23/34] build custom volume range input

---
 .../SingleVideoViewerContainer.js             | 10 ++-
 .../VideoController/VideoController.js        | 63 ++++++++++++-------
 .../src/translations/en/components.json       |  3 +-
 3 files changed, 51 insertions(+), 25 deletions(-)

diff --git a/packages/lib-classifier/src/components/Classifier/components/SubjectViewer/components/SingleVideoViewer/SingleVideoViewerContainer.js b/packages/lib-classifier/src/components/Classifier/components/SubjectViewer/components/SingleVideoViewer/SingleVideoViewerContainer.js
index f34fc75e42..f68e95a789 100644
--- a/packages/lib-classifier/src/components/Classifier/components/SubjectViewer/components/SingleVideoViewer/SingleVideoViewerContainer.js
+++ b/packages/lib-classifier/src/components/Classifier/components/SubjectViewer/components/SingleVideoViewer/SingleVideoViewerContainer.js
@@ -41,6 +41,7 @@ function SingleVideoViewerContainer({
   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()
@@ -112,6 +113,11 @@ function SingleVideoViewerContainer({
     setVolume(e.target.value)
   }
 
+  const handleVolumeOpen = () => {
+    const prevVolumeOpen = volumeOpen
+    toggleVolumeOpen(!prevVolumeOpen)
+  }
+
   const handleFullScreen = () => {
     if (fullscreen) {
       try {
@@ -165,7 +171,7 @@ function SingleVideoViewerContainer({
         }
       }}
     />
-  ), [isPlaying, playbackRate, videoSrc])
+  ), [isPlaying, playbackRate, videoSrc, volume])
 
   const canvas = transformLayer?.current
   const interactionLayerScale = clientWidth / videoWidth
@@ -211,6 +217,7 @@ function SingleVideoViewerContainer({
         duration={duration}
         isPlaying={isPlaying}
         handleFullScreen={handleFullScreen}
+        handleVolumeOpen={handleVolumeOpen}
         onPlayPause={handlePlayPause}
         onSliderChange={handleSliderChange}
         onSpeedChange={handleSpeedChange}
@@ -218,6 +225,7 @@ function SingleVideoViewerContainer({
         playbackRate={playbackRate}
         timeStamp={timeStamp}
         volume={volume}
+        volumeOpen={volumeOpen}
       />
     </>
   )
diff --git a/packages/lib-classifier/src/components/Classifier/components/SubjectViewer/components/SingleVideoViewer/components/VideoController/VideoController.js b/packages/lib-classifier/src/components/Classifier/components/SubjectViewer/components/SingleVideoViewer/components/VideoController/VideoController.js
index 285f909c2a..e55a608bb5 100644
--- a/packages/lib-classifier/src/components/Classifier/components/SubjectViewer/components/SingleVideoViewer/components/VideoController/VideoController.js
+++ b/packages/lib-classifier/src/components/Classifier/components/SubjectViewer/components/SingleVideoViewer/components/VideoController/VideoController.js
@@ -11,7 +11,7 @@ import {
 import { useTranslation } from 'react-i18next'
 import { withThemeContext } from '@zooniverse/react-components'
 
-// add custom icon sizing here
+// add custom icon sizing here ?
 import controlsTheme from './theme'
 import formatTimeStamp from '@helpers/formatTimeStamp'
 
@@ -19,13 +19,15 @@ const VideoController = ({
   duration = 0,
   isPlaying = false,
   handleFullScreen = () => true,
+  handleVolumeOpen = () => true,
   onPlayPause = () => true,
   onSpeedChange = () => true,
   onSliderChange = () => true,
   onVolumeChange = () => true,
   playbackRate = '1x',
   timeStamp = 0, // A percentage between 0 and 1
-  volume = 1
+  volume = 1,
+  volumeOpen = false
 }) => {
   const { t } = useTranslation('components')
   const playPauseLabel = isPlaying
@@ -45,7 +47,7 @@ const VideoController = ({
         direction='row'
         gap='small'
         pad='xsmall'
-        style={{ border: 'solid 1px red' }}
+        style={{ borderTop: 'solid 1px white' }}
       >
         {/* Play/Pause */}
         <Button
@@ -113,35 +115,50 @@ const VideoController = ({
 
         {/* Volume */}
         <Box
-          // overflow='visible'
+          align='center'
+          direction='row'
           style={{
             position: 'relative'
           }}
         >
-          <Button icon={<Volume size='medium' color='white' />} plain />
-          <RangeInput
-            a11yTitle={''}
-            min={0}
-            max={1}
-            step={0.25}
-            onChange={onVolumeChange}
-            style={{
-              background: 'black',
-              border: 'solid 1px green',
-              position: 'absolute',
-              right: 0,
-              top: '-30px',
-              width: '120px',
-              height: '30px',
-              padding: '8px'
-            }}
-            value={volume}
+          <Button
+            icon={
+              volume > 0 ? (
+                <Volume size='small' color='white' />
+              ) : (
+                <VolumeMute size='small' color='white' />
+              )
+            }
+            plain
+            onClick={handleVolumeOpen}
           />
+          {volumeOpen && (
+            <RangeInput
+              a11yTitle={t('SubjectViewer.VideoController.volume')}
+              min={0}
+              max={1}
+              step={0.25}
+              onChange={onVolumeChange}
+              style={{
+                background: 'black',
+                display: 'block',
+                transform: 'rotate(-90deg)',
+                transformOrigin: 'top left',
+                position: 'absolute',
+                left: '-100%',
+                bottom: 0,
+                width: '120px',
+                height: '30px',
+                padding: '8px'
+              }}
+              value={volume}
+            />
+          )}
         </Box>
 
         {/* Full Screen */}
         <Button
-          icon={<Expand size='medium' color='white' />}
+          icon={<Expand size='small' color='white' />}
           plain
           onClick={handleFullScreen}
         />
diff --git a/packages/lib-classifier/src/translations/en/components.json b/packages/lib-classifier/src/translations/en/components.json
index 465f080b15..9ae5de242d 100644
--- a/packages/lib-classifier/src/translations/en/components.json
+++ b/packages/lib-classifier/src/translations/en/components.json
@@ -211,7 +211,8 @@
       "scrubber": "Video player scrubber",
       "playbackSpeed": "Video playback speed selection",
       "play": "Play video",
-      "pause": "Pause video"
+      "pause": "Pause video",
+      "volume": "Volume"
     },
     "ZoomControlButton": {
       "enable": "enable zoom",

From 49261f64f7f4649d71522e405cf72260e0c9fb97 Mon Sep 17 00:00:00 2001
From: Delilah Clement <delilahclement@gmail.com>
Date: Tue, 20 Sep 2022 16:17:07 -0500
Subject: [PATCH 24/34] fix grid styling of video controls

---
 .../VideoController/VideoController.js        | 210 +++++++++---------
 1 file changed, 106 insertions(+), 104 deletions(-)

diff --git a/packages/lib-classifier/src/components/Classifier/components/SubjectViewer/components/SingleVideoViewer/components/VideoController/VideoController.js b/packages/lib-classifier/src/components/Classifier/components/SubjectViewer/components/SingleVideoViewer/components/VideoController/VideoController.js
index e55a608bb5..14c3da081a 100644
--- a/packages/lib-classifier/src/components/Classifier/components/SubjectViewer/components/SingleVideoViewer/components/VideoController/VideoController.js
+++ b/packages/lib-classifier/src/components/Classifier/components/SubjectViewer/components/SingleVideoViewer/components/VideoController/VideoController.js
@@ -1,13 +1,15 @@
 import React, { useMemo } from 'react'
 import PropTypes from 'prop-types'
-import { Box, Button, RangeInput, Select, Text, ThemeContext } from 'grommet'
 import {
-  CirclePlay,
-  Expand,
-  Volume,
-  VolumeMute,
-  PauseFill
-} from 'grommet-icons'
+  Box,
+  Button,
+  Grid,
+  RangeInput,
+  Select,
+  Text,
+  ThemeContext
+} from 'grommet'
+import { CirclePlay, Expand, Volume, VolumeMute, Pause } from 'grommet-icons'
 import { useTranslation } from 'react-i18next'
 import { withThemeContext } from '@zooniverse/react-components'
 
@@ -15,6 +17,8 @@ import { withThemeContext } from '@zooniverse/react-components'
 import controlsTheme from './theme'
 import formatTimeStamp from '@helpers/formatTimeStamp'
 
+const iconSize = '16px'
+
 const VideoController = ({
   duration = 0,
   isPlaying = false,
@@ -42,48 +46,42 @@ const VideoController = ({
 
   return (
     <ThemeContext.Extend value={controlsTheme}>
-      <Box
-        background='neutral-7'
-        direction='row'
-        gap='small'
-        pad='xsmall'
-        style={{ borderTop: 'solid 1px white' }}
+      <Grid
+        columns={['100px', 'flex', '120px']}
+        pad='10px' // xsmall regardless of screen size
+        style={{ background: '#000000', borderTop: 'solid 1px white' }}
       >
-        {/* Play/Pause */}
-        <Button
-          a11yTitle={t(playPauseLabel)}
-          onClick={onPlayPause}
-          icon={
-            isPlaying ? (
-              <PauseFill color='white' size='small' />
-            ) : (
-              <CirclePlay color='white' size='medium' />
-            )
-          }
-          plain
-          margin={isPlaying ? '6px' : '0'}
-        />
+        <Box background='neutral-7' direction='row' gap='small'>
+          {/* Play/Pause */}
+          <Button
+            a11yTitle={t(playPauseLabel)}
+            onClick={onPlayPause}
+            icon={
+              isPlaying ? (
+                <Pause color='white' size={iconSize} />
+              ) : (
+                <CirclePlay color='white' size={iconSize} />
+              )
+            }
+            plain
+          />
 
-        {/* Time */}
-        <Box direction='row' align='center'>
-          <Text size='small'>
-            <time dateTime={`P${Math.round(sliderValue)}S`}>
-              {formatTimeStamp(sliderValue)}
-            </time>
-            {' / '}
-            <time dateTime={`P${Math.round(duration)}S`}>
-              {displayedDuration}
-            </time>
-          </Text>
+          {/* Time */}
+          <Box direction='row' align='center' style={{ minWidth: '66px' }}>
+            <Text size='small'>
+              <time dateTime={`P${Math.round(sliderValue)}S`}>
+                {formatTimeStamp(sliderValue)}
+              </time>
+              {' / '}
+              <time dateTime={`P${Math.round(duration)}S`}>
+                {displayedDuration}
+              </time>
+            </Text>
+          </Box>
         </Box>
 
         {/* Slider */}
-        <Box
-          basis='1/2'
-          direction='row'
-          align='center'
-          pad={{ right: 'xsmall' }}
-        >
+        <Box direction='row' align='center' pad={{ left: 'xsmall' }}>
           <RangeInput
             a11yTitle={t('SubjectViewer.VideoController.scrubber')}
             min={0}
@@ -98,71 +96,75 @@ const VideoController = ({
           />
         </Box>
 
-        {/* Rate */}
-        <Select
-          a11yTitle={t('SubjectViewer.VideoController.playbackSpeed')}
-          options={['0.25x', '0.5x', '1x']}
-          value={playbackRate}
-          onChange={({ option }) => onSpeedChange(option)}
-          plain
-          size='small'
-          style={{
-            color: 'white',
-            display: 'block',
-            width: '36px'
-          }}
-        />
+        <Box direction='row' gap='small'>
+          {/* Rate */}
+          <Select
+            a11yTitle={t('SubjectViewer.VideoController.playbackSpeed')}
+            options={['0.25x', '0.5x', '1x']}
+            value={playbackRate}
+            onChange={({ option }) => onSpeedChange(option)}
+            plain
+            size='small'
+            style={{
+              color: 'white',
+              display: 'block',
+              textAlign: 'right',
+              width: '36px'
+            }}
+          />
+
+          {/* Volume */}
+          <Box
+            align='center'
+            direction='row'
+            style={{
+              position: 'relative'
+            }}
+          >
+            <Button
+              icon={
+                volume > 0 ? (
+                  <Volume size={iconSize} color='white' />
+                ) : (
+                  <VolumeMute size={iconSize} color='white' />
+                )
+              }
+              plain
+              onClick={handleVolumeOpen}
+            />
+            {volumeOpen && (
+              <RangeInput
+                a11yTitle={t('SubjectViewer.VideoController.volume')}
+                min={0}
+                max={1}
+                step={0.25}
+                onChange={onVolumeChange}
+                style={{
+                  background: 'black',
+                  display: 'block',
+                  transform: 'rotate(-90deg)',
+                  transformOrigin: 'top left',
+                  position: 'absolute',
+                  left: '-100%',
+                  bottom: 0,
+                  width: '120px',
+                  height: '30px',
+                  padding: '8px'
+                }}
+                value={volume}
+              />
+            )}
+          </Box>
 
-        {/* Volume */}
-        <Box
-          align='center'
-          direction='row'
-          style={{
-            position: 'relative'
-          }}
-        >
+          {/* Full Screen */}
           <Button
-            icon={
-              volume > 0 ? (
-                <Volume size='small' color='white' />
-              ) : (
-                <VolumeMute size='small' color='white' />
-              )
-            }
+            icon={<Expand size={iconSize} color='white' />}
             plain
-            onClick={handleVolumeOpen}
+            onClick={handleFullScreen}
           />
-          {volumeOpen && (
-            <RangeInput
-              a11yTitle={t('SubjectViewer.VideoController.volume')}
-              min={0}
-              max={1}
-              step={0.25}
-              onChange={onVolumeChange}
-              style={{
-                background: 'black',
-                display: 'block',
-                transform: 'rotate(-90deg)',
-                transformOrigin: 'top left',
-                position: 'absolute',
-                left: '-100%',
-                bottom: 0,
-                width: '120px',
-                height: '30px',
-                padding: '8px'
-              }}
-              value={volume}
-            />
-          )}
         </Box>
-
-        {/* Full Screen */}
-        <Button
-          icon={<Expand size='small' color='white' />}
-          plain
-          onClick={handleFullScreen}
-        />
-      </Box>
+      </Grid>
+      {/* </Box> */}
     </ThemeContext.Extend>
   )
 }

From 1366596106eee362ca3b63900e91e70970cb00c1 Mon Sep 17 00:00:00 2001
From: Delilah Clement <delilahclement@gmail.com>
Date: Tue, 20 Sep 2022 17:22:55 -0500
Subject: [PATCH 25/34] clean up and add more unit tests

---
 .../components/SingleVideoViewer/README.md    |   5 +-
 .../SingleVideoViewerContainer.js             |   4 +-
 .../SingleVideoViewerContainer.spec.js        |  19 ++-
 .../components/VideoController/README.md      |  11 +-
 .../VideoController/VideoController.js        |  22 +++-
 .../VideoController/VideoController.spec.js   | 123 ++++++++++++++----
 .../components/VideoController/theme.js       |   2 +-
 .../src/translations/en/components.json       |   5 +-
 8 files changed, 147 insertions(+), 44 deletions(-)

diff --git a/packages/lib-classifier/src/components/Classifier/components/SubjectViewer/components/SingleVideoViewer/README.md b/packages/lib-classifier/src/components/Classifier/components/SubjectViewer/components/SingleVideoViewer/README.md
index a4798883d3..ca82232163 100644
--- a/packages/lib-classifier/src/components/Classifier/components/SubjectViewer/components/SingleVideoViewer/README.md
+++ b/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,11 +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.
 - `playbackRate`: (number) 1, 0.5, or 0.25 ratio determines the speed of video playback.
 - `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
 
diff --git a/packages/lib-classifier/src/components/Classifier/components/SubjectViewer/components/SingleVideoViewer/SingleVideoViewerContainer.js b/packages/lib-classifier/src/components/Classifier/components/SubjectViewer/components/SingleVideoViewer/SingleVideoViewerContainer.js
index f68e95a789..37b0c509b3 100644
--- a/packages/lib-classifier/src/components/Classifier/components/SubjectViewer/components/SingleVideoViewer/SingleVideoViewerContainer.js
+++ b/packages/lib-classifier/src/components/Classifier/components/SubjectViewer/components/SingleVideoViewer/SingleVideoViewerContainer.js
@@ -118,7 +118,7 @@ function SingleVideoViewerContainer({
     toggleVolumeOpen(!prevVolumeOpen)
   }
 
-  const handleFullScreen = () => {
+  const handleFullscreen = () => {
     if (fullscreen) {
       try {
         document.exitFullscreen()
@@ -216,7 +216,7 @@ function SingleVideoViewerContainer({
       <VideoController
         duration={duration}
         isPlaying={isPlaying}
-        handleFullScreen={handleFullScreen}
+        handleFullscreen={handleFullscreen}
         handleVolumeOpen={handleVolumeOpen}
         onPlayPause={handlePlayPause}
         onSliderChange={handleSliderChange}
diff --git a/packages/lib-classifier/src/components/Classifier/components/SubjectViewer/components/SingleVideoViewer/SingleVideoViewerContainer.spec.js b/packages/lib-classifier/src/components/Classifier/components/SubjectViewer/components/SingleVideoViewer/SingleVideoViewerContainer.spec.js
index c7e2051d42..2355f1797b 100644
--- a/packages/lib-classifier/src/components/Classifier/components/SubjectViewer/components/SingleVideoViewer/SingleVideoViewerContainer.spec.js
+++ b/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()
     })
diff --git a/packages/lib-classifier/src/components/Classifier/components/SubjectViewer/components/SingleVideoViewer/components/VideoController/README.md b/packages/lib-classifier/src/components/Classifier/components/SubjectViewer/components/SingleVideoViewer/components/VideoController/README.md
index f6620ffce0..a0b60277f3 100644
--- a/packages/lib-classifier/src/components/Classifier/components/SubjectViewer/components/SingleVideoViewer/components/VideoController/README.md
+++ b/packages/lib-classifier/src/components/Classifier/components/SubjectViewer/components/SingleVideoViewer/components/VideoController/README.md
@@ -1,6 +1,6 @@
 # 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.
+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
 
@@ -9,14 +9,19 @@ Used in SingleVideoViewer. Custom video controls are necessary for building draw
 - 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.
-- `onSliderMouseDown`: (func) Function passed from SingleVideoViewerContainer and called during mousedown event on Slider input.
-- `onSliderMouseUp`: (func) Function passed from SingleVideoViewerContainer and called during mouseup event on Slide input.
+- `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.
diff --git a/packages/lib-classifier/src/components/Classifier/components/SubjectViewer/components/SingleVideoViewer/components/VideoController/VideoController.js b/packages/lib-classifier/src/components/Classifier/components/SubjectViewer/components/SingleVideoViewer/components/VideoController/VideoController.js
index 14c3da081a..466f737c5e 100644
--- a/packages/lib-classifier/src/components/Classifier/components/SubjectViewer/components/SingleVideoViewer/components/VideoController/VideoController.js
+++ b/packages/lib-classifier/src/components/Classifier/components/SubjectViewer/components/SingleVideoViewer/components/VideoController/VideoController.js
@@ -13,7 +13,6 @@ import { CirclePlay, Expand, Volume, VolumeMute, Pause } from 'grommet-icons'
 import { useTranslation } from 'react-i18next'
 import { withThemeContext } from '@zooniverse/react-components'
 
-// add custom icon sizing here ?
 import controlsTheme from './theme'
 import formatTimeStamp from '@helpers/formatTimeStamp'
 
@@ -22,7 +21,7 @@ const iconSize = '16px'
 const VideoController = ({
   duration = 0,
   isPlaying = false,
-  handleFullScreen = () => true,
+  handleFullscreen = () => true,
   handleVolumeOpen = () => true,
   onPlayPause = () => true,
   onSpeedChange = () => true,
@@ -38,6 +37,10 @@ const VideoController = ({
     ? 'SubjectViewer.VideoController.pause'
     : 'SubjectViewer.VideoController.play'
 
+  const volumeButtonLabel = volumeOpen
+    ? 'SubjectViewer.VideoController.closeVolume'
+    : 'SubjectViewer.VideoController.openVolume'
+
   const sliderValue = timeStamp * duration
 
   const displayedDuration = useMemo(() => {
@@ -49,7 +52,7 @@ const VideoController = ({
       <Grid
         columns={['100px', 'flex', '120px']}
         pad='10px' // xsmall regardless of screen size
-        style={{ background: '#000000', borderTop: 'solid 1px white' }}
+        style={{ background: '#000000' }
       >
         <Box background='neutral-7' direction='row' gap='small'>
           {/* Play/Pause */}
@@ -122,6 +125,7 @@ const VideoController = ({
             }}
           >
             <Button
+              a11yTitle={t(volumeButtonLabel)}
               icon={
                 volume > 0 ? (
                   <Volume size={iconSize} color='white' />
@@ -134,7 +138,7 @@ const VideoController = ({
             />
             {volumeOpen && (
               <RangeInput
-                a11yTitle={t('SubjectViewer.VideoController.volume')}
+                a11yTitle={t('SubjectViewer.VideoController.volumeSlider')}
                 min={0}
                 max={1}
                 step={0.25}
@@ -158,13 +162,13 @@ const VideoController = ({
 
           {/* Full Screen */}
           <Button
+            a11yTitle={t('SubjectViewer.VideoController.fullscreen')}
             icon={<Expand size={iconSize} color='white' />}
             plain
-            onClick={handleFullScreen}
+            onClick={handleFullscreen}
           />
         </Box>
       </Grid>
-      {/* </Box> */}
     </ThemeContext.Extend>
   )
 }
@@ -172,12 +176,16 @@ const VideoController = ({
 VideoController.propTypes = {
   duration: PropTypes.number,
   isPlaying: PropTypes.bool,
+  handleFullscreen: PropTypes.func,
+  handleVolumeOpen: PropTypes.func,
   onPlayPause: PropTypes.func,
   onSpeedChange: PropTypes.func,
   onSliderChange: PropTypes.func,
   onVolumeChange: PropTypes.func,
   playbackRate: PropTypes.string,
-  timeStamp: PropTypes.number
+  timeStamp: PropTypes.number,
+  volume: PropTypes.number,
+  volumeOpen: PropTypes.bool
 }
 
 export default withThemeContext(VideoController)
diff --git a/packages/lib-classifier/src/components/Classifier/components/SubjectViewer/components/SingleVideoViewer/components/VideoController/VideoController.spec.js b/packages/lib-classifier/src/components/Classifier/components/SubjectViewer/components/SingleVideoViewer/components/VideoController/VideoController.spec.js
index 553335dda7..adb2820138 100644
--- a/packages/lib-classifier/src/components/Classifier/components/SubjectViewer/components/SingleVideoViewer/components/VideoController/VideoController.spec.js
+++ b/packages/lib-classifier/src/components/Classifier/components/SubjectViewer/components/SingleVideoViewer/components/VideoController/VideoController.spec.js
@@ -3,11 +3,13 @@ import { fireEvent, render, screen } from '@testing-library/react'
 import userEvent from '@testing-library/user-event'
 import sinon from 'sinon'
 import { expect } from 'chai'
+import { Grommet } from 'grommet'
 
 import formatTimeStamp from '@helpers/formatTimeStamp'
-import VideoController from './VideoController'
+import { VideoController } from './VideoController'
+import controlsTheme from './theme'
 
-describe.only('Component > VideoController', function () {
+describe('Component > VideoController', function () {
   let onPlayPauseSpy, onSpeedChangeSpy
   const subjectDuration = 10.0
   const subjectTimeStamp = 0.2
@@ -19,10 +21,12 @@ describe.only('Component > VideoController', function () {
 
   it('should display the video subject timestamp and duration', function () {
     render(
-      <VideoController
-        duration={subjectDuration}
-        timeStamp={subjectTimeStamp}
-      />
+      <Grommet them={controlsTheme}>
+        <VideoController
+          duration={subjectDuration}
+          timeStamp={subjectTimeStamp}
+        />
+      </Grommet>
     )
     const durationText = screen.getByText(formatTimeStamp(subjectDuration))
     expect(durationText).exists()
@@ -35,12 +39,14 @@ describe.only('Component > VideoController', function () {
   it('should handle play and pause', async function () {
     const user = userEvent.setup({ delay: null })
     const { rerender } = render(
-      <VideoController
-        duration={subjectDuration}
-        isPlaying={false}
-        onPlayPause={onPlayPauseSpy}
-        timeStamp={subjectTimeStamp}
-      />
+      <Grommet theme={controlsTheme}>
+        <VideoController
+          duration={subjectDuration}
+          isPlaying={false}
+          onPlayPause={onPlayPauseSpy}
+          timeStamp={subjectTimeStamp}
+        />
+      </Grommet>
     )
     const playButton = screen.getByLabelText(
       'SubjectViewer.VideoController.play'
@@ -52,12 +58,14 @@ describe.only('Component > VideoController', function () {
     expect(onPlayPauseSpy).to.have.been.calledOnce()
 
     rerender(
-      <VideoController
-        duration={subjectDuration}
-        isPlaying
-        onPlayPause={onPlayPauseSpy}
-        timeStamp={subjectTimeStamp}
-      />
+      <Grommet theme={controlsTheme}>
+        <VideoController
+          duration={subjectDuration}
+          isPlaying
+          onPlayPause={onPlayPauseSpy}
+          timeStamp={subjectTimeStamp}
+        />
+      </Grommet>
     )
 
     const pauseButton = screen.getByLabelText(
@@ -73,11 +81,13 @@ describe.only('Component > VideoController', function () {
   it('should change the playback rate', async function () {
     sinon.stub(window, 'scrollTo')
     render(
-      <VideoController
-        duration={subjectDuration}
-        timeStamp={subjectTimeStamp}
-        onSpeedChange={onSpeedChangeSpy}
-      />
+      <Grommet theme={controlsTheme}>
+        <VideoController
+          duration={subjectDuration}
+          timeStamp={subjectTimeStamp}
+          onSpeedChange={onSpeedChangeSpy}
+        />
+      </Grommet>
     )
 
     const speedInput = screen.getByLabelText(
@@ -89,5 +99,72 @@ describe.only('Component > VideoController', function () {
 
     // The following assertion does not work with a Grommet Select ¯\_(ツ)_/¯
     // expect(onSpeedChangeSpy).to.have.been.calledOnce()
+
+    window.scrollTo.restore()
+  })
+
+  it('should have a volume range input', async function () {
+    const user = userEvent.setup()
+    const handleVolumeOpenSpy = sinon.spy()
+
+    const { rerender } = render(
+      <Grommet theme={controlsTheme}>
+        <VideoController
+          duration={subjectDuration}
+          handleVolumeOpen={handleVolumeOpenSpy}
+          timeStamp={subjectTimeStamp}
+          volumeOpen={false}
+        />
+      </Grommet>
+    )
+
+    const volumeButton = screen.getByLabelText(
+      'SubjectViewer.VideoController.openVolume'
+    )
+
+    await user.pointer({
+      keys: '[MouseLeft]',
+      target: volumeButton
+    })
+
+    expect(handleVolumeOpenSpy).to.have.been.calledOnce()
+
+    rerender(
+      <Grommet theme={controlsTheme}>
+        <VideoController
+          duration={subjectDuration}
+          timeStamp={subjectTimeStamp}
+          volumeOpen
+        />
+      </Grommet>
+    )
+
+    const volumeRangeInput = screen.getByLabelText('SubjectViewer.VideoController.volumeSlider')
+    expect(volumeRangeInput).exists()
+  })
+
+  it('should have a fullscreen button', async function () {
+    const handleFullscreenSpy = sinon.spy()
+    const user = userEvent.setup()
+
+    render(
+      <Grommet theme={controlsTheme}>
+        <VideoController
+          duration={subjectDuration}
+          handleFullscreen={handleFullscreenSpy}
+          timeStamp={subjectTimeStamp}
+        />
+      </Grommet>
+    )
+
+    const fullscreenButton = screen.getByLabelText('SubjectViewer.VideoController.fullscreen')
+    expect(fullscreenButton).exists()
+
+    await user.pointer({
+      keys: '[MouseLeft]',
+      target: fullscreenButton
+    })
+
+    expect(handleFullscreenSpy).to.have.been.calledOnce()
   })
 })
diff --git a/packages/lib-classifier/src/components/Classifier/components/SubjectViewer/components/SingleVideoViewer/components/VideoController/theme.js b/packages/lib-classifier/src/components/Classifier/components/SubjectViewer/components/SingleVideoViewer/components/VideoController/theme.js
index 46f9e10219..ff3e4225d6 100644
--- a/packages/lib-classifier/src/components/Classifier/components/SubjectViewer/components/SingleVideoViewer/components/VideoController/theme.js
+++ b/packages/lib-classifier/src/components/Classifier/components/SubjectViewer/components/SingleVideoViewer/components/VideoController/theme.js
@@ -13,7 +13,7 @@ const controlsTheme = {
     background: 'black',
     icons: {
       color: 'white',
-      margin: 0
+      margin: '0'
     },
     options: {
       text: {
diff --git a/packages/lib-classifier/src/translations/en/components.json b/packages/lib-classifier/src/translations/en/components.json
index 9ae5de242d..bb8bdad092 100644
--- a/packages/lib-classifier/src/translations/en/components.json
+++ b/packages/lib-classifier/src/translations/en/components.json
@@ -212,7 +212,10 @@
       "playbackSpeed": "Video playback speed selection",
       "play": "Play video",
       "pause": "Pause video",
-      "volume": "Volume"
+      "openVolume": "Open Volume Slider",
+      "closeVolume": "Close Volume Slider",
+      "volumeSlider": "Volume Slider",
+      "fullscreen": "Show Video Fullscreen"
     },
     "ZoomControlButton": {
       "enable": "enable zoom",

From 06b748045d06264ec1f7b06d122dd40646e02294 Mon Sep 17 00:00:00 2001
From: Delilah Clement <delilahclement@gmail.com>
Date: Tue, 20 Sep 2022 17:57:07 -0500
Subject: [PATCH 26/34] fix typo

---
 .../components/VideoController/VideoController.js               | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/lib-classifier/src/components/Classifier/components/SubjectViewer/components/SingleVideoViewer/components/VideoController/VideoController.js b/packages/lib-classifier/src/components/Classifier/components/SubjectViewer/components/SingleVideoViewer/components/VideoController/VideoController.js
index 466f737c5e..6eefcf83f9 100644
--- a/packages/lib-classifier/src/components/Classifier/components/SubjectViewer/components/SingleVideoViewer/components/VideoController/VideoController.js
+++ b/packages/lib-classifier/src/components/Classifier/components/SubjectViewer/components/SingleVideoViewer/components/VideoController/VideoController.js
@@ -52,7 +52,7 @@ const VideoController = ({
       <Grid
         columns={['100px', 'flex', '120px']}
         pad='10px' // xsmall regardless of screen size
-        style={{ background: '#000000' }
+        style={{ background: '#000000' }}
       >
         <Box background='neutral-7' direction='row' gap='small'>
           {/* Play/Pause */}

From 33d0fc0d87894ea1411d706ea6d84648c6489fc0 Mon Sep 17 00:00:00 2001
From: Delilah Clement <delilahclement@gmail.com>
Date: Thu, 22 Sep 2022 11:17:06 -0500
Subject: [PATCH 27/34] clean up merge from 'master'

---
 .../SingleVideoViewer/SingleVideoViewerContainer.js       | 8 +-------
 1 file changed, 1 insertion(+), 7 deletions(-)

diff --git a/packages/lib-classifier/src/components/Classifier/components/SubjectViewer/components/SingleVideoViewer/SingleVideoViewerContainer.js b/packages/lib-classifier/src/components/Classifier/components/SubjectViewer/components/SingleVideoViewer/SingleVideoViewerContainer.js
index ff4ddc5030..dcea7b7849 100644
--- a/packages/lib-classifier/src/components/Classifier/components/SubjectViewer/components/SingleVideoViewer/SingleVideoViewerContainer.js
+++ b/packages/lib-classifier/src/components/Classifier/components/SubjectViewer/components/SingleVideoViewer/SingleVideoViewerContainer.js
@@ -77,12 +77,7 @@ function SingleVideoViewerContainer({
     }
   }
 
-  async getVideoSize() {
-    const vid = await this.preload()
-    const svg = this.videoViewer.current
-    const { width: clientWidth, height: clientHeight } = svg
-      ? svg.getBoundingClientRect()
-      : {}
+  const enableDrawing = enableInteractionLayer && loadingState === asyncStates.success
 
   /* ==================== react-player ==================== */
 
@@ -239,7 +234,6 @@ function SingleVideoViewerContainer({
 SingleVideoViewerContainer.propTypes = {
   enableInteractionLayer: PropTypes.bool,
   loadingState: PropTypes.string,
-  loadingState: PropTypes.string,
   onError: PropTypes.func,
   onKeyDown: PropTypes.func,
   onReady: PropTypes.func,

From 0e32db1dd6b2b902775f8644b77454faec6c90fb Mon Sep 17 00:00:00 2001
From: Delilah Clement <delilahclement@gmail.com>
Date: Mon, 26 Sep 2022 11:07:47 -0500
Subject: [PATCH 28/34] fix missing import

---
 .../components/SingleVideoViewer/SingleVideoViewerContainer.js  | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/lib-classifier/src/components/Classifier/components/SubjectViewer/components/SingleVideoViewer/SingleVideoViewerContainer.js b/packages/lib-classifier/src/components/Classifier/components/SubjectViewer/components/SingleVideoViewer/SingleVideoViewerContainer.js
index 97cc9af1bd..b9d558672d 100644
--- a/packages/lib-classifier/src/components/Classifier/components/SubjectViewer/components/SingleVideoViewer/SingleVideoViewerContainer.js
+++ b/packages/lib-classifier/src/components/Classifier/components/SubjectViewer/components/SingleVideoViewer/SingleVideoViewerContainer.js
@@ -2,7 +2,7 @@ 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'

From afc2bfe4755b7fae9f9e8f1d662179bad926135a Mon Sep 17 00:00:00 2001
From: Delilah C <23665803+goplayoutside3@users.noreply.github.com>
Date: Mon, 10 Oct 2022 14:19:20 -0500
Subject: [PATCH 29/34] fix small typo in SingleVideoViewer's README

Co-authored-by: Shaun A. Noordin <shaunanoordin@users.noreply.github.com>
---
 .../SubjectViewer/components/SingleVideoViewer/README.md        | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/lib-classifier/src/components/Classifier/components/SubjectViewer/components/SingleVideoViewer/README.md b/packages/lib-classifier/src/components/Classifier/components/SubjectViewer/components/SingleVideoViewer/README.md
index ca82232163..4f3a6bcbd7 100644
--- a/packages/lib-classifier/src/components/Classifier/components/SubjectViewer/components/SingleVideoViewer/README.md
+++ b/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 the `react-player` component 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 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.

From c8be69ad71e0f4be72f07547e522f2f5b2b62b6c Mon Sep 17 00:00:00 2001
From: Delilah Clement <delilahclement@gmail.com>
Date: Mon, 10 Oct 2022 14:45:47 -0500
Subject: [PATCH 30/34] implement change suggestions from PR review

---
 .../components/SingleVideoViewer/README.md       |  2 +-
 .../SingleVideoViewerContainer.js                | 16 ++++++++--------
 .../VideoController/VideoController.js           |  6 +++---
 3 files changed, 12 insertions(+), 12 deletions(-)

diff --git a/packages/lib-classifier/src/components/Classifier/components/SubjectViewer/components/SingleVideoViewer/README.md b/packages/lib-classifier/src/components/Classifier/components/SubjectViewer/components/SingleVideoViewer/README.md
index 4f3a6bcbd7..8ff6471bf5 100644
--- a/packages/lib-classifier/src/components/Classifier/components/SubjectViewer/components/SingleVideoViewer/README.md
+++ b/packages/lib-classifier/src/components/Classifier/components/SubjectViewer/components/SingleVideoViewer/README.md
@@ -26,7 +26,7 @@ State Variables
 - `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.
-- `playbackRate`: (number) 1, 0.5, or 0.25 ratio determines the speed of video playback.
+- `playbackSpeed`: (string) 1x, 0.5x, or 0.25x ratio determines the speed of video playback.
 - `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.
diff --git a/packages/lib-classifier/src/components/Classifier/components/SubjectViewer/components/SingleVideoViewer/SingleVideoViewerContainer.js b/packages/lib-classifier/src/components/Classifier/components/SubjectViewer/components/SingleVideoViewer/SingleVideoViewerContainer.js
index b9d558672d..147010b2e3 100644
--- a/packages/lib-classifier/src/components/Classifier/components/SubjectViewer/components/SingleVideoViewer/SingleVideoViewerContainer.js
+++ b/packages/lib-classifier/src/components/Classifier/components/SubjectViewer/components/SingleVideoViewer/SingleVideoViewerContainer.js
@@ -42,7 +42,7 @@ function SingleVideoViewerContainer({
   const [duration, setDuration] = useState(0)
   const [fullscreen, setFullscreen] = useState(false)
   const [isPlaying, setIsPlaying] = useState(false)
-  const [playbackRate, setPlaybackRate] = useState('1x')
+  const [playbackSpeed, setPlaybackSpeed] = useState('1x')
   const [timeStamp, setTimeStamp] = useState(0)
   const [videoHeight, setVideoHeight] = useState(0)
   const [videoWidth, setVideoWidth] = useState(0)
@@ -108,13 +108,13 @@ function SingleVideoViewerContainer({
     setIsPlaying(!prevStatePlaying)
   }
 
-  const handleSpeedChange = rate => {
-    setPlaybackRate(rate)
+  const handleSpeedChange = speed => {
+    setPlaybackSpeed(speed)
   }
 
   const handleSliderChange = e => {
     const newTimeStamp = e.target.value
-    playerRef?.current.seekTo(newTimeStamp, 'seconds')
+    playerRef?.current?.seekTo(newTimeStamp, 'seconds')
   }
 
   const handleVolume = e => {
@@ -148,7 +148,7 @@ function SingleVideoViewerContainer({
     onError(error)
   }
 
-  const sanitizedRate = Number(playbackRate.slice(0, -1))
+  const sanitizedSpeed = Number(playbackSpeed.slice(0, -1))
 
   /* Memoized so onProgress() and setTimeStamp() don't trigger each other */
   const memoizedViewer = useMemo(() => (
@@ -161,7 +161,7 @@ function SingleVideoViewerContainer({
       onReady={onReactPlayerReady}
       onProgress={handleVideoProgress}
       playing={isPlaying}
-      playbackRate={sanitizedRate}
+      playbackSpeed={sanitizedSpeed}
       progressInterval={100} // milliseconds
       ref={playerRef}
       width='100%'
@@ -179,7 +179,7 @@ function SingleVideoViewerContainer({
         }
       }}
     />
-  ), [isPlaying, playbackRate, videoSrc, volume])
+  ), [isPlaying, playbackSpeed, videoSrc, volume])
 
   const canvas = transformLayer?.current
   const interactionLayerScale = clientWidth / videoWidth
@@ -235,7 +235,7 @@ function SingleVideoViewerContainer({
         onSliderChange={handleSliderChange}
         onSpeedChange={handleSpeedChange}
         onVolumeChange={handleVolume}
-        playbackRate={playbackRate}
+        playbackSpeed={playbackSpeed}
         timeStamp={timeStamp}
         volume={volume}
         volumeOpen={volumeOpen}
diff --git a/packages/lib-classifier/src/components/Classifier/components/SubjectViewer/components/SingleVideoViewer/components/VideoController/VideoController.js b/packages/lib-classifier/src/components/Classifier/components/SubjectViewer/components/SingleVideoViewer/components/VideoController/VideoController.js
index 6eefcf83f9..b169c2a7a3 100644
--- a/packages/lib-classifier/src/components/Classifier/components/SubjectViewer/components/SingleVideoViewer/components/VideoController/VideoController.js
+++ b/packages/lib-classifier/src/components/Classifier/components/SubjectViewer/components/SingleVideoViewer/components/VideoController/VideoController.js
@@ -27,7 +27,7 @@ const VideoController = ({
   onSpeedChange = () => true,
   onSliderChange = () => true,
   onVolumeChange = () => true,
-  playbackRate = '1x',
+  playbackSpeed = '1x',
   timeStamp = 0, // A percentage between 0 and 1
   volume = 1,
   volumeOpen = false
@@ -104,7 +104,7 @@ const VideoController = ({
           <Select
             a11yTitle={t('SubjectViewer.VideoController.playbackSpeed')}
             options={['0.25x', '0.5x', '1x']}
-            value={playbackRate}
+            value={playbackSpeed}
             onChange={({ option }) => onSpeedChange(option)}
             plain
             size='small'
@@ -182,7 +182,7 @@ VideoController.propTypes = {
   onSpeedChange: PropTypes.func,
   onSliderChange: PropTypes.func,
   onVolumeChange: PropTypes.func,
-  playbackRate: PropTypes.string,
+  playbackSpeed: PropTypes.string,
   timeStamp: PropTypes.number,
   volume: PropTypes.number,
   volumeOpen: PropTypes.bool

From a5e35449287f25ff9d3df6f7366c06b2836d88a7 Mon Sep 17 00:00:00 2001
From: Delilah C <23665803+goplayoutside3@users.noreply.github.com>
Date: Mon, 10 Oct 2022 14:47:09 -0500
Subject: [PATCH 31/34] Update README of formatTimeStamp()

Co-authored-by: Shaun A. Noordin <shaunanoordin@users.noreply.github.com>
---
 packages/lib-classifier/src/helpers/formatTimeStamp/README.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/lib-classifier/src/helpers/formatTimeStamp/README.md b/packages/lib-classifier/src/helpers/formatTimeStamp/README.md
index cd4f751a71..86d3a32a1c 100644
--- a/packages/lib-classifier/src/helpers/formatTimeStamp/README.md
+++ b/packages/lib-classifier/src/helpers/formatTimeStamp/README.md
@@ -10,7 +10,7 @@ The Zooniverse video player has a slider who's percentage `timeStamp` values are
 
 E.g. `0.287` or `0.962`
 
-**duration:** Optional. Type: number. This is the total length of the video. This must be a number.
+**duration:** Optional. Type: number. This is the total length of the video, in seconds. This must be a number.
 
 E.g. `4.025` or `8.480`
 

From f6902d7d8afd7d11c90d72688fdfa474aa85e449 Mon Sep 17 00:00:00 2001
From: Delilah C <23665803+goplayoutside3@users.noreply.github.com>
Date: Mon, 10 Oct 2022 14:47:45 -0500
Subject: [PATCH 32/34] update grammar of formatTimeStamp() README

Co-authored-by: Shaun A. Noordin <shaunanoordin@users.noreply.github.com>
---
 packages/lib-classifier/src/helpers/formatTimeStamp/README.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/lib-classifier/src/helpers/formatTimeStamp/README.md b/packages/lib-classifier/src/helpers/formatTimeStamp/README.md
index 86d3a32a1c..f66ff27b0f 100644
--- a/packages/lib-classifier/src/helpers/formatTimeStamp/README.md
+++ b/packages/lib-classifier/src/helpers/formatTimeStamp/README.md
@@ -2,7 +2,7 @@
 
 A helper function to convert a number in seconds to a human readable string `mm:ss`. We're assuming the timestamp of a video subject is always less than 1 hour.
 
-The Zooniverse video player has a slider who's percentage `timeStamp` values are 0 to 1. As a video subject plays, the slider input will progress from 0 (start of the video) to 1 (end of the video). This function converts the decimal number to a human readable timestamp. The returned value is used in the VideoController and sent to the store as a property for temporal drawing tools.
+The Zooniverse video player has a slider whose percentage `timeStamp` values are 0 to 1. As a video subject plays, the slider input will progress from 0 (start of the video) to 1 (end of the video). This function converts the decimal number to a human readable timestamp. The returned value is used in the VideoController and sent to the store as a property for temporal drawing tools.
 
 ### accepts
 

From 47420a0745d2c1a9dbd53a9ff887bd6d848a827e Mon Sep 17 00:00:00 2001
From: Delilah Clement <delilahclement@gmail.com>
Date: Mon, 10 Oct 2022 15:19:56 -0500
Subject: [PATCH 33/34] add ADR 45 + custom controls only display with drawing
 tools enabled

---
 docs/arch/adr-45.md                           | 20 +++++++++++
 .../SingleVideoViewerContainer.js             | 33 +++++++++++--------
 .../components/VideoController/README.md      |  1 +
 .../VideoController/VideoController.js        | 15 +++++----
 4 files changed, 49 insertions(+), 20 deletions(-)
 create mode 100644 docs/arch/adr-45.md

diff --git a/docs/arch/adr-45.md b/docs/arch/adr-45.md
new file mode 100644
index 0000000000..465f4d3757
--- /dev/null
+++ b/docs/arch/adr-45.md
@@ -0,0 +1,20 @@
+# ADR 45: Custom Video Controls
+
+10 Oct 2022
+
+## Context
+The video subject viewer was built as part of the migration of projects with video subjects from PFE to FEM. In PFE, video subjects are displayed with native browser controls plus custom playback speed buttons.
+
+In FEM, custom video controls are planned for building drawing tools layers on top of a video subject. The `react-player` used to display a video subject has built-in (native browser) 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.
+
+## Decision
+The end goal for the video subject viewer is to always display custom video controls for consistency - regardless if a project uses drawing tools with a video subject. However, migration of projects from PFE to FEM requires seemlessly moving video subjects to FEM's video subject viewer. There are no launched projects that use video subjects + drawing tools and the custom controls are incomplete. Therefore, further development of custom video controls will be paused and FEM's video subject viewer will use the same native browser controls as PFE for already-launched non-drawing-tools projects.
+
+See [PR 3684](https://github.com/zooniverse/front-end-monorepo/pull/3684) for more discussion.
+
+## Consequences
+The video subject viewer will be deployed without custom video controls for now. Future work toward projects with video subjects + drawing tools is tracked in the [Video Annotations](https://github.com/zooniverse/front-end-monorepo/projects/13) project board.
+
+## Status
+Accepted
+
diff --git a/packages/lib-classifier/src/components/Classifier/components/SubjectViewer/components/SingleVideoViewer/SingleVideoViewerContainer.js b/packages/lib-classifier/src/components/Classifier/components/SubjectViewer/components/SingleVideoViewer/SingleVideoViewerContainer.js
index 147010b2e3..edbc5e1c6c 100644
--- a/packages/lib-classifier/src/components/Classifier/components/SubjectViewer/components/SingleVideoViewer/SingleVideoViewerContainer.js
+++ b/packages/lib-classifier/src/components/Classifier/components/SubjectViewer/components/SingleVideoViewer/SingleVideoViewerContainer.js
@@ -226,20 +226,25 @@ function SingleVideoViewerContainer({
         : (
           <Box>{t('SubjectViewer.SingleVideoViewerContainer.error')}</Box>
           )}
-      <VideoController
-        duration={duration}
-        isPlaying={isPlaying}
-        handleFullscreen={handleFullscreen}
-        handleVolumeOpen={handleVolumeOpen}
-        onPlayPause={handlePlayPause}
-        onSliderChange={handleSliderChange}
-        onSpeedChange={handleSpeedChange}
-        onVolumeChange={handleVolume}
-        playbackSpeed={playbackSpeed}
-        timeStamp={timeStamp}
-        volume={volume}
-        volumeOpen={volumeOpen}
-      />
+
+      {/** See ADR 45 for notes on custom video controls */}
+      {enableDrawing && (
+        <VideoController
+          duration={duration}
+          enableDrawing={enableDrawing}
+          isPlaying={isPlaying}
+          handleFullscreen={handleFullscreen}
+          handleVolumeOpen={handleVolumeOpen}
+          onPlayPause={handlePlayPause}
+          onSliderChange={handleSliderChange}
+          onSpeedChange={handleSpeedChange}
+          onVolumeChange={handleVolume}
+          playbackSpeed={playbackSpeed}
+          timeStamp={timeStamp}
+          volume={volume}
+          volumeOpen={volumeOpen}
+        />
+      )}
     </>
   )
 }
diff --git a/packages/lib-classifier/src/components/Classifier/components/SubjectViewer/components/SingleVideoViewer/components/VideoController/README.md b/packages/lib-classifier/src/components/Classifier/components/SubjectViewer/components/SingleVideoViewer/components/VideoController/README.md
index a0b60277f3..b6efec0513 100644
--- a/packages/lib-classifier/src/components/Classifier/components/SubjectViewer/components/SingleVideoViewer/components/VideoController/README.md
+++ b/packages/lib-classifier/src/components/Classifier/components/SubjectViewer/components/SingleVideoViewer/components/VideoController/README.md
@@ -14,6 +14,7 @@ Used in SingleVideoViewer. Custom video controls are necessary for building draw
 
 ## Props
 - `duration`: (number) Duration of video subject in seconds.
+- `enableDrawing`: (boolean) Determines whether or not to display the fullscreen button. Drawing tools do not work with fullscreen.
 - `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.
diff --git a/packages/lib-classifier/src/components/Classifier/components/SubjectViewer/components/SingleVideoViewer/components/VideoController/VideoController.js b/packages/lib-classifier/src/components/Classifier/components/SubjectViewer/components/SingleVideoViewer/components/VideoController/VideoController.js
index b169c2a7a3..134a102fcf 100644
--- a/packages/lib-classifier/src/components/Classifier/components/SubjectViewer/components/SingleVideoViewer/components/VideoController/VideoController.js
+++ b/packages/lib-classifier/src/components/Classifier/components/SubjectViewer/components/SingleVideoViewer/components/VideoController/VideoController.js
@@ -20,6 +20,7 @@ const iconSize = '16px'
 
 const VideoController = ({
   duration = 0,
+  enableDrawing = false,
   isPlaying = false,
   handleFullscreen = () => true,
   handleVolumeOpen = () => true,
@@ -161,12 +162,14 @@ const VideoController = ({
           </Box>
 
           {/* Full Screen */}
-          <Button
-            a11yTitle={t('SubjectViewer.VideoController.fullscreen')}
-            icon={<Expand size={iconSize} color='white' />}
-            plain
-            onClick={handleFullscreen}
-          />
+          {enableDrawing && (
+            <Button
+              a11yTitle={t('SubjectViewer.VideoController.fullscreen')}
+              icon={<Expand size={iconSize} color='white' />}
+              plain
+              onClick={handleFullscreen}
+            />
+          )}
         </Box>
       </Grid>
     </ThemeContext.Extend>

From 134c2033ce634b141df453798cf1d7e6280e50ca Mon Sep 17 00:00:00 2001
From: Delilah Clement <delilahclement@gmail.com>
Date: Mon, 10 Oct 2022 16:06:48 -0500
Subject: [PATCH 34/34] add more stories and unit tests to
 SingleVideoViewerContainer

---
 packages/lib-classifier/package.json          |  1 +
 .../SingleVideoViewerContainer.js             |  4 +-
 .../SingleVideoViewerContainer.spec.js        | 61 ++++--------
 .../SingleVideoViewerContainer.stories.js     | 92 +++++++++++++------
 .../VideoController/VideoController.js        |  1 +
 .../VideoController/VideoController.spec.js   |  3 +-
 yarn.lock                                     |  8 +-
 7 files changed, 93 insertions(+), 77 deletions(-)

diff --git a/packages/lib-classifier/package.json b/packages/lib-classifier/package.json
index e3b60e0f0d..f0e4d70fe1 100644
--- a/packages/lib-classifier/package.json
+++ b/packages/lib-classifier/package.json
@@ -66,6 +66,7 @@
     "@storybook/builder-webpack5": "~6.5.0",
     "@storybook/manager-webpack5": "~6.5.0",
     "@storybook/react": "~6.5.0",
+    "@storybook/testing-react": "~1.3.0",
     "@testing-library/dom": "~8.18.0",
     "@testing-library/react": "~12.1.2",
     "@testing-library/react-hooks": "~8.0.0",
diff --git a/packages/lib-classifier/src/components/Classifier/components/SubjectViewer/components/SingleVideoViewer/SingleVideoViewerContainer.js b/packages/lib-classifier/src/components/Classifier/components/SubjectViewer/components/SingleVideoViewer/SingleVideoViewerContainer.js
index edbc5e1c6c..121193a9a6 100644
--- a/packages/lib-classifier/src/components/Classifier/components/SubjectViewer/components/SingleVideoViewer/SingleVideoViewerContainer.js
+++ b/packages/lib-classifier/src/components/Classifier/components/SubjectViewer/components/SingleVideoViewer/SingleVideoViewerContainer.js
@@ -153,7 +153,7 @@ function SingleVideoViewerContainer({
   /* Memoized so onProgress() and setTimeStamp() don't trigger each other */
   const memoizedViewer = useMemo(() => (
     <ReactPlayer
-      controls={false}
+      controls={!enableDrawing}
       height='100%'
       onDuration={handleVideoDuration}
       onEnded={handleVideoEnded}
@@ -179,7 +179,7 @@ function SingleVideoViewerContainer({
         }
       }}
     />
-  ), [isPlaying, playbackSpeed, videoSrc, volume])
+  ), [enableDrawing, isPlaying, playbackSpeed, videoSrc, volume])
 
   const canvas = transformLayer?.current
   const interactionLayerScale = clientWidth / videoWidth
diff --git a/packages/lib-classifier/src/components/Classifier/components/SubjectViewer/components/SingleVideoViewer/SingleVideoViewerContainer.spec.js b/packages/lib-classifier/src/components/Classifier/components/SubjectViewer/components/SingleVideoViewer/SingleVideoViewerContainer.spec.js
index 2355f1797b..888ff1ac52 100644
--- a/packages/lib-classifier/src/components/Classifier/components/SubjectViewer/components/SingleVideoViewer/SingleVideoViewerContainer.spec.js
+++ b/packages/lib-classifier/src/components/Classifier/components/SubjectViewer/components/SingleVideoViewer/SingleVideoViewerContainer.spec.js
@@ -1,62 +1,29 @@
 import React from 'react'
 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'
+import * as stories from './SingleVideoViewerContainer.stories'
+import { composeStories } from '@storybook/testing-react'
 
 describe('Component > SingleVideoViewerContainer', function () {
-  describe('with a video subject src', function () {
-    const mockSubject = Factory.build('subject', {
-      locations: [
-        {
-          'video/mp4':
-            'https://panoptes-uploads.zooniverse.org/subject_location/239f17f7-acf9-49f1-9873-266a80d29c33.mp4'
-        }
-      ]
-    })
-
-    const store = mockStore({
-      subject: mockSubject
-    })
+  const { Default, WithDrawingEnabled, NoSubject } = composeStories(stories)
 
-    it('should render a video html element with subject url as src', async function () {
-      const { container } = render(
-        <Provider classifierStore={store}>
-          <Grommet theme={zooTheme}>
-            <SingleVideoViewerContainer subject={mockSubject} />
-          </Grommet>
-        </Provider>
-      )
+  describe('with a video subject src and drawing tools disabled', function () {
+    it('should render a video html element and no custom controls', async function () {
+      const { container, queryByTestId } = render(<Default />)
       // We need to wait for React Player to be ready
       await waitFor(() => {
         const videoElement = container.querySelector('video')
         expect(videoElement).exists()
+        const customControls = queryByTestId('video subject viewer custom controls')
+        expect(customControls).to.be.null()
       })
     })
   })
 
   describe('without a video subject src', function () {
-    const emptySubject = Factory.build('subject', {
-      locations: []
-    })
-
-    const store = mockStore({
-      subject: emptySubject
-    })
-
     it('should display an error message and no video html element ', function () {
-      const { container } = render(
-        <Provider classifierStore={store}>
-          <Grommet theme={zooTheme}>
-            <SingleVideoViewerContainer />
-          </Grommet>
-        </Provider>
-      )
+      const { container } = render(<NoSubject />)
+
       const videoElement = container.querySelector('video')
       const errorMessage = screen.getByText(
         'SubjectViewer.SingleVideoViewerContainer.error'
@@ -65,4 +32,12 @@ describe('Component > SingleVideoViewerContainer', function () {
       expect(errorMessage).exists()
     })
   })
+
+  describe('with drawing tools enabled', function () {
+    it('should display custom video controls', function () {
+      const { getByTestId } = render(<WithDrawingEnabled />)
+      const customControls = getByTestId('video subject viewer custom controls')
+      expect(customControls).exists()
+    })
+  })
 })
diff --git a/packages/lib-classifier/src/components/Classifier/components/SubjectViewer/components/SingleVideoViewer/SingleVideoViewerContainer.stories.js b/packages/lib-classifier/src/components/Classifier/components/SubjectViewer/components/SingleVideoViewer/SingleVideoViewerContainer.stories.js
index 0009eca714..682f1a81d0 100644
--- a/packages/lib-classifier/src/components/Classifier/components/SubjectViewer/components/SingleVideoViewer/SingleVideoViewerContainer.stories.js
+++ b/packages/lib-classifier/src/components/Classifier/components/SubjectViewer/components/SingleVideoViewer/SingleVideoViewerContainer.stories.js
@@ -2,6 +2,10 @@ import React from 'react'
 import zooTheme from '@zooniverse/grommet-theme'
 import { Box, Grommet } from 'grommet'
 import { Factory } from 'rosie'
+import { Provider } from 'mobx-react'
+
+import mockStore from '@test/mockStore'
+import { WorkflowFactory } from '@test/factories'
 
 import SingleVideoViewerContainer from './'
 
@@ -13,16 +17,44 @@ const background = {
 const subject = 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'
     }
   ]
 })
 
+const drawingWorkflow = WorkflowFactory.build({
+  display_name: 'Video Drawing Task',
+  first_task: 'T0',
+  tasks: {
+    T0: {
+      help: '',
+      instruction: 'Draw on the video',
+      tools: [
+        {
+          color: '#000000',
+          label: 'Mock Tool',
+          type: 'ellipse'
+        }
+      ],
+      type: 'drawing'
+    }
+  }
+})
+
+const noDrawingStore = mockStore({
+  subject: subject
+})
+
+const drawingStore = mockStore({
+  subject: subject,
+  workflow: drawingWorkflow
+})
+
 export default {
   title: 'Subject Viewers / SingleVideoViewer',
   component: SingleVideoViewerContainer,
   args: {
-    enableInteractionLayer: false,
     dark: false
   },
   parameters: {
@@ -32,42 +64,48 @@ export default {
   }
 }
 
-export const Default = ({
-  enableInteractionLayer,
-  dark,
-  onError,
-  onReady
-}) => {
+export const Default = ({ dark, onError, onReady }) => {
   const themeMode = dark ? 'dark' : 'light'
   return (
     <Grommet background={background} theme={zooTheme} themeMode={themeMode}>
-      <Box width='large'>
-        <SingleVideoViewerContainer
-          enableInteractionLayer={enableInteractionLayer}
-          onError={onError}
-          onReady={onReady}
-          subject={subject}
-        />
-      </Box>
+      <Provider classifierStore={noDrawingStore}>
+        <Box width='large'>
+          <SingleVideoViewerContainer
+            loadingState='success'
+            onError={onError}
+            onReady={onReady}
+            subject={subject}
+          />
+        </Box>
+      </Provider>
+    </Grommet>
+  )
+}
+
+export const WithDrawingEnabled = ({ dark, onError, onReady }) => {
+  const themeMode = dark ? 'dark' : 'light'
+  return (
+    <Grommet background={background} theme={zooTheme} themeMode={themeMode}>
+      <Provider classifierStore={drawingStore}>
+        <Box width='large'>
+          <SingleVideoViewerContainer
+            loadingState='success'
+            onError={onError}
+            onReady={onReady}
+            subject={subject}
+          />
+        </Box>
+      </Provider>
     </Grommet>
   )
 }
 
-export const NoSubject = ({
-  enableInteractionLayer,
-  dark,
-  onError,
-  onReady
-}) => {
+export const NoSubject = ({ dark, onError, onReady }) => {
   const themeMode = dark ? 'dark' : 'light'
   return (
     <Grommet background={background} theme={zooTheme} themeMode={themeMode}>
       <Box width='large'>
-        <SingleVideoViewerContainer
-          enableInteractionLayer={enableInteractionLayer}
-          onError={onError}
-          onReady={onReady}
-        />
+        <SingleVideoViewerContainer onError={onError} onReady={onReady} />
       </Box>
     </Grommet>
   )
diff --git a/packages/lib-classifier/src/components/Classifier/components/SubjectViewer/components/SingleVideoViewer/components/VideoController/VideoController.js b/packages/lib-classifier/src/components/Classifier/components/SubjectViewer/components/SingleVideoViewer/components/VideoController/VideoController.js
index 134a102fcf..e4decb80e9 100644
--- a/packages/lib-classifier/src/components/Classifier/components/SubjectViewer/components/SingleVideoViewer/components/VideoController/VideoController.js
+++ b/packages/lib-classifier/src/components/Classifier/components/SubjectViewer/components/SingleVideoViewer/components/VideoController/VideoController.js
@@ -52,6 +52,7 @@ const VideoController = ({
     <ThemeContext.Extend value={controlsTheme}>
       <Grid
         columns={['100px', 'flex', '120px']}
+        data-testid='video subject viewer custom controls'
         pad='10px' // xsmall regardless of screen size
         style={{ background: '#000000' }}
       >
diff --git a/packages/lib-classifier/src/components/Classifier/components/SubjectViewer/components/SingleVideoViewer/components/VideoController/VideoController.spec.js b/packages/lib-classifier/src/components/Classifier/components/SubjectViewer/components/SingleVideoViewer/components/VideoController/VideoController.spec.js
index adb2820138..6604cd9832 100644
--- a/packages/lib-classifier/src/components/Classifier/components/SubjectViewer/components/SingleVideoViewer/components/VideoController/VideoController.spec.js
+++ b/packages/lib-classifier/src/components/Classifier/components/SubjectViewer/components/SingleVideoViewer/components/VideoController/VideoController.spec.js
@@ -143,7 +143,7 @@ describe('Component > VideoController', function () {
     expect(volumeRangeInput).exists()
   })
 
-  it('should have a fullscreen button', async function () {
+  it('should have a fullscreen button if drawing tools are enabled', async function () {
     const handleFullscreenSpy = sinon.spy()
     const user = userEvent.setup()
 
@@ -151,6 +151,7 @@ describe('Component > VideoController', function () {
       <Grommet theme={controlsTheme}>
         <VideoController
           duration={subjectDuration}
+          enableDrawing
           handleFullscreen={handleFullscreenSpy}
           timeStamp={subjectTimeStamp}
         />
diff --git a/yarn.lock b/yarn.lock
index 476f65be53..714e738462 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -16733,10 +16733,10 @@ trim-trailing-lines@^1.0.0:
   resolved "https://registry.yarnpkg.com/trim-trailing-lines/-/trim-trailing-lines-1.1.4.tgz#bd4abbec7cc880462f10b2c8b5ce1d8d1ec7c2c0"
   integrity sha512-rjUWSqnfTNrjbB9NQWfPMH/xRK1deHeGsHoVfpxJ++XeYXE0d6B1En37AHfw3jtfTU7dzMzZL2jjpe8Qb5gLIQ==
 
-trim@0.0.1, trim@~1.0:
-  version "1.0.1"
-  resolved "https://registry.yarnpkg.com/trim/-/trim-1.0.1.tgz#68e78f6178ccab9687a610752f4f5e5a7022ee8c"
-  integrity sha512-3JVP2YVqITUisXblCDq/Bi4P9457G/sdEamInkyvCsjbTcXLXIiG7XCb4kGMFWh6JGXesS3TKxOPtrncN/xe8w==
+trim@0.0.1:
+  version "0.0.1"
+  resolved "https://registry.yarnpkg.com/trim/-/trim-0.0.1.tgz#5858547f6b290757ee95cccc666fb50084c460dd"
+  integrity sha512-YzQV+TZg4AxpKxaTHK3c3D+kRDCGVEE7LemdlQZoQXn0iennk10RsIoY6ikzAqJTc9Xjl9C1/waHom/J86ziAQ==
 
 triple-beam@^1.3.0:
   version "1.3.0"