Added container elements, volume to array (#513) and fixed scoping bugs

docs/elements/play-button.md

@@ -0,0 +1,13 @@
+## Play Button
+
+There are 4 different levels for a play button. To scope a play button to the type of audio you wish to play, you can apply special attributes to the element.
+
+The play button element responds to a `click` event on desktop browsers or a `touchstart` event on mobile browsers.
+
+### Global Play Button
+
+### Collection Play Button
+
+### Audio Play Button
+
+### Audio in Collection Play Button

docs/elements/volume-up.md

@@ -0,0 +1,21 @@
+## Volume Up Element
+
+### Overview
+The volume up element increases the global volume level of AmplitudeJS by the amount defined. This amount is an integer value between `0` and `100` with `0` being muted, and `100` as maximum. As a safe default, the increment value is set to `5` which means that on click/touch the volume will increment 5%.
+
+### Creating a Volume Up Element
+
+### Related Configuration Variables
+Default `5`
+
+`config.volume.increment`
+
+On init:
+Amplitude.init({
+    volume: {
+        increment: 5
+    }
+})
+
+### Notes
+Does not work on iOS

docs/migrations/5-x-to-6-0.md

@@ -0,0 +1,3 @@
+# Upgrading from 5.x to 6.0
+
+There are a variety of breaking changes as we move AmplitudeJS into a more professional audio library. The features added aim to improve developer experience while minimizing breaking changes. I'll try to cover all scenarios in this document. If there is anything I've missed, please let me know.

src/config.js

@@ -73,11 +73,10 @@ export const config = {
 	 * @todo BREAKING CHANGE
 	 */
 	volume: {
-		current: 0.5,
-		initial: 0.5,
+		current: 50,
 		increment: 5,
 		decrement: 5,
-		pre_mute_level: 0.5
+		pre_mute_level: 50
 	},
 	//   volume: 0.5,
 

src/elements/ContainerElement.js

@@ -0,0 +1,21 @@
+import { AudioContainerElement } from "./ContainerElements/AudioContainerElement";
+import { CollectionAudioContainerElement } from "./ContainerElements/CollectionAudioContainerElement";
+
+export class ContainerElement{
+    static containerElementQuery = '.amplitude-audio-container';
+
+    setActiveContainers( direct ){
+        this.#setActiveAudioContainers();
+        this.#setActiveCollectionAudioContainers( direct );
+    }
+
+    #setActiveAudioContainers(){
+        let audioContainerElements = new AudioContainerElement();
+        audioContainerElements.setActive();
+    }
+
+    #setActiveCollectionAudioContainers( direct ){
+        let collectionAudioContainerElements = new CollectionAudioContainerElement( direct );
+        collectionAudioContainerElements.setActive();
+    }
+}

src/elements/ContainerElements/AudioContainerElement.js

@@ -0,0 +1,40 @@
+import { config } from "@/config";
+import { ConfigState } from "@/services/ConfigState";
+
+export class AudioContainerElement {
+    static audioContainerElementQuery = '.amplitude-audio-container[data-amplitude-audio-index]:not([data-amplitude-collection-key])';
+
+    #elements;
+    #activeIndex;
+
+    setActive(){
+        if( ConfigState.getScope() == 'audio' ){
+            this.#findElements();
+            this.#resetElements();
+            this.#getActiveIndex();
+            this.#setActiveContainerElements();
+        }
+    }
+
+    #findElements(){
+        this.#elements = document.querySelectorAll( AudioContainerElement.audioContainerElementQuery );
+    }
+
+    #resetElements(){
+        this.#elements.forEach( function( element ){
+            element.classList.remove('amplitude-active-audio-container');
+        });
+    }
+
+    #getActiveIndex(){
+        this.#activeIndex = config.active_index;
+    }
+
+    #setActiveContainerElements(){
+        let activeContainerElements = document.querySelectorAll('.amplitude-audio-container[data-amplitude-audio-index="'+this.#activeIndex+'"]:not([data-amplitude-collection-key])');
+
+        activeContainerElements.forEach( function( element ){
+            element.classList.add("amplitude-active-audio-container");
+        });
+    }
+}

src/elements/ContainerElements/CollectionAudioContainerElement.js

