From 72cc1a0876165bfa3afa8e0d3842dea5923a4a0f Mon Sep 17 00:00:00 2001
From: Vincent Vanwaelscappel <vincent@cubedesigners.com>
Date: Fri, 11 Feb 2022 12:20:57 +0100
Subject: [PATCH] wip #5041

---
 .idea/workspace.xml                     |  35 +++----
 resources/elearningmedia/js/app.js      | 127 +++++++++++++++++++++++
 resources/elearningmedia/js/spectrum.js | 130 ------------------------
 3 files changed, 139 insertions(+), 153 deletions(-)

diff --git a/.idea/workspace.xml b/.idea/workspace.xml
index 304363210..29171cce1 100644
--- a/.idea/workspace.xml
+++ b/.idea/workspace.xml
@@ -22,21 +22,10 @@
     <select />
   </component>
   <component name="ChangeListManager">
-    <list default="true" id="5d2ecd5e-a05a-4f96-a195-fa6372618165" name="Default Changelist" comment="wip #5041 @3">
-      <change afterPath="$PROJECT_DIR$/resources/elearningmedia/webpack.mix.js" afterDir="false" />
-      <change afterPath="$PROJECT_DIR$/resources/elearningpackage/webpack.mix.js" afterDir="false" />
+    <list default="true" id="5d2ecd5e-a05a-4f96-a195-fa6372618165" name="Default Changelist" comment="wip #5041 @1.5">
       <change beforePath="$PROJECT_DIR$/.idea/workspace.xml" beforeDir="false" afterPath="$PROJECT_DIR$/.idea/workspace.xml" afterDir="false" />
-      <change beforePath="$PROJECT_DIR$/app/Models/ELearningPackage.php" beforeDir="false" afterPath="$PROJECT_DIR$/app/Models/ELearningPackage.php" afterDir="false" />
-      <change beforePath="$PROJECT_DIR$/package.json" beforeDir="false" afterPath="$PROJECT_DIR$/package.json" afterDir="false" />
       <change beforePath="$PROJECT_DIR$/resources/elearningmedia/js/app.js" beforeDir="false" afterPath="$PROJECT_DIR$/resources/elearningmedia/js/app.js" afterDir="false" />
       <change beforePath="$PROJECT_DIR$/resources/elearningmedia/js/spectrum.js" beforeDir="false" afterPath="$PROJECT_DIR$/resources/elearningmedia/js/spectrum.js" afterDir="false" />
-      <change beforePath="$PROJECT_DIR$/resources/elearningpackage/js/app.js" beforeDir="false" afterPath="$PROJECT_DIR$/resources/elearningpackage/js/app.js" afterDir="false" />
-      <change beforePath="$PROJECT_DIR$/resources/elearningpackage/js/bootstrap.js" beforeDir="false" afterPath="$PROJECT_DIR$/resources/elearningpackage/js/bootstrap.js" afterDir="false" />
-      <change beforePath="$PROJECT_DIR$/resources/js/app.js" beforeDir="false" />
-      <change beforePath="$PROJECT_DIR$/resources/js/bootstrap.js" beforeDir="false" />
-      <change beforePath="$PROJECT_DIR$/resources/sass/app.sass" beforeDir="false" />
-      <change beforePath="$PROJECT_DIR$/update" beforeDir="false" afterPath="$PROJECT_DIR$/update" afterDir="false" />
-      <change beforePath="$PROJECT_DIR$/webpack.mix.js" beforeDir="false" afterPath="$PROJECT_DIR$/webpack.mix.js" afterDir="false" />
     </list>
     <option name="SHOW_DIALOG" value="false" />
     <option name="HIGHLIGHT_CONFLICTS" value="true" />
@@ -686,14 +675,7 @@
       <workItem from="1644343001625" duration="4220000" />
       <workItem from="1644394645639" duration="13635000" />
       <workItem from="1644425348765" duration="2270000" />
-      <workItem from="1644508187200" duration="9696000" />
-    </task>
-    <task id="LOCAL-00189" summary="wip #4857 @1">
-      <created>1635941612687</created>
-      <option name="number" value="00189" />
-      <option name="presentableId" value="LOCAL-00189" />
-      <option name="project" value="LOCAL" />
-      <updated>1635941612687</updated>
+      <workItem from="1644508187200" duration="9909000" />
     </task>
     <task id="LOCAL-00190" summary="wip #4857 @1">
       <created>1635949750599</created>
@@ -1031,7 +1013,14 @@
       <option name="project" value="LOCAL" />
       <updated>1644517477106</updated>
     </task>
-    <option name="localTasksCounter" value="238" />
+    <task id="LOCAL-00238" summary="wip #5041 @1.5">
+      <created>1644578113366</created>
+      <option name="number" value="00238" />
+      <option name="presentableId" value="LOCAL-00238" />
+      <option name="project" value="LOCAL" />
+      <updated>1644578113366</updated>
+    </task>
+    <option name="localTasksCounter" value="239" />
     <servers />
   </component>
   <component name="TypeScriptGeneratedFilesManager">
