Improve track autoplay

jcraigk · Oct 5, 2023 · 94314a0 · 94314a0
1 parent a9873f9
commit 94314a0
Show file tree

Hide file tree

Showing 3 changed files with 51 additions and 81 deletions.
diff --git a/app/javascript/packs/application.css.scss b/app/javascript/packs/application.css.scss
@@ -37,54 +37,26 @@ $scrubbing: #1a80f6;
   font-size: 7em;
 }
 
-@-webkit-keyframes pulsate-highlight {
-    0%   { background: $background_gray; }
-    100%  { background: $highlight4; }
-}
-@-moz-keyframes pulsate-highlight {
-  0%   { background: $background_gray; }
-  100%  { background: $highlight4; }
-}
 @keyframes pulsate-highlight {
   0%   { background: $background_gray; }
   100%  { background: $highlight4; }
 }
-@-webkit-keyframes pulsate-highlight {
-    0%   { background: $background_gray; }
-    100%  { background: $highlight4; }
-}
-@-moz-keyframes pulsate-highlight {
-  0%   { background: $background_gray; }
-  100%  { background: $highlight4; }
-}
 @keyframes pulsate-highlight {
   0%   { background: $background_gray; }
   100%  { background: $highlight4; }
 }
-@-webkit-keyframes pulsate-highlight2 {
-    0%   { background: $background_gray; }
-    100%  { background: $highlight2; }
-}
-@-moz-keyframes pulsate-highlight2 {
-  0%   { background: $background_gray; }
-  100%  { background: $highlight2; }
-}
 @keyframes pulsate-highlight2 {
   0%   { background: $background_gray; }
   100%  { background: $highlight2; }
 }
-@-webkit-keyframes pulsate-highlight2 {
-    0%   { background: $background_gray; }
-    100%  { background: $highlight2; }
-}
-@-moz-keyframes pulsate-highlight2 {
-  0%   { background: $background_gray; }
-  100%  { background: $highlight2; }
-}
 @keyframes pulsate-highlight2 {
   0%   { background: $background_gray; }
   100%  { background: $highlight2; }
 }
