From b9e38912d024ba1f4bd5874af7a0fffb76522c29 Mon Sep 17 00:00:00 2001
From: honzaflash <jan.rychly@vacuumlabs.com>
Date: Thu, 10 Mar 2022 19:10:32 +0100
Subject: [PATCH] pridej ambient audio controlls

zkopirovane z dvz-migrace
+ disable tlacitko
---
 dvz-na-cestach/na-cestach.html       | 156 ++++++++++++++++++++++++++-
 dvz-na-cestach/scripts-na-cestach.js | 142 ++++++++++++++++++++++++
 dvz-na-cestach/style-na-cestach.css  |  53 +++++++--
 3 files changed, 335 insertions(+), 16 deletions(-)
 create mode 100644 dvz-na-cestach/scripts-na-cestach.js

diff --git a/dvz-na-cestach/na-cestach.html b/dvz-na-cestach/na-cestach.html
index a8e6cc9..7d84e89 100644
--- a/dvz-na-cestach/na-cestach.html
+++ b/dvz-na-cestach/na-cestach.html
@@ -11,8 +11,151 @@
 <tw-story><noscript><tw-noscript>JavaScript needs to be enabled to play Češi na cestách.</tw-noscript></noscript></tw-story>
 <tw-storydata name="Češi na cestách" startnode="1" creator="Twine" creator-version="2.3.16" ifid="C5F3ED35-7656-4416-81FF-A5392D94C2C3" zoom="0.6" format="Harlowe" format-version="3.2.3" options="" hidden><style role="stylesheet" id="twine-user-stylesheet" type="text/twine-css"></style>
 <link href=".\style-na-cestach.css" rel="stylesheet">
