__tests__/common/services/video-player.service.js

+
+import videoPlayerService from '../../../src/common/services/video-player.service';
+
+const mockPlayerRef1 = {
+  pause: jest.fn()
+}
+
+const mockPlayerRef2 = {
+  pause: jest.fn()
+}
+
+/**
+ * Tests
+ */
+describe('Video player service', () => {
+
+  beforeEach(() => {
+    mockPlayerRef1.pause.mockClear();
+    mockPlayerRef2.pause.mockClear();
+  });
+
+  it('should set the current ref', () => {
+
+    expect(videoPlayerService.current).toBe(null);
+
+    videoPlayerService.setCurrent(mockPlayerRef1);
+
+    expect(videoPlayerService.current).toBe(mockPlayerRef1);
+  });
+
+  it('should pause the previous video', () => {
+
+    videoPlayerService.setCurrent(mockPlayerRef2);
+
+    expect(videoPlayerService.current).toBe(mockPlayerRef2);
+
+    expect(mockPlayerRef1.pause).toBeCalled();
+  });
+
+  it('should clear the ref', () => {
+    videoPlayerService.clear();
+    expect(videoPlayerService.current).toBe(null);
+  });
+});
\ No newline at end of file

src/common/services/video-player.service.js

+/**
+ * Video Player Service
+ */
+class VideoPlayerService {
+  /**
+   * current playing video player reference
+   */
+  current = null;
+
+  /**
+   * Set current player reference
+   * @param {MindsVideo} videoPlayerRef
+   */
+  setCurrent(videoPlayerRef) {
+    if (this.current && this.current !== videoPlayerRef) {
+      this.current.pause();
+    }
+    this.current = videoPlayerRef;
+  }
+
+  /**
+   * Clear the current player ref
+   */
+  clear() {
+    this.current = null;
+  }
+}
+
+export default new VideoPlayerService();

src/media/MindsVideo.js

@@ -29,6 +29,7 @@ import ExplicitImage from '../common/components/explicit/ExplicitImage';
 import logService from '../common/services/log.service';
 import i18n from '../common/services/i18n.service';
 import attachmentService from '../common/services/attachment.service';
+import videoPlayerService from '../common/services/video-player.service';
 
 const isIOS = Platform.OS === 'ios';
 
@@ -89,6 +90,9 @@ class MindsVideo extends Component {
    */
   componentWillUnmount() {
     this.onScreenBlur.remove();
+    if (videoPlayerService.current === this) {
+      videoPlayerService.clear();
+    }
   }
 
   onVideoEnd = () => {
@@ -106,13 +110,13 @@ class MindsVideo extends Component {
     }
 
     this.setState({loaded: false, currentTime: current, duration: e.duration});
-    this.player.seek(current)
+    this.player.seek(current);
 
     this.onLoadEnd();
   }
 
   onLoadStart = () => {
-    this.setState({ error: false, inProgress: true, });
+    this.setState({error: false, inProgress: true});
   };
 
   onError = async err => {
@@ -123,31 +127,31 @@ class MindsVideo extends Component {
         this.setState({transcoding: true});
       } else {
         logService.exception('[MindsVideo]', new Error(err));
-        this.setState({ error: true, inProgress: false, });
+        this.setState({error: true, inProgress: false});
       }
     } catch (error) {
       logService.exception('[MindsVideo]', new Error(error));
-      this.setState({ error: true, inProgress: false, });
+      this.setState({error: true, inProgress: false});
     }
   };
 
   onLoadEnd = () => {
-    this.setState({ error: false, inProgress: false, });
+    this.setState({error: false, inProgress: false});
   };
 
   toggleVolume = () => {
     const v = this.state.volume ? 0 : 1;
     this.setState({volume: v});
-  }
+  };
 
-  onProgress = (e) => {
+  onProgress = e => {
     this.setState({currentTime: e.currentTime});
-  }
+  };
 
   onBackward(currentTime) {
     let newTime = Math.max(currentTime - FORWARD_DURATION, 0);
     this.player.seek(newTime);
-    this.setState({currentTime: newTime})
+    this.setState({currentTime: newTime});
   }
 
   onForward(currentTime, duration) {
@@ -180,15 +184,13 @@ class MindsVideo extends Component {
   }
 
   play = () => {
-    this.setState({
-      showOverlay: false,
-    });
-
+    videoPlayerService.setCurrent(this);
     this.setState({
       active: true,
+      showOverlay: false,
       paused: false,
     });
-  }
+  };
 
   pause = () => {
     this.setState({
@@ -247,6 +249,13 @@ class MindsVideo extends Component {
     }
   }
 
+  /**
+   * Set the reference to the video player
+   */
+  setRef = (ref) => {
+    this.player = ref;
+  };
+
   /**
    * Get video component or thumb
    */
@@ -257,9 +266,7 @@ class MindsVideo extends Component {
     if (this.state.active || !thumb_uri) {
       return (
         <Video
-          ref={(ref) => {
-            this.player = ref
-          }}
+          ref={this.setRef}
           volume={parseFloat(this.state.volume)}
           onEnd={this.onVideoEnd}
           onLoadStart={this.onLoadStart}