@@ -1084,11 +1073,11 @@
     <MESSAGE value="wip #5045 @0.75" />
     <MESSAGE value="wip #5045 @1.1" />
     <MESSAGE value="wait #5045 @0.5" />
-    <MESSAGE value="wip #5041 @1.5" />
     <MESSAGE value="wip #5041" />
     <MESSAGE value="wip #5041 @1" />
     <MESSAGE value="wip #5041 @3" />
-    <option name="LAST_COMMIT_MESSAGE" value="wip #5041 @3" />
+    <MESSAGE value="wip #5041 @1.5" />
+    <option name="LAST_COMMIT_MESSAGE" value="wip #5041 @1.5" />
   </component>
   <component name="XSLT-Support.FileAssociations.UIState">
     <expand />
diff --git a/resources/elearningmedia/js/app.js b/resources/elearningmedia/js/app.js
index c8c1f3675..bd14e892e 100644
--- a/resources/elearningmedia/js/app.js
+++ b/resources/elearningmedia/js/app.js
@@ -65,3 +65,130 @@ function finishScorm(quit) {
 window.addEventListener('unload', function (event) {
     finishScorm();
 });
+
+function Spectrum(element) {
+    this.started = false;
+    this.element = element;
+    this.init();
+}
+
+Spectrum.prototype = {
+    init: function () {
+        var $this = this;
+
+        this.svg = document.getElementById('spectrum');
+        this.svgNS = this.svg.namespaceURI;
+        this.g = document.createElementNS(this.svgNS, "g");
+
+        window.addEventListener('resize', function () {
+            $this.resize();
+        });
+        this.resize();
+
+
+        this.fftSize = 512;
+        this.tilt = 0;
+        this.choke = 100;
+        this.c = 0;
+
+
+        this.svg.appendChild(this.g);
+
+        this.setup();
+    },
+
+    setup: function () {
+        var $this = this;
+        this.element.addEventListener('loadeddata', function (e) {
+            $this.start();
+        });
+        this.element.addEventListener('play', function (e) {
+            $this.start();
+        });
+        this.element.addEventListener('canplay', function (e) {
+            $this.start();
+        });
+
+    },
+
+    resize: function () {
+        this.width = window.innerWidth;
+        this.height = window.innerHeight - 52;
+        this.maxHeight = Math.max(this.height * 0.3, 300);
+        this.svg.setAttribute("width", this.width + "px");
+        this.svg.setAttribute("height", this.height + "px");
+        this.svg.setAttribute("viewBox", "0 0 " + this.width + " " + this.height);
+    },
+
+    start: function () {
+        if (this.started) {
+            return;
+        }
+        this.resize();
+        this.started = true;
+
+        this.audioContext = new AudioContext();
+        this.analyser = (this.analyser || this.audioContext.createAnalyser());
+        this.analyser.minDecibels = -90;
+        this.analyser.maxDecibels = -10;
+        this.analyser.smoothingTimeConstant = 0.9;
+        this.analyser.fftSize = this.fftSize;
+
+        this.sourceNode = this.audioContext.createMediaElementSource(document.getElementById("player"));
+        this.sourceNode.connect(this.analyser);
+        this.sourceNode.connect(this.audioContext.destination);
+
+        this.update();
+    },
+
+    update: function () {
+        var $this = this;
+        try {
+            this.g.remove();
+        } catch (e) {
+
+        }
+        this.g = document.createElementNS(this.svgNS, "g");
+        var freqArray = new Uint8Array(this.analyser.frequencyBinCount);
+        this.analyser.getByteTimeDomainData(freqArray);
+
+        for (var i = 0; i < freqArray.length; i++) {
+            var v = freqArray[i];
+            this.shape(this.g, v, i + 1, freqArray.length, this.c);
+        }
+        this.svg.appendChild(this.g);
+
+        this.c += 0.5;
+        requestAnimationFrame(function () {
+            $this.update();
+        });
+    },
+
+    shape: function (g, freqValue, freqSequence, freqCount, colorSequence) {
+        var freqRatio = freqSequence / freqCount, x = (this.width - (this.tilt * 2)) * freqRatio + this.tilt,
+            y = this.height / 2;
+
+        var polyline = document.createElementNS(this.svgNS, "polyline"), // using power to increase highs and decrease lows
+            freqRatio = freqValue / 255, throttledRatio = (freqValue - this.choke) / (255 - this.choke),
+            strokeWidth = this.width / freqCount * 0.6 * throttledRatio,
+            throttledY = Math.max(throttledRatio, 0) * this.maxHeight, // color
+            color = "rgba(255,255,255,0.8)";
+
+        var loc_x = x - strokeWidth / 2, loc_y1 = y - throttledY / 2, loc_y2 = y + throttledY / 2,
+            x_offset = this.tilt * throttledRatio;
+
+        if (throttledRatio > 0) {
+            var point_1 = (loc_x - x_offset) + "," + loc_y1, point_2 = (loc_x + x_offset) + "," + loc_y2;
+            var points = [point_1, point_2];
+        } else {
+            var points = [loc_x + "," + (y - 1), loc_x + "," + (y + 1)]
+        }
+
+        polyline.setAttribute("stroke-width", strokeWidth);
+        polyline.setAttribute("stroke", color);
+        polyline.setAttribute("points", points.join(" "));
+        this.g.appendChild(polyline);
+    },
+
+
+}
diff --git a/resources/elearningmedia/js/spectrum.js b/resources/elearningmedia/js/spectrum.js
index 91abf9004..e69de29bb 100644
--- a/resources/elearningmedia/js/spectrum.js
+++ b/resources/elearningmedia/js/spectrum.js
@@ -1,130 +0,0 @@
-function Spectrum(element) {
-    this.started = false;
-    this.element = element;
-    this.init();
-}
-
-Spectrum.prototype = {
-    init: function () {
-        var $this = this;
-
-        this.svg = document.getElementById('spectrum');
-        this.svgNS = this.svg.namespaceURI;
-        this.g = document.createElementNS(this.svgNS, "g");
-
-        window.addEventListener('resize', function () {
-            $this.resize();
-        });
-        this.resize();
-
-
-        this.fftSize = 512;
-        this.tilt = 0;
-        this.choke = 100;
-        this.c = 0;
-
-
-        this.svg.appendChild(this.g);
-
-        this.setup();
-    },
-
-    setup: function () {
-        var $this = this;
-        this.element.addEventListener('loadeddata', function (e) {
-            $this.start();
-        });
-        this.element.addEventListener('play', function (e) {
-            $this.start();
-        });
-        this.element.addEventListener('canplay', function (e) {
-            $this.start();
-        });
-
-    },
-
-    resize: function () {
-        this.width = window.innerWidth;
-        this.height = window.innerHeight - 52;
-        this.maxHeight = Math.max(this.height * 0.3, 300);
-        this.svg.setAttribute("width", this.width + "px");
-        this.svg.setAttribute("height", this.height + "px");
-        this.svg.setAttribute("viewBox", "0 0 " + this.width + " " + this.height);
-    },
-
-    start: function () {
-        if (this.started) {
-            return;
-        }
-        this.resize();
-        this.started = true;
-
-        this.audioContext = new AudioContext();
-        this.analyser = (this.analyser || this.audioContext.createAnalyser());
-        this.analyser.minDecibels = -90;
-        this.analyser.maxDecibels = -10;
-        this.analyser.smoothingTimeConstant = 0.9;
-        this.analyser.fftSize = this.fftSize;
-
-        this.sourceNode = this.audioContext.createMediaElementSource(document.getElementById("player"));
-        this.sourceNode.connect(this.analyser);
-        this.sourceNode.connect(this.audioContext.destination);
-
-        this.update();
-    },
-
-    update: function () {
-        var $this = this;
-        try {
-            this.g.remove();
-        } catch (e) {
-
-        }
-        this.g = document.createElementNS(this.svgNS, "g");
-        var freqArray = new Uint8Array(this.analyser.frequencyBinCount);
-        this.analyser.getByteTimeDomainData(freqArray);
-
-        for (var i = 0; i < freqArray.length; i++) {
-            var v = freqArray[i];
-            this.shape(this.g, v, i + 1, freqArray.length, this.c);
-        }
-        this.svg.appendChild(this.g);
-
-        this.c += 0.5;
-        requestAnimationFrame(function () {
-            $this.update();
-        });
-    },
-
-    shape: function (g, freqValue, freqSequence, freqCount, colorSequence) {
-        var freqRatio = freqSequence / freqCount, x = (this.width - (this.tilt * 2)) * freqRatio + this.tilt,
-            y = this.height / 2;
-
-        var polyline = document.createElementNS(this.svgNS, "polyline"), // using power to increase highs and decrease lows
-            freqRatio = freqValue / 255, throttledRatio = (freqValue - this.choke) / (255 - this.choke),
-            strokeWidth = this.width / freqCount * 0.6 * throttledRatio,
-            throttledY = Math.max(throttledRatio, 0) * this.maxHeight, // color
-            color = "rgba(255,255,255,0.8)";
-
-        var loc_x = x - strokeWidth / 2, loc_y1 = y - throttledY / 2, loc_y2 = y + throttledY / 2,
-            x_offset = this.tilt * throttledRatio;
-
-        if (throttledRatio > 0) {
-            var point_1 = (loc_x - x_offset) + "," + loc_y1, point_2 = (loc_x + x_offset) + "," + loc_y2;
-            var points = [point_1, point_2];
-        } else {
-            var points = [loc_x + "," + (y - 1), loc_x + "," + (y + 1)]
-        }
-
-        polyline.setAttribute("stroke-width", strokeWidth);
-        polyline.setAttribute("stroke", color);
-        polyline.setAttribute("points", points.join(" "));
-        this.g.appendChild(polyline);
-    },
-
-
-}
-
-
-
-
-- 
2.39.5