@@ -0,0 +1,57 @@
+import { config } from "@/config";
+import { ConfigState } from "@/services/ConfigState";
+
+export class CollectionAudioContainerElement {
+    static collectionAudioContainerElementQuery = '.amplitude-audio-container[data-amplitude-audio-index][data-amplitude-collection-key]';
+
+    #direct;
+    #elements;
+    #activeIndex;
+    #activeCollection;
+
+    constructor( direct ){
+        this.#direct = direct;
+    }
+
+    setActive(){
+        if( ConfigState.getScope() == 'collection' ){
+            this.#findElements();
+            this.#resetElements();
+            this.#getActiveIndex();
+            this.#setActiveContainerElements();
+        }
+    }
+
+    #findElements(){
+        this.#elements = document.querySelectorAll( CollectionAudioContainerElement.collectionAudioContainerElementQuery );
+    }
+
+    #resetElements(){
+        this.#elements.forEach( function( element ){
+            element.classList.remove('amplitude-active-audio-container');
+        });
+    }
+
+    #getActiveIndex(){
+        this.#activeCollection = ConfigState.getActiveCollection();
+
+        if( this.#direct ){
+            this.#activeIndex = config.collections[ this.#activeCollection ].active_index;
+        }else{
+            if( ConfigState.isCollectionShuffled( this.#activeCollection ) ){
+                this.#activeIndex = config.collections[ this.#activeCollection ].shuffle_list[
+                    config.collections[ this.#activeCollection ].active_index
+                ].index;
+            }else{
+                this.#activeIndex = config.collections[ this.#activeCollection ].active_index;
+            }
+        }
+    }
+
+    #setActiveContainerElements(){
+        let activeContainerElements = document.querySelectorAll('.amplitude-audio-container[data-amplitude-audio-index="'+this.#activeIndex+'"][data-amplitude-collection-key="'+this.#activeCollection+'"]');
+        activeContainerElements.forEach( function( element ){
+            element.classList.add("amplitude-active-audio-container");
+        });
+    }
+}

src/elements/MuteElement.js

@@ -1,3 +1,4 @@
+import { Audio } from "@/core/Audio";
 import { ConfigState } from "@/services/ConfigState";
 import { VolumeSliderElement } from "./VolumeSliderElement";
 import { Debug } from "@/services/Debug";
@@ -68,11 +69,11 @@ export class MuteElement {
 
         elements.forEach( function( element ){
             if( ConfigState.getVolume() == 0 ){
-                element.classList.add("amplitude-not-muted");
-                element.classList.remove("amplitude-muted");
-            }else{
                 element.classList.remove("amplitude-not-muted");
                 element.classList.add("amplitude-muted");
+            }else{
+                element.classList.add("amplitude-not-muted");
+                element.classList.remove("amplitude-muted");
             }
         });
     }

src/elements/NextElements/CollectionNextElement.js

@@ -35,7 +35,7 @@ export class CollectionNextElement {
     }
 
     #handleInteraction(){
