change repeat icon and factorize functions

client/src/app/videos/+video-watch/video-watch-playlist.component.ts

@@ -44,11 +44,13 @@ export class VideoWatchPlaylistComponent {
     private videoPlaylist: VideoPlaylistService,
     private router: Router
   ) {
+    // defaults to true
     this.autoPlayNextVideoPlaylist = this.auth.isLoggedIn()
       ? this.auth.getUser().autoPlayNextVideoPlaylist
       : peertubeLocalStorage.getItem(VideoWatchPlaylistComponent.LOCAL_STORAGE_AUTO_PLAY_NEXT_VIDEO_PLAYLIST) !== 'false'
     this.setAutoPlayNextVideoPlaylistSwitchText()
 
+    // defaults to false
     this.loopPlaylist = peertubeSessionStorage.getItem(VideoWatchPlaylistComponent.SESSION_STORAGE_AUTO_PLAY_NEXT_VIDEO_PLAYLIST) === 'true'
     this.setLoopPlaylistSwitchText()
   }
@@ -127,23 +129,31 @@ export class VideoWatchPlaylistComponent {
     this.onPlaylistVideosNearOfBottom()
   }
 
-  navigateToNextPlaylistVideo (_next: VideoPlaylistElement = null) {
+  findNextPlaylistVideo (position = this.currentPlaylistPosition): VideoPlaylistElement {
-    if (this.currentPlaylistPosition < this.playlistPagination.totalItems) {
+    if (this.currentPlaylistPosition >= this.playlistPagination.totalItems) {
-      const next = _next || this.playlistElements.find(e => e.position === this.currentPlaylistPosition + 1)
+      // we have reached the end of the playlist: either loop or stop
-
+      if (this.loopPlaylist) {
-      if (!next || !next.video) {
+        this.currentPlaylistPosition = position = 0
-        this.currentPlaylistPosition++
+      } else {
-        this.navigateToNextPlaylistVideo()
         return
       }
+    }
 
+    const next = this.playlistElements.find(e => e.position === position)
+
+    if (!next || !next.video) {
+      return this.findNextPlaylistVideo(position + 1)
+    }
+
+    return next
+  }
+
+  navigateToNextPlaylistVideo () {
+    const next = this.findNextPlaylistVideo(this.currentPlaylistPosition + 1)
+    if (!next) return
     const start = next.startTimestamp
     const stop = next.stopTimestamp
     this.router.navigate([],{ queryParams: { videoId: next.video.uuid, start, stop } })
-    } else if (this.loopPlaylist) {
-      this.currentPlaylistPosition = 0
-      this.navigateToNextPlaylistVideo(this.playlistElements.find(e => e.position === this.currentPlaylistPosition))
-    }
   }
 
   switchAutoPlayNextVideoPlaylist () {

client/src/app/videos/+video-watch/video-watch.component.ts

@@ -267,6 +267,20 @@ export class VideoWatchComponent implements OnInit, OnDestroy {
     return video.isVideoNSFWForUser(this.user, this.serverService.getConfig())
   }
 
+  isAutoPlayEnabled () {
+    return (
+      this.user && this.user.autoPlayNextVideo ||
+      peertubeSessionStorage.getItem(RecommendedVideosComponent.SESSION_STORAGE_AUTO_PLAY_NEXT_VIDEO) === 'true'
+    )
+  }
+
+  isPlaylistAutoPlayEnabled () {
+    return (
+      this.user && this.user.autoPlayNextVideoPlaylist ||
+      peertubeSessionStorage.getItem(VideoWatchPlaylistComponent.SESSION_STORAGE_AUTO_PLAY_NEXT_VIDEO_PLAYLIST) === 'true'
+    )
+  }
+
   private loadVideo (videoId: string) {
     // Video did not change
     if (this.video && this.video.uuid === videoId) return
@@ -436,24 +450,15 @@ export class VideoWatchComponent implements OnInit, OnDestroy {
 
       this.player.one('ended', () => {
         if (this.playlist) {
-          if (
+          if (this.isPlaylistAutoPlayEnabled()) this.zone.run(() => this.videoWatchPlaylist.navigateToNextPlaylistVideo())
-            this.user && this.user.autoPlayNextVideoPlaylist ||
+        } else if (this.isAutoPlayEnabled()) {
-            peertubeSessionStorage.getItem(VideoWatchPlaylistComponent.SESSION_STORAGE_AUTO_PLAY_NEXT_VIDEO_PLAYLIST) === 'true'
-          ) this.zone.run(() => this.videoWatchPlaylist.navigateToNextPlaylistVideo())
-        } else if (
-          this.user && this.user.autoPlayNextVideo ||
-          peertubeSessionStorage.getItem(RecommendedVideosComponent.SESSION_STORAGE_AUTO_PLAY_NEXT_VIDEO) === 'true'
-        ) {
           this.zone.run(() => this.autoplayNext())
         }
       })
 
       this.player.one('stopped', () => {
         if (this.playlist) {
-          if (
+          if (this.isPlaylistAutoPlayEnabled()) this.zone.run(() => this.videoWatchPlaylist.navigateToNextPlaylistVideo())
-            this.user && this.user.autoPlayNextVideoPlaylist ||
-            peertubeSessionStorage.getItem(VideoWatchPlaylistComponent.SESSION_STORAGE_AUTO_PLAY_NEXT_VIDEO_PLAYLIST) === 'true'
-          ) this.zone.run(() => this.videoWatchPlaylist.navigateToNextPlaylistVideo())
         }
       })
 
@@ -568,8 +573,20 @@ export class VideoWatchComponent implements OnInit, OnDestroy {
     user?: AuthUser
   }) {
     const { video, videoCaptions, urlOptions, user } = params
+    const getStartTime = () => {
+      const byUrl = urlOptions.startTime !== undefined
+      const byHistory = video.userHistory && !this.playlist
 
-    let startTime = timeToInt(urlOptions.startTime) || (video.userHistory && !this.playlist ? video.userHistory.currentTime : 0)
+      if (byUrl) {
+        return timeToInt(urlOptions.startTime)
+      } else if (byHistory) {
+        return video.userHistory.currentTime
+      } else {
+        return 0
+      }
+    }
+
+    let startTime = getStartTime()
     // If we are at the end of the video, reset the timer
     if (video.duration - startTime <= 1) startTime = 0
 

client/src/assets/images/global/repeat.svg

@@ -1 +1,12 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-repeat"><polyline points="17 1 21 5 17 9"></polyline><path d="M3 11V9a4 4 0 0 1 4-4h14"></path><polyline points="7 23 3 19 7 15"></polyline><path d="M21 13v2a4 4 0 0 1-4 4H3"></path></svg>
+<svg width="24px" height="24px" viewBox="0 0 24 24" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <defs/>
+    <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="Artboard-4" transform="translate(-620.000000, -467.000000)">
+            <g id="174" transform="translate(620.000000, 467.000000)">
+                <path d="M16.5547002,9.83205029 C15.8901455,10.2750868 15,9.79869538 15,9 L15,5 C15,4.20130462 15.8901455,3.72491322 16.5547002,4.16794971 L19.5547002,6.16794971 C20.1484333,6.56377175 20.1484333,7.43622825 19.5547002,7.83205029 L16.5547002,9.83205029 Z" id="Path-115" fill="#333333" fill-rule="nonzero"/>
+                <path d="M7.4452998,19.8320503 L4.4452998,17.8320503 C3.85156673,17.4362282 3.85156673,16.5637718 4.4452998,16.1679497 L7.4452998,14.1679497 C8.10985453,13.7249132 9,14.2013046 9,15 L9,19 C9,19.7986954 8.10985453,20.2750868 7.4452998,19.8320503 Z" id="Path-115" fill="#333333" fill-rule="nonzero"/>
+                <path d="M3,12 C3,9.23857625 5.23533061,7 7.99367318,7 L18,7 M21,12 C21,14.7614237 18.7661779,17 16.0049709,17 L7,17" id="Rectangle-118" stroke="#333333" stroke-width="2" stroke-linecap="round"/>
+            </g>
+        </g>
+    </g>
+</svg>