1094 list view in new UI

.github/workflows/deploy-workers.yml

@@ -54,6 +54,6 @@ jobs:
           context: ./${{ matrix.module }}
           pull: true
           push: true
-          build-args: version=${{ steps.vars.outputs.sha_short }}
+          build-args: version=${{ github.ref_name }}
           tags: ${{ steps.meta.outputs.tags }}
           labels: ${{ steps.meta.outputs.labels }}

cmd/tumlive/tumlive.go

@@ -59,13 +59,16 @@ func GinServer() (err error) {
 	}
 
 	router.Use(gin.LoggerWithFormatter(func(param gin.LogFormatterParams) string {
-		return fmt.Sprintf("{\"service\": \"GIN\", \"time\": %s, \"status\": %d, \"client\": \"%s\", \"path\": \"%s\", \"agent\": %s}\n",
-			param.TimeStamp.Format(time.DateTime),
-			param.StatusCode,
-			param.ClientIP,
-			param.Path,
-			param.Request.UserAgent(),
-		)
+		if param.StatusCode >= 400 {
+			return fmt.Sprintf("{\"service\": \"GIN\", \"time\": %s, \"status\": %d, \"client\": \"%s\", \"path\": \"%s\", \"agent\": %s}\n",
+				param.TimeStamp.Format(time.DateTime),
+				param.StatusCode,
+				param.ClientIP,
+				param.Path,
+				param.Request.UserAgent(),
+			)
+		}
+		return ""
 	}))
 
 	router.Use(tools.InitContext(dao.NewDaoWrapper()))

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>

web/template/popup-chat.gohtml

@@ -17,6 +17,6 @@
     <link href="/static/assets/css-dist/home.css?v={{if .IndexData.VersionTag}}{{.IndexData.VersionTag}}{{else}}development{{end}}"
           rel="stylesheet">
 </head>
-<body class="bg-white dark:bg-secondary h-screen" x-data="interaction.popupContext({{$stream.ID}})">
+<body class="bg-white dark:bg-secondary h-screen" x-data="interaction.popupContext({{$stream.ID}})" x-init="interaction.closeChatOnEscapePressed()">
     {{template "chat-component" .}}
 </body>

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
          */

web/ts/components/popup.ts

@@ -13,3 +13,11 @@ export function popupContext(streamId: number): AlpineComponent {
         },
     } as AlpineComponent;
 }
+
+export function closeChatOnEscapePressed() {
+    document.addEventListener("keyup", function (event) {
+        if (event.key === "Escape") {
+            window.close();
+        }
+    });
+}

worker/worker/request_handlers.go

@@ -45,9 +45,8 @@ func HandlePremiere(request *pb.PremiereRequest) {
 		outUrl:        request.OutUrl,
 	}
 	// Register worker for premiere
-	if !streamCtx.isSelfStream {
-		regularStreams.addContext(streamCtx.streamId, streamCtx)
-	}
+	regularStreams.addContext(streamCtx.streamId, streamCtx)
+
 	S.startStream(streamCtx)
 	streamPremiere(streamCtx)
 	S.endStream(streamCtx)
@@ -64,7 +63,7 @@ func HandleSelfStream(request *pb.SelfStreamResponse, slug string) *StreamContex
 		endTime:       time.Now().Add(time.Hour * 7),
 		publishVoD:    request.GetUploadVoD(),
 		streamVersion: "COMB",
-		isSelfStream:  false,
+		isSelfStream:  true,
 		ingestServer:  request.IngestServer,
 		sourceUrl:     "rtmp://localhost/" + slug,
 		streamName:    request.StreamName,
@@ -265,7 +264,6 @@ func HandleStreamRequest(request *pb.StreamRequest) {
 		}
 	}
 
-
 	S.startThumbnailGeneration(streamCtx)
 	defer S.endThumbnailGeneration(streamCtx)
 	err = createThumbnailSprite(streamCtx, streamCtx.getTranscodingFileName())
