feat: Remove references and logic related to Flash and SWF (#7852)

* remove flash references, update comments & tests * remove references to swf & stageclick listener
videojs · Nov 23, 2022 · 706983c · 706983c
1 parent a5e7222
commit 706983c
Show file tree

Hide file tree

Showing 8 changed files with 34 additions and 59 deletions.
diff --git a/sandbox/noUITitleAttributes.html.example b/sandbox/noUITitleAttributes.html.example
@@ -7,12 +7,6 @@
   <!-- Load the source files -->
   <link href="../dist/video-js.css" rel="stylesheet" type="text/css">
   <script src="../dist/video.js"></script>
-  <script src="../node_modules/videojs-flash/dist/videojs-flash.js"></script>
-
-  <!-- Set the location of the flash SWF -->
-  <script>
-    videojs.options.flash.swf = '../node_modules/videojs-flash/node_modules/videojs-swf/dist/video-js.swf';
-  </script>
 </head>
 <body>
   <div style="background-color:#eee; border: 1px solid #777; padding: 10px; margin-bottom: 20px; font-size: .8em; line-height: 1.5em; font-family: Verdana, sans-serif;">

diff --git a/src/css/components/_layout.scss b/src/css/components/_layout.scss
@@ -1,10 +1,7 @@
 @use "sass:math";
 
 .video-js {
-  // display:inline-block would be closer to the video el's display:inline
-  // but it results in flash reloading when going into fullscreen [#2205]
-  // TODO: Still needed?
-  display: block;
+  display: inline-block;
   // Make video.js videos align top when next to video elements
   vertical-align: top;
   box-sizing: border-box;

diff --git a/src/js/player.js b/src/js/player.js
@@ -576,7 +576,6 @@ class Player extends Component {
     this.reportUserActivity();
 
     this.one('play', (e) => this.listenForUserActivity_(e));
-    this.on('stageclick', (e) => this.handleStageClick_(e));
     this.on('keydown', (e) => this.handleKeyDown(e));
     this.on('languagechange', (e) => this.handleLanguagechange(e));
 
@@ -2037,17 +2036,6 @@ class Player extends Component {
     }
   }
 
-  /**
-   * native click events on the SWF aren't triggered on IE11, Win8.1RT
-   * use stageclick events triggered from inside the SWF instead
-   *
-   * @private
-   * @listens stageclick
-   */
-  handleStageClick_() {
-    this.reportUserActivity();
-  }
-
   /**
    * @private
    */
@@ -2258,13 +2246,15 @@ class Player extends Component {
   }
 
   /**
-   * Get calls can't wait for the tech, and sometimes don't need to.
+   * Mediate attempt to call playback tech method
+   * and return the value of the method called.
    *
    * @param {string} method
    *        Tech method
    *
-   * @return {Function|undefined}
-   *         the method or undefined
+   * @return {*}
+   *         Value returned by the tech method called, undefined if tech
+   *         is not ready or tech method is not present
    *
    * @private
    */
@@ -2280,10 +2270,8 @@ class Player extends Component {
       return middleware.mediate(this.middleware_, this.tech_, method);
     }
 
-    // Flash likes to die and reload when you hide or reposition it.
-    // In these cases the object methods go away and we get errors.
-    // TODO: Is this needed for techs other than Flash?
-    // When that happens we'll catch the errors and inform tech that it's not ready any more.
+    // Log error when playback tech object is present but method
+    // is undefined or unavailable
     try {
       return this.tech_[method]();
     } catch (e) {
@@ -2539,8 +2527,7 @@ class Player extends Component {
     }
 
     if (seconds !== this.cache_.duration) {
-      // Cache the last set value for optimized scrubbing (esp. Flash)
-      // TODO: Required for techs other than Flash?
+      // Cache the last set value for optimized scrubbing
       this.cache_.duration = seconds;
 
       if (seconds === Infinity) {

diff --git a/src/js/tech/setup-sourceset.js b/src/js/tech/setup-sourceset.js
@@ -202,7 +202,7 @@ const firstSourceWatch = function(tech) {
 
 /**
  * our implementation of a `src` descriptor for browsers
- * that do not have one.
+ * that do not have one
  */
 const srcDescriptorPolyfill = Object.defineProperty({}, 'src', {
   get() {

diff --git a/src/js/tech/tech.js b/src/js/tech/tech.js
@@ -1161,9 +1161,8 @@ Tech.prototype.featuresFullscreenResize = false;
 Tech.prototype.featuresPlaybackRate = false;
 
 /**
- * Boolean indicating whether the `Tech` supports the `progress` event. This is currently
- * not triggered by video-js-swf. This will be used to determine if
- * {@link Tech#manualProgressOn} should be called.
+ * Boolean indicating whether the `Tech` supports the `progress` event.
+ * This will be used to determine if {@link Tech#manualProgressOn} should be called.
  *
  * @type {boolean}
  * @default
@@ -1183,9 +1182,8 @@ Tech.prototype.featuresProgressEvents = false;
 Tech.prototype.featuresSourceset = false;
 
 /**
- * Boolean indicating whether the `Tech` supports the `timeupdate` event. This is currently
- * not triggered by video-js-swf. This will be used to determine if
- * {@link Tech#manualTimeUpdates} should be called.
+ * Boolean indicating whether the `Tech` supports the `timeupdate` event.
+ * This will be used to determine if {@link Tech#manualTimeUpdates} should be called.
  *
  * @type {boolean}
  * @default

diff --git a/src/js/utils/url.js b/src/js/utils/url.js
@@ -82,7 +82,7 @@ export const parseUrl = function(url) {
 };
 
 /**
- * Get absolute version of relative URL. Used to tell Flash the correct URL.
+ * Get absolute version of relative URL.
  *
  * @function
  * @param    {string} url
@@ -96,8 +96,7 @@ export const parseUrl = function(url) {
 export const getAbsoluteURL = function(url) {
   // Check if absolute URL
   if (!url.match(/^https?:\/\//)) {
-    // Convert to absolute URL. Flash hosted off-site needs an absolute URL.
-    // add the url to an anchor and let the browser parse the URL
+    // Add the url to an anchor and let the browser parse it to convert to an absolute url
     const a = document.createElement('a');
 
     a.href = url;

diff --git a/test/unit/player.test.js b/test/unit/player.test.js
@@ -1878,7 +1878,7 @@ QUnit.test('player#reset loads the Html5 tech and then techCalls reset', functio
 
   const testPlayer = {
     options_: {
-      techOrder: ['html5', 'flash']
+      techOrder: ['html5', 'youtube']
     },
     resetCache_() {},
     loadTech_(tech, source) {
@@ -1910,7 +1910,7 @@ QUnit.test('player#reset loads the first item in the techOrder and then techCall
 
   const testPlayer = {
     options_: {
-      techOrder: ['flash', 'html5']
+      techOrder: ['youtube', 'html5']
     },
     resetCache_() {},
     loadTech_(tech, source) {
@@ -1930,7 +1930,7 @@ QUnit.test('player#reset loads the first item in the techOrder and then techCall
 
   Player.prototype.reset.call(testPlayer);
 
-  assert.equal(loadedTech, 'flash', 'we loaded the Flash tech');
+  assert.equal(loadedTech, 'youtube', 'we loaded the Youtube tech');
   assert.equal(loadedSource, null, 'with a null source');
   assert.equal(techCallMethod, 'reset', 'we then reset the tech');
 });
@@ -2324,7 +2324,7 @@ QUnit.test('src selects tech based on middleware', function(assert) {
   FooTech.canPlaySource = (src) => FooTech.canPlayType(src.type);
 
   BarTech.isSupported = () => true;
-  BarTech.canPlayType = (type) => type === 'video/flv';
+  BarTech.canPlayType = (type) => type === 'video/youtube';
   BarTech.canPlaySource = (src) => BarTech.canPlayType(src.type);
 
   videojs.registerTech('FooTech', FooTech);
@@ -2342,8 +2342,8 @@ QUnit.test('src selects tech based on middleware', function(assert) {
   videojs.use('video/bar', () => ({
     setSource(src, next) {
       next(null, {
-        src: 'http://example.com/video.flv',
-        type: 'video/flv'
+        src: 'https://www.youtube.com/watch?v=C0DPdy98e4c',
+        type: 'video/youtube'
       });
     }
   }));
@@ -2373,7 +2373,7 @@ QUnit.test('src selects tech based on middleware', function(assert) {
 
   this.clock.tick(1);
 
-  assert.equal(player.techName_, 'BarTech', 'the BarTech (Flash) tech is chosen');
+  assert.equal(player.techName_, 'BarTech', 'the BarTech (Youtube) tech is chosen');
 
   middleware.getMiddleware('video/foo').pop();
   middleware.getMiddleware('video/bar').pop();

diff --git a/test/unit/sourceset.test.js b/test/unit/sourceset.test.js
@@ -1097,33 +1097,33 @@ QUnit[qunitFn]('sourceset', function(hooks) {
     const fixture = document.querySelector('#qunit-fixture');
     const vid = document.createElement('video');
     const Tech = videojs.getTech('Tech');
-    const flashSrc = {
-      src: 'http://example.com/oceans.flv',
-      type: 'video/flv'
+    const youtubeSrc = {
+      src: 'https://www.youtube.com/watch?v=C0DPdy98e4c',
+      type: 'video/youtube'
     };
     const sourcesets = [];
 
-    class FakeFlash extends Html5 {
+    class FakeYoutube extends Html5 {
       static isSupported() {
         return true;
       }
 
       static canPlayType(type) {
-        return type === 'video/flv' ? 'maybe' : '';
+        return type === 'video/youtube' ? 'maybe' : '';
       }
 
       static canPlaySource(srcObj) {
-        return srcObj.type === 'video/flv';
+        return srcObj.type === 'video/youtube';
       }
     }
 
-    videojs.registerTech('FakeFlash', FakeFlash);
+    videojs.registerTech('FakeYoutube', FakeYoutube);
 
     fixture.appendChild(vid);
 
     const player = videojs(vid, {
       enableSourceset: true,
-      techOrder: ['fakeFlash', 'html5']
+      techOrder: ['fakeYoutube', 'html5']
     });
 
     player.ready(function() {
@@ -1134,10 +1134,10 @@ QUnit[qunitFn]('sourceset', function(hooks) {
         sourcesets.push(e.src);
 
         if (sourcesets.length === 3) {
-          assert.deepEqual([flashSrc.src, sourceTwo.src, sourceOne.src], sourcesets, 'sourceset as expected');
+          assert.deepEqual([youtubeSrc.src, sourceTwo.src, sourceOne.src], sourcesets, 'sourceset as expected');
 
           player.dispose();
-          delete Tech.techs_.FakeFlash;
+          delete Tech.techs_.FakeYoutube;
           done();
         }
       });
@@ -1146,7 +1146,7 @@ QUnit[qunitFn]('sourceset', function(hooks) {
       player.src(sourceTwo);
     });
 
-    player.src(flashSrc);
+    player.src(youtubeSrc);
 
   });
 });