use studio ScreenCapture in speed grader

flag=speedgrader_studio_media_capture

test plan:
- enable speedgrader_studio_media_capture feature flag
- go to the speed grader
- click on the media recorder button
- verify that the screen capture option is available

Change-Id: I37349bbe5fa29f431ecb028c2c96f05290974488
Reviewed-on: https://gerrit.instructure.com/c/canvas-lms/+/341093
Tested-by: Service Cloud Jenkins <svc.cloudjenkins@instructure.com>
Reviewed-by: Christopher Soto <christopher.soto@instructure.com>
Reviewed-by: Kai Bjorkman <kbjorkman@instructure.com>
QA-Review: Rohan Chugh <rohan.chugh@instructure.com>
Product-Review: Ravi Koll <ravi.koll@instructure.com>

app/views/gradebooks/speed_grader.html.erb

@@ -23,7 +23,8 @@
     :RUBRIC_ASSESSMENT => {
       :assessor_id => @current_user.id.to_s,
       :assessment_type => can_do(@assignment, @current_user, :grade) ? "grading" : "peer_review"
-    }
+    },
+    studio_media_capture_enabled: Account.site_admin.feature_enabled?(:speedgrader_studio_media_capture)
   })
   @show_left_side = false
   @show_embedded_chat = false

config/feature_flags/apogee_release_flags.yml

@@ -361,3 +361,13 @@ grading_periods_filter_dates:
       state: allowed_on
     development:
       state: allowed_on
+speedgrader_studio_media_capture:
+  state: hidden
+  applies_to: SiteAdmin
+  display_name: SpeedGrader Studio Media Capture
+  description: This feature provides the ability to capture media in SpeedGrader using Studio Screen Capture.
+  environments:
+    ci:
+      state: allowed
+    development:
+      state: allowed

package.json

@@ -22,6 +22,7 @@
     "@instructure/debounce": "^8",
     "@instructure/emotion": "^8",
     "@instructure/media-capture": "^9.0.0",
+    "@instructure/media-capture-new": "npm:@instructure/media-capture@9.1.2-rc.21",
     "@instructure/outcomes-ui": "^3",
     "@instructure/react-crop": "^5.0.1",
     "@instructure/reactour": "https://github.com/instructure/reactour#b908434fe544703e26bc67c67c4111252c401f92",

ui/shared/media-recorder/react/components/MediaRecorder.jsx

@@ -19,6 +19,7 @@
 import React from 'react'
 import {useScope as useI18nScope} from '@canvas/i18n'
 import {MediaCapture, canUseMediaCapture} from '@instructure/media-capture'
+import {ScreenCapture, canUseScreenCapture} from '@instructure/media-capture-new'
 import {func} from 'prop-types'
 import {mediaExtension} from '../../mimetypes'
 const I18n = useI18nScope('media_recorder')
@@ -73,6 +74,15 @@ export default class CanvasMediaRecorder extends React.Component {
   }
 
   render() {
+    if (ENV.studio_media_capture_enabled) {
+      return (
+        <div>
+          {canUseScreenCapture() && (
+          <ScreenCapture translations={translations} onCompleted={this.saveFile} />
+        )}
+        </div>
+      )
+    }
     return (
       <div>
         {canUseMediaCapture() && (