-<script role="script" id="twine-user-script" type="text/twine-javascript"></script><tw-passagedata pid="1" name="init" tags="" position="100,100" size="100,100">(set: $hp to 10)(set: $inv to (a:))
-(set: $pruchod to (a:))
+<script role="script" id="twine-user-script" type="text/twine-javascript">
+// insert libraries
+// $("body").prepend(
+//     '<script src="https://code.jquery.com/jquery-3.6.0.min.js" integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4=" crossorigin="anonymous"></'+'script>\
+//     ')
+
+
+document.initAAP = function () {
+    if (document.ambientAudioPlayer) { return; }
+
+    $("body").prepend('<audio id="ambient-audio" src="" loop></audio>');
+    $("#ambient-audio")[0].volume = 0.15;
+
+    const pauseButton = document.createElement("tw-icon");
+    pauseButton.setAttribute("tabindex", 0);
+    pauseButton.setAttribute("alt", "Pause/Play");
+    pauseButton.setAttribute("title", "Pause/Play");
+    pauseButton.innerHTML = '<img src="resources/pause-icon.svg">';
+
+    const volumeButton = document.createElement("tw-icon");
+    volumeButton.setAttribute("tabindex", 0);
+    volumeButton.setAttribute("alt", "Adjust volume");
+    volumeButton.setAttribute("title", "Adjust volume");
+    volumeButton.innerHTML = '<img src="resources/loud2-icon.svg">';
+
+    const disableToggleButton = document.createElement("tw-icon");
+    disableToggleButton.setAttribute("tabindex", 0);
+    disableToggleButton.setAttribute("alt", "Enable/disable background audio");
+    disableToggleButton.setAttribute("title", "Enable/disable background audio");
+    disableToggleButton.innerHTML = '<img src="resources/pause-icon.svg" style="border: solid 2px red;">';
+    // TODO  get icons for this
+
+    let audioObject = {
+        audio: $("#ambient-audio")[0],
+        pauseButton,
+        // playIcon: '<img src="resources/play-icon.svg">',
+        // pauseIcon: '<img src="resources/pause-icon.svg">',
+        pausePlayIcons: {
+            true: '<img src="resources/play-icon.svg">', // paused
+            flase: '<img src="resources/pause-icon.svg">', // playing
+        },
+        volumeButton,
+        volumeIcons: {
+            1: '<img src="resources/loud1-icon.svg">',
+            2: '<img src="resources/loud2-icon.svg">',
+            3: '<img src="resources/loud3-icon.svg">'
+        },
+        disableToggleButton,
+        disableToggleIcons: {
+            true: '<img src="resources/play-icon.svg" style="border: solid 2px red;">', // disabled
+            false: '<img src="resources/pause-icon.svg" style="border: solid 2px red;">', // enabled
+        },
+        disabled: false,
+
+        pauseButtonPress(value) {
+            if (this.disabled) { return; }
+            const newValue = value ?? !this.audio.paused
+            if (newValue) {
+                this.audio.pause();
+            } else {
+                this.audio.play();
+            }
+            this.pauseButton.innerHTML = this.pausePlayIcons[this.audio.paused];
+        },
+        
+        disableToggleButtonPress() {
+            this.disabled = !this.disabled;
+            this.disabled && this.pauseButtonPress(true);
+            this.disableToggleButton.innerHTML = this.disableToggleIcons[this.disabled];
+            $('tw-sidebar').toggleClass('aap-disabled', this.disabled);
+        },
+
+        volumeButtonPress() {
+            if (this.disabled) { return; }
+            this.audio.volume = (this.audio.volume + 0.1) % 0.3;
+            this.volumeButton.innerHTML =
+                this.mapVolumeToIcon(this.audio.volume);
+        },
+
+        mapVolumeToIcon(fl) {
+            return this.volumeIcons[Math.round(fl * 10 + 0.25)];
+        }
+    }
+
+    document.ambientAudioPlayer = audioObject;
+
+    audioObject.pauseButton.addEventListener("click", function() {
+        document.ambientAudioPlayer.pauseButtonPress();
+    });
+    audioObject.volumeButton.addEventListener("click", function() {
+        document.ambientAudioPlayer.volumeButtonPress();
+    });
+    audioObject.disableToggleButton.addEventListener("click", function() {
+        document.ambientAudioPlayer.disableToggleButtonPress();
+    });
+}
+
+// Setup AAP for the current tw-passage
+// if the source is being set to a different one, the audio autoplays
+// if the source is the same the audio remains paused/playing
+// if true is passed as second argument the audio will always autoplay 
+document.setupAAP = function (source, always_autoplay=false) {
+    if (!document.ambientAudioPlayer) {
+        document.initAAP();
+    }
+    const aap = document.ambientAudioPlayer;
+    
+    // append the controls to the sidebar and set audio source
+    if (aap.audio.getAttribute("src") != source) {
+        aap.audio.setAttribute("src", source);
+        if (!aap.disabled && aap.audio.paused) {
+            aap.pauseButtonPress();
+        }
+    }
+
+    if (!aap.disabled && always_autoplay && aap.audio.paused) {
+        aap.pauseButtonPress();
+    }
+
+    $("tw-sidebar")[0].appendChild(aap.pauseButton);
+    $("tw-sidebar")[0].appendChild(aap.volumeButton);
+    $("tw-sidebar")[0].appendChild(aap.disableToggleButton);
+}
+
+// Stop AAP playback after the previous tw-passage
+document.stopAAP = function () {
+    if (!document.ambientAudioPlayerp || document.ambientAudioPlayer.audio.paused) {
+        return;
+    }
+    const aap = document.ambientAudioPlayer;
+
+    const orig_volume = aap.audio.volume;
+    for (let i = 0; i < 10; i += 1) {
+        setTimeout(function () {
+            aap.audio.volume = (orig_volume / 9) * (9 - i);
+        }, i * 100); // fade out over 900 ms
+    }
+    setTimeout(function () {
+        aap.pauseButtonPress();
+        aap.audio.volume = orig_volume;
+    }, 1000);
+}
+
+
+</script><tw-passagedata pid="1" name="init" tags="" position="100,100" size="100,100">(set: $hp to 10)(set: $inv to (a:))(set: $pruchod to (a:))
 (display: &quot;start&quot;)</tw-passagedata><tw-passagedata pid="2" name="vesnice" tags="fric" position="800,500" size="100,100">(set: $inv to (a: &quot;deník&quot;, &quot;nůž&quot;))
 (set: $pruchod to (a:))
 
