From 17751dd2eb881aed8c644498c93f0f85c81fbc6c Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Mar=C3=ADa=20A=2E=20Matienzo?= <matienzo@berkeley.edu>
Date: Tue, 2 Jul 2024 10:46:51 -0700
Subject: [PATCH] change player initialization to fix DASH double captions

* switches from class-based "automatic start" of MediaElement.js
instantiation to jQuery-based instantiation. this is necessary
as we need to pass dash.js configuration options in to prevent
it from rendering captions for us.
* add `crossorigin="anonymous"` to `<video>` tag to allow a
browser to load the webvtt file from wowza.lib.b.e.; otherwise
this would be a cross-domain request
* remove `default` from `<track>` tag to prevent captions from
showing automatically.
---
 app/views/player/_audio.html.erb             |  2 +-
 app/views/player/_player_head_additional.erb | 14 ++++++++++++++
 app/views/player/_record.html.erb            |  1 +
 app/views/player/_video.html.erb             |  4 ++--
 4 files changed, 18 insertions(+), 3 deletions(-)

diff --git a/app/views/player/_audio.html.erb b/app/views/player/_audio.html.erb
index 0cafa9d..18b40f8 100644
--- a/app/views/player/_audio.html.erb
+++ b/app/views/player/_audio.html.erb
@@ -1,5 +1,5 @@
 <!--suppress HtmlUnknownAttribute -->
 <%# should match app/assets/stylesheets/application.scss %>
-<audio id="audio-<%= index %>" width="100%" height="40px" class="mejs__player" preload="<%= preload %>" controls>
+<audio id="audio-<%= index %>" width="100%" height="40px" preload="<%= preload %>" controls>
   <source src="<%= track.hls_uri %>" type="<%= BerkeleyLibrary::AV::Track::SOURCE_TYPE_HLS %>"/>
 </audio>
diff --git a/app/views/player/_player_head_additional.erb b/app/views/player/_player_head_additional.erb
index 5144634..18983c6 100644
--- a/app/views/player/_player_head_additional.erb
+++ b/app/views/player/_player_head_additional.erb
@@ -31,6 +31,20 @@
       function rewrite_src_tags() {
           $("source,track").each(rewrite_src);
       }
+
+      function initialize_players() {
+          $("audio,video").mediaelementplayer({
+            iconSprite: "/assets/icons/mejs-controls.svg",
+            success: function (mediaElement, originalNode, instance) {
+                if (typeof dashjs !== "undefined") {
+                    // workaround for mediaelement/mediaelement#2964
+                    mediaElement.dashPlayer.updateSettings({
+                        streaming: { text: { defaultEnabled: false } },
+                    });
+                }
+            }
+          }
+      )}
   </script>
   <script src="https://cdn.jsdelivr.net/npm/mediaelement@7.0.5/build/mediaelement-and-player.js"></script>
   <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/mediaelement@7.0.5/build/mediaelementplayer.css">
diff --git a/app/views/player/_record.html.erb b/app/views/player/_record.html.erb
index 77eb1c6..a07ebb3 100644
--- a/app/views/player/_record.html.erb
+++ b/app/views/player/_record.html.erb
@@ -38,6 +38,7 @@
 
   <script>
       rewrite_src_tags();
+      initialize_players();
   </script>
 
   <% unless record.description.blank? %>
diff --git a/app/views/player/_video.html.erb b/app/views/player/_video.html.erb
index 110d647..740ba9a 100644
--- a/app/views/player/_video.html.erb
+++ b/app/views/player/_video.html.erb
@@ -1,13 +1,13 @@
 <%# TODO: figure out how to programmatically set height with JavaScript, or something %>
 <%# should match app/assets/stylesheets/application.scss %>
-<video id="video-<%= index %>" width="100%" height="270" class="mejs__player" preload="<%= preload %>" data-mejsoptions='{"iconSprite": "/assets/icons/mejs-controls.svg"}' controls>
+<video id="video-<%= index %>" width="100%" height="270" preload="<%= preload %>" control crossorigin="anonymous">
   <% if browser.platform.ios? || browser.device.ipad? %>
     <source src="<%= track.hls_uri %>" type="<%= BerkeleyLibrary::AV::Track::SOURCE_TYPE_HLS %>"/>
   <% else %>
     <source src="<%= track.mpeg_dash_uri %>" type="<%= BerkeleyLibrary::AV::Track::SOURCE_TYPE_MPEG_DASH %>"/>
     <% if (dash_vtt_uri = track.dash_vtt_uri) %>
       <%# TODO: should we also be adding a caption track for HLS streaming to iPhone/iPad? %>
-      <track default kind="captions" srclang="en" src="<%= dash_vtt_uri %>"/>
+      <track kind="captions" srclang="en" src="<%= dash_vtt_uri %>"/>
     <% end %>
   <% end %>
 </video>