Merge branch 'pr/elliotwutingfeng/10'

shoma-mano · Mar 10, 2023 · fd3e16d · fd3e16d
2 parents aaea1ab + 86c67d7
commit fd3e16d
Show file tree

Hide file tree

Showing 4 changed files with 62 additions and 28 deletions.
diff --git a/client/assets/icons/repeat-continuous.svg b/client/assets/icons/repeat-continuous.svg
diff --git a/client/src/index.ts b/client/src/index.ts
@@ -90,16 +90,17 @@ helpButton.addEventListener('click', () => {
 
 // Refresh Button
 const refreshButton = document.getElementById('refresh-button');
-refreshButton.addEventListener('click', () => {
+export function refresh() {
   sliders.forEach((s) => {
     s.valueAsNumber = randn();
   });
-});
+}
+refreshButton.addEventListener('click', refresh);
 
 // Generate button
 const generateButton = document.getElementById('generate-button') as HTMLButtonElement;
 const loadingAnimation = document.getElementById('loading-animation');
-generateButton.addEventListener('click', async () => {
+export async function generateNewTrack(playImmediately = true) {
   generateButton.disabled = true;
   loadingAnimation.style.display = null;
 
@@ -114,13 +115,14 @@ generateButton.addEventListener('click', async () => {
   }
   const producer = new Producer();
   const track = producer.produce(params);
-  player.addToPlaylist(track, true);
+  player.addToPlaylist(track, playImmediately);
   // scroll to end of playlist
   playlistContainer.scrollTop = playlistContainer.scrollHeight;
 
   generateButton.disabled = false;
   loadingAnimation.style.display = 'none';
-});
+}
+generateButton.addEventListener('click', async () => generateNewTrack(true));
 
 /** Formats seconds into an MM:SS string */
 const formatTime = (seconds: number) => {
@@ -339,8 +341,14 @@ repeatButton.addEventListener('click', async () => {
       break;
     }
     case RepeatMode.ONE: {
-      player.repeat = RepeatMode.NONE;
+      player.repeat = RepeatMode.CONTINUOUS;
       repeatButton.classList.remove('repeat-one');
+      repeatButton.classList.add('repeat-continuous');
+      break;
+    }
+    case RepeatMode.CONTINUOUS: {
+      player.repeat = RepeatMode.NONE;
+      repeatButton.classList.remove('repeat-continuous');
       break;
     }
     default: {

diff --git a/client/src/player.ts b/client/src/player.ts
@@ -3,6 +3,7 @@ import { getInstrumentFilters, getInstrument, Instrument } from './instruments';
 import * as Samples from './samples';
 import { Track } from './track';
 import { compress } from './helper';
+import { refresh, generateNewTrack } from '.';
 
 /**
  * A class that plays a Track by synthesizing events in Tone.js.
@@ -54,22 +55,22 @@ class Player {
        this._recorder = null;
      }
    }
- 
+
    /** Whether the player is currently recording */
    private _isRecording: boolean = false;
- 
+
    get isRecording() {
      return this._isRecording;
    }
- 
+
    set isRecording(isRecording: boolean) {
      if (this._isRecording !== isRecording) {
        this._isRecording = isRecording;
        if (!this._recorder) {
          this._recorder = new Tone.Recorder();
          this._recorder.start();
        }
- 
+
        this.onRecordingStateChange();
        if (this.gain) {
          if (this._isRecording) {
@@ -78,21 +79,20 @@ class Player {
            this.gain.disconnect(this._recorder);
          }
        }
- 
+
        if (!this._isRecording) {
          this.downloadRecording();
        }
      }
    }
- 
+
    pauseRecording() {
      this.isRecording = false;
    }
- 
+
    startRecording() {
      this.isRecording = true;
    }
-
 
   /** Whether the player is currently loading */
   private _isLoading: boolean = false;
@@ -173,7 +173,7 @@ class Player {
     this.playlist.push(track);
     this.updateLocalStorage();
     this.updatePlaylistDisplay();
-    if (playImmediately || !this.isPlaying) {
+    if (playImmediately) {
       this.playTrack(this.playlist.length - 1);
     }
     this.fillShuffleQueue();
@@ -277,7 +277,7 @@ class Player {
     // connect analyzer for visualizations
     const analyzer = new Tone.Analyser('fft', 32);
     this.gain.connect(analyzer);
-    
+
     if (this._isRecording) {
       this.gain.connect(this._recorder);
     }
@@ -380,7 +380,7 @@ class Player {
   }
 
   /** Plays the next track */
-  playNext() {
+  async playNext() {
     if (this.repeat === RepeatMode.ONE) {
       this.seek(0);
       return;
@@ -397,6 +397,14 @@ class Player {
       this.repeat === RepeatMode.ALL
     ) {
       nextTrackIndex = 0;
+    } else if (
+      this.currentPlayingIndex === this.playlist.length - 1 &&
+      this.repeat === RepeatMode.CONTINUOUS
+    ) {
+      this.unload();
+      refresh();
+      await generateNewTrack(false);
+      nextTrackIndex = this.playlist.length - 1;
     }
 
     if (nextTrackIndex !== null) {
@@ -460,7 +468,8 @@ class Player {
 export enum RepeatMode {
   NONE,
   ALL,
-  ONE
+  ONE,
+  CONTINUOUS
 }
 
 export default Player;
diff --git a/client/src/style.scss b/client/src/style.scss
@@ -26,7 +26,7 @@ body {
   height: 100%;
 }
 
-@mixin background($url) {  
+@mixin background($url) {
   background: url($url), black;
   background-repeat: no-repeat;
   background-position: center center;
@@ -197,7 +197,7 @@ $panel-border-radius: 6px;
     @media not screen and (max-width: 900px) {
       backdrop-filter: none;
     }
-    
+
     #record-button {
       width: auto;
       height: auto;
@@ -218,8 +218,8 @@ $panel-border-radius: 6px;
         height: 10px;
         margin-right: 3px;
         border-radius: 50%;
-        display: inline-block;          
-      }          
+        display: inline-block;
+      }
 
       &.paused{
         color: rgba(255,255,255,0.5);
@@ -232,7 +232,7 @@ $panel-border-radius: 6px;
         }
       }
     }
-  
+
 
     #cover {
       padding: 12px 24px;
@@ -404,6 +404,10 @@ $panel-border-radius: 6px;
       &.repeat-one {
         background-image: url('icons/repeat-one.svg');
       }
+
+      &.repeat-continuous {
+        background-image: url('icons/repeat-continuous.svg');
+      }
     }
 
     #shuffle-button {
@@ -544,7 +548,7 @@ $panel-border-radius: 6px;
         }
       }
 
-      .track-actions {        
+      .track-actions {
         transition: visibility 0.2s, opacity 0.2s;
         display: flex;
         gap: 8px;
@@ -813,7 +817,7 @@ input[type='range'] {
   display: hidden;
   width: 0;
   height: 0;
-  background: url('icons/repeat-all.svg'), url('icons/repeat-one.svg'),
+  background: url('icons/repeat-all.svg'), url('icons/repeat-one.svg'), url('icons/repeat-continuous.svg'),
     url('icons/shuffle-active.svg'), url('icons/volume-muted.svg'), url('icons/play.svg');
 }
 
@@ -858,7 +862,7 @@ $responsive-max-width: 360px;
       border: none !important;
       border-bottom: 1px solid $ui-background;
       margin-bottom: 24px;
-      
+
       border-top-right-radius: $panel-border-radius !important;
       border-bottom-right-radius: $panel-border-radius !important;
     }
@@ -869,8 +873,8 @@ $responsive-max-width: 360px;
       top: 50%;
       transform: translate(-50%, -50%);
     }
-  
-    #playlist {  
+
+    #playlist {
       border-top-left-radius: $panel-border-radius !important;
       border-bottom-left-radius: $panel-border-radius !important;
     }