Allow multiple sources for video (#258)

Co-authored-by: Valentin Hervieu <valentin.hervieu@ricardo.ch>
ValentinH · Jun 1, 2021 · aa808fa · aa808fa
1 parent c79050b
commit aa808fa
Show file tree

Hide file tree

Showing 2 changed files with 12 additions and 4 deletions.
diff --git a/src/index.tsx b/src/index.tsx
@@ -1,6 +1,6 @@
 import React from 'react'
 import normalizeWheel from 'normalize-wheel'
-import { Area, MediaSize, Point, Size } from './types'
+import { Area, MediaSize, Point, Size, VideoSrc } from './types'
 import {
   getCropSize,
   restrictPosition,
@@ -15,7 +15,7 @@ import cssStyles from './styles.css'
 
 export type CropperProps = {
   image?: string
-  video?: string
+  video?: string | VideoSrc[]
   transform?: string
   crop: Point
   zoom: number
@@ -538,7 +538,6 @@ class Cropper extends React.Component<CropperProps, State> {
                 mediaClassName
               )}
               {...mediaProps}
-              src={video}
               ref={(el: HTMLVideoElement) => (this.videoRef = el)}
               onLoadedMetadata={this.onMediaLoad}
               style={{
@@ -547,7 +546,11 @@ class Cropper extends React.Component<CropperProps, State> {
                   transform || `translate(${x}px, ${y}px) rotate(${rotation}deg) scale(${zoom})`,
               }}
               controls={false}
-            />
+            >
+              {(Array.isArray(video) ? video : [{ src: video }]).map((item) => (
+                <source {...item} />
+              ))}
+            </video>
           )
         )}
         {this.state.cropSize && (

diff --git a/src/types.ts b/src/types.ts
@@ -21,3 +21,8 @@ export type Area = {
   x: number
   y: number
 }
+
+export type VideoSrc = {
+  src: string
+  type?: string
+}