From 185d1854ba81b38230b942f029db64e77782eae2 Mon Sep 17 00:00:00 2001 From: Mason Ballengee Date: Thu, 14 Sep 2023 15:54:43 -0400 Subject: [PATCH] Move create thumbnail button out of player --- app/assets/javascripts/application.js | 1 - .../mejs4_plugin_create_thumbnail.es6 | 233 ------------------ app/assets/javascripts/mejs4_player.js | 9 +- app/controllers/master_files_controller.rb | 2 +- app/javascript/components/Ramp.jsx | 46 ++-- app/views/media_objects/_item_view.html.erb | 9 +- app/views/media_objects/_thumbnail.html.erb | 110 +++++++++ 7 files changed, 144 insertions(+), 266 deletions(-) delete mode 100644 app/assets/javascripts/media_player_wrapper/mejs4_plugin_create_thumbnail.es6 create mode 100644 app/views/media_objects/_thumbnail.html.erb diff --git a/app/assets/javascripts/application.js b/app/assets/javascripts/application.js index aa5d7a6bac..d6afe47726 100644 --- a/app/assets/javascripts/application.js +++ b/app/assets/javascripts/application.js @@ -54,7 +54,6 @@ //= stub mediaelement/plugins/quality-i18n //= stub media_player_wrapper/mejs4_plugin_add_to_playlist //= stub media_player_wrapper/mejs4_plugin_add_marker_to_playlist -//= stub media_player_wrapper/mejs4_plugin_create_thumbnail //= stub media_player_wrapper/mejs4_plugin_track_scrubber //= stub media_player_wrapper/mejs4_link_back //= stub media_player_wrapper/mejs4_plugin_playlist_items diff --git a/app/assets/javascripts/media_player_wrapper/mejs4_plugin_create_thumbnail.es6 b/app/assets/javascripts/media_player_wrapper/mejs4_plugin_create_thumbnail.es6 deleted file mode 100644 index 1b4abdc978..0000000000 --- a/app/assets/javascripts/media_player_wrapper/mejs4_plugin_create_thumbnail.es6 +++ /dev/null @@ -1,233 +0,0 @@ -// Copyright 2011-2022, 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. - -'use strict'; - -/** - * Add Thumbnail Selector plugin - * - * A custom Avalon MediaElement 4 plugin for creating a thumbnail (still image) from a video - */ - -// If plugin needs translations, put here English one in this format: -// mejs.i18n.en["mejs.id1"] = "String 1"; -// mejs.i18n.en["mejs.id2"] = "String 2"; - -// Feature configuration -Object.assign(mejs.MepDefaults, { - // Any variable that can be configured by the end user belongs here. - // Make sure is unique by checking API and Configuration file. - // Add comments about the nature of each of these variables. -}); - -Object.assign(MediaElementPlayer.prototype, { - // Public variables (also documented according to JSDoc specifications) - - /** - * Feature constructor. - * - * Always has to be prefixed with `build` and the name that will be used in MepDefaults.features list - * @param {MediaElementPlayer} player - * @param {HTMLElement} controls - * @param {HTMLElement} layers - * @param {HTMLElement} media - */ - buildcreateThumbnail(player, controls, layers, media) { - // This allows us to access options and other useful elements already set. - // Adding variables to the object is a good idea if you plan to reuse - // those variables in further operations. - const t = this; - const addTitle = 'Create Thumbnail'; - let createThumbnailObj = t.createThumbnailObj; - - if (!player.isVideo) { - // No support for audio yet - return; - } else { - createThumbnailObj.isVideo = player.isVideo; - } - - // Make player instance available outside of this method - createThumbnailObj.player = player; - - // All code required inside here to keep it private; - // otherwise, you can create more methods or add variables - // outside of this scope - player.createThumbnailButton = document.createElement('div'); - player.createThumbnailButton.className = - t.options.classPrefix + - 'button ' + - t.options.classPrefix + - 'create-thumbnail-button'; - player.createThumbnailButton.innerHTML = ``; - - // Add control button to player - t.addControlElement(player.createThumbnailButton, 'createThumbnail'); - - // Create modal and add it to the DOM - createThumbnailObj.modalEl = createThumbnailObj.createModalEl.apply(t); - - // Set up click listener for the control button - player.createThumbnailButton.addEventListener( - 'click', - createThumbnailObj.handleControlClick.bind(t) - ); - - // Set up click listener for modal submit button now that it's created - $('#create-thumbnail-submit-button').on( - 'click', - createThumbnailObj.handleUpdatePosterClick.bind(t) - ); - }, - - // Optionally, each feature can be destroyed setting a `clean` method - - /** - * Feature destructor. - * - * Always has to be prefixed with `clean` and the name that was used in MepDefaults.features list - * @param {MediaElementPlayer} player - * @param {HTMLElement} controls - * @param {HTMLElement} layers - * @param {HTMLElement} media - */ - cleancreateThumbnail(player, controls, layers, media) {}, - - // Other optional public methods (all documented according to JSDoc specifications) - - /** - * The 'createThumbnailObj' object acts as a namespacer for this plugin's - * specific variables and methods, so as not to pollute global or MEJS scope. - * @type {Object} - */ - createThumbnailObj: { - baseUrl: null, - isVideo: null, - modalEl: null, - offset: null, - - createModalEl: function() { - let createThumbnailObj = this.createThumbnailObj; - let modalEl = document.getElementById('create-thumbnail-modal'); - - // If modal already exists, remove it - if (modalEl) { - modalEl.parentNode.removeChild(modalEl); - } - modalEl = document.createElement('div'); - modalEl.classList.add('modal'); - modalEl.classList.add('fade'); - modalEl.classList.add('in'); - modalEl.id = 'create-thumbnail-modal'; - modalEl.innerHTML = ` -
-
-
-