@@ -30,7 +173,9 @@
 
 ---
 Zkontrolovat [(link-goto: &quot;inventář&quot;)]&lt;inventorylink|.
-&lt;audio src=&quot;https://drive.google.com/uc?export=download&amp;id=13LAXcRHvpKCzq7azQQJ21Bb78XTnQFu5&quot; autoplay&gt;</tw-passagedata><tw-passagedata pid="3" name="náčelník" tags="fric" position="150,1075" size="100,100">(set: $pruchod to it + (a: &quot;náčelník&quot;))
+&lt;script&gt;document.setupAPP("https://drive.google.com/uc?export=download&amp;id=13LAXcRHvpKCzq7azQQJ21Bb78XTnQFu5")&lt;/script&gt;
+<!-- &lt;audio src=&quot;https://drive.google.com/uc?export=download&amp;id=13LAXcRHvpKCzq7azQQJ21Bb78XTnQFu5&quot; autoplay &gt; -->
+</tw-passagedata><tw-passagedata pid="3" name="náčelník" tags="fric" position="150,1075" size="100,100">(set: $pruchod to it + (a: &quot;náčelník&quot;))
 
 Domek náčelníka není možné přehlédnout. Po &quot;baitu&quot; jde o největší stavbu ve vesnici, před kterou ve dne v noci hoří velký oheň. Přes den náčelník sedává ve společnosti starých bojovníků, rady starců, u tohoto ohně, kde přijímá příslušníky kmene, aby vyslechl jejich žaloby. Už z dálky je slyšet hlasité lamentování stařeny, která sedí u ohně na bobku a zpěvavým hlasem si náčelníkovi na cosi stěžuje.
 
@@ -331,8 +476,9 @@
 
 Pojďte, i my se musíme [[připravit na vylodění-&gt;přístav]].
 
-
-&lt;audio src=&quot;https://digikult.phil.muni.cz/wp-content/uploads/2022/02/cnc_vlny.wav&quot; autoplay&gt;</tw-passagedata><tw-passagedata pid="29" name="welzl start" tags="welzl" position="2300,350" size="100,100">Jmenuji se Jan Welzl. Narodil jsem se 15. srpna 1868 ve městě Zábřehu nad Moravou. Toužil jsem již jako hoch do cizích krajů, pokoušel jsem se odvyknout si těm odvážným myšlenkám, na konec však jsem neodolal, přemohly mne. Ve věku, kdy jiní počínají býti usedlými lidmi, opustil jsem v roce 1895 svůj domov.
+&lt;script&gt;document.setupAAP("https://digikult.phil.muni.cz/wp-content/uploads/2022/02/cnc_vlny.wav")&lt;/script&gt;
+<!-- &lt;audio src=&quot;https://digikult.phil.muni.cz/wp-content/uploads/2022/02/cnc_vlny.wav&quot; autoplay&gt; -->
+</tw-passagedata><tw-passagedata pid="29" name="welzl start" tags="welzl" position="2300,350" size="100,100">Jmenuji se Jan Welzl. Narodil jsem se 15. srpna 1868 ve městě Zábřehu nad Moravou. Toužil jsem již jako hoch do cizích krajů, pokoušel jsem se odvyknout si těm odvážným myšlenkám, na konec však jsem neodolal, přemohly mne. Ve věku, kdy jiní počínají býti usedlými lidmi, opustil jsem v roce 1895 svůj domov.
 
 &lt;a href=&quot;#mod-moře&quot; class=&quot;modal-open-image&quot; title=&quot;Zvětšit a zobrazit citaci&quot;&gt;&lt;img src=&quot;https://digikult.phil.muni.cz/wp-content/uploads/2022/02/CnC_more.jpg&quot;&gt;&lt;/a&gt;
 
