fixed memory leak caused by

.gitignore

@@ -58,4 +58,5 @@ build
 example/out
 
 # lockfiles
-yarn.lock
+package-lock.json
+.vscode

package.json

@@ -17,6 +17,7 @@
     "create-minor": "sh ./scripts/release minor",
     "create-patch": "sh ./scripts/release patch",
     "publish-release": "npm test && sh ./scripts/publish",
+    "publish-dev": "./publish-dev.sh video-react",
     "lint": "eslint src",
     "format-all": "prettier --config .prettierrc.js --write \"src/**/*.{js,json,md}\" \"docs/**/*.{js,json,md}\" \"*.{js,json,md}\"",
     "format-one": "prettier --config .prettierrc.js --write"

publish-dev.sh

@@ -0,0 +1,25 @@
+#!/usr/bin/env bash
+set -e
+
+bucketname=dev-sdk-build-artifacts
+rootDir=`pwd`
+filename=$1-$(date +%Y%m%d-%H%M%S).tar.gz
+packageDir=packages/$1
+yarn build
+mkdir -p publish-dev-dist/dist
+mkdir -p publish-dev-dist/lib
+mkdir -p publish-dev-dist/styles
+cp -r dist/* publish-dev-dist/dist
+cp -r lib/* publish-dev-dist/lib
+cp -r styles/* publish-dev-dist/styles
+cp package.json publish-dev-dist/package.json
+
+cd publish-dev-dist
+tar czf $rootDir/$filename ./*
+cd ..
+rm -rf ./publish-dev-dist
+cd $rootDir
+
+aws s3api put-object --bucket $bucketname --key $filename --body $filename --profile veritone
+rm $filename
+echo "Artifact stored at https://${bucketname}.s3.amazonaws.com/${filename}"

src/actions/player.js

@@ -4,6 +4,7 @@ export const OPERATE = 'video-react/OPERATE';
 export const FULLSCREEN_CHANGE = 'video-react/FULLSCREEN_CHANGE';
 export const PLAYER_ACTIVATE = 'video-react/PLAYER_ACTIVATE';
 export const USER_ACTIVATE = 'video-react/USER_ACTIVATE';
+export const PLAYER_RESET = 'video-react/PLAYER_RESET';
 
 export function handleFullscreenChange(isFullscreen) {
   return {
@@ -26,6 +27,12 @@ export function userActivate(activity) {
   };
 }
 
+export function reset() {
+  return {
+    type: PLAYER_RESET
+  };
+}
+
 export function play(
   operation = {
     action: 'play',

src/components/Bezel.js

@@ -12,20 +12,31 @@ export default class Bezel extends Component {
     super(props, context);
 
     this.timer = null;
-    props.manager.subscribeToOperationStateChange(
-      this.handleStateChange.bind(this)
-    );
+    this.unsubscribe = null;
+    this.handleStateChange = this.handleStateChange.bind(this);
 
     this.state = {
       hidden: true,
       operation: {}
     };
   }
 
+  componentDidMount() {
+    this.unsubscribe = this.props.manager.subscribeToOperationStateChange(
+      this.handleStateChange
+    );
+  }
+
+  componentWillUnmount() {
+    if (this.unsubscribe) {
+      this.unsubscribe();
+    }
+  }
+
   handleStateChange(state, prevState) {
     if (
-      state.count !== prevState.count
-      && state.operation.source === 'shortcut'
+      state.count !== prevState.count &&
+      state.operation.source === 'shortcut'
     ) {
       if (this.timer) {
         // previous animation is not finished
@@ -58,8 +69,8 @@ export default class Bezel extends Component {
     }
     const style = this.state.hidden
       ? {
-        display: 'none'
-      }
+          display: 'none'
+        }
       : null;
 
     return (

src/components/Player.js

@@ -75,14 +75,11 @@ export default class Player extends Component {
     super(props);
 
     this.controlsHideTimer = null;
-
     this.video = null; // the Video component
     this.manager = new Manager(props.store);
     this.actions = this.manager.getActions();
-    this.manager.subscribeToPlayerStateChange(
-      this.handleStateChange.bind(this)
-    );
-
+    this.unsubscribe = null;
+    this.handleStateChange = this.handleStateChange.bind(this);
     this.getStyle = this.getStyle.bind(this);
     this.handleResize = this.handleResize.bind(this);
     this.getChildren = this.getChildren.bind(this);
@@ -100,6 +97,10 @@ export default class Player extends Component {
     window.addEventListener('resize', this.handleResize);
 
     fullscreen.addEventListener(this.handleFullScreenChange);
+
+    this.unsubscribe = this.manager.subscribeToPlayerStateChange(
+      this.handleStateChange
+    );
   }
 
   componentWillUnmount() {
@@ -109,6 +110,9 @@ export default class Player extends Component {
     if (this.controlsHideTimer) {
       window.clearTimeout(this.controlsHideTimer);
     }
+    if (this.unsubscribe) {
+      this.unsubscribe();
+    }
   }
 
   getDefaultChildren(originalChildren) {

src/index.d.ts

@@ -451,6 +451,7 @@ declare module 'video-react' {
     type FULLSCREEN_CHANGE = 'video-react/FULLSCREEN_CHANGE';
     type PLAYER_ACTIVATE = 'video-react/PLAYER_ACTIVATE';
     type USER_ACTIVATE = 'video-react/USER_ACTIVATE';
+    type PLAYER_RESET = 'video-react/PLAYER_RESET';
 
     function handleFullscreenChange(
       isFullscreen: boolean
@@ -466,6 +467,10 @@ declare module 'video-react' {
       activity;
     };
 
+    function reset(): {
+      type: PLAYER_RESET;
+    };
+
     function userActivate(
       activity
     ): {

src/reducers/player.js

@@ -29,7 +29,8 @@ import {
 import {
   FULLSCREEN_CHANGE,
   PLAYER_ACTIVATE,
-  USER_ACTIVATE
+  USER_ACTIVATE,
+  PLAYER_RESET
 } from '../actions/player';
 
 const initialState = {
@@ -172,6 +173,8 @@ export default function player(state = initialState, action) {
         ...state,
         activeTextTrack: action.textTrack
       };
+    case PLAYER_RESET:
+      return initialState;
     default:
       return state;
   }