Add fallback thumbnail

TUM-Dev · Aug 10, 2023 · c61b086 · c61b086
1 parent 91fa34b
commit c61b086
Show file tree

Hide file tree

Showing 4 changed files with 5 additions and 4 deletions.
diff --git a/branding/thumb-fallback.png b/branding/thumb-fallback.png
diff --git a/web/assets/img/thumb-fallback.png b/web/assets/img/thumb-fallback.png
diff --git a/web/router.go b/web/router.go
@@ -255,6 +255,7 @@ func getDefaultStaticBrandingFiles() []staticFile {
 		{Name: "favicon.ico", Path: "assets/favicon.ico"},
 		{Name: "icons-192.png", Path: "assets/img/icons-192.png"},
 		{Name: "icons-512.png", Path: "assets/img/icons-512.png"},
+		{Name: "thumb-fallback.png", Path: "assets/img/thumb-fallback.png"},
 	}
 }
 

diff --git a/web/template/home.gohtml b/web/template/home.gohtml
@@ -367,7 +367,7 @@
                                                 </span>
                                                 </div>
                                                 <a :href="`/w/${livestream.Course.Slug}/${livestream.Stream.ID}`">
-                                                    <div :style="`background-image:url('/api/stream/${livestream.Stream.ID}/thumbs/live')`"
+                                                    <div :style="`background:url('/api/stream/${livestream.Stream.ID}/thumbs/live'), url('/thumb-fallback.png')`"
                                                          class="h-full tum-live-thumbnail"></div>
                                                 </a>
                                             </div>
@@ -437,7 +437,7 @@
                                             <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-image:url('/api/stream/${vod.ID}/thumbs/vod')`"
+                                                    <div :style="`background: url('/api/stream/${vod.ID}/thumbs/vod'), url('/thumb-fallback.png')`"
                                                          class="aspect-video tum-live-thumbnail">
                                                         <div :id="`vod-progress-${vod.ID}`"
                                                              class="tum-live-thumbnail-progress">
@@ -626,7 +626,7 @@
                                                 </template>
                                             </div>
                                             <a :href="`/w/${livestream.Course.Slug}/${livestream.Stream.ID}`">
-                                                <div :style="`background-image:url('/api/stream/${livestream.Stream.ID}/thumbs/live')`"
+                                                <div :style="`background:url('/api/stream/${livestream.Stream.ID}/thumbs/live'), url('/thumb-fallback.png')`"
                                                      class="h-full tum-live-thumbnail"></div>
                                             </a>
                                             <div class="tum-live-badge absolute bg-black/[.8] text-white bottom-2 right-2 z-40 text-xs">
@@ -704,7 +704,7 @@
                                 <template x-for="course in recently.get()" :key="course.ID">
                                     <article class="tum-live-stream sm:col-span-1 col-span-full p-3">
                                         <a :href="course.LastRecordingURL()" class="block mb-2">
-                                            <div :style="`background-image:url('/api/stream/${course.LastRecording.ID}/thumbs/vod')`"
+                                            <div :style="`background:url('/api/stream/${course.LastRecording.ID}/thumbs/vod'), url('/thumb-fallback.png')`"
                                                  class="aspect-video tum-live-thumbnail">
                                                 <div :id="`vod-progress-${course.LastRecording.ID}`"
                                                      class="tum-live-thumbnail-progress">