Use an embed specific JS/CSS pack to reduce overhead on embeds

avalonmediasystem · Apr 8, 2024 · 7108c1e · 7108c1e
1 parent 6d19304
commit 7108c1e
Show file tree

Hide file tree

Showing 5 changed files with 69 additions and 7 deletions.
diff --git a/app/javascript/components/EmbeddedRamp.jsx → ...script/components/embeds/EmbeddedRamp.jsx b/app/javascript/components/EmbeddedRamp.jsx → ...script/components/embeds/EmbeddedRamp.jsx
@@ -86,7 +86,7 @@ const Ramp = ({
       if (embeddedPlayer.isAudio()) { embeddedPlayer.controlBar.removeChild('qualitySelector'); }
 
       // Create button component for "View in Repository" and add to control bar
-      let repositoryUrl = Object.values(urls).join('/').replace('/embed', ''); 
+      let repositoryUrl = Object.values(urls).join('/').replace('/embed', '');
       let position = embeddedPlayer.isAudio() ? embeddedPlayer.controlBar.children_.length : embeddedPlayer.controlBar.children_.length - 1;
       var viewInRepoButton = embeddedPlayer.getChild('ControlBar').addChild('button', {
         clickHandler: function(event) {
@@ -95,6 +95,7 @@ const Ramp = ({
       }, position);
 
       viewInRepoButton.addClass('vjs-custom-external-link');
+      viewInRepoButton.el_.setAttribute('style', 'cursor: pointer;');
       viewInRepoButton.controlText('View in Repository');
 
       // Add button icon

diff --git a/app/javascript/components/embeds/Ramp.scss b/app/javascript/components/embeds/Ramp.scss
@@ -0,0 +1,40 @@
+/* 
+ * Copyright 2011-2024, The Trustees of Indiana University and Northwestern
+ *   University.  Licensed under the Apache License, Version 2.0 (the "License");
+ *   you may not use this file except in compliance with the License.
+ * 
+ * You may obtain a copy of the License at
+ * 
+ * http://www.apache.org/licenses/LICENSE-2.0
+ * 
+ * Unless required by applicable law or agreed to in writing, software distributed
+ *   under the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR
+ *   CONDITIONS OF ANY KIND, either express or implied. See the License for the
+ *   specific language governing permissions and limitations under the License.
+ * ---  END LICENSE_HEADER BLOCK  ---
+*/
+
+[class*="ramp--"] {
+  font-family: Arial, Helvetica, sans-serif;
+}
+
+.ramp--media_player {
+  .video-js .vjs-big-play-button {
+    left: 55% !important;
+  }
+  @media (max-width: 585px) {
+    .video-js .vjs-big-play-button {
+      scale: 1.5;
+    }
+
+    .video-js .vjs-control-bar {
+      font-size: 90% !important;
+    }
+
+    // reduce player height to match with adjusted font-size
+    // for smaller screens
+    .video-js.vjs-audio {
+      min-height: 2.9em;
+    }
+  }
+}
diff --git a/app/javascript/packs/application.js b/app/javascript/packs/application.js
@@ -25,6 +25,11 @@
 
 // console.log('Hello World from Webpacker')
 // Support component names relative to this directory:
-var componentRequireContext = require.context("components", true)
+
+/* 
+ * For some reason including the `embeds` directory in this `require.context` breaks
+ * the player. Filtering out the directory allows everything to operate as intended.
+ */
+var componentRequireContext = require.context("components", true, /^(?!embed)/)
 var ReactRailsUJS = require("react_ujs")
 ReactRailsUJS.useContext(componentRequireContext)
diff --git a/app/javascript/packs/embed.js b/app/javascript/packs/embed.js
@@ -0,0 +1,18 @@
+/* 
+ * Copyright 2011-2024, The Trustees of Indiana University and Northwestern
+ *   University.  Licensed under the Apache License, Version 2.0 (the "License");
+ *   you may not use this file except in compliance with the License.
+ * 
+ * You may obtain a copy of the License at
+ * 
+ * http://www.apache.org/licenses/LICENSE-2.0
+ * 
+ * Unless required by applicable law or agreed to in writing, software distributed
+ *   under the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR
+ *   CONDITIONS OF ANY KIND, either express or implied. See the License for the
+ *   specific language governing permissions and limitations under the License.
+ * ---  END LICENSE_HEADER BLOCK  ---
+*/
+var embedRequireContext = require.context("components/embeds", false)
+var ReactRailsUJS = require("react_ujs")
+ReactRailsUJS.useContext(embedRequireContext)
diff --git a/app/views/layouts/embed.html.erb b/app/views/layouts/embed.html.erb
@@ -22,18 +22,16 @@ Unless required by applicable law or agreed to in writing, software distributed
 
    <%= csrf_meta_tags %>
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <%= favicon_link_tag %>
-    <%= stylesheet_link_tag "application", media: "all" %>
-    <%= stylesheet_pack_tag 'application' %>
-    <%= javascript_pack_tag 'application' %>
+    <%= favicon_link_tag %>     
+    <%= stylesheet_pack_tag 'embed' %>
+    <%= javascript_pack_tag 'embed' %>
     <%= yield :page_styles %>
     <%= yield :additional_head_content %>
     <%= render "modules/google_analytics" %>
   </head>
 
   <body>
     <%= yield %>
-    <%= javascript_include_tag "application" %>
     <%= yield :page_scripts %>
   </body>
 </html>