diff --git a/dvz-na-cestach/scripts-na-cestach.js b/dvz-na-cestach/scripts-na-cestach.js
new file mode 100644
index 0000000..097f7f8
--- /dev/null
+++ b/dvz-na-cestach/scripts-na-cestach.js
@@ -0,0 +1,142 @@
+// insert libraries
+// $("body").prepend(
+//     '<script src="https://code.jquery.com/jquery-3.6.0.min.js" integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4=" crossorigin="anonymous"></'+'script>\
+//     ')
+
+
+document.initAAP = function () {
+    if (document.ambientAudioPlayer) { return; }
+
+    $("body").prepend('<audio id="ambient-audio" src="" loop></audio>');
+    $("#ambient-audio")[0].volume = 0.15;
+
+    const pauseButton = document.createElement("tw-icon");
+    pauseButton.setAttribute("tabindex", 0);
+    pauseButton.setAttribute("alt", "Pause/Play");
+    pauseButton.setAttribute("title", "Pause/Play");
+    pauseButton.innerHTML = '<img src="resources/pause-icon.svg">';
+
+    const volumeButton = document.createElement("tw-icon");
+    volumeButton.setAttribute("tabindex", 0);
+    volumeButton.setAttribute("alt", "Adjust volume");
+    volumeButton.setAttribute("title", "Adjust volume");
+    volumeButton.innerHTML = '<img src="resources/loud2-icon.svg">';
+
+    const disableToggleButton = document.createElement("tw-icon");
+    disableToggleButton.setAttribute("tabindex", 0);
+    disableToggleButton.setAttribute("alt", "Enable/disable background audio");
+    disableToggleButton.setAttribute("title", "Enable/disable background audio");
+    disableToggleButton.innerHTML = '<img src="resources/pause-icon.svg" style="border: solid 2px red;">';
+    // TODO  get icons for this
+
+    let audioObject = {
+        audio: $("#ambient-audio")[0],
+        pauseButton,
+        // playIcon: '<img src="resources/play-icon.svg">',
+        // pauseIcon: '<img src="resources/pause-icon.svg">',
+        pausePlayIcons: {
+            true: '<img src="resources/play-icon.svg">', // paused
+            flase: '<img src="resources/pause-icon.svg">', // playing
+        },
+        volumeButton,
+        volumeIcons: {
+            1: '<img src="resources/loud1-icon.svg">',
+            2: '<img src="resources/loud2-icon.svg">',
+            3: '<img src="resources/loud3-icon.svg">'
+        },
+        disableToggleButton,
+        disableToggleIcons: {
+            true: '<img src="resources/play-icon.svg" style="border: solid 2px red;">', // disabled
+            false: '<img src="resources/pause-icon.svg" style="border: solid 2px red;">', // enabled
+        },
+        disabled: false,
+
+        pauseButtonPress(value) {
+            if (this.disabled) { return; }
+            const newValue = value ?? !this.audio.paused
+            if (newValue) {
+                this.audio.pause();
+            } else {
+                this.audio.play();
+            }
+            this.pauseButton.innerHTML = this.pausePlayIcons[this.audio.paused];
+        },
+        
+        disableToggleButtonPress() {
+            this.disabled = !this.disabled;
+            this.disabled && this.pauseButtonPress(true);
+            this.disableToggleButton.innerHTML = this.disableToggleIcons[this.disabled];
+            $('tw-sidebar').toggleClass('aap-disabled', this.disabled);
+        },
+
+        volumeButtonPress() {
+            if (this.disabled) { return; }
+            this.audio.volume = (this.audio.volume + 0.1) % 0.3;
+            this.volumeButton.innerHTML =
+                this.mapVolumeToIcon(this.audio.volume);
+        },
+
+        mapVolumeToIcon(fl) {
+            return this.volumeIcons[Math.round(fl * 10 + 0.25)];
+        }
+    }
+
+    document.ambientAudioPlayer = audioObject;
+
+    audioObject.pauseButton.addEventListener("click", function() {
+        document.ambientAudioPlayer.pauseButtonPress();
+    });
+    audioObject.volumeButton.addEventListener("click", function() {
+        document.ambientAudioPlayer.volumeButtonPress();
+    });
+    audioObject.disableToggleButton.addEventListener("click", function() {
+        document.ambientAudioPlayer.disableToggleButtonPress();
+    });
+}
+
+// Setup AAP for the current tw-passage
+// if the source is being set to a different one, the audio autoplays
+// if the source is the same the audio remains paused/playing
+// if true is passed as second argument the audio will always autoplay 
+document.setupAAP = function (source, always_autoplay=false) {
+    if (!document.ambientAudioPlayer) {
+        document.initAAP();
+    }
+    const aap = document.ambientAudioPlayer;
+    
+    // append the controls to the sidebar and set audio source
+    if (aap.audio.getAttribute("src") != source) {
+        aap.audio.setAttribute("src", source);
+        if (!aap.disabled && aap.audio.paused) {
+            aap.pauseButtonPress();
+        }
+    }
+
+    if (!aap.disabled && always_autoplay && aap.audio.paused) {
+        aap.pauseButtonPress();
+    }
+
+    $("tw-sidebar")[0].appendChild(aap.pauseButton);
+    $("tw-sidebar")[0].appendChild(aap.volumeButton);
+    $("tw-sidebar")[0].appendChild(aap.disableToggleButton);
+}
+
+// Stop AAP playback after the previous tw-passage
+document.stopAAP = function () {
+    if (!document.ambientAudioPlayerp || document.ambientAudioPlayer.audio.paused) {
+        return;
+    }
+    const aap = document.ambientAudioPlayer;
+
+    const orig_volume = aap.audio.volume;
+    for (let i = 0; i < 10; i += 1) {
+        setTimeout(function () {
+            aap.audio.volume = (orig_volume / 9) * (9 - i);
+        }, i * 100); // fade out over 900 ms
+    }
+    setTimeout(function () {
+        aap.pauseButtonPress();
+        aap.audio.volume = orig_volume;
+    }, 1000);
+}
+
diff --git a/dvz-na-cestach/style-na-cestach.css b/dvz-na-cestach/style-na-cestach.css
index 238df02..9cd0282 100644
--- a/dvz-na-cestach/style-na-cestach.css
+++ b/dvz-na-cestach/style-na-cestach.css
@@ -84,16 +84,39 @@ tw-story tw-consecutive-br {
     height: 1em;
 }
 