@@ -456,18 +454,18 @@ func moveFile(sourcePath, destPath string) error {
 
 // StreamContext contains all important information on a stream
 type StreamContext struct {
-	streamId       uint32    //id of the stream
-	sourceUrl      string    //url of the streams source, e.g. 10.0.0.4
-	courseSlug     string    //slug of the course, e.g. eidi
-	teachingTerm   string    //S or W depending on the courses teaching-term
-	teachingYear   uint32    //Year the course takes place in
-	startTime      time.Time //time the stream should start
-	endTime        time.Time //end of the stream (including +10 minute safety)
-	streamVersion  string    //version of the stream to be handled, e.g. PRES, COMB or CAM
-	publishVoD     bool      //whether file should be uploaded
+	streamId       uint32    // id of the stream
+	sourceUrl      string    // url of the streams source, e.g. 10.0.0.4
+	courseSlug     string    // slug of the course, e.g. eidi
+	teachingTerm   string    // S or W depending on the courses teaching-term
+	teachingYear   uint32    // Year the course takes place in
+	startTime      time.Time // time the stream should start
+	endTime        time.Time // end of the stream (including +10 minute safety)
+	streamVersion  string    // version of the stream to be handled, e.g. PRES, COMB or CAM
+	publishVoD     bool      // whether file should be uploaded
 	streamCmd      *exec.Cmd // command used for streaming
 	transcodingCmd *exec.Cmd // command used for transcoding
-	isSelfStream   bool      //deprecated
+	isSelfStream   bool      // whether the stream is self stream or not
 	canceled       bool      // selfstreams are canceled when the same stream starts again.
 
 	streamName   string // ingest target
@@ -492,15 +490,9 @@ func (s StreamContext) getRecordingFileName() string {
 	if s.recordingPath != nil {
 		return *s.recordingPath
 	}
-	if !s.isSelfStream {
-		return fmt.Sprintf("%s/%s.ts",
-			cfg.TempDir,
-			s.getStreamName())
-	}
-	return fmt.Sprintf("%s/%s_%s.flv",
+	return fmt.Sprintf("%s/%s.ts",
 		cfg.TempDir,
-		s.courseSlug,
-		s.startTime.Format("02012006"))
+		s.getStreamName())
 }
 
 func (s StreamContext) getRecordingTrashName() string {
@@ -511,16 +503,6 @@ func (s StreamContext) getRecordingTrashName() string {
 // getTranscodingFileName returns the filename a stream should be saved to after transcoding.
 // example: /srv/sharedMassStorage/2021/S/eidi/2021-09-23_10-00/eidi_2021-09-23_10-00_PRES.mp4
 func (s StreamContext) getTranscodingFileName() string {
-	if s.isSelfStream {
-		return fmt.Sprintf("%s/%d/%s/%s/%s/%s-%s.mp4",
-			cfg.StorageDir,
-			s.teachingYear,
-			s.teachingTerm,
-			s.courseSlug,
-			s.startTime.Format("2006-01-02_15-04"),
-			s.courseSlug,
-			s.startTime.Format("02012006"))
-	}
 	return fmt.Sprintf("%s/%d/%s/%s/%s/%s.mp4",
 		cfg.StorageDir,
 		s.teachingYear,
@@ -554,16 +536,6 @@ func (s StreamContext) getLargeThumbnailSpriteFileName() string {
 // getThumbnailSpriteFileName returns the path a thumbnail sprite should be saved to after transcoding.
 // example: /srv/sharedMassStorage/2021/S/eidi/2021-09-23_10-00/eidi_2021-09-23_10-00_PRES-thumb.jpg
 func (s StreamContext) getThumbnailSpriteFileName() string {
-	if s.isSelfStream {
-		return fmt.Sprintf("%s/%d/%s/%s/%s/%s-%s-thumb.jpg",
-			cfg.StorageDir,
-			s.teachingYear,
-			s.teachingTerm,
-			s.courseSlug,
-			s.startTime.Format("2006-01-02_15-04"),
-			s.courseSlug,
-			s.startTime.Format("02012006"))
-	}
 	return fmt.Sprintf("%s/%d/%s/%s/%s/%s-thumb.jpg",
 		cfg.StorageDir,
 		s.teachingYear,
@@ -575,25 +547,19 @@ func (s StreamContext) getThumbnailSpriteFileName() string {
 
 // getStreamName returns the stream name, used for the worker status
 func (s StreamContext) getStreamName() string {
-	if !s.isSelfStream {
-		return fmt.Sprintf("%s-%s%s",
-			s.courseSlug,
-			s.startTime.Format("2006-01-02-15-04"),
-			s.streamVersion)
-	}
-	return s.courseSlug
+	return fmt.Sprintf("%s-%s%s",
+		s.courseSlug,
+		s.startTime.Format("2006-01-02-15-04"),
+		s.streamVersion)
 }
 
 var vodFileNameIllegal = regexp.MustCompile(`[^a-zA-Z0-9_\\.]+`)
 
 // getStreamNameVoD returns the stream name for vod (lrz replaces - with _)
 func (s StreamContext) getStreamNameVoD() string {
-	if !s.isSelfStream {
-		name := strings.ReplaceAll(fmt.Sprintf("%s_%s%s",
-			s.courseSlug,
-			s.startTime.Format("2006_01_02_15_04"),
-			s.streamVersion), "-", "_")
-		return vodFileNameIllegal.ReplaceAllString(name, "_")
-	}
-	return s.courseSlug
+	name := strings.ReplaceAll(fmt.Sprintf("%s_%s%s",
+		s.courseSlug,
+		s.startTime.Format("2006_01_02_15_04"),
+		s.streamVersion), "-", "_")
+	return vodFileNameIllegal.ReplaceAllString(name, "_")
 }

worker/worker/transcode.go

@@ -15,7 +15,7 @@ import (
 	"time"
 )
 
-func buildCommand(niceness int, infile string, outfile string, tune string, crf int) *exec.Cmd {
+func buildCommand(niceness int, infile string, outfile string, tune string, crf int, self bool) *exec.Cmd {
 	c := []string{
 		"-n", fmt.Sprintf("%d", niceness),
 		"ffmpeg", "-nostats", "-loglevel", "error", "-y",
@@ -25,8 +25,10 @@ func buildCommand(niceness int, infile string, outfile string, tune string, crf
 	if tune != "" {
 		c = append(c, "-tune", tune)
 	}
+	if self {
+		c = append(c, "-probesize 25M -analyzeduration 50M")
+	}
 	c = append(c, "-c:a", "aac", "-b:a", "128k", "-crf", fmt.Sprintf("%d", crf), outfile)
-	c = append(c, "-probesize 100M -analyzeduration 250M")
 	return exec.Command("nice", c...)
 }
 
@@ -68,14 +70,14 @@ func transcode(streamCtx *StreamContext) error {
 	switch streamCtx.streamVersion {
 	case "CAM":
 		// compress camera image slightly more
-		cmd = buildCommand(10, in, out, "", 26)
+		cmd = buildCommand(10, in, out, "", 26, streamCtx.isSelfStream)
 	case "PRES":
-		cmd = buildCommand(9, in, out, "stillimage", 20)
+		cmd = buildCommand(9, in, out, "stillimage", 20, streamCtx.isSelfStream)
 	case "COMB":
-		cmd = buildCommand(8, in, out, "", 24)
+		cmd = buildCommand(8, in, out, "", 24, streamCtx.isSelfStream)
 	default:
 		//unknown source, use higher compression and less priority
-		cmd = buildCommand(10, in, out, "", 26)
+		cmd = buildCommand(10, in, out, "", 26, streamCtx.isSelfStream)
 	}
 	log.WithFields(log.Fields{"input": in, "output": out, "command": cmd.String()}).Info("Transcoding")
 	streamCtx.transcodingCmd = cmd
@@ -205,8 +207,6 @@ func transcodeAudio(ctx *StreamContext) error {
 	cmd := exec.Command("ffmpeg",
 		"-y",
 		"-v", "quiet",
-		"-probesize", "100M",
-		"-analyzeduration", "250M",
 		"-i", input,
 		"-c:a", "aac",
 		"-vn", output)