Merge pull request #2759 from SUI-Components/feat/videoPlayer-loop

feat(components/atom/videoPlayer): Add loop attribute
SUI-Components · Sep 16, 2024 · 7f64238 · 7f64238
2 parents 9acf45b + be67bb5
commit 7f64238
Show file tree

Hide file tree

Showing 3 changed files with 30 additions and 3 deletions.
diff --git a/components/atom/videoPlayer/demo/DemoPlayer.js b/components/atom/videoPlayer/demo/DemoPlayer.js
@@ -9,6 +9,7 @@ const DemoPlayer = ({src}) => {
   const [autoPlay, setAutoPlay] = useState(false)
   const [controls, setControls] = useState(true)
   const [muted, setMuted] = useState(false)
+  const [loop, setLoop] = useState(false)
   const [timeLimit, setTimeLimit] = useState(0)
   const [timeOffset, setTimeOffset] = useState(0)
   return (
@@ -29,6 +30,11 @@ const DemoPlayer = ({src}) => {
         <RadioButton value={true} label={'Enabled'} />
         <RadioButton value={false} label={'Disabled'} />
       </RadioButtonGroup>
+      <H2>Loop</H2>
+      <RadioButtonGroup value={loop} onChange={(event, value) => setLoop(value)}>
+        <RadioButton value={true} label={'Enabled'} />
+        <RadioButton value={false} label={'Disabled'} />
+      </RadioButtonGroup>
 
       <H2>Time offset / limit</H2>
       <Grid cols={2} gutter={[8, 8]}>
@@ -45,6 +51,7 @@ const DemoPlayer = ({src}) => {
           autoPlay={autoPlay}
           controls={controls}
           muted={muted}
+          loop={loop}
           src={src}
           timeLimit={timeLimit > 0 ? timeLimit : undefined}
           timeOffset={timeOffset > 0 ? timeOffset : undefined}

diff --git a/components/atom/videoPlayer/src/index.js b/components/atom/videoPlayer/src/index.js
@@ -29,7 +29,8 @@ const AtomVideoPlayer = forwardRef(
       src = '',
       timeLimit,
       timeOffset,
-      title
+      title,
+      loop = false
     },
     forwardedRef = createRef()
   ) => {
@@ -42,7 +43,8 @@ const AtomVideoPlayer = forwardRef(
       src,
       timeLimit,
       title,
-      timeOffset
+      timeOffset,
+      loop
     })
 
     const componentRef = useRef(null)
@@ -94,7 +96,8 @@ AtomVideoPlayer.propTypes = {
   src: PropTypes.oneOfType([PropTypes.string, PropTypes.func]),
   timeLimit: PropTypes.number,
   timeOffset: PropTypes.number,
-  title: PropTypes.string
+  title: PropTypes.string,
+  loop: PropTypes.bool
 }
 
 export default AtomVideoPlayer

diff --git a/components/atom/videoPlayer/test/index.test.js b/components/atom/videoPlayer/test/index.test.js
@@ -363,8 +363,25 @@ describe('AtomVideoPlayer', () => {
 
       // Then
       const player = await component.findByTitle(HLS_DEFAULT_TITLE)
+
       expect(player.muted).to.eql(true)
     })
+
+    it('should loop the video when loop prop is set to true', async () => {
+      // Given
+      const props = {
+        loop: true,
+        src: 'https://media-frontend.yams-pro.mpi-internal.com/api/v1/yams-frontend/statics/vo/surf.mp4/hls.m3u8'
+      }
+
+      // When
+      const component = setup(props)
+
+      // Then
+      const player = await component.findByTitle(HLS_DEFAULT_TITLE)
+
+      expect(player.loop).to.eql(true)
+    })
   })
 
   describe('Native video player', () => {