-tw-sidebar {
-    /* TODO */
-    /* display: none; */
-    position: absolute;
-}
-
 tw-passage[tags ~= "title-passage"] {
     font-size: 110%;
 }
 
+tw-icon[alt="Undo"],
+tw-icon[alt="Redo"] {
+    display: none;
+    /* TODO remove for release */
+    display: block;
+}
+tw-icon[alt] {
+    margin: 0.3em 0;
+    opacity: 0.6;
+}
+tw-icon[alt]:hover,
+tw-icon[alt]:focus {
+    opacity: 0.9;
+}
+tw-icon[alt] > img {
+    height: 45px;
+    box-shadow: none;
+}
+
+tw-sidebar.aap-disabled > tw-icon[alt="Pause/Play"],
+tw-sidebar.aap-disabled > tw-icon[alt="Pause/Play"]:hover,
+tw-sidebar.aap-disabled > tw-icon[alt="Pause/Play"]:focus,
+tw-sidebar.aap-disabled > tw-icon[alt="Adjust volume"],
+tw-sidebar.aap-disabled > tw-icon[alt="Adjust volume"]:hover,
+tw-sidebar.aap-disabled > tw-icon[alt="Adjust volume"]:focus {
+    pointer-events: none;
+    opacity: 0.15;
+}
+
 /*==============================
     Twine Story and Passage
    Responsivness adjustments
@@ -104,15 +127,23 @@ tw-passage[tags ~= "title-passage"] {
     tw-story {
         padding: 5%;
     }
-
     tw-passage {
-        margin-top: 20px;
-        padding: 1em;
+        margin-top: 65px;
+        /* leave space for the sidebar */
+        padding: 2em;
         font-size: 85%;
         line-height: normal;
     }
-    tw-passage[tags ~= "title-passage"] {
-        font-size: 85%;
+    tw-sidebar {
+        position: absolute;
+        width: 94%;
+        left: 3%;
+        top: -110px;
+        
+        flex-direction: row;
+    }
+    tw-icon > img {
+        height: 30px
     }
 }
 /* wider screen */