From 57f00bb3f22a6247200d0d0df4557f7a68118f77 Mon Sep 17 00:00:00 2001 From: Matheus Date: Fri, 26 May 2023 16:25:57 -0300 Subject: [PATCH] Use new media attachment route on upload closes LF-328 flag=media_links_use_attachment_id Test plan: 1. In the files area in a course (or user) 2. Open the preview for a video file (upload one if needed). 3. Try to upload a CC via the CC menu and check that the correct media_attachments/ route was used and not media_objects/ Change-Id: I55e1c2fffe44de089c39b5eb96c4ba634198d242 Reviewed-on: https://gerrit.instructure.com/c/canvas-lms/+/319253 Tested-by: Service Cloud Jenkins Reviewed-by: Mysti Lilla QA-Review: Mysti Lilla Product-Review: Luis Oliveira --- app/helpers/attachment_helper.rb | 1 + jest.config.js | 1 + jest/styleMock.js | 19 ++++++ ui/features/file_preview/index.js | 8 ++- .../media-comments/jquery/mediaComment.js | 3 +- .../mediaelement/UploadMediaTrackForm.js | 9 ++- .../__tests__/UploadMediaTrackForm.test.js | 61 +++++++++++++++++++ .../mep-feature-tracks-instructure.js | 2 +- 8 files changed, 99 insertions(+), 5 deletions(-) create mode 100644 jest/styleMock.js create mode 100644 ui/shared/mediaelement/__tests__/UploadMediaTrackForm.test.js diff --git a/app/helpers/attachment_helper.rb b/app/helpers/attachment_helper.rb index 07068db5fca..012bb0c44ab 100644 --- a/app/helpers/attachment_helper.rb +++ b/app/helpers/attachment_helper.rb @@ -54,6 +54,7 @@ module AttachmentHelper end def media_preview_attributes(attachment, attrs = {}) + attrs[:attachment_id] = attachment.id attrs[:type] = attachment.content_type&.include?("video") ? "video" : "audio" attrs[:download_url] = context_url(attachment.context, :context_file_download_url, attachment.id) attrs[:media_entry_id] = attachment.media_entry_id if attachment.media_entry_id diff --git a/jest.config.js b/jest.config.js index d563bd2546f..72b0065468c 100644 --- a/jest.config.js +++ b/jest.config.js @@ -37,6 +37,7 @@ module.exports = { 'decimal.js/decimal.mjs': 'decimal.js/decimal.js', // https://github.com/ai/nanoid/issues/363 '^nanoid(/(.*)|$)': 'nanoid$1', + '\\.(css)$': '/jest/styleMock.js', }, roots: ['/ui', 'gems/plugins', 'public/javascripts'], moduleDirectories: ['ui/shims', 'public/javascripts', 'node_modules'], diff --git a/jest/styleMock.js b/jest/styleMock.js new file mode 100644 index 00000000000..d13b728dd18 --- /dev/null +++ b/jest/styleMock.js @@ -0,0 +1,19 @@ +/* + * Copyright (C) 2022 - present Instructure, Inc. + * + * This file is part of Canvas. + * + * Canvas is free software: you can redistribute it and/or modify it under + * the terms of the GNU Affero General Public License as published by the Free + * Software Foundation, version 3 of the License. + * + * Canvas is distributed in the hope that it will be useful, but WITHOUT ANY + * WARRANTY; without even the implied warranty of MERCHANTABILITY or FITNESS FOR + * A PARTICULAR PURPOSE. See the GNU Affero General Public License for more + * details. + * + * You should have received a copy of the GNU Affero General Public License along + * with this program. If not, see . + */ + +module.export = {} diff --git a/ui/features/file_preview/index.js b/ui/features/file_preview/index.js index b7df942d43b..bfa88e7ae65 100644 --- a/ui/features/file_preview/index.js +++ b/ui/features/file_preview/index.js @@ -23,7 +23,13 @@ import ready from '@instructure/ready' ready(() => { const $preview = $('#media_preview') const data = $preview.data() - $preview.mediaComment('show_inline', data.media_entry_id || 'maybe', data.type, data.download_url) + $preview.mediaComment( + 'show_inline', + data.media_entry_id || 'maybe', + data.type, + data.download_url, + data.attachment_id + ) if (ENV.NEW_FILES_PREVIEW) { $('#media_preview').css({ margin: '0', diff --git a/ui/shared/media-comments/jquery/mediaComment.js b/ui/shared/media-comments/jquery/mediaComment.js index 8e56ca385a2..1f2827f59af 100644 --- a/ui/shared/media-comments/jquery/mediaComment.js +++ b/ui/shared/media-comments/jquery/mediaComment.js @@ -177,7 +177,7 @@ const mediaCommentActions = { return $.mediaComment.init(mediaType, initOpts) }, - show_inline(id, mediaType = 'video', downloadUrl) { + show_inline(id, mediaType = 'video', downloadUrl, attachmentId = null) { // todo: replace .andSelf with .addBack when JQuery is upgraded. const $holder = $(this).closest('.instructure_file_link_holder').andSelf().first() $holder.text(I18n.t('loading', 'Loading media...')) @@ -190,6 +190,7 @@ const mediaCommentActions = { const mediaPlayerOptions = { can_add_captions: sourcesAndTracks.can_add_captions, mediaCommentId: id, + attachmentId, menuTimeoutMouseLeave: 50, success(media) { holder.focus() diff --git a/ui/shared/mediaelement/UploadMediaTrackForm.js b/ui/shared/mediaelement/UploadMediaTrackForm.js index 3d2ee7061e0..1fc721ae618 100644 --- a/ui/shared/mediaelement/UploadMediaTrackForm.js +++ b/ui/shared/mediaelement/UploadMediaTrackForm.js @@ -30,9 +30,10 @@ const I18n = useI18nScope('UploadMediaTrackForm') export default class UploadMediaTrackForm { // video url needs to be the url to mp4 version of the video. - constructor(mediaCommentId, video_url) { + constructor(mediaCommentId, video_url, attachmentId = null) { this.mediaCommentId = mediaCommentId this.video_url = video_url + this.attachmentId = attachmentId const templateVars = { languages: _.map(mejs.language.codes, (name, code) => ({name, code})), video_url: this.video_url, @@ -80,8 +81,12 @@ export default class UploadMediaTrackForm { if (!params.content || !params.locale) return submitDfd.reject() + const url = + ENV.FEATURES.media_links_use_attachment_id && this.attachmentId + ? `/media_attachments/${this.attachmentId}/media_tracks` + : `/media_objects/${this.mediaCommentId}/media_tracks` return $.ajaxJSON( - `/media_objects/${this.mediaCommentId}/media_tracks`, + url, 'POST', params, () => { diff --git a/ui/shared/mediaelement/__tests__/UploadMediaTrackForm.test.js b/ui/shared/mediaelement/__tests__/UploadMediaTrackForm.test.js new file mode 100644 index 00000000000..43d0fb4c040 --- /dev/null +++ b/ui/shared/mediaelement/__tests__/UploadMediaTrackForm.test.js @@ -0,0 +1,61 @@ +/* + * Copyright (C) 2023 - present Instructure, Inc. + * + * This file is part of Canvas. + * + * Canvas is free software: you can redistribute it and/or modify it under + * the terms of the GNU Affero General Public License as published by the Free + * Software Foundation, version 3 of the License. + * + * Canvas is distributed in the hope that it will be useful, but WITHOUT ANY + * WARRANTY; without even the implied warranty of MERCHANTABILITY or FITNESS FOR + * A PARTICULAR PURPOSE. See the GNU Affero General Public License for more + * details. + * + * You should have received a copy of the GNU Affero General Public License along + * with this program. If not, see . + */ + +import UploadMediaTrackForm from '../UploadMediaTrackForm' +import $ from 'jquery' + +jest.mock('react-dom', () => ({render: jest.fn()})) +$.ajaxJSON = jest.fn().mockImplementation(() => ({})) + +describe('UploadMediaTrackForm', () => { + let form + + beforeAll(() => { + form = new UploadMediaTrackForm('media_object_id', '/doesntmatter.mp4', 'attachment_id') + form.$dialog = { + disableWhileLoading: jest.fn(), + find: jest.fn().mockReturnThis(), + val: jest.fn(() => 'whatever'), + } + form.getFileContent = jest.fn(() => new $.Deferred().resolve({})) + }) + + it('uses the media attachment route if FF ON', () => { + window.ENV.FEATURES.media_links_use_attachment_id = true + form.onSubmit() + expect($.ajaxJSON).toHaveBeenCalledWith( + '/media_attachments/attachment_id/media_tracks', + 'POST', + expect.anything(), + expect.anything(), + expect.anything() + ) + }) + + it('uses the media objects route if FF OFF', () => { + window.ENV.FEATURES.media_links_use_attachment_id = false + form.onSubmit() + expect($.ajaxJSON).toHaveBeenCalledWith( + '/media_objects/media_object_id/media_tracks', + 'POST', + expect.anything(), + expect.anything(), + expect.anything() + ) + }) +}) diff --git a/ui/shared/mediaelement/mep-feature-tracks-instructure.js b/ui/shared/mediaelement/mep-feature-tracks-instructure.js index a0b0b1bff09..869d66f6709 100644 --- a/ui/shared/mediaelement/mep-feature-tracks-instructure.js +++ b/ui/shared/mediaelement/mep-feature-tracks-instructure.js @@ -507,7 +507,7 @@ const I18n = useI18nScope('mepfeaturetracksinstructure') .click(e => { e.preventDefault() import('./UploadMediaTrackForm').then(({default: UploadMediaTrackForm}) => { - new UploadMediaTrackForm(t.options.mediaCommentId, t.media.src) + new UploadMediaTrackForm(t.options.mediaCommentId, t.media.src, t.options.attachmentId) }) }) t.adjustLanguageBox()