From 2502f3b870ba966629eff7046faf1fd03fa0bc78 Mon Sep 17 00:00:00 2001 From: Mason Ballengee Date: Tue, 5 Sep 2023 17:08:01 -0400 Subject: [PATCH 1/4] Implement embedded player using videojs --- app/views/layouts/embed.html.erb | 6 + .../master_files/_mejs4_player_js.html.erb | 33 --- app/views/master_files/_player.html.erb | 8 +- app/views/modules/player/_section.html.erb | 7 +- .../modules/player/_video_js_element.html.erb | 235 ++++++++++++++++++ 5 files changed, 245 insertions(+), 44 deletions(-) delete mode 100644 app/views/master_files/_mejs4_player_js.html.erb create mode 100644 app/views/modules/player/_video_js_element.html.erb diff --git a/app/views/layouts/embed.html.erb b/app/views/layouts/embed.html.erb index 5dec3d0f55..1dcc41ed67 100644 --- a/app/views/layouts/embed.html.erb +++ b/app/views/layouts/embed.html.erb @@ -24,6 +24,12 @@ Unless required by applicable law or agreed to in writing, software distributed <%= render_page_title %> + <% # These link tags are necessary to initialize videojs and the quality selector plug-in using CDN. + # May be worth considering pulling the code into the local asset pipeline. + # VideoJS is held at the same version as is being used in Ramp. %> + + + <%= csrf_meta_tags %> <%= favicon_link_tag %> diff --git a/app/views/master_files/_mejs4_player_js.html.erb b/app/views/master_files/_mejs4_player_js.html.erb deleted file mode 100644 index ab73486d6b..0000000000 --- a/app/views/master_files/_mejs4_player_js.html.erb +++ /dev/null @@ -1,33 +0,0 @@ -<%# -Copyright 2011-2023, 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 --- -%> -<% content_for :page_styles do %> -<%= stylesheet_link_tag 'mejs4_player' %> -<% end %> -<% content_for :page_scripts do %> -<%= javascript_include_tag "mejs4_player" %> -<% end %> - - diff --git a/app/views/master_files/_player.html.erb b/app/views/master_files/_player.html.erb index ba72aa3281..bb5d3723b6 100644 --- a/app/views/master_files/_player.html.erb +++ b/app/views/master_files/_player.html.erb @@ -14,12 +14,10 @@ Unless required by applicable law or agreed to in writing, software distributed --- END LICENSE_HEADER BLOCK --- %> - <%= render partial: 'modules/player/section', locals: {section: @master_file, section_info: @stream_info, f_start: @f_start, f_end: @f_end} %> +<%= render partial: 'modules/player/section', locals: {section: @master_file, section_info: @stream_info, f_start: @f_start, f_end: @f_end} %> <% content_for :page_scripts do %> - <%= render partial: "mejs4_player_js", locals: {section: @master_file, section_info: @stream_info} %> - <% end %> diff --git a/app/views/modules/player/_section.html.erb b/app/views/modules/player/_section.html.erb index 5ae354d183..0ac1c5eb53 100644 --- a/app/views/modules/player/_section.html.erb +++ b/app/views/modules/player/_section.html.erb @@ -15,11 +15,6 @@ Unless required by applicable law or agreed to in writing, software distributed %>
<% if section.present? and section.derivatives.present? %> - - <% if section_info[:is_video] %> - <%= render partial: 'modules/player/video_element', locals: {section: section, section_info: section_info, f_start: @f_start, f_end: @f_end} %> - <% else %> - <%= render partial: 'modules/player/audio_element', locals: {section: section, section_info: section_info, f_start: @f_start, f_end: @f_end} %> - <% end %> + <%= render partial: 'modules/player/video_js_element', locals: {section: section, section_info: section_info, f_start: @f_start, f_end: @f_end} %> <% end %>
diff --git a/app/views/modules/player/_video_js_element.html.erb b/app/views/modules/player/_video_js_element.html.erb new file mode 100644 index 0000000000..c6451edb85 --- /dev/null +++ b/app/views/modules/player/_video_js_element.html.erb @@ -0,0 +1,235 @@ +<%# +Copyright 2011-2023, 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 --- +%> + + + +<%= master_file_meta_properties(section) do %> + <% control_bar_options = if section_info[:is_video] + { + "children": [ + 'playToggle', + 'volumePanel', + 'progressControl', + 'currentTimeDisplay', + 'timeDivider', + 'durationDisplay', + 'subsCapsButton', + 'qualitySelector' + ], + fullscreenToggle: section_info[:is_video] ? true : false + } + else + { + "children": [ + 'playToggle', + 'volumePanel', + 'progressControl', + 'currentTimeDisplay', + 'timeDivider', + 'durationDisplay' + ] + } + end %> + + <% @videojs_options = {"aspectRatio": section_info[:is_video] ? '16:9' : '1:0', + "autoplay": false, + "width": @player_width || 480, + "height": @player_height || 270, + "bigPlayButton": section_info[:is_video] ? true : false, + "poster": section_info[:is_video] ? section_info[:poster_image] : false, + "fluid": true, + "responsive": true, + "preload": "auto", + "controlBar": control_bar_options, + "userActions": { + hotkeys: true + } + }.compact.to_json %> + +
+ + <% section_info[:stream_hls].each do |hls| %> + + <% end %> + <% if section_info[:caption_paths].present? %> + <% section_info[:caption_paths].each do |c| %> + label="<%= c[:label] %>" <% end %> srclang="<%= c[:language] %>" kind="subtitles" type="<%= c[:mime_type] %>" src="<%= c[:path] %>"> + <% end %> + <% end %> + + <% if section_info[:is_video] %> + + <% end %> +
+<% end %> + +<% # These script tags are for pulling in videojs and the quality selector plug-in from their CDNs. + # May be worth considering pulling them into our local asset pipeline. %> + + + +<% content_for :page_scripts do %> + +<% end %> From 3b8f8affb1e69563f1107605488ad773261e9397 Mon Sep 17 00:00:00 2001 From: Mason Ballengee Date: Wed, 6 Sep 2023 15:27:33 -0400 Subject: [PATCH 2/4] Reenable playlist player --- app/views/modules/player/_section.html.erb | 8 +++++++- 1 file changed, 7 insertions(+), 1 deletion(-) diff --git a/app/views/modules/player/_section.html.erb b/app/views/modules/player/_section.html.erb index 0ac1c5eb53..dfd7a7743c 100644 --- a/app/views/modules/player/_section.html.erb +++ b/app/views/modules/player/_section.html.erb @@ -14,7 +14,13 @@ Unless required by applicable law or agreed to in writing, software distributed --- END LICENSE_HEADER BLOCK --- %>
- <% if section.present? and section.derivatives.present? %> + <% if section.present? && section.derivatives.present? && @master_file.present? %> <%= render partial: 'modules/player/video_js_element', locals: {section: section, section_info: section_info, f_start: @f_start, f_end: @f_end} %> + <% elsif section.present? && section.derivatives.present? && @playlist.present? %> + <% if section_info[:is_video] %> + <%= render partial: 'modules/player/video_element', locals: {section: section, section_info: section_info, f_start: @f_start, f_end: @f_end} %> + <% else %> + <%= render partial: 'modules/player/audio_element', locals: {section: section, section_info: section_info, f_start: @f_start, f_end: @f_end} %> + <% end %> <% end %>
From e76bc27902ab2f3aa2008a990c0ef8c6444e197f Mon Sep 17 00:00:00 2001 From: Mason Ballengee Date: Thu, 7 Sep 2023 17:05:06 -0400 Subject: [PATCH 3/4] Move videojs inclusion and embed css into asset pipeline --- app/assets/javascripts/application.js | 12 +- app/assets/stylesheets/application.scss | 11 +- app/assets/stylesheets/embed.scss | 114 +++++++++++++++--- app/views/layouts/embed.html.erb | 6 - .../modules/player/_video_js_element.html.erb | 111 ----------------- 5 files changed, 109 insertions(+), 145 deletions(-) diff --git a/app/assets/javascripts/application.js b/app/assets/javascripts/application.js index fd14f3b7ee..aa5d7a6bac 100644 --- a/app/assets/javascripts/application.js +++ b/app/assets/javascripts/application.js @@ -1,12 +1,12 @@ -/* +/* * Copyright 2011-2023, 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 @@ -59,4 +59,8 @@ //= stub media_player_wrapper/mejs4_link_back //= stub media_player_wrapper/mejs4_plugin_playlist_items +// Require VideoJS and VideoJS quality selector for embedded player +//= require video.js/dist/video.min.js +//= require @silvermine/videojs-quality-selector/dist/js/silvermine-videojs-quality-selector.min.js + //= require_tree . diff --git a/app/assets/stylesheets/application.scss b/app/assets/stylesheets/application.scss index 3cbebfb9fb..4af5cd9a1d 100644 --- a/app/assets/stylesheets/application.scss +++ b/app/assets/stylesheets/application.scss @@ -1,12 +1,12 @@ -/* +/* * Copyright 2011-2023, 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 @@ -60,3 +60,6 @@ @import 'avalon'; @import "datatables"; + +@import "video.js/dist/video-js.css"; +@import "@silvermine/videojs-quality-selector/dist/css/quality-selector.css"; diff --git a/app/assets/stylesheets/embed.scss b/app/assets/stylesheets/embed.scss index ee305b6052..3e09417463 100644 --- a/app/assets/stylesheets/embed.scss +++ b/app/assets/stylesheets/embed.scss @@ -1,12 +1,12 @@ -/* +/* * Copyright 2011-2023, 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 @@ -14,29 +14,103 @@ * --- END LICENSE_HEADER BLOCK --- */ -body { - background-color: #000000; - width: 100%; - height: 100%; - margin: 0; - overflow: hidden; +.video-container { position: absolute; } -.container-fluid { - padding: 0; +.video-js { + position: relative; + z-index: 0; } -.mejs-layers { - pointer-events: none !important; +.video-title { + position: absolute; + z-index: 1; + top: 5px; + left: 8px; } -#content, #content > div { - height: 100%; - max-width: none; +.video-title .video-link { + color: white; + font-size:150%; } -.mejs__audio { - position: absolute; - bottom: 0; +.video-js.vjs-playing + .video-title { + display: none; +} + +// @silvermine/videojs-quality-selector +.vjs-menu { + li { + font-size: 1em; + } +} + +.video-js .vjs-control-bar { + /* Audio: Make the controlbar visible by default */ + display: -webkit-box; + display: -webkit-flex; + display: -ms-flexbox; + display: flex; + /* Increase the control-bar icons/text size */ + font-size: 120%; +} + +/* Make player height minimum to the controls height so when we hide +video/poster area the controls are displayed correctly. */ +.video-js.vjs-audio { + min-height: 3.7em; +} + +.video-js .vjs-progress-control:hover .vjs-play-progress:after { + display: none; +} + +/* Show poster image when playback ends */ +.video-js.vjs-ended .vjs-poster { + display: block; +} + +.video-js .vjs-current-time { + display: block; +} + +/* Put playhead on top of markers */ +.video-js .vjs-play-progress:before { + z-index: 101; +} + +/* time-control elements */ +.video-js .vjs-time-control { + min-width: 0.5rem; + padding: 0 0.25rem; +} + +.vjs-time-divider { + display: block; +} + +.vjs-duration { + display: block !important; +} + +/* big-play button */ +.video-js .vjs-big-play-button { + margin-left: auto; + margin-right: auto; + height: 2.5rem; + width: 2.5rem; + line-height: 2.5rem; + border-radius: 50%; + scale: 2; + border: 0.1rem solid #fff; +} + +/* captions button selection */ +.captions-on { + border-bottom: 0.45rem ridge; +} + +.vjs-custom-external-link .vjs-icon-placeholder { + font-size: 120%; } diff --git a/app/views/layouts/embed.html.erb b/app/views/layouts/embed.html.erb index 1dcc41ed67..5dec3d0f55 100644 --- a/app/views/layouts/embed.html.erb +++ b/app/views/layouts/embed.html.erb @@ -24,12 +24,6 @@ Unless required by applicable law or agreed to in writing, software distributed <%= render_page_title %> - <% # These link tags are necessary to initialize videojs and the quality selector plug-in using CDN. - # May be worth considering pulling the code into the local asset pipeline. - # VideoJS is held at the same version as is being used in Ramp. %> - - - <%= csrf_meta_tags %> <%= favicon_link_tag %> diff --git a/app/views/modules/player/_video_js_element.html.erb b/app/views/modules/player/_video_js_element.html.erb index c6451edb85..d0ec708570 100644 --- a/app/views/modules/player/_video_js_element.html.erb +++ b/app/views/modules/player/_video_js_element.html.erb @@ -14,117 +14,6 @@ Unless required by applicable law or agreed to in writing, software distributed --- END LICENSE_HEADER BLOCK --- %> - - <%= master_file_meta_properties(section) do %> <% control_bar_options = if section_info[:is_video] { From 3c957cf6f738e1b2fcc3d898f2eb1fff14a32070 Mon Sep 17 00:00:00 2001 From: Mason Ballengee Date: Fri, 8 Sep 2023 09:12:57 -0400 Subject: [PATCH 4/4] Remove unneeded - - <% content_for :page_scripts do %>