+@keyframes pulsate-outline {
+  0%   { box-shadow: 0 0 5px $highlight1; }
+  100% { box-shadow: 0 0 35px $highlight1; }
+}
 .tagin_project {
   p, li {
     font-size: 20px;
@@ -364,9 +336,6 @@ html {
       padding-left: 10px;
       padding-top: 6px;
     }
-    .btn_context {
-      cursor: pointer;
-    }
     .btn-sort {
       height: 18px !important;
       -moz-border-radius: 30px !important;
@@ -637,6 +606,12 @@ html {
         margin-left: 5px;
         background: white url('../images/icons-playpause.png');
         cursor: pointer;
+
+        &.pulse {
+          -webkit-animation: pulsate-outline 0.7s infinite alternate linear;
+          -moz-animation: pulsate-outline 0.7s infinite alternate linear;
+          animation: pulsate-outline 0.7s infinite alternate linear;
+        }
       }
       #control_next, #control_previous {
         border: 1px solid $btn_border;
@@ -1407,7 +1382,7 @@ html {
         line-height: 10px;
         margin-top: -6px !important;
         position: relative;
-        top: 7px;
+        top: 10px;
 
         a {
           line-height: 0px !important;

diff --git a/app/javascript/src/coffeescript/app.js.coffee b/app/javascript/src/coffeescript/app.js.coffee
@@ -89,8 +89,8 @@ $ ->
         else if state.href.substr(0,9) is '/playlist' or state.href.substr(0,6) is '/play/'
           App.Playlist.initPlaylist()
 
-      .catch (error) ->
-        console.log('Navigation fetch error: ', error.message)
+      # .catch (error) ->
+      #   console.log('Navigation fetch error: ', error.message)
 
   ###############################################
   # Prepare history.js

diff --git a/app/javascript/src/coffeescript/player.js.coffee b/app/javascript/src/coffeescript/player.js.coffee
@@ -11,8 +11,6 @@ class Player
     @Util             = new Util
     @sm               = soundManager
     @sm_sound         = {}
-    @preload_time     = 5000
-    # @preload_started  = false
     @active_track     = ''
     @invoked          = false
     @muted            = false
@@ -48,10 +46,6 @@ class Player
           path_segment = window.location.pathname.split('/')[1]
           this.setCurrentPlaylist track_id if path_segment isnt 'playlist' and path_segment isnt 'play'
           this.playTrack track_id
-          # iOS doesn't allow auto-play
-          if /(iPhone|iPad|iPod)/g.test(navigator.userAgent)
-            this.togglePause()
-            alert 'Touch the Play button to begin playback. Your browser does not support auto-play.'
 
   currentPosition: ->
     @sm_sound.position
@@ -115,8 +109,8 @@ class Player
   playTrack: (track_id, time_marker=0) ->
     if track_id != @active_track
       @$scrubber.slider 'value', 0
-      # @preload_started = false
-      unless track_id and @sm_sound = @sm.getSoundById track_id
+      sound = @sm.getSoundById track_id
+      if !sound
         this._hidePlayTooltip()
         @sm_sound = @sm.createSound
           id: track_id
@@ -125,31 +119,39 @@ class Player
             this._updateLoadingState track_id
           whileplaying: =>
             this._updatePlayerState()
+      else
+        @sm_sound = sound
 
       if @muted
         @sm.setVolume track_id, 0
       else
         @sm.setVolume track_id, @last_volume
-      this._loadInfoAndPlay track_id, 0
-      this._fastFadeout @active_track if @active_track
-      @active_track = track_id
-      @$feedback.hide()
+
+      if @sm_sound.playState != 1 or @sm_sound.paused
+        this._loadInfoAndPlay track_id, time_marker
+        this._fastFadeout @active_track if @active_track
+        @active_track = track_id
+        @sm_sound.play()
+
       this._updateLoadingState track_id
       this._updatePlayButton()
       this.highlightActiveTrack()
     else
       @Util.feedback { notice: 'That is already the current track' }
 
+
   togglePause: ->
-    if @sm_sound.paused
-      this._updatePlayButton()
-      @sm_sound.togglePause()
-    else
-      if @active_track
-        this._updatePlayButton false
-        @sm_sound.togglePause()
+    if @active_track
+      if @sm_sound.playState == 1 and !@sm_sound.paused
+        # If a sound is playing, pause it.
+        @sm_sound.pause()
+        this._updatePlayButton(false)
       else
-        this._playRandomShowOrPlaylist()
+        # If a sound is paused or stopped, play it.
+        @sm_sound.play()
+        this._updatePlayButton()
+    else
+      this._playRandomShowOrPlaylist()
 
   previousTrack: ->
     if @sm_sound.position > 3000
@@ -228,8 +230,20 @@ class Player
 
   _loadInfoAndPlay: (track_id, time_marker) ->
     this._loadTrackInfo track_id
-    @sm.setPosition track_id, time_marker
-    @sm.play track_id, { onfinish: => this.nextTrack() }
+    testAudio = new Audio()
+    playTest = testAudio.play()
+    if playTest?
+      playTest
+        .then(() =>
+          @sm.play track_id, { onfinish: => this.nextTrack() }
+          this._updatePlayButton()
+        )
+        .catch (error) =>
+          @$playpause.removeClass 'playing'
+          @$playpause.addClass 'pulse'
+    else
+      @sm.play track_id, { onfinish: => this.nextTrack() }
+      this._updatePlayButton()
     @invoked = true
 
   _handleAutoPlayTrack: ->
@@ -266,7 +280,7 @@ class Player
                 @Util.feedback { notice: 'Playing random show...'}
                 @Util.navigateTo r.url
                 this.setCurrentPlaylist r.track_id
-                # this.playTrack r.track_id
+                this.playTrack r.track_id
 
   _disengagePlayer: ->
     if @active_track
@@ -276,19 +290,6 @@ class Player
     @$scrubber.slider 'value', 0
     this._updatePlayButton false
 
-  _preloadTrack: (track_id) ->
-    unless track_id and @sm.getSoundById track_id
-      this._hidePlayTooltip()
-      @sm.createSound
-        id: track_id
-        url: this._trackIDtoURL track_id
-        autoLoad: true
-        whileloading: =>
-          this._updateLoadingState track_id
-        whileplaying: =>
-          this._updatePlayerState()
-      @sm.setVolume track_id, @last_volume
-
   _loadTrackInfo: (track_id) ->
     $.ajax
       url: "/track-info/#{track_id}",
@@ -328,19 +329,13 @@ class Player
   _updatePlayButton: (playing=true) ->
     if playing
       @$playpause.addClass 'playing'
+      @$playpause.removeClass 'pulse'
     else
       @$playpause.removeClass 'playing'
 
   _updatePlayerState: ->
     unless @scrubbing or @duration is 0
       unless isNaN @duration or isNaN @sm_sound.position
-        # Preload next track if we're close to the end of this one
-        # if !@preload_started and @duration - @sm_sound.position <= @preload_time
-        #   $.ajax
-        #     url: "/next-track/#{@active_track}"
-        #     success: (r) =>
-        #       this._preloadTrack(r.track_id) if r.success
-        #   @preload_started = true
         @$scrubber.slider 'value', (@sm_sound.position / @duration) * 100
         @$time_elapsed.html @Util.readableDuration(@sm_sound.position)
         remaining = @duration - @sm_sound.position