-        let collectionKey = this.attribute('data-amplitude-collection-key');
+        let collectionKey = this.getAttribute('data-amplitude-collection-key');
 
         if( collectionKey == config.active_collection ){
             let collectionNavigation = new CollectionNavigation();

src/elements/PauseElements/AudioPauseElement.js

@@ -36,7 +36,7 @@ export class AudioPauseElement{
 
     #handleInteraction(){
         if( !ConfigState.isTouchMoving() ){
-            let audioIndex = this.attribute('data-amplitude-audio-index');
+            let audioIndex = this.getAttribute('data-amplitude-audio-index');
 
             // If the scope is audio and the index of the element matches the active audio
             // index, then we pause the player.

src/elements/PauseElements/CollectionAudioPauseElement.js

@@ -26,18 +26,18 @@ export class CollectionAudioPauseElement{
         this.#elements.forEach( (element) => {
             if( this.#mobile ){
                 element.removeEventListener("touchend", this.#handleInteraction );
-                element.addEventListener("touchend", this.#handleInteraction );
+                element.addEventListener("touchend", this.#handleInteraction.bind(this, element) );
             }else{
                 element.removeEventListener("click", this.#handleInteraction );
-                element.addEventListener("click", this.#handleInteraction );
+                element.addEventListener("click", this.#handleInteraction.bind(this, element) );
             }
         });
     }
 
     #handleInteraction(){
         if( !ConfigState.isTouchMoving() ){
-            let collectionKey = this.attribute('data-amplitude-collection-key');
-            let audioIndex = this.attribute('data-amplitude-audio-index');
+            let collectionKey = element.getAttribute('data-amplitude-collection-key');
+            let audioIndex = element.getAttribute('data-amplitude-audio-index');
 
             if( config.active_collection == collectionKey &&
                 config.collections[ collectionKey ].active_index == audioIndex ){

src/elements/PauseElements/CollectionPauseElement.js

@@ -35,7 +35,7 @@ export class CollectionPauseElement{
 
     #handleInteraction(){
         if( !ConfigState.isTouchMoving() ){
-            let collectionKey = this.attribute('data-amplitude-collection-key');
+            let collectionKey = this.getAttribute('data-amplitude-collection-key');
 
             // Ensure we pause the audio if the active collection is
             // what is controlled by this pause element.

src/elements/PlayElements/AudioPlayElement.js

@@ -28,21 +28,21 @@ export class AudioPlayElement {
     }
 
     #bindInteractions(){
-        this.#elements.forEach( (element) => {;
+        this.#elements.forEach( (element) => {
             if( this.#mobile ){
                 element.removeEventListener("touchend", this.#handleInteraction );
-                element.addEventListener("touchend", this.#handleInteraction );
+                element.addEventListener("touchend", this.#handleInteraction.bind(this, element) );
             }else{
                 element.removeEventListener("click", this.#handleInteraction );
-                element.addEventListener("click", this.#handleInteraction );
+                element.addEventListener("click", this.#handleInteraction.bind(this, element) );
             }
         } );
     }
 
-    #handleInteraction(){
-        if( !ConfigState.isTouchMoving() ){
-            let index = this.attribute('data-amplitude-audio-index');
-            
+    #handleInteraction( element ){
+        if( !ConfigState.isTouchMoving() ){     
+            let index = element.getAttribute('data-amplitude-audio-index');
+
             if( !AudioChecks.audioExists( index ) ){
                 Debug.writeMessage('Audio with index "'+index+'" does not exist! Please add an audio object at this index in your configuration.');
                 return false;

src/elements/PlayElements/CollectionAudioPlayElement.js

@@ -39,8 +39,8 @@ export class CollectionAudioPlayElement {
 
     #handleInteraction(){
         if( !ConfigState.isTouchMoving() ){
-            let collectionKey = this.attribute('data-amplitude-collection-key');
-            let audioIndex = this.attribute('data-amplitude-audio-index');
+            let collectionKey = this.getAttribute('data-amplitude-collection-key');
+            let audioIndex = this.getAttribute('data-amplitude-audio-index');
 
             this.#handleCollectionChanges( collectionKey, audioIndex );
             this.#handleAudioChanges( collectionKey, audioIndex );

src/elements/PlayPauseElements/AudioPlayPauseElement.js

@@ -31,10 +31,10 @@ export class AudioPlayPauseElement {
         this.#elements.forEach( (element) => {;
             if( this.#mobile ){
                 element.removeEventListener("touchend", this.#handleInteraction );
-                element.addEventListener("touchend", this.#handleInteraction );
+                element.addEventListener("touchend", this.#handleInteraction.bind(this, element) );
             }else{
                 element.removeEventListener("click", this.#handleInteraction );
-                element.addEventListener("click", this.#handleInteraction );
+                element.addEventListener("click", this.#handleInteraction.bind(this, element) );
             }
         } );
     }
@@ -59,9 +59,9 @@ export class AudioPlayPauseElement {
      * 
      * @returns {boolean|null}
      */
-    #handleInteraction(){
+    #handleInteraction( element ){
         if( !ConfigState.isTouchMoving() ){
-            let index = this.attribute('data-amplitude-audio-index');
+            let index = element.getAttribute('data-amplitude-audio-index');
 
             if( !AudioChecks.audioExists( index ) ){
                 Debug.writeMessage('Audio with index "'+index+'" does not exist! Please add an audio object at this index in your configuration.');
@@ -99,10 +99,12 @@ export class AudioPlayPauseElement {
     }
 
     #toggleAudio(){
+        let audio = new Audio();
+
         if( config.audio_element.paused ){
-            Audio.play();
+            audio.play();
         }else{
-            Audio.pause();
+            audio.pause();
         }
     }
 

src/elements/PlayPauseElements/CollectionAudioPlayPauseElement.js

@@ -29,18 +29,18 @@ export class CollectionAudioPlayPauseElement {
         this.#elements.forEach( (element) => {
             if( this.#mobile ){
                 element.removeEventListener("touchend", this.#handleInteraction );
-                element.addEventListener("touchend", this.#handleInteraction );
+                element.addEventListener("touchend", this.#handleInteraction.bind(this, element) );
             }else{
                 element.removeEventListener("click", this.#handleInteraction );
-                element.addEventListener("click", this.#handleInteraction );
+                element.addEventListener("click", this.#handleInteraction.bind(this, element) );
             }
         } );
     }
 
-    #handleInteraction(){
+    #handleInteraction( element ){
         if( !ConfigState.isTouchMoving() ){
-            let collectionKey = this.attribute('data-amplitude-collection-key');
-            let audioIndex = this.attribute('data-amplitude-audio-index');
+            let collectionKey = element.getAttribute('data-amplitude-collection-key');
+            let audioIndex = element.getAttribute('data-amplitude-audio-index');
 
             this.#handleCollectionChanges( collectionKey, audioIndex );
             this.#handleAudioChanges( collectionKey, audioIndex );
@@ -78,10 +78,12 @@ export class CollectionAudioPlayPauseElement {
     }
 
     #toggleAudio(){
+        let audio = new Audio();
+
         if( config.audio_element.paused ){
-            Audio.play();
+            audio.play();
         }else{
-            Audio.pause();
+            audio.pause();
         }
     }