1094 list view in new UI (#1286)

* Added list view -> not finished yet * Enh/transcoding issues (#1283) * added boolean to commandBuild and lowered probesize a bit to see if it works now * Removed checks for isSelfStream because not used * Removed deprecated for isSelfStream * Set isSelfStream to true for selfstreams * added boolean to commandBuild and lowered probesize a bit to see if it works now --------- Co-authored-by: Dawin Yurtseven <[email protected]> * popup chat close on esc added. (#1281) * popup chat close on esc added. * Update popup-chat.gohtml --------- Co-authored-by: Sebastian <[email protected]> * Set GIN to only log above level 400 (#1271) * Show worker version on worker dashboard (#1285) * Updated storage * Lint fix * Update course.ts changed if else writing style * Lint fix --------- Co-authored-by: Dawin Yurtseven <[email protected]> Co-authored-by: barisgul15 <[email protected]> Co-authored-by: Dawin <[email protected]>
TUM-Dev · Jan 11, 2024 · c82b58b · c82b58b
1 parent 0764b5d
commit c82b58b
Show file tree

Hide file tree

Showing 2 changed files with 26 additions and 5 deletions.
diff --git a/web/template/home.gohtml b/web/template/home.gohtml
@@ -432,6 +432,11 @@
                                             Hide watched
                                         </button>
                                     {{end}}
+                                    <button type="button" @click="toggleListView()"
+                                            class="tum-live-button tum-live-button-tertiary"
+                                            :class="{'active' : isListView() }">
+                                        List View
+                                    </button>
                                 </section>
                             </header>
                             <section>
@@ -443,17 +448,18 @@
                                                 <header class="mb-2">
                                                     <h6 class="font-semibold" x-text="group[0].GetMonthName()"></h6>
                                                 </header>
-                                                <section class="grid gap-3 md:grid-cols-2 grid-cols-1"
-                                                         :class="plannedStreams.hasElements()
-                                                                        ? 'xl:grid-cols-4 lg:grid-cols-3'
-                                                                        : 'xl:grid-cols-5 lg:grid-cols-4'">
+                                                <section class="grid gap-3  grid-cols-1"
+                                                         :class="isListView() ? 'xl:grid-cols-1 lg:grid-cols-1 md:grid-cols-1 grid-cols-1' : plannedStreams.hasElements()
+                                                                        ? 'xl:grid-cols-4 lg:grid-cols-3 md:grid-cols-2'
+                                                                        : 'xl:grid-cols-5 lg:grid-cols-4 md:grid-cols-2'">
                                                     <template x-for="vod in group" :key="vod.ID">
                                                         <article
                                                                 class="tum-live-stream group sm:col-span-1 col-span-full"
                                                                 @click.outside="vod.Dropdown.toggle(false)">
                                                             <a :href="course.WatchURL(vod.ID)" class="block mb-2">
                                                                 <div :style="`background: url('/api/stream/${vod.ID}/thumbs/vod'), url('/thumb-fallback.png'); background-size: cover;`"
-                                                                     class="aspect-video tum-live-thumbnail">
+                                                                     class="aspect-video tum-live-thumbnail"
+                                                                    x-show="!isListView()">
                                                                     <div :id="`vod-progress-${vod.ID}`"
                                                                          class="tum-live-thumbnail-progress">
                                                                         <div>

diff --git a/web/ts/components/course.ts b/web/ts/components/course.ts
@@ -19,6 +19,11 @@ export enum StreamFilterMode {
     HideWatched,
 }
 
+export enum ViewMode {
+    Grid,
+    List,
+}
+
 export function courseContext(slug: string, year: number, term: string, userId: number): AlpineComponent {
     return {
         userId: userId as number,
@@ -35,6 +40,7 @@ export function courseContext(slug: string, year: number, term: string, userId:
 
         streamSortMode: +getFromStorage("streamSortMode") ?? StreamSortMode.NewestFirst,
         streamFilterMode: +getFromStorage("streamFilterMode") ?? StreamFilterMode.ShowWatched,
+        viewMode: (+getFromStorage("viewMode") ?? ViewMode.Grid) as number,
 
         /**
          * AlpineJS init function which is called automatically in addition to 'x-init'
@@ -117,6 +123,15 @@ export function courseContext(slug: string, year: number, term: string, userId:
             return this.streamFilterMode === StreamFilterMode.HideWatched;
         },
 
+        toggleListView() {
+            this.viewMode = this.viewMode === ViewMode.Grid ? ViewMode.List : ViewMode.Grid;
+            setInStorage("viewMode", this.viewMode.toString());
+        },
+
+        isListView() {
+            return this.viewMode == ViewMode.List;
+        },
+
         /**
          * Depending on the pinned value, pin or unpin course
          */