Show watch progress in playlist view (#1307)

* pass progress to StreamPlaylistEntry * correct padding * linted formatting
TUM-Dev · Jan 18, 2024 · 49587e1 · 49587e1
1 parent 96f53da
commit 49587e1
Show file tree

Hide file tree

Showing 4 changed files with 60 additions and 23 deletions.
diff --git a/api/stream.go b/api/stream.go
@@ -359,26 +359,44 @@ func (r streamRoutes) getStream(c *gin.Context) {
 
 func (r streamRoutes) getStreamPlaylist(c *gin.Context) {
 	type StreamPlaylistEntry struct {
-		StreamID   uint      `json:"streamId"`
-		CourseSlug string    `json:"courseSlug"`
-		StreamName string    `json:"streamName"`
-		LiveNow    bool      `json:"liveNow"`
-		Watched    bool      `json:"watched"`
-		Start      time.Time `json:"start"`
-		CreatedAt  time.Time `json:"createdAt"`
+		StreamID       uint                 `json:"streamId"`
+		CourseSlug     string               `json:"courseSlug"`
+		StreamName     string               `json:"streamName"`
+		LiveNow        bool                 `json:"liveNow"`
+		Watched        bool                 `json:"watched"`
+		Start          time.Time            `json:"start"`
+		StreamProgress model.StreamProgress `json:"streamProgress"`
+		CreatedAt      time.Time            `json:"createdAt"`
 	}
 
 	tumLiveContext := c.MustGet("TUMLiveContext").(tools.TUMLiveContext)
+
+	// Create mapping of stream id to progress for all progresses of user
+	var streamIDs []uint
+	for _, stream := range tumLiveContext.Course.Streams {
+		streamIDs = append(streamIDs, stream.ID)
+	}
+	streamProgresses := make(map[uint]model.StreamProgress)
+	res, err := r.LoadProgress(tumLiveContext.User.ID, streamIDs)
+	if err != nil {
+		logger.Error("Couldn't load progresses", "err", err)
+	} else {
+		for _, progress := range res {
+			streamProgresses[progress.StreamID] = progress
+		}
+	}
+
 	var result []StreamPlaylistEntry
 	for _, stream := range tumLiveContext.Course.Streams {
 		result = append(result, StreamPlaylistEntry{
-			StreamID:   stream.ID,
-			CourseSlug: tumLiveContext.Course.Slug,
-			StreamName: stream.GetName(),
-			LiveNow:    stream.LiveNow,
-			Watched:    stream.Watched,
-			Start:      stream.Start,
-			CreatedAt:  stream.CreatedAt,
+			StreamID:       stream.ID,
+			CourseSlug:     tumLiveContext.Course.Slug,
+			StreamName:     stream.GetName(),
+			LiveNow:        stream.LiveNow,
+			Watched:        stream.Watched,
+			Start:          stream.Start,
+			StreamProgress: streamProgresses[stream.ID],
+			CreatedAt:      stream.CreatedAt,
 		})
 	}
 

diff --git a/web/assets/css/watch.css b/web/assets/css/watch.css
@@ -1,5 +1,5 @@
 .playlist-thumbnail {
-    @apply bg-gray-100 dark:bg-gray-800 rounded-lg mr-4 bg-cover transition-all duration-500 hover:shadow-xl dark:shadow-gray-900/75;
+    @apply relative bg-gray-100 dark:bg-gray-800 rounded-lg mr-4 bg-cover transition-all duration-500 hover:shadow-xl dark:shadow-gray-900/75;
 }
 
 /* Rendered, but not visible on the screen. Enables layout calculations. */
@@ -10,4 +10,4 @@
     width: 100%;
     height: auto;
     overflow: visible;
-}
+}
diff --git a/web/template/partial/stream/playlist.gohtml b/web/template/partial/stream/playlist.gohtml
@@ -32,6 +32,15 @@
                             <div
                                 :style="`background-image:url('/api/stream/${elem.streamId}/thumbs/vod')`"
                                  class="h-14 w-24 shrink-0 playlist-thumbnail">
+                                <div :id="`vod-progress-${elem.streamId}`"
+                                     class="tum-live-thumbnail-progress">
+                                    <div>
+                                        <template x-if="elem.progress !== undefined">
+                                            <span :style="`width: ${elem.progress.Percentage()}%`"
+                                                  :class="{'rounded-br-lg': elem.progress.HasProgressOne()}"></span>
+                                        </template>
+                                    </div>
+                                </div>
                             </div>
                             <i x-show="selected" class="fa-solid fa-play text-2 mr-2"></i>
                             <h2 x-text="elem.streamName" class="text-sm dark:text-white"></h2>

diff --git a/web/ts/data-store/stream-playlist.ts b/web/ts/data-store/stream-playlist.ts
@@ -1,15 +1,23 @@
 import { Delete, getData, postData, putData, Time } from "../global";
 import { StreamableMapProvider } from "./provider";
+import { Progress } from "../api/progress";
 
 export class StreamPlaylistProvider extends StreamableMapProvider<number, StreamPlaylistEntry[]> {
     protected async fetcher(streamId: number): Promise<StreamPlaylistEntry[]> {
         const result = await StreamPlaylist.get(streamId);
-        return result
-            .map((e) => {
-                e.startDate = new Date(e.start);
-                return e;
-            })
-            .sort((a, b) => (a.startDate < b.startDate ? -1 : 1));
+        return (
+            result
+                .map((e) => {
+                    e.startDate = new Date(e.start);
+                    return e;
+                })
+                // Convert stream progress to Typescript object
+                .map((e) => {
+                    e.progress = new Progress(JSON.parse(JSON.stringify(e.streamProgress)));
+                    return e;
+                })
+                .sort((a, b) => (a.startDate < b.startDate ? -1 : 1))
+        );
     }
 }
 
@@ -20,10 +28,12 @@ export type StreamPlaylistEntry = {
     liveNow: boolean;
     watched: boolean;
     start: string;
+    streamProgress: string;
     createdAt: string;
 
-    // Client Generated
+    // Client generated to package data with Typescript constructors
     startDate: Date;
+    progress: Progress;
 };
 
 const StreamPlaylist = {