Update Poster Image

- -
-
-

- -
-
- - -
-
-
- `; - document.body.appendChild(modalEl); - - return modalEl; - }, - - /** - * Handle the 'Update Poster Image' button click; post form data via ajax and handle response - * @param {MouseEvent} e Event generated when Cancel form button clicked - * @return {void} - */ - handleUpdatePosterClick: function(e) { - const createThumbnailObj = this.createThumbnailObj; - const modalBody = createThumbnailObj.modalEl.getElementsByClassName( - 'modal-body' - )[0]; - - // Put in a loading spinner and disable buttons to prevent double clicks - modalBody.classList.add('spinner'); - $(createThumbnailObj.modalEl) - .find('button') - .attr({ disabled: true }); - - $.ajax({ - url: createThumbnailObj.baseUrl + '/still', - type: 'POST', - data: { - offset: createThumbnailObj.offset - } - }) - .done(response => { - $(createThumbnailObj.modalEl).modal('hide'); - }) - .fail(error => { - console.log(error); - }) - .always(() => { - modalBody.classList.remove('spinner'); - $(createThumbnailObj.modalEl) - .find('button') - .attr({ disabled: false }); - }); - }, - - /** - * Handle control button click to toggle Add Playlist display - * @param {MouseEvent} e Event generated when control button clicked - * @return {void} - */ - handleControlClick: function(e) { - let createThumbnailObj = this.createThumbnailObj; - let player = createThumbnailObj.player; - - if (player.isFullScreen) { - player.exitFullScreen(); - } - - const $modalEl = $(createThumbnailObj.modalEl); - let $imgPolaroid = $modalEl.find('.img-polaroid'); - - // Grab environmental variables - createThumbnailObj.baseUrl = - '/master_files/' + player.avalonWrapper.currentStreamInfo.id; - createThumbnailObj.offset = player.getCurrentTime(); - - if ($imgPolaroid.length > 0) { - let src = - createThumbnailObj.baseUrl + - '/poster?offset=' + - createThumbnailObj.offset + - '&preview=true'; - - // Display a preview of thumbnail to user - $imgPolaroid.attr('src', src); - $imgPolaroid.fadeIn('slow'); - } - $modalEl.modal('show'); - } - } -}); diff --git a/app/assets/javascripts/mejs4_player.js b/app/assets/javascripts/mejs4_player.js index 1e0af929f9..72d9219c99 100644 --- a/app/assets/javascripts/mejs4_player.js +++ b/app/assets/javascripts/mejs4_player.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 @@ -20,7 +20,6 @@ //= require mediaelement/plugins/quality-i18n //= require media_player_wrapper/mejs4_plugin_add_to_playlist //= require media_player_wrapper/mejs4_plugin_add_marker_to_playlist -//= require media_player_wrapper/mejs4_plugin_create_thumbnail //= require media_player_wrapper/mejs4_plugin_track_scrubber //= require media_player_wrapper/mejs4_link_back //= require media_player_wrapper/mejs4_plugin_playlist_items diff --git a/app/controllers/master_files_controller.rb b/app/controllers/master_files_controller.rb index dcaca9aadd..a39f0fb967 100644 --- a/app/controllers/master_files_controller.rb +++ b/app/controllers/master_files_controller.rb @@ -232,7 +232,7 @@ def set_frame unless @master_file.save flash[:notice] = @master_file.errors.to_a.join('
') end - redirect_to edit_media_object_path(@master_file.media_object_id, step: "file-upload") + redirect_back(fallback_location: edit_media_object_path(@master_file.media_object_id, step: "file-upload")) end end end diff --git a/app/javascript/components/Ramp.jsx b/app/javascript/components/Ramp.jsx index 5c0d1a7270..6c0d55df9e 100644 --- a/app/javascript/components/Ramp.jsx +++ b/app/javascript/components/Ramp.jsx @@ -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 @@ -15,27 +15,28 @@ */ import React from 'react'; -import { - Transcript, - IIIFPlayer, - MediaPlayer, - StructuredNavigation, - MetadataDisplay, - SupplmentalFiles +import { + Transcript, + IIIFPlayer, + MediaPlayer, + StructuredNavigation, + MetadataDisplay, + SupplmentalFiles } from "@samvera/ramp"; import 'video.js/dist/video-js.css'; import "@samvera/ramp/dist/ramp.css"; import { Col, Row, Tab, Tabs } from 'react-bootstrap'; import './Ramp.scss'; -const Ramp = ({ - base_url, - mo_id, - master_files_count, - share, - timeline, - in_progress, - cdl +const Ramp = ({ + base_url, + mo_id, + master_files_count, + share, + timeline, + thumbnail, + in_progress, + cdl }) => { const [manifestUrl, setManifestUrl] = React.useState(''); @@ -49,15 +50,16 @@ const Ramp = ({ {!in_progress && - { (cdl.enabled && !cdl.can_stream) + { (cdl.enabled && !cdl.can_stream) ? (
) : ( - { master_files_count > 0 && + { master_files_count > 0 &&
{ timeline.canCreate &&
} { share.canShare &&
} + { thumbnail.canCreate &&
}
@@ -73,7 +75,7 @@ const Ramp = ({ - { (cdl.can_stream && master_files_count != 0 && !in_progress) && + { (cdl.can_stream && master_files_count != 0 && !in_progress) && <% @page_type = @currentStreamInfo[:is_video] ? 'video' : 'audio' %> -<% can_stream = lending_enabled?(@media_object) ? current_user && @media_object.current_checkout(current_user.id).present? : true %> +<% can_stream = lending_enabled?(@media_object) ? current_user && @media_object.current_checkout(current_user.id).present? : true %> <% in_progress = show_progress?(@masterFiles) %>
@@ -29,13 +29,14 @@ Unless required by applicable law or agreed to in writing, software distributed <%= render 'workflow_progress' %>
- <%= react_component("Ramp", + <%= react_component("Ramp", { - base_url: request.protocol+request.host_with_port, - mo_id: @media_object.id, + base_url: request.protocol+request.host_with_port, + mo_id: @media_object.id, master_files_count: @media_object.master_files.size, share: { canShare: (will_partial_list_render? :share), content: lending_enabled?(@media_object) ? (render('share') if can_stream) : render('share') }, timeline: { canCreate: (current_ability.can? :create, Timeline), content: lending_enabled?(@media_object) ? (render('timeline') if can_stream) : render('timeline') }, + thumbnail: { canCreate: (current_ability.can? :edit, @media_object), content: lending_enabled?(@media_object) ? (render('thumbnail') if can_stream) : render('thumbnail') }, in_progress: in_progress, cdl: { enabled: lending_enabled?(@media_object), can_stream: can_stream, embed: render('embed_checkout'), destroy: render('destroy_checkout') } } diff --git a/app/views/media_objects/_thumbnail.html.erb b/app/views/media_objects/_thumbnail.html.erb new file mode 100644 index 0000000000..d11b5a4174 --- /dev/null +++ b/app/views/media_objects/_thumbnail.html.erb @@ -0,0 +1,110 @@ +<%# +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_scripts do %> + +<% end %>