From f260e1d85170dbfcf7535e819563caf099e93af5 Mon Sep 17 00:00:00 2001
From: Mohit <81846020+MohitGupta14@users.noreply.github.com>
Date: Thu, 29 Jun 2023 21:02:12 +0530
Subject: [PATCH] Recording Feature implementation (#3272)

* Take a tour section became responsive for all kind of smartphones

* making responsive and adjusting the size of the icons according to different screen sizes

* fixing Interval number and Movabledo  in take a tour section

* updating activities file

* Implementation of Recording button Feature

* updating activities file

* fixes issue #3066 - to remove arrows on dismissing error message (#3222)

* fixes issue #3066 - dismissing an error message removeArrow() is not found

* fixes issue #3066

* Fix the redundant display of error messages despite availability of cards (#3231)

* Implementation of Recording button Feature

* Enhancement: Upgrade the files from Constructor function to ES6 class syntax  (#3265)

* Upgrade Planet.js file

* Upgrade GlobalPlanet.js File

* FUll-SCREEN MODE (#3253)

* Enhancement: Upgrade constructor function to ES6 class syntax.  (#3268)

* Upgrade ProjectViewer.js file

* Upgrade GlobalCard.js file

* Upgrade GlobalTag.js File

* Upgrade LocalPlanet.js File

* Upgrade Publisher.js File

* Upgrade LocalCard.js File

* Full screen help (#3269)

* Upgrade ProjectViewer.js file

* Upgrade GlobalCard.js file

* Upgrade GlobalTag.js File

* Upgrade LocalPlanet.js File

* Upgrade Publisher.js File

* Upgrade LocalCard.js File

* add help for full screen

---------

Co-authored-by: TheCharismaticEnigma <avishkar2002@mail.com>

* Implementation of Recording button Feature

* Now current tab can be recorded in Chrome and opera

* Record And FullScreen Functionality

* Recording button version 3

* Adding materialise and blinking effect in rec-btn

* Making recording button unclickable when its in use

* changes in index

* implemeting SVGs to record button

* exporting recording script code to js files and implementing SVGs

* changing dimensions in record svg and deleting ide files:

* deleting idea file

* Making Record button unclickable while recording:

* Currently user needed to click two times while starting the first recording , this problem arises after exporting the code

* indentation

* Making Record a advance feature and changing styling and blinking effect on clicking the Rec button

* Removing Record feature from firefox and exporting browser detection code from acticity.js to utils.js

* linting

* linting

* linting

---------

Co-authored-by: Kushal Shah <60709835+shahkushal38@users.noreply.github.com>
Co-authored-by: TheCharismaticEnigma <102666605+TheCharismaticEnigma@users.noreply.github.com>
Co-authored-by: Walter Bender <walter@sugarlabs.org>
Co-authored-by: TheCharismaticEnigma <avishkar2002@mail.com>
Co-authored-by: Walter Bender <walter@sorcero.com>
---
 css/activities.css        |  10 ++
 index.html                |  71 ++++++-----
 js/activity.js            | 260 ++++++++++++++++++++++++++++++--------
 js/artwork.js             |   4 +-
 js/toolbar.js             |  47 +++++--
 js/utils/utils.js         |  87 ++++++++-----
 planet/js/GlobalPlanet.js |   2 +-
 7 files changed, 347 insertions(+), 134 deletions(-)

diff --git a/css/activities.css b/css/activities.css
index 875a676950..5ac34d777f 100644
--- a/css/activities.css
+++ b/css/activities.css
@@ -131,6 +131,16 @@
   line-height: 30px;
 }
 
+.blink {
+    animation: blink-animation 1.5s infinite;
+  }
+
+  @keyframes blink-animation {
+    50% {
+      opacity: 0;
+    }
+  }
+
 /*CSS for load animation*/
 #load-container {
    width: 100%;
diff --git a/index.html b/index.html
index 0701d708fc..7de87cd798 100644
--- a/index.html
+++ b/index.html
@@ -7,11 +7,10 @@
             concepts.
         </title>
 
-	<meta name="description" content="Learn to code through music with Music Blocks. Arrange colorful blocks to create everything from simple melodies to interactive games.">
+	    <meta name="description" content="Learn to code through music with Music Blocks. Arrange colorful blocks to create everything from simple melodies to interactive games.">
         <meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width, height=device-height"/>
 	
         <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet"/>
-            
         <!-- <link href="https://fonts.googleapis.com/css2?family=PT+Mono&display=swap" rel="stylesheet"> --> 
         
         <link rel="stylesheet" href="css/activities.css" />
@@ -502,11 +501,16 @@
                                     ><i class="material-icons main">stop</i></a
                                 >
                             </li>
-
+                            <li>                                
+                                <a id="record" class="left tooltipped" data-tooltip="Record">
+                                </a>   
+                            </li>
                         </ul>
+
                         <ul class="main right">
                             <li>
                                 <a 
+
                                     id="FullScreen"
                                     class="FullScreen tooltipped dropdown-trigger" 
                                     data-position="bottom" 
@@ -828,9 +832,35 @@
                     <li><a id="new-project"></a></li>
                 </ul>
  
-            <script>             
-            var count=0;    
-            function setIcon() {
+           <script>  
+                var elem = document.documentElement;
+                function openFullscreen() {
+                if (elem.requestFullscreen) {
+                    elem.requestFullscreen();
+                    // For safari browser
+                } else if (elem.webkitRequestFullscreen) {
+                    elem.webkitRequestFullscreen();
+                    // For IE(supported above 10)
+                } else if (elem.msRequestFullscreen) { 
+                    elem.msRequestFullscreen();
+                }else if (elem.mozRequestFullscreen) { 
+                    elem.mozRequestFullscreen();
+                }
+                }
+
+                function closeFullscreen() {
+                if (document.exitFullscreen) {
+                    document.exitFullscreen();
+                } else if (document.webkitExitFullscreen) { /* Safari */
+                    document.webkitExitFullscreen();
+                } else if (document.msExitFullscreen) { /* IE11 */
+                    document.msExitFullscreen();
+                }else if (document.mozExitFullscreen) { /* IE11 */
+                    document.mozExitFullscreen();
+                }
+                }               
+                var count=0;    
+                function setIcon() {
                 var property = document.getElementById(FullScreen);
                 var iconCode = document.querySelector('#FullScrIcon');
                 //Calling full Screen
@@ -839,7 +869,7 @@
                     iconCode.textContent='\ue5d1';
                     count = 1;        
                 }
-                //Closing full Scree
+                //Closing full Screen
                 else {
                     closeFullscreen();
                     iconCode.textContent='\ue5d0';
@@ -847,35 +877,8 @@
                 }
             }
           </script>
-            <!-- Function to open and closing the screen -->
-            <script language="jscript">
-                var elem = document.documentElement;
-                    function openFullscreen() {
-                    if (elem.requestFullscreen) {
-                        elem.requestFullscreen();
-                        // For safari browser
-                    } else if (elem.webkitRequestFullscreen) {
-                        elem.webkitRequestFullscreen();
-                        // For IE(supported above 10)
-                    } else if (elem.msRequestFullscreen) { 
-                        elem.msRequestFullscreen();
-                    }
-                    }
-
-                    function closeFullscreen() {
-                    if (document.exitFullscreen) {
-                        document.exitFullscreen();
-                    } else if (document.webkitExitFullscreen) { /* Safari */
-                        document.webkitExitFullscreen();
-                    } else if (document.msExitFullscreen) { /* IE11 */
-                        document.msExitFullscreen();
-                    }
-                    }
-            </script> 
         </div>
         </div>
-        <!-- hideContents -->
-
         <div id="searchBar" tabindex="-1">
             <input
                 type="text"
diff --git a/js/activity.js b/js/activity.js
index 02392bbce7..18e58cf91d 100644
--- a/js/activity.js
+++ b/js/activity.js
@@ -293,7 +293,7 @@ class Activity {
             // eslint-disable-next-line no-console
             console.error(e);
         }
-    
+
         /**
          * Initialises major variables and renders default stack.
          */
@@ -902,6 +902,150 @@ class Activity {
             }
         };
 
+        let isExecuting = false; // Flag variable to track execution status
+
+        const doRecordButton = (activity) => {
+            if (isExecuting) {
+                return; // Exit the function if execution is already in progress
+            }
+
+            isExecuting = true; // Set the flag to indicate execution has started
+            activity._doRecordButton();
+        };
+
+        this._doRecordButton = () => {
+            const start = document.getElementById("record"),
+                stop = document.getElementById("stop"),
+                recInside = document.getElementById("rec_inside");
+            let mediaRecorder;
+            var clickEvent = new Event("click");
+            let flag = 0;
+
+            async function recordScreen() {
+                flag = 1;
+                return await navigator.mediaDevices.getDisplayMedia(
+                    {
+                        preferCurrentTab: "True",
+                        systemAudio: "include",
+                        audio: "True",
+                        video: {mediaSource: "tab"},
+                        bandwidthProfile: {
+                            video: {
+                                clientTrackSwitchOffControl: "auto",
+                                contentPreferencesMode: "auto"
+                            }
+                        },
+                        preferredVideoCodecs: "auto"
+                    }
+                );
+            }
+
+            function saveFile(recordedChunks) {
+                flag = 1;
+                recInside.classList.remove("blink");
+                const blob = new Blob(
+                    recordedChunks,
+                    {
+                        type: "video/webm"
+                    }
+                );
+
+                const filename = window.prompt("Enter file name"),
+                    downloadLink = document.createElement("a");
+                downloadLink.href = URL.createObjectURL(blob);
+                downloadLink.download = `${filename}.webm`;
+
+                document.body.appendChild(downloadLink);
+                downloadLink.click();
+                URL.revokeObjectURL(blob);
+                document.body.removeChild(downloadLink);
+                flag = 0;
+                // eslint-disable-next-line no-use-before-define
+                recording();
+                doRecordButton();
+            }
+
+            function stopRec() {
+                flag = 0;
+                mediaRecorder.stop();
+                const node = document.createElement("p");
+                node.textContent = "Stopped recording";
+                document.body.appendChild(node);
+            }
+
+            // eslint-disable-next-line no-unused-vars
+            function createRecorder (stream, mimeType) {
+                flag = 1;
+                recInside.classList.add("blink");
+                start.removeEventListener(
+                    "click",
+                    createRecorder,
+                    true
+                );
+                let recordedChunks = [];
+                const mediaRecorder = new MediaRecorder(stream);
+                stream.oninactive = function () {
+                    // eslint-disable-next-line no-console
+                    console.log("Recording is ready to save");
+                    stopRec();
+                    flag=0;
+                };
+
+                mediaRecorder.onstop = function() {
+                    saveFile(recordedChunks);
+                    recordedChunks = [];
+                    flag=0;
+                    recInside.setAttribute("fill", "#ffffff");
+                };
+
+                mediaRecorder.ondataavailable = function (e) {
+                    if (e.data.size > 0) {
+                        recordedChunks.push(e.data);
+                    }
+                };
+
+                mediaRecorder.start(200);
+                return mediaRecorder;
+            }
+
+            function recording() {
+                start.addEventListener(
+                    "click",
+                    async function handler() {
+                        const stream = await recordScreen();
+                        const mimeType = "video/webm";
+                        mediaRecorder = createRecorder(stream, mimeType);
+                        if (flag == 1) {
+                            this.removeEventListener("click",handler);
+                        }
+                        const node = document.createElement("p");
+                        node.textContent = "Started recording";
+                        document.body.appendChild(node);
+                        start.style = null;
+                        recInside.setAttribute("fill", "red");
+                    }
+                );
+            }
+
+            if (flag == 0 && isExecuting) {
+                recording();
+                start.dispatchEvent(clickEvent);
+            };
+
+            stop.addEventListener(
+                "click",
+                function() {
+                    flag = 0;
+                    recInside.classList.remove("blink");
+                    mediaRecorder.stop();
+                    const node = document.createElement("p");
+                    node.textContent = "Stopped recording";
+                    document.body.appendChild(node);
+                }
+            );
+
+        };
+
         /*
          * Runs Music Blocks at a slower rate
          */
@@ -1062,7 +1206,9 @@ class Activity {
 
             const changeText = () => {
                 const randomLoadMessage =
-                    messages.load_messages[Math.floor(Math.random() * messages.load_messages.length)];
+                      messages.load_messages[
+                          Math.floor(Math.random() * messages.load_messages.length)
+                      ];
                 document.getElementById("messageText").innerHTML = randomLoadMessage + "...";
                 counter++;
                 if (counter >= messages.load_messages.length) {
@@ -1427,8 +1573,8 @@ class Activity {
                     // if we are moving the block container, deselect the active block.
                     that.blocks.activeBlock = null;
 
-                    const delta =
-                        Math.abs(event.stageX - lastCoords.x) + Math.abs(event.stageY - lastCoords.y);
+                    // eslint-disable-next-line max-len
+                    const delta = Math.abs(event.stageX - lastCoords.x) + Math.abs(event.stageY - lastCoords.y);
 
                     if (that.scrollBlockContainer) {
                         that.blocksContainer.x += event.stageX - lastCoords.x;
@@ -2222,7 +2368,9 @@ class Activity {
                                     this.blocks.blockMoved(this.blocks.activeBlock);
                                     this.blocks.adjustDocks(this.blocks.activeBlock, true);
                                 } else if (this.palettes.activePalette !== null) {
-                                    this.palettes.activePalette.scrollEvent(-STANDARDBLOCKHEIGHT, 1);
+                                    this.palettes.activePalette.scrollEvent(
+                                        -STANDARDBLOCKHEIGHT, 1
+                                    );
                                 } else {
                                     this.blocksContainer.y -= 20;
                                 }
@@ -2453,46 +2601,48 @@ class Activity {
             this._setupPaletteMenu();
 
             // Reposition coordinate grids.
-            this.cartesianBitmap.x = this.canvas.width / (2 * this.turtleBlocksScale) - 600;
-            this.cartesianBitmap.y = this.canvas.height / (2 * this.turtleBlocksScale) - 450;
-            this.polarBitmap.x = this.canvas.width / (2 * this.turtleBlocksScale) - 600;
-            this.polarBitmap.y = this.canvas.height / (2 * this.turtleBlocksScale) - 450;
-            this.trebleBitmap.x = this.canvas.width / (2 * this.turtleBlocksScale) - 600;
-            this.trebleBitmap.y = this.canvas.height / (2 * this.turtleBlocksScale) - 450;
-            this.grandBitmap.x = this.canvas.width / (2 * this.turtleBlocksScale) - 600;
-            this.grandBitmap.y = this.canvas.height / (2 * this.turtleBlocksScale) - 450;
-            this.sopranoBitmap.x = this.canvas.width / (2 * this.turtleBlocksScale) - 600;
-            this.sopranoBitmap.y = this.canvas.height / (2 * this.turtleBlocksScale) - 450;
-            this.altoBitmap.x = this.canvas.width / (2 * this.turtleBlocksScale) - 600;
-            this.altoBitmap.y = this.canvas.height / (2 * this.turtleBlocksScale) - 450;
-            this.tenorBitmap.x = this.canvas.width / (2 * this.turtleBlocksScale) - 600;
-            this.tenorBitmap.y = this.canvas.height / (2 * this.turtleBlocksScale) - 450;
-            this.bassBitmap.x = this.canvas.width / (2 * this.turtleBlocksScale) - 600;
-            this.bassBitmap.y = this.canvas.height / (2 * this.turtleBlocksScale) - 450;
+            const newX = this.canvas.width / (2 * this.turtleBlocksScale) - 600;
+            const newY = this.canvas.height / (2 * this.turtleBlocksScale) - 450;
+            this.cartesianBitmap.x = newX;
+            this.cartesianBitmap.y = newY;
+            this.polarBitmap.x = newX;
+            this.polarBitmap.y = newY;
+            this.trebleBitmap.x = newX;
+            this.trebleBitmap.y = newY;
+            this.grandBitmap.x = newX;
+            this.grandBitmap.y = newY;
+            this.sopranoBitmap.x = newX;
+            this.sopranoBitmap.y = newY;
+            this.altoBitmap.x = newX;
+            this.altoBitmap.y = newY;
+            this.tenorBitmap.x = newX;
+            this.tenorBitmap.y = newY;
+            this.bassBitmap.x = newX;
+            this.bassBitmap.y = newY;
             // The accidental overlays
             for (let i = 0; i < 7; i++) {
-                this.grandSharpBitmap[i].x = this.canvas.width / (2 * this.turtleBlocksScale) - 600;
-                this.grandFlatBitmap[i].x = this.canvas.width / (2 * this.turtleBlocksScale) - 600;
-                this.trebleSharpBitmap[i].x = this.canvas.width / (2 * this.turtleBlocksScale) - 600;
-                this.trebleFlatBitmap[i].x = this.canvas.width / (2 * this.turtleBlocksScale) - 600;
-                this.sopranoSharpBitmap[i].x = this.canvas.width / (2 * this.turtleBlocksScale) - 600;
-                this.sopranoFlatBitmap[i].x = this.canvas.width / (2 * this.turtleBlocksScale) - 600;
-                this.altoSharpBitmap[i].x = this.canvas.width / (2 * this.turtleBlocksScale) - 600;
-                this.altoFlatBitmap[i].x = this.canvas.width / (2 * this.turtleBlocksScale) - 600;
-                this.tenorSharpBitmap[i].x = this.canvas.width / (2 * this.turtleBlocksScale) - 600;
-                this.tenorFlatBitmap[i].x = this.canvas.width / (2 * this.turtleBlocksScale) - 600;
-                this.bassSharpBitmap[i].x = this.canvas.width / (2 * this.turtleBlocksScale) - 600;
-                this.bassFlatBitmap[i].x = this.canvas.width / (2 * this.turtleBlocksScale) - 600;
+                this.grandSharpBitmap[i].x = newX;
+                this.grandFlatBitmap[i].x = newX;
+                this.trebleSharpBitmap[i].x = newX;
+                this.trebleFlatBitmap[i].x = newX;
+                this.sopranoSharpBitmap[i].x = newX;
+                this.sopranoFlatBitmap[i].x = newX;
+                this.altoSharpBitmap[i].x = newX;
+                this.altoFlatBitmap[i].x = newX;
+                this.tenorSharpBitmap[i].x = newX;
+                this.tenorFlatBitmap[i].x = newX;
+                this.bassSharpBitmap[i].x = newX;
+                this.bassFlatBitmap[i].x = newX;
             }
             // Position the sharps and flats
-            this.grandSharpBitmap[0].y = this.canvas.height / (2 * this.turtleBlocksScale) - 450;
+            this.grandSharpBitmap[0].y = newY;
             this.grandSharpBitmap[1].y = this.canvas.height / (2 * this.turtleBlocksScale) - 412.5;
             this.grandSharpBitmap[2].y = this.canvas.height / (2 * this.turtleBlocksScale) - 462.5;
             this.grandSharpBitmap[3].y = this.canvas.height / (2 * this.turtleBlocksScale) - 425;
             this.grandSharpBitmap[4].y = this.canvas.height / (2 * this.turtleBlocksScale) - 387.5;
             this.grandSharpBitmap[5].y = this.canvas.height / (2 * this.turtleBlocksScale) - 437.5;
             this.grandSharpBitmap[6].y = this.canvas.height / (2 * this.turtleBlocksScale) - 400;
-            this.grandFlatBitmap[0].y = this.canvas.height / (2 * this.turtleBlocksScale) - 450;
+            this.grandFlatBitmap[0].y = newY;
             this.grandFlatBitmap[1].y = this.canvas.height / (2 * this.turtleBlocksScale) - 487.5;
             this.grandFlatBitmap[2].y = this.canvas.height / (2 * this.turtleBlocksScale) - 437.5;
             this.grandFlatBitmap[3].y = this.canvas.height / (2 * this.turtleBlocksScale) - 475;
@@ -2574,13 +2724,13 @@ class Activity {
         };
 
         const that = this;
-        const screenWidth = window.innerWidth
+        const screenWidth = window.innerWidth;
         const  resizeCanvas_ = () => {
             if (screenWidth !== window.innerWidth) {
                 that._onResize(false);
             }
-        }
-        window.onresize = resizeCanvas_
+        };
+        window.onresize = resizeCanvas_;
 
         /*
          * Restore last stack pushed to trashStack back onto canvas.
@@ -3440,47 +3590,48 @@ class Activity {
          * Hides accidentals
          */
         this._hideAccidentals = () => {
+            const newX = this.canvas.width / (2 * this.turtleBlocksScale) - 600;
             for (let i = 0; i < 7; i++) {
                 this.grandSharpBitmap[i].visible = false;
-                this.grandSharpBitmap[i].x = this.canvas.width / (2 * this.turtleBlocksScale) - 600;
+                this.grandSharpBitmap[i].x = newX;
                 this.grandSharpBitmap[i].updateCache();
                 this.grandFlatBitmap[i].visible = false;
-                this.grandFlatBitmap[i].x = this.canvas.width / (2 * this.turtleBlocksScale) - 600;
+                this.grandFlatBitmap[i].x = newX;
                 this.grandFlatBitmap[i].updateCache();
 
                 this.trebleSharpBitmap[i].visible = false;
-                this.trebleSharpBitmap[i].x = this.canvas.width / (2 * this.turtleBlocksScale) - 600;
+                this.trebleSharpBitmap[i].x = newX;
                 this.trebleSharpBitmap[i].updateCache();
                 this.trebleFlatBitmap[i].visible = false;
-                this.trebleFlatBitmap[i].x = this.canvas.width / (2 * this.turtleBlocksScale) - 600;
+                this.trebleFlatBitmap[i].x = newX;
                 this.trebleFlatBitmap[i].updateCache();
 
                 this.sopranoSharpBitmap[i].visible = false;
-                this.sopranoSharpBitmap[i].x = this.canvas.width / (2 * this.turtleBlocksScale) - 600;
+                this.sopranoSharpBitmap[i].x = newX;
                 this.sopranoSharpBitmap[i].updateCache();
                 this.sopranoFlatBitmap[i].visible = false;
-                this.sopranoFlatBitmap[i].x = this.canvas.width / (2 * this.turtleBlocksScale) - 600;
+                this.sopranoFlatBitmap[i].x = newX;
                 this.sopranoFlatBitmap[i].updateCache();
 
                 this.altoSharpBitmap[i].visible = false;
-                this.altoSharpBitmap[i].x = this.canvas.width / (2 * this.turtleBlocksScale) - 600;
+                this.altoSharpBitmap[i].x = newX;
                 this.altoSharpBitmap[i].updateCache();
                 this.altoFlatBitmap[i].visible = false;
-                this.altoFlatBitmap[i].x = this.canvas.width / (2 * this.turtleBlocksScale) - 600;
+                this.altoFlatBitmap[i].x = newX;
                 this.altoFlatBitmap[i].updateCache();
 
                 this.tenorSharpBitmap[i].visible = false;
-                this.tenorSharpBitmap[i].x = this.canvas.width / (2 * this.turtleBlocksScale) - 600;
+                this.tenorSharpBitmap[i].x = newX;
                 this.tenorSharpBitmap[i].updateCache();
                 this.tenorFlatBitmap[i].visible = false;
-                this.tenorFlatBitmap[i].x = this.canvas.width / (2 * this.turtleBlocksScale) - 600;
+                this.tenorFlatBitmap[i].x = newX;
                 this.tenorFlatBitmap[i].updateCache();
 
                 this.bassSharpBitmap[i].visible = false;
-                this.bassSharpBitmap[i].x = this.canvas.width / (2 * this.turtleBlocksScale) - 600;
+                this.bassSharpBitmap[i].x = newX;
                 this.bassSharpBitmap[i].updateCache();
                 this.bassFlatBitmap[i].visible = false;
-                this.bassFlatBitmap[i].x = this.canvas.width / (2 * this.turtleBlocksScale) - 600;
+                this.bassFlatBitmap[i].x = newX;
                 this.bassFlatBitmap[i].updateCache();
             }
             this.update = true;
@@ -3831,6 +3982,7 @@ class Activity {
                                 // temperament.
                                 let customName = "custom";
                                 if (myBlock.connections[1] !== null) {
+                                    // eslint-disable-next-line max-len
                                     customName = this.blocks.blockList[myBlock.connections[1]].value;
                                 }
                                 // eslint-disable-next-line no-console
@@ -4011,7 +4163,9 @@ class Activity {
                 btnSize,
                 0
             );
-            this._loadButtonDragHandler(this.collapseBlocksContainer, toggleCollapsibleStacks, this);
+            this._loadButtonDragHandler(
+                this.collapseBlocksContainer, toggleCollapsibleStacks, this
+            );
 
             x += dx;
 
@@ -4384,7 +4538,9 @@ class Activity {
             this.toolbar.renderModeSelectIcon(doSwitchMode);
             this.toolbar.renderRunSlowlyIcon(doSlowButton);
             this.toolbar.renderRunStepIcon(doStepButton);
-            this.toolbar.renderAdvancedIcons(doAnalytics, doOpenPlugin, deletePlugin, setScroller);
+            this.toolbar.renderAdvancedIcons(
+                doRecordButton, doAnalytics, doOpenPlugin, deletePlugin, setScroller
+            );
             this.toolbar.renderMergeIcon(_doMergeLoad);
             this.toolbar.renderRestoreIcon(restoreTrash);
             if (_THIS_IS_MUSIC_BLOCKS_) {
diff --git a/js/artwork.js b/js/artwork.js
index e304891886..8fd4bc797f 100644
--- a/js/artwork.js
+++ b/js/artwork.js
@@ -29,7 +29,7 @@
    FADEDDOWNICON, CLOSEICON, CARTESIANBUTTON, CARTESIANPOLARBUTTON,
    EFFECTPALETTEICON, CLEARBUTTON, COLLAPSEBUTTON, EXPANDBUTTON,
    NOGRIDBUTTON, PLAYBUTTON, POLARBUTTON, STEPBUTTON, RUNBUTTON,
-   STEPMUSICBUTTON, STOPBUTTON, CARTESIAN, POLAR, TREBLE, SOPRANO,
+   STEPMUSICBUTTON, STOPBUTTON, RECORDBUTTON, CARTESIAN, POLAR, TREBLE, SOPRANO,
    ALTO, TENOR, BASS, GRAND, GRAPHICSICONX, TRASHICON, PALETTEICONS,
    CANCELBUTTON, STOPTURTLEBUTTON, NEWBUTTON, LOADBUTTON,
    OPENMERGEBUTTON, OPENBUTTON, PLANETBUTTON, HELPBUTTON, SLOWBUTTON,
@@ -534,6 +534,8 @@ const STEPMUSICBUTTON =
 const STOPBUTTON =
     '<?xml version="1.0" encoding="UTF-8" standalone="no"?> <svg width="55" height="55" xmlns:dc="http://purl.org/dc/elements/1.1/" xmlns:cc="http://creativecommons.org/ns#" xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#" xmlns:svg="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg" id="svg975" version="1.1" viewBox="0 0 28 28"> <title id="title967">アセット 24</title> <circle id="circle969" style="fill:#ffffff;stroke-width:0.9285714" r="13" cy="14" cx="14" /> <rect id="rect971" style="fill:#0050a0" ry="1" rx="1" height="9" width="9" y="9.5" x="9.5" /> </svg>';
 
+const RECORDBUTTON =
+    '<svg xmlns="http://www.w3.org/2000/svg" width="55" height="55"><circle cx="30" cy="30" r="20" stroke="#ffffff" fill="none" stroke-width="6" /><circle id="rec_inside" cx="30" cy="30" r="8" fill="#ffffff" /></svg>';
 const CARTESIAN =
     '<?xml version="1.0" encoding="UTF-8" standalone="no"?> <svg xmlns:svg="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg" version="1.0" width="1200" height="900" id="svg2"> <defs id="defs4" /> <g id="layer1"> <path d="m 0,850 1200,0" id="path5" style="fill:none;stroke:#aaaaaa;stroke-width:1px;stroke-opacity:1" /> <path d="m 0,750 1200,0" id="path7" style="fill:none;stroke:#aaaaaa;stroke-width:1px;stroke-opacity:1" /> <path d="m 0,650 1200,0" id="path9" style="fill:none;stroke:#aaaaaa;stroke-width:1px;stroke-opacity:1" /> <path d="m 0,550 1200,0" id="path11" style="fill:none;stroke:#aaaaaa;stroke-width:1px;stroke-opacity:1" /> <path d="m 0,350 1200,0" id="path13" style="fill:none;stroke:#aaaaaa;stroke-width:1px;stroke-opacity:1" /> <path d="m 0,250 1200,0" id="path15" style="fill:none;stroke:#aaaaaa;stroke-width:1px;stroke-opacity:1" /> <path d="m 0,150 1200,0" id="path17" style="fill:none;stroke:#aaaaaa;stroke-width:1px;stroke-opacity:1" /> <path d="m 0,50 1200,0" id="path19" style="fill:none;stroke:#aaaaaa;stroke-width:1px;stroke-opacity:1" /> <path d="m 1100,0 0,900" id="path21" style="fill:none;stroke:#aaaaaa;stroke-width:1px;stroke-opacity:1" /> <path d="m 1000,0 0,900" id="path23" style="fill:none;stroke:#aaaaaa;stroke-width:1px;stroke-opacity:1" /> <path d="m 900,0 0,900" id="path25" style="fill:none;stroke:#aaaaaa;stroke-width:1px;stroke-opacity:1" /> <path d="m 800,0 0,900" id="path27" style="fill:none;stroke:#aaaaaa;stroke-width:1px;stroke-opacity:1" /> <path d="m 700,0 0,900" id="path29" style="fill:none;stroke:#aaaaaa;stroke-width:1px;stroke-opacity:1" /> <path d="m 500,0 0,900" id="path31" style="fill:none;stroke:#aaaaaa;stroke-width:1px;stroke-opacity:1" /> <path d="m 400,0 0,900" id="path33" style="fill:none;stroke:#aaaaaa;stroke-width:1px;stroke-opacity:1" /> <path d="m 300,0 0,900" id="path35" style="fill:none;stroke:#aaaaaa;stroke-width:1px;stroke-opacity:1" /> <path d="m 200,0 0,900" id="path37" style="fill:none;stroke:#aaaaaa;stroke-width:1px;stroke-opacity:1" /> <path d="m 100,0 0,900" id="path39" style="fill:none;stroke:#aaaaaa;stroke-width:1px;stroke-opacity:1" /> <path d="m 590,850 20,0" id="path41" style="fill:none;stroke:#000000;stroke-width:1px;stroke-opacity:1" /> <path d="m 590,750 20,0" id="path43" style="fill:none;stroke:#000000;stroke-width:1px;stroke-opacity:1" /> <path d="m 590,650 20,0" id="path45" style="fill:none;stroke:#000000;stroke-width:1px;stroke-opacity:1" /> <path d="m 590,550 20,0" id="path47" style="fill:none;stroke:#000000;stroke-width:1px;stroke-opacity:1" /> <path d="m 0,450 1200,0" id="path49" style="fill:none;stroke:#000000;stroke-width:1px;stroke-opacity:1" /> <path d="m 590,350 20,0" id="path51" style="fill:none;stroke:#000000;stroke-width:1px;stroke-opacity:1" /> <path d="m 590,250 20,0" id="path53" style="fill:none;stroke:#000000;stroke-width:1px;stroke-opacity:1" /> <path d="m 590,150 20,0" id="path55" style="fill:none;stroke:#000000;stroke-width:1px;stroke-opacity:1" /> <path d="m 590,50 20,0" id="path57" style="fill:none;stroke:#000000;stroke-width:1px;stroke-opacity:1" /> <path d="m 1100,440 0,20" id="path59" style="fill:none;stroke:#000000;stroke-width:1px;stroke-opacity:1" /> <path d="m 1000,440 0,20" id="path61" style="fill:none;stroke:#000000;stroke-width:1px;stroke-opacity:1" /> <path d="m 900,440 0,20" id="path63" style="fill:none;stroke:#000000;stroke-width:1px;stroke-opacity:1" /> <path d="m 800,440 0,20" id="path65" style="fill:none;stroke:#000000;stroke-width:1px;stroke-opacity:1" /> <path d="m 700,440 0,20" id="path67" style="fill:none;stroke:#000000;stroke-width:1px;stroke-opacity:1" /> <path d="m 600,0 0,900" id="path69" style="fill:none;stroke:#000000;stroke-width:1px;stroke-opacity:1" /> <path d="m 500,440 0,20" id="path71" style="fill:none;stroke:#000000;stroke-width:1px;stroke-opacity:1" /> <path d="m 400,440 0,20" id="path73" style="fill:none;stroke:#000000;stroke-width:1px;stroke-opacity:1" /> <path d="m 300,440 0,20" id="path75" style="fill:none;stroke:#000000;stroke-width:1px;stroke-opacity:1" /> <path d="m 200,440 0,20" id="path77" style="fill:none;stroke:#000000;stroke-width:1px;stroke-opacity:1" /> <path d="m 100,440 0,20" id="path79" style="fill:none;stroke:#000000;stroke-width:1px;stroke-opacity:1" /> </g> <text x="603.90137" y="344.8584" id="text3218" xml:space="preserve" style="font-size:10px;font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;text-align:start;line-height:125%;writing-mode:lr-tb;text-anchor:start;fill:#000000;fill-opacity:1;stroke:none;font-family:DejaVu Sans;-inkscape-font-specification:DejaVu Sans"><tspan x="603.90137" y="344.8584" id="tspan3220">100</tspan></text> <text x="604.26758" y="244.8584" id="text3218-8" xml:space="preserve" style="font-size:10px;font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;text-align:start;line-height:125%;writing-mode:lr-tb;text-anchor:start;fill:#000000;fill-opacity:1;stroke:none;font-family:DejaVu Sans;-inkscape-font-specification:DejaVu Sans"><tspan x="604.26758" y="244.8584" id="tspan3220-7">200</tspan></text> <text x="604.23828" y="144.8584" id="text3218-7" xml:space="preserve" style="font-size:10px;font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;text-align:start;line-height:125%;writing-mode:lr-tb;text-anchor:start;fill:#000000;fill-opacity:1;stroke:none;font-family:DejaVu Sans;-inkscape-font-specification:DejaVu Sans"><tspan x="604.23828" y="144.8584" id="tspan3220-2">300</tspan></text> <text x="604.51172" y="44.858398" id="text3218-2" xml:space="preserve" style="font-size:10px;font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;text-align:start;line-height:125%;writing-mode:lr-tb;text-anchor:start;fill:#000000;fill-opacity:1;stroke:none;font-family:DejaVu Sans;-inkscape-font-specification:DejaVu Sans"><tspan x="604.51172" y="44.858398" id="tspan3220-26">400</tspan></text> <text x="1104.2285" y="444.8584" id="text3218-6" xml:space="preserve" style="font-size:10px;font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;text-align:start;line-height:125%;writing-mode:lr-tb;text-anchor:start;fill:#000000;fill-opacity:1;stroke:none;font-family:DejaVu Sans;-inkscape-font-specification:DejaVu Sans"><tspan x="1104.2285" y="444.8584" id="tspan3220-1">500</tspan></text> <text x="1004.5117" y="444.8584" id="text3218-9" xml:space="preserve" style="font-size:10px;font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;text-align:start;line-height:125%;writing-mode:lr-tb;text-anchor:start;fill:#000000;fill-opacity:1;stroke:none;font-family:DejaVu Sans;-inkscape-font-specification:DejaVu Sans"><tspan x="1004.5117" y="444.8584" id="tspan3220-4">400</tspan></text> <text x="904.23828" y="444.8584" id="text3218-0" xml:space="preserve" style="font-size:10px;font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;text-align:start;line-height:125%;writing-mode:lr-tb;text-anchor:start;fill:#000000;fill-opacity:1;stroke:none;font-family:DejaVu Sans;-inkscape-font-specification:DejaVu Sans"><tspan x="904.23828" y="444.8584" id="tspan3220-9">300</tspan></text> <text x="804.26758" y="444.8584" id="text3218-71" xml:space="preserve" style="font-size:10px;font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;text-align:start;line-height:125%;writing-mode:lr-tb;text-anchor:start;fill:#000000;fill-opacity:1;stroke:none;font-family:DejaVu Sans;-inkscape-font-specification:DejaVu Sans"><tspan x="804.26758" y="444.8584" id="tspan3220-15">200</tspan></text> <text x="703.90137" y="444.8584" id="text3218-76" xml:space="preserve" style="font-size:10px;font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;text-align:start;line-height:125%;writing-mode:lr-tb;text-anchor:start;fill:#000000;fill-opacity:1;stroke:none;font-family:DejaVu Sans;-inkscape-font-specification:DejaVu Sans"><tspan x="703.90137" y="444.8584" id="tspan3220-73">100</tspan></text> <text x="469.51172" y="444.8584" id="text3218-5" xml:space="preserve" style="font-size:10px;font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;text-align:start;line-height:125%;writing-mode:lr-tb;text-anchor:start;fill:#000000;fill-opacity:1;stroke:none;font-family:DejaVu Sans;-inkscape-font-specification:DejaVu Sans"><tspan x="469.51172" y="444.8584" id="tspan3220-6">–100</tspan></text> <text x="369.51172" y="444.8584" id="text3218-94" xml:space="preserve" style="font-size:10px;font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;text-align:start;line-height:125%;writing-mode:lr-tb;text-anchor:start;fill:#000000;fill-opacity:1;stroke:none;font-family:DejaVu Sans;-inkscape-font-specification:DejaVu Sans"><tspan x="369.51172" y="444.8584" id="tspan3220-8">–200</tspan></text> <text x="269.51172" y="444.8584" id="text3218-93" xml:space="preserve" style="font-size:10px;font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;text-align:start;line-height:125%;writing-mode:lr-tb;text-anchor:start;fill:#000000;fill-opacity:1;stroke:none;font-family:DejaVu Sans;-inkscape-font-specification:DejaVu Sans"><tspan x="269.51172" y="444.8584" id="tspan3220-90">–300</tspan></text> <text x="169.51172" y="444.8584" id="text3218-85" xml:space="preserve" style="font-size:10px;font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;text-align:start;line-height:125%;writing-mode:lr-tb;text-anchor:start;fill:#000000;fill-opacity:1;stroke:none;font-family:DejaVu Sans;-inkscape-font-specification:DejaVu Sans"><tspan x="169.51172" y="444.8584" id="tspan3220-0">–400</tspan></text> <text x="69.511719" y="444.8584" id="text3218-3" xml:space="preserve" style="font-size:10px;font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;text-align:start;line-height:125%;writing-mode:lr-tb;text-anchor:start;fill:#000000;fill-opacity:1;stroke:none;font-family:DejaVu Sans;-inkscape-font-specification:DejaVu Sans"><tspan x="69.511719" y="444.8584" id="tspan3220-85">–500</tspan></text> <text x="571.51172" y="544.8584" id="text3218-1" xml:space="preserve" style="font-size:10px;font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;text-align:start;line-height:125%;writing-mode:lr-tb;text-anchor:start;fill:#000000;fill-opacity:1;stroke:none;font-family:DejaVu Sans;-inkscape-font-specification:DejaVu Sans"><tspan x="571.51172" y="544.8584" id="tspan3220-5">–100</tspan></text> <text x="571.51172" y="644.8584" id="text3218-4" xml:space="preserve" style="font-size:10px;font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;text-align:start;line-height:125%;writing-mode:lr-tb;text-anchor:start;fill:#000000;fill-opacity:1;stroke:none;font-family:DejaVu Sans;-inkscape-font-specification:DejaVu Sans"><tspan x="571.51172" y="644.8584" id="tspan3220-81">–200</tspan></text> <text x="571.51172" y="744.8584" id="text3218-30" xml:space="preserve" style="font-size:10px;font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;text-align:start;line-height:125%;writing-mode:lr-tb;text-anchor:start;fill:#000000;fill-opacity:1;stroke:none;font-family:DejaVu Sans;-inkscape-font-specification:DejaVu Sans"><tspan x="571.51172" y="744.8584" id="tspan3220-44">–300</tspan></text> <text x="571.51172" y="844.8584" id="text3218-47" xml:space="preserve" style="font-size:10px;font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;text-align:start;line-height:125%;writing-mode:lr-tb;text-anchor:start;fill:#000000;fill-opacity:1;stroke:none;font-family:DejaVu Sans;-inkscape-font-specification:DejaVu Sans"><tspan x="571.51172" y="844.8584" id="tspan3220-63">–400</tspan></text> <text x="604.34082" y="444.8584" id="text3218-96" xml:space="preserve" style="font-size:10px;font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;text-align:start;line-height:125%;writing-mode:lr-tb;text-anchor:start;fill:#000000;fill-opacity:1;stroke:none;font-family:DejaVu Sans;-inkscape-font-specification:DejaVu Sans"><tspan x="604.34082" y="444.8584" id="tspan3220-21">0</tspan></text> <text x="69.140625" y="43.681641" id="text3218-2-7" xml:space="preserve" style="font-size:10px;font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;text-align:start;line-height:125%;writing-mode:lr-tb;text-anchor:start;fill:#000000;fill-opacity:1;stroke:none;font-family:DejaVu Sans;-inkscape-font-specification:DejaVu Sans"><tspan x="69.140625" y="43.681641" id="tspan3220-26-8">(–500, 400)</tspan></text> <text x="1074.1406" y="43.681641" id="text3218-2-7-5" xml:space="preserve" style="font-size:10px;font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;text-align:start;line-height:125%;writing-mode:lr-tb;text-anchor:start;fill:#000000;fill-opacity:1;stroke:none;font-family:DejaVu Sans;-inkscape-font-specification:DejaVu Sans"><tspan x="1074.1406" y="43.681641" id="tspan3220-26-8-7">(500, 400)</tspan></text> <text x="1074.1406" y="843.68164" id="text3218-2-7-1" xml:space="preserve" style="font-size:10px;font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;text-align:start;line-height:125%;writing-mode:lr-tb;text-anchor:start;fill:#000000;fill-opacity:1;stroke:none;font-family:DejaVu Sans;-inkscape-font-specification:DejaVu Sans"><tspan x="1074.1406" y="843.68164" id="tspan3220-26-8-8">(500, –400)</tspan></text> <text x="69.140625" y="843.68164" id="text3218-2-7-1-5" xml:space="preserve" style="font-size:10px;font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;text-align:start;line-height:125%;writing-mode:lr-tb;text-anchor:start;fill:#000000;fill-opacity:1;stroke:none;font-family:DejaVu Sans;-inkscape-font-specification:DejaVu Sans"><tspan x="69.140625" y="843.68164" id="tspan3220-26-8-8-9">(–500, –400)</tspan></text> </svg>';
 
diff --git a/js/toolbar.js b/js/toolbar.js
index 1eab3a879c..47c412a105 100644
--- a/js/toolbar.js
+++ b/js/toolbar.js
@@ -10,14 +10,15 @@
 // Foundation, 51 Franklin Street, Suite 500 Boston, MA 02110-1335 USA
 
 /*
-   global _, jQuery, _THIS_IS_MUSIC_BLOCKS_, docById, doSVG
+  global _, jQuery, _THIS_IS_MUSIC_BLOCKS_, docById, doSVG, fnBrowserDetect,
+  RECORDBUTTON
  */
 
 /* exported Toolbar */
 
 let WRAP = true;
 const $j = jQuery.noConflict();
-let play_button_debounce_timeout = null; 
+let play_button_debounce_timeout = null;
 class Toolbar {
     /**
      * @constructor
@@ -45,6 +46,7 @@ class Toolbar {
                 ["mb-logo", _("About Music Blocks")],
                 ["play", _("Play")],
                 ["stop", _("Stop")],
+                ["record",_("Record")],
                 ["FullScreen", _("Full Screen")],
                 ["newFile", _("New project")],
                 ["load", _("Load project from file")],
@@ -102,6 +104,7 @@ class Toolbar {
                 _("About Music Blocks"),
                 _("Play"),
                 _("Stop"),
+                _("Record"),
                 _("Full Screen"),
                 _("New project"),
                 _("Load project from file"),
@@ -140,6 +143,7 @@ class Toolbar {
                 ["mb-logo", _("About Turtle Blocks")],
                 ["play", _("Play")],
                 ["stop", _("Stop")],
+                ["record", _("Record")],
                 ["FullScreen", _("Full Screen")],
                 ["newFile", _("New project")],
                 ["load", _("Load project from file")],
@@ -192,6 +196,7 @@ class Toolbar {
                 _("About Turtle Blocks"),
                 _("Play"),
                 _("Stop"),
+                _("Record"),
                 _("Full Screen"),
                 _("New project"),
                 _("Load project from file"),
@@ -307,33 +312,35 @@ class Toolbar {
     renderPlayIcon(onclick) {
         const playIcon = docById("play");
         const stopIcon = docById("stop");
-        
+
         let isPlayIconRunning = false;
-        function handleClick(){
+
+        function handleClick() {
             if (!isPlayIconRunning) {
                 playIcon.onclick = null;
+                // eslint-disable-next-line no-console
                 console.log("Wait for next 2 seconds to play the music");
-                
             } else {
+                // eslint-disable-next-line no-use-before-define
                 playIcon.onclick = tempClick;
                 isPlayIconRunning = false;
             }
-        }    
+        }
 
-        var tempClick = playIcon.onclick=()=>{
+        var tempClick = playIcon.onclick = () => {
             isPlayIconRunning = false;
             onclick(this.activity);
             handleClick();
             stopIcon.style.color = this.stopIconColorWhenPlaying;
-            isPlayIconRunning = true; 
+            isPlayIconRunning = true;
             play_button_debounce_timeout = setTimeout(function() { handleClick(); }, 2000);
-            
+
             stopIcon.addEventListener("click", function(){
                 clearTimeout(play_button_debounce_timeout);
-                isPlayIconRunning = true; 
+                isPlayIconRunning = true;
                 handleClick();
-            })
-        } 
+            });
+        };
     }
 
     /**
@@ -670,6 +677,7 @@ class Toolbar {
     }
     /**
      * @public
+     * @param  {Function} rec_onclick
      * @param  {Function} analytics_onclick
      * @param  {Function} openPlugin_onclick
      * @param  {Function} delPlugin_onclick
@@ -677,18 +685,31 @@ class Toolbar {
      * @returns {void}
      */
     renderAdvancedIcons(
+        rec_onclick,
         analytics_onclick,
         openPlugin_onclick,
         delPlugin_onclick,
         setScroller
     ) {
+        const RecIcon = docById("record");
         const displayStatsIcon = docById("displayStatsIcon");
         const loadPluginIcon = docById("loadPluginIcon");
         const delPluginIcon = docById("delPluginIcon");
         const enableHorizScrollIcon = docById("enableHorizScrollIcon");
         const disableHorizScrollIcon = docById("disableHorizScrollIcon");
+        const browser = fnBrowserDetect();
+        const btn = document.getElementById("record");
+        const hideIn = ["firefox", "safari"];
+        if (hideIn.includes(browser)) {
+            btn.classList.add("hide");
+        }
 
         if (!this.activity.beginnerMode) {
+            RecIcon.innerHTML= `<i class=""material-icons main">${RECORDBUTTON}</i>`;
+            RecIcon.onclick = () => {
+                rec_onclick(this.activity);
+            };
+
             displayStatsIcon.onclick = () => {
                 analytics_onclick(this.activity);
             };
@@ -897,4 +918,4 @@ class Toolbar {
             docById("toggleAuxBtn").className -= "blue darken-1";
         }
     };
-}
\ No newline at end of file
+}
diff --git a/js/utils/utils.js b/js/utils/utils.js
index 79c550e270..58cbc07dc0 100644
--- a/js/utils/utils.js
+++ b/js/utils/utils.js
@@ -38,7 +38,8 @@
    importMembers, isSVGEmpty, last, mixedNumber, nearestBeat,
    oneHundredToFraction, prepareMacroExports, preparePluginExports,
    processMacroData, processRawPluginData, rationalSum, rgbToHex,
-   safeSVG, toFixed2, toTitleCase, windowHeight, windowWidth
+   safeSVG, toFixed2, toTitleCase, windowHeight, windowWidth,
+   fnBrowserDetect
 */
 
 const changeImage = (imgElement, from, to) => {
@@ -120,7 +121,27 @@ let format = (str, data) => {
     return str.replace(/{_([a-zA-Z0-9]+)}/g, (match, item) => {
         return _(item);
     });
-}
+};
+
+function fnBrowserDetect() {
+    const userAgent = navigator.userAgent;
+    let browserName;
+
+    if (userAgent.match(/chrome|chromium|crios/i)) {
+        browserName = "chrome";
+    } else if(userAgent.match(/firefox|fxios/i)) {
+        browserName = "firefox";
+    } else if(userAgent.match(/safari/i)) {
+        browserName = "safari";
+    } else if(userAgent.match(/opr\//i)) {
+        browserName = "opera";
+    } else if(userAgent.match(/edg/i)) {
+        browserName = "edge";
+    } else {
+        browserName="No browser detection";
+    }
+    return browserName;
+};
 
 function canvasPixelRatio() {
     const devicePixelRatio = window.devicePixelRatio || 1;
@@ -170,7 +191,7 @@ let httpGet = (projectName) => {
     }
 
     return xmlHttp.responseText;
-}
+};
 
 let httpPost = (projectName, data) => {
     let xmlHttp = null;
@@ -180,7 +201,7 @@ let httpPost = (projectName, data) => {
     xmlHttp.send(data);
     return xmlHttp.responseText;
     // return 'https://apps.facebook.com/turtleblocks/?file=' + projectName;
-}
+};
 
 function HttpRequest(url, loadCallback, userCallback) {
     // userCallback is an optional callback-handler.
@@ -328,7 +349,7 @@ let last = (myList) => {
     } else {
         return myList[i - 1];
     }
-}
+};
 
 let getTextWidth = (text, font) => {
     // re-use canvas object for better performance
@@ -337,7 +358,7 @@ let getTextWidth = (text, font) => {
     context.font = font;
     const metrics = context.measureText(text);
     return metrics.width;
-}
+};
 
 function doSVG(canvas, logo, turtles, width, height, scale) {
     // Aggregate SVG output from each turtle. If there is none, return an empty string.
@@ -376,7 +397,7 @@ let isSVGEmpty = (turtles) => {
         }
     }
     return true;
-}
+};
 
 let fileExt = (file) => {
     if (file === null) {
@@ -389,7 +410,7 @@ let fileExt = (file) => {
     }
 
     return parts.pop();
-}
+};
 
 let fileBasename = (file) => {
     const parts = file.split(".");
@@ -401,16 +422,16 @@ let fileBasename = (file) => {
         parts.pop(); // throw away suffix
         return parts.join(".");
     }
-}
+};
 
 let toTitleCase = (str) => {
     if (typeof str !== "string") return;
     let tempStr = "";
     if (str.length > 1) tempStr = str.substring(1);
     return str.toUpperCase()[0] + tempStr;
-}
+};
 
-let processPluginData = (activity, pluginData) => {
+const processPluginData = (activity, pluginData) => {
     // Plugins are JSON-encoded dictionaries.
     if (pluginData === undefined) {
         return null;
@@ -625,9 +646,9 @@ let processPluginData = (activity, pluginData) => {
 
     // Return the object in case we need to save it to local storage.
     return obj;
-}
+};
 
-let processRawPluginData = (activity, rawData) => {
+const processRawPluginData = (activity, rawData) => {
     const lineData = rawData.split("\n");
     let cleanData = "";
 
@@ -660,9 +681,9 @@ let processRawPluginData = (activity, rawData) => {
     }
 
     return obj;
-}
+};
 
-let updatePluginObj = (activity, obj) => {
+const updatePluginObj = (activity, obj) => {
     if (obj === null) {
         return;
     }
@@ -723,14 +744,14 @@ let updatePluginObj = (activity, obj) => {
     for (const name in obj["ONSTOP"]) {
         activity.pluginObjs["ONSTOP"][name] = obj["ONSTOP"][name];
     }
-}
+};
 
 let preparePluginExports = (activity, obj) => {
     // add obj to plugin dictionary and return as JSON encoded text
     updatePluginObj(activity, obj);
 
     return JSON.stringify(activity.pluginObjs);
-}
+};
 
 let processMacroData = (macroData, palettes, blocks, macroDict) => {
     // Macros are stored in a JSON-encoded dictionary.
@@ -753,7 +774,7 @@ let processMacroData = (macroData, palettes, blocks, macroDict) => {
             console.debug(e);
         }
     }
-}
+};
 
 let prepareMacroExports = (name, stack, macroDict) => {
     if (name !== null) {
@@ -761,7 +782,7 @@ let prepareMacroExports = (name, stack, macroDict) => {
     }
 
     return JSON.stringify(macroDict);
-}
+};
 
 // Some block-specific code
 // TODO: Move to camera plugin
@@ -841,7 +862,7 @@ let doUseCamera = (args, turtles, turtle, isVideo, cameraID, setCameraID, errorM
         },
         false
     );
-}
+};
 
 function doStopVideoCam(cameraID, setCameraID) {
     if (cameraID !== null) {
@@ -992,11 +1013,11 @@ let mixedNumber = (d) => {
     } else {
         return d;
     }
-}
+};
 
-let LCD = (a, b) => {
+const LCD = (a, b) => {
     return Math.abs((a * b) / GCD(a, b));
-}
+};
 
 let rationalSum = (a, b) => {
     if (a === 0 || b === 0) {
@@ -1039,7 +1060,7 @@ let rationalSum = (a, b) => {
     const lcd = LCD(a[1], b[1]);
     // const c0 = (a[0] * lcd) / a[1] + (b[0] * lcd) / b[1];
     return [(a[0] * lcd) / a[1] + (b[0] * lcd) / b[1], lcd];
-}
+};
 
 let nearestBeat = (d, b) => {
     // Find the closest beat for a given fraction.
@@ -1053,7 +1074,7 @@ let nearestBeat = (d, b) => {
     }
 
     return [count, b];
-}
+};
 
 let oneHundredToFraction = (d) => {
     // Generate some simple fractions based on a scale of 1-100
@@ -1197,11 +1218,11 @@ let oneHundredToFraction = (d) => {
         default:
             return [d, 100];
     }
-}
+};
 
 let rgbToHex = (r, g, b) => {
     return "#" + ((1 << 24) + (r << 16) + (g << 8) + b).toString(16).slice(1);
-}
+};
 
 let hexToRGB = (hex) => {
     const result = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(hex);
@@ -1212,7 +1233,7 @@ let hexToRGB = (hex) => {
             b: parseInt(result[3], 16)
         }
         : null;
-}
+};
 
 /**
  * Converts hexcode to rgb.
@@ -1227,7 +1248,7 @@ let hex2rgb = (hex) => {
     const b = bigint & 255;
 
     return "rgba(" + r + "," + g + "," + b + ",1)";
-}
+};
 
 let delayExecution = (duration) => {
     return new Promise((resolve) => {
@@ -1235,11 +1256,11 @@ let delayExecution = (duration) => {
             resolve(true);
         }, duration);
     });
-}
+};
 
 function closeWidgets() {
     window.widgetWindows.hideAllWindows();
-}
+};
 
 let closeBlkWidgets = (name) => {
     const widgetTitle = document.getElementsByClassName("wftTitle");
@@ -1249,7 +1270,7 @@ let closeBlkWidgets = (name) => {
             break;
         }
     }
-}
+};
 
 /**
  * Adds methods and variables of model and view objects to controller
@@ -1321,4 +1342,4 @@ let importMembers = (obj, className, modelArgs, viewArgs) => {
 
     // Add members of View (class type has to be controller's name + "View")
     addMembers(obj, eval(cname + "." + cname + "View"), viewArgs);
-}
+};
diff --git a/planet/js/GlobalPlanet.js b/planet/js/GlobalPlanet.js
index 50ff2bf43d..d8f5f8931e 100644
--- a/planet/js/GlobalPlanet.js
+++ b/planet/js/GlobalPlanet.js
@@ -569,4 +569,4 @@ class GlobalPlanet {
         }
     };
 
-}
\ No newline at end of file
+}