Added message for non-firefox browsers

Author: jfederico

recordrtc.php

@@ -52,7 +52,8 @@
 function get_output() {
   global $CFG;
 
-  $out  = '<div class="recordrtc">'."\n";
+  $out  = '<div id="alert" class="alert hide">Use Firefox for best experience</div>'."\n";
+  $out .= '<div class="recordrtc">'."\n";
   $out .= '  <div class="header">'."\n";
   $out .= '    <select class="recording-media" style="display:none">'."\n";
   $out .= '      <option value="record-audio">Audio</option>'."\n";

tinymce/css/style.css

@@ -49,3 +49,8 @@ audio.selected {
     -moz-transform: scale(1.05);
     transform: scale(1.05);
 }
+
+.alert {
+    text-align:center;
+    width: 100%;
+}

tinymce/js/module.js

@@ -206,6 +206,12 @@ M.tinymce_recordrtc.view_init = function(Y) {
     };
 
     //// Initialization for recordingMedia
+    if ( webrtcDetectedBrowser !== 'firefox' ) {
+        var alert = document.querySelector('div[id=alert]');
+        alert.innerHTML == "Use Firefox for best experience";
+        alert.classList.add('alert-danger');
+        alert.classList.remove('hide');
+    }
     if (webrtcDetectedBrowser === 'edge') {
         // webp isn't supported in Microsoft Edge
         // neither MediaRecorder API