allow rce to fetch media player from canvas

fixes CORE-2659 CORE-2661

Test Plan:
- upload a video recording
- notice it shows up in the rce and is fully functional

Change-Id: I852ccccec6582c7f490e5e024b8cbe24ae372f04
Reviewed-on: https://gerrit.instructure.com/196165
Reviewed-by: Ed Schiebel <eschiebel@instructure.com>
Tested-by: Jenkins
QA-Review: Steven Burnett <sburnett@instructure.com>
Product-Review: Steven Burnett <sburnett@instructure.com>

app/controllers/context_controller.rb

@@ -38,7 +38,7 @@ class ContextController < ApplicationController
         @media_object.user_entered_title = CanvasTextHelper.truncate_text(params[:user_entered_title], :max_length => 255) if params[:user_entered_title] && !params[:user_entered_title].empty?
         @media_object.save
       end
-      render :json => @media_object
+      render :json => @media_object.as_json.merge(:embedded_iframe_url => media_object_iframe_url(@media_object.media_id))
     end
   end
 

packages/canvas-rce/src/bridge/Bridge.js

@@ -16,6 +16,8 @@
  * with this program. If not, see <http://www.gnu.org/licenses/>.
  */
 
+import K5Uploader from '@instructure/k5uploader'
+
 /*eslint no-console: 0*/
 export default class Bridge {
   constructor() {
@@ -53,8 +55,17 @@ export default class Bridge {
     return this._mediaServerSession;
   }
 
+  get mediaServerUploader() {
+    return this._mediaServerUploader
+  }
+
   setMediaServerSession(session) {
     this._mediaServerSession = session;
+    if (this._mediaServerUploader) {
+      this._mediaServerUploader.destroy()
+      this._mediaServerUploader = null
+    }
+    this._mediaServerUploader = new K5Uploader(session)
   }
 
   detachEditor(editor) {

packages/canvas-rce/src/rce/plugins/instructure_record/UploadMedia/index.js

@@ -39,7 +39,7 @@ export function UploadMedia(props) {
       {contentProps => (
         <Modal
           label={formatMessage('Upload Media')}
-          size="large"
+          size="medium"
           onDismiss={props.onDismiss}
           open
           shouldCloseOnDocumentClick

packages/canvas-rce/src/sidebar/actions/upload.js

@@ -20,7 +20,6 @@ import * as files from "./files";
 import * as images from "./images";
 import Bridge from "../../bridge";
 import {fileEmbed} from "../../common/mimeClass";
-import K5Uploader from '@instructure/k5uploader'
 
 export const RECEIVE_FOLDER = "RECEIVE_FOLDER";
 export const FAIL_FOLDERS_LOAD = "FAIL_FOLDERS_LOAD";
@@ -208,40 +207,39 @@ function addUploaderFileCompleteEventListeners(uploader, dispatch, editor, dismi
   uploader.addEventListener('K5.complete', (mediaServerMediaObject) => {
     mediaServerMediaObject.contextCode = `${context.contextType}_${context.contextId}`
     mediaServerMediaObject.type= `${context.contextType}_${context.contextId}`
-    source.uploadMediaToCanvas(mediaServerMediaObject).then(() => {
+    source.uploadMediaToCanvas(mediaServerMediaObject).then((mediaObject) => {
       var videoElement = editor.dom.add(editor.getBody(), 'div', { 'class': 'draggableTemplate' }, ' ');
-      editor.dom.add(videoElement, 'video', { 'width': '550', 'height': ' 426', 'controls': 'true','src': 'http://www.google.com'});
-      dispatch(mediaUploadSuccess());
+      editor.dom.add(videoElement, 'iframe', { 'width': '550', 'height': '550', 'src': mediaObject.embedded_iframe_url, 'scrolling': 'no'});
+      dispatch(mediaUploadSuccess())
       dismiss()
     }).catch((error)=> {
-      dispatch(failMediaUpload(error));
+      dispatch(failMediaUpload(error))
     })
   })
 }
 
 export function saveMediaRecording(file, editor, dismiss) {
   return (dispatch, getState) => {
-    dispatch(startLoading());
-    const { source, contextId, contextType } = getState();
+    dispatch(startLoading())
+    const { source, contextId, contextType } = getState()
     return source.mediaServerSession()
     .then((mediaServerSession) => {
-      Bridge.setMediaServerSession(mediaServerSession)
       const session = generateUploadOptions(['video', 'audio', 'webm', 'video/webm', 'audio/webm'], mediaServerSession)
-      const uploader = new K5Uploader(session)
-      addUploaderReadyEventListeners(uploader, file)
-      addUploaderFileErrorEventListeners(uploader, dispatch)
-      addUploaderFileCompleteEventListeners(uploader, dispatch, editor, dismiss, {contextId, contextType}, source)
-      return uploader
+      Bridge.setMediaServerSession(session)
+      addUploaderReadyEventListeners(Bridge.mediaServerUploader, file)
+      addUploaderFileErrorEventListeners(Bridge.mediaServerUploader, dispatch)
+      addUploaderFileCompleteEventListeners(Bridge.mediaServerUploader, dispatch, editor, dismiss, {contextId, contextType}, source)
+      return Bridge.mediaServerUploader
     })
     .catch(error => {
-      dispatch(failMediaUpload(error));
+      dispatch(failMediaUpload(error))
     })
   }
 }
 
 export function createMediaServerSession() {
   return (dispatch, getState) => {
-    const { source } = getState();
+    const { source } = getState()
     if(!Bridge.mediaServerSession) {
       return source.mediaServerSession()
       .then((data) => {
@@ -254,7 +252,7 @@ export function createMediaServerSession() {
 export function uploadToMediaFolder(tabContext, fileMetaProps) {
   return (dispatch, getState) => {
     dispatch(activateMediaUpload(fileMetaProps))
-    const { source, jwt, host, contextId, contextType } = getState();
+    const { source, jwt, host, contextId, contextType } = getState()
     return source.fetchMediaFolder({ jwt, host, contextId, contextType })
     .then(({folders}) => {
       fileMetaProps.parentFolderId = folders[0].id

packages/canvas-rce/src/sidebar/sources/api.js

@@ -190,6 +190,10 @@ class RceApiSource {
     return this.fetchPage(this.uriFor('folders/media', props))
   }
 
+  fetchMediaObjectIframe(mediaObjectId) {
+    return this.fetchPage(this.uriFor(`media_objects_iframe/${mediaObjectId}`))
+  }
+
   fetchImages(props) {
     if (props.bookmark) {
       return this.apiFetch(props.bookmark, headerFor(this.jwt))

packages/canvas-rce/test/sidebar/actions/upload.test.js

@@ -59,7 +59,7 @@ describe("Upload data actions", () => {
     },
 
     uploadMediaToCanvas() {
-      return Promise.resolve({});
+      return Promise.resolve({"media_object": {"media_id": 2}});
     },
 
     preflightUpload() {

spec/controllers/context_controller_spec.rb

@@ -312,6 +312,16 @@ describe ContextController do
       expect(@media_object.title.size).to be <= 255
       expect(@media_object.user_entered_title.size).to be <= 255
     end
+
+    it "should return the embedded_ifram_url" do
+      post :create_media_object,
+        params: {:context_code => "user_#{@user.id}",
+        :id => "new_object",
+        :type => "audio",
+        :title => "title"}
+      @media_object = @user.reload.media_objects.last
+      expect(JSON.parse(response.body)["embedded_iframe_url"]).to eq media_object_iframe_url(@media_object.media_id)
+    end
   end
 
   describe "GET 'prior_users" do