Chore: Remove autobind for Office and Media files (#505)

box · Nov 22, 2017 · 0ecfd5e · 0ecfd5e
1 parent 3b596b0
commit 0ecfd5e
Show file tree

Hide file tree

Showing 10 changed files with 105 additions and 47 deletions.
diff --git a/src/lib/viewers/media/DashViewer.js b/src/lib/viewers/media/DashViewer.js
@@ -1,4 +1,3 @@
-import autobind from 'autobind-decorator';
 import VideoBaseViewer from './VideoBaseViewer';
 import fullscreen from '../../Fullscreen';
 import { appendQueryParams, get } from '../../util';
@@ -15,8 +14,24 @@ const MANIFEST = 'manifest.mpd';
 const DEFAULT_VIDEO_WIDTH_PX = 854;
 const DEFAULT_VIDEO_HEIGHT_PX = 480;
 
-@autobind
 class DashViewer extends VideoBaseViewer {
+    /**
+     * @inheritdoc
+     */
+    constructor(options) {
+        super(options);
+
+        // Bind context for callbacks
+        this.loadeddataHandler = this.loadeddataHandler.bind(this);
+        this.adaptationHandler = this.adaptationHandler.bind(this);
+        this.shakaErrorHandler = this.shakaErrorHandler.bind(this);
+        this.requestFilter = this.requestFilter.bind(this);
+        this.handleQuality = this.handleQuality.bind(this);
+        this.handleSubtitle = this.handleSubtitle.bind(this);
+        this.handleAudioTrack = this.handleAudioTrack.bind(this);
+        this.getBandwidthInterval = this.getBandwidthInterval.bind(this);
+    }
+
     /**
      * @inheritdoc
      */
@@ -328,8 +343,9 @@ class DashViewer extends VideoBaseViewer {
      */
     shakaErrorHandler(shakaError) {
         const error = new Error(
-            `Shaka error. Code = ${shakaError.detail.code}, Category = ${shakaError.detail
-                .category}, Severity = ${shakaError.detail.severity}, Data = ${shakaError.detail.data.toString()}`
+            `Shaka error. Code = ${shakaError.detail.code}, Category = ${shakaError.detail.category}, Severity = ${
+                shakaError.detail.severity
+            }, Data = ${shakaError.detail.data.toString()}`
         );
         error.displayMessage = __('error_refresh');
 

diff --git a/src/lib/viewers/media/MP3Viewer.js b/src/lib/viewers/media/MP3Viewer.js
@@ -1,11 +1,9 @@
-import autobind from 'autobind-decorator';
 import MediaBaseViewer from './MediaBaseViewer';
 import { ICON_FILE_AUDIO } from '../../icons/icons';
 import './MP3.scss';
 
 const CSS_CLASS_MP3 = 'bp-media-mp3';
 
-@autobind
 class MP3Viewer extends MediaBaseViewer {
     /**
      * @inheritdoc

diff --git a/src/lib/viewers/media/MP4Viewer.js b/src/lib/viewers/media/MP4Viewer.js
@@ -1,10 +1,8 @@
-import autobind from 'autobind-decorator';
 import VideoBaseViewer from './VideoBaseViewer';
 import './MP4.scss';
 
 const CSS_CLASS_MP4 = 'bp-media-mp4';
 
-@autobind
 class MP4Viewer extends VideoBaseViewer {
     /**
      * @inheritdoc

diff --git a/src/lib/viewers/media/MediaBaseViewer.js b/src/lib/viewers/media/MediaBaseViewer.js
@@ -1,4 +1,3 @@
-import autobind from 'autobind-decorator';
 import debounce from 'lodash.debounce';
 import BaseViewer from '../BaseViewer';
 import Browser from '../../Browser';
@@ -14,8 +13,33 @@ const MEDIA_AUTOPLAY_CACHE_KEY = 'media-autoplay';
 const MEDIA_VOLUME_INCREMENT = 0.05;
 const EMIT_WAIT_TIME_IN_MILLIS = 100;
 
-@autobind
 class MediaBaseViewer extends BaseViewer {
+    /**
+     * @inheritdoc
+     */
+    constructor(options) {
+        super(options);
+
+        // Bind context for callbacks
+        this.errorHandler = this.errorHandler.bind(this);
+        this.setTimeCode = this.setTimeCode.bind(this);
+        this.progressHandler = this.progressHandler.bind(this);
+        this.updateVolumeIcon = this.updateVolumeIcon.bind(this);
+        this.playingHandler = this.playingHandler.bind(this);
+        this.pauseHandler = this.pauseHandler.bind(this);
+        this.resetPlayIcon = this.resetPlayIcon.bind(this);
+        this.seekHandler = this.seekHandler.bind(this);
+        this.loadeddataHandler = this.loadeddataHandler.bind(this);
+        this.errorHandler = this.errorHandler.bind(this);
+        this.containerClickHandler = this.containerClickHandler.bind(this);
+        this.handleTimeupdateFromMediaControls = this.handleTimeupdateFromMediaControls.bind(this);
+        this.setVolume = this.setVolume.bind(this);
+        this.togglePlay = this.togglePlay.bind(this);
+        this.toggleMute = this.toggleMute.bind(this);
+        this.handleRate = this.handleRate.bind(this);
+        this.handleAutoplay = this.handleAutoplay.bind(this);
+        this.mediaendHandler = this.mediaendHandler.bind(this);
+    }
     /**
      * @inheritdoc
      */
@@ -166,7 +190,7 @@ class MediaBaseViewer extends BaseViewer {
      * @emits error
      * @return {void}
      */
-    errorHandler = (err) => {
+    errorHandler(err) {
         /* eslint-disable no-console */
         console.error(err);
         /* eslint-enable no-console */
@@ -178,7 +202,7 @@ class MediaBaseViewer extends BaseViewer {
         }
 
         this.emit('error', error);
-    };
+    }
 
     /**
      * Handler for playback rate

diff --git a/src/lib/viewers/media/MediaControls.js b/src/lib/viewers/media/MediaControls.js
@@ -1,4 +1,3 @@
-import autobind from 'autobind-decorator';
 import EventEmitter from 'events';
 import controlsTemplate from './MediaControls.html';
 import Scrubber from './Scrubber';
@@ -21,7 +20,6 @@ const CRAWLER =
 const FILMSTRIP_FRAMES_PER_ROW = 100;
 const FILMSTRIP_FRAME_HEIGHT = 90;
 
-@autobind
 class MediaControls extends EventEmitter {
     /**
      * [constructor]
@@ -67,6 +65,25 @@ class MediaControls extends EventEmitter {
         this.setDuration(this.mediaEl.duration);
         this.setupSettings();
         this.setupScrubbers();
+
+        // Bind context for callbacks
+        this.mouseenterHandler = this.mouseenterHandler.bind(this);
+        this.mouseleaveHandler = this.mouseleaveHandler.bind(this);
+        this.scrubberExpand = this.scrubberExpand.bind(this);
+        this.scrubberHide = this.scrubberHide.bind(this);
+        this.scrubberMouseDownHandler = this.scrubberMouseDownHandler.bind(this);
+        this.scrubberMouseUpHandler = this.scrubberMouseUpHandler.bind(this);
+        this.togglePlay = this.togglePlay.bind(this);
+        this.toggleMute = this.toggleMute.bind(this);
+        this.toggleFullscreen = this.toggleFullscreen.bind(this);
+        this.toggleFullscreenIcon = this.toggleFullscreenIcon.bind(this);
+        this.toggleSettings = this.toggleSettings.bind(this);
+        this.toggleSubtitles = this.toggleSubtitles.bind(this);
+        this.setFilmstrip = this.setFilmstrip.bind(this);
+        this.filmstripShowHandler = this.filmstripShowHandler.bind(this);
+        this.filmstripHideHandler = this.filmstripHideHandler.bind(this);
+        this.timeScrubbingStopHandler = this.timeScrubbingStopHandler.bind(this);
+
         this.attachEventHandlers();
     }
 

diff --git a/src/lib/viewers/media/Scrubber.js b/src/lib/viewers/media/Scrubber.js
@@ -1,4 +1,3 @@
-import autobind from 'autobind-decorator';
 import EventEmitter from 'events';
 import scrubberTemplate from './Scrubber.html';
 import Browser from '../../Browser';
@@ -8,7 +7,6 @@ const MAX_VALUE = 1;
 const CLASS_SCRUBBER_HOVER = 'bp-media-scrubber-hover';
 const CLASS_SCRUBBER_TOUCH = 'bp-media-scrubber-touch';
 
-@autobind
 class Scrubber extends EventEmitter {
     /**
      * Service to handle the position and movement of a slider element
@@ -66,6 +64,11 @@ class Scrubber extends EventEmitter {
         this.setBufferedValue(bufferedValue);
         this.setValue(value);
 
+        // Bind context for callbacks
+        this.pointerUpHandler = this.pointerUpHandler.bind(this);
+        this.scrubbingHandler = this.scrubbingHandler.bind(this);
+        this.pointerDownHandler = this.pointerDownHandler.bind(this);
+
         this.playedEl.addEventListener('mousedown', this.pointerDownHandler);
         this.convertedEl.addEventListener('mousedown', this.pointerDownHandler);
         this.handleEl.addEventListener('mousedown', this.pointerDownHandler);

diff --git a/src/lib/viewers/media/Settings.js b/src/lib/viewers/media/Settings.js
@@ -1,4 +1,3 @@
-import autobind from 'autobind-decorator';
 import EventEmitter from 'events';
 import { addActivationListener, removeActivationListener, decodeKeydown, insertTemplate } from '../../util';
 import { ICON_ARROW_LEFT, ICON_ARROW_RIGHT, ICON_CHECK_MARK } from '../../icons/icons';
@@ -128,7 +127,6 @@ const SUBMENU_SUBITEM_TEMPLATE = `<div class="bp-media-settings-sub-item" data-t
     <div class="bp-media-settings-value"></div>
 </div>`;
 
-@autobind
 class Settings extends EventEmitter {
     /** @property {HTMLElement} - Settings container element */
     containerEl;
@@ -174,6 +172,8 @@ class Settings extends EventEmitter {
 
         // Bind context for callbacks
         this.handleTransitionEnd = this.handleTransitionEnd.bind(this);
+        this.blurHandler = this.blurHandler.bind(this);
+        this.menuEventHandler = this.menuEventHandler.bind(this);
 
         insertTemplate(this.containerEl, SETTINGS_TEMPLATE, containerEl.querySelector('.bp-media-controls-wrapper'));
         this.settingsEl = this.containerEl.querySelector('.bp-media-settings');

diff --git a/src/lib/viewers/media/VideoBaseViewer.js b/src/lib/viewers/media/VideoBaseViewer.js
@@ -1,4 +1,3 @@
-import autobind from 'autobind-decorator';
 import throttle from 'lodash.throttle';
 import MediaBaseViewer from './MediaBaseViewer';
 import { CLASS_HIDDEN, CLASS_IS_BUFFERING, CLASS_DARK } from '../../constants';
@@ -7,8 +6,22 @@ import { ICON_PLAY_LARGE } from '../../icons/icons';
 const MOUSE_MOVE_TIMEOUT_IN_MILLIS = 1000;
 const CLASS_PLAY_BUTTON = 'bp-media-play-button';
 
-@autobind
 class VideoBaseViewer extends MediaBaseViewer {
+    /**
+     * @inheritdoc
+     */
+    constructor(options) {
+        super(options);
+
+        // Bind context for handlers
+        this.loadeddataHandler = this.loadeddataHandler.bind(this);
+        this.pointerHandler = this.pointerHandler.bind(this);
+        this.waitingHandler = this.waitingHandler.bind(this);
+        this.playingHandler = this.playingHandler.bind(this);
+        this.pauseHandler = this.pauseHandler.bind(this);
+        this.resize = this.resize.bind(this);
+    }
+
     /**
      * @inheritdoc
      */
@@ -133,13 +146,6 @@ class VideoBaseViewer extends MediaBaseViewer {
         });
     }
 
-    /**
-     * @inheritdoc
-     */
-    showLoadingIcon() {
-        super.showLoadingIcon();
-    }
-
     /**
      * Adds event listeners to the media element.
      * Makes changes to the media controls.
@@ -203,17 +209,6 @@ class VideoBaseViewer extends MediaBaseViewer {
             this.containerEl.classList.add(CLASS_DARK);
         }
     }
-
-    /**
-     * Handles keyboard events for video
-     *
-     * @override
-     * @param {string} key - Keydown key
-     * @return {boolean} Consumed or not
-     */
-    onKeydown(key) {
-        return super.onKeydown(key);
-    }
 }
 
 export default VideoBaseViewer;
diff --git a/src/lib/viewers/media/__tests__/DashViewer-test.js b/src/lib/viewers/media/__tests__/DashViewer-test.js
@@ -272,15 +272,13 @@ describe('lib/viewers/media/DashViewer', () => {
     });
 
     describe('showLoadingIcon()', () => {
-        const loadingFunc = DashViewer.prototype.showLoadingIcon;
-
         afterEach(() => {
-            Object.defineProperty(VideoBaseViewer.prototype, 'showLoadingIcon', { value: loadingFunc });
+            VideoBaseViewer.prototype.showLoadingIcon.restore();
         });
 
         it('should show the loading indicator if active track does not equal the rep id', () => {
             sandbox.stub(dash, 'getActiveTrack').returns({ id: 1 });
-            Object.defineProperty(VideoBaseViewer.prototype, 'showLoadingIcon', { value: sandbox.mock() });
+            sinon.stub(VideoBaseViewer.prototype, 'showLoadingIcon');
             dash.showLoadingIcon(2);
         });
     });
@@ -978,10 +976,12 @@ describe('lib/viewers/media/DashViewer', () => {
     });
 
     describe('onKeydown()', () => {
-        const keydownFunc = DashViewer.prototype.onKeydown;
+        beforeEach(() => {
+            sinon.stub(VideoBaseViewer.prototype, 'onKeydown');
+        });
 
         afterEach(() => {
-            Object.defineProperty(VideoBaseViewer.prototype, 'onKeydown', { value: keydownFunc });
+            VideoBaseViewer.prototype.onKeydown.restore();
         });
 
         it('should toggle the stats on Shift+I', () => {
@@ -993,7 +993,6 @@ describe('lib/viewers/media/DashViewer', () => {
 
         it('should call super keydown handler for all other keys', () => {
             sandbox.stub(dash, 'toggleStats');
-            Object.defineProperty(VideoBaseViewer.prototype, 'onKeydown', { value: sandbox.mock() });
             const result = dash.onKeydown('blah');
             expect(dash.toggleStats).to.not.be.called;
             expect(result).to.not.be.true;

diff --git a/src/lib/viewers/office/OfficeViewer.js b/src/lib/viewers/office/OfficeViewer.js
@@ -1,4 +1,3 @@
-import autobind from 'autobind-decorator';
 import BaseViewer from '../BaseViewer';
 import Browser from '../../Browser';
 import Popup from '../../Popup';
@@ -15,12 +14,21 @@ const EXCEL_ONLINE_EMBED_URL = 'https://excel.officeapps.live.com/x/_layouts/xle
 const OFFICE_ONLINE_IFRAME_NAME = 'office-online-iframe';
 const MESSAGE_HOST_READY = 'Host_PostmessageReady';
 
-@autobind
 class OfficeViewer extends BaseViewer {
     //--------------------------------------------------------------------------
     // Public
     //--------------------------------------------------------------------------
 
+    /**
+     * @inheritdoc
+     */
+    constructor(options) {
+        super(options);
+
+        // Bind context for handlers
+        this.print = this.print.bind(this);
+    }
+
     /**
      * @inheritdoc
      */