added working volume slider for AudioPlayer component; wip on volume …

…tooltip
michaelchadwick · Jul 10, 2024 · c42892b · c42892b
1 parent 7ae01fb
commit c42892b
Show file tree

Hide file tree

Showing 3 changed files with 40 additions and 6 deletions.
diff --git a/app/components/audio-player.hbs b/app/components/audio-player.hbs
@@ -1,8 +1,8 @@
 <div class="audio-player{{if this.isPlaying ' is-playing'}}">
   <h3>{{t "components.audioPlayer.head"}}</h3>
-  
+
   {{#if @shouldLoop}}
-    <audio loop {{play-when this.isPlaying}} data-test-audio-player>
+    <audio loop {{play-when this.isPlaying}} volume={{this.audioVolume}} data-test-audio-player>
       <source src={{@srcURL}} />
       <track kind="captions" />
       {{t "errors.notSupported" description="<audio>"}}
@@ -14,7 +14,8 @@
       {{t "errors.notSupported" description="<audio>"}}
     </audio>
   {{/if}}
-  {{! <input type="range" min="0" max="100" step="1" value="20" id="audio-volume" /> }}
+  <input type="range" min="0" max="100" step="1" value={{this.rangeVolume}} id="audio-volume" oninput={{this.setVolume}} />
+  {{!-- <div class="volume-tooltip">{{this.rangeVolume}}</div> --}}
 
   {{#if (eq this.env "production")}}
     <div class="audio-title">{{split @srcURL delimiter="/" index=5}}</div>

diff --git a/app/components/audio-player.js b/app/components/audio-player.js
@@ -5,12 +5,15 @@ import ENV from 'remember-stuff/config/environment';
 
 export default class AudioPlayerComponent extends Component {
   @tracked isPlaying = false;
-  @tracked volume = 20;
+  @tracked rangeVolume = 30;
   @tracked env = ENV.environment;
 
+  maxVolume = 100;
+  decreaseVolume = null;
+
   @action
-  volChange(volume) {
-    this.volume = volume;
+  setVolume(event) {
+    this.rangeVolume = parseInt(event.target.value, 10);
   }
 
   @action
@@ -22,4 +25,8 @@ export default class AudioPlayerComponent extends Component {
   pause() {
     this.isPlaying = false;
   }
+
+  get audioVolume() {
+    return (this.rangeVolume / 100).toFixed(2);
+  }
 }
diff --git a/app/styles/components/audio-player.scss b/app/styles/components/audio-player.scss
@@ -2,6 +2,32 @@
   background-color: lightpink;
 }
 
+.audio-player #audio-volume {
+  position: relative;
+}
+
+.audio-player #audio-volume + .volume-tooltip {
+  background-color: #ffffff;
+  border: 1px solid #000000;
+  border-radius: 5px;
+  color: #000000;
+  display: none;
+  font-size: 0.85rem;
+  height: 12px;
+  padding: 5px;
+  position: absolute;
+  top: 10px;
+  width: 16px;
+}
+
+// .audio-player #audio-volume + .volume-tooltip::before {
+//   position
+// }
+
+.audio-player #audio-volume:hover .volume-tooltip {
+  display: block;
+}
+
 .audio-player.is-playing #btn-audio-pause {
   background-color: #fdfdfd;
 }