From 2f544f1a32b7f788d7e59fcbea004d8505bb9b97 Mon Sep 17 00:00:00 2001
From: matthias <matthias.reumann@tum.de>
Date: Tue, 15 Aug 2023 22:57:18 +0200
Subject: [PATCH 01/31] Firefox Scroll Bug (#1119)

* Fix background-size:cover

* Fix scroll bug
---
 web/assets/css/home.css  |  5 +++--
 web/template/home.gohtml | 12 ++++++------
 2 files changed, 9 insertions(+), 8 deletions(-)

diff --git a/web/assets/css/home.css b/web/assets/css/home.css
index cf6c5273b..e0dea7eb0 100644
--- a/web/assets/css/home.css
+++ b/web/assets/css/home.css
@@ -33,12 +33,13 @@
 }
 
 /* Chrome, Safari and Opera */
-#content::-webkit-scrollbar, #notification-list::-webkit-scrollbar, .tum-live-side-navigation::-webkit-scrollbar {
+#content::-webkit-scrollbar, #notification-list::-webkit-scrollbar, .tum-live-side-navigation::-webkit-scrollbar,
+#public-courses::-webkit-scrollbar, #user-courses::-webkit-scrollbar{
     display: none;
 }
 
 /* IE, Edge and Firefox */
-#content, #notification-list, .tum-live-side-navigation {
+#content, #notification-list, .tum-live-side-navigation, #public-courses, #user-courses {
     -ms-overflow-style: none; /* IE and Edge */
     scrollbar-width: none; /* Firefox */
 }
diff --git a/web/template/home.gohtml b/web/template/home.gohtml
index af14da5c7..13a5f0513 100644
--- a/web/template/home.gohtml
+++ b/web/template/home.gohtml
@@ -238,7 +238,7 @@
     <!-- views -->
     <article class="text-3 p-4 grow" :class="{'hidden' : navigation.value}">
         <template x-if="state.isPublicCourses()">
-            <article id="public-courses" class="tum-live-course-list">
+            <article id="public-courses" class="tum-live-course-list h-full overflow-y-scroll">
                 <header>
                     <h1>
                         <i class="text-base fa-solid fa-chalkboard mr-2"></i>
@@ -272,7 +272,7 @@
             </article>
         </template>
         <template x-if="state.isUserCourses()">
-            <article id="user-courses" class="tum-live-course-list">
+            <article id="user-courses" class="tum-live-course-list h-full overflow-y-scroll">
                 <header>
                     <h1>
                         <i class="text-base fa-solid fa-graduation-cap mr-2"></i>
@@ -369,7 +369,7 @@
                                                 </span>
                                                 </div>
                                                 <a :href="`/w/${livestream.Course.Slug}/${livestream.Stream.ID}`">
-                                                    <div :style="`background:url('/api/stream/${livestream.Stream.ID}/thumbs/live'), url('/thumb-fallback.png')`"
+                                                    <div :style="`background:url('/api/stream/${livestream.Stream.ID}/thumbs/live'), url('/thumb-fallback.png'); background-size: cover;`"
                                                          class="h-full tum-live-thumbnail"></div>
                                                 </a>
                                             </div>
@@ -439,7 +439,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: url('/api/stream/${vod.ID}/thumbs/vod'), url('/thumb-fallback.png')`"
+                                                    <div :style="`background: url('/api/stream/${vod.ID}/thumbs/vod'), url('/thumb-fallback.png'); background-size: cover;`"
                                                          class="aspect-video tum-live-thumbnail">
                                                         <div :id="`vod-progress-${vod.ID}`"
                                                              class="tum-live-thumbnail-progress">
@@ -628,7 +628,7 @@
                                                 </template>
                                             </div>
                                             <a :href="`/w/${livestream.Course.Slug}/${livestream.Stream.ID}`">
-                                                <div :style="`background:url('/api/stream/${livestream.Stream.ID}/thumbs/live'), url('/thumb-fallback.png')`"
+                                                <div :style="`background:url('/api/stream/${livestream.Stream.ID}/thumbs/live'), url('/thumb-fallback.png'); background-size: cover;`"
                                                      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">
@@ -706,7 +706,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:url('/api/stream/${course.LastRecording.ID}/thumbs/vod'), url('/thumb-fallback.png')`"
+                                            <div :style="`background:url('/api/stream/${course.LastRecording.ID}/thumbs/vod'), url('/thumb-fallback.png'); background-size: cover;`"
                                                  class="aspect-video tum-live-thumbnail">
                                                 <div :id="`vod-progress-${course.LastRecording.ID}`"
                                                      class="tum-live-thumbnail-progress">

From ffe99baf04c5db89f7836d41070df4c9e83a3143 Mon Sep 17 00:00:00 2001
From: matthias <matthias.reumann@tum.de>
Date: Wed, 16 Aug 2023 06:47:37 +0200
Subject: [PATCH 02/31] Chat component (#1071)

* Add component and api

* Add websocket connection

* Add testing .gohtml

* Add sorting and preprocessing

* Add websocket message and reply handling

* Add reactions to ws

* Add chat reply fix

* Add EmojiSuggestions

* Remove unused templates

* Add message send

* Add delete functionality

* Add resolve

* Add approve

* Add retract; merge api/user[s] files

* Add interface 'Identifiable'

* Cleanup websocket creation; Add addressees

* Add polls

* Add 'type' to poll ws messages

* Add 'interaction' bundle

* Start integrating new component into html

* Add more components

* Add focus

* Add login checks

* Add admin toolkit

* Add back polls

* More poll features...

* Add poll creation

* Remove some of the old functions

* Scrolling behavior; server messages; mini-bugs

* Scroll after sort change

* Remove testchat

* Remove old files

* Add video-information ws

* Update description properly

* Add sort dropdown

* Reintegrate chat replay

* Fix test

* Remove old chat files

* Tiny fix; Remove console.log

* Fix lint

* Remove unused testing func

* Remove console.log

* Revert/Use old emojipicker design
---
 api/chat.go                                   |  33 +-
 api/chat_test.go                              |   8 +-
 web/assets/css/home.css                       |  18 +-
 web/popup.go                                  |   3 +-
 web/router.go                                 |   4 +-
 web/template/components/chat.gohtml           | 508 ++++++++++++++++
 web/template/partial/stream/chat/chat.gohtml  | 400 ------------
 .../partial/stream/chat/chat_message.gohtml   | 149 -----
 .../partial/stream/chat/chatprompts.gohtml    |  13 -
 .../partial/stream/chat/emojipicker.gohtml    |  21 -
 .../partial/stream/chat/emojipromt.gohtml     |  22 -
 .../partial/stream/chat/tooltip-bottom.gohtml |  13 -
 .../partial/stream/chat/tooltip-left.gohtml   |  14 -
 web/template/partial/stream/watch-info.gohtml |   3 +-
 web/template/popup-chat.gohtml                |  16 +-
 web/template/watch.gohtml                     | 232 +++----
 web/ts/TUMLiveVjs.ts                          |  21 -
 web/ts/api/Identifiable.ts                    |   3 +
 web/ts/api/chat-ws.ts                         |  69 +++
 web/ts/api/chat.ts                            | 179 ++++++
 web/ts/api/courses.ts                         |   4 +-
 web/ts/api/poll-ws.ts                         |  39 ++
 web/ts/api/{user.ts => users.ts}              |   6 +
 web/ts/chat.ts                                |  73 ---
 web/ts/chat/Chat.ts                           | 574 ------------------
 web/ts/chat/ChatMessagePreprocessor.ts        |  82 +++
 web/ts/chat/ChatMessageSorter.ts              |  27 +
 web/ts/chat/ChatUserList.ts                   |  70 ---
 web/ts/chat/EmojiList.ts                      |  85 ---
 web/ts/chat/NewChatMessage.ts                 |  88 ---
 web/ts/chat/Poll.ts                           |  68 ---
 web/ts/components/alpine-component.ts         |   4 +-
 web/ts/components/chat-prompt.ts              | 244 ++++++++
 web/ts/components/chat.ts                     | 297 +++++++++
 web/ts/components/course.ts                   |   2 +-
 web/ts/components/emoji-picker.ts             |  15 +
 web/ts/components/poll.ts                     | 140 +++++
 web/ts/components/video-information.ts        |  45 ++
 web/ts/components/video-interaction.ts        |  47 ++
 web/ts/entry/interactions.ts                  |   6 +
 web/ts/entry/video.ts                         |   1 -
 web/ts/socket.ts                              |   2 +-
 web/ts/stream-playlist.ts                     |   2 +-
 web/ts/utilities/ToggleableElement.ts         |   4 +
 web/ts/utilities/keycodes.ts                  |   7 +
 web/ts/utilities/tunnels.ts                   |   6 +
 web/ts/utilities/ws.ts                        |  21 +
 web/ts/video/watchers.ts                      |  25 +
 web/ts/watch.ts                               | 245 +-------
 web/watch.go                                  |   1 -
 web/webpack.common.js                         |   1 +
 51 files changed, 1953 insertions(+), 2007 deletions(-)
 create mode 100644 web/template/components/chat.gohtml
 delete mode 100644 web/template/partial/stream/chat/chat.gohtml
 delete mode 100644 web/template/partial/stream/chat/chat_message.gohtml
 delete mode 100644 web/template/partial/stream/chat/chatprompts.gohtml
 delete mode 100644 web/template/partial/stream/chat/emojipicker.gohtml
 delete mode 100644 web/template/partial/stream/chat/emojipromt.gohtml
 delete mode 100644 web/template/partial/stream/chat/tooltip-bottom.gohtml
 delete mode 100644 web/template/partial/stream/chat/tooltip-left.gohtml
 create mode 100644 web/ts/api/Identifiable.ts
 create mode 100644 web/ts/api/chat-ws.ts
 create mode 100644 web/ts/api/chat.ts
 create mode 100644 web/ts/api/poll-ws.ts
 rename web/ts/api/{user.ts => users.ts} (83%)
 delete mode 100644 web/ts/chat.ts
 delete mode 100644 web/ts/chat/Chat.ts
 create mode 100644 web/ts/chat/ChatMessagePreprocessor.ts
 create mode 100644 web/ts/chat/ChatMessageSorter.ts
 delete mode 100644 web/ts/chat/ChatUserList.ts
 delete mode 100644 web/ts/chat/EmojiList.ts
 delete mode 100644 web/ts/chat/NewChatMessage.ts
 delete mode 100644 web/ts/chat/Poll.ts
 create mode 100644 web/ts/components/chat-prompt.ts
 create mode 100644 web/ts/components/chat.ts
 create mode 100644 web/ts/components/emoji-picker.ts
 create mode 100644 web/ts/components/poll.ts
 create mode 100644 web/ts/components/video-information.ts
 create mode 100644 web/ts/components/video-interaction.ts
 create mode 100644 web/ts/entry/interactions.ts
 create mode 100644 web/ts/utilities/keycodes.ts
 create mode 100644 web/ts/utilities/ws.ts
 create mode 100644 web/ts/video/watchers.ts

diff --git a/api/chat.go b/api/chat.go
index 0f06257ac..715f62518 100644
--- a/api/chat.go
+++ b/api/chat.go
@@ -36,6 +36,12 @@ var allowedReactions = map[string]struct{}{
 	"eyes":     {},
 }
 
+const (
+	POLL_START_MSG         = "start_poll"
+	POLL_CLOSE_MSG         = "close_active_poll"
+	POLL_PARTICIPATION_MSG = "submit_poll_option_vote"
+)
+
 var routes chatRoutes
 
 func RegisterRealtimeChatChannel() {
@@ -130,6 +136,7 @@ func (r chatRoutes) handleSubmitPollOptionVote(ctx tools.TUMLiveContext, msg []b
 	voteCount, _ := r.ChatDao.GetPollOptionVoteCount(req.PollOptionId)
 
 	voteUpdateMap := gin.H{
+		"type":         POLL_PARTICIPATION_MSG,
 		"pollOptionId": req.PollOptionId,
 		"votes":        voteCount,
 	}
@@ -191,10 +198,11 @@ func (r chatRoutes) handleStartPoll(ctx tools.TUMLiveContext, msg []byte) {
 	}
 
 	pollMap := gin.H{
-		"active":      true,
-		"question":    poll.Question,
-		"pollOptions": pollOptionsJson,
-		"submitted":   0,
+		"type":      POLL_START_MSG,
+		"active":    true,
+		"question":  poll.Question,
+		"options":   pollOptionsJson,
+		"submitted": 0,
 	}
 	if pollJson, err := json.Marshal(pollMap); err == nil {
 		broadcastStream(ctx.Stream.ID, pollJson)
@@ -222,8 +230,9 @@ func (r chatRoutes) handleCloseActivePoll(ctx tools.TUMLiveContext) {
 	}
 
 	statsMap := gin.H{
-		"question":          poll.Question,
-		"pollOptionResults": pollOptions,
+		"type":     POLL_CLOSE_MSG,
+		"question": poll.Question,
+		"options":  pollOptions,
 	}
 
 	if statsJson, err := json.Marshal(statsMap); err == nil {
@@ -397,10 +406,10 @@ func (r chatRoutes) handleRetract(ctx tools.TUMLiveContext, msg []byte) {
 func (r chatRoutes) handleMessage(ctx tools.TUMLiveContext, context *realtime.Context, msg []byte) {
 	var chat chatReq
 	if err := json.Unmarshal(msg, &chat); err != nil {
-		log.WithError(err).Error("error unmarshaling chat message")
+		log.WithError(err).Error("error unmarshalling chat message")
 		return
 	}
-	if !ctx.Course.ChatEnabled {
+	if !ctx.Course.ChatEnabled && !ctx.Stream.ChatEnabled {
 		return
 	}
 	uname := ctx.User.GetPreferredName()
@@ -577,10 +586,10 @@ func (r chatRoutes) getActivePoll(c *gin.Context) {
 	}
 
 	c.JSON(http.StatusOK, gin.H{
-		"active":      true,
-		"question":    poll.Question,
-		"pollOptions": pollOptions,
-		"submitted":   submitted,
+		"active":    true,
+		"question":  poll.Question,
+		"options":   pollOptions,
+		"submitted": submitted,
 	})
 }
 
diff --git a/api/chat_test.go b/api/chat_test.go
index 532653f7d..2037e561f 100644
--- a/api/chat_test.go
+++ b/api/chat_test.go
@@ -99,10 +99,10 @@ func TestActivePoll(t *testing.T) {
 		}
 
 		res := gin.H{
-			"active":      true,
-			"question":    testutils.PollStreamFPVLive.Question,
-			"pollOptions": pollOptions,
-			"submitted":   submitted,
+			"active":    true,
+			"question":  testutils.PollStreamFPVLive.Question,
+			"options":   pollOptions,
+			"submitted": submitted,
 		}
 
 		gomino.TestCases{
diff --git a/web/assets/css/home.css b/web/assets/css/home.css
index e0dea7eb0..fe3b3fb61 100644
--- a/web/assets/css/home.css
+++ b/web/assets/css/home.css
@@ -33,17 +33,21 @@
 }
 
 /* Chrome, Safari and Opera */
-#content::-webkit-scrollbar, #notification-list::-webkit-scrollbar, .tum-live-side-navigation::-webkit-scrollbar,
+#chat-box::-webkit-scrollbar, #content::-webkit-scrollbar, #notification-list::-webkit-scrollbar, .tum-live-side-navigation::-webkit-scrollbar,
 #public-courses::-webkit-scrollbar, #user-courses::-webkit-scrollbar{
     display: none;
 }
 
 /* IE, Edge and Firefox */
-#content, #notification-list, .tum-live-side-navigation, #public-courses, #user-courses {
+#chat-box, #content, #notification-list, .tum-live-side-navigation, #public-courses, #user-courses {
     -ms-overflow-style: none; /* IE and Edge */
     scrollbar-width: none; /* Firefox */
 }
 
+.tum-live-border {
+    @apply dark:border-gray-800
+}
+
 #notification-list a{
     @apply underline;
 }
@@ -55,7 +59,7 @@
 }
 
 .tum-live-bg-primary {
-    @apply bg-blue-500 dark:bg-indigo-600
+    @apply bg-blue-500 dark:bg-indigo-600 disabled:bg-blue-400/50 disabled:dark:bg-indigo-500/50
 }
 
 .tum-live-border-primary {
@@ -76,7 +80,7 @@
 }
 
 .tum-live-button-secondary {
-    @apply text-3 hover:bg-gray-100 dark:hover:bg-gray-800
+    @apply text-3 hover:bg-gray-100 dark:hover:bg-gray-800;
 }
 
 .tum-live-button-tertiary {
@@ -92,7 +96,7 @@
 }
 
 .tum-live-icon-button {
-    @apply flex justify-center items-center rounded-full text-gray-400 hover:text-gray-600 dark:hover:text-white active:bg-gray-100/50 dark:active:bg-gray-700/50
+    @apply flex justify-center items-center rounded-full text-gray-400 hover:text-gray-600 dark:hover:text-white active:bg-gray-100/50 dark:active:bg-gray-700/50 disabled:opacity-20;
 }
 
 .tum-live-input-submit {
@@ -213,6 +217,10 @@
     @apply flex items-center p-2 hover:bg-gray-100 dark:hover:bg-gray-800 my-2 w-full
 }
 
+.tum-live-menu .tum-live-menu-item.active {
+    @apply bg-gray-100 dark:bg-gray-800
+}
+
 
 .tum-live-course-list > header {
     @apply flex items-center justify-between mb-8
diff --git a/web/popup.go b/web/popup.go
index e67e8b928..2a96c197d 100644
--- a/web/popup.go
+++ b/web/popup.go
@@ -9,7 +9,7 @@ import (
 	"net/http"
 )
 
-func (r mainRoutes) PopUpChat(c *gin.Context) {
+func (r mainRoutes) PopOutChat(c *gin.Context) {
 	foundContext, exists := c.Get("TUMLiveContext")
 	if !exists {
 		sentry.CaptureException(errors.New("context should exist but doesn't"))
@@ -23,7 +23,6 @@ func (r mainRoutes) PopUpChat(c *gin.Context) {
 	data.IndexData = NewIndexData()
 	data.IndexData.TUMLiveContext = foundContext.(tools.TUMLiveContext)
 	data.IsAdminOfCourse = tumLiveContext.UserIsAdmin()
-	data.IsPopUp = true
 
 	err := templateExecutor.ExecuteTemplate(c.Writer, "popup-chat.gohtml", data)
 	if err != nil {
diff --git a/web/router.go b/web/router.go
index aa4e93aba..ce4bd6c36 100755
--- a/web/router.go
+++ b/web/router.go
@@ -27,6 +27,7 @@ var staticFS embed.FS
 
 var templatePaths = []string{
 	"template/*.gohtml",
+	"template/components/*.gohtml",
 	"template/admin/*.gohtml",
 	"template/admin/admin_tabs/*.gohtml",
 	"template/partial/*.gohtml",
@@ -153,7 +154,7 @@ func configMainRoute(router *gin.Engine) {
 	streamGroup.Use(tools.InitStream(daoWrapper))
 	streamGroup.GET("/w/:slug/:streamID", routes.WatchPage)
 	streamGroup.GET("/w/:slug/:streamID/:version", routes.WatchPage)
-	streamGroup.GET("/w/:slug/:streamID/chat/popup", routes.PopUpChat)
+	streamGroup.GET("/w/:slug/:streamID/chat/popup", routes.PopOutChat)
 
 	// misc
 	router.GET("/healthcheck", routes.HealthCheck)
@@ -240,7 +241,6 @@ type CacheMetrics struct {
 type ChatData struct {
 	IsAdminOfCourse bool // is current user admin or lecturer who created the course associated with the chat
 	IndexData       IndexData
-	IsPopUp         bool
 }
 
 type staticFile struct {
diff --git a/web/template/components/chat.gohtml b/web/template/components/chat.gohtml
new file mode 100644
index 000000000..07e2331bd
--- /dev/null
+++ b/web/template/components/chat.gohtml
@@ -0,0 +1,508 @@
+{{define "chat-component"}}
+    {{- /*gotype: github.com/joschahenningsen/TUM-Live/web.ChatData*/ -}}
+    {{$course := .IndexData.TUMLiveContext.Course}}
+    {{$stream := .IndexData.TUMLiveContext.Stream}}
+    {{$userName := ""}}
+    {{$userId := 0}}
+    {{$isAdmin := .IsAdminOfCourse}}
+    {{if .IndexData.TUMLiveContext.User}}
+        {{$userName = .IndexData.TUMLiveContext.User.Name}}
+        {{$userId = .IndexData.TUMLiveContext.User.ID}}
+    {{end}}
+    <article
+            x-data="interaction.videoInteractionContext({ID: {{$userId}}, name: '{{$userName}}', isAdmin: {{$isAdmin}}})"
+            class="h-full">
+        <template x-if="isChat()">
+            <article
+                    x-data="interaction.chatContext({{ $stream.ID }}, user, {{ $stream.Recording }})"
+                    x-init="if (isPopOut()) { afterInitPopout(); }
+                            else { afterInitNotPopout(watch.getPlayers()[0], '{{$stream.ParsableStartTime}}') }"
+                    x-on:wsrealtimeconnectionchange.window="(e) => setStatus(e.detail.status);"
+                    class="flex relative flex-col text-1 h-full">
+                <header class="flex items-center justify-between sticky top-0 z-40 w-full px-3 max-h-12 h-12 rounded-t-lg bg-white dark:bg-secondary border-b dark:border-gray-800"
+                        style="min-height: 3rem;"> <!-- since there is no min-h-12 class -->
+                    <section class="relative flex items-center space-x-3 text-sm"
+                             @click.outside="showSortSelect.toggle(false);">
+                        <button type="button" @click="showSortSelect.toggle()"
+                                class="tum-live-button-secondary px-3 py-1 rounded-full"
+                                title="Change to 'Popular First Order'">
+                            <i class="fa-solid fa-chevron-down mr-2"></i>
+                            <span x-cloak x-show="isPopularFirst() && !isReplaying()">Popular First</span>
+                            <span x-cloak x-show="isLiveFirst() && !isReplaying()">Live First</span>
+                            <span x-cloak x-show="isReplaying()">Chat Replay</span>
+                        </button>
+                        <article x-cloak x-show="showSortSelect.value"
+                                 class="tum-live-menu absolute top-full left-3 w-56 font-light">
+                            <button type="button" @click="sortLiveFirst()"
+                                    class="tum-live-menu-item"
+                                    :class="{'active' : (isLiveFirst() && !isReplaying())}">
+                                <i class="fa-solid fa-arrow-down-a-z w-8 mr-2"></i>
+                                Live first
+                            </button>
+                            <button type="button" @click="sortPopularFirst()"
+                                    class="tum-live-menu-item"
+                                    :class="{'active' : (isPopularFirst() && !isReplaying())}">
+                                <i class="fa-solid fa-fire w-8 mr-2"></i>
+                                Popular first
+                            </button>
+                            {{if $stream.Recording}}
+                                <template x-if="!isPopOut()">
+                                    <button type="button" @click="toggleReplay()"
+                                            class="tum-live-menu-item"
+                                            :class="{'active' : isReplaying()}">
+                                        <i class="fa-solid fa-clock-rotate-left w-8 mr-2"></i>
+                                        Chat Replay
+                                    </button>
+                                </template>
+                            {{end}}
+                        </article>
+                    </section>
+                    <button type="button"
+                            @click="showPolls()"
+                            class="tum-live-button tum-live-button-tertiary ml-auto">Polls
+                    </button>
+                </header>
+
+                <!-- Messages -->
+                <article id="chat-box" class="relative h-full w-full overflow-y-scroll overflow-x-hidden z-30">
+                    <div class="grid gap-y-8 content-start px-4 py-3 min-h-full">
+                        <template x-for="m in messages.get(chatSortFn)" :key="m.ID">
+                            <section class="grid gap-y-1 text-4 text-sm scroll-mb-4"
+                                     :class="{'opacity-60' : m.isGrayedOut}"
+                                     :id="'chat-message-' + m.ID">
+                                <div class="text-xs">
+                                    <span x-show="m.admin"
+                                          class="fa-video text-white bg-red-400 p-1 rounded fas"></span>
+                                    <span class="text-2 font-semibold" x-text="m.name" :style="'color:'+m.color"></span>
+                                    <span x-show="!m.visible" class="text-5 font-light">
+                        This message is currently only visible to you and admins.
+                    </span>
+                                </div>
+                                <div class="relative group p-2 rounded hover:bg-gray-100 dark:hover:bg-gray-600">
+                                    <div class="flex justify-between">
+                                        <span class="w-5/6 overflow-wrap-anywhere my-auto" x-html="m.message"
+                                              x-init="$nextTick(() => renderMathInElement($el, global.getKatexOptions()))">
+                                        </span>
+                                    </div>
+                                    <!-- message-date -->
+                                    <span class="absolute right-2 bottom-2 hidden group-hover:inline text-xs text-5 font-light"
+                                          x-text="m.friendlyCreatedAt()"></span>
+                                </div>
+
+                                <!-- reactions -->
+                                <div class="flex justify-between items-center">
+                                    <div class="flex items-center relative flex-wrap">
+                                        <template x-for="(reactionGroup, i) in m.aggregatedReactions">
+                                            <button type="button"
+                                                    @click="reactToMessage(m.ID, reactionGroup.emojiName)" {{/* notify emoji click */}}
+                                                    :title="reactionGroup.namesPretty" {{/* e.g. ':eyes:' */}}
+                                                    :disabled="!isLoggedIn()"
+                                                    :class="reactionGroup.hasReacted ? 'border-blue-500/50 bg-blue-100/25 dark:border-indigo-600 dark:bg-indigo-900/25' : 'border-gray-500'"
+                                                    class="cursor-pointer m-1 px-2 h-6 border-[1px] rounded-full border-solid text-xs flex justify-start items-center disabled:cursor-default">
+                                                <span x-text="reactionGroup.emoji"></span>
+                                                <span x-text="reactionGroup.reactions.length" class="ml-2"></span>
+                                            </button>
+                                        </template>
+                                    </div>
+                                </div>
+
+                                <!-- open reply button -->
+                                <div class="flex justify-between items-center">
+                                    <div class="flex space-x-2 align-middle items-center">
+                                        <div class="relative" @click.outside="() => m.ShowEmojiPicker.toggle(false)">
+                                            <button x-cloak x-show="isLoggedIn()" type="button" title="React"
+                                                    @click="m.ShowEmojiPicker.toggle()"
+                                                    class="flex px-2 h-8 rounded-full text-5 hover:bg-gray-100 dark:hover:bg-gray-600">
+                                                <i class="far fa-face-smile m-auto"></i>
+                                            </button>
+
+                                            <div x-data="interaction.emojiPickerContext(m.ID)"
+                                                 class="absolute ease-out duration-100 bg-white dark:bg-secondary border-2 border-solid border-gray-200 dark:border-black rounded left-[-10px] top-[-36px] text-left overflow-hidden whitespace-nowrap p-1 flex flex-row"
+                                                 :class="m.ShowEmojiPicker.value ? 'scale-100 opacity-1 translate-x-0 translate-y-0' : 'scale-0 opacity-0 translate-x-[-42px] translate-y-[42px]'">
+                                                <template x-for="emoji in emojiSuggestions">
+                                                    <button type="button" x-text="emoji.emoji"
+                                                            :title="`:${emoji.short_names[0]}:`"
+                                                            @click="reactToMessage(m.ID, emoji.short_names[0]); m.ShowEmojiPicker.toggle(false);"
+                                                            class="cursor-pointer mr-1 ml-1 w-7 h-7 rounded text-sm hover:bg-gray-100 hover:dark:bg-gray-600">
+                                                    </button>
+                                                </template>
+                                            </div>
+                                        </div>
+                                        <template x-if="m.resolved">
+                                            <i class="fa-solid fa-check-double text-success"></i>
+                                        </template>
+                                        <template x-if="m.replies.length > 0">
+                                            <button class="tum-live-button-secondary px-2 py-1 rounded-full uppercase font-light text-xs text-5"
+                                                    @click="m.ShowReplies.toggle()">
+                                                <span>replies</span>
+                                                <span x-text="`(${m.replies.length})`"></span>
+                                                <i class="fa-solid ml-1"
+                                                   :class="m.ShowReplies.value ? 'fa-chevron-up' : 'fa-chevron-down'"></i>
+                                            </button>
+                                        </template>
+
+                                        <button x-cloak x-show="isLoggedIn()" type="button" @click="setReply(m)"
+                                                title="Reply">
+                                            <span class="font-semibold text-xs text-4">Reply</span>
+                                        </button>
+                                    </div>
+
+                                    <template x-if="isAdmin()">
+                                        <article class="relative">
+                                            <button type="button" title="Admin tools"
+                                                    @click="m.ShowAdminTools.toggle(true)"
+                                                    class="text-amber-400 uppercase text-sm hover:bg-gray-100 dark:hover:bg-gray-600 w-8 h-8 rounded-full">
+                                                <i class="fa-solid fa-bolt"></i>
+                                            </button>
+                                            <div x-cloak x-show="m.ShowAdminTools.value"
+                                                 @click.outside="m.ShowAdminTools.toggle(false)"
+                                                 class="tum-live-menu absolute right-0 bottom-full z-[60] w-32">
+                                                <button @click="deleteMessage(m.ID)"
+                                                        title="Delete Message" class="tum-live-menu-item">
+                                                    <i class="fas fa-ban text-danger mr-3"></i>
+                                                    <span class="text-4 font-light">Delete</span>
+                                                </button>
+                                                {{if $course.ModeratedChatEnabled}}
+                                                    <button x-cloak x-show="!m.visible"
+                                                            @click="approveMessage(m.ID)"
+                                                            title="Approve Message" class="tum-live-menu-item">
+                                                        <i class="fa-solid fa-spell-check mr-3"></i>
+                                                        <span class="text-4 font-light">Approve</span>
+                                                    </button>
+                                                    <button x-cloak x-show="m.visible && !m.admin"
+                                                            @click="retractMessage(m.ID)"
+                                                            title="Retract Message" class="tum-live-menu-item">
+                                                        <i class="fa-solid fa-rotate-left mr-3"></i>
+                                                        <span class="text-4 font-light">Retract</span>
+                                                    </button>
+                                                {{end}}
+                                                <template x-if="!m.resolved">
+                                                    <button @click="resolveMessage(m.ID)"
+                                                            title="Resolve Message" class="tum-live-menu-item">
+                                                        <i class="fas fa-check text-success mr-3"></i>
+                                                        <span class="text-4 font-light">Resolve</span>
+                                                    </button>
+                                                </template>
+                                            </div>
+                                        </article>
+                                    </template>
+                                </div>
+
+
+                                <!-- replies -->
+                                <div x-cloak x-show="m.ShowReplies.value"
+                                     class="grid gap-y-3 py-1 pl-2 mt-2 ml-4 border-l-2 dark:border-secondary-light">
+                                    <template x-for="reply in m.replies">
+                                        <div class="grid gap-y-1">
+                                            <div>
+                            <span x-show="reply.admin"
+                                  class="text-white bg-red-400 p-1 text-xs rounded fas fa-video"></span>
+                                                <span class="text-2 font-semibold" x-text="reply.name"
+                                                      :style="'color:'+reply.color"></span>
+                                            </div>
+                                            <div class="group p-2 rounded hover:bg-gray-100 dark:hover:bg-gray-700">
+                                                <div class="flex justify-between">
+                                                    <span class="w-5/6 my-auto" x-html="reply.message"></span>
+                                                    <span class="hidden group-hover:inline text-xs text-5 font-light mt-auto"
+                                                          x-text="reply.friendlyCreatedAt()"></span>
+                                                </div>
+                                            </div>
+                                        </div>
+                                    </template>
+                                </div>
+                            </section>
+                        </template>
+                    </div>
+                    <article class="grid gap-2 sticky bottom-3">
+                        <section x-cloak x-show="unreadMessages" class="flex justify-center">
+                            <button type="button" @click="scrollToBottom()"
+                                    class="tum-live-badge flex items-center space-x-2 text-xs uppercase font-semibold shadow text-white bg-blue-500 dark:bg-indigo-600">
+                                <i class="fas fa-arrow-down"></i>
+                                New messages
+                            </button>
+                        </section>
+                        <section x-cloak x-show="hasServerMessage()" class="flex justify-center">
+                            <div class="tum-live-badge flex items-center space-x-2 text-sm shadow text-white bg-rose-500 dark:bg-rose-800">
+                                <i class="fa-solid fa-robot"></i>
+                                <span x-text="serverMessage.msg"></span>
+                                <button type="button" @click="hideServerMessage()">
+                                    <i class="fa-solid fa-close"></i>
+                                </button>
+                            </div>
+                        </section>
+                    </article>
+                </article>
+
+                <article x-data="interaction.chatPromptContext({{$stream.ID}})"
+                         class="rounded-lg dark:border-gray-800 z-50"
+                         :class="(!reply.isNoReply() || users.hasSuggestions() || emojis.hasSuggestions()) && 'shadow-lg border'">
+
+                    <template x-if="!reply.isNoReply()">
+                        <article class="text-3 grid gap-2 px-3 pt-2 pb-4 text-sm">
+                            <div class="flex justify-between items-center">
+                                <div class="font-semibold">
+                                    <i class="fa-solid fa-reply mr-2"></i>
+                                    <span x-text="`Replying to @${reply.message.name}:`"></span>
+                                </div>
+                                <button type="button"
+                                        class="tum-live-icon-button p-2"
+                                        @click="cancelReply();">
+                                    <i class="fa-solid fa-xmark"></i>
+                                </button>
+                            </div>
+                            <div class="flex">
+                                <span x-show="reply.message.admin"
+                                      class="h-fit fa-video text-xs text-white bg-red-400 p-1 rounded fas mr-1"></span>
+                                <span class="text-2 font-semibold mr-2" x-text="`${reply.message.name}:`"
+                                      :style="'color:'+reply.message.color"></span>
+                                <span class="" x-html="reply.message.message"
+                                      x-init="$nextTick(() => renderMathInElement($el, global.getKatexOptions()))"></span>
+                            </div>
+                        </article>
+                    </template>
+
+                    <section x-cloak x-show="users.hasSuggestions()" id="chat-user-list" tabindex="-1"
+                             @keypress="(e) => keypressAlphanumeric(e)" @keyup.backspace="backspace()"
+                             @keyup.up="users.prev()" @keyup.down="users.next()"
+                             @keyup.enter="addAddressee(users.selected())"
+                             class="max-h-56 overflow-y-hidden w-full pt-1 pb-2 px-2 space-y-1 outline-none">
+                        <template x-for="(user, i) in users.suggestions">
+                            <button type="button" @click="addAddressee(user)"
+                                    :class="users.index === i ? 'bg-gray-100 dark:bg-gray-600' : ''"
+                                    class="text-xs text-3 flex w-full items-center justify-between p-2 rounded hover:cursor-pointer hover:bg-gray-100 hover:dark:bg-gray-600">
+                                <span class="font-semibold" x-text="user.name"></span>
+                                <span x-show="users.index === i">&#9166;</span>
+                            </button>
+                        </template>
+                    </section>
+                    <section x-cloak x-show="emojis.hasSuggestions()" id="chat-emoji-list" tabindex="-1"
+                             @keypress="(e) => keypressAlphanumeric(e)" @keyup.backspace="backspace()"
+                             @keyup.up="emojis.prev()" @keyup.down="emojis.next()"
+                             @keyup.enter="addEmoji(emojis.selected().emoji)"
+                             class="py-1 px-2 outline-none">
+                        <template x-for="(emoji, i) in emojis.suggestions">
+                            <button type="button" @click="addEmoji(emoji.emoji)"
+                                    :title="`:${emoji.short_names[0]}:`" x-text="emoji.emoji"
+                                    :class="emojis.index === i ? 'bg-gray-100 dark:bg-gray-600' : ''"
+                                    class="cursor-pointer mr-1 h-8 w-8 rounded text-xl hover:bg-gray-100 hover:dark:bg-gray-600">
+                            </button>
+                        </template>
+                    </section>
+                    <article class="flex flex-col space-y-2 px-5 border-t dark:border-gray-800 py-2 font-light">
+                        <label class="grow">
+                            <input id="chat-input" type="text" spellcheck="true" maxlength="200"
+                                   @keyup="keyup()"
+                                   @keyup.enter="send()"
+                                   @keyup.esc="cancelReply()"
+                                   :disabled="!isLoggedIn()"
+                                   x-model="message"
+                                   :placeholder="!isConnected() ? 'Reconnecting to chat...' : isLoggedIn() ? 'Send a message' : 'Log in to chat'"
+                                   class="tum-live-border border-b bg-transparent text-sm font-normal placeholder:text-sm focus:outline-none py-1 w-full"
+                                   autocomplete="off">
+                        </label>
+                        <section class="flex justify-between">
+                            <div class="relative">
+                                <button type="button" @click="showOptions.toggle()" class="text-sm">
+                                    <i class="fa-solid fa-gear"></i>
+                                </button>
+                                <article x-cloak x-show="showOptions.value"
+                                         class="tum-live-menu absolute w-56 bottom-full"
+                                         @click.outside="showOptions.toggle(false)">
+                                    <template x-if="!isPopOut()">
+                                        <button type="button" @click="openPopOut()" class="tum-live-menu-item">
+                                            <i class="fa-solid fa-arrow-up-right-from-square w-8 mr-2"></i>
+                                            Pop-out chat
+                                        </button>
+                                    </template>
+                                    {{if .IndexData.TUMLiveContext.Course.AnonymousChatEnabled}}
+                                        <section class="tum-live-menu-item">
+                                            <input type="checkbox" name="anonymous" id="anonymous" class="hidden"
+                                                   x-model="isAnonymous" :disabled="!isLoggedIn()">
+                                            <label for="anonymous" title="Don't show my name."
+                                                   class="flex hover:cursor-pointer">
+                                                <i class="fas fa-ghost flex items-center justify-center w-8 mr-2"></i>
+                                                Send anonymously
+                                            </label>
+                                        </section>
+                                    {{end}}
+                                </article>
+                            </div>
+                            <div class="text-sm">
+                                <div x-cloak x-show="!isConnected()">
+                                    <svg class="w-5 h-5 animate-spin text-sky-400 dark:text-indigo-400 fill-sky-600 dark:fill-indigo-600"
+                                         viewBox="0 0 100 101" fill="none" xmlns="http://www.w3.org/2000/svg">
+                                        <path d="M100 50.5908C100 78.2051 77.6142 100.591 50 100.591C22.3858 100.591 0 78.2051 0 50.5908C0 22.9766 22.3858 0.59082 50 0.59082C77.6142 0.59082 100 22.9766 100 50.5908ZM9.08144 50.5908C9.08144 73.1895 27.4013 91.5094 50 91.5094C72.5987 91.5094 90.9186 73.1895 90.9186 50.5908C90.9186 27.9921 72.5987 9.67226 50 9.67226C27.4013 9.67226 9.08144 27.9921 9.08144 50.5908Z"
+                                              fill="currentColor"/>
+                                        <path d="M93.9676 39.0409C96.393 38.4038 97.8624 35.9116 97.0079 33.5539C95.2932 28.8227 92.871 24.3692 89.8167 20.348C85.8452 15.1192 80.8826 10.7238 75.2124 7.41289C69.5422 4.10194 63.2754 1.94025 56.7698 1.05124C51.7666 0.367541 46.6976 0.446843 41.7345 1.27873C39.2613 1.69328 37.813 4.19778 38.4501 6.62326C39.0873 9.04874 41.5694 10.4717 44.0505 10.1071C47.8511 9.54855 51.7191 9.52689 55.5402 10.0491C60.8642 10.7766 65.9928 12.5457 70.6331 15.2552C75.2735 17.9648 79.3347 21.5619 82.5849 25.841C84.9175 28.9121 86.7997 32.2913 88.1811 35.8758C89.083 38.2158 91.5421 39.6781 93.9676 39.0409Z"
+                                              fill="currentFill"/>
+                                    </svg>
+                                </div>
+                                <button x-cloak x-show="isConnected()"
+                                        type="button" tabindex="-1" @click="send()"
+                                        class="tum-live-button tum-live-button-primary"
+                                        title="Send message"
+                                        :disabled="!isLoggedIn()">
+                                    Send
+                                    <i class="fa-solid fa-paper-plane ml-2"></i>
+                                </button>
+                            </div>
+                        </section>
+                    </article>
+                </article>
+            </article>
+        </template>
+        <template x-if="isPolls()">
+            <article x-data="interaction.pollContext({{$stream.ID}})" class="flex relative flex-col text-1 h-full">
+                <header class="tum-live-bg tum-live-border flex items-center justify-between sticky top-0 z-40 w-full px-3 max-h-12 h-12 border-b"
+                        style="min-height: 3rem;">
+                    <template x-if="isAdmin() && activePoll  && !showCreateUI.value">
+                        <button type="button" @click="showCreateUI.toggle();" tabindex="-1"
+                                class="tum-live-button tum-live-button-primary"
+                                title="New Poll">
+                            <span>New Poll</span>
+                        </button>
+                    </template>
+                    <button type="button"
+                            @click="showChat()"
+                            class="tum-live-button tum-live-button-tertiary ml-auto">Chat
+                    </button>
+                </header>
+                <template x-if="hasActivePoll()">
+                    <article
+                            class="tum-live-bg rounded-lg border-2 border-blue-500/50 dark:border-indigo-600/50 p-2 space-y-2 m-3">
+                        <div class="flex items-center text-lg border-b dark:border-gray-800 py-1 px-2">
+                            <span class="font-bold" x-text="activePoll.question"></span>
+                        </div>
+                        <template x-for="option in activePoll.options" :key="option.ID">
+                            <div>
+                                <template x-if="isAdmin()">
+                                    <div class="mb-3 pl-3 pr-3">
+                                        <div class="flex justify-between pr-2">
+                                            <span class="text-sm flex items-end" x-text="option.answer"></span>
+                                            <span class="text-xs flex items-end"
+                                                  x-text="option.votes + ' Votes'"></span>
+                                        </div>
+                                        <div :style="`width: ${activePoll.getOptionWidth(option)};`"
+                                             class="rounded-full h-4 bg-blue-500/50 dark:bg-indigo-600"></div>
+                                    </div>
+                                </template>
+                                <template x-if="!isAdmin()">
+                                    <button class="flex items-center px-2 pb-1"
+                                            @click="activePoll.selected = option.ID"
+                                            :disabled="activePoll.submitted !== 0">
+                                        <i class=""
+                                           :class="(option.ID === activePoll.selected || activePoll.submitted === option.ID) ? 'fas fa-check-circle' : 'far fa-circle'"></i>
+                                        <span x-text="option.answer" class="ml-2 text-sm"></span>
+                                    </button>
+                                </template>
+                            </div>
+                        </template>
+                        <div class="flex justify-end pt-2 text-xs">
+                            <template x-if="isAdmin()">
+                                <button class="tum-live-button tum-live-button-primary"
+                                        @click="closeActivePoll()"
+                                        title="Close poll">
+                                    Publish & Close
+                                </button>
+                            </template>
+                            <template x-if="!isAdmin()">
+                                <button class="tum-live-button tum-live-button-primary"
+                                        x-text="activePoll.submitted !== 0 ? 'Answer submitted' : 'Send Answer'"
+                                        @click="submitPollOptionVote(activePoll.selected)"
+                                        :disabled="activePoll.selected === null || activePoll.submitted !== 0"
+                                        title="Send Answer">
+                                </button>
+                            </template>
+                        </div>
+                    </article>
+                </template>
+                <article class="grid gap-3 overflow-y-scroll p-3">
+                    <template x-if="history.length > 0">
+                        <template x-for="(poll,_) in history" :key="poll.ID">
+                            <div class="rounded-lg border dark:border-gray-800">
+                                <div class="flex items-center border-b dark:border-gray-800 py-1 px-2">
+                                    <span class="text-sm font-bold my-auto" x-text="poll.question"></span>
+                                </div>
+                                <div class="pt-2">
+                                    <template x-for="option in poll.options" :key="option.ID">
+                                        <div class="mb-3 pl-3 pr-3">
+                                            <div class="flex justify-between pr-2">
+                                                <span class="text-sm flex items-end" x-text="option.answer"></span>
+                                                <span class="text-xs flex items-end"
+                                                      x-text="option.votes + ' Votes'"></span>
+                                            </div>
+                                            <div :style="`width: ${poll.getOptionWidth(option)};`"
+                                                 class="rounded-full h-4 bg-blue-500/50 dark:bg-indigo-600"></div>
+                                        </div>
+                                    </template>
+                                </div>
+                            </div>
+                        </template>
+                    </template>
+                </article>
+                <template x-if="showCreateUI.value">
+                    <article
+                            class="tum-live-bg tum-live-border static bottom-0 w-full px-2 pb-2 shadow-lg border rounded-lg">
+                        <header class="flex justify-end p-1">
+                            <button class="tum-live-icon-button text-xs p-2"
+                                    @click="cancelPoll()"
+                                    title="Cancel Poll"
+                                    tabindex="-1"
+                                    type="button">
+                                <i class="fa-solid fa-xmark"></i>
+                            </button>
+                        </header>
+                        <section
+                                class="bg-gray-200 dark:bg-gray-600 rounded-lg flex border-2 border-transparent w-full my-auto lg:mr-2">
+                            <label class="w-full">
+                    <textarea
+                            id="pollQuestion" spellcheck="true"
+                            class="bg-transparent w-full h-40 resize-none border-none py-2 px-4 text-sm font-normal placeholder:text-sm focus:outline-none"
+                            maxlength="500"
+                            x-model="newPoll.question"
+                            autocomplete="off"
+                            placeholder="Write a Poll-Question ..."></textarea>
+                            </label>
+                        </section>
+                        <section>
+                            <template x-for="(option, index) in newPoll.options" :key="index">
+                                <div class="flex-1 bg-gray-200 dark:bg-gray-600 rounded-lg flex border-2 border-transparent w-full lg:mr-2 my-2">
+                                    <label class="w-full">
+                                        <input :id="$id('poll-answer')"
+                                               placeholder="Write a Poll-Answer ..." maxlength="240"
+                                               spellcheck="true"
+                                               x-model="option.answer"
+                                               class="bg-transparent w-full py-2 px-4 border-0 text-sm font-normal placeholder:text-sm focus:outline-none">
+                                    </label>
+
+                                    <button class="tum-live-icon-button text-xs px-3"
+                                            :disabled="newPoll.onlyOneOption()"
+                                            @click="newPoll.removeOption(index)"
+                                            tabindex="-1"
+                                            type="button"
+                                            title="Remove Poll Option">
+                                        <i class="fas fa-trash"></i>
+                                    </button>
+                                </div>
+                            </template>
+                        </section>
+                        <div class="flex justify-between space-x-3">
+                            <button type="button" @click="startPoll()" tabindex="-1"
+                                    class="tum-live-button tum-live-button-primary grow"
+                                    title="Start Poll"
+                                    :disabled="newPoll.isValid()">
+                                <span class="font-semibold text-xs">Start Poll</span>
+                            </button>
+                            <button type="button" tabindex="-1"
+                                    class="tum-live-button tum-live-button-secondary"
+                                    @click="newPoll.addEmptyOption()"
+                                    title="Add Poll Answer">
+                                <i class="fas fa-plus m-auto"></i>
+                                Add option
+                            </button>
+                        </div>
+                    </article>
+                </template>
+            </article>
+        </template>
+{{end}}
\ No newline at end of file
diff --git a/web/template/partial/stream/chat/chat.gohtml b/web/template/partial/stream/chat/chat.gohtml
deleted file mode 100644
index e8dd7e9d4..000000000
--- a/web/template/partial/stream/chat/chat.gohtml
+++ /dev/null
@@ -1,400 +0,0 @@
-{{define "chat"}}
-    {{- /*gotype: github.com/joschahenningsen/TUM-Live/web.ChatData*/ -}}
-    {{$stream := .IndexData.TUMLiveContext.Stream}}
-    {{$startTime := $stream.ParsableStartTime}}
-    {{$liveNowTimestamp := $stream.ParsableLiveNowTimestamp}}
-    {{$liveNow := $stream.LiveNow}}
-    {{$isComingUp := $stream.IsComingUp}}
-    {{$userName := ""}}
-    {{$userId := 0}}
-    {{if .IndexData.TUMLiveContext.User}}
-        {{$userName = .IndexData.TUMLiveContext.User.Name}}
-        {{$userId = .IndexData.TUMLiveContext.User.ID}}
-    {{end}}
-    <div x-cloak
-         x-data="watch.initChat({{.IsAdminOfCourse}}, {{$stream.ID}}, '{{$startTime}}', '{{$liveNowTimestamp}}', {{$userId}}, '{{$userName}}', {{not (or $isComingUp $liveNow .IsPopUp)}});"
-         x-init="await Promise.all([c.loadMessages(), c.poll.load(), c.loadPollHistory()]); $nextTick(() => { watch.scrollToBottom(); window.dispatchEvent(new CustomEvent('chatinitialized')); });"
-         x-on:chatmessage.window="e => c.onMessage(e);"
-         x-on:chatreply.window="e => c.onReply(e);"
-         x-on:chatdelete.window="e => c.onDelete(e);"
-         x-on:chatresolve.window="e => c.onResolve(e);"
-         x-on:chatreactions.window="e => c.onReaction(e);"
-         x-on:chatapprove.window="e => { c.patchMessage(e.detail.chat); $nextTick(() => { watch.scrollToBottom() }); }"
-         x-on:chatretract.window="e => { c.patchMessage(e.detail.chat); $nextTick(() => { watch.scrollToBottom() }); }"
-         x-on:chatnewpoll.window="e => c.onNewPoll(e);"
-         x-on:polloptionvotesupdate.window="e => c.onPollOptionVotesUpdate(e);"
-         x-on:polloptionresult.window="e => c.onPollOptionResult(e);"
-         x-on:wsrealtimeconnectionchange.window="e => c.disconnected = !e.detail.status;"
-         @chatpopupmessageupdate.window="e => initPromise.next(() => c.onPopUpMessagesUpdated(e));"
-         @chatupdategrayedout.window="e => c.onGrayedOutUpdated(e);"
-         @chatupdatefocus.window="e => c.onFocusUpdated(e);"
-         @disconnected.window="c.disconnected = true;"
-         @connected.window="c.disconnected = false;"
-         @reorder.window="c.sortMessages()"
-         @keyup.escape="c.current.cancelReply()"
-         id="chatWrapper"
-         class="flex relative flex-col text-1 h-full">
-        <!-- Chat header -->
-        <div class="flex items-center justify-between sticky top-0 z-40 w-full px-3 max-h-12 h-12 rounded-t-lg bg-white dark:bg-secondary border-b dark:border-gray-800"
-             style="min-height: 3rem;"> <!-- since there is no min-h-12 class -->
-            <div class="flex items-center">
-                {{if not .IsPopUp}}
-                    <button x-show="!{{.IsPopUp}}"
-                            class="flex bg-transparent border-0 font-semibold h-8 w-8 rounded-full mr-2 hover:dark:bg-gray-600 hover:bg-gray-100"
-                            @click="c.openChatPopUp('{{.IndexData.TUMLiveContext.Course.Slug}}', {{.IndexData.TUMLiveContext.Stream.Model.ID}})"
-                            title="Popout Chat"
-                            type="button">
-                        <i class="fas fa-external-link-alt text-3 m-auto"></i>
-                    </button>
-                {{end}}
-                <template
-                        x-if="c.admin && c.showPolls() && !c.poll.activePoll  && !c.disconnected && !c.poll.showCreateUI">
-                    <button x-cloak
-                            @click="c.poll.showCreateUI = !c.poll.showCreateUI; c.users.clear()"
-                            class="text-white text-xs uppercase font-semibold rounded-full px-2 py-1 bg-blue-500 dark:bg-indigo-600
-                                hover:bg-blue-600 hover:dark:bg-indigo-700"
-                            title="Create Poll"
-                            tabindex="-1"
-                            type="button">
-                        <span>New Poll</span>
-                    </button>
-                </template>
-                <template x-if="c.showMessages()">
-                    <button x-data="{oldChatReplayActive: c.chatReplayActive}"
-                            x-init="
-                        $watch('c.chatReplayActive', (value) => {
-                            if (value) {
-                                c.orderByLikes = false;
-                            }});
-
-                        $watch('c.orderByLikes', (value) => {
-                            watch.setOrder(value);
-                            window.dispatchEvent(new CustomEvent('reorder'));
-                            if ({{$liveNow}}) {
-                                value ? watch.scrollToTop() : watch.scrollToBottom();
-                                return;
-                            }
-                            if (value) {
-                                oldChatReplayActive = c.chatReplayActive;
-                                c.chatReplayActive = false;
-                                watch.scrollToTop();
-                            }
-                            else if (oldChatReplayActive) {
-                                c.chatReplayActive = true;
-                            }
-                        });"
-                            @click="c.orderByLikes=!c.orderByLikes; watch.setOrder(c.orderByLikes); window.dispatchEvent(new CustomEvent('reorder'));; c.orderByLikes? watch.scrollToTop(): watch.scrollToBottom()"
-                            class="text-3 text-sm font-semibold rounded-full px-2 py-1 hover:bg-gray-100 hover:dark:bg-gray-600"
-                            title="Change Order">
-                        <span x-text="c.orderByLikes? 'Popular First': 'Live Chat'"></span>
-                    </button>
-                </template>
-            </div>
-            <div class="flex items-center my-auto space-x-2 ml-auto">
-                <button class="flex border-0 h-8 w-8 rounded-full"
-                        :class="c.chatReplayActive ? 'bg-gray-100 dark:bg-gray-600 hover:bg-transparent' : 'bg-transparent hover:dark:bg-gray-600 hover:bg-gray-100'"
-                        x-show="{{not (or $isComingUp $liveNow .IsPopUp)}}"
-                        title="(De-)Activate Chat Replay"
-                        @click="c.chatReplayActive = !c.chatReplayActive;"
-                        x-init="
-                            $watch('c.chatReplayActive', (value) => {
-                                value ? c.activateChatReplay() : c.deactivateChatReplay();
-                            })">
-                    <i class="fa-solid fa-clock-rotate-left m-auto text-sm"></i>
-                </button>
-
-                <!-- Toggle Chat and Polls -->
-                <button x-cloak x-show="c.showMessages()" type="button" @click="c.showPolls(true);"
-                        class="relative text-3 text-sm font-semibold rounded-full px-2 py-1 hover:bg-gray-100 hover:dark:bg-gray-600"
-                        title="Show Polls">
-                    <template x-if="c.poll.activePoll && !c.admin && c.poll.activePoll.submitted === 0">
-                        <span class="absolute flex h-3 w-3 top-0 -right-1">
-                          <span class="animate-ping absolute inline-flex h-full w-full rounded-full bg-blue-500/50 dark:bg-indigo-600/50"></span>
-                          <span class="relative inline-flex rounded-full h-3 w-3 bg-blue-500 dark:bg-indigo-600"></span>
-                        </span>
-                    </template>
-                    <span class="z-50">Polls</span>
-                </button>
-                <button x-cloak x-show="c.showPolls()" type="button" @click="c.showMessages(true);"
-                        class="text-3 text-sm font-semibold rounded-full px-2 py-1 hover:bg-gray-100 hover:dark:bg-gray-600"
-                        title="Show Chat">
-                    <span>Chat</span>
-                </button>
-            </div>
-        </div>
-
-        <!-- Polls -->
-        <div x-cloak x-show="c.showPolls()" id="pollBox"
-             class="relative h-full w-full overflow-y-scroll overflow-x-hidden p-2 z-30">
-            <div class="grid gap-y-8 content-start">
-                <template x-if="c.poll.activePoll">
-                    <div class="rounded-lg border-2 border-blue-500/50 dark:border-indigo-600/50 p-2 space-y-2">
-                        <div class="flex items-center text-lg border-b dark:border-gray-800 py-1 px-2">
-                            <span class="font-bold" x-text="c.poll.activePoll.question"></span>
-                        </div>
-                        <div>
-                            <template x-for="option in c.poll.activePoll.pollOptions" :key="option.ID">
-                                <div>
-                                    <template x-if="c.admin">
-                                        <div class="mb-3 pl-3 pr-3">
-                                            <div class="flex justify-between pr-2">
-                                                <span class="text-sm flex items-end" x-text="option.answer"></span>
-                                                <span class="text-xs flex items-end"
-                                                      x-text="option.votes + ' Votes'"></span>
-                                            </div>
-                                            <div :style="`width: ${watch.getPollOptionWidth(c.poll.activePoll.pollOptions, option)};`"
-                                                 class="rounded-full h-4 bg-blue-500/50 dark:bg-indigo-600"></div>
-                                        </div>
-                                    </template>
-                                    <template x-if="!c.admin">
-                                        <button class="flex items-center px-2 pb-1"
-                                                @click="c.poll.activePoll.selected = option.ID"
-                                                :disabled="c.poll.activePoll.submitted !== 0">
-                                            <i class=""
-                                               :class="(option.ID === c.poll.activePoll.selected || c.poll.activePoll.submitted === option.ID) ? 'fas fa-check-circle' : 'far fa-circle'"></i>
-                                            <span x-text="option.answer" class="ml-2 text-sm"></span>
-                                        </button>
-                                    </template>
-                                </div>
-                            </template>
-                        </div>
-                        <template x-if="c.admin">
-                            <div class="flex justify-end pt-2">
-                                <button class="bg-blue-500 hover:bg-blue-600 dark:bg-indigo-600 dark:hover:bg-indigo-700
-                                    disabled:bg-gray-400 dark:disabled:bg-gray-400 rounded-full
-                                    focus:outline-none px-2 py-1 text-white font-semibold uppercase text-xs"
-                                        x-text="!c.poll.activePoll.active ? 'Poll closed' : 'Publish & Close'"
-                                        @click="c.poll.activePoll = null; watch.closeActivePoll();"
-                                        :disabled="!c.poll.activePoll.active"
-                                        title="Close poll">
-                                </button>
-                            </div>
-                        </template>
-                        <template x-if="!c.admin">
-                            <div class="flex justify-end pt-2">
-                                <button class="bg-blue-500 hover:bg-blue-600 dark:bg-indigo-600 dark:hover:bg-indigo-700
-                                disabled:bg-gray-400 dark:disabled:bg-gray-400 rounded-full
-                                focus:outline-none px-2 py-1 text-white font-semibold uppercase text-xs"
-                                        x-text="c.poll.activePoll.submitted !== 0 ? 'Answer submitted' : 'Send Answer'"
-                                        @click="c.poll.activePoll.submitted = c.poll.activePoll.selected; watch.submitPollOptionVote(c.poll.activePoll.selected); c.poll.activePoll.selected = null;"
-                                        :disabled="c.poll.activePoll.selected === null || c.poll.activePoll.submitted !== 0"
-                                        title="Send Answer">
-                                </button>
-                            </div>
-                        </template>
-                    </div>
-                </template>
-                <template x-if="c.pollHistory.length > 0">
-                    <template x-for="(poll,_) in c.pollHistory" :key="poll.ID">
-                        <div class="rounded-lg border dark:border-gray-800">
-                            <div class="flex items-center border-b dark:border-gray-800 py-1 px-2">
-                                <span class="text-sm font-bold my-auto" x-text="poll.question"></span>
-                            </div>
-                            <div class="pt-2">
-                                <template x-for="option in poll.options" :key="option.ID">
-                                    <div class="mb-3 pl-3 pr-3">
-                                        <div class="flex justify-between pr-2">
-                                            <span class="text-sm flex items-end" x-text="option.answer"></span>
-                                            <span class="text-xs flex items-end"
-                                                  x-text="option.votes + ' Votes'"></span>
-                                        </div>
-                                        <div :style="`width: ${watch.getPollOptionWidth(poll.options, option)};`"
-                                             class="rounded-full h-4 bg-blue-500/50 dark:bg-indigo-600"></div>
-                                    </div>
-                                </template>
-                            </div>
-                        </div>
-                    </template>
-                </template>
-            </div>
-        </div>
-
-        <!-- Messages -->
-        <div x-cloak x-show="c.showMessages()" id="chatBox"
-             class="grid gap-y-8 content-start h-full w-full overflow-y-scroll overflow-x-hidden px-4 pt-2 pb-5 z-30">
-            {{template "messageTemplate" .}}
-        </div>
-
-        <!-- Messages -->
-        <div>
-            {{template "chatprompts"}}
-            <form id="chatForm"
-                  class="sticky w-full bottom-0 inset-x-0"
-                  x-on:sendmessage.window="c.current.send()"
-                  @submit.prevent="c.onSubmit()">
-                <div class="w-full">
-                    <div :class="(c.users.isValid() || c.poll.showCreateUI || c.emojis.isValid() || c.current.showReplyMenu()) && 'border-t dark:border-gray-800 rounded-lg shadow-lg'">
-                        <!-- reply -->
-                        <template x-if="c.current.showReplyMenu() && !c.poll.showCreateUI">
-                            <div x-data="{replyMsg: c.findReplyMessage(c.current.reply)}"
-                                 x-init="$watch('c.current.reply', upd => replyMsg = c.findReplyMessage(upd))"
-                                 class="text-3 grid gap-2 px-3 pt-2 pb-4 text-sm dark:border-gray-800"
-                                 :class="{'border-b' : (c.users.isValid() || c.emojis.isValid())}">
-                                <div class="flex justify-between items-center">
-                                    <div class="font-semibold">
-                                        <i class="fa-solid fa-reply mr-2"></i>
-                                        <span x-text="`Replying to @${replyMsg.name}:`"></span>
-                                    </div>
-                                    <button type="button"
-                                            class="text-lg flex bg-transparent border-0 font-semibold rounded-full"
-                                            @click="c.current.cancelReply()">
-                                        <i class="fa-solid fa-xmark"></i>
-                                    </button>
-                                </div>
-                                <div class="flex">
-                                        <span x-show="replyMsg.admin"
-                                              class="h-fit fa-video text-xs text-white bg-red-400 p-1 rounded fas mr-1"></span>
-                                    <span class="text-2 font-semibold mr-2" x-text="`${replyMsg.name}:`"
-                                          :style="'color:'+replyMsg.color"></span>
-                                    <span class="" x-html="replyMsg.message"
-                                          x-init="$nextTick(() => renderMathInElement($el, global.getKatexOptions()))">
-                                        </span>
-                                </div>
-                            </div>
-                        </template>
-
-                        <!-- create poll dialog -->
-                        <template x-if="c.poll.showCreateUI">
-                            <div class="px-2 pb-2">
-                                <div class="flex justify-end p-1">
-                                    <button class="flex bg-transparent border-0 font-semibold py-1 px-2 rounded hover:dark:bg-gray-600 hover:bg-gray-100 my-auto"
-                                            @click="c.poll.showCreateUI = !c.poll.showCreateUI; c.poll.reset();"
-                                            title="Cancel Poll"
-                                            tabindex="-1"
-                                            type="button">
-                                        <i class="fa-solid fa-xmark text-3 m-auto"></i>
-                                    </button>
-                                </div>
-                                <div class="bg-gray-200 dark:bg-gray-600 rounded-lg flex border-2 border-transparent w-full my-auto lg:mr-2">
-                                    <label for="pollQuestion" class="hidden"></label>
-                                    <textarea
-                                            id="pollQuestion" spellcheck="true"
-                                            class="bg-transparent w-full h-40 resize-none border-none py-2 px-4 text-sm font-normal placeholder:text-sm focus:outline-none"
-                                            maxlength="500"
-                                            x-model="c.poll.question"
-                                            autocomplete="off"
-                                            placeholder="Write a Poll-Question ..."
-                                    ></textarea>
-                                </div>
-                                <div>
-                                    <template x-for="(pollOption, index) in c.poll.options" :key="index">
-                                        <div class="flex-1 bg-gray-200 dark:bg-gray-600 rounded-lg flex border-2 border-transparent w-full lg:mr-2 my-2">
-                                            <input :id="$id('poll-answer')"
-                                                   placeholder="Write a Poll-Answer ..." maxlength="240"
-                                                   spellcheck="true"
-                                                   x-model="pollOption.answer"
-                                                   class="bg-transparent w-full py-2 px-4 border-0 text-sm font-normal placeholder:text-sm focus:outline-none">
-
-                                            <button class="flex bg-transparent border-0 font-semibold h-8 w-8 rounded text-4 hover:text-1 disabled:opacity-20"
-                                                    :disabled="c.poll.options.length === 1"
-                                                    @click="c.poll.removeOption(pollOption);"
-                                                    tabindex="-1"
-                                                    type="button"
-                                                    title="Remove Poll Option">
-                                                <i class="fas fa-trash text-3 m-auto text-xs"></i>
-                                            </button>
-                                        </div>
-                                    </template>
-                                </div>
-                                <div class="flex">
-                                    <button tabindex="-1"
-                                            class="w-4/5 bg-blue-500 hover:bg-blue-600 dark:bg-indigo-600 dark:hover:bg-indigo-700
-                                                   disabled:bg-gray-400 dark:disabled:bg-gray-400
-                                                   rounded border-0 focus:outline-none py-1 text-white text-sm"
-                                            title="Start Poll"
-                                            type="button"
-                                            @click="c.poll.showCreateUI = !c.poll.showCreateUI; c.poll.start();"
-                                            :disabled="c.poll.question.length === 0 || c.poll.options.some(({ answer }) => answer.length === 0)">
-                                        <span class="font-semibold text-xs">Start Poll</span>
-                                    </button>
-                                    <button tabindex="-1"
-                                            class="w-1/5 bg-blue-500 hover:bg-blue-600 dark:bg-indigo-600 dark:hover:bg-indigo-700
-                                        rounded border-0 focus:outline-none px-4 text-white text-sm ml-2 py-1"
-                                            @click="c.poll.addEmptyOption()"
-                                            title="Add Poll Answer"
-                                            type="button">
-                                        <i class="fas fa-plus m-auto"></i>
-                                    </button>
-                                </div>
-                            </div>
-                        </template>
-
-                        <!-- emoji prompt -->
-                        {{template "emojipromt"}}
-
-                        <!-- @-userlist -->
-                        <template x-if="c.users.isValid() && c.users.subset.length === 0">
-                            <p class="text-center pb-1 pt-2 font-semibold text-xs text-3">No users found.</p>
-                        </template>
-                        <div id="userList" x-show="c.users.isValid()"
-                             tabindex="0"
-                             class="max-h-56 overflow-y-hidden w-full py-1 px-2 space-y-1 outline-none">
-                            <template x-for="(user, i) in c.users.subset">
-                                <div @click="c.current.addAddressee(user); c.users.clear()"
-                                     @mouseover="c.users.currIndex = i;"
-                                     class="flex justify-between p-2 rounded hover:cursor-pointer"
-                                     :class="c.users.currIndex === i && 'bg-gray-100 dark:bg-gray-600'">
-                                    <span class="font-semibold text-3 text-xs my-auto" x-text="user.name"></span>
-                                    <span x-show="c.users.currIndex === i"
-                                          class="px-1 text-xs rounded text-3 bg-gray-200 dark:bg-gray-500">&#9166;</span>
-                                </div>
-                            </template>
-                        </div>
-
-                        <!-- input -->
-                        <div x-show="!c.poll.showCreateUI"
-                             class="relative flex my-auto px-3 border-t dark:border-gray-800 py-2">
-                            {{if .IndexData.TUMLiveContext.Course.AnonymousChatEnabled}}
-                                <input type="checkbox" name="anonymous" id="anonymous" class="hidden"
-                                       x-model="c.current.anonymous" :disabled="c.disconnected">
-                                <label for="anonymous" class="flex items-center cursor-pointer text-4 hover:text-3"
-                                       :class="c.current.anonymous && 'text-blue-500'"
-                                       title="Don't show my name.">
-                                    <i class="fas fa-ghost"></i>
-                                </label>
-                            {{end}}
-                            <label for="chatInput" class="hidden">Chat input</label>
-                            <input id="chatInput" type="text" spellcheck="true"
-                                   maxlength="200"
-                                   x-ref="chatInput"
-                                   x-model="c.current.message"
-                                   x-on:setmessage.window="e=>c.current.message=e.detail"
-                                   @keyup="e => { c.current.parse(); c.onInputKeyUp(e); }"
-                                   class="py-2 px-4 border-0 bg-transparent text-sm font-normal placeholder:text-sm focus:outline-none w-full"
-                                   {{if not (.IndexData.TUMLiveContext.User)}}disabled
-                                   placeholder="Log in to chat" {{else}}
-                                   :placeholder="c.getInputPlaceHolder()"
-                                   :disabled="c.disconnected"
-                                   {{end}}autocomplete="off">
-                            <div class="absolute right-3 top-0 bottom-0 flex">
-                                <div x-show="c.disconnected"
-                                     class="m-auto">
-                                    <svg class="w-5 h-5 animate-spin text-sky-400 dark:text-indigo-400 fill-sky-600 dark:fill-indigo-600"
-                                         viewBox="0 0 100 101" fill="none" xmlns="http://www.w3.org/2000/svg">
-                                        <path d="M100 50.5908C100 78.2051 77.6142 100.591 50 100.591C22.3858 100.591 0 78.2051 0 50.5908C0 22.9766 22.3858 0.59082 50 0.59082C77.6142 0.59082 100 22.9766 100 50.5908ZM9.08144 50.5908C9.08144 73.1895 27.4013 91.5094 50 91.5094C72.5987 91.5094 90.9186 73.1895 90.9186 50.5908C90.9186 27.9921 72.5987 9.67226 50 9.67226C27.4013 9.67226 9.08144 27.9921 9.08144 50.5908Z"
-                                              fill="currentColor"/>
-                                        <path d="M93.9676 39.0409C96.393 38.4038 97.8624 35.9116 97.0079 33.5539C95.2932 28.8227 92.871 24.3692 89.8167 20.348C85.8452 15.1192 80.8826 10.7238 75.2124 7.41289C69.5422 4.10194 63.2754 1.94025 56.7698 1.05124C51.7666 0.367541 46.6976 0.446843 41.7345 1.27873C39.2613 1.69328 37.813 4.19778 38.4501 6.62326C39.0873 9.04874 41.5694 10.4717 44.0505 10.1071C47.8511 9.54855 51.7191 9.52689 55.5402 10.0491C60.8642 10.7766 65.9928 12.5457 70.6331 15.2552C75.2735 17.9648 79.3347 21.5619 82.5849 25.841C84.9175 28.9121 86.7997 32.2913 88.1811 35.8758C89.083 38.2158 91.5421 39.6781 93.9676 39.0409Z"
-                                              fill="currentFill"/>
-                                    </svg>
-                                </div>
-                            </div>
-                            <button tabindex="-1"
-                                    class="cursor-pointer"
-                                    title="Send message"
-                                    type="submit"
-                                    x-show="!c.disconnected"
-                                    {{if not (.IndexData.TUMLiveContext.User)}} disabled {{end}}
-                                    :disabled="c.current.isEmpty() || c.disconnected">
-                                <svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" fill=""
-                                     class="bi bi-send-fill rotate-45 fill-blue-500 hover:fill-blue-600 dark:fill-indigo-600 hover:dark:fill-indigo-700"
-                                     viewBox="0 0 16 16">
-                                    <path d="M15.964.686a.5.5 0 0 0-.65-.65L.767 5.855H.766l-.452.18a.5.5 0 0 0-.082.887l.41.26.001.002 4.995 3.178 3.178 4.995.002.002.26.41a.5.5 0 0 0 .886-.083l6-15Zm-1.833 1.89L6.637 10.07l-.215-.338a.5.5 0 0 0-.154-.154l-.338-.215 7.494-7.494 1.178-.471-.47 1.178Z"/>
-                                </svg>
-                            </button>
-                        </div>
-                    </div>
-                </div>
-            </form>
-        </div>
-    </div>
-{{end}}
diff --git a/web/template/partial/stream/chat/chat_message.gohtml b/web/template/partial/stream/chat/chat_message.gohtml
deleted file mode 100644
index dfbae7023..000000000
--- a/web/template/partial/stream/chat/chat_message.gohtml
+++ /dev/null
@@ -1,149 +0,0 @@
-{{define "messageTemplate"}}
-    {{- /*gotype: github.com/joschahenningsen/TUM-Live/web.ChatData*/ -}}
-    {{$moderatedChat := .IndexData.TUMLiveContext.Course.ModeratedChatEnabled}}
-    <template x-for="(m, index) in c.messages" :key="m.ID + 'v' + m.renderVersion">
-        <div x-ref="message" class="grid gap-y-1 text-4 text-sm $m.ID message"
-             x-data="{ showReplies: false, emojiPicker: c.initEmojiPicker(m.ID) }"
-             x-show="!m.deleted"
-             :class="{'opacity-60' : m.isGrayedOut}"
-             x-init="$watch('c.focusedMessageId', () => {if (c.isMessageToBeFocused(index)){watch.scrollToElement($refs.message)}});">
-            <!-- name and message -->
-            <div class="text-xs">
-                <span x-show="m.admin" class="fa-video text-white bg-red-400 p-1 rounded fas"></span>
-                <span class="text-2 font-semibold" x-text="m.name" :style="'color:'+m.color"></span>
-                <span x-show="!m.visible && !c.admin" class="text-5 font-light">
-                    This message is currently only visible to you.
-                </span>
-                <span x-show="c.admin && !m.visible" class="text-5 font-light">
-                    This message is currently only visible to admins.
-                </span>
-            </div>
-
-            <div class="relative group p-2 rounded hover:bg-gray-100 dark:hover:bg-gray-600">
-                <div class="flex justify-between">
-                    <span class="chatMsg w-5/6 overflow-wrap-anywhere my-auto" x-html="m.message"
-                          x-init="$nextTick(() => renderMathInElement($el, global.getKatexOptions()))">
-                    </span>
-                </div>
-
-                <!-- message-date -->
-                <span class="absolute right-2 bottom-2 hidden lg:group-hover:inline text-xs text-5 font-light"
-                      x-text="watch.messageDateToString(m.CreatedAt)"></span>
-            </div>
-
-            <!-- reactions -->
-            <div class="flex justify-between items-center">
-                <div class="flex items-center relative flex-wrap">
-                    <template x-for="(reactionGroup, i) in m.aggregatedReactions">
-                        <button type="button"
-                                :title="reactionGroup.namesPretty" {{/* e.g. ':eyes:' */}}
-                                @click="watch.reactToMessage(m.ID, reactionGroup.emojiName)" {{/* notify emoji click */}}
-                                :class="reactionGroup.hasReacted ? 'border-blue-500/25 bg-blue-100/25 dark:border-indigo-600 dark:bg-indigo-900/25' : 'border-gray-500'"
-                                class="cursor-pointer m-1 px-2 h-6 border-[1px] border-gray-500 rounded-full border-solid text-xs flex justify-start items-center">
-                            <span x-text="reactionGroup.emoji"></span>
-                            <span x-text="reactionGroup.reactions.length" class="ml-2"></span>
-                        </button>
-                    </template>
-                </div>
-            </div>
-
-            <!-- like count & open reply button -->
-            <div class="flex justify-between items-center">
-                <div class="flex space-x-2 align-middle items-center">
-                    <div class="relative"
-                         @emojipickeronselect.window="e => { if (emojiPicker.eventOwner(e)) { watch.reactToMessage(m.ID, e.detail.emoji); emojiPicker.close(); } }"
-                    >
-                        <button type="button" title="React"
-                                @click="emojiPicker.open()"
-                                class="flex px-2 h-8 rounded-full text-5 hover:bg-gray-100 dark:hover:bg-gray-600">
-                            <i class="far fa-face-smile m-auto"></i>
-                        </button>
-                        {{template "emojipicker"}}
-                    </div>
-                    <template x-if="m.resolved">
-                        <i class="fa-solid fa-check-double text-success"></i>
-                    </template>
-                    <template x-if="m.replies.length > 0">
-                        <button
-                                class="text-5 uppercase text-xs hover:bg-gray-100 dark:hover:bg-gray-600 px-2 h-8 rounded-full"
-                                @click="showReplies=!showReplies">
-                            <span>replies</span>
-                            <span x-text="`(${m.replies.length})`"></span>
-                            <i class="fa-solid ml-1" :class="showReplies ? 'fa-chevron-up' : 'fa-chevron-down'"></i>
-                        </button>
-                    </template>
-                    <button @click="c.current.setReply(m); $refs.chatInput.focus()"
-                            title="Reply"
-                            x-show="c.current.showReplyButton(m.ID)">
-                        <span class="font-semibold text-xs text-4">Reply</span>
-                    </button>
-                </div>
-                <template x-if="c.admin">
-                    <div x-data="{showAdminTools: false}" class="relative">
-                        <button type="button" title="Admin tools"
-                                @click="showAdminTools=true;"
-                                class="text-amber-400 uppercase text-sm hover:bg-gray-100 dark:hover:bg-gray-600 w-8 h-8 rounded-full">
-                            <i class="fa-solid fa-bolt"></i>
-                        </button>
-                        <div x-cloak x-show="showAdminTools"
-                             @click.outside="showAdminTools = false;"
-                             class="absolute right-0 bottom-full py-2 z-[60] w-32 bg-white dark:bg-secondary-light
-                                border dark:border-gray-600 shadow rounded-lg">
-                            <button @click="watch.deleteMessage(m.ID)"
-                                    title="Delete Message"
-                                    class="flex items-center w-full px-2 py-1 hover:bg-gray-100 dark:hover:bg-gray-600">
-                                <i class="fas fa-ban text-danger mr-2"></i>
-                                <span class="text-4 font-light">Delete</span>
-                            </button>
-                            {{if $moderatedChat}}
-                                <button x-cloak x-show="!m.visible"
-                                        @click="watch.approveMessage(m.ID)"
-                                        title="Approve Message"
-                                        class="flex items-center w-full px-2 py-1 hover:bg-gray-100 dark:hover:bg-gray-600">
-                                    <i class="fa-solid fa-spell-check mr-2"></i>
-                                    <span class="text-4 font-light">Approve</span>
-                                </button>
-                                <button x-cloak x-show="m.visible && !m.admin"
-                                        @click="watch.retractMessage(m.ID)"
-                                        title="Retract Message"
-                                        class="flex items-center w-full px-2 py-1 hover:bg-gray-100 dark:hover:bg-gray-600">
-                                    <i class="fa-solid fa-rotate-left mr-2"></i>
-                                    <span class="text-4 font-light">Retract</span>
-                                </button>
-                            {{end}}
-                            <template x-if="!m.resolved">
-                                <button @click="watch.resolveMessage(m.ID)"
-                                        title="Resolve Message"
-                                        class="flex items-center w-full px-2 py-1 hover:bg-gray-100 dark:hover:bg-gray-600">
-                                    <i class="fas fa-check text-success mr-2"></i>
-                                    <span class="text-4 font-light">Resolve</span>
-                                </button>
-                            </template>
-                        </div>
-                    </div>
-                </template>
-            </div>
-
-            <!-- replies -->
-            <div x-cloak x-show="showReplies"
-                 class="grid gap-y-3 py-1 pl-2 mt-2 ml-4 border-l-2 dark:border-secondary-light">
-                <template x-for="reply in m.replies">
-                    <div class="grid gap-y-1">
-                        <div>
-                            <span x-show="reply.admin"
-                                  class="text-white bg-red-400 p-1 text-xs rounded fas fa-video"></span>
-                            <span class="text-2 font-semibold" x-text="reply.name" :style="'color:'+reply.color"></span>
-                        </div>
-                        <div class="group p-2 rounded hover:bg-gray-100 dark:hover:bg-gray-700">
-                            <div class="flex justify-between">
-                                <span class="w-5/6 my-auto" x-html="reply.message"></span>
-                                <span class="hidden group-hover:inline text-xs text-5 font-light mt-auto"
-                                      x-text="watch.messageDateToString(reply.CreatedAt)"></span>
-                            </div>
-                        </div>
-                    </div>
-                </template>
-            </div>
-        </div>
-    </template>
-{{end}}
diff --git a/web/template/partial/stream/chat/chatprompts.gohtml b/web/template/partial/stream/chat/chatprompts.gohtml
deleted file mode 100644
index 8efa5eb50..000000000
--- a/web/template/partial/stream/chat/chatprompts.gohtml
+++ /dev/null
@@ -1,13 +0,0 @@
-{{define "chatprompts"}}
-    <div x-cloak
-         x-data="{showNewMsgIndicator:false}"
-         x-on:messageindicator.window="e => {showNewMsgIndicator = e.detail.show}" {{/* show "new message" indicator */}}
-         class="relative -top-10 h-0 w-full text-center z-50">
-        <button @click="watch.scrollToLatestMessage()"
-              x-show="showNewMsgIndicator"
-              class="text-xs bg-blue-500 border-blue-600 rounded px-2 py-1 text-white shadow hover:bg-blue-600 dark:bg-indigo-600 dark:border-indigo-700 hover:dark:bg-indigo-700">
-              <i class="fas fa-arrow-down mr-2"></i>
-            <span class = "uppercase font-semibold">New messages</span>
-        </button>
-    </div>
-{{end}}
\ No newline at end of file
diff --git a/web/template/partial/stream/chat/emojipicker.gohtml b/web/template/partial/stream/chat/emojipicker.gohtml
deleted file mode 100644
index 333156dc3..000000000
--- a/web/template/partial/stream/chat/emojipicker.gohtml
+++ /dev/null
@@ -1,21 +0,0 @@
-{{define "emojipicker"}}
-    <div x-data="{ open: false, id: '{{.}}', hoveredIndex: 0 }"
-         @click.outside="() => emojiPicker.close()"
-         :data-id="emojiPicker.id"
-         class="absolute ease-out duration-100 bg-white dark:bg-secondary border-2 border-solid border-gray-200 dark:border-black rounded left-[-10px] top-[-36px] text-left overflow-hidden whitespace-nowrap p-2 flex flex-row"
-         :class="open ? 'scale-100 opacity-1 translate-x-0 translate-y-0' : 'scale-0 opacity-0 translate-x-[-42px] translate-y-[42px]'"
-         x-on:emojipickeropen.window="(e) => emojiPicker.eventOwner(e) && (open = true)" {{/* show emoji picker */}}
-         x-on:emojipickerclose.window="(e) => emojiPicker.eventOwner(e) && (open = false)" {{/* hide emoji picker */}}
-    >
-        <template x-for="(emoji, i) in emojiPicker.getSuggestions()">
-            <button type="button"
-                    :title="`:${emoji.short_names[0]}:`" {{/* e.g. ':eyes:' */}}
-                    x-text="emoji.emoji"
-                    x-on:mouseenter="() => (hoveredIndex=i)" {{/* Select emoji on hover */}}
-                    :class="hoveredIndex===i && 'bg-gray-100 dark:bg-gray-600'"
-                    @click="emojiPicker.onSelect(emoji)" {{/* notify emoji click */}}
-                    class="cursor-pointer mr-1 ml-1 h-5 w-5 rounded text-xs">
-            </button>
-        </template>
-    </div>
-{{end}}
\ No newline at end of file
diff --git a/web/template/partial/stream/chat/emojipromt.gohtml b/web/template/partial/stream/chat/emojipromt.gohtml
deleted file mode 100644
index 06f6d56c3..000000000
--- a/web/template/partial/stream/chat/emojipromt.gohtml
+++ /dev/null
@@ -1,22 +0,0 @@
-{{define "emojipromt"}}
-    <div x-show="c.emojis.isValid()"
-         class="text-left overflow-hidden whitespace-nowrap p-2 flex flex-row"
-         x-on:emojisuggestions.window="e => c.emojis.onSuggestions(e);" {{/* set emoji suggestions for current word */}}
-         x-on:emojiselectiontriggered.window="e => c.emojis.onSelectionTriggered(e);"
-         x-on:emojiarrowdown.window="e => c.emojis.onArrowDown(e);"
-         x-on:emojiarrowup.window="e => c.emojis.onArrowUp(e);"
-         x-on:emojisinserted.window="e => c.emojis.onInserted(e);"
-         x-on:chatenter.window="e => c.emojis.onChatEnter(e);" {{/* Emoji selection triggered on enter if emojis exist*/}}
-    >
-        <template x-for="(emoji, i) in c.emojis.suggestions">
-            <button type="button"
-                    :title="`:${emoji.short_names[0]}:`" {{/* e.g. ':eyes:' */}}
-                    x-text="emoji.emoji"
-                    x-on:mouseenter="c.emojis.emojiIndex=i" {{/* Select emoji on hover */}}
-                    :class="c.emojis.emojiIndex===i && 'bg-gray-100 dark:bg-gray-600'"
-                    @click="$dispatch('emojiselectiontriggered')" {{/* notify chatpromts to insert emoji */}}
-                    class="cursor-pointer mr-1 h-8 w-8 rounded text-xl">
-            </button>
-        </template>
-    </div>
-{{end}}
\ No newline at end of file
diff --git a/web/template/partial/stream/chat/tooltip-bottom.gohtml b/web/template/partial/stream/chat/tooltip-bottom.gohtml
deleted file mode 100644
index a7f8b91a9..000000000
--- a/web/template/partial/stream/chat/tooltip-bottom.gohtml
+++ /dev/null
@@ -1,13 +0,0 @@
-{{define "tooltip-bottom"}}
-    {{- /*gotype: string*/ -}}
-    <div class="hover:transition-opacity delay-500 peer-hover:opacity-100 md:block hidden opacity-0 absolute top-full">
-        <div>
-            <div class="tooltip relative w-fit">
-                <div class="w-0 h-0 border-x-8 border-x-transparent border-b-8 border-b-black mx-auto"></div>
-                <div class="bg-black rounded-md px-1">
-                    <span class="text-white text-sm font-bold whitespace-nowrap">{{.}}</span>
-                </div>
-            </div>
-        </div>
-    </div>
-{{end}}
\ No newline at end of file
diff --git a/web/template/partial/stream/chat/tooltip-left.gohtml b/web/template/partial/stream/chat/tooltip-left.gohtml
deleted file mode 100644
index 8305730c6..000000000
--- a/web/template/partial/stream/chat/tooltip-left.gohtml
+++ /dev/null
@@ -1,14 +0,0 @@
-{{define "tooltip-left"}}
-    {{- /*gotype: string*/ -}}
-    <div class="hover:transition-opacity delay-500 peer-hover:opacity-100 md:flex opacity-0 absolute right-full
-    top-0 bottom-0 hidden">
-        <div class = "my-auto">
-            <div class="tooltip flex relative w-fit">
-                <div class="bg-black rounded-md px-1">
-                    <span class="text-white text-sm font-bold whitespace-nowrap">{{.}}</span>
-                </div>
-                <div class="w-0 h-0 border-y-4 border-y-transparent border-l-4 border-l-black my-auto"></div>
-            </div>
-        </div>
-    </div>
-{{end}}
\ No newline at end of file
diff --git a/web/template/partial/stream/watch-info.gohtml b/web/template/partial/stream/watch-info.gohtml
index 89c78b350..1b2d78761 100644
--- a/web/template/partial/stream/watch-info.gohtml
+++ b/web/template/partial/stream/watch-info.gohtml
@@ -2,8 +2,7 @@
     {{- /*gotype: github.com/joschahenningsen/TUM-Live/web.WatchPageData*/ -}}
     {{$stream := .IndexData.TUMLiveContext.Stream}}
     {{$course := .IndexData.TUMLiveContext.Course}}
-    <div x-data="{ viewers: 0 }" @viewers.window="viewers = $event.detail.viewers"
-         class="text-5 text-xs mt-2 lg:text-sm">
+    <div class="text-5 text-xs mt-2 lg:text-sm">
         {{if not $stream.Recording}}
             {{if not $stream.LiveNow}}
                 {{if $stream.Ended }}
diff --git a/web/template/popup-chat.gohtml b/web/template/popup-chat.gohtml
index 1debc1563..a4814fd2b 100644
--- a/web/template/popup-chat.gohtml
+++ b/web/template/popup-chat.gohtml
@@ -1,22 +1,22 @@
-<!DOCTYPE html>
-<html lang="en" class="h-full dark">
 {{- /*gotype: github.com/joschahenningsen/TUM-Live/web.ChatData*/ -}}
-{{$stream := .IndexData.TUMLiveContext.Stream}}
 {{$course := .IndexData.TUMLiveContext.Course}}
+{{$stream := .IndexData.TUMLiveContext.Stream}}
+<!DOCTYPE html>
+<html lang="en" class="h-full dark">
 <head>
     <meta charset="UTF-8">
     <title>{{.IndexData.Branding.Title}} | {{$course.Name}}: {{$stream.Name}}</title>
     {{template "headImports" .IndexData.VersionTag}}
-    <script src="/static/assets/ts-dist/watch.bundle.js?v={{.IndexData.VersionTag}}"></script>
+    <script src="/static/assets/ts-dist/interaction.bundle.js?v={{.IndexData.VersionTag}}"></script>
     {{if $stream.ChatEnabled}}
         <link rel="stylesheet" href="/static/node_modules/katex/dist/katex.min.css">
         <script defer src="/static/node_modules/katex/dist/katex.js"></script>
         <script defer src="/static/node_modules/katex/dist/contrib/auto-render.min.js"></script>
         <script defer src="/static/node_modules/katex/dist/contrib/copy-tex.min.js"></script>
     {{end}}
+    <link href="/static/assets/css-dist/home.css?v={{if .IndexData.VersionTag}}{{.IndexData.VersionTag}}{{else}}development{{end}}"
+          rel="stylesheet">
 </head>
-<body x-init="watch.startWebsocket()"
-      class="bg-white dark:bg-secondary h-screen overflow-hidden">
-<input type="hidden" id="streamID" value="{{.IndexData.TUMLiveContext.Stream.Model.ID}}">
-{{template "chat" .}}
+<body class="bg-white dark:bg-secondary h-screen">
+    {{template "chat-component" .}}
 </body>
diff --git a/web/template/watch.gohtml b/web/template/watch.gohtml
index 3c2b5dc54..32f7dfefb 100644
--- a/web/template/watch.gohtml
+++ b/web/template/watch.gohtml
@@ -11,10 +11,14 @@
     {{template "headImports" .IndexData.VersionTag}}
     <script>window.HELP_IMPROVE_VIDEOJS = false;</script>
     <script src="/static/assets/ts-dist/watch.bundle.js?v={{.IndexData.VersionTag}}"></script>
+    <script src="/static/assets/ts-dist/interaction.bundle.js?v={{.IndexData.VersionTag}}"></script>
+    <link href="/static/assets/css-dist/home.css?v={{if .IndexData.VersionTag}}{{.IndexData.VersionTag}}{{else}}development{{end}}"
+          rel="stylesheet">
     <link rel="stylesheet" href="/static/node_modules/video.js/dist/video-js.min.css">
     <link rel="stylesheet" href="/static/node_modules/videojs-seek-buttons/dist/videojs-seek-buttons.css">
     <link rel="stylesheet" href="/static/node_modules/@silvermine/videojs-airplay/dist/silvermine-videojs-airplay.css">
-    <link rel="stylesheet" href="/static/assets/css-dist/watch.css?v={{if .IndexData.VersionTag}}{{.IndexData.VersionTag}}{{else}}development{{end}}">
+    <link rel="stylesheet"
+          href="/static/assets/css-dist/watch.css?v={{if .IndexData.VersionTag}}{{.IndexData.VersionTag}}{{else}}development{{end}}">
     {{/* Remove this when using KaTeX in other locations than the chat */}}
     {{if $stream.ChatEnabled}}
         <link rel="stylesheet" href="/static/node_modules/katex/dist/katex.min.css">
@@ -24,8 +28,7 @@
     {{end}}
 </head>
 <body x-data="{'streamID': {{$stream.Model.ID}}, seekLogger: new watch.SeekLogger('{{$stream.ID}}'), sidebar: $persist(watch.SidebarState.Hidden).as('sidebarState'), showShare: false}"
-      @keypress.shift.window="(e) => watch.onShift(e)"
-      x-init="watch.startWebsocket(); seekLogger.attach();">
+      x-init="seekLogger.attach();">
 {{template "header" .IndexData.TUMLiveContext}}
 <div id="shortcuts-help-modal" class="hidden flex fixed top-0 h-screen w-screen z-50 backdrop-brightness-50">
     <div class="m-auto" @click.outside="watch.toggleShortcutsModal();">
@@ -55,9 +58,9 @@
                     </button>
                 </div>
                 {{if not $stream.LiveNow}}
-                        <!-- $nextTick does not work in watch. Therefore, @change.once has to be used. -->
-                        <div x-init="$watch('showShare', async value => { if (value) { await share.setURL(true); }});"
-                             class="flex justify-start items-center pt-2">
+                    <!-- $nextTick does not work in watch. Therefore, @change.once has to be used. -->
+                    <div x-init="$watch('showShare', async value => { if (value) { await share.setURL(true); }});"
+                         class="flex justify-start items-center pt-2">
                         <input id="include-timestamp" type="checkbox" class="h-8 hover:cursor-pointer"
                                x-model="share.includeTimestamp" @change="share.setURL(false)">
                         <label for="include-timestamp" class="font-light text-4 text-xs ml-2">Include Timestamp</label>
@@ -70,20 +73,22 @@
     </div>
 </div>
 {{if .IndexData.TUMLiveContext.User}}
-<div id="bookmarks-mobile" x-cloak="" x-show="sidebar === watch.SidebarState.Bookmarks"
-     class="md:hidden flex absolute top-0 h-screen w-screen z-50 backdrop-brightness-50">
-    <div @click.outside="sidebar = watch.SidebarState.Hidden"
-         class="m-auto w-3/4 h-96 bg-white dark:bg-secondary-light border dark:border-gray-800 rounded-lg">
-        {{template "bookmarks-modal" $stream.ID}}
+    <div id="bookmarks-mobile" x-cloak="" x-show="sidebar === watch.SidebarState.Bookmarks"
+         class="md:hidden flex absolute top-0 h-screen w-screen z-50 backdrop-brightness-50">
+        <div @click.outside="sidebar = watch.SidebarState.Hidden"
+             class="m-auto w-3/4 h-96 bg-white dark:bg-secondary-light border dark:border-gray-800 rounded-lg">
+            {{template "bookmarks-modal" $stream.ID}}
+        </div>
     </div>
-</div>
 {{end}}
 {{if .AlertsEnabled}}
     {{template "alert-modal" . }}
 {{end}}
 <div id="watchPageMainWrapper">
+    <input type="hidden" id="description" value="{{.Description}}">
     <input type="hidden" id="streamID" value="{{$stream.Model.ID}}">
-    <div class="flex flex-wrap shadow border bg-white dark:bg-secondary dark:shadow-0 dark:border-0">
+    <div x-data="interaction.videoInformationContext();"
+         class="flex flex-wrap shadow border bg-white dark:bg-secondary dark:shadow-0 dark:border-0">
         <div id="watchWrapper"
              x-data="{ 'chatEnabled': {{and $course.ChatEnabled $stream.ChatEnabled}} }"
              class="relative basis-full lg:order-none order-1 sticky top-0 lg:relative z-40"
@@ -103,11 +108,11 @@
                 </div>
                 {{if (eq .Version "SPLIT")}}
                     <div
-                        x-data="{splitView: new watch.SplitView(), mouseMoving: false}"
-                        @mouseleave="splitView.hideMenu()"
-                        @update-mouse-moving.camel="(e) => mouseMoving = e.detail"
-                        :class="mouseMoving && 'mouse-moving'"
-                        class="splitview-wrap group relative flex w-full h-full"
+                            x-data="{splitView: new watch.SplitView(), mouseMoving: false}"
+                            @mouseleave="splitView.hideMenu()"
+                            @update-mouse-moving.camel="(e) => mouseMoving = e.detail"
+                            :class="mouseMoving && 'mouse-moving'"
+                            class="splitview-wrap group relative flex w-full h-full"
                     >
                         <div class="hidden group-hover:flex absolute left-1 top-1 z-40">
                             <button x-cloak x-show="!splitView.showSplitMenu" @click="splitView.toggleMenu()"
@@ -226,98 +231,101 @@
                                 {{end}}
                             {{end}}
                         {{end}}
-                    <p class="vjs-no-js">
-                        To view this video please enable JavaScript.
-                    </p>
-                </video-js>
-            {{end}}
-
-            <div
-                    x-data="{ size: { x: '0px', width: '0px' }, hoverPos: watch.SeekbarHoverPosition.empty }"
-                    x-on:updateseekbarsize.window="e => { size = e.detail; }"
-                    x-on:seekbarhover.window="e => { hoverPos = e.detail; }"
-                    x-init="watch.seekbarOverlay.init($el);"
-                    class="seekbar-overlay absolute bottom-[18px] bg-gradient-to-t from-gray-800/[.6] h-full"
-                    :style="{width: size.width, left: size.x}"
-            >
+                        <p class="vjs-no-js">
+                            To view this video please enable JavaScript.
+                        </p>
+                    </video-js>
+                {{end}}
 
                 <div
-                        x-data="{ seekLogger: new watch.SeekLogger('{{$stream.ID}}'), heatMapPath: null }"
-                        x-on:updateheatmappath.window="e => { heatMapPath = e.detail.heatMapPath; }"
+                        x-data="{ size: { x: '0px', width: '0px' }, hoverPos: watch.SeekbarHoverPosition.empty }"
                         x-on:updateseekbarsize.window="e => { size = e.detail; }"
-                        x-init="seekLogger.attach(); watch.repeatHeatMap.init('{{$stream.ID}}');"
-                        class="absolute h-[30px] bottom-0 left-0 right-0"
-                        x-show="heatMapPath != null"
+                        x-on:seekbarhover.window="e => { hoverPos = e.detail; }"
+                        x-init="watch.seekbarOverlay.init($el);"
+                        class="seekbar-overlay absolute bottom-[18px] bg-gradient-to-t from-gray-800/[.6] h-full"
+                        :style="{width: size.width, left: size.x}"
                 >
-                    <template x-if="heatMapPath">
-                        <svg height="100%" preserveAspectRatio="none" viewBox="0 0 1000 100"
-                             width="100%" style="height: 30px;">
-                            <defs>
-                                <clipPath id="heatmap">
-                                    <path class="tumlive-heat-map-path"
-                                          :d="heatMapPath"
-                                          fill="white" fill-opacity="0.6"></path>
-                                </clipPath>
-                            </defs>
-                            <rect clip-path="url(#heatmap)" fill="white" fill-opacity="0.4" height="100%" width="100%" x="0" y="0"></rect>
-                        </svg>
-                    </template>
-                </div>
 
-                <div
-                        x-data="{ seekbarMarker: [], seekbarSections: [] }"
-                        class="absolute h-[30px] bottom-0 left-0 right-0"
-                        x-on:seekbarhighlightsupdate.window="e => { seekbarMarker = e.detail.marker; seekbarSections = e.detail.sections; }"
-                        x-init="watch.seekbarHighlights.init('{{$stream.ID}}');"
-                >
-                    <template x-for="marker in seekbarMarker">
-                        <div class="absolute bottom-0 top-0" :style="{ left: `${marker.position * 100}%` }">
-                            <!-- Section Separator -->
-                            <div x-show="marker.type === watch.MarkerType.sectionSep" class="w-[2px] h-full bg-gradient-to-t from-black rounded-t"></div>
+                    <div
+                            x-data="{ seekLogger: new watch.SeekLogger('{{$stream.ID}}'), heatMapPath: null }"
+                            x-on:updateheatmappath.window="e => { heatMapPath = e.detail.heatMapPath; }"
+                            x-on:updateseekbarsize.window="e => { size = e.detail; }"
+                            x-init="seekLogger.attach(); watch.repeatHeatMap.init('{{$stream.ID}}');"
+                            class="absolute h-[30px] bottom-0 left-0 right-0"
+                            x-show="heatMapPath != null"
+                    >
+                        <template x-if="heatMapPath">
+                            <svg height="100%" preserveAspectRatio="none" viewBox="0 0 1000 100"
+                                 width="100%" style="height: 30px;">
+                                <defs>
+                                    <clipPath id="heatmap">
+                                        <path class="tumlive-heat-map-path"
+                                              :d="heatMapPath"
+                                              fill="white" fill-opacity="0.6"></path>
+                                    </clipPath>
+                                </defs>
+                                <rect clip-path="url(#heatmap)" fill="white" fill-opacity="0.4" height="100%"
+                                      width="100%" x="0" y="0"></rect>
+                            </svg>
+                        </template>
+                    </div>
+
+                    <div
+                            x-data="{ seekbarMarker: [], seekbarSections: [] }"
+                            class="absolute h-[30px] bottom-0 left-0 right-0"
+                            x-on:seekbarhighlightsupdate.window="e => { seekbarMarker = e.detail.marker; seekbarSections = e.detail.sections; }"
+                            x-init="watch.seekbarHighlights.init('{{$stream.ID}}');"
+                    >
+                        <template x-for="marker in seekbarMarker">
+                            <div class="absolute bottom-0 top-0" :style="{ left: `${marker.position * 100}%` }">
+                                <!-- Section Separator -->
+                                <div x-show="marker.type === watch.MarkerType.sectionSep"
+                                     class="w-[2px] h-full bg-gradient-to-t from-black rounded-t"></div>
 
-                            <!-- Bookmark Marker -->
-                            <div x-show="marker.type === watch.MarkerType.bookmark" class="block w-[6px] h-[6px] ml-[-3px] rounded bg-indigo-400 rounded-t"></div>
-                            <div
-                                x-show="marker.type === watch.MarkerType.bookmark && hoverPos.onTarget(marker.position, 7)"
-                                class="break-all absolute z-10 top-[-45px] text-center w-[100px] bg-indigo-400 ml-[-50px] px-[12px] py-2 rounded"
-                                :style="{ left: `${marker.position * 100}%` }"
-                            >
-                                <span class="size1" x-text="marker.description"></span>
+                                <!-- Bookmark Marker -->
+                                <div x-show="marker.type === watch.MarkerType.bookmark"
+                                     class="block w-[6px] h-[6px] ml-[-3px] rounded bg-indigo-400 rounded-t"></div>
+                                <div
+                                        x-show="marker.type === watch.MarkerType.bookmark && hoverPos.onTarget(marker.position, 7)"
+                                        class="break-all absolute z-10 top-[-45px] text-center w-[100px] bg-indigo-400 ml-[-50px] px-[12px] py-2 rounded"
+                                        :style="{ left: `${marker.position * 100}%` }"
+                                >
+                                    <span class="size1" x-text="marker.description"></span>
+                                </div>
                             </div>
-                        </div>
-                    </template>
+                        </template>
 
-                    <template x-for="section in seekbarSections">
-                        <div>
-                            <div
-                                class="absolute border-x-2 border-t-2 bottom-0 top-0 rounded-t"
-                                :class="hoverPos.inRange(section.from, section.to) ? 'bg-white/10 border-white/[.02]' : 'bg-black/20 border-transparent'"
-                                :style="{ left: `${section.from * 100}%`, right: `${(1 - section.to) * 100}%` }"
-                            ></div>
-                            <div
-                                    x-show="hoverPos.inRange(section.from, section.to)"
-                                    class="absolute top-[-45px] text-center w-[100px] bg-black/[0.9] ml-[-50px] px-[12px] py-2 rounded"
-                                    :style="{ left: `${(section.from + (section.to - section.from) / 2) * 100}%` }"
-                            >
-                                <span class="size1" x-text="section.title"></span>
+                        <template x-for="section in seekbarSections">
+                            <div>
+                                <div
+                                        class="absolute border-x-2 border-t-2 bottom-0 top-0 rounded-t"
+                                        :class="hoverPos.inRange(section.from, section.to) ? 'bg-white/10 border-white/[.02]' : 'bg-black/20 border-transparent'"
+                                        :style="{ left: `${section.from * 100}%`, right: `${(1 - section.to) * 100}%` }"
+                                ></div>
+                                <div
+                                        x-show="hoverPos.inRange(section.from, section.to)"
+                                        class="absolute top-[-45px] text-center w-[100px] bg-black/[0.9] ml-[-50px] px-[12px] py-2 rounded"
+                                        :style="{ left: `${(section.from + (section.to - section.from) / 2) * 100}%` }"
+                                >
+                                    <span class="size1" x-text="section.title"></span>
+                                </div>
                             </div>
-                        </div>
-                    </template>
+                        </template>
+                    </div>
                 </div>
-            </div>
 
-            <div
-                    x-cloak
-                    x-show="contextMenu.shown"
-                    @click.outside="contextMenu = {...contextMenu, shown: false}"
-                    class="origin-top-left absolute w-72 py-2 bg-gray-800/[.9] border-gray-100 border-1 rounded text-white text-sm"
-                    :style="{ top: contextMenu.locY + 'px', left: contextMenu.locX + 'px' }"
-                    role="menu" aria-orientation="vertical" tabindex="-1">
-                <button @click="contextMenu = {...contextMenu, shown: false}; videoStatsShown = true; watch.videoStatListener.listen();"
-                        class="py-2 px-4 w-full text-left cursor-pointer hover:bg-white/10">
-                    Show detailed stats
-                </button>
-            </div>
+                <div
+                        x-cloak
+                        x-show="contextMenu.shown"
+                        @click.outside="contextMenu = {...contextMenu, shown: false}"
+                        class="origin-top-left absolute w-72 py-2 bg-gray-800/[.9] border-gray-100 border-1 rounded text-white text-sm"
+                        :style="{ top: contextMenu.locY + 'px', left: contextMenu.locX + 'px' }"
+                        role="menu" aria-orientation="vertical" tabindex="-1">
+                    <button @click="contextMenu = {...contextMenu, shown: false}; videoStatsShown = true; watch.videoStatListener.listen();"
+                            class="py-2 px-4 w-full text-left cursor-pointer hover:bg-white/10">
+                        Show detailed stats
+                    </button>
+                </div>
 
                 <div
                         x-cloak
@@ -395,8 +403,8 @@
                  class="z-20 basis-full order-5
                         md:px-2 md:pt-2
                         lg:h-16/6 h-96 lg:order-none">
-                <div id="chat-box" class="bg-white rounded-lg h-full border dark:border-gray-800 lg:bg-transparent md:rounded-0 dark:bg-secondary">
-                    {{template "chat" .ChatData}}
+                <div class="border dark:border-gray-800 rounded-lg h-full">
+                    {{template "chat-component" .ChatData}}
                 </div>
             </div>
         {{end}}
@@ -552,36 +560,30 @@
 
 
         <!-- Video description -->
-        {{$less := gt (len .Description) .CutOffLength}}
-        {{if gt (len .Description) 0}}
-            <div x-data="{ less: {{$less}}, toggleDesc: true }"
-                    {{/* Update less on update */}}
-                 @descriptionupdate.window="toggleDesc = less = $event.detail.description.full.length > {{.CutOffLength}};"
-                 class="video-description flex-grow p-3 order-2 basis-full lg:order-none lg:p-5 lg:mx-2">
+        <template x-if="hasDescription()">
+            <div class="video-description flex-grow p-3 order-2 basis-full lg:order-none lg:p-5 lg:mx-2">
                 <div class="flex justify-between border-b mb-1 dark:border-gray-800 lg:justify-start">
                     <h3 class="text-4 font-semibold">Description</h3>
                 </div>
                 <div>
                     <div class="rounded-lg bg-gray-50 hover:bg-gray-100 dark:bg-secondary-light hover:dark:bg-gray-600 text-3 text-sm">
-                        <button @click="toggleDesc = !toggleDesc;"
+                        <button @click="showFullDescription.toggle()"
                                 :disabled="!less"
                                 class="p-2 w-full text-left"
                                 :class="less && 'hover:cursor-pointer'">
-                        <span class="block overflow-y-clip"
-                              :class="(less && toggleDesc) ? 'h-8' : 'h-auto'"
-                              @descriptionupdate.window="$el.innerHTML=$event.detail.description.full">
-                            {{.Description}}
+                        <span x-html="description" class="block overflow-y-clip"
+                              :class="(less && !showFullDescription.value) ? 'h-8' : 'h-auto'">
                         </span>
                         </button>
                         <template x-if="less">
                             <button class="font-semibold m-1 py-1 px-2 rounded-full hover:bg-gray-200 dark:hover:bg-gray-600"
-                                    x-text="toggleDesc ? 'Show more' : 'Show less'"
-                                    @click="toggleDesc = !toggleDesc;"></button>
+                                    x-text="showFullDescription.toggleText('Show more', 'Show less')"
+                                    @click="showFullDescription.toggle()"></button>
                         </template>
                     </div>
                 </div>
             </div>
-        {{end}}
+        </template>
 
         <!-- Modal when stopping a stream -->
         <div class="inline-block" x-data="{ 'showModal': false }"
diff --git a/web/ts/TUMLiveVjs.ts b/web/ts/TUMLiveVjs.ts
index 1fe420b13..9ff04ebce 100644
--- a/web/ts/TUMLiveVjs.ts
+++ b/web/ts/TUMLiveVjs.ts
@@ -483,27 +483,6 @@ export const syncPlayers = function () {
     });
 };
 
-/**
- * Registers a time watcher that observes the time of the current player
- * @param callBack call back function responsible for handling player time updates
- * @return callBack function that got registered for listening to player time updates (used to deregister)
- */
-export const registerTimeWatcher = function (callBack: (currentPlayerTime: number) => void): () => void {
-    const timeWatcherCallBack: () => void = () => {
-        callBack(players[0].currentTime());
-    };
-    players[0]?.on("timeupdate", timeWatcherCallBack);
-    return timeWatcherCallBack;
-};
-
-/**
- * Deregisters a time watching obeserver from the current player
- * @param callBackToDeregister regestered callBack function
- */
-export const deregisterTimeWatcher = function (callBackToDeregister: () => void) {
-    players[0]?.off("timeupdate", callBackToDeregister);
-};
-
 const Component = videojs.getComponent("Component");
 
 export class Titlebar extends Component {
diff --git a/web/ts/api/Identifiable.ts b/web/ts/api/Identifiable.ts
new file mode 100644
index 000000000..70373b770
--- /dev/null
+++ b/web/ts/api/Identifiable.ts
@@ -0,0 +1,3 @@
+interface Identifiable {
+    ID: number;
+}
diff --git a/web/ts/api/chat-ws.ts b/web/ts/api/chat-ws.ts
new file mode 100644
index 000000000..926bba8ea
--- /dev/null
+++ b/web/ts/api/chat-ws.ts
@@ -0,0 +1,69 @@
+import { RealtimeFacade } from "../utilities/ws";
+import { Realtime } from "../socket";
+
+enum ChatMessageType {
+    Message = "message",
+    Delete = "delete",
+    Approve = "approve",
+    Retract = "retract",
+    Resolve = "resolve",
+    ReactTo = "react_to",
+}
+
+export abstract class SocketConnections {
+    static ws: RealtimeFacade = new RealtimeFacade("chat/12845");
+}
+
+export type NewChatMessage = {
+    msg: string;
+    anonymous: boolean;
+    replyTo: number;
+    addressedTo: number[];
+};
+
+export class ChatWebsocketConnection {
+    private readonly ws: RealtimeFacade;
+
+    constructor(ws: RealtimeFacade) {
+        this.ws = ws;
+    }
+
+    sendMessage(msg: NewChatMessage) {
+        return this.ws.send({
+            payload: {
+                type: ChatMessageType.Message,
+                ...msg,
+            },
+        });
+    }
+
+    deleteMessage(id: number) {
+        return this.sendIDMessage(id, ChatMessageType.Delete);
+    }
+
+    resolveMessage(id: number) {
+        return this.sendIDMessage(id, ChatMessageType.Resolve);
+    }
+
+    approveMessage(id: number) {
+        return this.sendIDMessage(id, ChatMessageType.Approve);
+    }
+
+    retractMessage(id: number) {
+        return this.sendIDMessage(id, ChatMessageType.Retract);
+    }
+
+    reactToMessage(id: number, reaction: string) {
+        return this.ws.send({
+            payload: {
+                type: ChatMessageType.ReactTo,
+                id: id,
+                reaction: reaction,
+            },
+        });
+    }
+
+    private sendIDMessage(id: number, type: ChatMessageType) {
+        return this.ws.send({ payload: { type, id } });
+    }
+}
diff --git a/web/ts/api/chat.ts b/web/ts/api/chat.ts
new file mode 100644
index 000000000..fcbce6ecd
--- /dev/null
+++ b/web/ts/api/chat.ts
@@ -0,0 +1,179 @@
+import { get } from "../utilities/fetch-wrappers";
+import { ChatMessagePreprocessor } from "../chat/ChatMessagePreprocessor";
+import { User } from "./users";
+import { ToggleableElement } from "../utilities/ToggleableElement";
+
+export class ChatMessage implements Identifiable {
+    readonly ID: number;
+    readonly admin: boolean;
+
+    message: string;
+    readonly userId: number;
+    readonly name: string;
+    readonly color: string;
+
+    replies: ChatMessage[];
+    replyTo: { Int64: number; Valid: boolean };
+
+    reactions: ChatReaction[];
+    aggregatedReactions: ChatReactionGroup[];
+
+    addressedTo: number[];
+    visible: boolean;
+    resolved: boolean;
+
+    isGrayedOut: boolean;
+
+    ShowReplies = new ToggleableElement();
+    ShowEmojiPicker = new ToggleableElement();
+    ShowAdminTools = new ToggleableElement();
+
+    CreatedAt: string;
+
+    getLikes(): number {
+        const g = this.aggregatedReactions.find((r) => r.emojiName === "+1");
+        return g ? g.reactions.length : 0;
+    }
+
+    friendlyCreatedAt(): string {
+        const d = new Date(this.CreatedAt);
+        return ("0" + d.getHours()).slice(-2) + ":" + ("0" + d.getMinutes()).slice(-2);
+    }
+}
+
+export type ChatReaction = {
+    userID: number;
+    username: string;
+    emoji: string;
+};
+
+export type ChatReactionGroup = {
+    emoji: string;
+    emojiName: string;
+    names: string[];
+    namesPretty: string;
+    reactions: ChatReaction[];
+    hasReacted: boolean;
+};
+
+export class ChatMessageArray {
+    private messages: ChatMessage[];
+
+    static EmptyArray(): ChatMessageArray {
+        return new ChatMessageArray([]);
+    }
+
+    constructor(messages: ChatMessage[]) {
+        this.messages = messages.map((m) => Object.assign(new ChatMessage(), m));
+        this.messages.forEach((msg) => {
+            msg.replies = msg.replies.map((reply) => Object.assign(new ChatMessage(), reply));
+        });
+    }
+
+    forEach(callback: (obj: ChatMessage, i: number) => void) {
+        this.messages.forEach(callback);
+    }
+
+    get(sortFn?: (a: ChatMessage, b: ChatMessage) => number): ChatMessage[] {
+        return sortFn ? [...this.messages].sort(sortFn) : this.messages;
+    }
+
+    resolve(msg: Identifiable) {
+        this.messages.find((m) => m.ID === msg.ID).resolved = true;
+    }
+
+    delete(msg: Identifiable) {
+        this.messages = this.messages.filter((m) => m.ID != msg.ID);
+    }
+
+    approve(msg: ChatMessage) {
+        const filtered = this.messages.filter((m) => m.ID !== msg.ID);
+        filtered.push(Object.assign(new ChatMessage(), msg));
+        this.messages = filtered;
+    }
+
+    retract(msg: ChatMessage, isAdmin: boolean) {
+        if (isAdmin) {
+            this.messages.find((m) => m.ID === msg.ID).visible = false;
+        } else {
+            this.messages = this.messages.filter((m) => m.ID !== msg.ID);
+        }
+    }
+
+    setReaction(reaction: { reactions: number; payload: ChatReaction[] }, user: User) {
+        const msg = this.messages.find((m) => m.ID === reaction.reactions);
+        if (msg != undefined) {
+            msg.reactions = reaction.payload;
+            ChatMessagePreprocessor.AggregateReactions(msg, user);
+        }
+    }
+
+    pushReply(m: ChatMessage) {
+        const base = this.messages.find((msg) => msg.ID === m.replyTo.Int64);
+        if (base !== undefined) {
+            if (base.replies.findIndex((msg) => msg.ID === m.ID) === -1) {
+                base.replies.push(Object.assign(new ChatMessage(), m));
+            }
+        }
+    }
+
+    pushMessage(m: ChatMessage) {
+        if (this.messages.findIndex((msg) => msg.ID === m.ID) === -1) {
+            this.messages.push(Object.assign(new ChatMessage(), m));
+        }
+    }
+}
+
+export class Poll implements Identifiable {
+    ID: number;
+    options: PollOption[];
+    question: string;
+
+    submitted: boolean;
+
+    getOptionWidth(pollOption) {
+        const minWidth = 1;
+        const maxWidth = 100;
+        const maxVotes = Math.max(...this.options.map(({ votes: v }) => v));
+
+        if (pollOption.votes == 0) return `${minWidth.toString()}%`;
+
+        const fractionOfMax = pollOption.votes / maxVotes;
+        const fractionWidth = minWidth + fractionOfMax * (maxWidth - minWidth);
+        return `${Math.ceil(fractionWidth).toString()}%`;
+    }
+}
+
+export class PollOption implements Identifiable {
+    ID: number;
+    answer: string;
+    votes: number;
+}
+
+export type ChatUser = {
+    id: number;
+    name: string;
+};
+
+/**
+ * REST API Wrapper for /api/chat
+ */
+export const ChatAPI = {
+    async getMessages(streamId: number): Promise<ChatMessageArray> {
+        return get(`/api/chat/${streamId}/messages`).then((messages: ChatMessage[]) => new ChatMessageArray(messages));
+    },
+
+    async getUsers(streamId: number): Promise<ChatUser[]> {
+        return get(`/api/chat/${streamId}/users`);
+    },
+
+    async getPolls(streamId: number): Promise<Poll[]> {
+        return get(`/api/chat/${streamId}/polls`).then((polls) => polls.map((poll) => Object.assign(new Poll(), poll)));
+    },
+
+    async getActivePoll(streamId: number): Promise<Poll> {
+        return get(`/api/chat/${streamId}/active-poll`, {}, true)
+            .then((poll) => Object.assign(new Poll(), poll))
+            .catch((err) => ({ ID: -1 }));
+    },
+};
diff --git a/web/ts/api/courses.ts b/web/ts/api/courses.ts
index 256632afc..f1ae39ed8 100644
--- a/web/ts/api/courses.ts
+++ b/web/ts/api/courses.ts
@@ -9,7 +9,7 @@ type DownloadableVOD = {
     readonly DownloadURL: string;
 };
 
-export class Stream {
+export class Stream implements Identifiable {
     readonly ID: number;
     readonly Name: string;
     readonly IsRecording: boolean;
@@ -106,7 +106,7 @@ export class Stream {
     }
 }
 
-export class Course {
+export class Course implements Identifiable {
     readonly ID: number;
     readonly Visibility: string;
     readonly Slug: string;
diff --git a/web/ts/api/poll-ws.ts b/web/ts/api/poll-ws.ts
new file mode 100644
index 000000000..903dcd930
--- /dev/null
+++ b/web/ts/api/poll-ws.ts
@@ -0,0 +1,39 @@
+import { RealtimeFacade } from "../utilities/ws";
+import { Realtime } from "../socket";
+
+export enum PollMessageType {
+    StartPoll = "start_poll",
+    SubmitPollOptionVote = "submit_poll_option_vote",
+    CloseActivePoll = "close_active_poll",
+}
+
+export class PollWebsocketConnection {
+    private readonly ws: RealtimeFacade;
+
+    constructor(ws: RealtimeFacade) {
+        this.ws = ws;
+    }
+
+    startPoll(question: string, pollAnswers: string[]) {
+        return this.ws.send({
+            payload: {
+                type: PollMessageType.StartPoll,
+                question,
+                pollAnswers,
+            },
+        });
+    }
+
+    submitPollOptionVote(pollOptionId: number) {
+        return this.ws.send({
+            payload: {
+                type: PollMessageType.SubmitPollOptionVote,
+                pollOptionId,
+            },
+        });
+    }
+
+    closeActivePoll() {
+        return this.ws.send({ payload: { type: PollMessageType.CloseActivePoll } });
+    }
+}
diff --git a/web/ts/api/user.ts b/web/ts/api/users.ts
similarity index 83%
rename from web/ts/api/user.ts
rename to web/ts/api/users.ts
index 55df79504..21bc68a3b 100644
--- a/web/ts/api/user.ts
+++ b/web/ts/api/users.ts
@@ -1,5 +1,11 @@
 import { get, post } from "../utilities/fetch-wrappers";
 
+export class User implements Identifiable {
+    ID: number;
+    name: string;
+    isAdmin: boolean;
+}
+
 export type HasPinnedCourseDTO = {
     has: boolean;
 };
diff --git a/web/ts/chat.ts b/web/ts/chat.ts
deleted file mode 100644
index bce02a845..000000000
--- a/web/ts/chat.ts
+++ /dev/null
@@ -1,73 +0,0 @@
-import { Chat } from "./chat/Chat";
-
-export function initChat(
-    isAdminOfCourse: boolean,
-    streamId: number,
-    streamStart: string,
-    liveNowTimestamp: string,
-    userId: number,
-    userName: string,
-    activateChatReplay: boolean,
-) {
-    return {
-        c: new Chat(isAdminOfCourse, streamId, streamStart, liveNowTimestamp, userId, userName, activateChatReplay),
-    };
-}
-
-/*
-    Scroll to the bottom of the 'chatBox'
- */
-export function scrollToBottom() {
-    document.getElementById("chatBox").scrollTop = document.getElementById("chatBox").scrollHeight;
-}
-
-/*
-    Scroll to top of the 'chatBox'
- */
-export function scrollToTop() {
-    document.getElementById("chatBox").scrollTo({ top: 0, behavior: "smooth" });
-}
-
-export function scrollToElement(element: HTMLElement) {
-    element.scrollIntoView({ behavior: "smooth", block: "end", inline: "nearest" });
-}
-
-let orderByLikes = false; // sorting by likes or by time
-
-export function setOrder(obl: boolean) {
-    orderByLikes = obl;
-}
-
-export function shouldScroll(): boolean {
-    if (orderByLikes) {
-        return false; // only scroll if sorting by time
-    }
-    const c = document.getElementById("chatBox");
-    if (!c) {
-        return false;
-    }
-    return c.scrollHeight - c.scrollTop <= c.offsetHeight;
-}
-
-export function showNewMessageIndicator() {
-    window.dispatchEvent(new CustomEvent("messageindicator", { detail: { show: true } }));
-}
-
-export function scrollChat() {
-    if (orderByLikes) {
-        return; // only scroll if sorting by time
-    }
-    const c = document.getElementById("chatBox");
-    c.scrollTop = c.scrollHeight;
-}
-
-export function scrollToLatestMessage() {
-    const c = document.getElementById("chatBox");
-    c.scrollTo({ top: c.scrollHeight, behavior: "smooth" });
-    window.dispatchEvent(new CustomEvent("messageindicator", { detail: { show: false } }));
-}
-
-export function messageDateToString(date: string) {
-    const d = new Date(date);
-    return ("0" + d.getHours()).slice(-2) + ":" + ("0" + d.getMinutes()).slice(-2);
-}
diff --git a/web/ts/chat/Chat.ts b/web/ts/chat/Chat.ts
deleted file mode 100644
index 25be69f39..000000000
--- a/web/ts/chat/Chat.ts
+++ /dev/null
@@ -1,574 +0,0 @@
-import { NewChatMessage, NewReply } from "./NewChatMessage";
-import { ChatUserList } from "./ChatUserList";
-import { EmojiList } from "./EmojiList";
-import { Poll } from "./Poll";
-import { deregisterTimeWatcher, getPlayers, registerTimeWatcher } from "../TUMLiveVjs";
-import { EmojiPicker } from "./EmojiPicker";
-import { TopEmojis } from "top-twitter-emojis-map";
-
-const MAX_NAMES_IN_REACTION_TITLE = 2;
-
-enum ShowMode {
-    Messages,
-    Polls,
-}
-
-export class Chat {
-    readonly userId: number;
-    readonly userName: string;
-    readonly admin: boolean;
-    readonly streamId: number;
-
-    popUpWindow: Window;
-    chatReplayActive: boolean;
-    orderByLikes: boolean;
-    disconnected: boolean;
-    current: NewChatMessage;
-    messages: ChatMessage[];
-    focusedMessageId?: number;
-    users: ChatUserList;
-    emojis: EmojiList;
-    startTime: Date;
-    liveNowTimestamp: Date;
-    poll: Poll;
-    pollHistory: object[];
-    showMode: ShowMode;
-
-    preprocessors: ((m: ChatMessage) => ChatMessage)[] = [
-        (m: ChatMessage) => {
-            if (m.addressedTo.find((uId) => uId === this.userId) !== undefined) {
-                m.message = m.message.replaceAll(
-                    "@" + this.userName,
-                    "<span class = 'text-sky-800 bg-sky-200 text-xs dark:text-indigo-200 dark:bg-indigo-800 p-1 rounded'>" +
-                        "@" +
-                        this.userName +
-                        "</span>",
-                );
-            }
-            return m;
-        },
-        (m: ChatMessage) => {
-            return { ...m, isGrayedOut: this.chatReplayActive && !this.orderByLikes };
-        },
-        (m: ChatMessage) => {
-            return { ...m, renderVersion: 0 };
-        },
-        (m: ChatMessage) => {
-            m.aggregatedReactions = (m.reactions || [])
-                .reduce((res: ChatReactionGroup[], reaction: ChatReaction) => {
-                    let group: ChatReactionGroup = res.find((r) => r.emojiName === reaction.emoji);
-                    if (group === undefined) {
-                        group = {
-                            emoji: TopEmojis.find((e) => e.short_names.includes(reaction.emoji)).emoji,
-                            emojiName: reaction.emoji,
-                            reactions: [],
-                            names: [],
-                            namesPretty: "",
-                            hasReacted: reaction.userID === this.userId,
-                        };
-                        res.push(group);
-                    } else if (reaction.userID == this.userId) {
-                        group.hasReacted = true;
-                    }
-
-                    group.names.push(reaction.username);
-                    group.reactions.push(reaction);
-                    return res;
-                }, [])
-                .map((group) => {
-                    if (group.names.length === 0) {
-                        // Nobody
-                        group.namesPretty = `Nobody reacted with ${group.emojiName}`;
-                    } else if (group.names.length == 1) {
-                        // One Person
-                        group.namesPretty = `${group.names[0]} reacted with ${group.emojiName}`;
-                    } else if (group.names.length == MAX_NAMES_IN_REACTION_TITLE + 1) {
-                        // 1 person more than max allowed
-                        group.namesPretty = `${group.names
-                            .slice(0, MAX_NAMES_IN_REACTION_TITLE)
-                            .join(", ")} and one other reacted with ${group.emojiName}`;
-                    } else if (group.names.length > MAX_NAMES_IN_REACTION_TITLE) {
-                        // at least 2 more than max allowed
-                        group.namesPretty = `${group.names.slice(0, MAX_NAMES_IN_REACTION_TITLE).join(", ")} and ${
-                            group.names.length - MAX_NAMES_IN_REACTION_TITLE
-                        } others reacted with ${group.emojiName}`;
-                    } else {
-                        // More than 1 Person but less than MAX_NAMES_IN_REACTION_TITLE
-                        group.namesPretty = `${group.names.slice(0, group.names.length - 1).join(", ")} and ${
-                            group.names[group.names.length - 1]
-                        } reacted with ${group.emojiName}`;
-                    }
-                    return group;
-                });
-            m.aggregatedReactions.sort(
-                (a, b) => EmojiPicker.getEmojiIndex(a.emojiName) - EmojiPicker.getEmojiIndex(b.emojiName),
-            );
-            return m;
-        },
-    ];
-
-    filterPredicate: (m: ChatMessage) => boolean = (m) => {
-        return !this.admin && !m.visible && m.userId != this.userId;
-    };
-
-    private timeWatcherCallBackFunction: () => void;
-
-    constructor(
-        isAdminOfCourse: boolean,
-        streamId: number,
-        startTime: string,
-        liveNowTimestamp: string,
-        userId: number,
-        userName: string,
-        activateChatReplay: boolean,
-    ) {
-        this.orderByLikes = false;
-        this.disconnected = false;
-        this.current = new NewChatMessage();
-        this.admin = isAdminOfCourse;
-        this.users = new ChatUserList(streamId);
-        this.emojis = new EmojiList();
-        this.messages = [];
-        this.streamId = streamId;
-        this.userId = userId;
-        this.userName = userName;
-        this.poll = new Poll(streamId);
-        this.startTime = Date.parse(startTime) ? new Date(startTime) : null;
-        this.liveNowTimestamp = Date.parse(liveNowTimestamp) ? new Date(liveNowTimestamp) : null;
-        this.focusedMessageId = -1;
-        this.popUpWindow = null;
-        this.showMode = ShowMode.Messages;
-        this.pollHistory = [];
-        this.grayOutMessagesAfterPlayerTime = this.grayOutMessagesAfterPlayerTime.bind(this);
-        this.deregisterPlayerTimeWatcher = this.deregisterPlayerTimeWatcher.bind(this);
-        this.registerPlayerTimeWatcher = this.registerPlayerTimeWatcher.bind(this);
-        this.activateChatReplay = this.activateChatReplay.bind(this);
-        this.deactivateChatReplay = this.deactivateChatReplay.bind(this);
-        if (activateChatReplay) {
-            this.activateChatReplay();
-        } else {
-            this.deactivateChatReplay();
-        }
-        window.addEventListener("beforeunload", () => {
-            this.popUpWindow?.close();
-        });
-    }
-
-    initEmojiPicker(id: string): EmojiPicker {
-        return new EmojiPicker(id);
-    }
-
-    async loadMessages() {
-        this.messages = [];
-        fetchMessages(this.streamId).then((messages) => {
-            messages.forEach((m) => this.addMessage(m));
-        });
-    }
-
-    async loadPollHistory() {
-        this.pollHistory = [];
-        fetch(`/api/chat/${this.streamId}/polls`)
-            .then((r) => r.json())
-            .then((polls) => (this.pollHistory = polls));
-    }
-
-    showMessages(set = false): boolean {
-        this.showMode = set ? ShowMode.Messages : this.showMode;
-        return this.showMode == ShowMode.Messages;
-    }
-
-    showPolls(set = false): boolean {
-        this.showMode = set ? ShowMode.Polls : this.showMode;
-        return this.showMode == ShowMode.Polls;
-    }
-
-    sortMessages() {
-        this.messages = [...this.messages].sort((m1, m2) => {
-            if (this.orderByLikes) {
-                const m1LikeReactionGroup = m1.aggregatedReactions.find(
-                    (r) => r.emojiName === EmojiPicker.LikeEmojiName,
-                );
-                const m1Likes = m1LikeReactionGroup ? m1LikeReactionGroup.reactions.length : 0;
-
-                const m2LikeReactionGroup = m2.aggregatedReactions.find(
-                    (r) => r.emojiName === EmojiPicker.LikeEmojiName,
-                );
-                const m2Likes = m2LikeReactionGroup ? m2LikeReactionGroup.reactions.length : 0;
-
-                if (m1Likes === m2Likes) {
-                    return m2.ID - m1.ID; // same amount of likes -> newer messages up
-                }
-                return m2Likes - m1Likes; // more likes -> up
-            } else {
-                return m1.ID < m2.ID ? -1 : 1; // newest messages last
-            }
-        });
-    }
-
-    onMessage(e) {
-        this.addMessage(e.detail);
-    }
-
-    onDelete(e) {
-        this.messages.find((m) => m.ID === e.detail.delete).deleted = true;
-    }
-
-    onLike(e) {
-        this.messages.find((m) => m.ID === e.detail.likes).likes = e.detail.num;
-    }
-
-    onReaction(e) {
-        const m = this.messages.find((m) => m.ID === e.detail.reactions);
-        m.reactions = e.detail.payload;
-        this.patchMessage(m);
-    }
-
-    onResolve(e) {
-        this.messages.find((m) => m.ID === e.detail.resolve).resolved = true;
-    }
-
-    onReply(e) {
-        this.messages.find((m) => m.ID === e.detail.replyTo.Int64).replies.push(e.detail);
-    }
-
-    onNewPoll(e) {
-        if (!this.current.anonymous) {
-            this.poll.result = null;
-            this.poll.activePoll = { ...e.detail, selected: null };
-        }
-    }
-
-    onPopUpMessagesUpdated(e) {
-        const messagesToUpdate: ChatMessage[] = e.detail;
-        if (messagesToUpdate) {
-            this.messages = [];
-            messagesToUpdate.forEach((message) => this.messages.push(message));
-        }
-    }
-
-    onGrayedOutUpdated(e) {
-        this.messages.find((m) => m.ID === e.detail.ID).isGrayedOut = e.detail.isGrayedOut;
-    }
-
-    onFocusUpdated(e) {
-        this.focusedMessageId = e.detail.ID;
-    }
-
-    onPollOptionVotesUpdate(e) {
-        this.poll.updateVotes(e.detail);
-    }
-
-    onPollOptionResult(e) {
-        this.poll.activePoll = null;
-        this.poll.result = e.detail;
-        // @ts-ignore
-        const id = this.pollHistory.length > 0 ? this.pollHistory[0].ID + 1 : 1;
-        this.pollHistory.unshift({
-            // @ts-ignore
-            ID: id,
-            question: e.detail.question,
-            options: e.detail.pollOptionResults,
-        });
-    }
-
-    onSubmit() {
-        if (this.emojis.isValid()) {
-            window.dispatchEvent(new CustomEvent("chatenter"));
-        } else if (this.users.isValid()) {
-            this.current.addAddressee(this.users.getSelected());
-            this.users.clear();
-        } else {
-            this.current.send();
-        }
-    }
-
-    onInputKeyUp(e) {
-        if (this.emojis.isValid()) {
-            let event = "";
-            switch (e.keyCode) {
-                case 9: {
-                    event = "emojiselectiontriggered";
-                    break;
-                }
-                case 38: {
-                    event = "emojiarrowup";
-                    break;
-                }
-                case 40: {
-                    event = "emojiarrowdown";
-                    break;
-                }
-                default: {
-                    this.emojis.getEmojisForMessage(e.target.value, e.target.selectionStart);
-                    return;
-                }
-            }
-            window.dispatchEvent(new CustomEvent(event));
-        } else if (this.users.isValid()) {
-            switch (e.keyCode) {
-                case 38 /* UP */: {
-                    this.users.prev();
-                    break;
-                }
-                case 40 /* DOWN */: {
-                    this.users.next();
-                    break;
-                }
-                default: {
-                    this.users.filterUsers(e.target.value, e.target.selectionStart);
-                    return;
-                }
-            }
-        } else {
-            this.users.filterUsers(e.target.value, e.target.selectionStart);
-            this.emojis.getEmojisForMessage(e.target.value, e.target.selectionStart);
-        }
-    }
-
-    getInputPlaceHolder(): string {
-        if (this.disconnected) {
-            return "Reconnecting to chat...";
-        }
-        if (this.current.reply.id === 0) {
-            return "Send a message";
-        } else {
-            return "Reply [escape to cancel]";
-        }
-    }
-
-    openChatPopUp(courseSlug: string, streamID: number) {
-        // multiple popup chat windows seem to trigger Alpine.js exceptions
-        // which is probably caused by a race condition during the update of the
-        // chat messages array with the custom event
-        if (this.popUpWindow) {
-            this.popUpWindow.focus();
-            return;
-        }
-        const height = window.innerHeight * 0.8;
-        const popUpWindow = window.open(
-            `/w/${courseSlug}/${streamID}/chat/popup`,
-            "_blank",
-            `popup=yes,width=420,innerWidth=420,height=${height},innerHeight=${height}`,
-        );
-
-        popUpWindow.addEventListener("beforeunload", (_) => {
-            this.popUpWindow = null;
-        });
-
-        popUpWindow.addEventListener("chatinitialized", () => {
-            this.messages.forEach((message) => {
-                const type: MessageUpdateType = "chatupdategrayedout";
-                const payload: MessageUpdate = { ID: message.ID, isGrayedOut: message.isGrayedOut };
-                popUpWindow.dispatchEvent(new CustomEvent(type, { detail: payload }));
-            });
-            const type: MessageUpdateType = "chatupdatefocus";
-            const payload: FocusUpdate = { ID: this.focusedMessageId };
-            popUpWindow.dispatchEvent(new CustomEvent(type, { detail: payload }));
-        });
-
-        this.popUpWindow = popUpWindow;
-    }
-
-    /**
-     * registers for updates regarding current player time
-     */
-    registerPlayerTimeWatcher(): void {
-        this.timeWatcherCallBackFunction = registerTimeWatcher(this.grayOutMessagesAfterPlayerTime);
-    }
-
-    /**
-     * deregisters updates regarding current player time
-     */
-    deregisterPlayerTimeWatcher(): void {
-        if (this.timeWatcherCallBackFunction) {
-            deregisterTimeWatcher(this.timeWatcherCallBackFunction);
-            this.timeWatcherCallBackFunction = null;
-        }
-    }
-
-    activateChatReplay(): void {
-        this.chatReplayActive = true;
-        const currentTime = getPlayers()[0].currentTime();
-        //force update of message focus and grayedOut state
-        this.focusedMessageId = -1;
-        this.grayOutMessagesAfterPlayerTime(currentTime);
-        this.registerPlayerTimeWatcher();
-    }
-
-    deactivateChatReplay(): void {
-        this.chatReplayActive = false;
-        this.deregisterPlayerTimeWatcher();
-        this.messages.map((message) =>
-            this.notifyMessagesUpdate("chatupdategrayedout", { ID: message.ID, isGrayedOut: false }),
-        );
-    }
-
-    /**
-     * Grays out all messages that were not sent at the same time in the livestream.
-     * @param playerTime time offset of current player time w.r.t. video start in seconds
-     */
-    grayOutMessagesAfterPlayerTime(playerTime: number): void {
-        // create new Date instance for a deep copy
-        const referenceTime = new Date(this.liveNowTimestamp ?? this.startTime);
-        if (!referenceTime) {
-            this.deactivateChatReplay();
-        }
-        referenceTime.setSeconds(referenceTime.getSeconds() + playerTime);
-
-        const grayOutCondition = (CreatedAt: string) => {
-            if (Math.trunc(playerTime) === Math.trunc(getPlayers()[0].duration())) {
-                return false;
-            }
-
-            const dateCreatedAt = new Date(CreatedAt);
-            return dateCreatedAt > referenceTime;
-        };
-
-        const grayedOutUpdates: GrayedOutUpdate[] = [];
-        const messagesNotGrayedOut = [];
-        this.messages.forEach((message: ChatMessage) => {
-            if (!message.replyTo.Valid) {
-                const shouldBeGrayedOut = grayOutCondition(message.CreatedAt);
-                if (message.isGrayedOut !== shouldBeGrayedOut) {
-                    grayedOutUpdates.push({ ID: message.ID, isGrayedOut: shouldBeGrayedOut });
-                }
-
-                message.replies.forEach((reply) =>
-                    grayedOutUpdates.push({ ID: reply.ID, isGrayedOut: shouldBeGrayedOut }),
-                );
-
-                if (!shouldBeGrayedOut && message.visible) {
-                    messagesNotGrayedOut.push(message);
-                }
-            }
-        });
-
-        const focusedMessageId: number = messagesNotGrayedOut.pop()?.ID ?? this.messages[0]?.ID;
-        const focusedMessageChanged = this.focusedMessageId !== focusedMessageId;
-
-        if (focusedMessageChanged) {
-            this.notifyMessagesUpdate("chatupdatefocus", { ID: focusedMessageId });
-        }
-
-        grayedOutUpdates.forEach((grayedOutUpdate) =>
-            this.notifyMessagesUpdate("chatupdategrayedout", grayedOutUpdate),
-        );
-    }
-
-    isMessageToBeFocused = (index: number) => this.messages[index].ID === this.focusedMessageId;
-
-    // patchMessage adds the message to the list of messages at the position it should appear in based on the send time.
-    patchMessage(m: ChatMessage): void {
-        if (this.filterPredicate(m)) {
-            this.messages = this.messages.filter((m2) => m2.ID !== m.ID);
-            return;
-        }
-
-        this.preprocessors.forEach((f) => (m = f(m)));
-
-        const newMessageCreatedAt = Date.parse(m.CreatedAt);
-
-        for (let i = 0; i <= this.messages.length; i++) {
-            if (i == this.messages.length) {
-                this.messages.push(m);
-                break;
-            }
-
-            const createdAt = Date.parse(this.messages[i].CreatedAt);
-            if (createdAt === newMessageCreatedAt) {
-                const newRenderVersion = this.messages[i].renderVersion + 1;
-                this.messages.splice(i, 1, { ...m, renderVersion: newRenderVersion });
-                break;
-            }
-        }
-
-        window.dispatchEvent(new CustomEvent("reorder"));
-    }
-
-    findReplyMessage(reply: NewReply): ChatMessage {
-        return reply.isNoReply() ? reply.message : this.messages.find((m) => m.ID === reply.id);
-    }
-
-    private addMessage(m: ChatMessage) {
-        this.preprocessors.forEach((f) => (m = f(m)));
-
-        if (!this.filterPredicate(m)) {
-            this.messages.push(m);
-        }
-    }
-
-    private notifyMessagesUpdate(type: MessageUpdateType, payload: MessageUpdate) {
-        [window, this.popUpWindow].forEach((window: Window) => {
-            window?.dispatchEvent(new CustomEvent(type, { detail: payload }));
-        });
-    }
-}
-
-export async function fetchMessages(streamId: number): Promise<ChatMessage[]> {
-    return await fetch("/api/chat/" + streamId + "/messages")
-        .then((res) => res.json())
-        .then((messages) => {
-            return messages;
-        });
-}
-
-export type ChatMessage = {
-    ID: number;
-    admin: boolean;
-
-    userId: number;
-    message: string;
-    name: string;
-    color: string;
-
-    liked: false;
-    likes: number;
-    reactions: ChatReaction[];
-    aggregatedReactions: ChatReactionGroup[]; // is generated in frontend
-
-    replies: ChatMessage[];
-    replyTo: Reply; // e.g.{Int64:0, Valid:false}
-
-    addressedTo: number[];
-    resolved: boolean;
-    visible: true;
-    deleted: boolean;
-    isGrayedOut: boolean;
-    renderVersion: number;
-
-    CreatedAt: string;
-    DeletedAt: string;
-    UpdatedAt: string;
-};
-
-type ChatReaction = {
-    userID: number;
-    username: string;
-    emoji: string;
-};
-
-type ChatReactionGroup = {
-    emoji: string;
-    emojiName: string;
-    names: string[];
-    namesPretty: string;
-    reactions: ChatReaction[];
-    hasReacted: boolean;
-};
-
-type Reply = {
-    Int64: number;
-    Valid: boolean;
-};
-
-type GrayedOutUpdate = {
-    ID: number;
-    isGrayedOut: boolean;
-};
-
-type FocusUpdate = {
-    ID: number;
-};
-
-type MessageUpdate = FocusUpdate | GrayedOutUpdate;
-type MessageUpdateType = "chatupdatefocus" | "chatupdategrayedout";
diff --git a/web/ts/chat/ChatMessagePreprocessor.ts b/web/ts/chat/ChatMessagePreprocessor.ts
new file mode 100644
index 000000000..4a7fe17f1
--- /dev/null
+++ b/web/ts/chat/ChatMessagePreprocessor.ts
@@ -0,0 +1,82 @@
+import { ChatMessage, ChatReaction, ChatReactionGroup } from "../api/chat";
+import { TopEmojis } from "top-twitter-emojis-map";
+import { User } from "../api/users";
+import { EmojiPicker } from "./EmojiPicker";
+
+export abstract class ChatMessagePreprocessor {
+    static MAX_NAMES_IN_REACTION_TITLE = 2;
+
+    static AggregateReactions(m: ChatMessage, user: User): ChatMessage {
+        m.aggregatedReactions = (m.reactions || [])
+            .reduce((res: ChatReactionGroup[], reaction: ChatReaction) => {
+                let group: ChatReactionGroup = res.find((r) => r.emojiName === reaction.emoji);
+                if (group === undefined) {
+                    group = {
+                        emoji: TopEmojis.find((e) => e.short_names.includes(reaction.emoji)).emoji,
+                        emojiName: reaction.emoji,
+                        reactions: [],
+                        names: [],
+                        namesPretty: "",
+                        hasReacted: reaction.userID === user.ID,
+                    };
+                    res.push(group);
+                } else if (reaction.userID == user.ID) {
+                    console.log("hello");
+                    group.hasReacted = true;
+                }
+
+                group.names.push(reaction.username);
+                group.reactions.push(reaction);
+                return res;
+            }, [])
+            .map((group) => {
+                if (group.names.length === 0) {
+                    // Nobody
+                    group.namesPretty = `Nobody reacted with ${group.emojiName}`;
+                } else if (group.names.length == 1) {
+                    // One Person
+                    group.namesPretty = `${group.names[0]} reacted with ${group.emojiName}`;
+                } else if (group.names.length == ChatMessagePreprocessor.MAX_NAMES_IN_REACTION_TITLE + 1) {
+                    // 1 person more than max allowed
+                    group.namesPretty = `${group.names
+                        .slice(0, ChatMessagePreprocessor.MAX_NAMES_IN_REACTION_TITLE)
+                        .join(", ")} and one other reacted with ${group.emojiName}`;
+                } else if (group.names.length > ChatMessagePreprocessor.MAX_NAMES_IN_REACTION_TITLE) {
+                    // at least 2 more than max allowed
+                    group.namesPretty = `${group.names
+                        .slice(0, ChatMessagePreprocessor.MAX_NAMES_IN_REACTION_TITLE)
+                        .join(", ")} and ${
+                        group.names.length - ChatMessagePreprocessor.MAX_NAMES_IN_REACTION_TITLE
+                    } others reacted with ${group.emojiName}`;
+                } else {
+                    // More than 1 Person but less than MAX_NAMES_IN_REACTION_TITLE
+                    group.namesPretty = `${group.names.slice(0, group.names.length - 1).join(", ")} and ${
+                        group.names[group.names.length - 1]
+                    } reacted with ${group.emojiName}`;
+                }
+                return group;
+            });
+        m.aggregatedReactions.sort(
+            (a, b) => EmojiPicker.getEmojiIndex(a.emojiName) - EmojiPicker.getEmojiIndex(b.emojiName),
+        );
+        return m;
+    }
+
+    static AddressedToCurrentUser(m: ChatMessage, user: User): ChatMessage {
+        if (m.addressedTo.find((uId) => uId === user.ID) !== undefined) {
+            m.message = m.message.replaceAll(
+                "@" + user.name,
+                "<span class = 'text-sky-800 bg-sky-200 text-xs dark:text-indigo-200 dark:bg-indigo-800 p-1 rounded'>" +
+                    "@" +
+                    user.name +
+                    "</span>",
+            );
+        }
+        return m;
+    }
+
+    static GrayOut(m: ChatMessage, user: User): ChatMessage {
+        m.isGrayedOut = true;
+        return m;
+    }
+}
diff --git a/web/ts/chat/ChatMessageSorter.ts b/web/ts/chat/ChatMessageSorter.ts
new file mode 100644
index 000000000..10abfd4e3
--- /dev/null
+++ b/web/ts/chat/ChatMessageSorter.ts
@@ -0,0 +1,27 @@
+import { ChatMessage } from "../api/chat";
+
+export enum ChatSortMode {
+    LiveChat,
+    PopularFirst,
+}
+
+type CompareFn = (a: ChatMessage, b: ChatMessage) => number;
+
+export abstract class ChatMessageSorter {
+    static GetSortFn(sortMode: ChatSortMode): CompareFn {
+        switch (sortMode) {
+            case ChatSortMode.LiveChat:
+                return (a: ChatMessage, b: ChatMessage) => (a.ID < b.ID ? -1 : 1);
+            case ChatSortMode.PopularFirst:
+                return (a: ChatMessage, b: ChatMessage) => {
+                    const likesA = a.getLikes();
+                    const likesB = b.getLikes();
+
+                    if (likesA === likesB) {
+                        return a.ID - b.ID; // same amount of likes -> newer messages up
+                    }
+                    return likesB - likesA; // more likes -> up
+                };
+        }
+    }
+}
diff --git a/web/ts/chat/ChatUserList.ts b/web/ts/chat/ChatUserList.ts
deleted file mode 100644
index 0dbed2c78..000000000
--- a/web/ts/chat/ChatUserList.ts
+++ /dev/null
@@ -1,70 +0,0 @@
-import { getCurrentWordPositions } from "./misc";
-import { ChatUser } from "./NewChatMessage";
-
-export class ChatUserList {
-    subset: ChatUser[];
-    streamId: number;
-    currIndex: number;
-    valid: boolean;
-    private all: object[];
-
-    constructor(streamId: number) {
-        this.all = this.subset = [];
-        this.streamId = streamId;
-        this.currIndex = 0;
-        this.valid = false;
-    }
-
-    async LoadAll(): Promise<ChatUser[]> {
-        return fetch(`/api/chat/${this.streamId}/users`).then((res) => res.json());
-    }
-
-    isValid(): boolean {
-        return this.subset.length >= 0 && this.valid;
-    }
-
-    filterUsers(message: string, cursorPos: number) {
-        const pos = getCurrentWordPositions(message, cursorPos);
-        if (pos[0] === 0 && pos[1] === 0) {
-            // substring(0,0) returns ''
-            pos[1] = 1;
-        }
-
-        const currentWord = message.substring(pos[0], pos[1]);
-        if (message === "" || !currentWord.startsWith("@")) {
-            this.subset = [];
-            this.valid = false;
-            return;
-        }
-
-        if (currentWord === "@") {
-            // load users on '@'
-            this.LoadAll().then((users) => {
-                this.all = this.subset = users;
-            });
-        } else {
-            const input = currentWord.substring(1);
-            // @ts-ignore
-            this.subset = this.all.filter((user) => user.name.startsWith(input));
-        }
-        this.valid = true;
-        this.currIndex = 0; // reset index on show
-    }
-
-    clear() {
-        this.subset = [];
-        this.valid = false;
-    }
-
-    next() {
-        this.currIndex = (this.currIndex + 1) % this.subset.length;
-    }
-
-    prev() {
-        this.currIndex = (this.currIndex - 1) % this.subset.length;
-    }
-
-    getSelected() {
-        return this.subset[this.currIndex];
-    }
-}
diff --git a/web/ts/chat/EmojiList.ts b/web/ts/chat/EmojiList.ts
deleted file mode 100644
index d5f0d573a..000000000
--- a/web/ts/chat/EmojiList.ts
+++ /dev/null
@@ -1,85 +0,0 @@
-import { Emoji, TopEmojis } from "top-twitter-emojis-map";
-import { getCurrentWordPositions } from "./misc";
-
-export class EmojiList {
-    suggestions: Emoji[];
-    emojiIndex: number;
-
-    constructor() {
-        this.suggestions = [];
-        this.emojiIndex = 0;
-    }
-
-    isValid(): boolean {
-        return this.suggestions.length > 0;
-    }
-    onSuggestions(e) {
-        this.suggestions = e.detail;
-    }
-
-    onSelectionTriggered(e) {
-        if (this.isValid()) {
-            this.insertEmoji(this.suggestions[this.emojiIndex]);
-        }
-    }
-
-    onArrowDown(e) {
-        if (this.isValid()) {
-            this.emojiIndex = (this.emojiIndex + 1) % this.suggestions.length;
-        }
-    }
-
-    onArrowUp(e) {
-        if (this.isValid()) {
-            this.emojiIndex = (this.emojiIndex - 1) % this.suggestions.length;
-        }
-    }
-
-    onInserted(e) {
-        this.suggestions = [];
-        this.emojiIndex = 0;
-    }
-
-    onChatEnter(e) {
-        let event = "sendmessage";
-        if (this.isValid()) {
-            event = "emojiselectiontriggered";
-        }
-
-        window.dispatchEvent(new CustomEvent(event));
-    }
-
-    getEmojisForMessage(message: string, cursorPos: number) {
-        const pos = getCurrentWordPositions(message, cursorPos);
-        const currentWord = message.substring(pos[0], pos[1]);
-        if (!currentWord.startsWith(":") || currentWord.length < 2) {
-            window.dispatchEvent(new CustomEvent("emojisuggestions", { detail: [] }));
-            return;
-        }
-
-        const emojis = this.findEmojisForInput(currentWord.substring(1));
-        window.dispatchEvent(new CustomEvent("emojisuggestions", { detail: emojis }));
-    }
-
-    private findEmojisForInput(input: string): Emoji[] {
-        return TopEmojis.filter((emoji) => {
-            return emoji.short_names.some((key) => key.startsWith(input));
-        }).slice(0, 7);
-    }
-
-    private insertEmoji(emoji: Emoji) {
-        const chatInput: HTMLInputElement = document.getElementById("chatInput") as HTMLInputElement;
-        const pos = getCurrentWordPositions(chatInput.value, chatInput.selectionStart);
-        // send new message to alpine
-        window.dispatchEvent(
-            new CustomEvent("setmessage", {
-                detail: chatInput.value.substring(0, pos[0]) + emoji.emoji + " " + chatInput.value.substring(pos[1]),
-            }),
-        );
-        chatInput.focus();
-        chatInput.selectionStart = pos[0] + emoji.emoji.length + 1; // +1 for space
-        chatInput.selectionEnd = pos[0] + emoji.emoji.length + 1;
-        // notify alpine to remove emoji suggestions
-        window.dispatchEvent(new CustomEvent("emojisinserted"));
-    }
-}
diff --git a/web/ts/chat/NewChatMessage.ts b/web/ts/chat/NewChatMessage.ts
deleted file mode 100644
index efb79ecda..000000000
--- a/web/ts/chat/NewChatMessage.ts
+++ /dev/null
@@ -1,88 +0,0 @@
-import { sendMessage } from "../watch";
-import { getCurrentWordPositions } from "./misc";
-import { Chat, ChatMessage } from "./Chat";
-
-export class NewChatMessage {
-    message: string;
-    reply: NewReply;
-    anonymous: boolean;
-    addressedTo: ChatUser[];
-
-    constructor() {
-        this.anonymous = false;
-        this.clear();
-    }
-
-    send(): void {
-        sendMessage(this);
-        this.clear();
-    }
-
-    clear(): void {
-        this.message = "";
-        this.reply = NewReply.NoReply;
-        this.addressedTo = [];
-    }
-
-    setReply(m: ChatMessage) {
-        this.reply = new NewReply(m);
-    }
-
-    cancelReply() {
-        this.reply = NewReply.NoReply;
-    }
-
-    showReplyMenu() {
-        return !this.reply.isNoReply();
-    }
-
-    showReplyButton(messageId: number): boolean {
-        return this.reply.isNoReply() || this.reply.id !== messageId;
-    }
-
-    isEmpty(): boolean {
-        return this.message === "";
-    }
-
-    parse(): void {
-        // remove unused @username's from addressee list
-        this.addressedTo = this.addressedTo.filter((user) => this.message.includes(`@${user.name}`));
-    }
-
-    addAddressee(user: ChatUser): void {
-        const chatInput: HTMLInputElement = document.getElementById("chatInput") as HTMLInputElement;
-        const pos = getCurrentWordPositions(this.message, chatInput.selectionStart);
-
-        // replace message with username e.g. 'Hello @Ad' to 'Hello @Admin':
-        this.message =
-            this.message.substring(0, pos[0]) +
-            this.message.substring(pos[0], pos[1]).replace(/@(\w)*/, "@" + user.name) +
-            " " +
-            this.message.substring(pos[1] + this.message.substring(pos[0], pos[1]).length);
-
-        chatInput.focus();
-
-        this.addressedTo.push(user);
-    }
-}
-
-export type ChatUser = {
-    id: number;
-    name: string;
-};
-
-export class NewReply {
-    message: ChatMessage;
-    id: number;
-
-    static NoReply = new NewReply({ ID: 0 } as ChatMessage);
-
-    constructor(message: ChatMessage) {
-        this.message = message;
-        this.id = message.ID;
-    }
-
-    isNoReply(): boolean {
-        return this.id === 0;
-    }
-}
diff --git a/web/ts/chat/Poll.ts b/web/ts/chat/Poll.ts
deleted file mode 100644
index 2b2fd2996..000000000
--- a/web/ts/chat/Poll.ts
+++ /dev/null
@@ -1,68 +0,0 @@
-import { startPoll } from "../watch";
-
-export class Poll {
-    readonly streamId: number;
-
-    activePoll: object;
-    result: object;
-    showCreateUI: boolean;
-    question: string;
-    options: object[];
-
-    constructor(streamId: number) {
-        this.streamId = streamId;
-        this.activePoll = null;
-        this.result = null;
-        this.reset();
-    }
-
-    start() {
-        startPoll(
-            this.question,
-            // @ts-ignore
-            this.options.map(({ answer }) => answer),
-        );
-        this.reset();
-    }
-
-    async load() {
-        this.activePoll = await fetch("/api/chat/" + this.streamId + "/active-poll")
-            .then((res) => {
-                if (!res.ok) {
-                    throw Error(res.statusText);
-                }
-                return res;
-            })
-            .then((res) => res.json())
-            .catch((err) => undefined); // return undefined if error
-    }
-
-    addEmptyOption() {
-        this.options.push({ answer: "" });
-    }
-
-    removeOption(option: object) {
-        this.options = this.options.filter((o) => o !== option);
-    }
-
-    updateVotes(vote: PollVote) {
-        // @ts-ignore
-        this.activePoll.pollOptions =
-            // @ts-ignore
-            this.activePoll.pollOptions.map((pollOption) =>
-                // @ts-ignore
-                pollOption.ID === vote.pollOptionId ? { ...pollOption, votes: vote.votes } : pollOption,
-            );
-    }
-
-    private reset() {
-        this.question = "";
-        this.options = [{ answer: "Yes" }, { answer: "No" }];
-        this.showCreateUI = false;
-    }
-}
-
-type PollVote = {
-    pollOptionId: number;
-    votes: number;
-};
diff --git a/web/ts/components/alpine-component.ts b/web/ts/components/alpine-component.ts
index 537acf853..91d9f8308 100644
--- a/web/ts/components/alpine-component.ts
+++ b/web/ts/components/alpine-component.ts
@@ -1,3 +1,3 @@
-export interface AlpineComponent {
-    init(): void;
+export abstract class AlpineComponent {
+    abstract init(): void;
 }
diff --git a/web/ts/components/chat-prompt.ts b/web/ts/components/chat-prompt.ts
new file mode 100644
index 000000000..94d524a53
--- /dev/null
+++ b/web/ts/components/chat-prompt.ts
@@ -0,0 +1,244 @@
+import { AlpineComponent } from "./alpine-component";
+import { Emoji, TopEmojis } from "top-twitter-emojis-map";
+import { getCurrentWordPositions } from "../chat/misc";
+import { SocketConnections, ChatWebsocketConnection } from "../api/chat-ws";
+import { ChatAPI, ChatMessage } from "../api/chat";
+import { SetReply, Tunnel } from "../utilities/tunnels";
+import { isAlphaNumeric, isSpacebar } from "../utilities/keycodes";
+import { ToggleableElement } from "../utilities/ToggleableElement";
+
+export function chatPromptContext(streamId: number): AlpineComponent {
+    return {
+        message: "" as string,
+        isAnonymous: false as boolean,
+        addressedTo: [] as ChatUser[],
+        reply: NewReply.NoReply,
+
+        emojis: new EmojiSuggestions(),
+        users: new UserSuggestions(streamId),
+
+        showOptions: new ToggleableElement(),
+
+        ws: new ChatWebsocketConnection(SocketConnections.ws),
+
+        inputEl: document.getElementById("chat-input") as HTMLInputElement,
+        usersEl: document.getElementById("chat-user-list") as HTMLInputElement,
+        emojiEl: document.getElementById("chat-emoji-list") as HTMLInputElement,
+
+        init() {
+            console.log("🌑 init chat prompt");
+            const callback = (sr: SetReply) => this.setReply(sr);
+            Tunnel.reply.subscribe(callback);
+
+            this.inputEl.focus();
+        },
+
+        reset() {
+            this.message = "";
+            this.addressedTo = [];
+            this.reply = NewReply.NoReply;
+            this.emojis.reset();
+            this.users.reset();
+        },
+
+        send() {
+            console.log("🌑 send message '", this.message, "'");
+            this.ws.sendMessage({
+                msg: this.message,
+                anonymous: this.isAnonymous,
+                replyTo: this.reply.id,
+                addressedTo: this.addressedTo.map((u) => u.id),
+            });
+            this.reset();
+        },
+
+        addEmoji(emoji: string) {
+            const pos = getCurrentWordPositions(this.inputEl.value, this.inputEl.selectionStart);
+            this.message = this.message.substring(0, pos[0]) + emoji + " " + this.message.substring(pos[1]);
+            this.emojis.reset();
+            this.inputEl.focus();
+        },
+
+        addAddressee(user: ChatUser): void {
+            const pos = getCurrentWordPositions(this.inputEl.value, this.inputEl.selectionStart);
+
+            // replace message with username e.g. 'Hello @Ad' to 'Hello @Admin':
+            this.message =
+                this.message.substring(0, pos[0]) +
+                this.message.substring(pos[0], pos[1]).replace(/@(\w)*/, "@" + user.name) +
+                " " +
+                this.message.substring(pos[1] + this.message.substring(pos[0], pos[1]).length);
+
+            this.addressedTo.push(user);
+            this.users.reset();
+            this.inputEl.focus();
+        },
+
+        keyup() {
+            this.addressedTo = this.addressedTo.filter((user) => this.message.includes(`@${user.name}`));
+            this.emojis.getSuggestionsForMessage(this.inputEl.value, this.inputEl.selectionStart);
+            this.users.getSuggestionsForMessage(this.inputEl.value, this.inputEl.selectionStart);
+
+            if (this.users.hasSuggestions()) {
+                this.usersEl.focus();
+            } else if (this.emojis.hasSuggestions()) {
+                this.emojiEl.focus();
+            }
+        },
+
+        keypressAlphanumeric(e) {
+            if (isAlphaNumeric(e.keyCode) || isSpacebar(e.keyCode)) {
+                this.inputEl.focus();
+            }
+        },
+
+        backspace() {
+            this.message = this.message.substring(0, this.message.length - 1);
+            this.inputEl.focus();
+
+            this.addressedTo = this.addressedTo.filter((user) => this.message.includes(`@${user.name}`));
+            this.emojis.getSuggestionsForMessage(this.message, this.inputEl.selectionStart);
+            this.users.getSuggestionsForMessage(this.message, this.inputEl.selectionStart);
+        },
+
+        setReply(sr: SetReply) {
+            this.reset();
+            this.reply = new NewReply(sr.message);
+            this.inputEl.focus();
+        },
+
+        cancelReply() {
+            this.reply = NewReply.NoReply;
+        },
+
+        openPopOut() {
+            const height = window.innerHeight * 0.8;
+            window.open(
+                `${window.location.href}/chat/popup`,
+                "tumlive-popout",
+                `popup=yes,width=420,innerWidth=420,height=${height},innerHeight=${height}`,
+            );
+        },
+    } as AlpineComponent;
+}
+
+export class EmojiSuggestions {
+    suggestions: Emoji[];
+    index: number;
+
+    constructor() {
+        this.suggestions = [];
+        this.index = 0;
+    }
+
+    hasSuggestions(): boolean {
+        return this.suggestions.length > 0;
+    }
+
+    getSuggestionsForMessage(message: string, cursorPos: number) {
+        const limit = 7;
+        const pos = getCurrentWordPositions(message, cursorPos);
+        const currentWord = message.substring(pos[0], pos[1]);
+
+        if (!currentWord.startsWith(":") || currentWord.length < 2) {
+            this.suggestions = [];
+        } else {
+            this.suggestions = TopEmojis.filter((emoji) => {
+                return emoji.short_names.some((key) => key.startsWith(currentWord.substring(1)));
+            }).slice(0, limit);
+        }
+    }
+
+    selected(): Emoji {
+        return this.suggestions[this.index];
+    }
+
+    next() {
+        this.index = (this.index + 1) % this.suggestions.length;
+        console.log(this.index);
+    }
+
+    prev() {
+        this.index = (this.index - 1) % this.suggestions.length;
+    }
+
+    reset() {
+        this.suggestions = [];
+        this.index = 0;
+    }
+}
+
+export class UserSuggestions {
+    private all: ChatUser[];
+    private readonly streamId: number;
+
+    index: number;
+
+    suggestions: ChatUser[];
+
+    constructor(streamId: number) {
+        this.all = this.suggestions = [];
+        this.streamId = streamId;
+        this.index = 0;
+    }
+
+    hasSuggestions(): boolean {
+        return this.suggestions.length > 0;
+    }
+
+    getSuggestionsForMessage(message: string, cursorPos: number) {
+        const pos = getCurrentWordPositions(message, cursorPos);
+        // substring(0,0) returns ''
+        if (pos[0] === 0 && pos[1] === 0) pos[1] = 1;
+
+        const currentWord = message.substring(pos[0], pos[1]);
+        if (message === "" || !currentWord.startsWith("@")) {
+            this.suggestions = [];
+        } else if (currentWord === "@") {
+            // load users on '@'
+            ChatAPI.getUsers(this.streamId).then((users) => {
+                this.all = this.suggestions = users;
+            });
+        } else {
+            this.suggestions = this.all.filter((user) => user.name.startsWith(currentWord.substring(1)));
+        }
+    }
+
+    selected(): ChatUser {
+        return this.suggestions[this.index];
+    }
+
+    next() {
+        this.index = (this.index + 1) % this.suggestions.length;
+    }
+
+    prev() {
+        this.index = (this.index - 1) % this.suggestions.length;
+    }
+
+    reset() {
+        this.suggestions = [];
+        this.index = 0;
+    }
+}
+
+type ChatUser = {
+    id: number;
+    name: string;
+};
+
+class NewReply {
+    message: ChatMessage;
+    id: number;
+
+    static NoReply = new NewReply({ ID: 0 } as ChatMessage);
+
+    constructor(message: ChatMessage) {
+        this.message = message;
+        this.id = message.ID;
+    }
+
+    isNoReply(): boolean {
+        return this.id === 0;
+    }
+}
diff --git a/web/ts/components/chat.ts b/web/ts/components/chat.ts
new file mode 100644
index 000000000..e260f88c2
--- /dev/null
+++ b/web/ts/components/chat.ts
@@ -0,0 +1,297 @@
+import { AlpineComponent } from "./alpine-component";
+import { ChatAPI, ChatMessage, ChatMessageArray, ChatReaction } from "../api/chat";
+import { ChatMessageSorter, ChatSortMode } from "../chat/ChatMessageSorter";
+import { ChatMessagePreprocessor } from "../chat/ChatMessagePreprocessor";
+import { ChatWebsocketConnection, SocketConnections } from "../api/chat-ws";
+import { User } from "../api/users";
+import { Tunnel } from "../utilities/tunnels";
+import Alpine from "alpinejs";
+import { ToggleableElement } from "../utilities/ToggleableElement";
+import { VideoJsPlayer } from "video.js";
+import { registerTimeWatcher, deregisterTimeWatcher } from "../video/watchers";
+
+export function chatContext(streamId: number, user: User, isRecording: boolean): AlpineComponent {
+    return {
+        streamId: streamId as number,
+        user: user as User,
+        isRecording: isRecording,
+
+        chatSortMode: ChatSortMode.LiveChat,
+        chatSortFn: ChatMessageSorter.GetSortFn(ChatSortMode.LiveChat),
+        messages: ChatMessageArray.EmptyArray() as ChatMessageArray,
+
+        ws: new ChatWebsocketConnection(SocketConnections.ws),
+
+        chatBoxEl: document.getElementById("chat-box") as HTMLInputElement,
+
+        status: true,
+        serverMessage: {},
+        unreadMessages: false,
+
+        attachedPlayer: undefined as VideoJsPlayer,
+        streamStart: undefined as Date,
+        replay: ChatReplay.get(),
+
+        showSortSelect: new ToggleableElement(),
+
+        preprocessors: [ChatMessagePreprocessor.AggregateReactions, ChatMessagePreprocessor.AddressedToCurrentUser],
+
+        __initpromise: null as Promise<never>,
+        async init() {
+            this.__initpromise = Promise.all([this.loadMessages(), this.initWebsocket()]);
+        },
+
+        afterInitNotPopout(player: VideoJsPlayer, streamStart: string) {
+            if (this.isRecording) {
+                this.__initpromise.then(() => {
+                    this.preprocessors.push(ChatMessagePreprocessor.GrayOut);
+                    this.messages.forEach((msg, _) => this.preprocessors.forEach((f) => f(msg, this.user)));
+                    this.replay.activate(player, this.updateGrayedOut.bind(this));
+                });
+            } else {
+                Alpine.nextTick(() => this.scrollToBottom());
+            }
+            this.attachedPlayer = player;
+            this.streamStart = new Date(streamStart);
+        },
+
+        afterInitPopout() {
+            this.__initpromise.then(() => {
+                // eslint-disable-next-line @typescript-eslint/no-empty-function
+                this.deactivateReplay = () => {}; // for the popout chat this is simply a NOOP
+                this.messages.forEach((msg, _) => this.preprocessors.forEach((f) => f(msg, this.user)));
+                Alpine.nextTick(() => this.scrollToBottom());
+            });
+        },
+
+        sortLiveFirst() {
+            this.deactivateReplay();
+            this.chatSortMode = ChatSortMode.LiveChat;
+            this.chatSortFn = ChatMessageSorter.GetSortFn(ChatSortMode.LiveChat);
+            Alpine.nextTick(() => this.scrollToBottom());
+        },
+
+        isLiveFirst(): boolean {
+            return this.chatSortMode === ChatSortMode.LiveChat;
+        },
+
+        sortPopularFirst() {
+            this.deactivateReplay();
+            this.chatSortMode = ChatSortMode.PopularFirst;
+            this.chatSortFn = ChatMessageSorter.GetSortFn(ChatSortMode.PopularFirst);
+            Alpine.nextTick(() => this.scrollToTop());
+        },
+
+        isPopularFirst(): boolean {
+            return this.chatSortMode === ChatSortMode.PopularFirst;
+        },
+
+        toggleReplay() {
+            if (this.isReplaying()) this.deactivateReplay();
+            else {
+                this.messages.forEach((msg: ChatMessage, _) => (msg.isGrayedOut = true));
+                this.replay.activate(this.attachedPlayer, this.updateGrayedOut.bind(this));
+            }
+        },
+
+        isReplaying(): boolean {
+            return this.replay.isActivated();
+        },
+
+        activateReplay() {
+            this.preprocessors.push(ChatMessagePreprocessor.GrayOut);
+            this.messages.forEach((msg: ChatMessage, _) => (msg.isGrayedOut = true));
+            this.replay.activate(this.attachedPlayer, this.updateGrayedOut.bind(this));
+        },
+
+        deactivateReplay() {
+            this.preprocessors.pop(); // Remove GrayOut
+            this.messages.forEach((msg: ChatMessage, _) => (msg.isGrayedOut = false));
+            this.replay.deactivate(this.attachedPlayer);
+        },
+
+        reactToMessage(id: number, reaction: string) {
+            return this.ws.reactToMessage(id, reaction);
+        },
+
+        setReply(message: ChatMessage) {
+            Tunnel.reply.add({ message });
+        },
+
+        setStatus(status = false) {
+            this.status = status;
+        },
+
+        hasServerMessage() {
+            return Object.keys(this.serverMessage).length > 0;
+        },
+
+        hideServerMessage() {
+            this.serverMessage = {};
+        },
+
+        isConnected() {
+            return this.status;
+        },
+
+        async initWebsocket() {
+            const handler = (data) => {
+                if ("message" in data) {
+                    this.handleNewMessage(data);
+                } else if ("delete" in data) {
+                    this.handleDelete(data.delete);
+                } else if ("resolve" in data) {
+                    this.handleResolve(data.resolve);
+                } else if ("approve" in data) {
+                    this.handleApprove(data.chat);
+                } else if ("retract" in data) {
+                    this.handleRetract(data.chat);
+                } else if ("reactions" in data) {
+                    this.handleReaction(data);
+                } else if ("server" in data) {
+                    this.handleServerMessage(data);
+                }
+            };
+            SocketConnections.ws.addHandler(handler);
+        },
+
+        async loadMessages() {
+            this.messages = await ChatAPI.getMessages(this.streamId);
+        },
+
+        handleNewMessage(msg: ChatMessage) {
+            msg["replies"] = []; // go serializes this empty list as `null`
+            if (msg["replyTo"].Valid) {
+                console.log("🌑 received reply", msg);
+                this.messages.pushReply(msg);
+            } else {
+                const sib = this.scrollIsBottom();
+
+                console.log("🌑 received message", msg);
+                this.preprocessors.forEach((f) => f(msg, this.user));
+                this.messages.pushMessage(msg);
+
+                const cb = () => {
+                    if (sib) this.scrollToBottom();
+                    else {
+                        this.unreadMessages = true;
+                    }
+                };
+                Alpine.nextTick(cb);
+            }
+        },
+
+        scrollIsBottom(delta = 128) {
+            return (
+                Math.abs(this.chatBoxEl.scrollHeight - this.chatBoxEl.clientHeight - this.chatBoxEl.scrollTop) < delta
+            );
+        },
+
+        scrollToBottom() {
+            this.chatBoxEl.scrollTo({ top: this.chatBoxEl.scrollHeight, behavior: "smooth" });
+            this.unreadMessages = false;
+        },
+
+        scrollToTop() {
+            this.chatBoxEl.scrollTo({ top: 0, behavior: "smooth" });
+        },
+
+        scrollToMessage(id: number) {
+            document
+                .getElementById("chat-message-" + id)
+                .scrollIntoView({ behavior: "smooth", block: "end", inline: "nearest" });
+        },
+
+        updateGrayedOut(t: number) {
+            let next;
+            const referenceTime = new Date(this.streamStart);
+            referenceTime.setSeconds(referenceTime.getSeconds() + t);
+
+            const grayOutCondition = (createdAt: string) => {
+                return (
+                    Math.trunc(t) !== Math.trunc(this.attachedPlayer.duration()) && new Date(createdAt) > referenceTime
+                );
+            };
+
+            this.messages.forEach((msg: ChatMessage, _) => {
+                msg.isGrayedOut = grayOutCondition(msg.CreatedAt);
+                if (!msg.isGrayedOut) next = msg;
+            });
+
+            if (next) this.scrollToMessage(next.ID);
+            else this.scrollToTop();
+        },
+
+        handleDelete(messageId: number) {
+            this.messages.delete({ ID: messageId });
+        },
+
+        handleResolve(messageId: number) {
+            this.messages.resolve({ ID: messageId });
+        },
+
+        handleApprove(msg: ChatMessage) {
+            this.preprocessors.forEach((f) => f(msg, this.user));
+            this.messages.approve(msg);
+        },
+
+        handleRetract(msg: ChatMessage) {
+            this.messages.retract(msg, this.user.isAdmin);
+        },
+
+        handleReaction(reaction: { reactions: number; payload: ChatReaction[] }) {
+            console.log("🌑 received reaction", reaction);
+            this.messages.setReaction(reaction, this.user);
+        },
+
+        handleServerMessage(msg: { server: string; type: string }) {
+            console.log("🌑 received server message", msg);
+            this.serverMessage = { msg: msg.server };
+        },
+
+        deleteMessage(id: number) {
+            return this.ws.deleteMessage(id);
+        },
+
+        approveMessage(id: number) {
+            return this.ws.approveMessage(id);
+        },
+
+        retractMessage(id: number) {
+            return this.ws.retractMessage(id);
+        },
+
+        resolveMessage(id: number) {
+            return this.ws.resolveMessage(id);
+        },
+    } as AlpineComponent;
+}
+
+class ChatReplay {
+    private static instance: ChatReplay;
+    static get(): ChatReplay {
+        if (this.instance == null) this.instance = new ChatReplay();
+        return this.instance;
+    }
+
+    private activated: boolean;
+    private callback: () => void;
+
+    constructor() {
+        this.activated = false;
+    }
+
+    isActivated(): boolean {
+        return this.activated;
+    }
+
+    deactivate(player: VideoJsPlayer) {
+        this.activated = false;
+        deregisterTimeWatcher(player, this.callback);
+    }
+
+    activate(player: VideoJsPlayer, callback: (t: number) => void) {
+        this.activated = true;
+        this.callback = registerTimeWatcher(player, callback);
+    }
+}
diff --git a/web/ts/components/course.ts b/web/ts/components/course.ts
index 710d9ab45..a17bb58f9 100644
--- a/web/ts/components/course.ts
+++ b/web/ts/components/course.ts
@@ -1,7 +1,7 @@
 import { Course, CoursesAPI, Stream } from "../api/courses";
 import { ProgressAPI } from "../api/progress";
 import { Paginator } from "../utilities/paginator";
-import { HasPinnedCourseDTO, UserAPI } from "../api/user";
+import { HasPinnedCourseDTO, UserAPI } from "../api/users";
 import { copyToClipboard } from "../utilities/input-interactions";
 import { AlpineComponent } from "./alpine-component";
 import { Tunnel } from "../utilities/tunnels";
diff --git a/web/ts/components/emoji-picker.ts b/web/ts/components/emoji-picker.ts
new file mode 100644
index 000000000..f3c6d2630
--- /dev/null
+++ b/web/ts/components/emoji-picker.ts
@@ -0,0 +1,15 @@
+import { AlpineComponent } from "./alpine-component";
+import { TopEmojis } from "top-twitter-emojis-map";
+
+export function emojiPickerContext(id: number): AlpineComponent {
+    return {
+        id: id,
+
+        emojiSuggestions: ["👍", "👎", "😄", "🎉", "😕", "❤️", "👀"].map((e) =>
+            TopEmojis.find(({ emoji }) => emoji === e),
+        ),
+
+        // eslint-disable-next-line @typescript-eslint/no-empty-function
+        init() {},
+    } as AlpineComponent;
+}
diff --git a/web/ts/components/poll.ts b/web/ts/components/poll.ts
new file mode 100644
index 000000000..be25c7f04
--- /dev/null
+++ b/web/ts/components/poll.ts
@@ -0,0 +1,140 @@
+import { AlpineComponent } from "./alpine-component";
+import { SocketConnections } from "../api/chat-ws";
+import { PollMessageType, PollWebsocketConnection } from "../api/poll-ws";
+import { ChatAPI, Poll, PollOption } from "../api/chat";
+import { ToggleableElement } from "../utilities/ToggleableElement";
+
+export function pollContext(streamId: number): AlpineComponent {
+    return {
+        streamId: streamId,
+
+        // current poll
+        activePoll: null as Poll,
+
+        // create new poll
+        showCreateUI: new ToggleableElement(),
+        newPoll: new NewPoll(),
+
+        // poll history
+        history: [] as Poll[],
+
+        ws: new PollWebsocketConnection(SocketConnections.ws),
+
+        async init() {
+            Promise.all([this.loadActivePoll(), this.loadHistory(), this.initWebsocket()]);
+        },
+
+        async initWebsocket() {
+            const handler = (data) => {
+                const type = data.type;
+                if (type === PollMessageType.StartPoll) {
+                    this.handleNewPoll(data);
+                } else if (type === PollMessageType.SubmitPollOptionVote) {
+                    this.handleParticipation(data);
+                } else if (type === PollMessageType.CloseActivePoll) {
+                    this.handleClosePoll(data);
+                }
+            };
+            SocketConnections.ws.addHandler(handler);
+        },
+
+        async loadActivePoll() {
+            this.activePoll = await ChatAPI.getActivePoll(this.streamId);
+        },
+
+        async loadHistory() {
+            this.history = await ChatAPI.getPolls(this.streamId);
+        },
+
+        hasActivePoll(): boolean {
+            return this.activePoll !== null && this.activePoll !== undefined && this.activePoll.ID !== -1;
+        },
+
+        closeActivePoll() {
+            this.ws.closeActivePoll();
+            this.activePoll = null;
+        },
+
+        startPoll() {
+            this.showCreateUI.toggle(false);
+            this.ws.startPoll(this.newPoll.question, this.newPoll.getOptionStrings());
+            this.newPoll.reset();
+        },
+
+        cancelPoll() {
+            this.showCreateUI.toggle(false);
+            this.newPoll.reset();
+        },
+
+        submitPollOptionVote(pollOptionId: number) {
+            this.ws.submitPollOptionVote(pollOptionId);
+            this.activePoll.submitted = this.activePoll.selected;
+            this.activePoll.selected = null;
+        },
+
+        handleNewPoll(data: object) {
+            console.log("🌑 starting new poll", data);
+            this.activePoll = Object.assign(new Poll(), data);
+        },
+
+        handleParticipation(vote: PollVote) {
+            this.activePoll.options = this.activePoll.options.map((opt) =>
+                opt.ID === vote.pollOptionId ? { ...opt, votes: vote.votes } : opt,
+            );
+        },
+
+        handleClosePoll(result) {
+            console.log("🌑 close poll", result);
+            this.activePoll = null;
+
+            this.history.unshift(
+                Object.assign(new Poll(), {
+                    ID: this.history.length > 0 ? this.history[0].ID + 1 : 1,
+                    question: result.question,
+                    options: result.options,
+                }),
+            );
+        },
+    } as AlpineComponent;
+}
+
+class NewPoll {
+    question: string;
+    options: object[];
+
+    constructor() {
+        this.reset();
+    }
+
+    getOptionStrings(): string[] {
+        // @ts-ignore
+        return this.options.map(({ answer }) => answer);
+    }
+
+    isValid(): boolean {
+        // @ts-ignore
+        return this.question.length === 0 || this.options.some(({ answer }) => answer.length === 0);
+    }
+
+    addEmptyOption() {
+        this.options.push({ answer: "" });
+    }
+
+    removeOption(i: number) {
+        this.options.splice(i, 1);
+    }
+
+    onlyOneOption() {
+        return this.options.length === 1;
+    }
+
+    reset() {
+        this.question = "";
+        this.options = [{ answer: "Yes" }, { answer: "No" }];
+    }
+}
+
+type PollVote = {
+    pollOptionId: number;
+    votes: number;
+};
diff --git a/web/ts/components/video-information.ts b/web/ts/components/video-information.ts
new file mode 100644
index 000000000..0917ceb61
--- /dev/null
+++ b/web/ts/components/video-information.ts
@@ -0,0 +1,45 @@
+import { AlpineComponent } from "./alpine-component";
+import { SocketConnections } from "../api/chat-ws";
+import { ToggleableElement } from "../utilities/ToggleableElement";
+
+const CUTOFFLENGTH = 256;
+
+export function videoInformationContext(): AlpineComponent {
+    // TODO: REST
+    const descriptionEl = document.getElementById("description") as HTMLInputElement;
+    return {
+        viewers: 0 as number,
+        description: descriptionEl.value as string,
+        less: descriptionEl.value.length > CUTOFFLENGTH,
+
+        showFullDescription: new ToggleableElement(),
+
+        init() {
+            Promise.all([this.initWebsocket()]);
+        },
+
+        hasDescription(): boolean {
+            return this.description.length > 0;
+        },
+
+        async initWebsocket() {
+            const handler = (data) => {
+                if ("viewers" in data) {
+                    this.handleViewersUpdate(data);
+                } else if ("description" in data) {
+                    this.handleDescriptionUpdate(data);
+                }
+            };
+            SocketConnections.ws.addHandler(handler);
+        },
+
+        handleViewersUpdate(upd: { viewers: number }) {
+            this.viewers = upd.viewers;
+        },
+
+        handleDescriptionUpdate(upd: { description: { full: string } }) {
+            this.less = upd.description.full.length > CUTOFFLENGTH;
+            this.description = upd.description.full;
+        },
+    } as AlpineComponent;
+}
diff --git a/web/ts/components/video-interaction.ts b/web/ts/components/video-interaction.ts
new file mode 100644
index 000000000..fe88f4b01
--- /dev/null
+++ b/web/ts/components/video-interaction.ts
@@ -0,0 +1,47 @@
+import { AlpineComponent } from "./alpine-component";
+import { User } from "../api/users";
+import { SocketConnections } from "../api/chat-ws";
+
+enum InteractionType {
+    Chat,
+    Polls,
+}
+
+export function videoInteractionContext(user: User) {
+    return {
+        type: InteractionType.Chat,
+        user: user as User,
+
+        init() {
+            SocketConnections.ws.subscribe();
+        },
+
+        showChat() {
+            this.type = InteractionType.Chat;
+        },
+
+        isChat(): boolean {
+            return this.type === InteractionType.Chat;
+        },
+
+        showPolls() {
+            this.type = InteractionType.Polls;
+        },
+
+        isPolls(): boolean {
+            return this.type === InteractionType.Polls;
+        },
+
+        isLoggedIn(): boolean {
+            return this.user.ID !== 0;
+        },
+
+        isAdmin(): boolean {
+            return this.user.isAdmin;
+        },
+
+        isPopOut(): boolean {
+            return window.location.href.includes("/chat/popup");
+        },
+    } as AlpineComponent;
+}
diff --git a/web/ts/entry/interactions.ts b/web/ts/entry/interactions.ts
new file mode 100644
index 000000000..853129a0b
--- /dev/null
+++ b/web/ts/entry/interactions.ts
@@ -0,0 +1,6 @@
+export * from "../components/video-interaction";
+export * from "../components/chat";
+export * from "../components/chat-prompt";
+export * from "../components/poll";
+export * from "../components/emoji-picker";
+export * from "../components/video-information";
diff --git a/web/ts/entry/video.ts b/web/ts/entry/video.ts
index 25a88bddb..99c0f2ff5 100644
--- a/web/ts/entry/video.ts
+++ b/web/ts/entry/video.ts
@@ -2,7 +2,6 @@
 export * from "../watch-admin";
 export * from "../TUMLiveVjs";
 export * from "../watch";
-export * from "../chat";
 export * from "../video-sections";
 export * from "../splitview";
 export * from "../bookmarks";
diff --git a/web/ts/socket.ts b/web/ts/socket.ts
index 8bf7d663a..76bcdb046 100644
--- a/web/ts/socket.ts
+++ b/web/ts/socket.ts
@@ -1,7 +1,7 @@
 const WS_INITIAL_RETRY_DELAY = 5000;
 const PAGE_LOADED = new Date();
 
-type MessageHandlerFn = (payload: object) => void;
+export type MessageHandlerFn = (payload: object) => void;
 
 const RealtimeMessageTypes = {
     RealtimeMessageTypeSubscribe: "subscribe",
diff --git a/web/ts/stream-playlist.ts b/web/ts/stream-playlist.ts
index e66f98581..51075cfa2 100644
--- a/web/ts/stream-playlist.ts
+++ b/web/ts/stream-playlist.ts
@@ -20,7 +20,7 @@ export class StreamPlaylist {
         this.elem.dispatchEvent(new CustomEvent("update", { detail: { list: this.list, prev, next } }));
 
         setTimeout(() => {
-            this.elem.querySelector(".--selected").scrollIntoView({ block: "center" });
+            this.elem.querySelector(".--selected")?.scrollIntoView({ block: "center" });
         }, 10);
     }
 
diff --git a/web/ts/utilities/ToggleableElement.ts b/web/ts/utilities/ToggleableElement.ts
index 617bd59a5..83f67a0ee 100644
--- a/web/ts/utilities/ToggleableElement.ts
+++ b/web/ts/utilities/ToggleableElement.ts
@@ -18,4 +18,8 @@ export class ToggleableElement {
             this.children.forEach((c) => c.toggle(false));
         }
     }
+
+    toggleText(a: string, b: string) {
+        return this.value ? a : b;
+    }
 }
diff --git a/web/ts/utilities/keycodes.ts b/web/ts/utilities/keycodes.ts
new file mode 100644
index 000000000..81fc6bf39
--- /dev/null
+++ b/web/ts/utilities/keycodes.ts
@@ -0,0 +1,7 @@
+export function isAlphaNumeric(keyCode: number) {
+    return (keyCode >= 48 && keyCode <= 57) || (keyCode >= 65 && keyCode <= 90) || (keyCode >= 97 && keyCode <= 122);
+}
+
+export function isSpacebar(keyCode: number) {
+    return keyCode == 32;
+}
diff --git a/web/ts/utilities/tunnels.ts b/web/ts/utilities/tunnels.ts
index 6b2c0c6ac..d825eb9d7 100644
--- a/web/ts/utilities/tunnels.ts
+++ b/web/ts/utilities/tunnels.ts
@@ -1,14 +1,20 @@
 import { ValueStream } from "../value-stream";
 import { Course } from "../api/courses";
+import { ChatMessage } from "../api/chat";
 
 /**
  * Tunnels are an observer pattern based communication channel for multiple components
  */
 export abstract class Tunnel {
     static pinned: ValueStream<PinnedUpdate> = new ValueStream();
+    static reply: ValueStream<SetReply> = new ValueStream();
 }
 
 export interface PinnedUpdate {
     pin: boolean /* true if pinned, false if unpinned */;
     course: Course;
 }
+
+export interface SetReply {
+    message: ChatMessage;
+}
diff --git a/web/ts/utilities/ws.ts b/web/ts/utilities/ws.ts
new file mode 100644
index 000000000..4efb9635a
--- /dev/null
+++ b/web/ts/utilities/ws.ts
@@ -0,0 +1,21 @@
+import { MessageHandlerFn, Realtime } from "../socket";
+
+export class RealtimeFacade {
+    private readonly channel: string;
+
+    constructor(channel: string) {
+        this.channel = channel;
+    }
+
+    async subscribe(handler?: MessageHandlerFn) {
+        Realtime.get().subscribeChannel(this.channel, handler);
+    }
+
+    async addHandler(handler: MessageHandlerFn) {
+        Realtime.get().registerHandler(this.channel, handler);
+    }
+
+    send(payload: object = {}) {
+        return Realtime.get().send(this.channel, payload);
+    }
+}
diff --git a/web/ts/video/watchers.ts b/web/ts/video/watchers.ts
new file mode 100644
index 000000000..f18e90fa4
--- /dev/null
+++ b/web/ts/video/watchers.ts
@@ -0,0 +1,25 @@
+import { VideoJsPlayer } from "video.js";
+
+/**
+ * Registers a time watcher that observes the time of the current player
+ * @param player: The player to register the watcher.
+ * @param callback call back function responsible for handling player time updates
+ * @return callBack function that got registered for listening to player time updates (used to deregister)
+ */
+export const registerTimeWatcher = function (
+    player: VideoJsPlayer,
+    callback: (currentPlayerTime: number) => void,
+): () => void {
+    const timeWatcherCallBack: () => void = () => callback(player.currentTime());
+    player.on("timeupdate", timeWatcherCallBack);
+    return timeWatcherCallBack;
+};
+
+/**
+ * Deregisters a time watching obeserver from the current player
+ * @param player The player to deregister the watcher.
+ * @param callback regestered callBack function
+ */
+export const deregisterTimeWatcher = function (player: VideoJsPlayer, callback: () => void) {
+    player.off("timeupdate", callback);
+};
diff --git a/web/ts/watch.ts b/web/ts/watch.ts
index 35dd39ea1..beafa3f93 100644
--- a/web/ts/watch.ts
+++ b/web/ts/watch.ts
@@ -1,28 +1,7 @@
-import { scrollChat, shouldScroll, showNewMessageIndicator } from "./chat";
-import { NewChatMessage } from "./chat/NewChatMessage";
 import { getPlayers } from "./TUMLiveVjs";
-import { Realtime } from "./socket";
 import { copyToClipboard, Time } from "./global";
 import { seekbarOverlay } from "./seekbar-overlay";
 
-let currentChatChannel = "";
-const retryInt = 5000; //retry connecting to websocket after this timeout
-
-const scrollDelay = 100; // delay before scrolling to bottom to make sure chat is rendered
-const pageloaded = new Date();
-
-enum WSMessageType {
-    Message = "message",
-    Delete = "delete",
-    StartPoll = "start_poll",
-    SubmitPollOptionVote = "submit_poll_option_vote",
-    CloseActivePoll = "close_active_poll",
-    Approve = "approve",
-    Retract = "retract",
-    Resolve = "resolve",
-    ReactTo = "react_to",
-}
-
 export enum SidebarState {
     Hidden = "hidden",
     Chat = "chat",
@@ -30,212 +9,9 @@ export enum SidebarState {
     Streams = "streams",
 }
 
-export { repeatHeatMap } from "./repeat-heatmap";
-export { seekbarHighlights, MarkerType } from "./seekbar-highlights";
-export { seekbarOverlay, SeekbarHoverPosition } from "./seekbar-overlay";
-export { StreamPlaylist } from "./stream-playlist";
-
-function sendIDMessage(id: number, type: WSMessageType) {
-    return Realtime.get().send(currentChatChannel, {
-        payload: {
-            type: type,
-            id: id,
-        },
-    });
-}
-
-function sendCustomMessage(id: number, type: WSMessageType, optArgs: object = {}) {
-    return Realtime.get().send(currentChatChannel, {
-        payload: {
-            type: type,
-            id: id,
-            ...optArgs,
-        },
-    });
-}
-
-export const reactToMessage = (id: number, reaction: string) =>
-    sendCustomMessage(id, WSMessageType.ReactTo, { reaction });
-
-export const deleteMessage = (id: number) => sendIDMessage(id, WSMessageType.Delete);
-
-export const resolveMessage = (id: number) => sendIDMessage(id, WSMessageType.Resolve);
-
-export const approveMessage = (id: number) => sendIDMessage(id, WSMessageType.Approve);
-
-export const retractMessage = (id: number) => sendIDMessage(id, WSMessageType.Retract);
-
-export function initChatScrollListener() {
-    const chatBox = document.getElementById("chatBox") as HTMLDivElement;
-    if (!chatBox) {
-        return;
-    }
-    chatBox.addEventListener("scroll", function (e) {
-        if (chatBox.scrollHeight - chatBox.scrollTop === chatBox.offsetHeight) {
-            window.dispatchEvent(new CustomEvent("messageindicator", { detail: { show: false } }));
-        }
-    });
-}
-
-export async function startWebsocket() {
-    const streamId = (document.getElementById("streamID") as HTMLInputElement).value;
-    currentChatChannel = `chat/${streamId}`;
-
-    const messageHandler = function (data) {
-        if ("viewers" in data) {
-            window.dispatchEvent(new CustomEvent("viewers", { detail: { viewers: data["viewers"] } }));
-        } else if ("live" in data) {
-            if (data["live"]) {
-                // stream start, refresh page
-                window.location.reload();
-            } else {
-                // stream end, show message
-                window.dispatchEvent(new CustomEvent("streamended"));
-            }
-        } else if ("server" in data) {
-            const scroll = shouldScroll();
-            const serverElem = createServerMessage(data);
-            document.getElementById("chatBox").appendChild(serverElem);
-            if (scroll) {
-                setTimeout(scrollChat, scrollDelay);
-            } else {
-                showNewMessageIndicator();
-            }
-        } else if ("message" in data) {
-            data["replies"] = []; // go serializes this empty list as `null`
-            // reply
-            if (data["replyTo"].Valid) {
-                // reply
-                const event = new CustomEvent("chatreply", { detail: data });
-                window.dispatchEvent(event);
-            } else {
-                // message
-                const scroll = shouldScroll();
-                const event = new CustomEvent("chatmessage", { detail: data });
-                window.dispatchEvent(event);
-                if (scroll) {
-                    setTimeout(scrollChat, scrollDelay);
-                } else {
-                    showNewMessageIndicator();
-                }
-            }
-        } else if ("pollOptions" in data) {
-            const event = new CustomEvent("chatnewpoll", { detail: data });
-            window.dispatchEvent(event);
-        } else if ("pollOptionId" in data) {
-            const event = new CustomEvent("polloptionvotesupdate", { detail: data });
-            window.dispatchEvent(event);
-        } else if ("pollOptionResults" in data) {
-            const event = new CustomEvent("polloptionresult", { detail: data });
-            window.dispatchEvent(event);
-        } else if ("delete" in data) {
-            const event = new CustomEvent("chatdelete", { detail: data });
-            window.dispatchEvent(event);
-        } else if ("resolve" in data) {
-            const event = new CustomEvent("chatresolve", { detail: data });
-            window.dispatchEvent(event);
-        } else if ("approve" in data) {
-            const event = new CustomEvent("chatapprove", { detail: data });
-            window.dispatchEvent(event);
-        } else if ("retract" in data) {
-            const event = new CustomEvent("chatretract", { detail: data });
-            window.dispatchEvent(event);
-        } else if ("title" in data) {
-            const event = new CustomEvent("titleupdate", { detail: data });
-            window.dispatchEvent(event);
-        } else if ("description" in data) {
-            const event = new CustomEvent("descriptionupdate", { detail: data });
-            window.dispatchEvent(event);
-        } else if ("reactions" in data) {
-            const event = new CustomEvent("chatreactions", { detail: data });
-            window.dispatchEvent(event);
-        }
-    };
-
-    // TODO: check if connected and update
-    //window.dispatchEvent(new CustomEvent("connected"));
-    //window.dispatchEvent(new CustomEvent("disconnected"));
-
-    await Realtime.get().subscribeChannel(currentChatChannel, messageHandler);
-    window.dispatchEvent(new CustomEvent("connected"));
-}
-
-export function createServerMessage(msg) {
-    const serverElem = document.createElement("div");
-    switch (msg["type"]) {
-        case "error":
-            serverElem.classList.add("text-danger", "font-semibold");
-            break;
-        case "info":
-            serverElem.classList.add("text-4");
-            break;
-        case "warn":
-            serverElem.classList.add("text-warn", "font-semibold");
-            break;
-    }
-    serverElem.classList.add("text-sm", "p-2");
-    serverElem.innerText = msg["server"];
-    return serverElem;
-}
-
-export function sendMessage(current: NewChatMessage) {
-    return Realtime.get().send(currentChatChannel, {
-        payload: {
-            type: WSMessageType.Message,
-            msg: current.message,
-            anonymous: current.anonymous,
-            replyTo: current.reply.id,
-            addressedTo: current.addressedTo.map((u) => u.id),
-        },
-    });
-}
-
-export async function fetchMessages(id: number) {
-    return await fetch("/api/chat/" + id + "/messages")
-        .then((res) => res.json())
-        .then((d) => {
-            return d;
-        });
-}
-
-export function startPoll(question: string, pollAnswers: string[]) {
-    return Realtime.get().send(currentChatChannel, {
-        payload: {
-            type: WSMessageType.StartPoll,
-            question,
-            pollAnswers,
-        },
-    });
-}
-
-export function submitPollOptionVote(pollOptionId: number) {
-    return Realtime.get().send(currentChatChannel, {
-        payload: {
-            type: WSMessageType.SubmitPollOptionVote,
-            pollOptionId,
-        },
-    });
-}
-
-export function closeActivePoll() {
-    return Realtime.get().send(currentChatChannel, {
-        payload: {
-            type: WSMessageType.CloseActivePoll,
-        },
-    });
-}
-
-export function getPollOptionWidth(pollOptions, pollOption) {
-    const minWidth = 1;
-    const maxWidth = 100;
-    const maxVotes = Math.max(...pollOptions.map(({ votes: v }) => v));
-
-    if (pollOption.votes == 0) return `${minWidth.toString()}%`;
-
-    const fractionOfMax = pollOption.votes / maxVotes;
-    const fractionWidth = minWidth + fractionOfMax * (maxWidth - minWidth);
-    return `${Math.ceil(fractionWidth).toString()}%`;
-}
+/*
+ MISC
+ */
 
 export function contextMenuHandler(e, contextMenu, videoElem) {
     if (contextMenu.shown) return contextMenu;
@@ -280,16 +56,6 @@ export const videoStatListener = {
     },
 };
 
-export function onShift(e) {
-    if (document.activeElement.tagName !== "INPUT" && document.activeElement.tagName !== "TEXTAREA") {
-        switch (e.key) {
-            case "?": {
-                toggleShortcutsModal();
-            }
-        }
-    }
-}
-
 export function toggleShortcutsModal() {
     const el = document.getElementById("shortcuts-help-modal");
     if (el !== undefined) {
@@ -366,3 +132,8 @@ export class ShareURL {
         }
     }
 }
+
+export { repeatHeatMap } from "./repeat-heatmap";
+export { seekbarHighlights, MarkerType } from "./seekbar-highlights";
+export { seekbarOverlay, SeekbarHoverPosition } from "./seekbar-overlay";
+export { StreamPlaylist } from "./stream-playlist";
diff --git a/web/watch.go b/web/watch.go
index 448a6fff6..4494a22d4 100644
--- a/web/watch.go
+++ b/web/watch.go
@@ -47,7 +47,6 @@ func (r mainRoutes) WatchPage(c *gin.Context) {
 
 	data.ChatData.IndexData.TUMLiveContext = foundContext.(tools.TUMLiveContext)
 	data.ChatData.IsAdminOfCourse = tumLiveContext.UserIsAdmin()
-	data.ChatData.IsPopUp = false
 
 	if data.IsAdminOfCourse && tumLiveContext.Stream.LectureHallID != 0 {
 		lectureHall, err := r.LectureHallsDao.GetLectureHallByID(tumLiveContext.Stream.LectureHallID)
diff --git a/web/webpack.common.js b/web/webpack.common.js
index d0449d05e..d102beee1 100644
--- a/web/webpack.common.js
+++ b/web/webpack.common.js
@@ -8,6 +8,7 @@ module.exports = {
         home: "./ts/entry/home.ts",
         admin: "./ts/entry/admins.ts",
         watch: "./ts/entry/video.ts",
+        interaction: "./ts/entry/interactions.ts",
         global: "./ts/entry/user.ts",
     },
     module: {

From e770c8db6d6893f241c8c603628bea0e3a58e8e5 Mon Sep 17 00:00:00 2001
From: Joscha Henningsen <44805696+joschahenningsen@users.noreply.github.com>
Date: Wed, 16 Aug 2023 08:06:28 +0200
Subject: [PATCH 03/31] Update deps (#1121)

* Update deps

* Add tslint ignore to existing anys

* videojs sprite thumbnails v1.x
---
 Dockerfile              |    2 +-
 go.mod                  |   65 +-
 go.sum                  |  154 ++--
 web/package-lock.json   | 1822 +++++++++++++++++++++++++++------------
 web/package.json        |   64 +-
 web/ts/TUMLiveVjs.ts    |    1 +
 web/ts/create-course.ts |    1 +
 web/ts/schedule.ts      |    4 +-
 web/ts/splitview.ts     |    1 +
 worker/Dockerfile       |    2 +-
 worker/edge/Dockerfile  |    2 +-
 worker/edge/go.mod      |   12 +-
 worker/edge/go.sum      |   27 +-
 worker/go.mod           |   32 +-
 worker/go.sum           |   94 +-
 15 files changed, 1507 insertions(+), 776 deletions(-)

diff --git a/Dockerfile b/Dockerfile
index 367f62ab1..fa47807a8 100644
--- a/Dockerfile
+++ b/Dockerfile
@@ -10,7 +10,7 @@ RUN rm -rf web/assets/ts-dist &&\
 WORKDIR /app/web
 RUN npm i --no-dev
 
-FROM golang:1.20-alpine3.17 as build-env
+FROM golang:1.21-alpine3.18 as build-env
 
 RUN mkdir /gostuff
 WORKDIR /gostuff
diff --git a/go.mod b/go.mod
index d7f99d33f..d9a38ae68 100644
--- a/go.mod
+++ b/go.mod
@@ -5,33 +5,32 @@ go 1.18
 require (
 	github.com/RBG-TUM/CAMPUSOnline v0.0.0-20230412070523-8db58ed5c0b4
 	github.com/RBG-TUM/go-anel-pwrctrl v1.0.0
-	github.com/antchfx/xmlquery v1.3.15
+	github.com/antchfx/xmlquery v1.3.17
 	github.com/dgraph-io/ristretto v0.1.1
 	github.com/gabstv/melody v1.0.2
-	github.com/getsentry/sentry-go v0.21.0
+	github.com/getsentry/sentry-go v0.23.0
 	github.com/gin-contrib/gzip v0.0.6
 	github.com/gin-gonic/gin v1.9.1
 	github.com/go-asn1-ber/asn1-ber v1.5.4 // indirect
 	github.com/go-gormigrate/gormigrate/v2 v2.1.0
-	github.com/go-ldap/ldap/v3 v3.4.4
+	github.com/go-ldap/ldap/v3 v3.4.5
 	github.com/go-sql-driver/mysql v1.7.1
 	github.com/golang-jwt/jwt/v4 v4.5.0
-	github.com/golang/glog v1.1.1 // indirect
+	github.com/golang/glog v1.1.2 // indirect
 	github.com/gorilla/websocket v1.5.0 // indirect
 	github.com/jinzhu/now v1.1.5
-	github.com/microcosm-cc/bluemonday v1.0.24
+	github.com/microcosm-cc/bluemonday v1.0.25
 	github.com/pkg/profile v1.7.0
 	github.com/robfig/cron/v3 v3.0.1
 	github.com/russross/blackfriday/v2 v2.1.0
 	github.com/satori/go.uuid v1.2.0
 	github.com/sirupsen/logrus v1.9.3
 	github.com/spf13/viper v1.16.0
-	golang.org/x/crypto v0.9.0
-	google.golang.org/genproto v0.0.0-20230410155749-daa745c078e1 // indirect
-	google.golang.org/grpc v1.55.0
-	google.golang.org/protobuf v1.30.0
+	golang.org/x/crypto v0.12.0
+	google.golang.org/grpc v1.57.0
+	google.golang.org/protobuf v1.31.0
 	gorm.io/driver/mysql v1.5.1
-	gorm.io/gorm v1.25.1
+	gorm.io/gorm v1.25.3
 	mvdan.cc/xurls/v2 v2.5.0
 )
 
@@ -41,37 +40,39 @@ require (
 	github.com/crewjam/saml v0.4.13
 	github.com/golang/mock v1.6.0
 	github.com/icholy/digest v0.1.22
-	github.com/joschahenningsen/TUM-Live/worker v0.0.0-20230410070000-ad9dc527def5
+	github.com/joschahenningsen/TUM-Live/worker v0.0.0-20230813170152-4b40e4b3a301
 	github.com/stretchr/testify v1.8.4
 	github.com/u2takey/go-utils v0.3.1
 )
 
 require (
 	github.com/TUM-Dev/CampusProxy/client v0.0.0-20230226120508-3e8bb2411921
-	github.com/asticode/go-astisub v0.24.0
+	github.com/asticode/go-astisub v0.26.0
 	github.com/matthiasreumann/gomino v0.0.2
-	github.com/meilisearch/meilisearch-go v0.24.0
+	github.com/meilisearch/meilisearch-go v0.25.0
 )
 
 require (
 	github.com/andybalholm/brotli v1.0.5 // indirect
-	github.com/asticode/go-astikit v0.39.0 // indirect
-	github.com/asticode/go-astits v1.11.0 // indirect
-	github.com/bytedance/sonic v1.9.1 // indirect
-	github.com/chenzhuoyu/base64x v0.0.0-20221115062448-fe3a3abad311 // indirect
+	github.com/asticode/go-astikit v0.40.0 // indirect
+	github.com/asticode/go-astits v1.13.0 // indirect
+	github.com/bytedance/sonic v1.10.0 // indirect
+	github.com/chenzhuoyu/base64x v0.0.0-20230717121745-296ad89f973d // indirect
+	github.com/chenzhuoyu/iasm v0.9.0 // indirect
 	github.com/felixge/fgprof v0.9.3 // indirect
 	github.com/gabriel-vasile/mimetype v1.4.2 // indirect
-	github.com/google/pprof v0.0.0-20230406165453-00490a63f317 // indirect
+	github.com/google/pprof v0.0.0-20230811205829-9131a7e9cc17 // indirect
 	github.com/josharian/intern v1.0.0 // indirect
-	github.com/klauspost/compress v1.16.4 // indirect
-	github.com/klauspost/cpuid/v2 v2.2.4 // indirect
+	github.com/klauspost/compress v1.16.7 // indirect
+	github.com/klauspost/cpuid/v2 v2.2.5 // indirect
 	github.com/mailru/easyjson v0.7.7 // indirect
 	github.com/twitchyliquid64/golang-asm v0.15.1 // indirect
 	github.com/valyala/bytebufferpool v1.0.0 // indirect
-	github.com/valyala/fasthttp v1.45.0 // indirect
-	golang.org/x/arch v0.3.0 // indirect
-	golang.org/x/oauth2 v0.7.0 // indirect
+	github.com/valyala/fasthttp v1.48.0 // indirect
+	golang.org/x/arch v0.4.0 // indirect
+	golang.org/x/oauth2 v0.11.0 // indirect
 	google.golang.org/appengine v1.6.7 // indirect
+	google.golang.org/genproto/googleapis/rpc v0.0.0-20230814215434-ca7cfce7776a // indirect
 )
 
 require (
@@ -82,7 +83,7 @@ require (
 	github.com/Masterminds/semver/v3 v3.2.1 // indirect
 	github.com/antchfx/xpath v1.2.4 // indirect
 	github.com/aymerick/douceur v0.2.0 // indirect
-	github.com/beevik/etree v1.1.0 // indirect
+	github.com/beevik/etree v1.2.0 // indirect
 	github.com/cespare/xxhash/v2 v2.2.0 // indirect
 	github.com/crewjam/httperr v0.2.0 // indirect
 	github.com/davecgh/go-spew v1.1.1 // indirect
@@ -91,7 +92,7 @@ require (
 	github.com/gin-contrib/sse v0.1.0 // indirect
 	github.com/go-playground/locales v0.14.1 // indirect
 	github.com/go-playground/universal-translator v0.18.1 // indirect
-	github.com/go-playground/validator/v10 v10.14.0 // indirect
+	github.com/go-playground/validator/v10 v10.15.0 // indirect
 	github.com/goccy/go-json v0.10.2 // indirect
 	github.com/golang/groupcache v0.0.0-20210331224755-41bb18bfe9da // indirect
 	github.com/golang/protobuf v1.5.3 // indirect
@@ -99,7 +100,7 @@ require (
 	github.com/gorilla/css v1.0.0 // indirect
 	github.com/hashicorp/hcl v1.0.0 // indirect
 	github.com/huandu/xstrings v1.4.0 // indirect
-	github.com/imdario/mergo v0.3.15 // indirect
+	github.com/imdario/mergo v0.3.16 // indirect
 	github.com/jinzhu/inflection v1.0.0 // indirect
 	github.com/jonboulle/clockwork v0.4.0 // indirect
 	github.com/json-iterator/go v1.1.12 // indirect
@@ -112,20 +113,20 @@ require (
 	github.com/mitchellh/reflectwalk v1.0.2 // indirect
 	github.com/modern-go/concurrent v0.0.0-20180306012644-bacd9c7ef1dd // indirect
 	github.com/modern-go/reflect2 v1.0.2 // indirect
-	github.com/pelletier/go-toml/v2 v2.0.8 // indirect
+	github.com/pelletier/go-toml/v2 v2.0.9 // indirect
 	github.com/pkg/errors v0.9.1 // indirect
 	github.com/pmezard/go-difflib v1.0.0 // indirect
-	github.com/russellhaering/goxmldsig v1.3.0 // indirect
+	github.com/russellhaering/goxmldsig v1.4.0 // indirect
 	github.com/shopspring/decimal v1.3.1 // indirect
 	github.com/spf13/afero v1.9.5 // indirect
 	github.com/spf13/cast v1.5.1 // indirect
 	github.com/spf13/jwalterweatherman v1.1.0 // indirect
 	github.com/spf13/pflag v1.0.5 // indirect
-	github.com/subosito/gotenv v1.4.2 // indirect
+	github.com/subosito/gotenv v1.6.0 // indirect
 	github.com/ugorji/go/codec v1.2.11 // indirect
-	golang.org/x/net v0.10.0 // indirect
-	golang.org/x/sys v0.8.0 // indirect
-	golang.org/x/text v0.9.0 // indirect
+	golang.org/x/net v0.14.0 // indirect
+	golang.org/x/sys v0.11.0 // indirect
+	golang.org/x/text v0.12.0 // indirect
 	gopkg.in/ini.v1 v1.67.0 // indirect
 	gopkg.in/yaml.v3 v3.0.1 // indirect
 )
diff --git a/go.sum b/go.sum
index c785d7dfa..f4b1d30ab 100644
--- a/go.sum
+++ b/go.sum
@@ -36,7 +36,6 @@ cloud.google.com/go/storage v1.8.0/go.mod h1:Wv1Oy7z6Yz3DshWRJFhqM/UCfaWIRTdp0RX
 cloud.google.com/go/storage v1.10.0/go.mod h1:FLPqc6j+Ki4BU591ie1oL6qBQGu2Bl/tZ9ullr3+Kg0=
 cloud.google.com/go/storage v1.14.0/go.mod h1:GrKmX003DSIwi9o29oFT7YDnHYwZoctc3fOKtUw0Xmo=
 dmitri.shuralyov.com/gpu/mtl v0.0.0-20190408044501-666a987793e9/go.mod h1:H6x//7gZCb22OMCxBHrMx7a5I7Hp++hsVxbQ4BYO7hU=
-github.com/Azure/go-ntlmssp v0.0.0-20220621081337-cb9428e4ac1e/go.mod h1:chxPXzSsl7ZWRAuOIE23GDNzjWuZquvFlgA8xmpunjU=
 github.com/Azure/go-ntlmssp v0.0.0-20221128193559-754e69321358 h1:mFRzDkZVAjdal+s7s0MwaRv9igoPqLRdzOLzw/8Xvq8=
 github.com/Azure/go-ntlmssp v0.0.0-20221128193559-754e69321358/go.mod h1:chxPXzSsl7ZWRAuOIE23GDNzjWuZquvFlgA8xmpunjU=
 github.com/BurntSushi/toml v0.3.1/go.mod h1:xHWCNGjB5oqiDr8zfno3MHue2Ht5sIBksp03qcyfWMU=
@@ -56,37 +55,43 @@ github.com/RBG-TUM/go-anel-pwrctrl v1.0.0 h1:8V7MV6oyg+sQzSRWhEfgg9FcOaQMGBreOh3
 github.com/RBG-TUM/go-anel-pwrctrl v1.0.0/go.mod h1:6c2j1rcryE6BWphhJtGb+yXFIGRzmIXi+31TjE9Cft4=
 github.com/TUM-Dev/CampusProxy/client v0.0.0-20230226120508-3e8bb2411921 h1:c4RdbLP4UftJQOV2Q6XrXC2ScWSEqN/ojBD9ava5LR8=
 github.com/TUM-Dev/CampusProxy/client v0.0.0-20230226120508-3e8bb2411921/go.mod h1:UuXuuqgljQbgtLAw5NY+VcThXAwO6UISn6U3s4TJx8k=
+github.com/alexbrainman/sspi v0.0.0-20210105120005-909beea2cc74 h1:Kk6a4nehpJ3UuJRqlA3JxYxBZEqCeOmATOvrbT4p9RA=
+github.com/alexbrainman/sspi v0.0.0-20210105120005-909beea2cc74/go.mod h1:cEWa1LVoE5KvSD9ONXsZrj0z6KqySlCCNKHlLzbqAt4=
 github.com/andybalholm/brotli v1.0.4/go.mod h1:fO7iG3H7G2nSZ7m0zPUDn85XEX2GTukHGRSepvi9Eig=
 github.com/andybalholm/brotli v1.0.5 h1:8uQZIdzKmjc/iuPu7O2ioW48L81FgatrcpfFmiq/cCs=
 github.com/andybalholm/brotli v1.0.5/go.mod h1:fO7iG3H7G2nSZ7m0zPUDn85XEX2GTukHGRSepvi9Eig=
-github.com/antchfx/xmlquery v1.3.15 h1:aJConNMi1sMha5G8YJoAIF5P+H+qG1L73bSItWHo8Tw=
-github.com/antchfx/xmlquery v1.3.15/go.mod h1:zMDv5tIGjOxY/JCNNinnle7V/EwthZ5IT8eeCGJKRWA=
-github.com/antchfx/xpath v1.2.3/go.mod h1:i54GszH55fYfBmoZXapTHN8T8tkcHfRgLyVwwqzXNcs=
+github.com/antchfx/xmlquery v1.3.17 h1:d0qWjPp/D+vtRw7ivCwT5ApH/3CkQU8JOeo3245PpTk=
+github.com/antchfx/xmlquery v1.3.17/go.mod h1:Afkq4JIeXut75taLSuI31ISJ/zeq+3jG7TunF7noreA=
 github.com/antchfx/xpath v1.2.4 h1:dW1HB/JxKvGtJ9WyVGJ0sIoEcqftV3SqIstujI+B9XY=
 github.com/antchfx/xpath v1.2.4/go.mod h1:i54GszH55fYfBmoZXapTHN8T8tkcHfRgLyVwwqzXNcs=
 github.com/asticode/go-astikit v0.20.0/go.mod h1:h4ly7idim1tNhaVkdVBeXQZEE3L0xblP7fCWbgwipF0=
 github.com/asticode/go-astikit v0.30.0/go.mod h1:h4ly7idim1tNhaVkdVBeXQZEE3L0xblP7fCWbgwipF0=
-github.com/asticode/go-astikit v0.39.0 h1:LOkRzYyV96dSiHcnMctj1yXpFgHVtDfsk4FJtwZKD8Q=
-github.com/asticode/go-astikit v0.39.0/go.mod h1:h4ly7idim1tNhaVkdVBeXQZEE3L0xblP7fCWbgwipF0=
-github.com/asticode/go-astisub v0.24.0 h1:Y3eDWeDyt+QlydjLrBuK91RZBkUenFH3EhUWoHqHdMo=
-github.com/asticode/go-astisub v0.24.0/go.mod h1:WTkuSzFB+Bp7wezuSf2Oxulj5A8zu2zLRVFf6bIFQK8=
+github.com/asticode/go-astikit v0.40.0 h1:iDt/boQR0LhDeUMM24tcoqIT3Ie+oL9MzbDfIcGlDsM=
+github.com/asticode/go-astikit v0.40.0/go.mod h1:h4ly7idim1tNhaVkdVBeXQZEE3L0xblP7fCWbgwipF0=
+github.com/asticode/go-astisub v0.26.0 h1:Ka1oUyWzo/lIx7RX97GI1QdbClqYVxI0ExKuZRN/cDk=
+github.com/asticode/go-astisub v0.26.0/go.mod h1:WTkuSzFB+Bp7wezuSf2Oxulj5A8zu2zLRVFf6bIFQK8=
 github.com/asticode/go-astits v1.8.0/go.mod h1:DkOWmBNQpnr9mv24KfZjq4JawCFX1FCqjLVGvO0DygQ=
-github.com/asticode/go-astits v1.11.0 h1:GTHUXht0ZXAJXsVbsLIcyfHr1Bchi4QQwMARw2ZWAng=
-github.com/asticode/go-astits v1.11.0/go.mod h1:QSHmknZ51pf6KJdHKZHJTLlMegIrhega3LPWz3ND/iI=
+github.com/asticode/go-astits v1.13.0 h1:XOgkaadfZODnyZRR5Y0/DWkA9vrkLLPLeeOvDwfKZ1c=
+github.com/asticode/go-astits v1.13.0/go.mod h1:QSHmknZ51pf6KJdHKZHJTLlMegIrhega3LPWz3ND/iI=
 github.com/aymerick/douceur v0.2.0 h1:Mv+mAeH1Q+n9Fr+oyamOlAkUNPWPlA8PPGR0QAaYuPk=
 github.com/aymerick/douceur v0.2.0/go.mod h1:wlT5vV2O3h55X9m7iVYN0TBM0NH/MmbLnd30/FjWUq4=
-github.com/beevik/etree v1.1.0 h1:T0xke/WvNtMoCqgzPhkX2r4rjY3GDZFi+FjpRZY2Jbs=
 github.com/beevik/etree v1.1.0/go.mod h1:r8Aw8JqVegEf0w2fDnATrX9VpkMcyFeM0FhwO62wh+A=
+github.com/beevik/etree v1.2.0 h1:l7WETslUG/T+xOPs47dtd6jov2Ii/8/OjCldk5fYfQw=
+github.com/beevik/etree v1.2.0/go.mod h1:aiPf89g/1k3AShMVAzriilpcE4R/Vuor90y83zVZWFc=
 github.com/bytedance/sonic v1.5.0/go.mod h1:ED5hyg4y6t3/9Ku1R6dU/4KyJ48DZ4jPhfY1O2AihPM=
-github.com/bytedance/sonic v1.9.1 h1:6iJ6NqdoxCDr6mbY8h18oSO+cShGSMRGCEo7F2h0x8s=
-github.com/bytedance/sonic v1.9.1/go.mod h1:i736AoUSYt75HyZLoJW9ERYxcy6eaN6h4BZXU064P/U=
+github.com/bytedance/sonic v1.10.0-rc/go.mod h1:ElCzW+ufi8qKqNW0FY314xriJhyJhuoJ3gFZdAHF7NM=
+github.com/bytedance/sonic v1.10.0 h1:qtNZduETEIWJVIyDl01BeNxur2rW9OwTQ/yBqFRkKEk=
+github.com/bytedance/sonic v1.10.0/go.mod h1:iZcSUejdk5aukTND/Eu/ivjQuEL0Cu9/rf50Hi0u/g4=
 github.com/census-instrumentation/opencensus-proto v0.2.1/go.mod h1:f6KPmirojxKA12rnyqOA5BBL4O983OfeGPqjHWSTneU=
 github.com/cespare/xxhash/v2 v2.1.1/go.mod h1:VGX0DQ3Q6kWi7AoAeZDth3/j3BFtOZR5XLFGgcrjCOs=
 github.com/cespare/xxhash/v2 v2.2.0 h1:DC2CZ1Ep5Y4k3ZQ899DldepgrayRUGE6BBZ/cd9Cj44=
 github.com/cespare/xxhash/v2 v2.2.0/go.mod h1:VGX0DQ3Q6kWi7AoAeZDth3/j3BFtOZR5XLFGgcrjCOs=
 github.com/chenzhuoyu/base64x v0.0.0-20211019084208-fb5309c8db06/go.mod h1:DH46F32mSOjUmXrMHnKwZdA8wcEefY7UVqBKYGjpdQY=
-github.com/chenzhuoyu/base64x v0.0.0-20221115062448-fe3a3abad311 h1:qSGYFH7+jGhDF8vLC+iwCD4WpbV1EBDSzWkJODFLams=
 github.com/chenzhuoyu/base64x v0.0.0-20221115062448-fe3a3abad311/go.mod h1:b583jCggY9gE99b6G5LEC39OIiVsWj+R97kbl5odCEk=
+github.com/chenzhuoyu/base64x v0.0.0-20230717121745-296ad89f973d h1:77cEq6EriyTZ0g/qfRdp61a3Uu/AWrgIq2s0ClJV1g0=
+github.com/chenzhuoyu/base64x v0.0.0-20230717121745-296ad89f973d/go.mod h1:8EPpVsBuRksnlj1mLy4AWzRNQYxauNi62uWcE3to6eA=
+github.com/chenzhuoyu/iasm v0.9.0 h1:9fhXjVzq5hUy2gkhhgHl95zG2cEAhw9OSGs8toWWAwo=
+github.com/chenzhuoyu/iasm v0.9.0/go.mod h1:Xjy2NpN3h7aUqeqM+woSuuvxmIe6+DDsiNLIrkAmYog=
 github.com/chzyer/logex v1.1.10/go.mod h1:+Ywpsq7O8HXn0nuIou7OrIPyXbp3wmkHB+jjWRnGsAI=
 github.com/chzyer/readline v0.0.0-20180603132655-2972be24d48e/go.mod h1:nSuG5e5PlCu98SY8svDHJxuZscDgtXS6KTTbou5AhLI=
 github.com/chzyer/test v0.0.0-20180213035817-a1ea475d72b1/go.mod h1:Q3SI9o4m/ZMnBNeIyt5eFwwo7qiLfzFZmjNmxjkiQlU=
@@ -126,8 +131,8 @@ github.com/gabriel-vasile/mimetype v1.4.2 h1:w5qFW6JKBz9Y393Y4q372O9A7cUSequkh1Q
 github.com/gabriel-vasile/mimetype v1.4.2/go.mod h1:zApsH/mKG4w07erKIaJPFiX0Tsq9BFQgN3qGY5GnNgA=
 github.com/gabstv/melody v1.0.2 h1:wAc9xFmBCBX3jimwtkml5Z5nfyfur5q5uW8DHmW5gK0=
 github.com/gabstv/melody v1.0.2/go.mod h1:fvJW9enOHGIN1E4nCuBZ3lIZxHiPbnMIIYEXcSKQq9o=
-github.com/getsentry/sentry-go v0.21.0 h1:c9l5F1nPF30JIppulk4veau90PK6Smu3abgVtVQWon4=
-github.com/getsentry/sentry-go v0.21.0/go.mod h1:lc76E2QywIyW8WuBnwl8Lc4bkmQH4+w1gwTf25trprY=
+github.com/getsentry/sentry-go v0.23.0 h1:dn+QRCeJv4pPt9OjVXiMcGIBIefaTJPw/h0bZWO05nE=
+github.com/getsentry/sentry-go v0.23.0/go.mod h1:lc76E2QywIyW8WuBnwl8Lc4bkmQH4+w1gwTf25trprY=
 github.com/gin-contrib/gzip v0.0.6 h1:NjcunTcGAj5CO1gn4N8jHOSIeRFHIbn51z6K+xaN4d4=
 github.com/gin-contrib/gzip v0.0.6/go.mod h1:QOJlmV2xmayAjkNS2Y8NQsMneuRShOU/kjovCXNuzzk=
 github.com/gin-contrib/sse v0.1.0 h1:Y/yl/+YNO8GZSjAhjMsSuLt29uWRFHdHYUb5lYOV9qE=
@@ -143,8 +148,8 @@ github.com/go-gl/glfw/v3.3/glfw v0.0.0-20191125211704-12ad95a8df72/go.mod h1:tQ2
 github.com/go-gl/glfw/v3.3/glfw v0.0.0-20200222043503-6f7a984d4dc4/go.mod h1:tQ2UAYgL5IevRw8kRxooKSPJfGvJ9fJQFa0TUsXzTg8=
 github.com/go-gormigrate/gormigrate/v2 v2.1.0 h1:4/1xr9CjOox714EJWbxkF00lrNmbWJToSZzhykKKcKY=
 github.com/go-gormigrate/gormigrate/v2 v2.1.0/go.mod h1:gpA97koYGyjqaiLDTmLE5W7nyYTmI26AYIf2a/earuo=
-github.com/go-ldap/ldap/v3 v3.4.4 h1:qPjipEpt+qDa6SI/h1fzuGWoRUY+qqQ9sOZq67/PYUs=
-github.com/go-ldap/ldap/v3 v3.4.4/go.mod h1:fe1MsuN5eJJ1FeLT/LEBVdWfNWKh459R7aXgXtJC+aI=
+github.com/go-ldap/ldap/v3 v3.4.5 h1:ekEKmaDrpvR2yf5Nc/DClsGG9lAmdDixe44mLzlW5r8=
+github.com/go-ldap/ldap/v3 v3.4.5/go.mod h1:bMGIq3AGbytbaMwf8wdv5Phdxz0FWHTIYMSzyrYgnQs=
 github.com/go-logr/logr v0.1.0/go.mod h1:ixOQHD9gLJUVQQ2ZOR7zLEifBX6tGkNJF4QyIY7sIas=
 github.com/go-playground/assert/v2 v2.0.1/go.mod h1:VDjEfimB/XKnb+ZQfWdccd7VUvScMdVu0Titje2rxJ4=
 github.com/go-playground/assert/v2 v2.2.0 h1:JvknZsQTYeFEAhQwI4qEt9cyV5ONwRHC+lYKSsYSR8s=
@@ -155,8 +160,8 @@ github.com/go-playground/universal-translator v0.18.0/go.mod h1:UvRDBj+xPUEGrFYl
 github.com/go-playground/universal-translator v0.18.1 h1:Bcnm0ZwsGyWbCzImXv+pAJnYK9S473LQFuzCbDbfSFY=
 github.com/go-playground/universal-translator v0.18.1/go.mod h1:xekY+UJKNuX9WP91TpwSH2VMlDf28Uj24BCp08ZFTUY=
 github.com/go-playground/validator/v10 v10.10.0/go.mod h1:74x4gJWsvQexRdW8Pn3dXSGrTK4nAUsbPlLADvpJkos=
-github.com/go-playground/validator/v10 v10.14.0 h1:vgvQWe3XCz3gIeFDm/HnTIbj6UGmg/+t63MyGU2n5js=
-github.com/go-playground/validator/v10 v10.14.0/go.mod h1:9iXMNT7sEkjXb0I+enO7QXmzG6QCsPWY4zveKFVRSyU=
+github.com/go-playground/validator/v10 v10.15.0 h1:nDU5XeOKtB3GEa+uB7GNYwhVKsgjAR7VgKoNB6ryXfw=
+github.com/go-playground/validator/v10 v10.15.0/go.mod h1:9iXMNT7sEkjXb0I+enO7QXmzG6QCsPWY4zveKFVRSyU=
 github.com/go-sql-driver/mysql v1.7.0/go.mod h1:OXbVy3sEdcQ2Doequ6Z5BW6fXNQTmx+9S1MCJN5yJMI=
 github.com/go-sql-driver/mysql v1.7.1 h1:lUIinVbN1DY0xBg0eMOzmmtGoHwWBbvnWubQUrtU8EI=
 github.com/go-sql-driver/mysql v1.7.1/go.mod h1:OXbVy3sEdcQ2Doequ6Z5BW6fXNQTmx+9S1MCJN5yJMI=
@@ -170,8 +175,8 @@ github.com/golang-jwt/jwt/v4 v4.5.0/go.mod h1:m21LjoU+eqJr34lmDMbreY2eSTRJ1cv77w
 github.com/golang-sql/civil v0.0.0-20220223132316-b832511892a9 h1:au07oEsX2xN0ktxqI+Sida1w446QrXBRJ0nee3SNZlA=
 github.com/golang-sql/sqlexp v0.1.0 h1:ZCD6MBpcuOVfGVqsEmY5/4FtYiKz6tSyUv9LPEDei6A=
 github.com/golang/glog v0.0.0-20160126235308-23def4e6c14b/go.mod h1:SBH7ygxi8pfUlaOkMMuAQtPIUF8ecWP5IEl/CR7VP2Q=
-github.com/golang/glog v1.1.1 h1:jxpi2eWoU84wbX9iIEyAeeoac3FLuifZpY9tcNUD9kw=
-github.com/golang/glog v1.1.1/go.mod h1:zR+okUeTbrL6EL3xHUDxZuEtGv04p5shwip1+mL/rLQ=
+github.com/golang/glog v1.1.2 h1:DVjP2PbBOzHyzA+dn3WhHIq4NdVu3Q+pvivFICf/7fo=
+github.com/golang/glog v1.1.2/go.mod h1:zR+okUeTbrL6EL3xHUDxZuEtGv04p5shwip1+mL/rLQ=
 github.com/golang/groupcache v0.0.0-20190702054246-869f871628b6/go.mod h1:cIg4eruTrX1D+g88fzRXU5OdNfaM+9IcxsU14FzY7Hc=
 github.com/golang/groupcache v0.0.0-20191227052852-215e87163ea7/go.mod h1:cIg4eruTrX1D+g88fzRXU5OdNfaM+9IcxsU14FzY7Hc=
 github.com/golang/groupcache v0.0.0-20200121045136-8c9f03a8e57e/go.mod h1:cIg4eruTrX1D+g88fzRXU5OdNfaM+9IcxsU14FzY7Hc=
@@ -232,8 +237,8 @@ github.com/google/pprof v0.0.0-20201023163331-3e6fc7fc9c4c/go.mod h1:kpwsk12EmLe
 github.com/google/pprof v0.0.0-20201203190320-1bf35d6f28c2/go.mod h1:kpwsk12EmLew5upagYY7GY0pfYCcupk39gWOCRROcvE=
 github.com/google/pprof v0.0.0-20201218002935-b9804c9f04c2/go.mod h1:kpwsk12EmLew5upagYY7GY0pfYCcupk39gWOCRROcvE=
 github.com/google/pprof v0.0.0-20211214055906-6f57359322fd/go.mod h1:KgnwoLYCZ8IQu3XUZ8Nc/bM9CCZFOyjUNOSygVozoDg=
-github.com/google/pprof v0.0.0-20230406165453-00490a63f317 h1:hFhpt7CTmR3DX+b4R19ydQFtofxT0Sv3QsKNMVQYTMQ=
-github.com/google/pprof v0.0.0-20230406165453-00490a63f317/go.mod h1:79YE0hCXdHag9sBkw2o+N/YnZtTkXi0UT9Nnixa5eYk=
+github.com/google/pprof v0.0.0-20230811205829-9131a7e9cc17 h1:0h35ESZ02+hN/MFZb7XZOXg+Rl9+Rk8fBIf5YLws9gA=
+github.com/google/pprof v0.0.0-20230811205829-9131a7e9cc17/go.mod h1:Jh3hGz2jkYak8qXPD19ryItVnUgpgeqzdkY/D0EaeuA=
 github.com/google/renameio v0.1.0/go.mod h1:KWCgfxg9yswjAJkECMjeO8J8rahYeXnNhOm40UhjYkI=
 github.com/google/uuid v1.1.1/go.mod h1:TIyPZe4MgqvfeYDBFedMoGGpEw/LqOeaOT+nhxU+yHo=
 github.com/google/uuid v1.1.2/go.mod h1:TIyPZe4MgqvfeYDBFedMoGGpEw/LqOeaOT+nhxU+yHo=
@@ -261,8 +266,8 @@ github.com/ianlancetaylor/demangle v0.0.0-20210905161508-09a460cdf81d/go.mod h1:
 github.com/icholy/digest v0.1.22 h1:dRIwCjtAcXch57ei+F0HSb5hmprL873+q7PoVojdMzM=
 github.com/icholy/digest v0.1.22/go.mod h1:uLAeDdWKIWNFMH0wqbwchbTQOmJWhzSnL7zmqSPqEEc=
 github.com/imdario/mergo v0.3.11/go.mod h1:jmQim1M+e3UYxmgPu/WyfjB3N3VflVyUjjjwH0dnCYA=
-github.com/imdario/mergo v0.3.15 h1:M8XP7IuFNsqUx6VPK2P9OSmsYsI/YFaGil0uD21V3dM=
-github.com/imdario/mergo v0.3.15/go.mod h1:WBLT9ZmE3lPoWsEzCh9LPo3TiwVN+ZKEjmz+hD27ysY=
+github.com/imdario/mergo v0.3.16 h1:wwQJbIsHYGMUyLSPrEq1CT16AhnhNJQ51+4fdHUnCl4=
+github.com/imdario/mergo v0.3.16/go.mod h1:WBLT9ZmE3lPoWsEzCh9LPo3TiwVN+ZKEjmz+hD27ysY=
 github.com/jackc/pgpassfile v1.0.0 h1:/6Hmqy13Ss2zCq62VdNG8tM1wchn8zjSGOBJ6icpsIM=
 github.com/jackc/pgservicefile v0.0.0-20221227161230-091c0ba34f0a h1:bbPeKD0xmW/Y25WS6cokEszi5g+S0QxI/d45PkRi7Nk=
 github.com/jackc/pgx/v5 v5.3.1 h1:Fcr8QJ1ZeLi5zsPZqQeUZhNhxfkkKBOgJuYkJHoBOtU=
@@ -274,8 +279,8 @@ github.com/joho/godotenv v1.5.1 h1:7eLL/+HRGLY0ldzfGMeQkb7vMd0as4CfYvUVzLqw0N0=
 github.com/jonboulle/clockwork v0.2.2/go.mod h1:Pkfl5aHPm1nk2H9h0bjmnJD/BcgbGXUBGnn1kMkgxc8=
 github.com/jonboulle/clockwork v0.4.0 h1:p4Cf1aMWXnXAUh8lVfewRBx1zaTSYKrKMF2g3ST4RZ4=
 github.com/jonboulle/clockwork v0.4.0/go.mod h1:xgRqUGwRcjKCO1vbZUEtSLrqKoPSsUpK7fnezOII0kc=
-github.com/joschahenningsen/TUM-Live/worker v0.0.0-20230410070000-ad9dc527def5 h1:Gsxh0eu1+F1b9UhwGxxIhZuw7x9ofMFXVq4gcSdY9VE=
-github.com/joschahenningsen/TUM-Live/worker v0.0.0-20230410070000-ad9dc527def5/go.mod h1:WiNbLVvqwFulM7ABZrYRmRC1ufJgQhTgSMyCuy8gG0I=
+github.com/joschahenningsen/TUM-Live/worker v0.0.0-20230813170152-4b40e4b3a301 h1:lqbhUuaWE5GETZI5bRWAcl8/JBNU54Rcoow5yyX1zbw=
+github.com/joschahenningsen/TUM-Live/worker v0.0.0-20230813170152-4b40e4b3a301/go.mod h1:o/rM0tvFWj9+9TGOGZa+H7xmumcljkRWvrbuvysiLYE=
 github.com/josharian/intern v1.0.0 h1:vlS4z54oSdjm0bgjRigI+G1HpF+tI+9rE5LLzOg8HmY=
 github.com/josharian/intern v1.0.0/go.mod h1:5DoeVV0s6jJacbCEi61lwdGj/aVlrQvzHFFd8Hwg//Y=
 github.com/json-iterator/go v1.1.10/go.mod h1:KdQUCv79m/52Kvf8AW2vK1V8akMuk1QjK/uOdHXbAo4=
@@ -287,11 +292,12 @@ github.com/kisielk/errcheck v1.2.0/go.mod h1:/BMXB+zMLi60iA8Vv6Ksmxu/1UDYcXs4uQL
 github.com/kisielk/gotool v1.0.0/go.mod h1:XhKaO+MFFWcvkIS/tQcRk01m1F5IRFswLeQ+oQHNcck=
 github.com/klauspost/compress v1.15.0/go.mod h1:/3/Vjq9QcHkK5uEr5lBEmyoZ1iFhe47etQ6QUkpK6sk=
 github.com/klauspost/compress v1.15.6/go.mod h1:PhcZ0MbTNciWF3rruxRgKxI5NkcHHrHUDtV4Yw2GlzU=
-github.com/klauspost/compress v1.16.4 h1:91KN02FnsOYhuunwU4ssRe8lc2JosWmizWa91B5v1PU=
-github.com/klauspost/compress v1.16.4/go.mod h1:ntbaceVETuRiXiv4DpjP66DpAtAGkEQskQzEyD//IeE=
+github.com/klauspost/compress v1.16.7 h1:2mk3MPGNzKyxErAw8YaohYh69+pa4sIQSC0fPGCFR9I=
+github.com/klauspost/compress v1.16.7/go.mod h1:ntbaceVETuRiXiv4DpjP66DpAtAGkEQskQzEyD//IeE=
 github.com/klauspost/cpuid/v2 v2.0.9/go.mod h1:FInQzS24/EEf25PyTYn52gqo7WaD8xa0213Md/qVLRg=
-github.com/klauspost/cpuid/v2 v2.2.4 h1:acbojRNwl3o09bUq+yDCtZFc1aiwaAAxtcn8YkZXnvk=
-github.com/klauspost/cpuid/v2 v2.2.4/go.mod h1:RVVoqg1df56z8g3pUjL/3lE5UfnlrJX8tyFgg4nqhuY=
+github.com/klauspost/cpuid/v2 v2.2.5 h1:0E5MSMDEoAulmXNFquVs//DdoomxaoTY1kUhbc/qbZg=
+github.com/klauspost/cpuid/v2 v2.2.5/go.mod h1:Lcz8mBdAVJIBVzewtcLocK12l3Y+JytZYpaMropDUws=
+github.com/knz/go-libedit v1.10.1/go.mod h1:MZTVkCWyz0oBc7JOWP3wNAzd002ZbM/5hgShxwh4x8M=
 github.com/kr/fs v0.1.0/go.mod h1:FFnZGqtBN9Gxj7eW1uZ42v5BccTP0vu6NEaFoC2HwRg=
 github.com/kr/pretty v0.1.0/go.mod h1:dAy3ld7l9f0ibDNOQOHHMYYIIbhfbHSm3C4ZsoJORNo=
 github.com/kr/pretty v0.2.1/go.mod h1:ipq/a2n7PKx3OHsz4KJII5eveXtPO4qwEXGdVfWzfnI=
@@ -317,10 +323,10 @@ github.com/mattn/go-isatty v0.0.14/go.mod h1:7GGIvUiUoEMVVmxf/4nioHXj79iQHKdU27k
 github.com/mattn/go-isatty v0.0.19 h1:JITubQf0MOLdlGRuRq+jtsDlekdYPia9ZFsB8h/APPA=
 github.com/mattn/go-isatty v0.0.19/go.mod h1:W+V8PltTTMOvKvAeJH7IuucS94S2C6jfK/D7dTCTo3Y=
 github.com/mattn/go-sqlite3 v1.14.16 h1:yOQRA0RpS5PFz/oikGwBEqvAWhWg5ufRz4ETLjwpU1Y=
-github.com/meilisearch/meilisearch-go v0.24.0 h1:GTP8LWZmkMYrGgX5BRZdkC2Txyp0mFYLzXYMlVV7cSQ=
-github.com/meilisearch/meilisearch-go v0.24.0/go.mod h1:SxuSqDcPBIykjWz1PX+KzsYzArNLSCadQodWs8extS0=
-github.com/microcosm-cc/bluemonday v1.0.24 h1:NGQoPtwGVcbGkKfvyYk1yRqknzBuoMiUrO6R7uFTPlw=
-github.com/microcosm-cc/bluemonday v1.0.24/go.mod h1:ArQySAMps0790cHSkdPEJ7bGkF2VePWH773hsJNSHf8=
+github.com/meilisearch/meilisearch-go v0.25.0 h1:xIp+8YWterHuDvpdYlwQ4Qp7im3JlRHmSKiP0NvjyXs=
+github.com/meilisearch/meilisearch-go v0.25.0/go.mod h1:SxuSqDcPBIykjWz1PX+KzsYzArNLSCadQodWs8extS0=
+github.com/microcosm-cc/bluemonday v1.0.25 h1:4NEwSfiJ+Wva0VxN5B8OwMicaJvD8r9tlJWm9rtloEg=
+github.com/microcosm-cc/bluemonday v1.0.25/go.mod h1:ZIOjCQp1OrzBBPIJmfX4qDYFuhU02nx4bn030ixfHLE=
 github.com/microsoft/go-mssqldb v0.21.0 h1:p2rpHIL7TlSv1QrbXJUAcbyRKnIT0C9rRkH2E4OjLn8=
 github.com/mitchellh/copystructure v1.0.0/go.mod h1:SNtv71yrdKgLRyLFxmLdkAbkKEFWgYaq1OVrnRcwhnw=
 github.com/mitchellh/copystructure v1.2.0 h1:vpKXTN4ewci03Vljg/q9QvCGUDttBOGBIa15WveJJGw=
@@ -340,8 +346,8 @@ github.com/modern-go/reflect2 v1.0.2/go.mod h1:yWuevngMOJpCy52FWWMvUC8ws7m/LJsjY
 github.com/olahol/melody v0.0.0-20180227134253-7bd65910e5ab/go.mod h1:3lo03f1jM3KFUG/rsujuLB1rBmlvIzVM3SCqbuHqsBU=
 github.com/panjf2000/ants/v2 v2.4.2/go.mod h1:f6F0NZVFsGCp5A7QW/Zj/m92atWwOkY0OIhFxRNFr4A=
 github.com/pelletier/go-toml/v2 v2.0.1/go.mod h1:r9LEWfGN8R5k0VXJ+0BkIe7MYkRdwZOjgMj2KwnJFUo=
-github.com/pelletier/go-toml/v2 v2.0.8 h1:0ctb6s9mE31h0/lhu+J6OPmVeDxJn+kYnJc2jZR9tGQ=
-github.com/pelletier/go-toml/v2 v2.0.8/go.mod h1:vuYfssBdrU2XDZ9bYydBu6t+6a6PYNcZljzZR9VXg+4=
+github.com/pelletier/go-toml/v2 v2.0.9 h1:uH2qQXheeefCCkuBBSLi7jCiSmj3VRh2+Goq2N7Xxu0=
+github.com/pelletier/go-toml/v2 v2.0.9/go.mod h1:tJU2Z3ZkXwnxa4DPO899bsyIoywizdUvyaeZurnPPDc=
 github.com/pingcap/errors v0.11.4 h1:lFuQV/oaUMGcD2tqt+01ROSmJs75VG1ToEOkZIZ4nE4=
 github.com/pkg/diff v0.0.0-20210226163009-20ebb0f2a09e/go.mod h1:pJLUxLENpZxwdsKMEsNbx1VGcRFpLqf3715MtcvvzbA=
 github.com/pkg/errors v0.8.1/go.mod h1:bwawxfHBFNV+L2hUp1rHADufV3IMtnDRdf1r5NINEl0=
@@ -362,8 +368,8 @@ github.com/rogpeppe/go-internal v1.8.0/go.mod h1:WmiCO8CzOY8rg0OYDC4/i/2WRWAB6po
 github.com/rogpeppe/go-internal v1.9.0/go.mod h1:WtVeX8xhTBvf0smdhujwtBcq4Qrzq/fJaraNFVN+nFs=
 github.com/rogpeppe/go-internal v1.10.0 h1:TMyTOH3F/DB16zRVcYyreMH6GnZZrwQVAoYjRBZyWFQ=
 github.com/russellhaering/goxmldsig v1.2.0/go.mod h1:gM4MDENBQf7M+V824SGfyIUVFWydB7n0KkEubVJl+Tw=
-github.com/russellhaering/goxmldsig v1.3.0 h1:DllIWUgMy0cRUMfGiASiYEa35nsieyD3cigIwLonTPM=
-github.com/russellhaering/goxmldsig v1.3.0/go.mod h1:gM4MDENBQf7M+V824SGfyIUVFWydB7n0KkEubVJl+Tw=
+github.com/russellhaering/goxmldsig v1.4.0 h1:8UcDh/xGyQiyrW+Fq5t8f+l2DLB1+zlhYzkPUJ7Qhys=
+github.com/russellhaering/goxmldsig v1.4.0/go.mod h1:gM4MDENBQf7M+V824SGfyIUVFWydB7n0KkEubVJl+Tw=
 github.com/russross/blackfriday/v2 v2.1.0 h1:JIOH55/0cWyOuilr9/qlrm0BSXldqnqwMsf35Ld67mk=
 github.com/russross/blackfriday/v2 v2.1.0/go.mod h1:+Rmxgy9KzJVeS9/2gXHxylqXiyQDYRxCVz55jmeOWTM=
 github.com/satori/go.uuid v1.2.0 h1:0uYX9dsZ2yD7q2RtLRtPSdGDWzjeM3TbMJP9utgA0ww=
@@ -396,15 +402,13 @@ github.com/stretchr/testify v1.5.1/go.mod h1:5W2xD1RspED5o8YsWQXVCued0rvSQ+mT+I5
 github.com/stretchr/testify v1.6.1/go.mod h1:6Fq8oRcR53rry900zMqJjRRixrwX3KX962/h/Wwjteg=
 github.com/stretchr/testify v1.7.0/go.mod h1:6Fq8oRcR53rry900zMqJjRRixrwX3KX962/h/Wwjteg=
 github.com/stretchr/testify v1.7.1/go.mod h1:6Fq8oRcR53rry900zMqJjRRixrwX3KX962/h/Wwjteg=
-github.com/stretchr/testify v1.7.2/go.mod h1:R6va5+xMeoiuVRoj+gSkQ7d3FALtqAAGI1FQKckRals=
 github.com/stretchr/testify v1.8.0/go.mod h1:yNjHg4UonilssWZ8iaSj1OCr/vHnekPRkoO+kdMU+MU=
 github.com/stretchr/testify v1.8.1/go.mod h1:w2LPCIKwWwSfY2zedu0+kehJoqGctiVI29o6fzry7u4=
 github.com/stretchr/testify v1.8.2/go.mod h1:w2LPCIKwWwSfY2zedu0+kehJoqGctiVI29o6fzry7u4=
-github.com/stretchr/testify v1.8.3/go.mod h1:sz/lmYIOXD/1dqDmKjjqLyZ2RngseejIcXlSw2iwfAo=
 github.com/stretchr/testify v1.8.4 h1:CcVxjf3Q8PM0mHUKJCdn+eZZtm5yQwehR5yeSVQQcUk=
 github.com/stretchr/testify v1.8.4/go.mod h1:sz/lmYIOXD/1dqDmKjjqLyZ2RngseejIcXlSw2iwfAo=
-github.com/subosito/gotenv v1.4.2 h1:X1TuBLAMDFbaTAChgCBLu3DU3UPyELpnF2jjJ2cz/S8=
-github.com/subosito/gotenv v1.4.2/go.mod h1:ayKnFf/c6rvx/2iiLrJUk1e6plDbT3edrFNGqEflhK0=
+github.com/subosito/gotenv v1.6.0 h1:9NlTDc1FTs4qu0DDq7AEtTPNw6SVm7uBMsUCUjABIf8=
+github.com/subosito/gotenv v1.6.0/go.mod h1:Dk4QP5c2W3ibzajGcXpNraDfq2IrhjMIvMSWPKKo0FU=
 github.com/twitchyliquid64/golang-asm v0.15.1 h1:SU5vSMR7hnwNxj24w34ZyCi/FmDZTkS4MhqMhdFk5YI=
 github.com/twitchyliquid64/golang-asm v0.15.1/go.mod h1:a1lVb/DtPvCB8fslRZhAngC2+aY1QWCk3Cedj/Gdt08=
 github.com/u2takey/go-utils v0.3.1 h1:TaQTgmEZZeDHQFYfd+AdUT1cT4QJgJn/XVPELhHw4ys=
@@ -416,8 +420,8 @@ github.com/ugorji/go/codec v1.2.11/go.mod h1:UNopzCgEMSXjBc6AOMqYvWC1ktqTAfzJZUZ
 github.com/valyala/bytebufferpool v1.0.0 h1:GqA5TC/0021Y/b9FG4Oi9Mr3q7XYx6KllzawFIhcdPw=
 github.com/valyala/bytebufferpool v1.0.0/go.mod h1:6bBcMArwyJ5K/AmCkWv1jt77kVWyCJ6HpOuEn7z0Csc=
 github.com/valyala/fasthttp v1.37.1-0.20220607072126-8a320890c08d/go.mod h1:t/G+3rLek+CyY9bnIE+YlMRddxVAAGjhxndDB4i4C0I=
-github.com/valyala/fasthttp v1.45.0 h1:zPkkzpIn8tdHZUrVa6PzYd0i5verqiPSkgTd3bSUcpA=
-github.com/valyala/fasthttp v1.45.0/go.mod h1:k2zXd82h/7UZc3VOdJ2WaUqt1uZ/XpXAfE9i+HBC3lA=
+github.com/valyala/fasthttp v1.48.0 h1:oJWvHb9BIZToTQS3MuQ2R3bJZiNSa2KiNdeI8A+79Tc=
+github.com/valyala/fasthttp v1.48.0/go.mod h1:k2zXd82h/7UZc3VOdJ2WaUqt1uZ/XpXAfE9i+HBC3lA=
 github.com/valyala/tcplisten v1.0.0/go.mod h1:T0xQ8SeCZGxckz9qRXTfG43PvQ/mcWh7FwZEA7Ioqkc=
 github.com/yuin/goldmark v1.1.25/go.mod h1:3hX8gzYuyVAZsxl0MRgGTJEmQBFcNTphYh9decYSb74=
 github.com/yuin/goldmark v1.1.27/go.mod h1:3hX8gzYuyVAZsxl0MRgGTJEmQBFcNTphYh9decYSb74=
@@ -433,8 +437,8 @@ go.opencensus.io v0.22.3/go.mod h1:yxeiOL68Rb0Xd1ddK5vPZ/oVn4vY4Ynel7k9FzqtOIw=
 go.opencensus.io v0.22.4/go.mod h1:yxeiOL68Rb0Xd1ddK5vPZ/oVn4vY4Ynel7k9FzqtOIw=
 go.opencensus.io v0.22.5/go.mod h1:5pWMHQbX5EPX2/62yrJeAkowc+lfs/XD7Uxpq3pI6kk=
 golang.org/x/arch v0.0.0-20210923205945-b76863e36670/go.mod h1:5om86z9Hs0C8fWVUuoMHwpExlXzs5Tkyp9hOrfG7pp8=
-golang.org/x/arch v0.3.0 h1:02VY4/ZcO/gBOH6PUaoiptASxtXU10jazRCP865E97k=
-golang.org/x/arch v0.3.0/go.mod h1:5om86z9Hs0C8fWVUuoMHwpExlXzs5Tkyp9hOrfG7pp8=
+golang.org/x/arch v0.4.0 h1:A8WCeEWhLwPBKNbFi5Wv5UTCBx5zzubnXDlMOFAzFMc=
+golang.org/x/arch v0.4.0/go.mod h1:5om86z9Hs0C8fWVUuoMHwpExlXzs5Tkyp9hOrfG7pp8=
 golang.org/x/crypto v0.0.0-20190308221718-c2843e01d9a2/go.mod h1:djNgcEr1/C05ACkg1iLfiJU5Ep61QUkGW8qpdssI0+w=
 golang.org/x/crypto v0.0.0-20190510104115-cbcb75029529/go.mod h1:yigFU9vqHzYiE8UmvKecakEJjdnWj3jj499lnFckfCI=
 golang.org/x/crypto v0.0.0-20190605123033-f99c8df09eb5/go.mod h1:yigFU9vqHzYiE8UmvKecakEJjdnWj3jj499lnFckfCI=
@@ -445,11 +449,11 @@ golang.org/x/crypto v0.0.0-20210711020723-a769d52b0f97/go.mod h1:GvvjBRRGRdwPK5y
 golang.org/x/crypto v0.0.0-20210921155107-089bfa567519/go.mod h1:GvvjBRRGRdwPK5ydBHafDWAxML/pGHZbMvKqRZ5+Abc=
 golang.org/x/crypto v0.0.0-20220128200615-198e4374d7ed/go.mod h1:IxCIyHEi3zRg3s0A5j5BB6A9Jmi73HwBIUl50j+osU4=
 golang.org/x/crypto v0.0.0-20220214200702-86341886e292/go.mod h1:IxCIyHEi3zRg3s0A5j5BB6A9Jmi73HwBIUl50j+osU4=
-golang.org/x/crypto v0.0.0-20220622213112-05595931fe9d/go.mod h1:IxCIyHEi3zRg3s0A5j5BB6A9Jmi73HwBIUl50j+osU4=
 golang.org/x/crypto v0.0.0-20220722155217-630584e8d5aa/go.mod h1:IxCIyHEi3zRg3s0A5j5BB6A9Jmi73HwBIUl50j+osU4=
 golang.org/x/crypto v0.3.0/go.mod h1:hebNnKkNXi2UzZN1eVRvBB7co0a+JxK6XbPiWVs/3J4=
-golang.org/x/crypto v0.9.0 h1:LF6fAI+IutBocDJ2OT0Q1g8plpYljMZ4+lty+dsqw3g=
-golang.org/x/crypto v0.9.0/go.mod h1:yrmDGqONDYtNj3tH8X9dzUun2m2lzPa9ngI6/RUPGR0=
+golang.org/x/crypto v0.7.0/go.mod h1:pYwdfH91IfpZVANVyUOhSIPZaFoJGxTFbZhFTx+dXZU=
+golang.org/x/crypto v0.12.0 h1:tFM/ta59kqch6LlvYnPa0yx5a83cL2nHflFhYKvv9Yk=
+golang.org/x/crypto v0.12.0/go.mod h1:NF0Gs7EO5K4qLn+Ylc+fih8BSTeIjAP05siRnAh98yw=
 golang.org/x/exp v0.0.0-20190121172915-509febef88a4/go.mod h1:CJ0aWSM057203Lf6IL+f9T1iT9GByDxfZKAQTCR3kQA=
 golang.org/x/exp v0.0.0-20190306152737-a1d7652674e8/go.mod h1:CJ0aWSM057203Lf6IL+f9T1iT9GByDxfZKAQTCR3kQA=
 golang.org/x/exp v0.0.0-20190510132918-efd6b22b2522/go.mod h1:ZjyILWgesfNpC6sMxTJOJm9Kp84zZh5NQWvqDGG3Qr8=
@@ -485,6 +489,7 @@ golang.org/x/mod v0.4.0/go.mod h1:s0Qsj1ACt9ePp/hMypM3fl4fZqREWJwdYDEqhRiZZUA=
 golang.org/x/mod v0.4.1/go.mod h1:s0Qsj1ACt9ePp/hMypM3fl4fZqREWJwdYDEqhRiZZUA=
 golang.org/x/mod v0.4.2/go.mod h1:s0Qsj1ACt9ePp/hMypM3fl4fZqREWJwdYDEqhRiZZUA=
 golang.org/x/mod v0.6.0-dev.0.20220419223038-86c51ed26bb4/go.mod h1:jJ57K6gSWd91VN4djpZkiMVwK6gcyfeH4XE8wZrZaV4=
+golang.org/x/mod v0.8.0/go.mod h1:iBbtSCu2XBx23ZKBPSOrRkjjQPZFPuis4dIYUhu/chs=
 golang.org/x/net v0.0.0-20180724234803-3673e40ba225/go.mod h1:mL1N/T3taQHkDXs73rZJwtUhF3w3ftmwwsq0BUmARs4=
 golang.org/x/net v0.0.0-20180826012351-8a410e7b638d/go.mod h1:mL1N/T3taQHkDXs73rZJwtUhF3w3ftmwwsq0BUmARs4=
 golang.org/x/net v0.0.0-20190108225652-1e06a53dbb7e/go.mod h1:mL1N/T3taQHkDXs73rZJwtUhF3w3ftmwwsq0BUmARs4=
@@ -522,9 +527,11 @@ golang.org/x/net v0.0.0-20211112202133-69e39bad7dc2/go.mod h1:9nx3DQGgdP8bBQD5qx
 golang.org/x/net v0.0.0-20220225172249-27dd8689420f/go.mod h1:CfG3xpIq0wQ8r1q4Su4UZFWDARRcnwPjda9FqA0JpMk=
 golang.org/x/net v0.0.0-20220722155237-a158d28d115b/go.mod h1:XRhObCWvk6IyKnWLug+ECip1KBveYUHfp+8e9klMJ9c=
 golang.org/x/net v0.2.0/go.mod h1:KqCZLdyyvdV855qA2rE3GC2aiw5xGR5TEjj8smXukLY=
-golang.org/x/net v0.5.0/go.mod h1:DivGGAXEgPSlEBzxGzZI+ZLohi+xUj054jfeKui00ws=
-golang.org/x/net v0.10.0 h1:X2//UzNDwYmtCLn7To6G58Wr6f5ahEAQgKNzv9Y951M=
-golang.org/x/net v0.10.0/go.mod h1:0qNGK6F8kojg2nk9dLZ2mShWaEBan6FAoqfSigmmuDg=
+golang.org/x/net v0.6.0/go.mod h1:2Tu9+aMcznHK/AK1HMvgo6xiTLG5rD5rZLDS+rp2Bjs=
+golang.org/x/net v0.7.0/go.mod h1:2Tu9+aMcznHK/AK1HMvgo6xiTLG5rD5rZLDS+rp2Bjs=
+golang.org/x/net v0.8.0/go.mod h1:QVkue5JL9kW//ek3r6jTKnTFis1tRmNAW2P1shuFdJc=
+golang.org/x/net v0.14.0 h1:BONx9s002vGdD9umnlX1Po8vOZmrgH34qlHcD1MfK14=
+golang.org/x/net v0.14.0/go.mod h1:PpSgVXXLK0OxS0F31C1/tv6XNguvCrnXIDrFMspZIUI=
 golang.org/x/oauth2 v0.0.0-20180821212333-d2e6202438be/go.mod h1:N/0e6XlmueqKjAGxoOufVs8QHGRruUQn6yWY3a++T0U=
 golang.org/x/oauth2 v0.0.0-20190226205417-e64efc72b421/go.mod h1:gOpvHmFTYa4IltrdGE7lF6nIHvwfUNPOp7c8zoXwtLw=
 golang.org/x/oauth2 v0.0.0-20190604053449-0f29369cfe45/go.mod h1:gOpvHmFTYa4IltrdGE7lF6nIHvwfUNPOp7c8zoXwtLw=
@@ -534,8 +541,8 @@ golang.org/x/oauth2 v0.0.0-20200902213428-5d25da1a8d43/go.mod h1:KelEdhl1UZF7XfJ
 golang.org/x/oauth2 v0.0.0-20201109201403-9fd604954f58/go.mod h1:KelEdhl1UZF7XfJ4dDtk6s++YSgaE7mD/BuKKDLBl4A=
 golang.org/x/oauth2 v0.0.0-20201208152858-08078c50e5b5/go.mod h1:KelEdhl1UZF7XfJ4dDtk6s++YSgaE7mD/BuKKDLBl4A=
 golang.org/x/oauth2 v0.0.0-20210218202405-ba52d332ba99/go.mod h1:KelEdhl1UZF7XfJ4dDtk6s++YSgaE7mD/BuKKDLBl4A=
-golang.org/x/oauth2 v0.7.0 h1:qe6s0zUXlPX80/dITx3440hWZ7GwMwgDDyrSGTPJG/g=
-golang.org/x/oauth2 v0.7.0/go.mod h1:hPLQkd9LyjfXTiRohC/41GhcFqxisoUQ99sCUOHO9x4=
+golang.org/x/oauth2 v0.11.0 h1:vPL4xzxBM4niKCW6g9whtaWVXTJf1U5e4aZxxFx/gbU=
+golang.org/x/oauth2 v0.11.0/go.mod h1:LdF7O/8bLR/qWK9DrpXmbHLTouvRHK0SgJl0GmDBchk=
 golang.org/x/sync v0.0.0-20180314180146-1d60e4601c6f/go.mod h1:RxMgew5VJxzue5/jJTE5uejpjVlOe/izrB70Jof72aM=
 golang.org/x/sync v0.0.0-20181108010431-42b317875d0f/go.mod h1:RxMgew5VJxzue5/jJTE5uejpjVlOe/izrB70Jof72aM=
 golang.org/x/sync v0.0.0-20181221193216-37e7f081c4d4/go.mod h1:RxMgew5VJxzue5/jJTE5uejpjVlOe/izrB70Jof72aM=
@@ -548,6 +555,7 @@ golang.org/x/sync v0.0.0-20201020160332-67f06af15bc9/go.mod h1:RxMgew5VJxzue5/jJ
 golang.org/x/sync v0.0.0-20201207232520-09787c993a3a/go.mod h1:RxMgew5VJxzue5/jJTE5uejpjVlOe/izrB70Jof72aM=
 golang.org/x/sync v0.0.0-20210220032951-036812b2e83c/go.mod h1:RxMgew5VJxzue5/jJTE5uejpjVlOe/izrB70Jof72aM=
 golang.org/x/sync v0.0.0-20220722155255-886fb9371eb4/go.mod h1:RxMgew5VJxzue5/jJTE5uejpjVlOe/izrB70Jof72aM=
+golang.org/x/sync v0.1.0/go.mod h1:RxMgew5VJxzue5/jJTE5uejpjVlOe/izrB70Jof72aM=
 golang.org/x/sys v0.0.0-20180830151530-49385e6e1522/go.mod h1:STP8DvDyc/dI5b8T5hshtkjS+E42TnysNCUPdjciGhY=
 golang.org/x/sys v0.0.0-20190215142949-d0b11bdaac8a/go.mod h1:STP8DvDyc/dI5b8T5hshtkjS+E42TnysNCUPdjciGhY=
 golang.org/x/sys v0.0.0-20190312061237-fead79001313/go.mod h1:h1NjWce9XRLGQEsW7wpKNCjG9DtNlClVuFLEZdDNbEs=
@@ -592,20 +600,20 @@ golang.org/x/sys v0.0.0-20211007075335-d3039528d8ac/go.mod h1:oPkhp1MJrh7nUepCBc
 golang.org/x/sys v0.0.0-20211216021012-1d35b9e2eb4e/go.mod h1:oPkhp1MJrh7nUepCBck5+mAzfO9JrbApNNgaTdGDITg=
 golang.org/x/sys v0.0.0-20220227234510-4e6760a101f9/go.mod h1:oPkhp1MJrh7nUepCBck5+mAzfO9JrbApNNgaTdGDITg=
 golang.org/x/sys v0.0.0-20220520151302-bc2c85ada10a/go.mod h1:oPkhp1MJrh7nUepCBck5+mAzfO9JrbApNNgaTdGDITg=
-golang.org/x/sys v0.0.0-20220704084225-05e143d24a9e/go.mod h1:oPkhp1MJrh7nUepCBck5+mAzfO9JrbApNNgaTdGDITg=
 golang.org/x/sys v0.0.0-20220715151400-c0bba94af5f8/go.mod h1:oPkhp1MJrh7nUepCBck5+mAzfO9JrbApNNgaTdGDITg=
 golang.org/x/sys v0.0.0-20220722155257-8c9f86f7a55f/go.mod h1:oPkhp1MJrh7nUepCBck5+mAzfO9JrbApNNgaTdGDITg=
 golang.org/x/sys v0.0.0-20220908164124-27713097b956/go.mod h1:oPkhp1MJrh7nUepCBck5+mAzfO9JrbApNNgaTdGDITg=
 golang.org/x/sys v0.0.0-20221010170243-090e33056c14/go.mod h1:oPkhp1MJrh7nUepCBck5+mAzfO9JrbApNNgaTdGDITg=
 golang.org/x/sys v0.2.0/go.mod h1:oPkhp1MJrh7nUepCBck5+mAzfO9JrbApNNgaTdGDITg=
-golang.org/x/sys v0.4.0/go.mod h1:oPkhp1MJrh7nUepCBck5+mAzfO9JrbApNNgaTdGDITg=
+golang.org/x/sys v0.5.0/go.mod h1:oPkhp1MJrh7nUepCBck5+mAzfO9JrbApNNgaTdGDITg=
 golang.org/x/sys v0.6.0/go.mod h1:oPkhp1MJrh7nUepCBck5+mAzfO9JrbApNNgaTdGDITg=
-golang.org/x/sys v0.8.0 h1:EBmGv8NaZBZTWvrbjNoL6HVt+IVy3QDQpJs7VRIw3tU=
-golang.org/x/sys v0.8.0/go.mod h1:oPkhp1MJrh7nUepCBck5+mAzfO9JrbApNNgaTdGDITg=
+golang.org/x/sys v0.11.0 h1:eG7RXZHdqOJ1i+0lgLgCpSXAp6M3LYlAo6osgSi0xOM=
+golang.org/x/sys v0.11.0/go.mod h1:oPkhp1MJrh7nUepCBck5+mAzfO9JrbApNNgaTdGDITg=
 golang.org/x/term v0.0.0-20201126162022-7de9c90e9dd1/go.mod h1:bj7SfCRtBDWHUb9snDiAeCFNEtKQo2Wmx5Cou7ajbmo=
 golang.org/x/term v0.0.0-20210927222741-03fcf44c2211/go.mod h1:jbD1KX2456YbFQfuXm/mYQcufACuNUgVhRMnK/tPxf8=
 golang.org/x/term v0.2.0/go.mod h1:TVmDHMZPmdnySmBfhjOoOdhjzdE1h4u1VwSiw2l1Nuc=
-golang.org/x/term v0.4.0/go.mod h1:9P2UbLfCdcvo3p/nzKvsmas4TnlujnuoV9hGgYzW1lQ=
+golang.org/x/term v0.5.0/go.mod h1:jMB1sMXY+tzblOD4FWmEbocvup2/aLOaQEp7JmGp78k=
+golang.org/x/term v0.6.0/go.mod h1:m6U89DPEgQRMq3DNkDClhWw02AUbt2daBVO4cn4Hv9U=
 golang.org/x/text v0.0.0-20170915032832-14c0d48ead0c/go.mod h1:NqM8EUOU14njkJ3fqMW+pc6Ldnwhi/IjpwHt7yyuwOQ=
 golang.org/x/text v0.3.0/go.mod h1:NqM8EUOU14njkJ3fqMW+pc6Ldnwhi/IjpwHt7yyuwOQ=
 golang.org/x/text v0.3.1-0.20180807135948-17ff2d5776d2/go.mod h1:NqM8EUOU14njkJ3fqMW+pc6Ldnwhi/IjpwHt7yyuwOQ=
@@ -615,9 +623,10 @@ golang.org/x/text v0.3.4/go.mod h1:5Zoc/QRtKVWzQhOtBMvqHzDpF6irO9z98xDceosuGiQ=
 golang.org/x/text v0.3.6/go.mod h1:5Zoc/QRtKVWzQhOtBMvqHzDpF6irO9z98xDceosuGiQ=
 golang.org/x/text v0.3.7/go.mod h1:u+2+/6zg+i71rQMx5EYifcz6MCKuco9NR6JIITiCfzQ=
 golang.org/x/text v0.4.0/go.mod h1:mrYo+phRRbMaCq/xk9113O4dZlRixOauAjOtrjsXDZ8=
-golang.org/x/text v0.6.0/go.mod h1:mrYo+phRRbMaCq/xk9113O4dZlRixOauAjOtrjsXDZ8=
-golang.org/x/text v0.9.0 h1:2sjJmO8cDvYveuX97RDLsxlyUxLl+GHoLxBiRdHllBE=
-golang.org/x/text v0.9.0/go.mod h1:e1OnstbJyHTd6l/uOt8jFFHp6TRDWZR/bV3emEE/zU8=
+golang.org/x/text v0.7.0/go.mod h1:mrYo+phRRbMaCq/xk9113O4dZlRixOauAjOtrjsXDZ8=
+golang.org/x/text v0.8.0/go.mod h1:e1OnstbJyHTd6l/uOt8jFFHp6TRDWZR/bV3emEE/zU8=
+golang.org/x/text v0.12.0 h1:k+n5B8goJNdU7hSvEtMUz3d1Q6D/XW4COJSJR6fN0mc=
+golang.org/x/text v0.12.0/go.mod h1:TvPlkZtksWOMsz7fbANvkp4WM8x/WCo/om8BMLbz+aE=
 golang.org/x/time v0.0.0-20181108054448-85acf8d2951c/go.mod h1:tRJNPiyCQ0inRvYxbN9jk5I+vvW/OXSQhTDSoE431IQ=
 golang.org/x/time v0.0.0-20190308202827-9d24e82272b4/go.mod h1:tRJNPiyCQ0inRvYxbN9jk5I+vvW/OXSQhTDSoE431IQ=
 golang.org/x/time v0.0.0-20191024005414-555d28b269f0/go.mod h1:tRJNPiyCQ0inRvYxbN9jk5I+vvW/OXSQhTDSoE431IQ=
@@ -672,6 +681,7 @@ golang.org/x/tools v0.0.0-20210108195828-e2f9c7f1fc8e/go.mod h1:emZCQorbCU4vsT4f
 golang.org/x/tools v0.1.0/go.mod h1:xkSsbof2nBLbhDlRMhhhyNLN/zl3eTqcnHD5viDpcZ0=
 golang.org/x/tools v0.1.1/go.mod h1:o0xws9oXOQQZyjljx8fwUC0k7L1pTE6eaCbjGeHmOkk=
 golang.org/x/tools v0.1.12/go.mod h1:hNGJHUnrk76NpqgfD5Aqm5Crs+Hm0VOH/i9J2+nxYbc=
+golang.org/x/tools v0.6.0/go.mod h1:Xwgl3UAJ/d3gWutnCtw505GrjyAbvKui8lOU390QaIU=
 golang.org/x/xerrors v0.0.0-20190717185122-a985d3407aa7/go.mod h1:I/5z698sn9Ka8TeJc9MKroUUfqBBauWjQqLJ2OPfmY0=
 golang.org/x/xerrors v0.0.0-20191011141410-1b5146add898/go.mod h1:I/5z698sn9Ka8TeJc9MKroUUfqBBauWjQqLJ2OPfmY0=
 golang.org/x/xerrors v0.0.0-20191204190536-9bdfabe68543/go.mod h1:I/5z698sn9Ka8TeJc9MKroUUfqBBauWjQqLJ2OPfmY0=
@@ -739,8 +749,8 @@ google.golang.org/genproto v0.0.0-20201210142538-e3217bee35cc/go.mod h1:FWY/as6D
 google.golang.org/genproto v0.0.0-20201214200347-8c77b98c765d/go.mod h1:FWY/as6DDZQgahTzZj3fqbO1CbirC29ZNUFHwi0/+no=
 google.golang.org/genproto v0.0.0-20210108203827-ffc7fda8c3d7/go.mod h1:FWY/as6DDZQgahTzZj3fqbO1CbirC29ZNUFHwi0/+no=
 google.golang.org/genproto v0.0.0-20210226172003-ab064af71705/go.mod h1:FWY/as6DDZQgahTzZj3fqbO1CbirC29ZNUFHwi0/+no=
-google.golang.org/genproto v0.0.0-20230410155749-daa745c078e1 h1:KpwkzHKEF7B9Zxg18WzOa7djJ+Ha5DzthMyZYQfEn2A=
-google.golang.org/genproto v0.0.0-20230410155749-daa745c078e1/go.mod h1:nKE/iIaLqn2bQwXBg8f1g2Ylh6r5MN5CmZvuzZCgsCU=
+google.golang.org/genproto/googleapis/rpc v0.0.0-20230814215434-ca7cfce7776a h1:5rTPHLf5eLPfqGvw3fLpEmUpko2Ky91ft14LxGs5BZc=
+google.golang.org/genproto/googleapis/rpc v0.0.0-20230814215434-ca7cfce7776a/go.mod h1:+Bk1OCOj40wS2hwAMA+aCW9ypzm63QTBBHp6lQ3p+9M=
 google.golang.org/grpc v1.19.0/go.mod h1:mqu4LbDTu4XGKhr4mRzUsmM4RtVoemTSY81AxZiDr8c=
 google.golang.org/grpc v1.20.1/go.mod h1:10oTOabMzJvdu6/UiuZezV6QK5dSlG84ov/aaiqXj38=
 google.golang.org/grpc v1.21.1/go.mod h1:oYelfM1adQP15Ek0mdvEgi9Df8B9CZIaU1084ijfRaM=
@@ -757,8 +767,8 @@ google.golang.org/grpc v1.31.1/go.mod h1:N36X2cJ7JwdamYAgDz+s+rVMFjt3numwzf/HckM
 google.golang.org/grpc v1.33.2/go.mod h1:JMHMWHQWaTccqQQlmk3MJZS+GWXOdAesneDmEnv2fbc=
 google.golang.org/grpc v1.34.0/go.mod h1:WotjhfgOW/POjDeRt8vscBtXq+2VjORFy659qA51WJ8=
 google.golang.org/grpc v1.35.0/go.mod h1:qjiiYl8FncCW8feJPdyg3v6XW24KsRHe+dy9BAGRRjU=
-google.golang.org/grpc v1.55.0 h1:3Oj82/tFSCeUrRTg/5E/7d/W5A1tj6Ky1ABAuZuv5ag=
-google.golang.org/grpc v1.55.0/go.mod h1:iYEXKGkEBhg1PjZQvoYEVPTDkHo1/bjTnfwTeGONTY8=
+google.golang.org/grpc v1.57.0 h1:kfzNeI/klCGD2YPMUlaGNT3pxvYfga7smW3Vth8Zsiw=
+google.golang.org/grpc v1.57.0/go.mod h1:Sd+9RMTACXwmub0zcNY2c4arhtrbBYD1AUHI/dt16Mo=
 google.golang.org/protobuf v0.0.0-20200109180630-ec00e32a8dfd/go.mod h1:DFci5gLYBciE7Vtevhsrf46CRTquxDuWsQurQQe4oz8=
 google.golang.org/protobuf v0.0.0-20200221191635-4d8936d0db64/go.mod h1:kwYJMbMJ01Woi6D6+Kah6886xMZcty6N08ah7+eCXa0=
 google.golang.org/protobuf v0.0.0-20200228230310-ab0ca4ff8a60/go.mod h1:cfTl7dwQJ+fmap5saPgwCLgHXTUD7jkjRqWcaiX5VyM=
@@ -772,8 +782,8 @@ google.golang.org/protobuf v1.25.0/go.mod h1:9JNX74DMeImyA3h4bdi1ymwjUzf21/xIlba
 google.golang.org/protobuf v1.26.0-rc.1/go.mod h1:jlhhOSvTdKEhbULTjvd4ARK9grFBp09yW+WbY/TyQbw=
 google.golang.org/protobuf v1.26.0/go.mod h1:9q0QmTI4eRPtz6boOQmLYwt+qCgq0jsYwAQnmE0givc=
 google.golang.org/protobuf v1.28.0/go.mod h1:HV8QOd/L58Z+nl8r43ehVNZIU/HEI6OcFqwMG9pJV4I=
-google.golang.org/protobuf v1.30.0 h1:kPPoIgf3TsEvrm0PFe15JQ+570QVxYzEvvHqChK+cng=
-google.golang.org/protobuf v1.30.0/go.mod h1:HV8QOd/L58Z+nl8r43ehVNZIU/HEI6OcFqwMG9pJV4I=
+google.golang.org/protobuf v1.31.0 h1:g0LDEJHgrBl9N9r17Ru3sqWhkIx2NB67okBHPwC7hs8=
+google.golang.org/protobuf v1.31.0/go.mod h1:HV8QOd/L58Z+nl8r43ehVNZIU/HEI6OcFqwMG9pJV4I=
 gopkg.in/check.v1 v0.0.0-20161208181325-20d25e280405/go.mod h1:Co6ibVJAznAaIkqp8huTwlJQCZ016jof/cbN4VW5Yz0=
 gopkg.in/check.v1 v1.0.0-20180628173108-788fd7840127/go.mod h1:Co6ibVJAznAaIkqp8huTwlJQCZ016jof/cbN4VW5Yz0=
 gopkg.in/check.v1 v1.0.0-20201130134442-10cb98267c6c h1:Hei/4ADfdWqJk1ZMxUNpqntNwaWcugrBjAiHlqqRiVk=
@@ -795,8 +805,9 @@ gorm.io/driver/mysql v1.5.1/go.mod h1:Jo3Xu7mMhCyj8dlrb3WoCaRd1FhsVh+yMXb1jUInf5
 gorm.io/driver/postgres v1.5.2 h1:ytTDxxEv+MplXOfFe3Lzm7SjG09fcdb3Z/c056DTBx0=
 gorm.io/driver/sqlite v1.5.1 h1:hYyrLkAWE71bcarJDPdZNTLWtr8XrSjOWyjUYI6xdL4=
 gorm.io/driver/sqlserver v1.5.0 h1:zol7ePfY1XiPfjEvjjBh4VatIF3kycNcPE0EMCXznHY=
-gorm.io/gorm v1.25.1 h1:nsSALe5Pr+cM3V1qwwQ7rOkw+6UeLrX5O4v3llhHa64=
 gorm.io/gorm v1.25.1/go.mod h1:L4uxeKpfBml98NYqVqwAdmV1a2nBtAec/cf3fpucW/k=
+gorm.io/gorm v1.25.3 h1:zi4rHZj1anhZS2EuEODMhDisGy+Daq9jtPrNGgbQYD8=
+gorm.io/gorm v1.25.3/go.mod h1:L4uxeKpfBml98NYqVqwAdmV1a2nBtAec/cf3fpucW/k=
 gotest.tools v2.2.0+incompatible h1:VsBPFP1AI068pPrMxtb/S8Zkgf9xEmTLJjfM+P5UIEo=
 gotest.tools v2.2.0+incompatible/go.mod h1:DsYFclhRJ6vuDpmuTbkuFWG+y2sxOXAzmJt81HFBacw=
 gotest.tools/v3 v3.0.2 h1:kG1BFyqVHuQoVQiR1bWGnfz/fmHvvuiSPIV7rvl360E=
@@ -810,6 +821,7 @@ honnef.co/go/tools v0.0.1-2020.1.3/go.mod h1:X/FiERA/W4tHapMX5mGpAtMSVEeEUOyHaw9
 honnef.co/go/tools v0.0.1-2020.1.4/go.mod h1:X/FiERA/W4tHapMX5mGpAtMSVEeEUOyHaw9vFzvIQ3k=
 mvdan.cc/xurls/v2 v2.5.0 h1:lyBNOm8Wo71UknhUs4QTFUNNMyxy2JEIaKKo0RWOh+8=
 mvdan.cc/xurls/v2 v2.5.0/go.mod h1:yQgaGQ1rFtJUzkmKiHYSSfuQxqfYmd//X6PxvholpeE=
+nullprogram.com/x/optparse v1.0.0/go.mod h1:KdyPE+Igbe0jQUrVfMqDMeJQIJZEuyV7pjYmp6pbG50=
 rsc.io/binaryregexp v0.2.0/go.mod h1:qTv7/COck+e2FymRvadv62gMdZztPaShugOCi3I+8D8=
 rsc.io/pdf v0.1.1/go.mod h1:n8OzWcQ6Sp37PL01nO98y4iUCRdTGarVfzxY20ICaU4=
 rsc.io/quote/v3 v3.1.0/go.mod h1:yEA65RcK8LyAZtP9Kv3t0HmxON59tX3rD+tICJqUlj0=
diff --git a/web/package-lock.json b/web/package-lock.json
index 39dc38c07..b5ef0b242 100644
--- a/web/package-lock.json
+++ b/web/package-lock.json
@@ -10,54 +10,63 @@
       "hasInstallScript": true,
       "license": "MIT",
       "dependencies": {
-        "@alpinejs/focus": "^3.12.0",
-        "@alpinejs/persist": "^3.12.0",
-        "@fortawesome/fontawesome-free": "^6.4.0",
-        "@fullcalendar/core": "^6.1.5",
-        "@fullcalendar/daygrid": "^6.1.5",
-        "@fullcalendar/icalendar": "^6.1.5",
-        "@fullcalendar/list": "^6.1.5",
-        "@fullcalendar/timegrid": "^6.1.5",
+        "@alpinejs/focus": "^3.12.3",
+        "@alpinejs/persist": "^3.12.3",
+        "@fortawesome/fontawesome-free": "^6.4.2",
+        "@fullcalendar/core": "^6.1.8",
+        "@fullcalendar/daygrid": "^6.1.8",
+        "@fullcalendar/icalendar": "^6.1.8",
+        "@fullcalendar/list": "^6.1.8",
+        "@fullcalendar/timegrid": "^6.1.8",
         "@silvermine/videojs-airplay": "^1.2.0",
         "@silvermine/videojs-quality-selector": "^1.3.0",
-        "alpinejs": "^3.12.0",
-        "chart.js": "^4.2.1",
+        "alpinejs": "^3.12.3",
+        "chart.js": "^4.3.3",
         "extract-loader": "^5.1.0",
         "flatpickr": "^4.6.13",
-        "fullcalendar": "^6.1.5",
-        "handlebars": "^4.7.7",
+        "fullcalendar": "^6.1.8",
+        "handlebars": "^4.7.8",
         "handlebars-loader": "^1.7.3",
         "http-status-codes": "^2.2.0",
         "ical.js": "^1.5.0",
-        "katex": "^0.16.4",
-        "mini-css-extract-plugin": "^2.7.5",
+        "katex": "^0.16.8",
+        "mini-css-extract-plugin": "^2.7.6",
         "moment": "^2.29.4",
-        "nouislider": "^15.7.0",
+        "nouislider": "^15.7.1",
         "split.js": "^1.6.5",
         "video.js": "^7.21.1",
         "videojs-contrib-quality-levels": "^3.0.0",
         "videojs-seek-buttons": "^3.0.1",
-        "videojs-sprite-thumbnails": "^0.6.0"
+        "videojs-sprite-thumbnails": "^1.1.1"
       },
       "devDependencies": {
-        "@types/video.js": "^7.3.51",
-        "@typescript-eslint/eslint-plugin": "^5.57.1",
-        "@typescript-eslint/parser": "^5.57.1",
-        "autoprefixer": "^10.4.14",
-        "css-loader": "^6.7.3",
-        "eslint": "^8.37.0",
-        "eslint-config-prettier": "^8.8.0",
-        "eslint-plugin-prettier": "^4.2.1",
+        "@types/video.js": "^7.3.52",
+        "@typescript-eslint/eslint-plugin": "^6.4.0",
+        "@typescript-eslint/parser": "^6.4.0",
+        "autoprefixer": "^10.4.15",
+        "css-loader": "^6.8.1",
+        "eslint": "^8.47.0",
+        "eslint-config-prettier": "^9.0.0",
+        "eslint-plugin-prettier": "^5.0.0",
         "lodash": "^4.17.21",
-        "postcss": "^8.4.21",
-        "prettier": "^2.8.7",
-        "tailwindcss": "^3.3.1",
+        "postcss": "^8.4.28",
+        "prettier": "^3.0.2",
+        "tailwindcss": "^3.3.3",
         "top-twitter-emojis-map": "^1.0.3",
-        "ts-loader": "^9.4.2",
-        "typescript": "^5.0.3",
-        "webpack": "^5.77.0",
-        "webpack-bundle-analyzer": "^4.8.0",
-        "webpack-cli": "^5.0.1"
+        "ts-loader": "^9.4.4",
+        "typescript": "^5.1.6",
+        "webpack": "^5.88.2",
+        "webpack-bundle-analyzer": "^4.9.0",
+        "webpack-cli": "^5.1.4"
+      }
+    },
+    "node_modules/@aashutoshrathi/word-wrap": {
+      "version": "1.2.6",
+      "resolved": "https://registry.npmjs.org/@aashutoshrathi/word-wrap/-/word-wrap-1.2.6.tgz",
+      "integrity": "sha512-1Yjs2SvM8TflER/OD3cOjhWWOZb58A2t7wpE2S9XfBYTiIl+XFhQG2bjy4Pu1I+EAlCNUzRDYDdFwFYUKvXcIA==",
+      "dev": true,
+      "engines": {
+        "node": ">=0.10.0"
       }
     },
     "node_modules/@alloc/quick-lru": {
@@ -73,17 +82,17 @@
       }
     },
     "node_modules/@alpinejs/focus": {
-      "version": "3.12.2",
-      "resolved": "https://registry.npmjs.org/@alpinejs/focus/-/focus-3.12.2.tgz",
-      "integrity": "sha512-Uhu/0uSwgYSyzAeNT/kzrxiVKJQezwhUM1VxYwCpfOMT0OvKJ80Wl+M4R+5JJhsf+15B65rQnsE7no+TxpV5bg==",
+      "version": "3.12.3",
+      "resolved": "https://registry.npmjs.org/@alpinejs/focus/-/focus-3.12.3.tgz",
+      "integrity": "sha512-kIQwvvUPCfCO2REpceQ3uHNdN3oqDLvvvQNaHVgHoYqk+RrL3EcR6uOHyvHJUgOhaIjN5Uc3b7BaRNrKZbDGew==",
       "dependencies": {
         "focus-trap": "^6.6.1"
       }
     },
     "node_modules/@alpinejs/persist": {
-      "version": "3.12.2",
-      "resolved": "https://registry.npmjs.org/@alpinejs/persist/-/persist-3.12.2.tgz",
-      "integrity": "sha512-Bl8/XLySboH7hkujGDl8e6m8CFeaWGyIoVQE4ht5t30/AGNsE6aCoCJge2HejBVOkCz/2SoCGzU7MT67fhcmug=="
+      "version": "3.12.3",
+      "resolved": "https://registry.npmjs.org/@alpinejs/persist/-/persist-3.12.3.tgz",
+      "integrity": "sha512-TyDzwkFePki6vc+pCdxdNs0cYdBYAJ6W5szXnoQys8iUyshov/6Q9UhKxlXoCE4jvmmXvL+U4vNnnCcnmVD5dg=="
     },
     "node_modules/@babel/runtime": {
       "version": "7.18.9",
@@ -106,9 +115,9 @@
       }
     },
     "node_modules/@eslint-community/eslint-utils": {
-      "version": "4.3.0",
-      "resolved": "https://registry.npmjs.org/@eslint-community/eslint-utils/-/eslint-utils-4.3.0.tgz",
-      "integrity": "sha512-v3oplH6FYCULtFuCeqyuTd9D2WKO937Dxdq+GmHOLL72TTRriLxz2VLlNfkZRsvj6PKnOPAtuT6dwrs/pA5DvA==",
+      "version": "4.4.0",
+      "resolved": "https://registry.npmjs.org/@eslint-community/eslint-utils/-/eslint-utils-4.4.0.tgz",
+      "integrity": "sha512-1/sA4dwrzBAyeUoQ6oxahHKmrZvsnLCg4RfxW3ZFGGmQkSNQPFNLV9CUEFQP1x9EYXHTo5p6xdhZM1Ne9p/AfA==",
       "dev": true,
       "dependencies": {
         "eslint-visitor-keys": "^3.3.0"
@@ -121,23 +130,23 @@
       }
     },
     "node_modules/@eslint-community/regexpp": {
-      "version": "4.4.0",
-      "resolved": "https://registry.npmjs.org/@eslint-community/regexpp/-/regexpp-4.4.0.tgz",
-      "integrity": "sha512-A9983Q0LnDGdLPjxyXQ00sbV+K+O+ko2Dr+CZigbHWtX9pNfxlaBkMR8X1CztI73zuEyEBXTVjx7CE+/VSwDiQ==",
+      "version": "4.6.2",
+      "resolved": "https://registry.npmjs.org/@eslint-community/regexpp/-/regexpp-4.6.2.tgz",
+      "integrity": "sha512-pPTNuaAG3QMH+buKyBIGJs3g/S5y0caxw0ygM3YyE6yJFySwiGGSzA+mM3KJ8QQvzeLh3blwgSonkFjgQdxzMw==",
       "dev": true,
       "engines": {
         "node": "^12.0.0 || ^14.0.0 || >=16.0.0"
       }
     },
     "node_modules/@eslint/eslintrc": {
-      "version": "2.0.3",
-      "resolved": "https://registry.npmjs.org/@eslint/eslintrc/-/eslintrc-2.0.3.tgz",
-      "integrity": "sha512-+5gy6OQfk+xx3q0d6jGZZC3f3KzAkXc/IanVxd1is/VIIziRqqt3ongQz0FiTUXqTk0c7aDB3OaFuKnuSoJicQ==",
+      "version": "2.1.2",
+      "resolved": "https://registry.npmjs.org/@eslint/eslintrc/-/eslintrc-2.1.2.tgz",
+      "integrity": "sha512-+wvgpDsrB1YqAMdEUCcnTlpfVBH7Vqn6A/NT3D8WVXFIaKMlErPIZT3oCIAVCOtarRpMtelZLqJeU3t7WY6X6g==",
       "dev": true,
       "dependencies": {
         "ajv": "^6.12.4",
         "debug": "^4.3.2",
-        "espree": "^9.5.2",
+        "espree": "^9.6.0",
         "globals": "^13.19.0",
         "ignore": "^5.2.0",
         "import-fresh": "^3.2.1",
@@ -153,18 +162,18 @@
       }
     },
     "node_modules/@eslint/js": {
-      "version": "8.42.0",
-      "resolved": "https://registry.npmjs.org/@eslint/js/-/js-8.42.0.tgz",
-      "integrity": "sha512-6SWlXpWU5AvId8Ac7zjzmIOqMOba/JWY8XZ4A7q7Gn1Vlfg/SFFIlrtHXt9nPn4op9ZPAkl91Jao+QQv3r/ukw==",
+      "version": "8.47.0",
+      "resolved": "https://registry.npmjs.org/@eslint/js/-/js-8.47.0.tgz",
+      "integrity": "sha512-P6omY1zv5MItm93kLM8s2vr1HICJH8v0dvddDhysbIuZ+vcjOHg5Zbkf1mTkcmi2JA9oBG2anOkRnW8WJTS8Og==",
       "dev": true,
       "engines": {
         "node": "^12.22.0 || ^14.17.0 || >=16.0.0"
       }
     },
     "node_modules/@fortawesome/fontawesome-free": {
-      "version": "6.4.0",
-      "resolved": "https://registry.npmjs.org/@fortawesome/fontawesome-free/-/fontawesome-free-6.4.0.tgz",
-      "integrity": "sha512-0NyytTlPJwB/BF5LtRV8rrABDbe3TdTXqNB3PdZ+UUUZAEIrdOJdmABqKjt4AXwIoJNaRVVZEXxpNrqvE1GAYQ==",
+      "version": "6.4.2",
+      "resolved": "https://registry.npmjs.org/@fortawesome/fontawesome-free/-/fontawesome-free-6.4.2.tgz",
+      "integrity": "sha512-m5cPn3e2+FDCOgi1mz0RexTUvvQibBebOUlUlW0+YrMjDTPkiJ6VTKukA1GRsvRw+12KyJndNjj0O4AgTxm2Pg==",
       "hasInstallScript": true,
       "engines": {
         "node": ">=6"
@@ -358,6 +367,26 @@
         "node": ">= 8"
       }
     },
+    "node_modules/@pkgr/utils": {
+      "version": "2.4.2",
+      "resolved": "https://registry.npmjs.org/@pkgr/utils/-/utils-2.4.2.tgz",
+      "integrity": "sha512-POgTXhjrTfbTV63DiFXav4lBHiICLKKwDeaKn9Nphwj7WH6m0hMMCaJkMyRWjgtPFyRKRVoMXXjczsTQRDEhYw==",
+      "dev": true,
+      "dependencies": {
+        "cross-spawn": "^7.0.3",
+        "fast-glob": "^3.3.0",
+        "is-glob": "^4.0.3",
+        "open": "^9.1.0",
+        "picocolors": "^1.0.0",
+        "tslib": "^2.6.0"
+      },
+      "engines": {
+        "node": "^12.20.0 || ^14.18.0 || >=16.0.0"
+      },
+      "funding": {
+        "url": "https://opencollective.com/unts"
+      }
+    },
     "node_modules/@polka/url": {
       "version": "1.0.0-next.21",
       "resolved": "https://registry.npmjs.org/@polka/url/-/url-1.0.0-next.21.tgz",
@@ -407,9 +436,9 @@
       "integrity": "sha512-WulqXMDUTYAXCjZnk6JtIHPigp55cVtDgDrO2gHRwhyJto21+1zbVCtOYB2L1F9w4qCQ0rOGWBnBe0FNTiEJIQ=="
     },
     "node_modules/@types/json-schema": {
-      "version": "7.0.9",
-      "resolved": "https://registry.npmjs.org/@types/json-schema/-/json-schema-7.0.9.tgz",
-      "integrity": "sha512-qcUXuemtEu+E5wZSJHNxUXeCZhAfXKQ41D+duX+VYPde7xyEVZci+/oXKJL13tnRs9lR2pr4fod59GT6/X1/yQ=="
+      "version": "7.0.12",
+      "resolved": "https://registry.npmjs.org/@types/json-schema/-/json-schema-7.0.12.tgz",
+      "integrity": "sha512-Hr5Jfhc9eYOQNPYO5WLDq/n4jqijdHNlDXjuAQkkt+mWdQR+XJToOHrsD4cPaMXpn6KO7y2+wM8AZEs8VpBLVA=="
     },
     "node_modules/@types/node": {
       "version": "18.15.11",
@@ -429,32 +458,33 @@
       "dev": true
     },
     "node_modules/@typescript-eslint/eslint-plugin": {
-      "version": "5.59.8",
-      "resolved": "https://registry.npmjs.org/@typescript-eslint/eslint-plugin/-/eslint-plugin-5.59.8.tgz",
-      "integrity": "sha512-JDMOmhXteJ4WVKOiHXGCoB96ADWg9q7efPWHRViT/f09bA8XOMLAVHHju3l0MkZnG1izaWXYmgvQcUjTRcpShQ==",
+      "version": "6.4.0",
+      "resolved": "https://registry.npmjs.org/@typescript-eslint/eslint-plugin/-/eslint-plugin-6.4.0.tgz",
+      "integrity": "sha512-62o2Hmc7Gs3p8SLfbXcipjWAa6qk2wZGChXG2JbBtYpwSRmti/9KHLqfbLs9uDigOexG+3PaQ9G2g3201FWLKg==",
       "dev": true,
       "dependencies": {
-        "@eslint-community/regexpp": "^4.4.0",
-        "@typescript-eslint/scope-manager": "5.59.8",
-        "@typescript-eslint/type-utils": "5.59.8",
-        "@typescript-eslint/utils": "5.59.8",
+        "@eslint-community/regexpp": "^4.5.1",
+        "@typescript-eslint/scope-manager": "6.4.0",
+        "@typescript-eslint/type-utils": "6.4.0",
+        "@typescript-eslint/utils": "6.4.0",
+        "@typescript-eslint/visitor-keys": "6.4.0",
         "debug": "^4.3.4",
-        "grapheme-splitter": "^1.0.4",
-        "ignore": "^5.2.0",
-        "natural-compare-lite": "^1.4.0",
-        "semver": "^7.3.7",
-        "tsutils": "^3.21.0"
+        "graphemer": "^1.4.0",
+        "ignore": "^5.2.4",
+        "natural-compare": "^1.4.0",
+        "semver": "^7.5.4",
+        "ts-api-utils": "^1.0.1"
       },
       "engines": {
-        "node": "^12.22.0 || ^14.17.0 || >=16.0.0"
+        "node": "^16.0.0 || >=18.0.0"
       },
       "funding": {
         "type": "opencollective",
         "url": "https://opencollective.com/typescript-eslint"
       },
       "peerDependencies": {
-        "@typescript-eslint/parser": "^5.0.0",
-        "eslint": "^6.0.0 || ^7.0.0 || ^8.0.0"
+        "@typescript-eslint/parser": "^6.0.0 || ^6.0.0-alpha",
+        "eslint": "^7.0.0 || ^8.0.0"
       },
       "peerDependenciesMeta": {
         "typescript": {
@@ -463,25 +493,26 @@
       }
     },
     "node_modules/@typescript-eslint/parser": {
-      "version": "5.59.8",
-      "resolved": "https://registry.npmjs.org/@typescript-eslint/parser/-/parser-5.59.8.tgz",
-      "integrity": "sha512-AnR19RjJcpjoeGojmwZtCwBX/RidqDZtzcbG3xHrmz0aHHoOcbWnpDllenRDmDvsV0RQ6+tbb09/kyc+UT9Orw==",
+      "version": "6.4.0",
+      "resolved": "https://registry.npmjs.org/@typescript-eslint/parser/-/parser-6.4.0.tgz",
+      "integrity": "sha512-I1Ah1irl033uxjxO9Xql7+biL3YD7w9IU8zF+xlzD/YxY6a4b7DYA08PXUUCbm2sEljwJF6ERFy2kTGAGcNilg==",
       "dev": true,
       "dependencies": {
-        "@typescript-eslint/scope-manager": "5.59.8",
-        "@typescript-eslint/types": "5.59.8",
-        "@typescript-eslint/typescript-estree": "5.59.8",
+        "@typescript-eslint/scope-manager": "6.4.0",
+        "@typescript-eslint/types": "6.4.0",
+        "@typescript-eslint/typescript-estree": "6.4.0",
+        "@typescript-eslint/visitor-keys": "6.4.0",
         "debug": "^4.3.4"
       },
       "engines": {
-        "node": "^12.22.0 || ^14.17.0 || >=16.0.0"
+        "node": "^16.0.0 || >=18.0.0"
       },
       "funding": {
         "type": "opencollective",
         "url": "https://opencollective.com/typescript-eslint"
       },
       "peerDependencies": {
-        "eslint": "^6.0.0 || ^7.0.0 || ^8.0.0"
+        "eslint": "^7.0.0 || ^8.0.0"
       },
       "peerDependenciesMeta": {
         "typescript": {
@@ -490,16 +521,16 @@
       }
     },
     "node_modules/@typescript-eslint/scope-manager": {
-      "version": "5.59.8",
-      "resolved": "https://registry.npmjs.org/@typescript-eslint/scope-manager/-/scope-manager-5.59.8.tgz",
-      "integrity": "sha512-/w08ndCYI8gxGf+9zKf1vtx/16y8MHrZs5/tnjHhMLNSixuNcJavSX4wAiPf4aS5x41Es9YPCn44MIe4cxIlig==",
+      "version": "6.4.0",
+      "resolved": "https://registry.npmjs.org/@typescript-eslint/scope-manager/-/scope-manager-6.4.0.tgz",
+      "integrity": "sha512-TUS7vaKkPWDVvl7GDNHFQMsMruD+zhkd3SdVW0d7b+7Zo+bd/hXJQ8nsiUZMi1jloWo6c9qt3B7Sqo+flC1nig==",
       "dev": true,
       "dependencies": {
-        "@typescript-eslint/types": "5.59.8",
-        "@typescript-eslint/visitor-keys": "5.59.8"
+        "@typescript-eslint/types": "6.4.0",
+        "@typescript-eslint/visitor-keys": "6.4.0"
       },
       "engines": {
-        "node": "^12.22.0 || ^14.17.0 || >=16.0.0"
+        "node": "^16.0.0 || >=18.0.0"
       },
       "funding": {
         "type": "opencollective",
@@ -507,25 +538,25 @@
       }
     },
     "node_modules/@typescript-eslint/type-utils": {
-      "version": "5.59.8",
-      "resolved": "https://registry.npmjs.org/@typescript-eslint/type-utils/-/type-utils-5.59.8.tgz",
-      "integrity": "sha512-+5M518uEIHFBy3FnyqZUF3BMP+AXnYn4oyH8RF012+e7/msMY98FhGL5SrN29NQ9xDgvqCgYnsOiKp1VjZ/fpA==",
+      "version": "6.4.0",
+      "resolved": "https://registry.npmjs.org/@typescript-eslint/type-utils/-/type-utils-6.4.0.tgz",
+      "integrity": "sha512-TvqrUFFyGY0cX3WgDHcdl2/mMCWCDv/0thTtx/ODMY1QhEiyFtv/OlLaNIiYLwRpAxAtOLOY9SUf1H3Q3dlwAg==",
       "dev": true,
       "dependencies": {
-        "@typescript-eslint/typescript-estree": "5.59.8",
-        "@typescript-eslint/utils": "5.59.8",
+        "@typescript-eslint/typescript-estree": "6.4.0",
+        "@typescript-eslint/utils": "6.4.0",
         "debug": "^4.3.4",
-        "tsutils": "^3.21.0"
+        "ts-api-utils": "^1.0.1"
       },
       "engines": {
-        "node": "^12.22.0 || ^14.17.0 || >=16.0.0"
+        "node": "^16.0.0 || >=18.0.0"
       },
       "funding": {
         "type": "opencollective",
         "url": "https://opencollective.com/typescript-eslint"
       },
       "peerDependencies": {
-        "eslint": "*"
+        "eslint": "^7.0.0 || ^8.0.0"
       },
       "peerDependenciesMeta": {
         "typescript": {
@@ -534,12 +565,12 @@
       }
     },
     "node_modules/@typescript-eslint/types": {
-      "version": "5.59.8",
-      "resolved": "https://registry.npmjs.org/@typescript-eslint/types/-/types-5.59.8.tgz",
-      "integrity": "sha512-+uWuOhBTj/L6awoWIg0BlWy0u9TyFpCHrAuQ5bNfxDaZ1Ppb3mx6tUigc74LHcbHpOHuOTOJrBoAnhdHdaea1w==",
+      "version": "6.4.0",
+      "resolved": "https://registry.npmjs.org/@typescript-eslint/types/-/types-6.4.0.tgz",
+      "integrity": "sha512-+FV9kVFrS7w78YtzkIsNSoYsnOtrYVnKWSTVXoL1761CsCRv5wpDOINgsXpxD67YCLZtVQekDDyaxfjVWUJmmg==",
       "dev": true,
       "engines": {
-        "node": "^12.22.0 || ^14.17.0 || >=16.0.0"
+        "node": "^16.0.0 || >=18.0.0"
       },
       "funding": {
         "type": "opencollective",
@@ -547,21 +578,21 @@
       }
     },
     "node_modules/@typescript-eslint/typescript-estree": {
-      "version": "5.59.8",
-      "resolved": "https://registry.npmjs.org/@typescript-eslint/typescript-estree/-/typescript-estree-5.59.8.tgz",
-      "integrity": "sha512-Jy/lPSDJGNow14vYu6IrW790p7HIf/SOV1Bb6lZ7NUkLc2iB2Z9elESmsaUtLw8kVqogSbtLH9tut5GCX1RLDg==",
+      "version": "6.4.0",
+      "resolved": "https://registry.npmjs.org/@typescript-eslint/typescript-estree/-/typescript-estree-6.4.0.tgz",
+      "integrity": "sha512-iDPJArf/K2sxvjOR6skeUCNgHR/tCQXBsa+ee1/clRKr3olZjZ/dSkXPZjG6YkPtnW6p5D1egeEPMCW6Gn4yLA==",
       "dev": true,
       "dependencies": {
-        "@typescript-eslint/types": "5.59.8",
-        "@typescript-eslint/visitor-keys": "5.59.8",
+        "@typescript-eslint/types": "6.4.0",
+        "@typescript-eslint/visitor-keys": "6.4.0",
         "debug": "^4.3.4",
         "globby": "^11.1.0",
         "is-glob": "^4.0.3",
-        "semver": "^7.3.7",
-        "tsutils": "^3.21.0"
+        "semver": "^7.5.4",
+        "ts-api-utils": "^1.0.1"
       },
       "engines": {
-        "node": "^12.22.0 || ^14.17.0 || >=16.0.0"
+        "node": "^16.0.0 || >=18.0.0"
       },
       "funding": {
         "type": "opencollective",
@@ -574,42 +605,41 @@
       }
     },
     "node_modules/@typescript-eslint/utils": {
-      "version": "5.59.8",
-      "resolved": "https://registry.npmjs.org/@typescript-eslint/utils/-/utils-5.59.8.tgz",
-      "integrity": "sha512-Tr65630KysnNn9f9G7ROF3w1b5/7f6QVCJ+WK9nhIocWmx9F+TmCAcglF26Vm7z8KCTwoKcNEBZrhlklla3CKg==",
+      "version": "6.4.0",
+      "resolved": "https://registry.npmjs.org/@typescript-eslint/utils/-/utils-6.4.0.tgz",
+      "integrity": "sha512-BvvwryBQpECPGo8PwF/y/q+yacg8Hn/2XS+DqL/oRsOPK+RPt29h5Ui5dqOKHDlbXrAeHUTnyG3wZA0KTDxRZw==",
       "dev": true,
       "dependencies": {
-        "@eslint-community/eslint-utils": "^4.2.0",
-        "@types/json-schema": "^7.0.9",
-        "@types/semver": "^7.3.12",
-        "@typescript-eslint/scope-manager": "5.59.8",
-        "@typescript-eslint/types": "5.59.8",
-        "@typescript-eslint/typescript-estree": "5.59.8",
-        "eslint-scope": "^5.1.1",
-        "semver": "^7.3.7"
+        "@eslint-community/eslint-utils": "^4.4.0",
+        "@types/json-schema": "^7.0.12",
+        "@types/semver": "^7.5.0",
+        "@typescript-eslint/scope-manager": "6.4.0",
+        "@typescript-eslint/types": "6.4.0",
+        "@typescript-eslint/typescript-estree": "6.4.0",
+        "semver": "^7.5.4"
       },
       "engines": {
-        "node": "^12.22.0 || ^14.17.0 || >=16.0.0"
+        "node": "^16.0.0 || >=18.0.0"
       },
       "funding": {
         "type": "opencollective",
         "url": "https://opencollective.com/typescript-eslint"
       },
       "peerDependencies": {
-        "eslint": "^6.0.0 || ^7.0.0 || ^8.0.0"
+        "eslint": "^7.0.0 || ^8.0.0"
       }
     },
     "node_modules/@typescript-eslint/visitor-keys": {
-      "version": "5.59.8",
-      "resolved": "https://registry.npmjs.org/@typescript-eslint/visitor-keys/-/visitor-keys-5.59.8.tgz",
-      "integrity": "sha512-pJhi2ms0x0xgloT7xYabil3SGGlojNNKjK/q6dB3Ey0uJLMjK2UDGJvHieiyJVW/7C3KI+Z4Q3pEHkm4ejA+xQ==",
+      "version": "6.4.0",
+      "resolved": "https://registry.npmjs.org/@typescript-eslint/visitor-keys/-/visitor-keys-6.4.0.tgz",
+      "integrity": "sha512-yJSfyT+uJm+JRDWYRYdCm2i+pmvXJSMtPR9Cq5/XQs4QIgNoLcoRtDdzsLbLsFM/c6um6ohQkg/MLxWvoIndJA==",
       "dev": true,
       "dependencies": {
-        "@typescript-eslint/types": "5.59.8",
-        "eslint-visitor-keys": "^3.3.0"
+        "@typescript-eslint/types": "6.4.0",
+        "eslint-visitor-keys": "^3.4.1"
       },
       "engines": {
-        "node": "^12.22.0 || ^14.17.0 || >=16.0.0"
+        "node": "^16.0.0 || >=18.0.0"
       },
       "funding": {
         "type": "opencollective",
@@ -851,9 +881,9 @@
       }
     },
     "node_modules/@xmldom/xmldom": {
-      "version": "0.8.6",
-      "resolved": "https://registry.npmjs.org/@xmldom/xmldom/-/xmldom-0.8.6.tgz",
-      "integrity": "sha512-uRjjusqpoqfmRkTaNuLJ2VohVr67Q5YwDATW3VU7PfzTj6IRaihGrYI7zckGZjxQPBIp63nfvJbM+Yu5ICh0Bg==",
+      "version": "0.8.10",
+      "resolved": "https://registry.npmjs.org/@xmldom/xmldom/-/xmldom-0.8.10.tgz",
+      "integrity": "sha512-2WALfTl4xo2SkGCYRt6rDTFfk9R1czmBvUQy12gK2KuRKIpWEhcbbzy8EZXtz/jkRqHX8bFEc6FC1HjX4TUWYw==",
       "engines": {
         "node": ">=10.0.0"
       }
@@ -869,9 +899,9 @@
       "integrity": "sha512-NuHqBY1PB/D8xU6s/thBgOAiAP7HOYDQ32+BFZILJ8ivkUkAHQnWfn6WhL79Owj1qmUnoN/YPhktdIoucipkAQ=="
     },
     "node_modules/acorn": {
-      "version": "8.8.0",
-      "resolved": "https://registry.npmjs.org/acorn/-/acorn-8.8.0.tgz",
-      "integrity": "sha512-QOxyigPVrpZ2GXT+PFyZTl6TtOFc5egxHIP9IlQ+RbupQuX4RkT/Bee4/kQuC02Xkzg84JcT7oLYtDIQxp+v7w==",
+      "version": "8.10.0",
+      "resolved": "https://registry.npmjs.org/acorn/-/acorn-8.10.0.tgz",
+      "integrity": "sha512-F0SAmZ8iUtS//m8DmCTA0jlh6TDKkHQyK6xc6V4KDTyZKA9dnvX9/3sRTVQrWm79glUAZbnmmNcdYwUIHWVybw==",
       "bin": {
         "acorn": "bin/acorn"
       },
@@ -976,9 +1006,9 @@
       }
     },
     "node_modules/alpinejs": {
-      "version": "3.12.2",
-      "resolved": "https://registry.npmjs.org/alpinejs/-/alpinejs-3.12.2.tgz",
-      "integrity": "sha512-wrUZULm9w6DYwWcUtB/anFLgRaF4riSuPgIJ3gcPUS8st9luAJnAxoIgro/Al97d2McSSz/JypWg/NlmKFIJJA==",
+      "version": "3.12.3",
+      "resolved": "https://registry.npmjs.org/alpinejs/-/alpinejs-3.12.3.tgz",
+      "integrity": "sha512-fLz2dfYQ3xCk7Ip8LiIpV2W+9brUyex2TAE7Z0BCvZdUDklJE+n+a8gCgLWzfZ0GzZNZu7HUP8Z0z6Xbm6fsSA==",
       "dependencies": {
         "@vue/reactivity": "~3.1.1"
       }
@@ -1053,9 +1083,9 @@
       "integrity": "sha512-spZRyzKL5l5BZQrr/6m/SqFdBN0q3OCI0f9rjfBzCMBIP4p75P620rR3gTmaksNOhmzgdxcaxdNfMy6anrbM0g=="
     },
     "node_modules/autoprefixer": {
-      "version": "10.4.14",
-      "resolved": "https://registry.npmjs.org/autoprefixer/-/autoprefixer-10.4.14.tgz",
-      "integrity": "sha512-FQzyfOsTlwVzjHxKEqRIAdJx9niO6VCBCoEwax/VLSoQF29ggECcPuBqUMZ+u8jCZOPSy8b8/8KnuFbp0SaFZQ==",
+      "version": "10.4.15",
+      "resolved": "https://registry.npmjs.org/autoprefixer/-/autoprefixer-10.4.15.tgz",
+      "integrity": "sha512-KCuPB8ZCIqFdA4HwKXsvz7j6gvSDNhDP7WnUjBleRkKjPdvCmHFuQ77ocavI8FT6NdvlBnE2UFr2H4Mycn8Vew==",
       "dev": true,
       "funding": [
         {
@@ -1065,11 +1095,15 @@
         {
           "type": "tidelift",
           "url": "https://tidelift.com/funding/github/npm/autoprefixer"
+        },
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/ai"
         }
       ],
       "dependencies": {
-        "browserslist": "^4.21.5",
-        "caniuse-lite": "^1.0.30001464",
+        "browserslist": "^4.21.10",
+        "caniuse-lite": "^1.0.30001520",
         "fraction.js": "^4.2.0",
         "normalize-range": "^0.1.2",
         "picocolors": "^1.0.0",
@@ -1799,6 +1833,15 @@
       "resolved": "https://registry.npmjs.org/balanced-match/-/balanced-match-1.0.2.tgz",
       "integrity": "sha512-3oSeUO0TMV67hN1AmbXsK4yaqU7tjiHlbxRDZOpH0KW9+CeX4bRAaX0Anxt0tx2MrpRpWwQaPwIlISEJhYU5Pw=="
     },
+    "node_modules/big-integer": {
+      "version": "1.6.51",
+      "resolved": "https://registry.npmjs.org/big-integer/-/big-integer-1.6.51.tgz",
+      "integrity": "sha512-GPEid2Y9QU1Exl1rpO9B2IPJGHPSupF5GnVIP0blYvNOMer2bTvSWs1jGOUg04hTmu67nmLsQ9TBo1puaotBHg==",
+      "dev": true,
+      "engines": {
+        "node": ">=0.6"
+      }
+    },
     "node_modules/big.js": {
       "version": "5.2.2",
       "resolved": "https://registry.npmjs.org/big.js/-/big.js-5.2.2.tgz",
@@ -1816,6 +1859,18 @@
         "node": ">=8"
       }
     },
+    "node_modules/bplist-parser": {
+      "version": "0.2.0",
+      "resolved": "https://registry.npmjs.org/bplist-parser/-/bplist-parser-0.2.0.tgz",
+      "integrity": "sha512-z0M+byMThzQmD9NILRniCUXYsYpjwnlO8N5uCFaCqIOpqRsJCrQL9NK3JsD67CN5a08nF5oIL2bD6loTdHOuKw==",
+      "dev": true,
+      "dependencies": {
+        "big-integer": "^1.6.44"
+      },
+      "engines": {
+        "node": ">= 5.10.0"
+      }
+    },
     "node_modules/brace-expansion": {
       "version": "1.1.11",
       "resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-1.1.11.tgz",
@@ -1838,9 +1893,9 @@
       }
     },
     "node_modules/browserslist": {
-      "version": "4.21.5",
-      "resolved": "https://registry.npmjs.org/browserslist/-/browserslist-4.21.5.tgz",
-      "integrity": "sha512-tUkiguQGW7S3IhB7N+c2MV/HZPSCPAAiYBZXLsBhFB/PCy6ZKKsZrmBayHV9fdGV/ARIfJ14NkxKzRDjvp7L6w==",
+      "version": "4.21.10",
+      "resolved": "https://registry.npmjs.org/browserslist/-/browserslist-4.21.10.tgz",
+      "integrity": "sha512-bipEBdZfVH5/pwrvqc+Ub0kUPVfGUhlKxbvfD+z1BDnPEO/X98ruXGA1WP5ASpAFKan7Qr6j736IacbZQuAlKQ==",
       "funding": [
         {
           "type": "opencollective",
@@ -1849,13 +1904,17 @@
         {
           "type": "tidelift",
           "url": "https://tidelift.com/funding/github/npm/browserslist"
+        },
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/ai"
         }
       ],
       "dependencies": {
-        "caniuse-lite": "^1.0.30001449",
-        "electron-to-chromium": "^1.4.284",
-        "node-releases": "^2.0.8",
-        "update-browserslist-db": "^1.0.10"
+        "caniuse-lite": "^1.0.30001517",
+        "electron-to-chromium": "^1.4.477",
+        "node-releases": "^2.0.13",
+        "update-browserslist-db": "^1.0.11"
       },
       "bin": {
         "browserslist": "cli.js"
@@ -1880,6 +1939,21 @@
       "resolved": "https://registry.npmjs.org/buffer-from/-/buffer-from-1.1.2.tgz",
       "integrity": "sha512-E+XQCRwSbaaiChtv6k6Dwgc+bx+Bs6vuKJHHl5kox/BaKbhiXzqQOwK4cO22yElGp2OCmjwVhT3HmxgyPGnJfQ=="
     },
+    "node_modules/bundle-name": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/bundle-name/-/bundle-name-3.0.0.tgz",
+      "integrity": "sha512-PKA4BeSvBpQKQ8iPOGCSiell+N8P+Tf1DlwqmYhpe2gAhKPHn8EYOxVT+ShuGmhg8lN8XiSlS80yiExKXrURlw==",
+      "dev": true,
+      "dependencies": {
+        "run-applescript": "^5.0.0"
+      },
+      "engines": {
+        "node": ">=12"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
     "node_modules/callsites": {
       "version": "3.1.0",
       "resolved": "https://registry.npmjs.org/callsites/-/callsites-3.1.0.tgz",
@@ -1899,9 +1973,9 @@
       }
     },
     "node_modules/caniuse-lite": {
-      "version": "1.0.30001469",
-      "resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001469.tgz",
-      "integrity": "sha512-Rcp7221ScNqQPP3W+lVOYDyjdR6dC+neEQCttoNr5bAyz54AboB4iwpnWgyi8P4YUsPybVzT4LgWiBbI3drL4g==",
+      "version": "1.0.30001520",
+      "resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001520.tgz",
+      "integrity": "sha512-tahF5O9EiiTzwTUqAeFjIZbn4Dnqxzz7ktrgGlMYNLH43Ul26IgTMH/zvL3DG0lZxBYnlT04axvInszUsZULdA==",
       "funding": [
         {
           "type": "opencollective",
@@ -1910,6 +1984,10 @@
         {
           "type": "tidelift",
           "url": "https://tidelift.com/funding/github/npm/caniuse-lite"
+        },
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/ai"
         }
       ]
     },
@@ -1930,9 +2008,9 @@
       }
     },
     "node_modules/chart.js": {
-      "version": "4.3.0",
-      "resolved": "https://registry.npmjs.org/chart.js/-/chart.js-4.3.0.tgz",
-      "integrity": "sha512-ynG0E79xGfMaV2xAHdbhwiPLczxnNNnasrmPEXriXsPJGjmhOBYzFVEsB65w2qMDz+CaBJJuJD0inE/ab/h36g==",
+      "version": "4.3.3",
+      "resolved": "https://registry.npmjs.org/chart.js/-/chart.js-4.3.3.tgz",
+      "integrity": "sha512-aTk7pBw+x6sQYhon/NR3ikfUJuym/LdgpTlgZRe2PaEhjUMKBKyNaFCMVRAyTEWYFNO7qRu7iQVqOw/OqzxZxQ==",
       "dependencies": {
         "@kurkle/color": "^0.3.0"
       },
@@ -2114,6 +2192,52 @@
       "integrity": "sha512-oIPzksmTg4/MriiaYGO+okXDT7ztn/w3Eptv/+gSIdMdKsJo0u4CfYNFJPy+4SKMuCqGw2wxnA+URMg3t8a/bQ==",
       "dev": true
     },
+    "node_modules/default-browser": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/default-browser/-/default-browser-4.0.0.tgz",
+      "integrity": "sha512-wX5pXO1+BrhMkSbROFsyxUm0i/cJEScyNhA4PPxc41ICuv05ZZB/MX28s8aZx6xjmatvebIapF6hLEKEcpneUA==",
+      "dev": true,
+      "dependencies": {
+        "bundle-name": "^3.0.0",
+        "default-browser-id": "^3.0.0",
+        "execa": "^7.1.1",
+        "titleize": "^3.0.0"
+      },
+      "engines": {
+        "node": ">=14.16"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
+    "node_modules/default-browser-id": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/default-browser-id/-/default-browser-id-3.0.0.tgz",
+      "integrity": "sha512-OZ1y3y0SqSICtE8DE4S8YOE9UZOJ8wO16fKWVP5J1Qz42kV9jcnMVFrEE/noXb/ss3Q4pZIH79kxofzyNNtUNA==",
+      "dev": true,
+      "dependencies": {
+        "bplist-parser": "^0.2.0",
+        "untildify": "^4.0.0"
+      },
+      "engines": {
+        "node": ">=12"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
+    "node_modules/define-lazy-prop": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/define-lazy-prop/-/define-lazy-prop-3.0.0.tgz",
+      "integrity": "sha512-N+MeXYoqr3pOgn8xfyRPREN7gHakLYjhsHhWGT3fWAiL4IkAt0iDw14QiiEm2bE30c5XX5q0FtAA3CK5f9/BUg==",
+      "dev": true,
+      "engines": {
+        "node": ">=12"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
     "node_modules/detect-indent": {
       "version": "4.0.0",
       "resolved": "https://registry.npmjs.org/detect-indent/-/detect-indent-4.0.0.tgz",
@@ -2173,9 +2297,9 @@
       "dev": true
     },
     "node_modules/electron-to-chromium": {
-      "version": "1.4.335",
-      "resolved": "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.4.335.tgz",
-      "integrity": "sha512-l/eowQqTnrq3gu+WSrdfkhfNHnPgYqlKAwxz7MTOj6mom19vpEDHNXl6dxDxyTiYuhemydprKr/HCrHfgk+OfQ=="
+      "version": "1.4.492",
+      "resolved": "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.4.492.tgz",
+      "integrity": "sha512-36K9b/6skMVwAIEsC7GiQ8I8N3soCALVSHqWHzNDtGemAcI9Xu8hP02cywWM0A794rTHm0b0zHPeLJHtgFVamQ=="
     },
     "node_modules/emojis-list": {
       "version": "3.0.0",
@@ -2186,9 +2310,9 @@
       }
     },
     "node_modules/enhanced-resolve": {
-      "version": "5.14.1",
-      "resolved": "https://registry.npmjs.org/enhanced-resolve/-/enhanced-resolve-5.14.1.tgz",
-      "integrity": "sha512-Vklwq2vDKtl0y/vtwjSesgJ5MYS7Etuk5txS8VdKL4AOS1aUlD96zqIfsOSLQsdv3xgMRbtkWM8eG9XDfKUPow==",
+      "version": "5.15.0",
+      "resolved": "https://registry.npmjs.org/enhanced-resolve/-/enhanced-resolve-5.15.0.tgz",
+      "integrity": "sha512-LXYT42KJ7lpIKECr2mAXIaMldcNCh/7E0KBKOu4KSfkHmP+mZmSs+8V5gBAqisWBy0OO4W5Oyys0GO1Y8KtdKg==",
       "dependencies": {
         "graceful-fs": "^4.2.4",
         "tapable": "^2.2.0"
@@ -2231,27 +2355,27 @@
       }
     },
     "node_modules/eslint": {
-      "version": "8.42.0",
-      "resolved": "https://registry.npmjs.org/eslint/-/eslint-8.42.0.tgz",
-      "integrity": "sha512-ulg9Ms6E1WPf67PHaEY4/6E2tEn5/f7FXGzr3t9cBMugOmf1INYvuUwwh1aXQN4MfJ6a5K2iNwP3w4AColvI9A==",
+      "version": "8.47.0",
+      "resolved": "https://registry.npmjs.org/eslint/-/eslint-8.47.0.tgz",
+      "integrity": "sha512-spUQWrdPt+pRVP1TTJLmfRNJJHHZryFmptzcafwSvHsceV81djHOdnEeDmkdotZyLNjDhrOasNK8nikkoG1O8Q==",
       "dev": true,
       "dependencies": {
         "@eslint-community/eslint-utils": "^4.2.0",
-        "@eslint-community/regexpp": "^4.4.0",
-        "@eslint/eslintrc": "^2.0.3",
-        "@eslint/js": "8.42.0",
+        "@eslint-community/regexpp": "^4.6.1",
+        "@eslint/eslintrc": "^2.1.2",
+        "@eslint/js": "^8.47.0",
         "@humanwhocodes/config-array": "^0.11.10",
         "@humanwhocodes/module-importer": "^1.0.1",
         "@nodelib/fs.walk": "^1.2.8",
-        "ajv": "^6.10.0",
+        "ajv": "^6.12.4",
         "chalk": "^4.0.0",
         "cross-spawn": "^7.0.2",
         "debug": "^4.3.2",
         "doctrine": "^3.0.0",
         "escape-string-regexp": "^4.0.0",
-        "eslint-scope": "^7.2.0",
-        "eslint-visitor-keys": "^3.4.1",
-        "espree": "^9.5.2",
+        "eslint-scope": "^7.2.2",
+        "eslint-visitor-keys": "^3.4.3",
+        "espree": "^9.6.1",
         "esquery": "^1.4.2",
         "esutils": "^2.0.2",
         "fast-deep-equal": "^3.1.3",
@@ -2261,7 +2385,6 @@
         "globals": "^13.19.0",
         "graphemer": "^1.4.0",
         "ignore": "^5.2.0",
-        "import-fresh": "^3.0.0",
         "imurmurhash": "^0.1.4",
         "is-glob": "^4.0.0",
         "is-path-inside": "^3.0.3",
@@ -2271,9 +2394,8 @@
         "lodash.merge": "^4.6.2",
         "minimatch": "^3.1.2",
         "natural-compare": "^1.4.0",
-        "optionator": "^0.9.1",
+        "optionator": "^0.9.3",
         "strip-ansi": "^6.0.1",
-        "strip-json-comments": "^3.1.0",
         "text-table": "^0.2.0"
       },
       "bin": {
@@ -2287,9 +2409,9 @@
       }
     },
     "node_modules/eslint-config-prettier": {
-      "version": "8.8.0",
-      "resolved": "https://registry.npmjs.org/eslint-config-prettier/-/eslint-config-prettier-8.8.0.tgz",
-      "integrity": "sha512-wLbQiFre3tdGgpDv67NQKnJuTlcUVYHas3k+DZCc2U2BadthoEY4B7hLPvAxaqdyOGCzuLfii2fqGph10va7oA==",
+      "version": "9.0.0",
+      "resolved": "https://registry.npmjs.org/eslint-config-prettier/-/eslint-config-prettier-9.0.0.tgz",
+      "integrity": "sha512-IcJsTkJae2S35pRsRAwoCE+925rJJStOdkKnLVgtE+tEpqU0EVVM7OqrwxqgptKdX29NUwC82I5pXsGFIgSevw==",
       "dev": true,
       "bin": {
         "eslint-config-prettier": "bin/cli.js"
@@ -2299,21 +2421,29 @@
       }
     },
     "node_modules/eslint-plugin-prettier": {
-      "version": "4.2.1",
-      "resolved": "https://registry.npmjs.org/eslint-plugin-prettier/-/eslint-plugin-prettier-4.2.1.tgz",
-      "integrity": "sha512-f/0rXLXUt0oFYs8ra4w49wYZBG5GKZpAYsJSm6rnYL5uVDjd+zowwMwVZHnAjf4edNrKpCDYfXDgmRE/Ak7QyQ==",
+      "version": "5.0.0",
+      "resolved": "https://registry.npmjs.org/eslint-plugin-prettier/-/eslint-plugin-prettier-5.0.0.tgz",
+      "integrity": "sha512-AgaZCVuYDXHUGxj/ZGu1u8H8CYgDY3iG6w5kUFw4AzMVXzB7VvbKgYR4nATIN+OvUrghMbiDLeimVjVY5ilq3w==",
       "dev": true,
       "dependencies": {
-        "prettier-linter-helpers": "^1.0.0"
+        "prettier-linter-helpers": "^1.0.0",
+        "synckit": "^0.8.5"
       },
       "engines": {
-        "node": ">=12.0.0"
+        "node": "^14.18.0 || >=16.0.0"
+      },
+      "funding": {
+        "url": "https://opencollective.com/prettier"
       },
       "peerDependencies": {
-        "eslint": ">=7.28.0",
-        "prettier": ">=2.0.0"
+        "@types/eslint": ">=8.0.0",
+        "eslint": ">=8.0.0",
+        "prettier": ">=3.0.0"
       },
       "peerDependenciesMeta": {
+        "@types/eslint": {
+          "optional": true
+        },
         "eslint-config-prettier": {
           "optional": true
         }
@@ -2332,9 +2462,9 @@
       }
     },
     "node_modules/eslint-visitor-keys": {
-      "version": "3.4.1",
-      "resolved": "https://registry.npmjs.org/eslint-visitor-keys/-/eslint-visitor-keys-3.4.1.tgz",
-      "integrity": "sha512-pZnmmLwYzf+kWaM/Qgrvpen51upAktaaiI01nsJD/Yr3lMOdNtq0cxkrrg16w64VtisN6okbs7Q8AfGqj4c9fA==",
+      "version": "3.4.3",
+      "resolved": "https://registry.npmjs.org/eslint-visitor-keys/-/eslint-visitor-keys-3.4.3.tgz",
+      "integrity": "sha512-wpc+LXeiyiisxPlEkUzU6svyS1frIO3Mgxj1fdy7Pm8Ygzguax2N3Fa/D/ag1WqbOprdI+uY6wMUl8/a2G+iag==",
       "dev": true,
       "engines": {
         "node": "^12.22.0 || ^14.17.0 || >=16.0.0"
@@ -2356,9 +2486,9 @@
       }
     },
     "node_modules/eslint/node_modules/eslint-scope": {
-      "version": "7.2.0",
-      "resolved": "https://registry.npmjs.org/eslint-scope/-/eslint-scope-7.2.0.tgz",
-      "integrity": "sha512-DYj5deGlHBfMt15J7rdtyKNq/Nqlv5KfU4iodrQ019XESsRnwXH9KAE0y3cwtUHDo2ob7CypAnCqefh6vioWRw==",
+      "version": "7.2.2",
+      "resolved": "https://registry.npmjs.org/eslint-scope/-/eslint-scope-7.2.2.tgz",
+      "integrity": "sha512-dOt21O7lTMhDM+X9mB4GX+DZrZtCUJPL/wlcTqxyrx5IvO0IYtILdtrQGQp+8n5S0gwSVmOf9NQrjMOgfQZlIg==",
       "dev": true,
       "dependencies": {
         "esrecurse": "^4.3.0",
@@ -2454,12 +2584,12 @@
       }
     },
     "node_modules/espree": {
-      "version": "9.5.2",
-      "resolved": "https://registry.npmjs.org/espree/-/espree-9.5.2.tgz",
-      "integrity": "sha512-7OASN1Wma5fum5SrNhFMAMJxOUAbhyfQ8dQ//PJaJbNw0URTPWqIghHWt1MmAANKhHZIYOHruW4Kw4ruUWOdGw==",
+      "version": "9.6.1",
+      "resolved": "https://registry.npmjs.org/espree/-/espree-9.6.1.tgz",
+      "integrity": "sha512-oruZaFkjorTpF32kDSI5/75ViwGeZginGGy2NoOSg3Q9bnwlnmDm4HLnkl0RE3n+njDXR037aY1+x58Z/zFdwQ==",
       "dev": true,
       "dependencies": {
-        "acorn": "^8.8.0",
+        "acorn": "^8.9.0",
         "acorn-jsx": "^5.3.2",
         "eslint-visitor-keys": "^3.4.1"
       },
@@ -2534,6 +2664,29 @@
         "node": ">=0.8.x"
       }
     },
+    "node_modules/execa": {
+      "version": "7.2.0",
+      "resolved": "https://registry.npmjs.org/execa/-/execa-7.2.0.tgz",
+      "integrity": "sha512-UduyVP7TLB5IcAQl+OzLyLcS/l32W/GLg+AhHJ+ow40FOk2U3SAllPwR44v4vmdFwIWqpdwxxpQbF1n5ta9seA==",
+      "dev": true,
+      "dependencies": {
+        "cross-spawn": "^7.0.3",
+        "get-stream": "^6.0.1",
+        "human-signals": "^4.3.0",
+        "is-stream": "^3.0.0",
+        "merge-stream": "^2.0.0",
+        "npm-run-path": "^5.1.0",
+        "onetime": "^6.0.0",
+        "signal-exit": "^3.0.7",
+        "strip-final-newline": "^3.0.0"
+      },
+      "engines": {
+        "node": "^14.18.0 || ^16.14.0 || >=18.0.0"
+      },
+      "funding": {
+        "url": "https://github.com/sindresorhus/execa?sponsor=1"
+      }
+    },
     "node_modules/extract-loader": {
       "version": "5.1.0",
       "resolved": "https://registry.npmjs.org/extract-loader/-/extract-loader-5.1.0.tgz",
@@ -2563,9 +2716,9 @@
       "dev": true
     },
     "node_modules/fast-glob": {
-      "version": "3.2.12",
-      "resolved": "https://registry.npmjs.org/fast-glob/-/fast-glob-3.2.12.tgz",
-      "integrity": "sha512-DVj4CQIYYow0BlaelwK1pHl5n5cRSJfM60UA0zK891sVInoPri2Ekj7+e1CT3/3qxXenpI+nBBmQAcJPJgaj4w==",
+      "version": "3.3.1",
+      "resolved": "https://registry.npmjs.org/fast-glob/-/fast-glob-3.3.1.tgz",
+      "integrity": "sha512-kNFPyjhh5cKjrUltxs+wFx+ZkbRaxxmZ+X0ZU31SOsxCEtP9VPgtq2teZw1DebupL5GmDaNQ6yKMMVcM41iqDg==",
       "dev": true,
       "dependencies": {
         "@nodelib/fs.stat": "^2.0.2",
@@ -2729,6 +2882,18 @@
       "resolved": "https://registry.npmjs.org/function-bind/-/function-bind-1.1.1.tgz",
       "integrity": "sha512-yIovAzMX49sF8Yl58fSCWJ5svSLuaibPxXQJFLmBObTuCr0Mf1KiPopGM9NiFjiYBCbfaa2Fh6breQ6ANVTI0A=="
     },
+    "node_modules/get-stream": {
+      "version": "6.0.1",
+      "resolved": "https://registry.npmjs.org/get-stream/-/get-stream-6.0.1.tgz",
+      "integrity": "sha512-ts6Wi+2j3jQjqi70w5AlN8DFnkSwC+MqmxEzdEALB2qXZYV3X/b1CTfgPLGJNMeAWxdPfU8FO1ms3NUfaHCPYg==",
+      "dev": true,
+      "engines": {
+        "node": ">=10"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
     "node_modules/glob": {
       "version": "7.2.3",
       "resolved": "https://registry.npmjs.org/glob/-/glob-7.2.3.tgz",
@@ -2776,9 +2941,9 @@
       }
     },
     "node_modules/globals": {
-      "version": "13.20.0",
-      "resolved": "https://registry.npmjs.org/globals/-/globals-13.20.0.tgz",
-      "integrity": "sha512-Qg5QtVkCy/kv3FUSlu4ukeZDVf9ee0iXLAUYX13gbR17bnejFTzr4iS9bY7kwCf1NztRNm1t91fjOiyx4CSwPQ==",
+      "version": "13.21.0",
+      "resolved": "https://registry.npmjs.org/globals/-/globals-13.21.0.tgz",
+      "integrity": "sha512-ybyme3s4yy/t/3s35bewwXKOf7cvzfreG2lH0lZl0JB7I4GxRP2ghxOK/Nb9EkRXdbBXZLfq/p/0W2JUONB/Gg==",
       "dev": true,
       "dependencies": {
         "type-fest": "^0.20.2"
@@ -2824,12 +2989,6 @@
       "resolved": "https://registry.npmjs.org/graceful-fs/-/graceful-fs-4.2.9.tgz",
       "integrity": "sha512-NtNxqUcXgpW2iMrfqSfR73Glt39K+BLwWsPs94yR63v45T0Wbej7eRmL5cWfwEgqXnmjQp3zaJTshdRW/qC2ZQ=="
     },
-    "node_modules/grapheme-splitter": {
-      "version": "1.0.4",
-      "resolved": "https://registry.npmjs.org/grapheme-splitter/-/grapheme-splitter-1.0.4.tgz",
-      "integrity": "sha512-bzh50DW9kTPM00T8y4o8vQg89Di9oLJVLW/KaOGIXJWP/iqCN6WKYkbNOF04vFLJhwcpYUh9ydh/+5vpOqV4YQ==",
-      "dev": true
-    },
     "node_modules/graphemer": {
       "version": "1.4.0",
       "resolved": "https://registry.npmjs.org/graphemer/-/graphemer-1.4.0.tgz",
@@ -2852,12 +3011,12 @@
       }
     },
     "node_modules/handlebars": {
-      "version": "4.7.7",
-      "resolved": "https://registry.npmjs.org/handlebars/-/handlebars-4.7.7.tgz",
-      "integrity": "sha512-aAcXm5OAfE/8IXkcZvCepKU3VzW1/39Fb5ZuqMtgI/hT8X2YgoMvBY5dLhq/cpOvw7Lk1nK/UF71aLG/ZnVYRA==",
+      "version": "4.7.8",
+      "resolved": "https://registry.npmjs.org/handlebars/-/handlebars-4.7.8.tgz",
+      "integrity": "sha512-vafaFqs8MZkRrSX7sFVUdo3ap/eNiLnb4IakshzvP56X5Nr1iGKAIqdX6tMlm6HcNRIkr6AxO5jFEoJzzpT8aQ==",
       "dependencies": {
         "minimist": "^1.2.5",
-        "neo-async": "^2.6.0",
+        "neo-async": "^2.6.2",
         "source-map": "^0.6.1",
         "wordwrap": "^1.0.0"
       },
@@ -2940,6 +3099,15 @@
       "resolved": "https://registry.npmjs.org/http-status-codes/-/http-status-codes-2.2.0.tgz",
       "integrity": "sha512-feERVo9iWxvnejp3SEfm/+oNG517npqL2/PIA8ORjyOZjGC7TwCRQsZylciLS64i6pJ0wRYz3rkXLRwbtFa8Ng=="
     },
+    "node_modules/human-signals": {
+      "version": "4.3.1",
+      "resolved": "https://registry.npmjs.org/human-signals/-/human-signals-4.3.1.tgz",
+      "integrity": "sha512-nZXjEF2nbo7lIw3mgYjItAfgQXog3OjJogSbKa2CQIIvSGWcKgeJnQlNXip6NglNzYH45nSRiEVimMvYL8DDqQ==",
+      "dev": true,
+      "engines": {
+        "node": ">=14.18.0"
+      }
+    },
     "node_modules/ical.js": {
       "version": "1.5.0",
       "resolved": "https://registry.npmjs.org/ical.js/-/ical.js-1.5.0.tgz",
@@ -2958,9 +3126,9 @@
       }
     },
     "node_modules/ignore": {
-      "version": "5.2.0",
-      "resolved": "https://registry.npmjs.org/ignore/-/ignore-5.2.0.tgz",
-      "integrity": "sha512-CmxgYGiEPCLhfLnpPp1MoRmifwEIOgjcHXxOBjv7mY96c+eWScsOP9c112ZyLdWHi0FxHjI+4uVhKYp/gcdRmQ==",
+      "version": "5.2.4",
+      "resolved": "https://registry.npmjs.org/ignore/-/ignore-5.2.4.tgz",
+      "integrity": "sha512-MAb38BcSbH0eHNBxn7ql2NH/kX33OkB3lZ1BNdh7ENeRChHTYsTvWrMubiIAMNS2llXEEgZ1MUOBtXChP3kaFQ==",
       "dev": true,
       "engines": {
         "node": ">= 4"
@@ -3068,6 +3236,21 @@
         "url": "https://github.com/sponsors/ljharb"
       }
     },
+    "node_modules/is-docker": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/is-docker/-/is-docker-3.0.0.tgz",
+      "integrity": "sha512-eljcgEDlEns/7AXFosB5K/2nCM4P7FQPkGc/DWLy5rmFEWvZayGrik1d9/QIY5nJ4f9YsVvBkA6kJpHn9rISdQ==",
+      "dev": true,
+      "bin": {
+        "is-docker": "cli.js"
+      },
+      "engines": {
+        "node": "^12.20.0 || ^14.13.1 || >=16.0.0"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
     "node_modules/is-extglob": {
       "version": "2.1.1",
       "resolved": "https://registry.npmjs.org/is-extglob/-/is-extglob-2.1.1.tgz",
@@ -3105,6 +3288,24 @@
         "node": ">=0.10.0"
       }
     },
+    "node_modules/is-inside-container": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/is-inside-container/-/is-inside-container-1.0.0.tgz",
+      "integrity": "sha512-KIYLCCJghfHZxqjYBE7rEy0OBuTd5xCHS7tHVgvCLkx7StIoaxwNW3hCALgEUjFfeRk+MG/Qxmp/vtETEF3tRA==",
+      "dev": true,
+      "dependencies": {
+        "is-docker": "^3.0.0"
+      },
+      "bin": {
+        "is-inside-container": "cli.js"
+      },
+      "engines": {
+        "node": ">=14.16"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
     "node_modules/is-number": {
       "version": "7.0.0",
       "resolved": "https://registry.npmjs.org/is-number/-/is-number-7.0.0.tgz",
@@ -3135,6 +3336,45 @@
         "node": ">=0.10.0"
       }
     },
+    "node_modules/is-stream": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/is-stream/-/is-stream-3.0.0.tgz",
+      "integrity": "sha512-LnQR4bZ9IADDRSkvpqMGvt/tEJWclzklNgSw48V5EAaAeDd6qGvN8ei6k5p0tvxSR171VmGyHuTiAOfxAbr8kA==",
+      "dev": true,
+      "engines": {
+        "node": "^12.20.0 || ^14.13.1 || >=16.0.0"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
+    "node_modules/is-wsl": {
+      "version": "2.2.0",
+      "resolved": "https://registry.npmjs.org/is-wsl/-/is-wsl-2.2.0.tgz",
+      "integrity": "sha512-fKzAra0rGJUUBwGBgNkHZuToZcn+TtXHpeCgmkMJMMYx1sQDYaCSyjJBSCa2nH1DGm7s3n1oBnohoVTBaN7Lww==",
+      "dev": true,
+      "dependencies": {
+        "is-docker": "^2.0.0"
+      },
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/is-wsl/node_modules/is-docker": {
+      "version": "2.2.1",
+      "resolved": "https://registry.npmjs.org/is-docker/-/is-docker-2.2.1.tgz",
+      "integrity": "sha512-F+i2BKsFrH66iaUFc0woD8sLy8getkwTwtOBjvs56Cx4CgJDeKQeqfz8wAYiSb8JOprWhHH5p77PbmYCvvUuXQ==",
+      "dev": true,
+      "bin": {
+        "is-docker": "cli.js"
+      },
+      "engines": {
+        "node": ">=8"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
     "node_modules/isexe": {
       "version": "2.0.0",
       "resolved": "https://registry.npmjs.org/isexe/-/isexe-2.0.0.tgz",
@@ -3236,9 +3476,9 @@
       }
     },
     "node_modules/katex": {
-      "version": "0.16.7",
-      "resolved": "https://registry.npmjs.org/katex/-/katex-0.16.7.tgz",
-      "integrity": "sha512-Xk9C6oGKRwJTfqfIbtr0Kes9OSv6IFsuhFGc7tW4urlpMJtuh+7YhzU6YEG9n8gmWKcMAFzkp7nr+r69kV0zrA==",
+      "version": "0.16.8",
+      "resolved": "https://registry.npmjs.org/katex/-/katex-0.16.8.tgz",
+      "integrity": "sha512-ftuDnJbcbOckGY11OO+zg3OofESlbR5DRl2cmN8HeWeeFIV7wTXvAOx8kEjZjobhA+9wh2fbKeO6cdcA9Mnovg==",
       "funding": [
         "https://opencollective.com/katex",
         "https://github.com/sponsors/katex"
@@ -3434,6 +3674,18 @@
         "node": ">= 0.6"
       }
     },
+    "node_modules/mimic-fn": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/mimic-fn/-/mimic-fn-4.0.0.tgz",
+      "integrity": "sha512-vqiC06CuhBTUdZH+RYl8sFrL096vA45Ok5ISO6sE/Mr1jRbGH4Csnhi8f3wKVl7x8mO4Au7Ir9D3Oyv1VYMFJw==",
+      "dev": true,
+      "engines": {
+        "node": ">=12"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
     "node_modules/min-document": {
       "version": "2.19.0",
       "resolved": "https://registry.npmjs.org/min-document/-/min-document-2.19.0.tgz",
@@ -3624,21 +3876,15 @@
       "integrity": "sha512-OWND8ei3VtNC9h7V60qff3SVobHr996CTwgxubgyQYEpg290h9J0buyECNNJexkFm5sOajh5G116RYA1c8ZMSw==",
       "dev": true
     },
-    "node_modules/natural-compare-lite": {
-      "version": "1.4.0",
-      "resolved": "https://registry.npmjs.org/natural-compare-lite/-/natural-compare-lite-1.4.0.tgz",
-      "integrity": "sha512-Tj+HTDSJJKaZnfiuw+iaF9skdPpTo2GtEly5JHnWV/hfv2Qj/9RKsGISQtLh2ox3l5EAGw487hnBee0sIJ6v2g==",
-      "dev": true
-    },
     "node_modules/neo-async": {
       "version": "2.6.2",
       "resolved": "https://registry.npmjs.org/neo-async/-/neo-async-2.6.2.tgz",
       "integrity": "sha512-Yd3UES5mWCSqR+qNT93S3UoYUkqAZ9lLg8a7g9rimsWmYGK8cVToA4/sF3RrshdyV3sAGMXVUmpMYOw+dLpOuw=="
     },
     "node_modules/node-releases": {
-      "version": "2.0.10",
-      "resolved": "https://registry.npmjs.org/node-releases/-/node-releases-2.0.10.tgz",
-      "integrity": "sha512-5GFldHPXVG/YZmFzJvKK2zDSzPKhEp0+ZR5SVaoSag9fsL5YgHbUHDfnG5494ISANDcK4KwPXAx2xqVEydmd7w=="
+      "version": "2.0.13",
+      "resolved": "https://registry.npmjs.org/node-releases/-/node-releases-2.0.13.tgz",
+      "integrity": "sha512-uYr7J37ae/ORWdZeQ1xxMJe3NtdmqMC/JZK+geofDrkLUApKRHPd18/TxtBOJ4A0/+uUIliorNrfYV6s1b02eQ=="
     },
     "node_modules/normalize-path": {
       "version": "3.0.0",
@@ -3659,9 +3905,36 @@
       }
     },
     "node_modules/nouislider": {
-      "version": "15.7.0",
-      "resolved": "https://registry.npmjs.org/nouislider/-/nouislider-15.7.0.tgz",
-      "integrity": "sha512-aJVEULBPOUwq32/s7xnLNyLvo4kuzYJJsNp2PNGW932AQ0uuDAbLShAqswtxRzJc5n/dLJXNlYSLOZ57bcUg1w=="
+      "version": "15.7.1",
+      "resolved": "https://registry.npmjs.org/nouislider/-/nouislider-15.7.1.tgz",
+      "integrity": "sha512-5N7C1ru/i8y3dg9+Z6ilj6+m1EfabvOoaRa7ztpxBSKKRZso4vA52DGSbBJjw5XLtFr/LZ9SgGAXqyVtlVHO5w=="
+    },
+    "node_modules/npm-run-path": {
+      "version": "5.1.0",
+      "resolved": "https://registry.npmjs.org/npm-run-path/-/npm-run-path-5.1.0.tgz",
+      "integrity": "sha512-sJOdmRGrY2sjNTRMbSvluQqg+8X7ZK61yvzBEIDhz4f8z1TZFYABsqjjCBd/0PUNE9M6QDgHJXQkGUEm7Q+l9Q==",
+      "dev": true,
+      "dependencies": {
+        "path-key": "^4.0.0"
+      },
+      "engines": {
+        "node": "^12.20.0 || ^14.13.1 || >=16.0.0"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
+    "node_modules/npm-run-path/node_modules/path-key": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/path-key/-/path-key-4.0.0.tgz",
+      "integrity": "sha512-haREypq7xkM7ErfgIyA0z+Bj4AGKlMSdlQE2jvJo6huWD1EdkKYV+G/T4nq0YEF2vgTT8kqMFKo1uHn950r4SQ==",
+      "dev": true,
+      "engines": {
+        "node": ">=12"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
     },
     "node_modules/object-assign": {
       "version": "4.1.1",
@@ -3689,6 +3962,39 @@
         "wrappy": "1"
       }
     },
+    "node_modules/onetime": {
+      "version": "6.0.0",
+      "resolved": "https://registry.npmjs.org/onetime/-/onetime-6.0.0.tgz",
+      "integrity": "sha512-1FlR+gjXK7X+AsAHso35MnyN5KqGwJRi/31ft6x0M194ht7S+rWAvd7PHss9xSKMzE0asv1pyIHaJYq+BbacAQ==",
+      "dev": true,
+      "dependencies": {
+        "mimic-fn": "^4.0.0"
+      },
+      "engines": {
+        "node": ">=12"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
+    "node_modules/open": {
+      "version": "9.1.0",
+      "resolved": "https://registry.npmjs.org/open/-/open-9.1.0.tgz",
+      "integrity": "sha512-OS+QTnw1/4vrf+9hh1jc1jnYjzSG4ttTBB8UxOwAnInG3Uo4ssetzC1ihqaIHjLJnA5GGlRl6QlZXOTQhRBUvg==",
+      "dev": true,
+      "dependencies": {
+        "default-browser": "^4.0.0",
+        "define-lazy-prop": "^3.0.0",
+        "is-inside-container": "^1.0.0",
+        "is-wsl": "^2.2.0"
+      },
+      "engines": {
+        "node": ">=14.16"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
     "node_modules/opener": {
       "version": "1.5.2",
       "resolved": "https://registry.npmjs.org/opener/-/opener-1.5.2.tgz",
@@ -3699,17 +4005,17 @@
       }
     },
     "node_modules/optionator": {
-      "version": "0.9.1",
-      "resolved": "https://registry.npmjs.org/optionator/-/optionator-0.9.1.tgz",
-      "integrity": "sha512-74RlY5FCnhq4jRxVUPKDaRwrVNXMqsGsiW6AJw4XK8hmtm10wC0ypZBLw5IIp85NZMr91+qd1RvvENwg7jjRFw==",
+      "version": "0.9.3",
+      "resolved": "https://registry.npmjs.org/optionator/-/optionator-0.9.3.tgz",
+      "integrity": "sha512-JjCoypp+jKn1ttEFExxhetCKeJt9zhAgAve5FXHixTvFDW/5aEktX9bufBKLRRMdU7bNtpLfcGu94B3cdEJgjg==",
       "dev": true,
       "dependencies": {
+        "@aashutoshrathi/word-wrap": "^1.2.3",
         "deep-is": "^0.1.3",
         "fast-levenshtein": "^2.0.6",
         "levn": "^0.4.1",
         "prelude-ls": "^1.2.1",
-        "type-check": "^0.4.0",
-        "word-wrap": "^1.2.3"
+        "type-check": "^0.4.0"
       },
       "engines": {
         "node": ">= 0.8.0"
@@ -3878,9 +4184,9 @@
       }
     },
     "node_modules/postcss": {
-      "version": "8.4.24",
-      "resolved": "https://registry.npmjs.org/postcss/-/postcss-8.4.24.tgz",
-      "integrity": "sha512-M0RzbcI0sO/XJNucsGjvWU9ERWxb/ytp1w6dKtxTKgixdtQDq4rmx/g8W1hnaheq9jgwL/oyEdH5Bc4WwJKMqg==",
+      "version": "8.4.28",
+      "resolved": "https://registry.npmjs.org/postcss/-/postcss-8.4.28.tgz",
+      "integrity": "sha512-Z7V5j0cq8oEKyejIKfpD8b4eBy9cwW2JWPk0+fB1HOAMsfHbnAXLLS+PfVWlzMSLQaWttKDt607I0XHmpE67Vw==",
       "dev": true,
       "funding": [
         {
@@ -4086,15 +4392,15 @@
       }
     },
     "node_modules/prettier": {
-      "version": "2.8.8",
-      "resolved": "https://registry.npmjs.org/prettier/-/prettier-2.8.8.tgz",
-      "integrity": "sha512-tdN8qQGvNjw4CHbY+XXk0JgCXn9QiF21a55rBe5LJAU+kDyC4WQn4+awm2Xfk2lQMk5fKup9XgzTZtGkjBdP9Q==",
+      "version": "3.0.2",
+      "resolved": "https://registry.npmjs.org/prettier/-/prettier-3.0.2.tgz",
+      "integrity": "sha512-o2YR9qtniXvwEZlOKbveKfDQVyqxbEIWn48Z8m3ZJjBjcCmUy3xZGIv+7AkaeuaTr6yPXJjwv07ZWlsWbEy1rQ==",
       "dev": true,
       "bin": {
-        "prettier": "bin-prettier.js"
+        "prettier": "bin/prettier.cjs"
       },
       "engines": {
-        "node": ">=10.13.0"
+        "node": ">=14"
       },
       "funding": {
         "url": "https://github.com/prettier/prettier?sponsor=1"
@@ -4341,6 +4647,110 @@
         "url": "https://github.com/sponsors/isaacs"
       }
     },
+    "node_modules/run-applescript": {
+      "version": "5.0.0",
+      "resolved": "https://registry.npmjs.org/run-applescript/-/run-applescript-5.0.0.tgz",
+      "integrity": "sha512-XcT5rBksx1QdIhlFOCtgZkB99ZEouFZ1E2Kc2LHqNW13U3/74YGdkQRmThTwxy4QIyookibDKYZOPqX//6BlAg==",
+      "dev": true,
+      "dependencies": {
+        "execa": "^5.0.0"
+      },
+      "engines": {
+        "node": ">=12"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
+    "node_modules/run-applescript/node_modules/execa": {
+      "version": "5.1.1",
+      "resolved": "https://registry.npmjs.org/execa/-/execa-5.1.1.tgz",
+      "integrity": "sha512-8uSpZZocAZRBAPIEINJj3Lo9HyGitllczc27Eh5YYojjMFMn8yHMDMaUHE2Jqfq05D/wucwI4JGURyXt1vchyg==",
+      "dev": true,
+      "dependencies": {
+        "cross-spawn": "^7.0.3",
+        "get-stream": "^6.0.0",
+        "human-signals": "^2.1.0",
+        "is-stream": "^2.0.0",
+        "merge-stream": "^2.0.0",
+        "npm-run-path": "^4.0.1",
+        "onetime": "^5.1.2",
+        "signal-exit": "^3.0.3",
+        "strip-final-newline": "^2.0.0"
+      },
+      "engines": {
+        "node": ">=10"
+      },
+      "funding": {
+        "url": "https://github.com/sindresorhus/execa?sponsor=1"
+      }
+    },
+    "node_modules/run-applescript/node_modules/human-signals": {
+      "version": "2.1.0",
+      "resolved": "https://registry.npmjs.org/human-signals/-/human-signals-2.1.0.tgz",
+      "integrity": "sha512-B4FFZ6q/T2jhhksgkbEW3HBvWIfDW85snkQgawt07S7J5QXTk6BkNV+0yAeZrM5QpMAdYlocGoljn0sJ/WQkFw==",
+      "dev": true,
+      "engines": {
+        "node": ">=10.17.0"
+      }
+    },
+    "node_modules/run-applescript/node_modules/is-stream": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/is-stream/-/is-stream-2.0.1.tgz",
+      "integrity": "sha512-hFoiJiTl63nn+kstHGBtewWSKnQLpyb155KHheA1l39uvtO9nWIop1p3udqPcUd/xbF1VLMO4n7OI6p7RbngDg==",
+      "dev": true,
+      "engines": {
+        "node": ">=8"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
+    "node_modules/run-applescript/node_modules/mimic-fn": {
+      "version": "2.1.0",
+      "resolved": "https://registry.npmjs.org/mimic-fn/-/mimic-fn-2.1.0.tgz",
+      "integrity": "sha512-OqbOk5oEQeAZ8WXWydlu9HJjz9WVdEIvamMCcXmuqUYjTknH/sqsWvhQ3vgwKFRR1HpjvNBKQ37nbJgYzGqGcg==",
+      "dev": true,
+      "engines": {
+        "node": ">=6"
+      }
+    },
+    "node_modules/run-applescript/node_modules/npm-run-path": {
+      "version": "4.0.1",
+      "resolved": "https://registry.npmjs.org/npm-run-path/-/npm-run-path-4.0.1.tgz",
+      "integrity": "sha512-S48WzZW777zhNIrn7gxOlISNAqi9ZC/uQFnRdbeIHhZhCA6UqpkOT8T1G7BvfdgP4Er8gF4sUbaS0i7QvIfCWw==",
+      "dev": true,
+      "dependencies": {
+        "path-key": "^3.0.0"
+      },
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/run-applescript/node_modules/onetime": {
+      "version": "5.1.2",
+      "resolved": "https://registry.npmjs.org/onetime/-/onetime-5.1.2.tgz",
+      "integrity": "sha512-kbpaSSGJTWdAY5KPVeMOKXSrPtr8C8C7wodJbcsd51jRnmD+GZu8Y0VoU6Dm5Z4vWr0Ig/1NKuWRKf7j5aaYSg==",
+      "dev": true,
+      "dependencies": {
+        "mimic-fn": "^2.1.0"
+      },
+      "engines": {
+        "node": ">=6"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
+    "node_modules/run-applescript/node_modules/strip-final-newline": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/strip-final-newline/-/strip-final-newline-2.0.0.tgz",
+      "integrity": "sha512-BrpvfNAE3dcvq7ll3xVumzjKjZQ5tI1sEUIKr3Uoks0XUl45St3FlatVqef9prk4jRDzhW6WZg+3bk93y6pLjA==",
+      "dev": true,
+      "engines": {
+        "node": ">=6"
+      }
+    },
     "node_modules/run-parallel": {
       "version": "1.2.0",
       "resolved": "https://registry.npmjs.org/run-parallel/-/run-parallel-1.2.0.tgz",
@@ -4400,9 +4810,9 @@
       }
     },
     "node_modules/schema-utils": {
-      "version": "3.1.2",
-      "resolved": "https://registry.npmjs.org/schema-utils/-/schema-utils-3.1.2.tgz",
-      "integrity": "sha512-pvjEHOgWc9OWA/f/DE3ohBWTD6EleVLf7iFUkoSwAxttdBhB9QUebQgxER2kWueOvRJXPHNnyrvvh9eZINB8Eg==",
+      "version": "3.3.0",
+      "resolved": "https://registry.npmjs.org/schema-utils/-/schema-utils-3.3.0.tgz",
+      "integrity": "sha512-pN/yOAvcC+5rQ5nERGuwrjLlYvLTbCibnZ1I7B1LaiAz9BRBlE9GMgE/eqV30P7aJQUf7Ddimy/RsbYO/GrVGg==",
       "dependencies": {
         "@types/json-schema": "^7.0.8",
         "ajv": "^6.12.5",
@@ -4417,9 +4827,9 @@
       }
     },
     "node_modules/semver": {
-      "version": "7.3.8",
-      "resolved": "https://registry.npmjs.org/semver/-/semver-7.3.8.tgz",
-      "integrity": "sha512-NB1ctGL5rlHrPJtFDVIVzTyQylMLu9N9VICA6HSFJo8MCGVTMW6gfpicwKmmK/dAjTOrqu5l63JJOpDSrAis3A==",
+      "version": "7.5.4",
+      "resolved": "https://registry.npmjs.org/semver/-/semver-7.5.4.tgz",
+      "integrity": "sha512-1bCSESV6Pv+i21Hvpxp3Dx+pSD8lIPt8uVjRrxAUt/nbswYc+tK6Y2btiULjd4+fnq15PX+nqQDC7Oft7WkwcA==",
       "dev": true,
       "dependencies": {
         "lru-cache": "^6.0.0"
@@ -4472,6 +4882,12 @@
         "node": ">=8"
       }
     },
+    "node_modules/signal-exit": {
+      "version": "3.0.7",
+      "resolved": "https://registry.npmjs.org/signal-exit/-/signal-exit-3.0.7.tgz",
+      "integrity": "sha512-wnD2ZE+l+SPC/uoS0vXeE9L1+0wuaMqKlfz9AMUo38JsyLSBWSFcHR1Rri62LZc12vLr1gb3jl7iwQhgwpAbGQ==",
+      "dev": true
+    },
     "node_modules/sirv": {
       "version": "1.0.19",
       "resolved": "https://registry.npmjs.org/sirv/-/sirv-1.0.19.tgz",
@@ -4537,6 +4953,18 @@
         "node": ">=8"
       }
     },
+    "node_modules/strip-final-newline": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/strip-final-newline/-/strip-final-newline-3.0.0.tgz",
+      "integrity": "sha512-dOESqjYr96iWYylGObzd39EuNTa5VJxyvVAEm5Jnh7KGo75V43Hk1odPQkNDyXNmUR6k+gEiDVXnjB8HJ3crXw==",
+      "dev": true,
+      "engines": {
+        "node": ">=12"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
     "node_modules/strip-json-comments": {
       "version": "3.1.1",
       "resolved": "https://registry.npmjs.org/strip-json-comments/-/strip-json-comments-3.1.1.tgz",
@@ -4623,15 +5051,31 @@
         "url": "https://github.com/sponsors/ljharb"
       }
     },
+    "node_modules/synckit": {
+      "version": "0.8.5",
+      "resolved": "https://registry.npmjs.org/synckit/-/synckit-0.8.5.tgz",
+      "integrity": "sha512-L1dapNV6vu2s/4Sputv8xGsCdAVlb5nRDMFU/E27D44l5U6cw1g0dGd45uLc+OXjNMmF4ntiMdCimzcjFKQI8Q==",
+      "dev": true,
+      "dependencies": {
+        "@pkgr/utils": "^2.3.1",
+        "tslib": "^2.5.0"
+      },
+      "engines": {
+        "node": "^14.18.0 || >=16.0.0"
+      },
+      "funding": {
+        "url": "https://opencollective.com/unts"
+      }
+    },
     "node_modules/tabbable": {
       "version": "5.3.3",
       "resolved": "https://registry.npmjs.org/tabbable/-/tabbable-5.3.3.tgz",
       "integrity": "sha512-QD9qKY3StfbZqWOPLp0++pOrAVb/HbUi5xCc8cUo4XjP19808oaMiDzn0leBY5mCespIBM0CIZePzZjgzR83kA=="
     },
     "node_modules/tailwindcss": {
-      "version": "3.3.2",
-      "resolved": "https://registry.npmjs.org/tailwindcss/-/tailwindcss-3.3.2.tgz",
-      "integrity": "sha512-9jPkMiIBXvPc2KywkraqsUfbfj+dHDb+JPWtSJa9MLFdrPyazI7q6WX2sUrm7R9eVR7qqv3Pas7EvQFzxKnI6w==",
+      "version": "3.3.3",
+      "resolved": "https://registry.npmjs.org/tailwindcss/-/tailwindcss-3.3.3.tgz",
+      "integrity": "sha512-A0KgSkef7eE4Mf+nKJ83i75TMyq8HqY3qmFIJSWy8bNt0v1lG7jUcpGpoTFxAwYcWOphcTBLPPJg+bDfhDf52w==",
       "dev": true,
       "dependencies": {
         "@alloc/quick-lru": "^5.2.0",
@@ -4654,7 +5098,6 @@
         "postcss-load-config": "^4.0.1",
         "postcss-nested": "^6.0.1",
         "postcss-selector-parser": "^6.0.11",
-        "postcss-value-parser": "^4.2.0",
         "resolve": "^1.22.2",
         "sucrase": "^3.32.0"
       },
@@ -4768,6 +5211,18 @@
         "node": ">=0.8"
       }
     },
+    "node_modules/titleize": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/titleize/-/titleize-3.0.0.tgz",
+      "integrity": "sha512-KxVu8EYHDPBdUYdKZdKtU2aj2XfEx9AfjXxE/Aj0vT06w2icA09Vus1rh6eSu1y01akYg6BjIK/hxyLJINoMLQ==",
+      "dev": true,
+      "engines": {
+        "node": ">=12"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
     "node_modules/to-fast-properties": {
       "version": "1.0.3",
       "resolved": "https://registry.npmjs.org/to-fast-properties/-/to-fast-properties-1.0.3.tgz",
@@ -4827,6 +5282,18 @@
         "node": ">=0.10.0"
       }
     },
+    "node_modules/ts-api-utils": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/ts-api-utils/-/ts-api-utils-1.0.1.tgz",
+      "integrity": "sha512-lC/RGlPmwdrIBFTX59wwNzqh7aR2otPNPR/5brHZm/XKFYKsfqxihXUe9pU3JI+3vGkl+vyCoNNnPhJn3aLK1A==",
+      "dev": true,
+      "engines": {
+        "node": ">=16.13.0"
+      },
+      "peerDependencies": {
+        "typescript": ">=4.2.0"
+      }
+    },
     "node_modules/ts-interface-checker": {
       "version": "0.1.13",
       "resolved": "https://registry.npmjs.org/ts-interface-checker/-/ts-interface-checker-0.1.13.tgz",
@@ -4834,9 +5301,9 @@
       "dev": true
     },
     "node_modules/ts-loader": {
-      "version": "9.4.3",
-      "resolved": "https://registry.npmjs.org/ts-loader/-/ts-loader-9.4.3.tgz",
-      "integrity": "sha512-n3hBnm6ozJYzwiwt5YRiJZkzktftRpMiBApHaJPoWLA+qetQBAXkHqCLM6nwSdRDimqVtA5ocIkcTRLMTt7yzA==",
+      "version": "9.4.4",
+      "resolved": "https://registry.npmjs.org/ts-loader/-/ts-loader-9.4.4.tgz",
+      "integrity": "sha512-MLukxDHBl8OJ5Dk3y69IsKVFRA/6MwzEqBgh+OXMPB/OD01KQuWPFd1WAQP8a5PeSCAxfnkhiuWqfmFJzJQt9w==",
       "dev": true,
       "dependencies": {
         "chalk": "^4.1.0",
@@ -4852,25 +5319,10 @@
         "webpack": "^5.0.0"
       }
     },
-    "node_modules/tsutils": {
-      "version": "3.21.0",
-      "resolved": "https://registry.npmjs.org/tsutils/-/tsutils-3.21.0.tgz",
-      "integrity": "sha512-mHKK3iUXL+3UF6xL5k0PEhKRUBKPBCv/+RkEOpjRWxxx27KKRBmmA60A9pgOUvMi8GKhRMPEmjBRPzs2W7O1OA==",
-      "dev": true,
-      "dependencies": {
-        "tslib": "^1.8.1"
-      },
-      "engines": {
-        "node": ">= 6"
-      },
-      "peerDependencies": {
-        "typescript": ">=2.8.0 || >= 3.2.0-dev || >= 3.3.0-dev || >= 3.4.0-dev || >= 3.5.0-dev || >= 3.6.0-dev || >= 3.6.0-beta || >= 3.7.0-dev || >= 3.7.0-beta"
-      }
-    },
-    "node_modules/tsutils/node_modules/tslib": {
-      "version": "1.14.1",
-      "resolved": "https://registry.npmjs.org/tslib/-/tslib-1.14.1.tgz",
-      "integrity": "sha512-Xni35NKzjgMrwevysHTCArtLDpPvye8zV/0E4EyYn43P7/7qvQwPh9BGkHewbMulVntbigmcT7rdX3BNo9wRJg==",
+    "node_modules/tslib": {
+      "version": "2.6.1",
+      "resolved": "https://registry.npmjs.org/tslib/-/tslib-2.6.1.tgz",
+      "integrity": "sha512-t0hLfiEKfMUoqhG+U1oid7Pva4bbDPHYfJNiB7BiIjRkj1pyC++4N3huJfqY6aRH6VTB0rvtzQwjM4K6qpfOig==",
       "dev": true
     },
     "node_modules/type-check": {
@@ -4898,9 +5350,9 @@
       }
     },
     "node_modules/typescript": {
-      "version": "5.1.3",
-      "resolved": "https://registry.npmjs.org/typescript/-/typescript-5.1.3.tgz",
-      "integrity": "sha512-XH627E9vkeqhlZFQuL+UsyAXEnibT0kWR2FWONlr4sTjvxyJYnyefgrkyECLzM5NenmKzRAy2rR/OlYLA1HkZw==",
+      "version": "5.1.6",
+      "resolved": "https://registry.npmjs.org/typescript/-/typescript-5.1.6.tgz",
+      "integrity": "sha512-zaWCozRZ6DLEWAWFrVDz1H6FVXzUSfTy5FUMWsQlU8Ym5JP9eO4xkTIROFCQvhQf61z6O/G6ugw3SgAnvvm+HA==",
       "dev": true,
       "bin": {
         "tsc": "bin/tsc",
@@ -4927,10 +5379,19 @@
       "resolved": "https://registry.npmjs.org/underscore/-/underscore-1.13.1.tgz",
       "integrity": "sha512-hzSoAVtJF+3ZtiFX0VgfFPHEDRm7Y/QPjGyNo4TVdnDTdft3tr8hEkD25a1jC+TjTuE7tkHGKkhwCgs9dgBB2g=="
     },
+    "node_modules/untildify": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/untildify/-/untildify-4.0.0.tgz",
+      "integrity": "sha512-KK8xQ1mkzZeg9inewmFVDNkg3l5LUhoq9kN6iWYB/CC9YMG8HA+c1Q8HwDe6dEX7kErrEVNVBO3fWsVq5iDgtw==",
+      "dev": true,
+      "engines": {
+        "node": ">=8"
+      }
+    },
     "node_modules/update-browserslist-db": {
-      "version": "1.0.10",
-      "resolved": "https://registry.npmjs.org/update-browserslist-db/-/update-browserslist-db-1.0.10.tgz",
-      "integrity": "sha512-OztqDenkfFkbSG+tRxBeAnCVPckDBcvibKd35yDONx6OU8N7sqgwc7rCbkJ/WcYtVRZ4ba68d6byhC21GFh7sQ==",
+      "version": "1.0.11",
+      "resolved": "https://registry.npmjs.org/update-browserslist-db/-/update-browserslist-db-1.0.11.tgz",
+      "integrity": "sha512-dCwEFf0/oT85M1fHBg4F0jtLwJrutGoHSQXCh7u4o2t1drG+c0a9Flnqww6XUKSfQMPpJBRjU8d4RXB09qtvaA==",
       "funding": [
         {
           "type": "opencollective",
@@ -4939,6 +5400,10 @@
         {
           "type": "tidelift",
           "url": "https://tidelift.com/funding/github/npm/browserslist"
+        },
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/ai"
         }
       ],
       "dependencies": {
@@ -4946,7 +5411,7 @@
         "picocolors": "^1.0.0"
       },
       "bin": {
-        "browserslist-lint": "cli.js"
+        "update-browserslist-db": "cli.js"
       },
       "peerDependencies": {
         "browserslist": ">= 4.21.0"
@@ -4972,9 +5437,9 @@
       "dev": true
     },
     "node_modules/video.js": {
-      "version": "7.21.4",
-      "resolved": "https://registry.npmjs.org/video.js/-/video.js-7.21.4.tgz",
-      "integrity": "sha512-R5e57M/5uqxQMQpFpybNbd8GtiRwFJPqkHjrhv0QTJ2tqnesbjETbck5kU5dhFr1FevsJRFhjBG4hAnvRGnXbw==",
+      "version": "7.21.5",
+      "resolved": "https://registry.npmjs.org/video.js/-/video.js-7.21.5.tgz",
+      "integrity": "sha512-WRq86tXZKrThA9mK+IR+v4tIQVVvnb5LhvL71fD2AX7TxVOPdaeK1X/wyuUruBqWaOG3w2sZXoMY6HF2Jlo9qA==",
       "dependencies": {
         "@babel/runtime": "^7.12.5",
         "@videojs/http-streaming": "2.16.2",
@@ -4988,7 +5453,7 @@
         "mux.js": "6.0.1",
         "safe-json-parse": "4.0.0",
         "videojs-font": "3.2.0",
-        "videojs-vtt.js": "^0.15.4"
+        "videojs-vtt.js": "^0.15.5"
       }
     },
     "node_modules/videojs-contrib-quality-levels": {
@@ -5027,9 +5492,9 @@
       }
     },
     "node_modules/videojs-sprite-thumbnails": {
-      "version": "0.6.0",
-      "resolved": "https://registry.npmjs.org/videojs-sprite-thumbnails/-/videojs-sprite-thumbnails-0.6.0.tgz",
-      "integrity": "sha512-m0avq0JIO/8b0Q9DLnC7YczVKL50Zr6aeq6CM4w3NIltjh0GyhOO/57DLZ7FYY3v3Y6N2iKTzVUCvvn9TMFIhA==",
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/videojs-sprite-thumbnails/-/videojs-sprite-thumbnails-1.1.1.tgz",
+      "integrity": "sha512-i74Xgu0ly154/E0JidTAJ5qZnQVUhFM74UYbOUjgpIRGjAUeXwXIXdVqJ3x8xyN8PGg7AXR1TnP4eiYfI5ibIA==",
       "dependencies": {
         "global": "^4.4.0",
         "video.js": "^6 || ^7"
@@ -5040,9 +5505,9 @@
       }
     },
     "node_modules/videojs-vtt.js": {
-      "version": "0.15.4",
-      "resolved": "https://registry.npmjs.org/videojs-vtt.js/-/videojs-vtt.js-0.15.4.tgz",
-      "integrity": "sha512-r6IhM325fcLb1D6pgsMkTQT1PpFdUdYZa1iqk7wJEu+QlibBwATPfPc9Bg8Jiym0GE5yP1AG2rMLu+QMVWkYtA==",
+      "version": "0.15.5",
+      "resolved": "https://registry.npmjs.org/videojs-vtt.js/-/videojs-vtt.js-0.15.5.tgz",
+      "integrity": "sha512-yZbBxvA7QMYn15Lr/ZfhhLPrNpI/RmCSCqgIff57GC2gIrV5YfyzLfLyZMj0NnZSAz8syB4N0nHXpZg9MyrMOQ==",
       "dependencies": {
         "global": "^4.3.1"
       }
@@ -5060,9 +5525,9 @@
       }
     },
     "node_modules/webpack": {
-      "version": "5.85.0",
-      "resolved": "https://registry.npmjs.org/webpack/-/webpack-5.85.0.tgz",
-      "integrity": "sha512-7gazTiYqwo5OSqwH1tigLDL2r3qDeP2dOKYgd+LlXpsUMqDTklg6tOghexqky0/+6QY38kb/R/uRPUleuL43zg==",
+      "version": "5.88.2",
+      "resolved": "https://registry.npmjs.org/webpack/-/webpack-5.88.2.tgz",
+      "integrity": "sha512-JmcgNZ1iKj+aiR0OvTYtWQqJwq37Pf683dY9bVORwVbUrDhLhdn/PlO2sHsFHPkj7sHNQF3JwaAkp49V+Sq1tQ==",
       "dependencies": {
         "@types/eslint-scope": "^3.7.3",
         "@types/estree": "^1.0.0",
@@ -5073,7 +5538,7 @@
         "acorn-import-assertions": "^1.9.0",
         "browserslist": "^4.14.5",
         "chrome-trace-event": "^1.0.2",
-        "enhanced-resolve": "^5.14.1",
+        "enhanced-resolve": "^5.15.0",
         "es-module-lexer": "^1.2.1",
         "eslint-scope": "5.1.1",
         "events": "^3.2.0",
@@ -5083,7 +5548,7 @@
         "loader-runner": "^4.2.0",
         "mime-types": "^2.1.27",
         "neo-async": "^2.6.2",
-        "schema-utils": "^3.1.2",
+        "schema-utils": "^3.2.0",
         "tapable": "^2.1.1",
         "terser-webpack-plugin": "^5.3.7",
         "watchpack": "^2.4.0",
@@ -5130,9 +5595,9 @@
       }
     },
     "node_modules/webpack-cli": {
-      "version": "5.1.3",
-      "resolved": "https://registry.npmjs.org/webpack-cli/-/webpack-cli-5.1.3.tgz",
-      "integrity": "sha512-MTuk7NUMvEHQUSXCpvUrF1q2p0FJS40dPFfqQvG3jTWcgv/8plBNz2Kv2HXZiLGPnfmSAA5uCtCILO1JBmmkfw==",
+      "version": "5.1.4",
+      "resolved": "https://registry.npmjs.org/webpack-cli/-/webpack-cli-5.1.4.tgz",
+      "integrity": "sha512-pIDJHIEI9LR0yxHXQ+Qh95k2EvXpWzZ5l+d+jIo+RdSm9MiHfzazIxwwni/p7+x4eJZuvG1AJwgC4TNQ7NRgsg==",
       "dev": true,
       "dependencies": {
         "@discoveryjs/json-ext": "^0.5.0",
@@ -5225,15 +5690,6 @@
       "integrity": "sha512-JcKqAHLPxcdb9KM49dufGXn2x3ssnfjbcaQdLlfZsL9rH9wgDQjUtDxbo8NE0F6SFvydeu1VhZe7hZuHsB2/pw==",
       "dev": true
     },
-    "node_modules/word-wrap": {
-      "version": "1.2.3",
-      "resolved": "https://registry.npmjs.org/word-wrap/-/word-wrap-1.2.3.tgz",
-      "integrity": "sha512-Hz/mrNwitNRh/HUAtM/VT/5VH+ygD6DV7mYKZAtHOrbs8U7lvPS6xf7EJKMF0uW1KJCl0H701g3ZGus+muE5vQ==",
-      "dev": true,
-      "engines": {
-        "node": ">=0.10.0"
-      }
-    },
     "node_modules/wordwrap": {
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/wordwrap/-/wordwrap-1.0.0.tgz",
@@ -5295,6 +5751,12 @@
     }
   },
   "dependencies": {
+    "@aashutoshrathi/word-wrap": {
+      "version": "1.2.6",
+      "resolved": "https://registry.npmjs.org/@aashutoshrathi/word-wrap/-/word-wrap-1.2.6.tgz",
+      "integrity": "sha512-1Yjs2SvM8TflER/OD3cOjhWWOZb58A2t7wpE2S9XfBYTiIl+XFhQG2bjy4Pu1I+EAlCNUzRDYDdFwFYUKvXcIA==",
+      "dev": true
+    },
     "@alloc/quick-lru": {
       "version": "5.2.0",
       "resolved": "https://registry.npmjs.org/@alloc/quick-lru/-/quick-lru-5.2.0.tgz",
@@ -5302,17 +5764,17 @@
       "dev": true
     },
     "@alpinejs/focus": {
-      "version": "3.12.2",
-      "resolved": "https://registry.npmjs.org/@alpinejs/focus/-/focus-3.12.2.tgz",
-      "integrity": "sha512-Uhu/0uSwgYSyzAeNT/kzrxiVKJQezwhUM1VxYwCpfOMT0OvKJ80Wl+M4R+5JJhsf+15B65rQnsE7no+TxpV5bg==",
+      "version": "3.12.3",
+      "resolved": "https://registry.npmjs.org/@alpinejs/focus/-/focus-3.12.3.tgz",
+      "integrity": "sha512-kIQwvvUPCfCO2REpceQ3uHNdN3oqDLvvvQNaHVgHoYqk+RrL3EcR6uOHyvHJUgOhaIjN5Uc3b7BaRNrKZbDGew==",
       "requires": {
         "focus-trap": "^6.6.1"
       }
     },
     "@alpinejs/persist": {
-      "version": "3.12.2",
-      "resolved": "https://registry.npmjs.org/@alpinejs/persist/-/persist-3.12.2.tgz",
-      "integrity": "sha512-Bl8/XLySboH7hkujGDl8e6m8CFeaWGyIoVQE4ht5t30/AGNsE6aCoCJge2HejBVOkCz/2SoCGzU7MT67fhcmug=="
+      "version": "3.12.3",
+      "resolved": "https://registry.npmjs.org/@alpinejs/persist/-/persist-3.12.3.tgz",
+      "integrity": "sha512-TyDzwkFePki6vc+pCdxdNs0cYdBYAJ6W5szXnoQys8iUyshov/6Q9UhKxlXoCE4jvmmXvL+U4vNnnCcnmVD5dg=="
     },
     "@babel/runtime": {
       "version": "7.18.9",
@@ -5329,29 +5791,29 @@
       "dev": true
     },
     "@eslint-community/eslint-utils": {
-      "version": "4.3.0",
-      "resolved": "https://registry.npmjs.org/@eslint-community/eslint-utils/-/eslint-utils-4.3.0.tgz",
-      "integrity": "sha512-v3oplH6FYCULtFuCeqyuTd9D2WKO937Dxdq+GmHOLL72TTRriLxz2VLlNfkZRsvj6PKnOPAtuT6dwrs/pA5DvA==",
+      "version": "4.4.0",
+      "resolved": "https://registry.npmjs.org/@eslint-community/eslint-utils/-/eslint-utils-4.4.0.tgz",
+      "integrity": "sha512-1/sA4dwrzBAyeUoQ6oxahHKmrZvsnLCg4RfxW3ZFGGmQkSNQPFNLV9CUEFQP1x9EYXHTo5p6xdhZM1Ne9p/AfA==",
       "dev": true,
       "requires": {
         "eslint-visitor-keys": "^3.3.0"
       }
     },
     "@eslint-community/regexpp": {
-      "version": "4.4.0",
-      "resolved": "https://registry.npmjs.org/@eslint-community/regexpp/-/regexpp-4.4.0.tgz",
-      "integrity": "sha512-A9983Q0LnDGdLPjxyXQ00sbV+K+O+ko2Dr+CZigbHWtX9pNfxlaBkMR8X1CztI73zuEyEBXTVjx7CE+/VSwDiQ==",
+      "version": "4.6.2",
+      "resolved": "https://registry.npmjs.org/@eslint-community/regexpp/-/regexpp-4.6.2.tgz",
+      "integrity": "sha512-pPTNuaAG3QMH+buKyBIGJs3g/S5y0caxw0ygM3YyE6yJFySwiGGSzA+mM3KJ8QQvzeLh3blwgSonkFjgQdxzMw==",
       "dev": true
     },
     "@eslint/eslintrc": {
-      "version": "2.0.3",
-      "resolved": "https://registry.npmjs.org/@eslint/eslintrc/-/eslintrc-2.0.3.tgz",
-      "integrity": "sha512-+5gy6OQfk+xx3q0d6jGZZC3f3KzAkXc/IanVxd1is/VIIziRqqt3ongQz0FiTUXqTk0c7aDB3OaFuKnuSoJicQ==",
+      "version": "2.1.2",
+      "resolved": "https://registry.npmjs.org/@eslint/eslintrc/-/eslintrc-2.1.2.tgz",
+      "integrity": "sha512-+wvgpDsrB1YqAMdEUCcnTlpfVBH7Vqn6A/NT3D8WVXFIaKMlErPIZT3oCIAVCOtarRpMtelZLqJeU3t7WY6X6g==",
       "dev": true,
       "requires": {
         "ajv": "^6.12.4",
         "debug": "^4.3.2",
-        "espree": "^9.5.2",
+        "espree": "^9.6.0",
         "globals": "^13.19.0",
         "ignore": "^5.2.0",
         "import-fresh": "^3.2.1",
@@ -5361,15 +5823,15 @@
       }
     },
     "@eslint/js": {
-      "version": "8.42.0",
-      "resolved": "https://registry.npmjs.org/@eslint/js/-/js-8.42.0.tgz",
-      "integrity": "sha512-6SWlXpWU5AvId8Ac7zjzmIOqMOba/JWY8XZ4A7q7Gn1Vlfg/SFFIlrtHXt9nPn4op9ZPAkl91Jao+QQv3r/ukw==",
+      "version": "8.47.0",
+      "resolved": "https://registry.npmjs.org/@eslint/js/-/js-8.47.0.tgz",
+      "integrity": "sha512-P6omY1zv5MItm93kLM8s2vr1HICJH8v0dvddDhysbIuZ+vcjOHg5Zbkf1mTkcmi2JA9oBG2anOkRnW8WJTS8Og==",
       "dev": true
     },
     "@fortawesome/fontawesome-free": {
-      "version": "6.4.0",
-      "resolved": "https://registry.npmjs.org/@fortawesome/fontawesome-free/-/fontawesome-free-6.4.0.tgz",
-      "integrity": "sha512-0NyytTlPJwB/BF5LtRV8rrABDbe3TdTXqNB3PdZ+UUUZAEIrdOJdmABqKjt4AXwIoJNaRVVZEXxpNrqvE1GAYQ=="
+      "version": "6.4.2",
+      "resolved": "https://registry.npmjs.org/@fortawesome/fontawesome-free/-/fontawesome-free-6.4.2.tgz",
+      "integrity": "sha512-m5cPn3e2+FDCOgi1mz0RexTUvvQibBebOUlUlW0+YrMjDTPkiJ6VTKukA1GRsvRw+12KyJndNjj0O4AgTxm2Pg=="
     },
     "@fullcalendar/core": {
       "version": "6.1.8",
@@ -5516,6 +5978,20 @@
         "fastq": "^1.6.0"
       }
     },
+    "@pkgr/utils": {
+      "version": "2.4.2",
+      "resolved": "https://registry.npmjs.org/@pkgr/utils/-/utils-2.4.2.tgz",
+      "integrity": "sha512-POgTXhjrTfbTV63DiFXav4lBHiICLKKwDeaKn9Nphwj7WH6m0hMMCaJkMyRWjgtPFyRKRVoMXXjczsTQRDEhYw==",
+      "dev": true,
+      "requires": {
+        "cross-spawn": "^7.0.3",
+        "fast-glob": "^3.3.0",
+        "is-glob": "^4.0.3",
+        "open": "^9.1.0",
+        "picocolors": "^1.0.0",
+        "tslib": "^2.6.0"
+      }
+    },
     "@polka/url": {
       "version": "1.0.0-next.21",
       "resolved": "https://registry.npmjs.org/@polka/url/-/url-1.0.0-next.21.tgz",
@@ -5560,9 +6036,9 @@
       "integrity": "sha512-WulqXMDUTYAXCjZnk6JtIHPigp55cVtDgDrO2gHRwhyJto21+1zbVCtOYB2L1F9w4qCQ0rOGWBnBe0FNTiEJIQ=="
     },
     "@types/json-schema": {
-      "version": "7.0.9",
-      "resolved": "https://registry.npmjs.org/@types/json-schema/-/json-schema-7.0.9.tgz",
-      "integrity": "sha512-qcUXuemtEu+E5wZSJHNxUXeCZhAfXKQ41D+duX+VYPde7xyEVZci+/oXKJL13tnRs9lR2pr4fod59GT6/X1/yQ=="
+      "version": "7.0.12",
+      "resolved": "https://registry.npmjs.org/@types/json-schema/-/json-schema-7.0.12.tgz",
+      "integrity": "sha512-Hr5Jfhc9eYOQNPYO5WLDq/n4jqijdHNlDXjuAQkkt+mWdQR+XJToOHrsD4cPaMXpn6KO7y2+wM8AZEs8VpBLVA=="
     },
     "@types/node": {
       "version": "18.15.11",
@@ -5582,102 +6058,103 @@
       "dev": true
     },
     "@typescript-eslint/eslint-plugin": {
-      "version": "5.59.8",
-      "resolved": "https://registry.npmjs.org/@typescript-eslint/eslint-plugin/-/eslint-plugin-5.59.8.tgz",
-      "integrity": "sha512-JDMOmhXteJ4WVKOiHXGCoB96ADWg9q7efPWHRViT/f09bA8XOMLAVHHju3l0MkZnG1izaWXYmgvQcUjTRcpShQ==",
+      "version": "6.4.0",
+      "resolved": "https://registry.npmjs.org/@typescript-eslint/eslint-plugin/-/eslint-plugin-6.4.0.tgz",
+      "integrity": "sha512-62o2Hmc7Gs3p8SLfbXcipjWAa6qk2wZGChXG2JbBtYpwSRmti/9KHLqfbLs9uDigOexG+3PaQ9G2g3201FWLKg==",
       "dev": true,
       "requires": {
-        "@eslint-community/regexpp": "^4.4.0",
-        "@typescript-eslint/scope-manager": "5.59.8",
-        "@typescript-eslint/type-utils": "5.59.8",
-        "@typescript-eslint/utils": "5.59.8",
+        "@eslint-community/regexpp": "^4.5.1",
+        "@typescript-eslint/scope-manager": "6.4.0",
+        "@typescript-eslint/type-utils": "6.4.0",
+        "@typescript-eslint/utils": "6.4.0",
+        "@typescript-eslint/visitor-keys": "6.4.0",
         "debug": "^4.3.4",
-        "grapheme-splitter": "^1.0.4",
-        "ignore": "^5.2.0",
-        "natural-compare-lite": "^1.4.0",
-        "semver": "^7.3.7",
-        "tsutils": "^3.21.0"
+        "graphemer": "^1.4.0",
+        "ignore": "^5.2.4",
+        "natural-compare": "^1.4.0",
+        "semver": "^7.5.4",
+        "ts-api-utils": "^1.0.1"
       }
     },
     "@typescript-eslint/parser": {
-      "version": "5.59.8",
-      "resolved": "https://registry.npmjs.org/@typescript-eslint/parser/-/parser-5.59.8.tgz",
-      "integrity": "sha512-AnR19RjJcpjoeGojmwZtCwBX/RidqDZtzcbG3xHrmz0aHHoOcbWnpDllenRDmDvsV0RQ6+tbb09/kyc+UT9Orw==",
+      "version": "6.4.0",
+      "resolved": "https://registry.npmjs.org/@typescript-eslint/parser/-/parser-6.4.0.tgz",
+      "integrity": "sha512-I1Ah1irl033uxjxO9Xql7+biL3YD7w9IU8zF+xlzD/YxY6a4b7DYA08PXUUCbm2sEljwJF6ERFy2kTGAGcNilg==",
       "dev": true,
       "requires": {
-        "@typescript-eslint/scope-manager": "5.59.8",
-        "@typescript-eslint/types": "5.59.8",
-        "@typescript-eslint/typescript-estree": "5.59.8",
+        "@typescript-eslint/scope-manager": "6.4.0",
+        "@typescript-eslint/types": "6.4.0",
+        "@typescript-eslint/typescript-estree": "6.4.0",
+        "@typescript-eslint/visitor-keys": "6.4.0",
         "debug": "^4.3.4"
       }
     },
     "@typescript-eslint/scope-manager": {
-      "version": "5.59.8",
-      "resolved": "https://registry.npmjs.org/@typescript-eslint/scope-manager/-/scope-manager-5.59.8.tgz",
-      "integrity": "sha512-/w08ndCYI8gxGf+9zKf1vtx/16y8MHrZs5/tnjHhMLNSixuNcJavSX4wAiPf4aS5x41Es9YPCn44MIe4cxIlig==",
+      "version": "6.4.0",
+      "resolved": "https://registry.npmjs.org/@typescript-eslint/scope-manager/-/scope-manager-6.4.0.tgz",
+      "integrity": "sha512-TUS7vaKkPWDVvl7GDNHFQMsMruD+zhkd3SdVW0d7b+7Zo+bd/hXJQ8nsiUZMi1jloWo6c9qt3B7Sqo+flC1nig==",
       "dev": true,
       "requires": {
-        "@typescript-eslint/types": "5.59.8",
-        "@typescript-eslint/visitor-keys": "5.59.8"
+        "@typescript-eslint/types": "6.4.0",
+        "@typescript-eslint/visitor-keys": "6.4.0"
       }
     },
     "@typescript-eslint/type-utils": {
-      "version": "5.59.8",
-      "resolved": "https://registry.npmjs.org/@typescript-eslint/type-utils/-/type-utils-5.59.8.tgz",
-      "integrity": "sha512-+5M518uEIHFBy3FnyqZUF3BMP+AXnYn4oyH8RF012+e7/msMY98FhGL5SrN29NQ9xDgvqCgYnsOiKp1VjZ/fpA==",
+      "version": "6.4.0",
+      "resolved": "https://registry.npmjs.org/@typescript-eslint/type-utils/-/type-utils-6.4.0.tgz",
+      "integrity": "sha512-TvqrUFFyGY0cX3WgDHcdl2/mMCWCDv/0thTtx/ODMY1QhEiyFtv/OlLaNIiYLwRpAxAtOLOY9SUf1H3Q3dlwAg==",
       "dev": true,
       "requires": {
-        "@typescript-eslint/typescript-estree": "5.59.8",
-        "@typescript-eslint/utils": "5.59.8",
+        "@typescript-eslint/typescript-estree": "6.4.0",
+        "@typescript-eslint/utils": "6.4.0",
         "debug": "^4.3.4",
-        "tsutils": "^3.21.0"
+        "ts-api-utils": "^1.0.1"
       }
     },
     "@typescript-eslint/types": {
-      "version": "5.59.8",
-      "resolved": "https://registry.npmjs.org/@typescript-eslint/types/-/types-5.59.8.tgz",
-      "integrity": "sha512-+uWuOhBTj/L6awoWIg0BlWy0u9TyFpCHrAuQ5bNfxDaZ1Ppb3mx6tUigc74LHcbHpOHuOTOJrBoAnhdHdaea1w==",
+      "version": "6.4.0",
+      "resolved": "https://registry.npmjs.org/@typescript-eslint/types/-/types-6.4.0.tgz",
+      "integrity": "sha512-+FV9kVFrS7w78YtzkIsNSoYsnOtrYVnKWSTVXoL1761CsCRv5wpDOINgsXpxD67YCLZtVQekDDyaxfjVWUJmmg==",
       "dev": true
     },
     "@typescript-eslint/typescript-estree": {
-      "version": "5.59.8",
-      "resolved": "https://registry.npmjs.org/@typescript-eslint/typescript-estree/-/typescript-estree-5.59.8.tgz",
-      "integrity": "sha512-Jy/lPSDJGNow14vYu6IrW790p7HIf/SOV1Bb6lZ7NUkLc2iB2Z9elESmsaUtLw8kVqogSbtLH9tut5GCX1RLDg==",
+      "version": "6.4.0",
+      "resolved": "https://registry.npmjs.org/@typescript-eslint/typescript-estree/-/typescript-estree-6.4.0.tgz",
+      "integrity": "sha512-iDPJArf/K2sxvjOR6skeUCNgHR/tCQXBsa+ee1/clRKr3olZjZ/dSkXPZjG6YkPtnW6p5D1egeEPMCW6Gn4yLA==",
       "dev": true,
       "requires": {
-        "@typescript-eslint/types": "5.59.8",
-        "@typescript-eslint/visitor-keys": "5.59.8",
+        "@typescript-eslint/types": "6.4.0",
+        "@typescript-eslint/visitor-keys": "6.4.0",
         "debug": "^4.3.4",
         "globby": "^11.1.0",
         "is-glob": "^4.0.3",
-        "semver": "^7.3.7",
-        "tsutils": "^3.21.0"
+        "semver": "^7.5.4",
+        "ts-api-utils": "^1.0.1"
       }
     },
     "@typescript-eslint/utils": {
-      "version": "5.59.8",
-      "resolved": "https://registry.npmjs.org/@typescript-eslint/utils/-/utils-5.59.8.tgz",
-      "integrity": "sha512-Tr65630KysnNn9f9G7ROF3w1b5/7f6QVCJ+WK9nhIocWmx9F+TmCAcglF26Vm7z8KCTwoKcNEBZrhlklla3CKg==",
+      "version": "6.4.0",
+      "resolved": "https://registry.npmjs.org/@typescript-eslint/utils/-/utils-6.4.0.tgz",
+      "integrity": "sha512-BvvwryBQpECPGo8PwF/y/q+yacg8Hn/2XS+DqL/oRsOPK+RPt29h5Ui5dqOKHDlbXrAeHUTnyG3wZA0KTDxRZw==",
       "dev": true,
       "requires": {
-        "@eslint-community/eslint-utils": "^4.2.0",
-        "@types/json-schema": "^7.0.9",
-        "@types/semver": "^7.3.12",
-        "@typescript-eslint/scope-manager": "5.59.8",
-        "@typescript-eslint/types": "5.59.8",
-        "@typescript-eslint/typescript-estree": "5.59.8",
-        "eslint-scope": "^5.1.1",
-        "semver": "^7.3.7"
+        "@eslint-community/eslint-utils": "^4.4.0",
+        "@types/json-schema": "^7.0.12",
+        "@types/semver": "^7.5.0",
+        "@typescript-eslint/scope-manager": "6.4.0",
+        "@typescript-eslint/types": "6.4.0",
+        "@typescript-eslint/typescript-estree": "6.4.0",
+        "semver": "^7.5.4"
       }
     },
     "@typescript-eslint/visitor-keys": {
-      "version": "5.59.8",
-      "resolved": "https://registry.npmjs.org/@typescript-eslint/visitor-keys/-/visitor-keys-5.59.8.tgz",
-      "integrity": "sha512-pJhi2ms0x0xgloT7xYabil3SGGlojNNKjK/q6dB3Ey0uJLMjK2UDGJvHieiyJVW/7C3KI+Z4Q3pEHkm4ejA+xQ==",
+      "version": "6.4.0",
+      "resolved": "https://registry.npmjs.org/@typescript-eslint/visitor-keys/-/visitor-keys-6.4.0.tgz",
+      "integrity": "sha512-yJSfyT+uJm+JRDWYRYdCm2i+pmvXJSMtPR9Cq5/XQs4QIgNoLcoRtDdzsLbLsFM/c6um6ohQkg/MLxWvoIndJA==",
       "dev": true,
       "requires": {
-        "@typescript-eslint/types": "5.59.8",
-        "eslint-visitor-keys": "^3.3.0"
+        "@typescript-eslint/types": "6.4.0",
+        "eslint-visitor-keys": "^3.4.1"
       }
     },
     "@videojs/http-streaming": {
@@ -5881,9 +6358,9 @@
       "requires": {}
     },
     "@xmldom/xmldom": {
-      "version": "0.8.6",
-      "resolved": "https://registry.npmjs.org/@xmldom/xmldom/-/xmldom-0.8.6.tgz",
-      "integrity": "sha512-uRjjusqpoqfmRkTaNuLJ2VohVr67Q5YwDATW3VU7PfzTj6IRaihGrYI7zckGZjxQPBIp63nfvJbM+Yu5ICh0Bg=="
+      "version": "0.8.10",
+      "resolved": "https://registry.npmjs.org/@xmldom/xmldom/-/xmldom-0.8.10.tgz",
+      "integrity": "sha512-2WALfTl4xo2SkGCYRt6rDTFfk9R1czmBvUQy12gK2KuRKIpWEhcbbzy8EZXtz/jkRqHX8bFEc6FC1HjX4TUWYw=="
     },
     "@xtuc/ieee754": {
       "version": "1.2.0",
@@ -5896,9 +6373,9 @@
       "integrity": "sha512-NuHqBY1PB/D8xU6s/thBgOAiAP7HOYDQ32+BFZILJ8ivkUkAHQnWfn6WhL79Owj1qmUnoN/YPhktdIoucipkAQ=="
     },
     "acorn": {
-      "version": "8.8.0",
-      "resolved": "https://registry.npmjs.org/acorn/-/acorn-8.8.0.tgz",
-      "integrity": "sha512-QOxyigPVrpZ2GXT+PFyZTl6TtOFc5egxHIP9IlQ+RbupQuX4RkT/Bee4/kQuC02Xkzg84JcT7oLYtDIQxp+v7w=="
+      "version": "8.10.0",
+      "resolved": "https://registry.npmjs.org/acorn/-/acorn-8.10.0.tgz",
+      "integrity": "sha512-F0SAmZ8iUtS//m8DmCTA0jlh6TDKkHQyK6xc6V4KDTyZKA9dnvX9/3sRTVQrWm79glUAZbnmmNcdYwUIHWVybw=="
     },
     "acorn-import-assertions": {
       "version": "1.9.0",
@@ -5974,9 +6451,9 @@
       "requires": {}
     },
     "alpinejs": {
-      "version": "3.12.2",
-      "resolved": "https://registry.npmjs.org/alpinejs/-/alpinejs-3.12.2.tgz",
-      "integrity": "sha512-wrUZULm9w6DYwWcUtB/anFLgRaF4riSuPgIJ3gcPUS8st9luAJnAxoIgro/Al97d2McSSz/JypWg/NlmKFIJJA==",
+      "version": "3.12.3",
+      "resolved": "https://registry.npmjs.org/alpinejs/-/alpinejs-3.12.3.tgz",
+      "integrity": "sha512-fLz2dfYQ3xCk7Ip8LiIpV2W+9brUyex2TAE7Z0BCvZdUDklJE+n+a8gCgLWzfZ0GzZNZu7HUP8Z0z6Xbm6fsSA==",
       "requires": {
         "@vue/reactivity": "~3.1.1"
       }
@@ -6036,13 +6513,13 @@
       "integrity": "sha512-spZRyzKL5l5BZQrr/6m/SqFdBN0q3OCI0f9rjfBzCMBIP4p75P620rR3gTmaksNOhmzgdxcaxdNfMy6anrbM0g=="
     },
     "autoprefixer": {
-      "version": "10.4.14",
-      "resolved": "https://registry.npmjs.org/autoprefixer/-/autoprefixer-10.4.14.tgz",
-      "integrity": "sha512-FQzyfOsTlwVzjHxKEqRIAdJx9niO6VCBCoEwax/VLSoQF29ggECcPuBqUMZ+u8jCZOPSy8b8/8KnuFbp0SaFZQ==",
+      "version": "10.4.15",
+      "resolved": "https://registry.npmjs.org/autoprefixer/-/autoprefixer-10.4.15.tgz",
+      "integrity": "sha512-KCuPB8ZCIqFdA4HwKXsvz7j6gvSDNhDP7WnUjBleRkKjPdvCmHFuQ77ocavI8FT6NdvlBnE2UFr2H4Mycn8Vew==",
       "dev": true,
       "requires": {
-        "browserslist": "^4.21.5",
-        "caniuse-lite": "^1.0.30001464",
+        "browserslist": "^4.21.10",
+        "caniuse-lite": "^1.0.30001520",
         "fraction.js": "^4.2.0",
         "normalize-range": "^0.1.2",
         "picocolors": "^1.0.0",
@@ -6741,6 +7218,12 @@
       "resolved": "https://registry.npmjs.org/balanced-match/-/balanced-match-1.0.2.tgz",
       "integrity": "sha512-3oSeUO0TMV67hN1AmbXsK4yaqU7tjiHlbxRDZOpH0KW9+CeX4bRAaX0Anxt0tx2MrpRpWwQaPwIlISEJhYU5Pw=="
     },
+    "big-integer": {
+      "version": "1.6.51",
+      "resolved": "https://registry.npmjs.org/big-integer/-/big-integer-1.6.51.tgz",
+      "integrity": "sha512-GPEid2Y9QU1Exl1rpO9B2IPJGHPSupF5GnVIP0blYvNOMer2bTvSWs1jGOUg04hTmu67nmLsQ9TBo1puaotBHg==",
+      "dev": true
+    },
     "big.js": {
       "version": "5.2.2",
       "resolved": "https://registry.npmjs.org/big.js/-/big.js-5.2.2.tgz",
@@ -6752,6 +7235,15 @@
       "integrity": "sha512-jDctJ/IVQbZoJykoeHbhXpOlNBqGNcwXJKJog42E5HDPUwQTSdjCHdihjj0DlnheQ7blbT6dHOafNAiS8ooQKA==",
       "dev": true
     },
+    "bplist-parser": {
+      "version": "0.2.0",
+      "resolved": "https://registry.npmjs.org/bplist-parser/-/bplist-parser-0.2.0.tgz",
+      "integrity": "sha512-z0M+byMThzQmD9NILRniCUXYsYpjwnlO8N5uCFaCqIOpqRsJCrQL9NK3JsD67CN5a08nF5oIL2bD6loTdHOuKw==",
+      "dev": true,
+      "requires": {
+        "big-integer": "^1.6.44"
+      }
+    },
     "brace-expansion": {
       "version": "1.1.11",
       "resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-1.1.11.tgz",
@@ -6771,14 +7263,14 @@
       }
     },
     "browserslist": {
-      "version": "4.21.5",
-      "resolved": "https://registry.npmjs.org/browserslist/-/browserslist-4.21.5.tgz",
-      "integrity": "sha512-tUkiguQGW7S3IhB7N+c2MV/HZPSCPAAiYBZXLsBhFB/PCy6ZKKsZrmBayHV9fdGV/ARIfJ14NkxKzRDjvp7L6w==",
+      "version": "4.21.10",
+      "resolved": "https://registry.npmjs.org/browserslist/-/browserslist-4.21.10.tgz",
+      "integrity": "sha512-bipEBdZfVH5/pwrvqc+Ub0kUPVfGUhlKxbvfD+z1BDnPEO/X98ruXGA1WP5ASpAFKan7Qr6j736IacbZQuAlKQ==",
       "requires": {
-        "caniuse-lite": "^1.0.30001449",
-        "electron-to-chromium": "^1.4.284",
-        "node-releases": "^2.0.8",
-        "update-browserslist-db": "^1.0.10"
+        "caniuse-lite": "^1.0.30001517",
+        "electron-to-chromium": "^1.4.477",
+        "node-releases": "^2.0.13",
+        "update-browserslist-db": "^1.0.11"
       }
     },
     "btoa": {
@@ -6791,6 +7283,15 @@
       "resolved": "https://registry.npmjs.org/buffer-from/-/buffer-from-1.1.2.tgz",
       "integrity": "sha512-E+XQCRwSbaaiChtv6k6Dwgc+bx+Bs6vuKJHHl5kox/BaKbhiXzqQOwK4cO22yElGp2OCmjwVhT3HmxgyPGnJfQ=="
     },
+    "bundle-name": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/bundle-name/-/bundle-name-3.0.0.tgz",
+      "integrity": "sha512-PKA4BeSvBpQKQ8iPOGCSiell+N8P+Tf1DlwqmYhpe2gAhKPHn8EYOxVT+ShuGmhg8lN8XiSlS80yiExKXrURlw==",
+      "dev": true,
+      "requires": {
+        "run-applescript": "^5.0.0"
+      }
+    },
     "callsites": {
       "version": "3.1.0",
       "resolved": "https://registry.npmjs.org/callsites/-/callsites-3.1.0.tgz",
@@ -6804,9 +7305,9 @@
       "dev": true
     },
     "caniuse-lite": {
-      "version": "1.0.30001469",
-      "resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001469.tgz",
-      "integrity": "sha512-Rcp7221ScNqQPP3W+lVOYDyjdR6dC+neEQCttoNr5bAyz54AboB4iwpnWgyi8P4YUsPybVzT4LgWiBbI3drL4g=="
+      "version": "1.0.30001520",
+      "resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001520.tgz",
+      "integrity": "sha512-tahF5O9EiiTzwTUqAeFjIZbn4Dnqxzz7ktrgGlMYNLH43Ul26IgTMH/zvL3DG0lZxBYnlT04axvInszUsZULdA=="
     },
     "chalk": {
       "version": "4.1.2",
@@ -6819,9 +7320,9 @@
       }
     },
     "chart.js": {
-      "version": "4.3.0",
-      "resolved": "https://registry.npmjs.org/chart.js/-/chart.js-4.3.0.tgz",
-      "integrity": "sha512-ynG0E79xGfMaV2xAHdbhwiPLczxnNNnasrmPEXriXsPJGjmhOBYzFVEsB65w2qMDz+CaBJJuJD0inE/ab/h36g==",
+      "version": "4.3.3",
+      "resolved": "https://registry.npmjs.org/chart.js/-/chart.js-4.3.3.tgz",
+      "integrity": "sha512-aTk7pBw+x6sQYhon/NR3ikfUJuym/LdgpTlgZRe2PaEhjUMKBKyNaFCMVRAyTEWYFNO7qRu7iQVqOw/OqzxZxQ==",
       "requires": {
         "@kurkle/color": "^0.3.0"
       }
@@ -6948,6 +7449,34 @@
       "integrity": "sha512-oIPzksmTg4/MriiaYGO+okXDT7ztn/w3Eptv/+gSIdMdKsJo0u4CfYNFJPy+4SKMuCqGw2wxnA+URMg3t8a/bQ==",
       "dev": true
     },
+    "default-browser": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/default-browser/-/default-browser-4.0.0.tgz",
+      "integrity": "sha512-wX5pXO1+BrhMkSbROFsyxUm0i/cJEScyNhA4PPxc41ICuv05ZZB/MX28s8aZx6xjmatvebIapF6hLEKEcpneUA==",
+      "dev": true,
+      "requires": {
+        "bundle-name": "^3.0.0",
+        "default-browser-id": "^3.0.0",
+        "execa": "^7.1.1",
+        "titleize": "^3.0.0"
+      }
+    },
+    "default-browser-id": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/default-browser-id/-/default-browser-id-3.0.0.tgz",
+      "integrity": "sha512-OZ1y3y0SqSICtE8DE4S8YOE9UZOJ8wO16fKWVP5J1Qz42kV9jcnMVFrEE/noXb/ss3Q4pZIH79kxofzyNNtUNA==",
+      "dev": true,
+      "requires": {
+        "bplist-parser": "^0.2.0",
+        "untildify": "^4.0.0"
+      }
+    },
+    "define-lazy-prop": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/define-lazy-prop/-/define-lazy-prop-3.0.0.tgz",
+      "integrity": "sha512-N+MeXYoqr3pOgn8xfyRPREN7gHakLYjhsHhWGT3fWAiL4IkAt0iDw14QiiEm2bE30c5XX5q0FtAA3CK5f9/BUg==",
+      "dev": true
+    },
     "detect-indent": {
       "version": "4.0.0",
       "resolved": "https://registry.npmjs.org/detect-indent/-/detect-indent-4.0.0.tgz",
@@ -6998,9 +7527,9 @@
       "dev": true
     },
     "electron-to-chromium": {
-      "version": "1.4.335",
-      "resolved": "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.4.335.tgz",
-      "integrity": "sha512-l/eowQqTnrq3gu+WSrdfkhfNHnPgYqlKAwxz7MTOj6mom19vpEDHNXl6dxDxyTiYuhemydprKr/HCrHfgk+OfQ=="
+      "version": "1.4.492",
+      "resolved": "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.4.492.tgz",
+      "integrity": "sha512-36K9b/6skMVwAIEsC7GiQ8I8N3soCALVSHqWHzNDtGemAcI9Xu8hP02cywWM0A794rTHm0b0zHPeLJHtgFVamQ=="
     },
     "emojis-list": {
       "version": "3.0.0",
@@ -7008,9 +7537,9 @@
       "integrity": "sha512-/kyM18EfinwXZbno9FyUGeFh87KC8HRQBQGildHZbEuRyWFOmv1U10o9BBp8XVZDVNNuQKyIGIu5ZYAAXJ0V2Q=="
     },
     "enhanced-resolve": {
-      "version": "5.14.1",
-      "resolved": "https://registry.npmjs.org/enhanced-resolve/-/enhanced-resolve-5.14.1.tgz",
-      "integrity": "sha512-Vklwq2vDKtl0y/vtwjSesgJ5MYS7Etuk5txS8VdKL4AOS1aUlD96zqIfsOSLQsdv3xgMRbtkWM8eG9XDfKUPow==",
+      "version": "5.15.0",
+      "resolved": "https://registry.npmjs.org/enhanced-resolve/-/enhanced-resolve-5.15.0.tgz",
+      "integrity": "sha512-LXYT42KJ7lpIKECr2mAXIaMldcNCh/7E0KBKOu4KSfkHmP+mZmSs+8V5gBAqisWBy0OO4W5Oyys0GO1Y8KtdKg==",
       "requires": {
         "graceful-fs": "^4.2.4",
         "tapable": "^2.2.0"
@@ -7038,27 +7567,27 @@
       "integrity": "sha512-vbRorB5FUQWvla16U8R/qgaFIya2qGzwDrNmCZuYKrbdSUMG6I1ZCGQRefkRVhuOkIGVne7BQ35DSfo1qvJqFg=="
     },
     "eslint": {
-      "version": "8.42.0",
-      "resolved": "https://registry.npmjs.org/eslint/-/eslint-8.42.0.tgz",
-      "integrity": "sha512-ulg9Ms6E1WPf67PHaEY4/6E2tEn5/f7FXGzr3t9cBMugOmf1INYvuUwwh1aXQN4MfJ6a5K2iNwP3w4AColvI9A==",
+      "version": "8.47.0",
+      "resolved": "https://registry.npmjs.org/eslint/-/eslint-8.47.0.tgz",
+      "integrity": "sha512-spUQWrdPt+pRVP1TTJLmfRNJJHHZryFmptzcafwSvHsceV81djHOdnEeDmkdotZyLNjDhrOasNK8nikkoG1O8Q==",
       "dev": true,
       "requires": {
         "@eslint-community/eslint-utils": "^4.2.0",
-        "@eslint-community/regexpp": "^4.4.0",
-        "@eslint/eslintrc": "^2.0.3",
-        "@eslint/js": "8.42.0",
+        "@eslint-community/regexpp": "^4.6.1",
+        "@eslint/eslintrc": "^2.1.2",
+        "@eslint/js": "^8.47.0",
         "@humanwhocodes/config-array": "^0.11.10",
         "@humanwhocodes/module-importer": "^1.0.1",
         "@nodelib/fs.walk": "^1.2.8",
-        "ajv": "^6.10.0",
+        "ajv": "^6.12.4",
         "chalk": "^4.0.0",
         "cross-spawn": "^7.0.2",
         "debug": "^4.3.2",
         "doctrine": "^3.0.0",
         "escape-string-regexp": "^4.0.0",
-        "eslint-scope": "^7.2.0",
-        "eslint-visitor-keys": "^3.4.1",
-        "espree": "^9.5.2",
+        "eslint-scope": "^7.2.2",
+        "eslint-visitor-keys": "^3.4.3",
+        "espree": "^9.6.1",
         "esquery": "^1.4.2",
         "esutils": "^2.0.2",
         "fast-deep-equal": "^3.1.3",
@@ -7068,7 +7597,6 @@
         "globals": "^13.19.0",
         "graphemer": "^1.4.0",
         "ignore": "^5.2.0",
-        "import-fresh": "^3.0.0",
         "imurmurhash": "^0.1.4",
         "is-glob": "^4.0.0",
         "is-path-inside": "^3.0.3",
@@ -7078,9 +7606,8 @@
         "lodash.merge": "^4.6.2",
         "minimatch": "^3.1.2",
         "natural-compare": "^1.4.0",
-        "optionator": "^0.9.1",
+        "optionator": "^0.9.3",
         "strip-ansi": "^6.0.1",
-        "strip-json-comments": "^3.1.0",
         "text-table": "^0.2.0"
       },
       "dependencies": {
@@ -7091,9 +7618,9 @@
           "dev": true
         },
         "eslint-scope": {
-          "version": "7.2.0",
-          "resolved": "https://registry.npmjs.org/eslint-scope/-/eslint-scope-7.2.0.tgz",
-          "integrity": "sha512-DYj5deGlHBfMt15J7rdtyKNq/Nqlv5KfU4iodrQ019XESsRnwXH9KAE0y3cwtUHDo2ob7CypAnCqefh6vioWRw==",
+          "version": "7.2.2",
+          "resolved": "https://registry.npmjs.org/eslint-scope/-/eslint-scope-7.2.2.tgz",
+          "integrity": "sha512-dOt21O7lTMhDM+X9mB4GX+DZrZtCUJPL/wlcTqxyrx5IvO0IYtILdtrQGQp+8n5S0gwSVmOf9NQrjMOgfQZlIg==",
           "dev": true,
           "requires": {
             "esrecurse": "^4.3.0",
@@ -7155,19 +7682,20 @@
       }
     },
     "eslint-config-prettier": {
-      "version": "8.8.0",
-      "resolved": "https://registry.npmjs.org/eslint-config-prettier/-/eslint-config-prettier-8.8.0.tgz",
-      "integrity": "sha512-wLbQiFre3tdGgpDv67NQKnJuTlcUVYHas3k+DZCc2U2BadthoEY4B7hLPvAxaqdyOGCzuLfii2fqGph10va7oA==",
+      "version": "9.0.0",
+      "resolved": "https://registry.npmjs.org/eslint-config-prettier/-/eslint-config-prettier-9.0.0.tgz",
+      "integrity": "sha512-IcJsTkJae2S35pRsRAwoCE+925rJJStOdkKnLVgtE+tEpqU0EVVM7OqrwxqgptKdX29NUwC82I5pXsGFIgSevw==",
       "dev": true,
       "requires": {}
     },
     "eslint-plugin-prettier": {
-      "version": "4.2.1",
-      "resolved": "https://registry.npmjs.org/eslint-plugin-prettier/-/eslint-plugin-prettier-4.2.1.tgz",
-      "integrity": "sha512-f/0rXLXUt0oFYs8ra4w49wYZBG5GKZpAYsJSm6rnYL5uVDjd+zowwMwVZHnAjf4edNrKpCDYfXDgmRE/Ak7QyQ==",
+      "version": "5.0.0",
+      "resolved": "https://registry.npmjs.org/eslint-plugin-prettier/-/eslint-plugin-prettier-5.0.0.tgz",
+      "integrity": "sha512-AgaZCVuYDXHUGxj/ZGu1u8H8CYgDY3iG6w5kUFw4AzMVXzB7VvbKgYR4nATIN+OvUrghMbiDLeimVjVY5ilq3w==",
       "dev": true,
       "requires": {
-        "prettier-linter-helpers": "^1.0.0"
+        "prettier-linter-helpers": "^1.0.0",
+        "synckit": "^0.8.5"
       }
     },
     "eslint-scope": {
@@ -7180,18 +7708,18 @@
       }
     },
     "eslint-visitor-keys": {
-      "version": "3.4.1",
-      "resolved": "https://registry.npmjs.org/eslint-visitor-keys/-/eslint-visitor-keys-3.4.1.tgz",
-      "integrity": "sha512-pZnmmLwYzf+kWaM/Qgrvpen51upAktaaiI01nsJD/Yr3lMOdNtq0cxkrrg16w64VtisN6okbs7Q8AfGqj4c9fA==",
+      "version": "3.4.3",
+      "resolved": "https://registry.npmjs.org/eslint-visitor-keys/-/eslint-visitor-keys-3.4.3.tgz",
+      "integrity": "sha512-wpc+LXeiyiisxPlEkUzU6svyS1frIO3Mgxj1fdy7Pm8Ygzguax2N3Fa/D/ag1WqbOprdI+uY6wMUl8/a2G+iag==",
       "dev": true
     },
     "espree": {
-      "version": "9.5.2",
-      "resolved": "https://registry.npmjs.org/espree/-/espree-9.5.2.tgz",
-      "integrity": "sha512-7OASN1Wma5fum5SrNhFMAMJxOUAbhyfQ8dQ//PJaJbNw0URTPWqIghHWt1MmAANKhHZIYOHruW4Kw4ruUWOdGw==",
+      "version": "9.6.1",
+      "resolved": "https://registry.npmjs.org/espree/-/espree-9.6.1.tgz",
+      "integrity": "sha512-oruZaFkjorTpF32kDSI5/75ViwGeZginGGy2NoOSg3Q9bnwlnmDm4HLnkl0RE3n+njDXR037aY1+x58Z/zFdwQ==",
       "dev": true,
       "requires": {
-        "acorn": "^8.8.0",
+        "acorn": "^8.9.0",
         "acorn-jsx": "^5.3.2",
         "eslint-visitor-keys": "^3.4.1"
       }
@@ -7243,6 +7771,23 @@
       "resolved": "https://registry.npmjs.org/events/-/events-3.3.0.tgz",
       "integrity": "sha512-mQw+2fkQbALzQ7V0MY0IqdnXNOeTtP4r0lN9z7AAawCXgqea7bDii20AYrIBrFd/Hx0M2Ocz6S111CaFkUcb0Q=="
     },
+    "execa": {
+      "version": "7.2.0",
+      "resolved": "https://registry.npmjs.org/execa/-/execa-7.2.0.tgz",
+      "integrity": "sha512-UduyVP7TLB5IcAQl+OzLyLcS/l32W/GLg+AhHJ+ow40FOk2U3SAllPwR44v4vmdFwIWqpdwxxpQbF1n5ta9seA==",
+      "dev": true,
+      "requires": {
+        "cross-spawn": "^7.0.3",
+        "get-stream": "^6.0.1",
+        "human-signals": "^4.3.0",
+        "is-stream": "^3.0.0",
+        "merge-stream": "^2.0.0",
+        "npm-run-path": "^5.1.0",
+        "onetime": "^6.0.0",
+        "signal-exit": "^3.0.7",
+        "strip-final-newline": "^3.0.0"
+      }
+    },
     "extract-loader": {
       "version": "5.1.0",
       "resolved": "https://registry.npmjs.org/extract-loader/-/extract-loader-5.1.0.tgz",
@@ -7269,9 +7814,9 @@
       "dev": true
     },
     "fast-glob": {
-      "version": "3.2.12",
-      "resolved": "https://registry.npmjs.org/fast-glob/-/fast-glob-3.2.12.tgz",
-      "integrity": "sha512-DVj4CQIYYow0BlaelwK1pHl5n5cRSJfM60UA0zK891sVInoPri2Ekj7+e1CT3/3qxXenpI+nBBmQAcJPJgaj4w==",
+      "version": "3.3.1",
+      "resolved": "https://registry.npmjs.org/fast-glob/-/fast-glob-3.3.1.tgz",
+      "integrity": "sha512-kNFPyjhh5cKjrUltxs+wFx+ZkbRaxxmZ+X0ZU31SOsxCEtP9VPgtq2teZw1DebupL5GmDaNQ6yKMMVcM41iqDg==",
       "dev": true,
       "requires": {
         "@nodelib/fs.stat": "^2.0.2",
@@ -7406,6 +7951,12 @@
       "resolved": "https://registry.npmjs.org/function-bind/-/function-bind-1.1.1.tgz",
       "integrity": "sha512-yIovAzMX49sF8Yl58fSCWJ5svSLuaibPxXQJFLmBObTuCr0Mf1KiPopGM9NiFjiYBCbfaa2Fh6breQ6ANVTI0A=="
     },
+    "get-stream": {
+      "version": "6.0.1",
+      "resolved": "https://registry.npmjs.org/get-stream/-/get-stream-6.0.1.tgz",
+      "integrity": "sha512-ts6Wi+2j3jQjqi70w5AlN8DFnkSwC+MqmxEzdEALB2qXZYV3X/b1CTfgPLGJNMeAWxdPfU8FO1ms3NUfaHCPYg==",
+      "dev": true
+    },
     "glob": {
       "version": "7.2.3",
       "resolved": "https://registry.npmjs.org/glob/-/glob-7.2.3.tgz",
@@ -7444,9 +7995,9 @@
       }
     },
     "globals": {
-      "version": "13.20.0",
-      "resolved": "https://registry.npmjs.org/globals/-/globals-13.20.0.tgz",
-      "integrity": "sha512-Qg5QtVkCy/kv3FUSlu4ukeZDVf9ee0iXLAUYX13gbR17bnejFTzr4iS9bY7kwCf1NztRNm1t91fjOiyx4CSwPQ==",
+      "version": "13.21.0",
+      "resolved": "https://registry.npmjs.org/globals/-/globals-13.21.0.tgz",
+      "integrity": "sha512-ybyme3s4yy/t/3s35bewwXKOf7cvzfreG2lH0lZl0JB7I4GxRP2ghxOK/Nb9EkRXdbBXZLfq/p/0W2JUONB/Gg==",
       "dev": true,
       "requires": {
         "type-fest": "^0.20.2"
@@ -7479,12 +8030,6 @@
       "resolved": "https://registry.npmjs.org/graceful-fs/-/graceful-fs-4.2.9.tgz",
       "integrity": "sha512-NtNxqUcXgpW2iMrfqSfR73Glt39K+BLwWsPs94yR63v45T0Wbej7eRmL5cWfwEgqXnmjQp3zaJTshdRW/qC2ZQ=="
     },
-    "grapheme-splitter": {
-      "version": "1.0.4",
-      "resolved": "https://registry.npmjs.org/grapheme-splitter/-/grapheme-splitter-1.0.4.tgz",
-      "integrity": "sha512-bzh50DW9kTPM00T8y4o8vQg89Di9oLJVLW/KaOGIXJWP/iqCN6WKYkbNOF04vFLJhwcpYUh9ydh/+5vpOqV4YQ==",
-      "dev": true
-    },
     "graphemer": {
       "version": "1.4.0",
       "resolved": "https://registry.npmjs.org/graphemer/-/graphemer-1.4.0.tgz",
@@ -7501,12 +8046,12 @@
       }
     },
     "handlebars": {
-      "version": "4.7.7",
-      "resolved": "https://registry.npmjs.org/handlebars/-/handlebars-4.7.7.tgz",
-      "integrity": "sha512-aAcXm5OAfE/8IXkcZvCepKU3VzW1/39Fb5ZuqMtgI/hT8X2YgoMvBY5dLhq/cpOvw7Lk1nK/UF71aLG/ZnVYRA==",
+      "version": "4.7.8",
+      "resolved": "https://registry.npmjs.org/handlebars/-/handlebars-4.7.8.tgz",
+      "integrity": "sha512-vafaFqs8MZkRrSX7sFVUdo3ap/eNiLnb4IakshzvP56X5Nr1iGKAIqdX6tMlm6HcNRIkr6AxO5jFEoJzzpT8aQ==",
       "requires": {
         "minimist": "^1.2.5",
-        "neo-async": "^2.6.0",
+        "neo-async": "^2.6.2",
         "source-map": "^0.6.1",
         "uglify-js": "^3.1.4",
         "wordwrap": "^1.0.0"
@@ -7565,6 +8110,12 @@
       "resolved": "https://registry.npmjs.org/http-status-codes/-/http-status-codes-2.2.0.tgz",
       "integrity": "sha512-feERVo9iWxvnejp3SEfm/+oNG517npqL2/PIA8ORjyOZjGC7TwCRQsZylciLS64i6pJ0wRYz3rkXLRwbtFa8Ng=="
     },
+    "human-signals": {
+      "version": "4.3.1",
+      "resolved": "https://registry.npmjs.org/human-signals/-/human-signals-4.3.1.tgz",
+      "integrity": "sha512-nZXjEF2nbo7lIw3mgYjItAfgQXog3OjJogSbKa2CQIIvSGWcKgeJnQlNXip6NglNzYH45nSRiEVimMvYL8DDqQ==",
+      "dev": true
+    },
     "ical.js": {
       "version": "1.5.0",
       "resolved": "https://registry.npmjs.org/ical.js/-/ical.js-1.5.0.tgz",
@@ -7578,9 +8129,9 @@
       "requires": {}
     },
     "ignore": {
-      "version": "5.2.0",
-      "resolved": "https://registry.npmjs.org/ignore/-/ignore-5.2.0.tgz",
-      "integrity": "sha512-CmxgYGiEPCLhfLnpPp1MoRmifwEIOgjcHXxOBjv7mY96c+eWScsOP9c112ZyLdWHi0FxHjI+4uVhKYp/gcdRmQ==",
+      "version": "5.2.4",
+      "resolved": "https://registry.npmjs.org/ignore/-/ignore-5.2.4.tgz",
+      "integrity": "sha512-MAb38BcSbH0eHNBxn7ql2NH/kX33OkB3lZ1BNdh7ENeRChHTYsTvWrMubiIAMNS2llXEEgZ1MUOBtXChP3kaFQ==",
       "dev": true
     },
     "import-fresh": {
@@ -7661,6 +8212,12 @@
         "has": "^1.0.3"
       }
     },
+    "is-docker": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/is-docker/-/is-docker-3.0.0.tgz",
+      "integrity": "sha512-eljcgEDlEns/7AXFosB5K/2nCM4P7FQPkGc/DWLy5rmFEWvZayGrik1d9/QIY5nJ4f9YsVvBkA6kJpHn9rISdQ==",
+      "dev": true
+    },
     "is-extglob": {
       "version": "2.1.1",
       "resolved": "https://registry.npmjs.org/is-extglob/-/is-extglob-2.1.1.tgz",
@@ -7686,6 +8243,15 @@
         "is-extglob": "^2.1.1"
       }
     },
+    "is-inside-container": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/is-inside-container/-/is-inside-container-1.0.0.tgz",
+      "integrity": "sha512-KIYLCCJghfHZxqjYBE7rEy0OBuTd5xCHS7tHVgvCLkx7StIoaxwNW3hCALgEUjFfeRk+MG/Qxmp/vtETEF3tRA==",
+      "dev": true,
+      "requires": {
+        "is-docker": "^3.0.0"
+      }
+    },
     "is-number": {
       "version": "7.0.0",
       "resolved": "https://registry.npmjs.org/is-number/-/is-number-7.0.0.tgz",
@@ -7707,6 +8273,29 @@
         "isobject": "^3.0.1"
       }
     },
+    "is-stream": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/is-stream/-/is-stream-3.0.0.tgz",
+      "integrity": "sha512-LnQR4bZ9IADDRSkvpqMGvt/tEJWclzklNgSw48V5EAaAeDd6qGvN8ei6k5p0tvxSR171VmGyHuTiAOfxAbr8kA==",
+      "dev": true
+    },
+    "is-wsl": {
+      "version": "2.2.0",
+      "resolved": "https://registry.npmjs.org/is-wsl/-/is-wsl-2.2.0.tgz",
+      "integrity": "sha512-fKzAra0rGJUUBwGBgNkHZuToZcn+TtXHpeCgmkMJMMYx1sQDYaCSyjJBSCa2nH1DGm7s3n1oBnohoVTBaN7Lww==",
+      "dev": true,
+      "requires": {
+        "is-docker": "^2.0.0"
+      },
+      "dependencies": {
+        "is-docker": {
+          "version": "2.2.1",
+          "resolved": "https://registry.npmjs.org/is-docker/-/is-docker-2.2.1.tgz",
+          "integrity": "sha512-F+i2BKsFrH66iaUFc0woD8sLy8getkwTwtOBjvs56Cx4CgJDeKQeqfz8wAYiSb8JOprWhHH5p77PbmYCvvUuXQ==",
+          "dev": true
+        }
+      }
+    },
     "isexe": {
       "version": "2.0.0",
       "resolved": "https://registry.npmjs.org/isexe/-/isexe-2.0.0.tgz",
@@ -7786,9 +8375,9 @@
       "integrity": "sha512-4xrs1aW+6N5DalkqSVA8fxh458CXvR99WU8WLKmq4v8eWAL86Xo3BVqyd3SkA9wEVjCMqyvvRRkshAdOnBp5rw=="
     },
     "katex": {
-      "version": "0.16.7",
-      "resolved": "https://registry.npmjs.org/katex/-/katex-0.16.7.tgz",
-      "integrity": "sha512-Xk9C6oGKRwJTfqfIbtr0Kes9OSv6IFsuhFGc7tW4urlpMJtuh+7YhzU6YEG9n8gmWKcMAFzkp7nr+r69kV0zrA==",
+      "version": "0.16.8",
+      "resolved": "https://registry.npmjs.org/katex/-/katex-0.16.8.tgz",
+      "integrity": "sha512-ftuDnJbcbOckGY11OO+zg3OofESlbR5DRl2cmN8HeWeeFIV7wTXvAOx8kEjZjobhA+9wh2fbKeO6cdcA9Mnovg==",
       "requires": {
         "commander": "^8.3.0"
       },
@@ -7939,6 +8528,12 @@
         "mime-db": "1.51.0"
       }
     },
+    "mimic-fn": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/mimic-fn/-/mimic-fn-4.0.0.tgz",
+      "integrity": "sha512-vqiC06CuhBTUdZH+RYl8sFrL096vA45Ok5ISO6sE/Mr1jRbGH4Csnhi8f3wKVl7x8mO4Au7Ir9D3Oyv1VYMFJw==",
+      "dev": true
+    },
     "min-document": {
       "version": "2.19.0",
       "resolved": "https://registry.npmjs.org/min-document/-/min-document-2.19.0.tgz",
@@ -8073,21 +8668,15 @@
       "integrity": "sha512-OWND8ei3VtNC9h7V60qff3SVobHr996CTwgxubgyQYEpg290h9J0buyECNNJexkFm5sOajh5G116RYA1c8ZMSw==",
       "dev": true
     },
-    "natural-compare-lite": {
-      "version": "1.4.0",
-      "resolved": "https://registry.npmjs.org/natural-compare-lite/-/natural-compare-lite-1.4.0.tgz",
-      "integrity": "sha512-Tj+HTDSJJKaZnfiuw+iaF9skdPpTo2GtEly5JHnWV/hfv2Qj/9RKsGISQtLh2ox3l5EAGw487hnBee0sIJ6v2g==",
-      "dev": true
-    },
     "neo-async": {
       "version": "2.6.2",
       "resolved": "https://registry.npmjs.org/neo-async/-/neo-async-2.6.2.tgz",
       "integrity": "sha512-Yd3UES5mWCSqR+qNT93S3UoYUkqAZ9lLg8a7g9rimsWmYGK8cVToA4/sF3RrshdyV3sAGMXVUmpMYOw+dLpOuw=="
     },
     "node-releases": {
-      "version": "2.0.10",
-      "resolved": "https://registry.npmjs.org/node-releases/-/node-releases-2.0.10.tgz",
-      "integrity": "sha512-5GFldHPXVG/YZmFzJvKK2zDSzPKhEp0+ZR5SVaoSag9fsL5YgHbUHDfnG5494ISANDcK4KwPXAx2xqVEydmd7w=="
+      "version": "2.0.13",
+      "resolved": "https://registry.npmjs.org/node-releases/-/node-releases-2.0.13.tgz",
+      "integrity": "sha512-uYr7J37ae/ORWdZeQ1xxMJe3NtdmqMC/JZK+geofDrkLUApKRHPd18/TxtBOJ4A0/+uUIliorNrfYV6s1b02eQ=="
     },
     "normalize-path": {
       "version": "3.0.0",
@@ -8102,9 +8691,26 @@
       "dev": true
     },
     "nouislider": {
-      "version": "15.7.0",
-      "resolved": "https://registry.npmjs.org/nouislider/-/nouislider-15.7.0.tgz",
-      "integrity": "sha512-aJVEULBPOUwq32/s7xnLNyLvo4kuzYJJsNp2PNGW932AQ0uuDAbLShAqswtxRzJc5n/dLJXNlYSLOZ57bcUg1w=="
+      "version": "15.7.1",
+      "resolved": "https://registry.npmjs.org/nouislider/-/nouislider-15.7.1.tgz",
+      "integrity": "sha512-5N7C1ru/i8y3dg9+Z6ilj6+m1EfabvOoaRa7ztpxBSKKRZso4vA52DGSbBJjw5XLtFr/LZ9SgGAXqyVtlVHO5w=="
+    },
+    "npm-run-path": {
+      "version": "5.1.0",
+      "resolved": "https://registry.npmjs.org/npm-run-path/-/npm-run-path-5.1.0.tgz",
+      "integrity": "sha512-sJOdmRGrY2sjNTRMbSvluQqg+8X7ZK61yvzBEIDhz4f8z1TZFYABsqjjCBd/0PUNE9M6QDgHJXQkGUEm7Q+l9Q==",
+      "dev": true,
+      "requires": {
+        "path-key": "^4.0.0"
+      },
+      "dependencies": {
+        "path-key": {
+          "version": "4.0.0",
+          "resolved": "https://registry.npmjs.org/path-key/-/path-key-4.0.0.tgz",
+          "integrity": "sha512-haREypq7xkM7ErfgIyA0z+Bj4AGKlMSdlQE2jvJo6huWD1EdkKYV+G/T4nq0YEF2vgTT8kqMFKo1uHn950r4SQ==",
+          "dev": true
+        }
+      }
     },
     "object-assign": {
       "version": "4.1.1",
@@ -8126,6 +8732,27 @@
         "wrappy": "1"
       }
     },
+    "onetime": {
+      "version": "6.0.0",
+      "resolved": "https://registry.npmjs.org/onetime/-/onetime-6.0.0.tgz",
+      "integrity": "sha512-1FlR+gjXK7X+AsAHso35MnyN5KqGwJRi/31ft6x0M194ht7S+rWAvd7PHss9xSKMzE0asv1pyIHaJYq+BbacAQ==",
+      "dev": true,
+      "requires": {
+        "mimic-fn": "^4.0.0"
+      }
+    },
+    "open": {
+      "version": "9.1.0",
+      "resolved": "https://registry.npmjs.org/open/-/open-9.1.0.tgz",
+      "integrity": "sha512-OS+QTnw1/4vrf+9hh1jc1jnYjzSG4ttTBB8UxOwAnInG3Uo4ssetzC1ihqaIHjLJnA5GGlRl6QlZXOTQhRBUvg==",
+      "dev": true,
+      "requires": {
+        "default-browser": "^4.0.0",
+        "define-lazy-prop": "^3.0.0",
+        "is-inside-container": "^1.0.0",
+        "is-wsl": "^2.2.0"
+      }
+    },
     "opener": {
       "version": "1.5.2",
       "resolved": "https://registry.npmjs.org/opener/-/opener-1.5.2.tgz",
@@ -8133,17 +8760,17 @@
       "dev": true
     },
     "optionator": {
-      "version": "0.9.1",
-      "resolved": "https://registry.npmjs.org/optionator/-/optionator-0.9.1.tgz",
-      "integrity": "sha512-74RlY5FCnhq4jRxVUPKDaRwrVNXMqsGsiW6AJw4XK8hmtm10wC0ypZBLw5IIp85NZMr91+qd1RvvENwg7jjRFw==",
+      "version": "0.9.3",
+      "resolved": "https://registry.npmjs.org/optionator/-/optionator-0.9.3.tgz",
+      "integrity": "sha512-JjCoypp+jKn1ttEFExxhetCKeJt9zhAgAve5FXHixTvFDW/5aEktX9bufBKLRRMdU7bNtpLfcGu94B3cdEJgjg==",
       "dev": true,
       "requires": {
+        "@aashutoshrathi/word-wrap": "^1.2.3",
         "deep-is": "^0.1.3",
         "fast-levenshtein": "^2.0.6",
         "levn": "^0.4.1",
         "prelude-ls": "^1.2.1",
-        "type-check": "^0.4.0",
-        "word-wrap": "^1.2.3"
+        "type-check": "^0.4.0"
       }
     },
     "os-homedir": {
@@ -8258,9 +8885,9 @@
       }
     },
     "postcss": {
-      "version": "8.4.24",
-      "resolved": "https://registry.npmjs.org/postcss/-/postcss-8.4.24.tgz",
-      "integrity": "sha512-M0RzbcI0sO/XJNucsGjvWU9ERWxb/ytp1w6dKtxTKgixdtQDq4rmx/g8W1hnaheq9jgwL/oyEdH5Bc4WwJKMqg==",
+      "version": "8.4.28",
+      "resolved": "https://registry.npmjs.org/postcss/-/postcss-8.4.28.tgz",
+      "integrity": "sha512-Z7V5j0cq8oEKyejIKfpD8b4eBy9cwW2JWPk0+fB1HOAMsfHbnAXLLS+PfVWlzMSLQaWttKDt607I0XHmpE67Vw==",
       "dev": true,
       "requires": {
         "nanoid": "^3.3.6",
@@ -8371,9 +8998,9 @@
       "dev": true
     },
     "prettier": {
-      "version": "2.8.8",
-      "resolved": "https://registry.npmjs.org/prettier/-/prettier-2.8.8.tgz",
-      "integrity": "sha512-tdN8qQGvNjw4CHbY+XXk0JgCXn9QiF21a55rBe5LJAU+kDyC4WQn4+awm2Xfk2lQMk5fKup9XgzTZtGkjBdP9Q==",
+      "version": "3.0.2",
+      "resolved": "https://registry.npmjs.org/prettier/-/prettier-3.0.2.tgz",
+      "integrity": "sha512-o2YR9qtniXvwEZlOKbveKfDQVyqxbEIWn48Z8m3ZJjBjcCmUy3xZGIv+7AkaeuaTr6yPXJjwv07ZWlsWbEy1rQ==",
       "dev": true
     },
     "prettier-linter-helpers": {
@@ -8552,6 +9179,76 @@
         "glob": "^7.1.3"
       }
     },
+    "run-applescript": {
+      "version": "5.0.0",
+      "resolved": "https://registry.npmjs.org/run-applescript/-/run-applescript-5.0.0.tgz",
+      "integrity": "sha512-XcT5rBksx1QdIhlFOCtgZkB99ZEouFZ1E2Kc2LHqNW13U3/74YGdkQRmThTwxy4QIyookibDKYZOPqX//6BlAg==",
+      "dev": true,
+      "requires": {
+        "execa": "^5.0.0"
+      },
+      "dependencies": {
+        "execa": {
+          "version": "5.1.1",
+          "resolved": "https://registry.npmjs.org/execa/-/execa-5.1.1.tgz",
+          "integrity": "sha512-8uSpZZocAZRBAPIEINJj3Lo9HyGitllczc27Eh5YYojjMFMn8yHMDMaUHE2Jqfq05D/wucwI4JGURyXt1vchyg==",
+          "dev": true,
+          "requires": {
+            "cross-spawn": "^7.0.3",
+            "get-stream": "^6.0.0",
+            "human-signals": "^2.1.0",
+            "is-stream": "^2.0.0",
+            "merge-stream": "^2.0.0",
+            "npm-run-path": "^4.0.1",
+            "onetime": "^5.1.2",
+            "signal-exit": "^3.0.3",
+            "strip-final-newline": "^2.0.0"
+          }
+        },
+        "human-signals": {
+          "version": "2.1.0",
+          "resolved": "https://registry.npmjs.org/human-signals/-/human-signals-2.1.0.tgz",
+          "integrity": "sha512-B4FFZ6q/T2jhhksgkbEW3HBvWIfDW85snkQgawt07S7J5QXTk6BkNV+0yAeZrM5QpMAdYlocGoljn0sJ/WQkFw==",
+          "dev": true
+        },
+        "is-stream": {
+          "version": "2.0.1",
+          "resolved": "https://registry.npmjs.org/is-stream/-/is-stream-2.0.1.tgz",
+          "integrity": "sha512-hFoiJiTl63nn+kstHGBtewWSKnQLpyb155KHheA1l39uvtO9nWIop1p3udqPcUd/xbF1VLMO4n7OI6p7RbngDg==",
+          "dev": true
+        },
+        "mimic-fn": {
+          "version": "2.1.0",
+          "resolved": "https://registry.npmjs.org/mimic-fn/-/mimic-fn-2.1.0.tgz",
+          "integrity": "sha512-OqbOk5oEQeAZ8WXWydlu9HJjz9WVdEIvamMCcXmuqUYjTknH/sqsWvhQ3vgwKFRR1HpjvNBKQ37nbJgYzGqGcg==",
+          "dev": true
+        },
+        "npm-run-path": {
+          "version": "4.0.1",
+          "resolved": "https://registry.npmjs.org/npm-run-path/-/npm-run-path-4.0.1.tgz",
+          "integrity": "sha512-S48WzZW777zhNIrn7gxOlISNAqi9ZC/uQFnRdbeIHhZhCA6UqpkOT8T1G7BvfdgP4Er8gF4sUbaS0i7QvIfCWw==",
+          "dev": true,
+          "requires": {
+            "path-key": "^3.0.0"
+          }
+        },
+        "onetime": {
+          "version": "5.1.2",
+          "resolved": "https://registry.npmjs.org/onetime/-/onetime-5.1.2.tgz",
+          "integrity": "sha512-kbpaSSGJTWdAY5KPVeMOKXSrPtr8C8C7wodJbcsd51jRnmD+GZu8Y0VoU6Dm5Z4vWr0Ig/1NKuWRKf7j5aaYSg==",
+          "dev": true,
+          "requires": {
+            "mimic-fn": "^2.1.0"
+          }
+        },
+        "strip-final-newline": {
+          "version": "2.0.0",
+          "resolved": "https://registry.npmjs.org/strip-final-newline/-/strip-final-newline-2.0.0.tgz",
+          "integrity": "sha512-BrpvfNAE3dcvq7ll3xVumzjKjZQ5tI1sEUIKr3Uoks0XUl45St3FlatVqef9prk4jRDzhW6WZg+3bk93y6pLjA==",
+          "dev": true
+        }
+      }
+    },
     "run-parallel": {
       "version": "1.2.0",
       "resolved": "https://registry.npmjs.org/run-parallel/-/run-parallel-1.2.0.tgz",
@@ -8583,9 +9280,9 @@
       }
     },
     "schema-utils": {
-      "version": "3.1.2",
-      "resolved": "https://registry.npmjs.org/schema-utils/-/schema-utils-3.1.2.tgz",
-      "integrity": "sha512-pvjEHOgWc9OWA/f/DE3ohBWTD6EleVLf7iFUkoSwAxttdBhB9QUebQgxER2kWueOvRJXPHNnyrvvh9eZINB8Eg==",
+      "version": "3.3.0",
+      "resolved": "https://registry.npmjs.org/schema-utils/-/schema-utils-3.3.0.tgz",
+      "integrity": "sha512-pN/yOAvcC+5rQ5nERGuwrjLlYvLTbCibnZ1I7B1LaiAz9BRBlE9GMgE/eqV30P7aJQUf7Ddimy/RsbYO/GrVGg==",
       "requires": {
         "@types/json-schema": "^7.0.8",
         "ajv": "^6.12.5",
@@ -8593,9 +9290,9 @@
       }
     },
     "semver": {
-      "version": "7.3.8",
-      "resolved": "https://registry.npmjs.org/semver/-/semver-7.3.8.tgz",
-      "integrity": "sha512-NB1ctGL5rlHrPJtFDVIVzTyQylMLu9N9VICA6HSFJo8MCGVTMW6gfpicwKmmK/dAjTOrqu5l63JJOpDSrAis3A==",
+      "version": "7.5.4",
+      "resolved": "https://registry.npmjs.org/semver/-/semver-7.5.4.tgz",
+      "integrity": "sha512-1bCSESV6Pv+i21Hvpxp3Dx+pSD8lIPt8uVjRrxAUt/nbswYc+tK6Y2btiULjd4+fnq15PX+nqQDC7Oft7WkwcA==",
       "dev": true,
       "requires": {
         "lru-cache": "^6.0.0"
@@ -8633,6 +9330,12 @@
       "integrity": "sha512-7++dFhtcx3353uBaq8DDR4NuxBetBzC7ZQOhmTQInHEd6bSrXdiEyzCvG07Z44UYdLShWUyXt5M/yhz8ekcb1A==",
       "dev": true
     },
+    "signal-exit": {
+      "version": "3.0.7",
+      "resolved": "https://registry.npmjs.org/signal-exit/-/signal-exit-3.0.7.tgz",
+      "integrity": "sha512-wnD2ZE+l+SPC/uoS0vXeE9L1+0wuaMqKlfz9AMUo38JsyLSBWSFcHR1Rri62LZc12vLr1gb3jl7iwQhgwpAbGQ==",
+      "dev": true
+    },
     "sirv": {
       "version": "1.0.19",
       "resolved": "https://registry.npmjs.org/sirv/-/sirv-1.0.19.tgz",
@@ -8683,6 +9386,12 @@
         "ansi-regex": "^5.0.1"
       }
     },
+    "strip-final-newline": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/strip-final-newline/-/strip-final-newline-3.0.0.tgz",
+      "integrity": "sha512-dOESqjYr96iWYylGObzd39EuNTa5VJxyvVAEm5Jnh7KGo75V43Hk1odPQkNDyXNmUR6k+gEiDVXnjB8HJ3crXw==",
+      "dev": true
+    },
     "strip-json-comments": {
       "version": "3.1.1",
       "resolved": "https://registry.npmjs.org/strip-json-comments/-/strip-json-comments-3.1.1.tgz",
@@ -8740,15 +9449,25 @@
       "resolved": "https://registry.npmjs.org/supports-preserve-symlinks-flag/-/supports-preserve-symlinks-flag-1.0.0.tgz",
       "integrity": "sha512-ot0WnXS9fgdkgIcePe6RHNk1WA8+muPa6cSjeR3V8K27q9BB1rTE3R1p7Hv0z1ZyAc8s6Vvv8DIyWf681MAt0w=="
     },
+    "synckit": {
+      "version": "0.8.5",
+      "resolved": "https://registry.npmjs.org/synckit/-/synckit-0.8.5.tgz",
+      "integrity": "sha512-L1dapNV6vu2s/4Sputv8xGsCdAVlb5nRDMFU/E27D44l5U6cw1g0dGd45uLc+OXjNMmF4ntiMdCimzcjFKQI8Q==",
+      "dev": true,
+      "requires": {
+        "@pkgr/utils": "^2.3.1",
+        "tslib": "^2.5.0"
+      }
+    },
     "tabbable": {
       "version": "5.3.3",
       "resolved": "https://registry.npmjs.org/tabbable/-/tabbable-5.3.3.tgz",
       "integrity": "sha512-QD9qKY3StfbZqWOPLp0++pOrAVb/HbUi5xCc8cUo4XjP19808oaMiDzn0leBY5mCespIBM0CIZePzZjgzR83kA=="
     },
     "tailwindcss": {
-      "version": "3.3.2",
-      "resolved": "https://registry.npmjs.org/tailwindcss/-/tailwindcss-3.3.2.tgz",
-      "integrity": "sha512-9jPkMiIBXvPc2KywkraqsUfbfj+dHDb+JPWtSJa9MLFdrPyazI7q6WX2sUrm7R9eVR7qqv3Pas7EvQFzxKnI6w==",
+      "version": "3.3.3",
+      "resolved": "https://registry.npmjs.org/tailwindcss/-/tailwindcss-3.3.3.tgz",
+      "integrity": "sha512-A0KgSkef7eE4Mf+nKJ83i75TMyq8HqY3qmFIJSWy8bNt0v1lG7jUcpGpoTFxAwYcWOphcTBLPPJg+bDfhDf52w==",
       "dev": true,
       "requires": {
         "@alloc/quick-lru": "^5.2.0",
@@ -8771,7 +9490,6 @@
         "postcss-load-config": "^4.0.1",
         "postcss-nested": "^6.0.1",
         "postcss-selector-parser": "^6.0.11",
-        "postcss-value-parser": "^4.2.0",
         "resolve": "^1.22.2",
         "sucrase": "^3.32.0"
       },
@@ -8846,6 +9564,12 @@
         "thenify": ">= 3.1.0 < 4"
       }
     },
+    "titleize": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/titleize/-/titleize-3.0.0.tgz",
+      "integrity": "sha512-KxVu8EYHDPBdUYdKZdKtU2aj2XfEx9AfjXxE/Aj0vT06w2icA09Vus1rh6eSu1y01akYg6BjIK/hxyLJINoMLQ==",
+      "dev": true
+    },
     "to-fast-properties": {
       "version": "1.0.3",
       "resolved": "https://registry.npmjs.org/to-fast-properties/-/to-fast-properties-1.0.3.tgz",
@@ -8888,6 +9612,13 @@
       "resolved": "https://registry.npmjs.org/trim-right/-/trim-right-1.0.1.tgz",
       "integrity": "sha512-WZGXGstmCWgeevgTL54hrCuw1dyMQIzWy7ZfqRJfSmJZBwklI15egmQytFP6bPidmw3M8d5yEowl1niq4vmqZw=="
     },
+    "ts-api-utils": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/ts-api-utils/-/ts-api-utils-1.0.1.tgz",
+      "integrity": "sha512-lC/RGlPmwdrIBFTX59wwNzqh7aR2otPNPR/5brHZm/XKFYKsfqxihXUe9pU3JI+3vGkl+vyCoNNnPhJn3aLK1A==",
+      "dev": true,
+      "requires": {}
+    },
     "ts-interface-checker": {
       "version": "0.1.13",
       "resolved": "https://registry.npmjs.org/ts-interface-checker/-/ts-interface-checker-0.1.13.tgz",
@@ -8895,9 +9626,9 @@
       "dev": true
     },
     "ts-loader": {
-      "version": "9.4.3",
-      "resolved": "https://registry.npmjs.org/ts-loader/-/ts-loader-9.4.3.tgz",
-      "integrity": "sha512-n3hBnm6ozJYzwiwt5YRiJZkzktftRpMiBApHaJPoWLA+qetQBAXkHqCLM6nwSdRDimqVtA5ocIkcTRLMTt7yzA==",
+      "version": "9.4.4",
+      "resolved": "https://registry.npmjs.org/ts-loader/-/ts-loader-9.4.4.tgz",
+      "integrity": "sha512-MLukxDHBl8OJ5Dk3y69IsKVFRA/6MwzEqBgh+OXMPB/OD01KQuWPFd1WAQP8a5PeSCAxfnkhiuWqfmFJzJQt9w==",
       "dev": true,
       "requires": {
         "chalk": "^4.1.0",
@@ -8906,22 +9637,11 @@
         "semver": "^7.3.4"
       }
     },
-    "tsutils": {
-      "version": "3.21.0",
-      "resolved": "https://registry.npmjs.org/tsutils/-/tsutils-3.21.0.tgz",
-      "integrity": "sha512-mHKK3iUXL+3UF6xL5k0PEhKRUBKPBCv/+RkEOpjRWxxx27KKRBmmA60A9pgOUvMi8GKhRMPEmjBRPzs2W7O1OA==",
-      "dev": true,
-      "requires": {
-        "tslib": "^1.8.1"
-      },
-      "dependencies": {
-        "tslib": {
-          "version": "1.14.1",
-          "resolved": "https://registry.npmjs.org/tslib/-/tslib-1.14.1.tgz",
-          "integrity": "sha512-Xni35NKzjgMrwevysHTCArtLDpPvye8zV/0E4EyYn43P7/7qvQwPh9BGkHewbMulVntbigmcT7rdX3BNo9wRJg==",
-          "dev": true
-        }
-      }
+    "tslib": {
+      "version": "2.6.1",
+      "resolved": "https://registry.npmjs.org/tslib/-/tslib-2.6.1.tgz",
+      "integrity": "sha512-t0hLfiEKfMUoqhG+U1oid7Pva4bbDPHYfJNiB7BiIjRkj1pyC++4N3huJfqY6aRH6VTB0rvtzQwjM4K6qpfOig==",
+      "dev": true
     },
     "type-check": {
       "version": "0.4.0",
@@ -8939,9 +9659,9 @@
       "dev": true
     },
     "typescript": {
-      "version": "5.1.3",
-      "resolved": "https://registry.npmjs.org/typescript/-/typescript-5.1.3.tgz",
-      "integrity": "sha512-XH627E9vkeqhlZFQuL+UsyAXEnibT0kWR2FWONlr4sTjvxyJYnyefgrkyECLzM5NenmKzRAy2rR/OlYLA1HkZw==",
+      "version": "5.1.6",
+      "resolved": "https://registry.npmjs.org/typescript/-/typescript-5.1.6.tgz",
+      "integrity": "sha512-zaWCozRZ6DLEWAWFrVDz1H6FVXzUSfTy5FUMWsQlU8Ym5JP9eO4xkTIROFCQvhQf61z6O/G6ugw3SgAnvvm+HA==",
       "dev": true
     },
     "uglify-js": {
@@ -8955,10 +9675,16 @@
       "resolved": "https://registry.npmjs.org/underscore/-/underscore-1.13.1.tgz",
       "integrity": "sha512-hzSoAVtJF+3ZtiFX0VgfFPHEDRm7Y/QPjGyNo4TVdnDTdft3tr8hEkD25a1jC+TjTuE7tkHGKkhwCgs9dgBB2g=="
     },
+    "untildify": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/untildify/-/untildify-4.0.0.tgz",
+      "integrity": "sha512-KK8xQ1mkzZeg9inewmFVDNkg3l5LUhoq9kN6iWYB/CC9YMG8HA+c1Q8HwDe6dEX7kErrEVNVBO3fWsVq5iDgtw==",
+      "dev": true
+    },
     "update-browserslist-db": {
-      "version": "1.0.10",
-      "resolved": "https://registry.npmjs.org/update-browserslist-db/-/update-browserslist-db-1.0.10.tgz",
-      "integrity": "sha512-OztqDenkfFkbSG+tRxBeAnCVPckDBcvibKd35yDONx6OU8N7sqgwc7rCbkJ/WcYtVRZ4ba68d6byhC21GFh7sQ==",
+      "version": "1.0.11",
+      "resolved": "https://registry.npmjs.org/update-browserslist-db/-/update-browserslist-db-1.0.11.tgz",
+      "integrity": "sha512-dCwEFf0/oT85M1fHBg4F0jtLwJrutGoHSQXCh7u4o2t1drG+c0a9Flnqww6XUKSfQMPpJBRjU8d4RXB09qtvaA==",
       "requires": {
         "escalade": "^3.1.1",
         "picocolors": "^1.0.0"
@@ -8984,9 +9710,9 @@
       "dev": true
     },
     "video.js": {
-      "version": "7.21.4",
-      "resolved": "https://registry.npmjs.org/video.js/-/video.js-7.21.4.tgz",
-      "integrity": "sha512-R5e57M/5uqxQMQpFpybNbd8GtiRwFJPqkHjrhv0QTJ2tqnesbjETbck5kU5dhFr1FevsJRFhjBG4hAnvRGnXbw==",
+      "version": "7.21.5",
+      "resolved": "https://registry.npmjs.org/video.js/-/video.js-7.21.5.tgz",
+      "integrity": "sha512-WRq86tXZKrThA9mK+IR+v4tIQVVvnb5LhvL71fD2AX7TxVOPdaeK1X/wyuUruBqWaOG3w2sZXoMY6HF2Jlo9qA==",
       "requires": {
         "@babel/runtime": "^7.12.5",
         "@videojs/http-streaming": "2.16.2",
@@ -9000,7 +9726,7 @@
         "mux.js": "6.0.1",
         "safe-json-parse": "4.0.0",
         "videojs-font": "3.2.0",
-        "videojs-vtt.js": "^0.15.4"
+        "videojs-vtt.js": "^0.15.5"
       }
     },
     "videojs-contrib-quality-levels": {
@@ -9025,18 +9751,18 @@
       }
     },
     "videojs-sprite-thumbnails": {
-      "version": "0.6.0",
-      "resolved": "https://registry.npmjs.org/videojs-sprite-thumbnails/-/videojs-sprite-thumbnails-0.6.0.tgz",
-      "integrity": "sha512-m0avq0JIO/8b0Q9DLnC7YczVKL50Zr6aeq6CM4w3NIltjh0GyhOO/57DLZ7FYY3v3Y6N2iKTzVUCvvn9TMFIhA==",
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/videojs-sprite-thumbnails/-/videojs-sprite-thumbnails-1.1.1.tgz",
+      "integrity": "sha512-i74Xgu0ly154/E0JidTAJ5qZnQVUhFM74UYbOUjgpIRGjAUeXwXIXdVqJ3x8xyN8PGg7AXR1TnP4eiYfI5ibIA==",
       "requires": {
         "global": "^4.4.0",
         "video.js": "^6 || ^7"
       }
     },
     "videojs-vtt.js": {
-      "version": "0.15.4",
-      "resolved": "https://registry.npmjs.org/videojs-vtt.js/-/videojs-vtt.js-0.15.4.tgz",
-      "integrity": "sha512-r6IhM325fcLb1D6pgsMkTQT1PpFdUdYZa1iqk7wJEu+QlibBwATPfPc9Bg8Jiym0GE5yP1AG2rMLu+QMVWkYtA==",
+      "version": "0.15.5",
+      "resolved": "https://registry.npmjs.org/videojs-vtt.js/-/videojs-vtt.js-0.15.5.tgz",
+      "integrity": "sha512-yZbBxvA7QMYn15Lr/ZfhhLPrNpI/RmCSCqgIff57GC2gIrV5YfyzLfLyZMj0NnZSAz8syB4N0nHXpZg9MyrMOQ==",
       "requires": {
         "global": "^4.3.1"
       }
@@ -9051,9 +9777,9 @@
       }
     },
     "webpack": {
-      "version": "5.85.0",
-      "resolved": "https://registry.npmjs.org/webpack/-/webpack-5.85.0.tgz",
-      "integrity": "sha512-7gazTiYqwo5OSqwH1tigLDL2r3qDeP2dOKYgd+LlXpsUMqDTklg6tOghexqky0/+6QY38kb/R/uRPUleuL43zg==",
+      "version": "5.88.2",
+      "resolved": "https://registry.npmjs.org/webpack/-/webpack-5.88.2.tgz",
+      "integrity": "sha512-JmcgNZ1iKj+aiR0OvTYtWQqJwq37Pf683dY9bVORwVbUrDhLhdn/PlO2sHsFHPkj7sHNQF3JwaAkp49V+Sq1tQ==",
       "requires": {
         "@types/eslint-scope": "^3.7.3",
         "@types/estree": "^1.0.0",
@@ -9064,7 +9790,7 @@
         "acorn-import-assertions": "^1.9.0",
         "browserslist": "^4.14.5",
         "chrome-trace-event": "^1.0.2",
-        "enhanced-resolve": "^5.14.1",
+        "enhanced-resolve": "^5.15.0",
         "es-module-lexer": "^1.2.1",
         "eslint-scope": "5.1.1",
         "events": "^3.2.0",
@@ -9074,7 +9800,7 @@
         "loader-runner": "^4.2.0",
         "mime-types": "^2.1.27",
         "neo-async": "^2.6.2",
-        "schema-utils": "^3.1.2",
+        "schema-utils": "^3.2.0",
         "tapable": "^2.1.1",
         "terser-webpack-plugin": "^5.3.7",
         "watchpack": "^2.4.0",
@@ -9100,9 +9826,9 @@
       }
     },
     "webpack-cli": {
-      "version": "5.1.3",
-      "resolved": "https://registry.npmjs.org/webpack-cli/-/webpack-cli-5.1.3.tgz",
-      "integrity": "sha512-MTuk7NUMvEHQUSXCpvUrF1q2p0FJS40dPFfqQvG3jTWcgv/8plBNz2Kv2HXZiLGPnfmSAA5uCtCILO1JBmmkfw==",
+      "version": "5.1.4",
+      "resolved": "https://registry.npmjs.org/webpack-cli/-/webpack-cli-5.1.4.tgz",
+      "integrity": "sha512-pIDJHIEI9LR0yxHXQ+Qh95k2EvXpWzZ5l+d+jIo+RdSm9MiHfzazIxwwni/p7+x4eJZuvG1AJwgC4TNQ7NRgsg==",
       "dev": true,
       "requires": {
         "@discoveryjs/json-ext": "^0.5.0",
@@ -9158,12 +9884,6 @@
       "integrity": "sha512-JcKqAHLPxcdb9KM49dufGXn2x3ssnfjbcaQdLlfZsL9rH9wgDQjUtDxbo8NE0F6SFvydeu1VhZe7hZuHsB2/pw==",
       "dev": true
     },
-    "word-wrap": {
-      "version": "1.2.3",
-      "resolved": "https://registry.npmjs.org/word-wrap/-/word-wrap-1.2.3.tgz",
-      "integrity": "sha512-Hz/mrNwitNRh/HUAtM/VT/5VH+ygD6DV7mYKZAtHOrbs8U7lvPS6xf7EJKMF0uW1KJCl0H701g3ZGus+muE5vQ==",
-      "dev": true
-    },
     "wordwrap": {
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/wordwrap/-/wordwrap-1.0.0.tgz",
diff --git a/web/package.json b/web/package.json
index 685b66367..384f40d24 100755
--- a/web/package.json
+++ b/web/package.json
@@ -23,53 +23,53 @@
   },
   "homepage": "https://github.com/joschahenningsen/TUM-Live#readme",
   "dependencies": {
-    "@alpinejs/focus": "^3.12.0",
-    "@alpinejs/persist": "^3.12.0",
-    "@fortawesome/fontawesome-free": "^6.4.0",
-    "@fullcalendar/core": "^6.1.5",
-    "@fullcalendar/daygrid": "^6.1.5",
-    "@fullcalendar/icalendar": "^6.1.5",
-    "@fullcalendar/list": "^6.1.5",
-    "@fullcalendar/timegrid": "^6.1.5",
+    "@alpinejs/focus": "^3.12.3",
+    "@alpinejs/persist": "^3.12.3",
+    "@fortawesome/fontawesome-free": "^6.4.2",
+    "@fullcalendar/core": "^6.1.8",
+    "@fullcalendar/daygrid": "^6.1.8",
+    "@fullcalendar/icalendar": "^6.1.8",
+    "@fullcalendar/list": "^6.1.8",
+    "@fullcalendar/timegrid": "^6.1.8",
     "@silvermine/videojs-airplay": "^1.2.0",
     "@silvermine/videojs-quality-selector": "^1.3.0",
-    "alpinejs": "^3.12.0",
-    "chart.js": "^4.2.1",
+    "alpinejs": "^3.12.3",
+    "chart.js": "^4.3.3",
     "extract-loader": "^5.1.0",
     "flatpickr": "^4.6.13",
-    "fullcalendar": "^6.1.5",
-    "handlebars": "^4.7.7",
+    "fullcalendar": "^6.1.8",
+    "handlebars": "^4.7.8",
     "handlebars-loader": "^1.7.3",
     "http-status-codes": "^2.2.0",
     "ical.js": "^1.5.0",
-    "katex": "^0.16.4",
-    "mini-css-extract-plugin": "^2.7.5",
+    "katex": "^0.16.8",
+    "mini-css-extract-plugin": "^2.7.6",
     "moment": "^2.29.4",
-    "nouislider": "^15.7.0",
+    "nouislider": "^15.7.1",
     "split.js": "^1.6.5",
     "video.js": "^7.21.1",
     "videojs-contrib-quality-levels": "^3.0.0",
     "videojs-seek-buttons": "^3.0.1",
-    "videojs-sprite-thumbnails": "^0.6.0"
+    "videojs-sprite-thumbnails": "^1.1.1"
   },
   "devDependencies": {
-    "@types/video.js": "^7.3.51",
-    "@typescript-eslint/eslint-plugin": "^5.57.1",
-    "@typescript-eslint/parser": "^5.57.1",
-    "autoprefixer": "^10.4.14",
-    "css-loader": "^6.7.3",
-    "eslint": "^8.37.0",
-    "eslint-config-prettier": "^8.8.0",
-    "eslint-plugin-prettier": "^4.2.1",
+    "@types/video.js": "^7.3.52",
+    "@typescript-eslint/eslint-plugin": "^6.4.0",
+    "@typescript-eslint/parser": "^6.4.0",
+    "autoprefixer": "^10.4.15",
+    "css-loader": "^6.8.1",
+    "eslint": "^8.47.0",
+    "eslint-config-prettier": "^9.0.0",
+    "eslint-plugin-prettier": "^5.0.0",
     "lodash": "^4.17.21",
-    "postcss": "^8.4.21",
-    "prettier": "^2.8.7",
-    "tailwindcss": "^3.3.1",
+    "postcss": "^8.4.28",
+    "prettier": "^3.0.2",
+    "tailwindcss": "^3.3.3",
     "top-twitter-emojis-map": "^1.0.3",
-    "ts-loader": "^9.4.2",
-    "typescript": "^5.0.3",
-    "webpack": "^5.77.0",
-    "webpack-bundle-analyzer": "^4.8.0",
-    "webpack-cli": "^5.0.1"
+    "ts-loader": "^9.4.4",
+    "typescript": "^5.1.6",
+    "webpack": "^5.88.2",
+    "webpack-bundle-analyzer": "^4.9.0",
+    "webpack-cli": "^5.1.4"
   }
 }
diff --git a/web/ts/TUMLiveVjs.ts b/web/ts/TUMLiveVjs.ts
index 9ff04ebce..828c1863f 100644
--- a/web/ts/TUMLiveVjs.ts
+++ b/web/ts/TUMLiveVjs.ts
@@ -170,6 +170,7 @@ export const initPlayer = function (
             hotkeys: handleHotkeys(),
         },
         autoplay: autoplay,
+        /* eslint-disable  @typescript-eslint/no-explicit-any */
     }) as any;
 
     const settings = new PlayerSettings(player, live, isEmbedded);
diff --git a/web/ts/create-course.ts b/web/ts/create-course.ts
index 732f6b31f..3a2d98652 100644
--- a/web/ts/create-course.ts
+++ b/web/ts/create-course.ts
@@ -3,6 +3,7 @@ import { postData, showMessage } from "./global";
 
 export function loadCourseInfo(
     id: string,
+    /* eslint-disable  @typescript-eslint/no-explicit-any */
 ): Promise<{ title: string; semester: string; year: number; yearW: number; numberAttendees: number } | any> {
     return fetch("/api/courseInfo", { method: "POST", body: JSON.stringify({ courseID: id }) }).then((data) => {
         if (data.status != StatusCodes.OK) {
diff --git a/web/ts/schedule.ts b/web/ts/schedule.ts
index 0cc685c12..2ef3180db 100644
--- a/web/ts/schedule.ts
+++ b/web/ts/schedule.ts
@@ -67,8 +67,8 @@ const opts = {
                     <div class="flex"><p>${new Date(streamInfo["start"]).toLocaleString()}</p></div>
                 </div>
                 <form x-data="{showSubmit:false}" @submit="admin.saveLectureName(event, ${streamInfo["courseID"]}, ${
-            streamInfo["streamID"]
-        }).then((r)=>showSubmit=!r)"
+                    streamInfo["streamID"]
+                }).then((r)=>showSubmit=!r)"
                     class="w-full flex flex-row mb-2 focus-within:border-gray-300 border-gray-500">
                     <label for="lectureNameInput${streamInfo["streamID"]}" class="hidden">Lecture title</label>
                     <input id="lectureNameInput${streamInfo["streamID"]}"
diff --git a/web/ts/splitview.ts b/web/ts/splitview.ts
index ab4c0a6cd..34a3e4e03 100644
--- a/web/ts/splitview.ts
+++ b/web/ts/splitview.ts
@@ -6,6 +6,7 @@ const mouseMovingTimeout = 2200;
 
 export class SplitView {
     private camPercentage: number;
+    /* eslint-disable  @typescript-eslint/no-explicit-any */
     private players: any[];
     private split: Split.Instance;
     private gutterWidth = 10;
diff --git a/worker/Dockerfile b/worker/Dockerfile
index c3f53ab4e..9281a74db 100644
--- a/worker/Dockerfile
+++ b/worker/Dockerfile
@@ -1,4 +1,4 @@
-FROM amd64/golang:1.20-alpine3.17 as builder
+FROM amd64/golang:1.21-alpine3.18 as builder
 
 WORKDIR /go/src/github.com/joschahenningsen/TUM-Live/worker
 COPY . .
diff --git a/worker/edge/Dockerfile b/worker/edge/Dockerfile
index d707327aa..059c2dda2 100644
--- a/worker/edge/Dockerfile
+++ b/worker/edge/Dockerfile
@@ -1,4 +1,4 @@
-FROM golang:1.20-alpine3.17 as builder
+FROM golang:1.21-alpine3.18 as builder
 
 WORKDIR /go/src/github.com/joschahenningsen/TUM-Live/worker
 COPY . .
diff --git a/worker/edge/go.mod b/worker/edge/go.mod
index 316790e5e..7be79bdfd 100644
--- a/worker/edge/go.mod
+++ b/worker/edge/go.mod
@@ -4,7 +4,7 @@ go 1.19
 
 require (
 	github.com/golang-jwt/jwt/v4 v4.5.0
-	github.com/prometheus/client_golang v1.15.1
+	github.com/prometheus/client_golang v1.16.0
 )
 
 require (
@@ -12,9 +12,9 @@ require (
 	github.com/cespare/xxhash/v2 v2.2.0 // indirect
 	github.com/golang/protobuf v1.5.3 // indirect
 	github.com/matttproud/golang_protobuf_extensions v1.0.4 // indirect
-	github.com/prometheus/client_model v0.3.0 // indirect
-	github.com/prometheus/common v0.42.0 // indirect
-	github.com/prometheus/procfs v0.9.0 // indirect
-	golang.org/x/sys v0.6.0 // indirect
-	google.golang.org/protobuf v1.30.0 // indirect
+	github.com/prometheus/client_model v0.4.0 // indirect
+	github.com/prometheus/common v0.44.0 // indirect
+	github.com/prometheus/procfs v0.11.1 // indirect
+	golang.org/x/sys v0.11.0 // indirect
+	google.golang.org/protobuf v1.31.0 // indirect
 )
diff --git a/worker/edge/go.sum b/worker/edge/go.sum
index 30f026ced..562ab5b2d 100644
--- a/worker/edge/go.sum
+++ b/worker/edge/go.sum
@@ -6,7 +6,6 @@ github.com/davecgh/go-spew v1.1.1 h1:vj9j/u1bqnvCEfJOwUhtlOARqs3+rkHYY13jYWTU97c
 github.com/golang-jwt/jwt/v4 v4.5.0 h1:7cYmW1XlMY7h7ii7UhUyChSgS5wUJEnm9uZVTGqOWzg=
 github.com/golang-jwt/jwt/v4 v4.5.0/go.mod h1:m21LjoU+eqJr34lmDMbreY2eSTRJ1cv77w39/MY0Ch0=
 github.com/golang/protobuf v1.2.0/go.mod h1:6lQm79b+lXiMfvg/cZm0SGofjICqVBUtrP5yJMmIC1U=
-github.com/golang/protobuf v1.3.5/go.mod h1:6O5/vntMXwX2lRkT1hjjk0nAC1IDOTvTlVgjlRvqsdk=
 github.com/golang/protobuf v1.5.0/go.mod h1:FsONVRAS9T7sI+LIUmWTfcYkHO4aIWwzhcaSAoJOfIk=
 github.com/golang/protobuf v1.5.3 h1:KhyjKVUg7Usr/dYsdSqoFveMYd5ko72D+zANwlG1mmg=
 github.com/golang/protobuf v1.5.3/go.mod h1:XVQd3VNwM+JqD3oG2Ue2ip4fOMUkwXdXDdiuN0vRsmY=
@@ -14,21 +13,19 @@ github.com/google/go-cmp v0.5.5/go.mod h1:v8dTdLbMG2kIc/vJvl+f65V22dbkXbowE6jgT/
 github.com/google/go-cmp v0.5.9 h1:O2Tfq5qg4qc4AmwVlvv0oLiVAGB7enBSJ2x2DqQFi38=
 github.com/matttproud/golang_protobuf_extensions v1.0.4 h1:mmDVorXM7PCGKw94cs5zkfA9PSy5pEvNWRP0ET0TIVo=
 github.com/matttproud/golang_protobuf_extensions v1.0.4/go.mod h1:BSXmuO+STAnVfrANrmjBb36TMTDstsz7MSK+HVaYKv4=
-github.com/prometheus/client_golang v1.14.0 h1:nJdhIvne2eSX/XRAFV9PcvFFRbrjbcTUj0VP62TMhnw=
-github.com/prometheus/client_golang v1.14.0/go.mod h1:8vpkKitgIVNcqrRBWh1C4TIUQgYNtG/XQE4E/Zae36Y=
-github.com/prometheus/client_golang v1.15.1 h1:8tXpTmJbyH5lydzFPoxSIJ0J46jdh3tylbvM1xCv0LI=
-github.com/prometheus/client_golang v1.15.1/go.mod h1:e9yaBhRPU2pPNsZwE+JdQl0KEt1N9XgF6zxWmaC0xOk=
-github.com/prometheus/client_model v0.3.0 h1:UBgGFHqYdG/TPFD1B1ogZywDqEkwp3fBMvqdiQ7Xew4=
-github.com/prometheus/client_model v0.3.0/go.mod h1:LDGWKZIo7rky3hgvBe+caln+Dr3dPggB5dvjtD7w9+w=
-github.com/prometheus/common v0.42.0 h1:EKsfXEYo4JpWMHH5cg+KOUWeuJSov1Id8zGR8eeI1YM=
-github.com/prometheus/common v0.42.0/go.mod h1:xBwqVerjNdUDjgODMpudtOMwlOwf2SaTr1yjz4b7Zbc=
-github.com/prometheus/procfs v0.9.0 h1:wzCHvIvM5SxWqYvwgVL7yJY8Lz3PKn49KQtpgMYJfhI=
-github.com/prometheus/procfs v0.9.0/go.mod h1:+pB4zwohETzFnmlpe6yd2lSc+0/46IYZRB/chUwxUZY=
+github.com/prometheus/client_golang v1.16.0 h1:yk/hx9hDbrGHovbci4BY+pRMfSuuat626eFsHb7tmT8=
+github.com/prometheus/client_golang v1.16.0/go.mod h1:Zsulrv/L9oM40tJ7T815tM89lFEugiJ9HzIqaAx4LKc=
+github.com/prometheus/client_model v0.4.0 h1:5lQXD3cAg1OXBf4Wq03gTrXHeaV0TQvGfUooCfx1yqY=
+github.com/prometheus/client_model v0.4.0/go.mod h1:oMQmHW1/JoDwqLtg57MGgP/Fb1CJEYF2imWWhWtMkYU=
+github.com/prometheus/common v0.44.0 h1:+5BrQJwiBB9xsMygAB3TNvpQKOwlkc25LbISbrdOOfY=
+github.com/prometheus/common v0.44.0/go.mod h1:ofAIvZbQ1e/nugmZGz4/qCb9Ap1VoSTIO7x0VV9VvuY=
+github.com/prometheus/procfs v0.11.1 h1:xRC8Iq1yyca5ypa9n1EZnWZkt7dwcoRPQwX/5gwaUuI=
+github.com/prometheus/procfs v0.11.1/go.mod h1:eesXgaPo1q7lBpVMoMy0ZOFTth9hBn4W/y0/p/ScXhY=
 golang.org/x/sync v0.0.0-20181221193216-37e7f081c4d4/go.mod h1:RxMgew5VJxzue5/jJTE5uejpjVlOe/izrB70Jof72aM=
-golang.org/x/sys v0.6.0 h1:MVltZSvRTcU2ljQOhs94SXPftV6DCNnZViHeQps87pQ=
-golang.org/x/sys v0.6.0/go.mod h1:oPkhp1MJrh7nUepCBck5+mAzfO9JrbApNNgaTdGDITg=
+golang.org/x/sys v0.11.0 h1:eG7RXZHdqOJ1i+0lgLgCpSXAp6M3LYlAo6osgSi0xOM=
+golang.org/x/sys v0.11.0/go.mod h1:oPkhp1MJrh7nUepCBck5+mAzfO9JrbApNNgaTdGDITg=
 golang.org/x/xerrors v0.0.0-20191204190536-9bdfabe68543/go.mod h1:I/5z698sn9Ka8TeJc9MKroUUfqBBauWjQqLJ2OPfmY0=
 google.golang.org/protobuf v1.26.0-rc.1/go.mod h1:jlhhOSvTdKEhbULTjvd4ARK9grFBp09yW+WbY/TyQbw=
 google.golang.org/protobuf v1.26.0/go.mod h1:9q0QmTI4eRPtz6boOQmLYwt+qCgq0jsYwAQnmE0givc=
-google.golang.org/protobuf v1.30.0 h1:kPPoIgf3TsEvrm0PFe15JQ+570QVxYzEvvHqChK+cng=
-google.golang.org/protobuf v1.30.0/go.mod h1:HV8QOd/L58Z+nl8r43ehVNZIU/HEI6OcFqwMG9pJV4I=
+google.golang.org/protobuf v1.31.0 h1:g0LDEJHgrBl9N9r17Ru3sqWhkIx2NB67okBHPwC7hs8=
+google.golang.org/protobuf v1.31.0/go.mod h1:HV8QOd/L58Z+nl8r43ehVNZIU/HEI6OcFqwMG9pJV4I=
diff --git a/worker/go.mod b/worker/go.mod
index b71c97e5d..49b7783f1 100644
--- a/worker/go.mod
+++ b/worker/go.mod
@@ -4,18 +4,18 @@ go 1.19
 
 // Direct dependencies
 require (
-	github.com/getsentry/sentry-go v0.21.0
-	github.com/golang/protobuf v1.5.3
+	github.com/getsentry/sentry-go v0.23.0
+	github.com/golang/protobuf v1.5.3 // indirect
 	github.com/icza/gox v0.0.0-20230330130131-23e1aaac139e
 	github.com/iris-contrib/go.uuid v2.0.0+incompatible
 	github.com/joschahenningsen/thumbgen v0.1.2
 	github.com/robfig/cron/v3 v3.0.1
-	github.com/shirou/gopsutil/v3 v3.23.5
+	github.com/shirou/gopsutil/v3 v3.23.7
 	github.com/sirupsen/logrus v1.9.3
-	github.com/tidwall/gjson v1.14.4
-	golang.org/x/sync v0.2.0
-	google.golang.org/grpc v1.55.0
-	google.golang.org/protobuf v1.30.0
+	github.com/tidwall/gjson v1.16.0
+	golang.org/x/sync v0.3.0
+	google.golang.org/grpc v1.57.0
+	google.golang.org/protobuf v1.31.0
 )
 
 require (
@@ -25,26 +25,26 @@ require (
 
 // Indirect dependencies
 require (
-	github.com/go-ole/go-ole v1.2.6 // indirect
+	github.com/go-ole/go-ole v1.3.0 // indirect
 	github.com/lufia/plan9stats v0.0.0-20230326075908-cb1d2100619a // indirect
 	github.com/power-devops/perfstat v0.0.0-20221212215047-62379fc7944b // indirect
 	github.com/rogpeppe/go-internal v1.8.1 // indirect
 	github.com/tidwall/match v1.1.1 // indirect
 	github.com/tidwall/pretty v1.2.1 // indirect
-	github.com/tklauser/go-sysconf v0.3.11 // indirect
-	github.com/tklauser/numcpus v0.6.0 // indirect
+	github.com/tklauser/go-sysconf v0.3.12 // indirect
+	github.com/tklauser/numcpus v0.6.1 // indirect
 	github.com/u2takey/go-utils v0.3.1
 	github.com/yusufpapurcu/wmi v1.2.3 // indirect
-	golang.org/x/net v0.9.0 // indirect
-	golang.org/x/sys v0.8.0 // indirect
-	golang.org/x/text v0.9.0 // indirect
-	google.golang.org/genproto v0.0.0-20230410155749-daa745c078e1 // indirect
+	golang.org/x/net v0.14.0 // indirect
+	golang.org/x/sys v0.11.0 // indirect
+	golang.org/x/text v0.12.0 // indirect
 )
 
 require (
 	github.com/felixge/fgprof v0.9.3 // indirect
-	github.com/google/pprof v0.0.0-20230406165453-00490a63f317 // indirect
+	github.com/google/pprof v0.0.0-20230811205829-9131a7e9cc17 // indirect
 	github.com/google/uuid v1.3.0 // indirect
 	github.com/shoenig/go-m1cpu v0.1.6 // indirect
-	golang.org/x/image v0.7.0 // indirect
+	golang.org/x/image v0.11.0 // indirect
+	google.golang.org/genproto/googleapis/rpc v0.0.0-20230814215434-ca7cfce7776a // indirect
 )
diff --git a/worker/go.sum b/worker/go.sum
index 5196c2a6e..0210eed1b 100644
--- a/worker/go.sum
+++ b/worker/go.sum
@@ -77,6 +77,7 @@ github.com/cpuguy83/go-md2man v1.0.10/go.mod h1:SmD6nW6nTyfqj6ABTjUi3V3JVMnlJmwc
 github.com/cpuguy83/go-md2man/v2 v2.0.0/go.mod h1:maD7wRr/U5Z6m/iR4s+kqSMx2CaBsrgA7czyZG/E6dU=
 github.com/creack/pty v1.1.9/go.mod h1:oKZEueFk5CKHvIhNR5MUki03XCEU+Q6VDXinZuGJ33E=
 github.com/davecgh/go-spew v1.1.0/go.mod h1:J7Y8YcW2NihsgmVo/mv3lAwl/skON4iLHjSsI+c5H38=
+github.com/davecgh/go-spew v1.1.1 h1:vj9j/u1bqnvCEfJOwUhtlOARqs3+rkHYY13jYWTU97c=
 github.com/davecgh/go-spew v1.1.1/go.mod h1:J7Y8YcW2NihsgmVo/mv3lAwl/skON4iLHjSsI+c5H38=
 github.com/dgraph-io/badger/v2 v2.2007.4/go.mod h1:vSw/ax2qojzbN6eXHIx6KPKtCSHJN/Uz0X0VPruTIhk=
 github.com/dgraph-io/ristretto v0.0.3-0.20200630154024-f66de99634de/go.mod h1:KPxhHT9ZxKefz+PCeOGsrHpl1qZ7i70dGTu2u+Ahh6E=
@@ -101,21 +102,21 @@ github.com/fsnotify/fsnotify v1.4.7/go.mod h1:jwhsz4b93w/PPRr/qN1Yymfu8t87LnFCMo
 github.com/fsnotify/fsnotify v1.4.9/go.mod h1:znqG4EE+3YCdAaPaxE2ZRY/06pZUdp0tY4IgpuI1SZQ=
 github.com/fsnotify/fsnotify v1.5.4/go.mod h1:OVB6XrOHzAwXMpEM7uPOzcehqUV2UqJxmVXmkdnm1bU=
 github.com/getsentry/sentry-go v0.17.0/go.mod h1:B82dxtBvxG0KaPD8/hfSV+VcHD+Lg/xUS4JuQn1P4cM=
-github.com/getsentry/sentry-go v0.20.0 h1:bwXW98iMRIWxn+4FgPW7vMrjmbym6HblXALmhjHmQaQ=
-github.com/getsentry/sentry-go v0.20.0/go.mod h1:lc76E2QywIyW8WuBnwl8Lc4bkmQH4+w1gwTf25trprY=
-github.com/getsentry/sentry-go v0.21.0 h1:c9l5F1nPF30JIppulk4veau90PK6Smu3abgVtVQWon4=
-github.com/getsentry/sentry-go v0.21.0/go.mod h1:lc76E2QywIyW8WuBnwl8Lc4bkmQH4+w1gwTf25trprY=
+github.com/getsentry/sentry-go v0.23.0 h1:dn+QRCeJv4pPt9OjVXiMcGIBIefaTJPw/h0bZWO05nE=
+github.com/getsentry/sentry-go v0.23.0/go.mod h1:lc76E2QywIyW8WuBnwl8Lc4bkmQH4+w1gwTf25trprY=
 github.com/ghodss/yaml v1.0.0/go.mod h1:4dBDuWmgqj2HViK6kFavaiC9ZROes6MMH2rRYeMEF04=
 github.com/gin-contrib/sse v0.1.0/go.mod h1:RHrZQHXnP2xjPF+u1gW/2HnVO7nvIa9PG3Gm+fLHvGI=
 github.com/gin-gonic/gin v1.8.1/go.mod h1:ji8BvRH1azfM+SYow9zQ6SZMvR8qOMZHmsCuWR9tTTk=
+github.com/go-errors/errors v1.4.2 h1:J6MZopCL4uSllY1OfXM374weqZFFItUbrImctkmUxIA=
 github.com/go-errors/errors v1.4.2/go.mod h1:sIVyrIiJhuEF+Pj9Ebtd6P/rEYROXFi3BopGUQ5a5Og=
 github.com/go-gl/glfw v0.0.0-20190409004039-e6da0acd62b1/go.mod h1:vR7hzQXu2zJy9AVAgeJqvqgH9Q5CA+iKCZ2gyEVpxRU=
 github.com/go-gl/glfw/v3.3/glfw v0.0.0-20191125211704-12ad95a8df72/go.mod h1:tQ2UAYgL5IevRw8kRxooKSPJfGvJ9fJQFa0TUsXzTg8=
 github.com/go-gl/glfw/v3.3/glfw v0.0.0-20200222043503-6f7a984d4dc4/go.mod h1:tQ2UAYgL5IevRw8kRxooKSPJfGvJ9fJQFa0TUsXzTg8=
 github.com/go-logr/logr v0.1.0/go.mod h1:ixOQHD9gLJUVQQ2ZOR7zLEifBX6tGkNJF4QyIY7sIas=
 github.com/go-martini/martini v0.0.0-20170121215854-22fa46961aab/go.mod h1:/P9AEU963A2AYjv4d1V5eVL1CQbEJq6aCNHDDjibzu8=
-github.com/go-ole/go-ole v1.2.6 h1:/Fpf6oFPoeFik9ty7siob0G6Ke8QvQEuVcuChpwXzpY=
 github.com/go-ole/go-ole v1.2.6/go.mod h1:pprOEPIfldk/42T2oK7lQ4v4JSDwmV0As9GaiUsvbm0=
+github.com/go-ole/go-ole v1.3.0 h1:Dt6ye7+vXGIKZ7Xtk4s6/xVdGDQynvom7xCFEdWr6uE=
+github.com/go-ole/go-ole v1.3.0/go.mod h1:5LS6F96DhAwUc7C+1HLexzMXY1xGRSryjyPPKW6zv78=
 github.com/go-playground/assert/v2 v2.0.1/go.mod h1:VDjEfimB/XKnb+ZQfWdccd7VUvScMdVu0Titje2rxJ4=
 github.com/go-playground/locales v0.14.0/go.mod h1:sawfccIbzZTqEDETgFXqTho0QybSa7l++s0DH+LDiLs=
 github.com/go-playground/universal-translator v0.18.0/go.mod h1:UvRDBj+xPUEGrFYl+lu/H90nyDXpg0fqeB/AQUGNTVA=
@@ -180,6 +181,7 @@ github.com/google/go-cmp v0.5.4/go.mod h1:v8dTdLbMG2kIc/vJvl+f65V22dbkXbowE6jgT/
 github.com/google/go-cmp v0.5.5/go.mod h1:v8dTdLbMG2kIc/vJvl+f65V22dbkXbowE6jgT/gNBxE=
 github.com/google/go-cmp v0.5.6/go.mod h1:v8dTdLbMG2kIc/vJvl+f65V22dbkXbowE6jgT/gNBxE=
 github.com/google/go-cmp v0.5.8/go.mod h1:17dUlkBOakJ0+DkrSSNjCkIjxS6bF9zb3elmeNGIjoY=
+github.com/google/go-cmp v0.5.9 h1:O2Tfq5qg4qc4AmwVlvv0oLiVAGB7enBSJ2x2DqQFi38=
 github.com/google/go-cmp v0.5.9/go.mod h1:17dUlkBOakJ0+DkrSSNjCkIjxS6bF9zb3elmeNGIjoY=
 github.com/google/go-querystring v1.1.0/go.mod h1:Kcdr2DB4koayq7X8pmAG4sNG59So17icRSOU623lUBU=
 github.com/google/gofuzz v1.0.0/go.mod h1:dBl0BpW6vV/+mYPU4Po3pmUjxk6FQPldtuIdl/M65Eg=
@@ -199,8 +201,8 @@ github.com/google/pprof v0.0.0-20210122040257-d980be63207e/go.mod h1:kpwsk12EmLe
 github.com/google/pprof v0.0.0-20210226084205-cbba55b83ad5/go.mod h1:kpwsk12EmLew5upagYY7GY0pfYCcupk39gWOCRROcvE=
 github.com/google/pprof v0.0.0-20210407192527-94a9f03dee38/go.mod h1:kpwsk12EmLew5upagYY7GY0pfYCcupk39gWOCRROcvE=
 github.com/google/pprof v0.0.0-20211214055906-6f57359322fd/go.mod h1:KgnwoLYCZ8IQu3XUZ8Nc/bM9CCZFOyjUNOSygVozoDg=
-github.com/google/pprof v0.0.0-20230406165453-00490a63f317 h1:hFhpt7CTmR3DX+b4R19ydQFtofxT0Sv3QsKNMVQYTMQ=
-github.com/google/pprof v0.0.0-20230406165453-00490a63f317/go.mod h1:79YE0hCXdHag9sBkw2o+N/YnZtTkXi0UT9Nnixa5eYk=
+github.com/google/pprof v0.0.0-20230811205829-9131a7e9cc17 h1:0h35ESZ02+hN/MFZb7XZOXg+Rl9+Rk8fBIf5YLws9gA=
+github.com/google/pprof v0.0.0-20230811205829-9131a7e9cc17/go.mod h1:Jh3hGz2jkYak8qXPD19ryItVnUgpgeqzdkY/D0EaeuA=
 github.com/google/renameio v0.1.0/go.mod h1:KWCgfxg9yswjAJkECMjeO8J8rahYeXnNhOm40UhjYkI=
 github.com/google/uuid v1.1.1/go.mod h1:TIyPZe4MgqvfeYDBFedMoGGpEw/LqOeaOT+nhxU+yHo=
 github.com/google/uuid v1.1.2/go.mod h1:TIyPZe4MgqvfeYDBFedMoGGpEw/LqOeaOT+nhxU+yHo=
@@ -248,8 +250,6 @@ github.com/iris-contrib/go.uuid v2.0.0+incompatible/go.mod h1:iz2lgM/1UnEf1kP0L/
 github.com/iris-contrib/httpexpect/v2 v2.3.1/go.mod h1:ICTf89VBKSD3KB0fsyyHviKF8G8hyepP0dOXJPWz3T0=
 github.com/iris-contrib/jade v1.1.4/go.mod h1:EDqR+ur9piDl6DUgs6qRrlfzmlx/D5UybogqrXvJTBE=
 github.com/iris-contrib/schema v0.0.6/go.mod h1:iYszG0IOsuIsfzjymw1kMzTL8YQcCWlm65f3wX8J5iA=
-github.com/joschahenningsen/thumbgen v0.1.0 h1:b1rUJMehAqOOQn9ddXDspQjZMyMdAr4Q5Tfauqcggb4=
-github.com/joschahenningsen/thumbgen v0.1.0/go.mod h1:hDdskl5krAITxwonQmwnLzoWP/jxB4P3sOZ6+E/rvVg=
 github.com/joschahenningsen/thumbgen v0.1.2 h1:sHIxmvZkuPaiiCjRvKcFNqTmH5IN4kiQiVt+wpAPC8A=
 github.com/joschahenningsen/thumbgen v0.1.2/go.mod h1:h8bDlQ2Bq3U/I/VlN8IRA48P7tHW8SHChVXmUWrG3bU=
 github.com/josharian/intern v1.0.0/go.mod h1:5DoeVV0s6jJacbCEi61lwdGj/aVlrQvzHFFd8Hwg//Y=
@@ -280,9 +280,11 @@ github.com/klauspost/compress v1.15.11/go.mod h1:QPwzmACJjUTFsnSHH934V6woptycfrD
 github.com/kr/fs v0.1.0/go.mod h1:FFnZGqtBN9Gxj7eW1uZ42v5BccTP0vu6NEaFoC2HwRg=
 github.com/kr/pretty v0.1.0/go.mod h1:dAy3ld7l9f0ibDNOQOHHMYYIIbhfbHSm3C4ZsoJORNo=
 github.com/kr/pretty v0.2.1/go.mod h1:ipq/a2n7PKx3OHsz4KJII5eveXtPO4qwEXGdVfWzfnI=
+github.com/kr/pretty v0.3.0 h1:WgNl7dwNpEZ6jJ9k1snq4pZsg7DOEN8hP9Xw0Tsjwk0=
 github.com/kr/pretty v0.3.0/go.mod h1:640gp4NfQd8pI5XOwp5fnNeVWj67G7CFk/SaSQn7NBk=
 github.com/kr/pty v1.1.1/go.mod h1:pFQYn66WHrOpPYNljwOMqo10TkYh1fy3cYio2l3bCsQ=
 github.com/kr/text v0.1.0/go.mod h1:4Jbv+DJW3UT/LiOwJeYQe1efqtUx/iVham/4vfdArNI=
+github.com/kr/text v0.2.0 h1:5Nx0Ya0ZqY2ygV366QzturHI13Jq95ApcVaJBhpS+AY=
 github.com/kr/text v0.2.0/go.mod h1:eLer722TekiGuMkidMxC/pM04lWEeraHUUmBw8l2grE=
 github.com/labstack/echo/v4 v4.9.0/go.mod h1:xkCDAdFCIf8jsFQ5NnbK7oqaF/yU1A1X20Ltm0OvSks=
 github.com/labstack/gommon v0.3.1/go.mod h1:uW6kP17uPlLJsD3ijUYn3/M5bAxtlZhMI6m3MFxTMTM=
@@ -350,13 +352,16 @@ github.com/pelletier/go-toml v1.2.0/go.mod h1:5z9KED0ma1S8pY6P1sdut58dfprrGBbd/9
 github.com/pelletier/go-toml v1.9.3/go.mod h1:u1nR/EPcESfeI/szUZKdtJ0xRNbUoANCkoOuaOx1Y+c=
 github.com/pelletier/go-toml/v2 v2.0.1/go.mod h1:r9LEWfGN8R5k0VXJ+0BkIe7MYkRdwZOjgMj2KwnJFUo=
 github.com/pelletier/go-toml/v2 v2.0.5/go.mod h1:OMHamSCAODeSsVrwwvcJOaoN0LIUIaFVNZzmWyNfXas=
+github.com/pingcap/errors v0.11.4 h1:lFuQV/oaUMGcD2tqt+01ROSmJs75VG1ToEOkZIZ4nE4=
 github.com/pingcap/errors v0.11.4/go.mod h1:Oi8TUi2kEtXXLMJk9l1cGmz20kV3TaQ0usTwv5KuLY8=
 github.com/pkg/diff v0.0.0-20210226163009-20ebb0f2a09e/go.mod h1:pJLUxLENpZxwdsKMEsNbx1VGcRFpLqf3715MtcvvzbA=
 github.com/pkg/errors v0.8.1/go.mod h1:bwawxfHBFNV+L2hUp1rHADufV3IMtnDRdf1r5NINEl0=
+github.com/pkg/errors v0.9.1 h1:FEBLx1zS214owpjy7qsBeixbURkuhQAwrK5UwLGTwt4=
 github.com/pkg/errors v0.9.1/go.mod h1:bwawxfHBFNV+L2hUp1rHADufV3IMtnDRdf1r5NINEl0=
 github.com/pkg/profile v1.7.0 h1:hnbDkaNWPCLMO9wGLdBFTIZvzDrDfBM2072E1S9gJkA=
 github.com/pkg/profile v1.7.0/go.mod h1:8Uer0jas47ZQMJ7VD+OHknK4YDY07LPUC6dEvqDjvNo=
 github.com/pkg/sftp v1.10.1/go.mod h1:lYOWFsE0bwd1+KfKJaKeuokY15vzFx25BLbzYYoAxZI=
+github.com/pmezard/go-difflib v1.0.0 h1:4DBwDE0NGyQoBHbLQYPwSUPoCMWR5BEzIk/f1lZbAQM=
 github.com/pmezard/go-difflib v1.0.0/go.mod h1:iKH77koFhYxTK1pcRnkKkqfTogsbg7gZNVY4sRDYZ/4=
 github.com/posener/complete v1.1.1/go.mod h1:em0nMJCgc9GFtwrmVmEMR/ZL6WyhyjMBndrE9hABlRI=
 github.com/power-devops/perfstat v0.0.0-20210106213030-5aafc221ea8c/go.mod h1:OmDBASR4679mdNQnz2pUhc2G8CO2JrUAVFDRBDP/hJE=
@@ -369,6 +374,7 @@ github.com/rogpeppe/fastuuid v1.2.0/go.mod h1:jVj6XXZzXRy/MSR5jhDC/2q6DgLz+nrA6L
 github.com/rogpeppe/go-internal v1.3.0/go.mod h1:M8bDsm7K2OlrFYOpmOWEs/qY81heoFRclV5y23lUDJ4=
 github.com/rogpeppe/go-internal v1.6.1/go.mod h1:xXDCJY+GAPziupqXw64V24skbSoqbTEfhy4qGm1nDQc=
 github.com/rogpeppe/go-internal v1.8.0/go.mod h1:WmiCO8CzOY8rg0OYDC4/i/2WRWAB6poM+XZ2dLUbcbE=
+github.com/rogpeppe/go-internal v1.8.1 h1:geMPLpDpQOgVyCg5z5GoRwLHepNdb71NXb67XFkP+Eg=
 github.com/rogpeppe/go-internal v1.8.1/go.mod h1:JeRgkft04UBgHMgCIwADu4Pn6Mtm5d4nPKWu0nJ5d+o=
 github.com/russross/blackfriday v1.5.2/go.mod h1:JO/DiYxRf+HjHt06OyowR9PTA263kcR/rfWxYHBV53g=
 github.com/russross/blackfriday/v2 v2.0.1/go.mod h1:+Rmxgy9KzJVeS9/2gXHxylqXiyQDYRxCVz55jmeOWTM=
@@ -378,25 +384,17 @@ github.com/schollz/closestmatch v2.1.0+incompatible/go.mod h1:RtP1ddjLong6gTkbtm
 github.com/sean-/seed v0.0.0-20170313163322-e2103e2c3529/go.mod h1:DxrIzT+xaE7yg65j358z/aeFdxmN0P9QXhEzd20vsDc=
 github.com/sergi/go-diff v1.2.0/go.mod h1:STckp+ISIX8hZLjrqAeVduY0gWCT9IjLuqbuNXdaHfM=
 github.com/shirou/gopsutil/v3 v3.22.8/go.mod h1:s648gW4IywYzUfE/KjXxUsqrqx/T2xO5VqOXxONeRfI=
-github.com/shirou/gopsutil/v3 v3.23.3 h1:Syt5vVZXUDXPEXpIBt5ziWsJ4LdSAAxF4l/xZeQgSEE=
-github.com/shirou/gopsutil/v3 v3.23.3/go.mod h1:lSBNN6t3+D6W5e5nXTxc8KIMMVxAcS+6IJlffjRRlMU=
-github.com/shirou/gopsutil/v3 v3.23.4 h1:hZwmDxZs7Ewt75DV81r4pFMqbq+di2cbt9FsQBqLD2o=
-github.com/shirou/gopsutil/v3 v3.23.4/go.mod h1:ZcGxyfzAMRevhUR2+cfhXDH6gQdFYE/t8j1nsU4mPI8=
-github.com/shirou/gopsutil/v3 v3.23.5 h1:5SgDCeQ0KW0S4N0znjeM/eFHXXOKyv2dVNgRq/c9P6Y=
-github.com/shirou/gopsutil/v3 v3.23.5/go.mod h1:Ng3Maa27Q2KARVJ0SPZF5NdrQSC3XHKP8IIWrHgMeLY=
-github.com/shoenig/go-m1cpu v0.1.4/go.mod h1:Wwvst4LR89UxjeFtLRMrpgRiyY4xPsejnVZym39dbAQ=
-github.com/shoenig/go-m1cpu v0.1.5 h1:LF57Z/Fpb/WdGLjt2HZilNnmZOxg/q2bSKTQhgbrLrQ=
-github.com/shoenig/go-m1cpu v0.1.5/go.mod h1:Wwvst4LR89UxjeFtLRMrpgRiyY4xPsejnVZym39dbAQ=
+github.com/shirou/gopsutil/v3 v3.23.7 h1:C+fHO8hfIppoJ1WdsVm1RoI0RwXoNdfTK7yWXV0wVj4=
+github.com/shirou/gopsutil/v3 v3.23.7/go.mod h1:c4gnmoRC0hQuaLqvxnx1//VXQ0Ms/X9UnJF8pddY5z4=
 github.com/shoenig/go-m1cpu v0.1.6 h1:nxdKQNcEB6vzgA2E2bvzKIYRuNj7XNJ4S/aRSwKzFtM=
 github.com/shoenig/go-m1cpu v0.1.6/go.mod h1:1JJMcUBvfNwpq05QDQVAnx3gUHr9IYF7GNg9SUEw2VQ=
-github.com/shoenig/test v0.6.3/go.mod h1:byHiCGXqrVaflBLAMq/srcZIHynQPQgeyvkvXnjqq0k=
+github.com/shoenig/test v0.6.4 h1:kVTaSd7WLz5WZ2IaoM0RSzRsUD+m8wRR+5qvntpn4LU=
 github.com/shoenig/test v0.6.4/go.mod h1:byHiCGXqrVaflBLAMq/srcZIHynQPQgeyvkvXnjqq0k=
 github.com/shurcooL/go v0.0.0-20200502201357-93f07166e636/go.mod h1:TDJrrUr11Vxrven61rcy3hJMUqaf/CLWYhHNPmT14Lk=
 github.com/shurcooL/httpfs v0.0.0-20190707220628-8d4bc4ba7749/go.mod h1:ZY1cvUeJuFPAdZ/B6v7RHavJWZn2YPVFQ1OSXhCGOkg=
 github.com/shurcooL/sanitized_anchor_name v1.0.0/go.mod h1:1NzhyTcUVG4SuEtjjoZeVRXNmyL/1OwPU0+IJeTBvfc=
 github.com/shurcooL/vfsgen v0.0.0-20200824052919-0d455de96546/go.mod h1:TrYk7fJVaAttu97ZZKrO9UbRa8izdowaMIZcxYMbVaw=
 github.com/sirupsen/logrus v1.8.1/go.mod h1:yWOB1SBYBC5VeMP7gHvWumXLIWorT60ONWic61uBYv0=
-github.com/sirupsen/logrus v1.9.0 h1:trlNQbNUG3OdDrDil03MCb1H2o9nJ1x4/5LYw7byDE0=
 github.com/sirupsen/logrus v1.9.0/go.mod h1:naHLuLoDiP4jHNo9R0sCBMtWGeIprob74mVsIT4qYEQ=
 github.com/sirupsen/logrus v1.9.3 h1:dueUQJ1C2q9oE3F7wvmSGAaVtTmUizReu6fjN8uqzbQ=
 github.com/sirupsen/logrus v1.9.3/go.mod h1:naHLuLoDiP4jHNo9R0sCBMtWGeIprob74mVsIT4qYEQ=
@@ -432,27 +430,29 @@ github.com/stretchr/testify v1.6.1/go.mod h1:6Fq8oRcR53rry900zMqJjRRixrwX3KX962/
 github.com/stretchr/testify v1.7.0/go.mod h1:6Fq8oRcR53rry900zMqJjRRixrwX3KX962/h/Wwjteg=
 github.com/stretchr/testify v1.7.1/go.mod h1:6Fq8oRcR53rry900zMqJjRRixrwX3KX962/h/Wwjteg=
 github.com/stretchr/testify v1.8.0/go.mod h1:yNjHg4UonilssWZ8iaSj1OCr/vHnekPRkoO+kdMU+MU=
-github.com/stretchr/testify v1.8.2/go.mod h1:w2LPCIKwWwSfY2zedu0+kehJoqGctiVI29o6fzry7u4=
-github.com/stretchr/testify v1.8.3/go.mod h1:sz/lmYIOXD/1dqDmKjjqLyZ2RngseejIcXlSw2iwfAo=
+github.com/stretchr/testify v1.8.4 h1:CcVxjf3Q8PM0mHUKJCdn+eZZtm5yQwehR5yeSVQQcUk=
+github.com/stretchr/testify v1.8.4/go.mod h1:sz/lmYIOXD/1dqDmKjjqLyZ2RngseejIcXlSw2iwfAo=
 github.com/subosito/gotenv v1.2.0/go.mod h1:N0PQaV/YGNqwC0u51sEeR/aUtSLEXKX9iv69rRypqCw=
 github.com/tdewolff/minify/v2 v2.12.1/go.mod h1:p5pwbvNs1ghbFED/ZW1towGsnnWwzvM8iz8l0eURi9g=
 github.com/tdewolff/minify/v2 v2.12.4/go.mod h1:h+SRvSIX3kwgwTFOpSckvSxgax3uy8kZTSF1Ojrr3bk=
 github.com/tdewolff/parse/v2 v2.6.3/go.mod h1:woz0cgbLwFdtbjJu8PIKxhW05KplTFQkOdX78o+Jgrs=
 github.com/tdewolff/parse/v2 v2.6.4/go.mod h1:woz0cgbLwFdtbjJu8PIKxhW05KplTFQkOdX78o+Jgrs=
 github.com/tdewolff/test v1.0.7/go.mod h1:6DAvZliBAAnD7rhVgwaM7DE5/d9NMOAJ09SqYqeK4QE=
-github.com/tidwall/gjson v1.14.4 h1:uo0p8EbA09J7RQaflQ1aBRffTR7xedD2bcIVSYxLnkM=
-github.com/tidwall/gjson v1.14.4/go.mod h1:/wbyibRr2FHMks5tjHJ5F8dMZh3AcwJEMf5vlfC0lxk=
+github.com/tidwall/gjson v1.16.0 h1:SyXa+dsSPpUlcwEDuKuEBJEz5vzTvOea+9rjyYodQFg=
+github.com/tidwall/gjson v1.16.0/go.mod h1:/wbyibRr2FHMks5tjHJ5F8dMZh3AcwJEMf5vlfC0lxk=
 github.com/tidwall/match v1.1.1 h1:+Ho715JplO36QYgwN9PGYNhgZvoUSc9X2c80KVTi+GA=
 github.com/tidwall/match v1.1.1/go.mod h1:eRSPERbgtNPcGhD8UCthc6PmLEQXEWd3PRB5JTxsfmM=
 github.com/tidwall/pretty v1.2.0/go.mod h1:ITEVvHYasfjBbM0u2Pg8T2nJnzm8xPwvNhhsoaGGjNU=
 github.com/tidwall/pretty v1.2.1 h1:qjsOFOWWQl+N3RsoF5/ssm1pHmJJwhjlSbZ51I6wMl4=
 github.com/tidwall/pretty v1.2.1/go.mod h1:ITEVvHYasfjBbM0u2Pg8T2nJnzm8xPwvNhhsoaGGjNU=
 github.com/tklauser/go-sysconf v0.3.10/go.mod h1:C8XykCvCb+Gn0oNCWPIlcb0RuglQTYaQ2hGm7jmxEFk=
-github.com/tklauser/go-sysconf v0.3.11 h1:89WgdJhk5SNwJfu+GKyYveZ4IaJ7xAkecBo+KdJV0CM=
 github.com/tklauser/go-sysconf v0.3.11/go.mod h1:GqXfhXY3kiPa0nAXPDIQIWzJbMCB7AmcWpGR8lSZfqI=
+github.com/tklauser/go-sysconf v0.3.12 h1:0QaGUFOdQaIVdPgfITYzaTegZvdCjmYO52cSFAEVmqU=
+github.com/tklauser/go-sysconf v0.3.12/go.mod h1:Ho14jnntGE1fpdOqQEEaiKRpvIavV0hSfmBq8nJbHYI=
 github.com/tklauser/numcpus v0.4.0/go.mod h1:1+UI3pD8NW14VMwdgJNJ1ESk2UnwhAnz5hMwiKKqXCQ=
-github.com/tklauser/numcpus v0.6.0 h1:kebhY2Qt+3U6RNK7UqpYNA+tJ23IBEGKkB7JQBfDYms=
 github.com/tklauser/numcpus v0.6.0/go.mod h1:FEZLMke0lhOUG6w2JadTzp0a+Nl8PF/GFkQ5UVIcaL4=
+github.com/tklauser/numcpus v0.6.1 h1:ng9scYS7az0Bk4OZLvrNXNSAO2Pxr1XXRAPyjhIx+Fk=
+github.com/tklauser/numcpus v0.6.1/go.mod h1:1XfjsgE2zo8GVw7POkMbHENHzVg3GzmoZ9fESEdAacY=
 github.com/u2takey/go-utils v0.3.1 h1:TaQTgmEZZeDHQFYfd+AdUT1cT4QJgJn/XVPELhHw4ys=
 github.com/u2takey/go-utils v0.3.1/go.mod h1:6e+v5vEZ/6gu12w/DC2ixZdZtCrNokVxD0JUklcqdCs=
 github.com/ugorji/go v1.2.7/go.mod h1:nF9osbDWLy6bDVv/Rtoh6QgnvNDpmCalQV5urGCCS6M=
@@ -480,7 +480,6 @@ github.com/yuin/goldmark v1.1.32/go.mod h1:3hX8gzYuyVAZsxl0MRgGTJEmQBFcNTphYh9de
 github.com/yuin/goldmark v1.2.1/go.mod h1:3hX8gzYuyVAZsxl0MRgGTJEmQBFcNTphYh9decYSb74=
 github.com/yuin/goldmark v1.3.5/go.mod h1:mwnBkeHKe2W/ZEtQ+71ViKU8L12m81fl3OWwC1Zlc8k=
 github.com/yuin/goldmark v1.4.13/go.mod h1:6yULJ656Px+3vBD8DxQVa3kxgyrAnzto9xy5taEt/CY=
-github.com/yusufpapurcu/wmi v1.2.2 h1:KBNDSne4vP5mbSWnJbO+51IMOXJB67QiYCSBrubbPRg=
 github.com/yusufpapurcu/wmi v1.2.2/go.mod h1:SBZ9tNy3G9/m5Oi98Zks0QjeHVDvuK0qfxQmPyzfmi0=
 github.com/yusufpapurcu/wmi v1.2.3 h1:E1ctvB7uKFMOJw3fdOW32DwGE9I7t++CRUEMKvFoFiw=
 github.com/yusufpapurcu/wmi v1.2.3/go.mod h1:SBZ9tNy3G9/m5Oi98Zks0QjeHVDvuK0qfxQmPyzfmi0=
@@ -527,8 +526,8 @@ golang.org/x/exp v0.0.0-20200207192155-f17229e696bd/go.mod h1:J/WKrq2StrnmMY6+EH
 golang.org/x/exp v0.0.0-20200224162631-6cc2880d07d6/go.mod h1:3jZMyOhIsHpP37uCMkUooju7aAi5cS1Q23tOzKc+0MU=
 golang.org/x/image v0.0.0-20190227222117-0694c2d4d067/go.mod h1:kZ7UVZpmo3dzQBMxlp+ypCbDeSB+sBbTgSJuh5dn5js=
 golang.org/x/image v0.0.0-20190802002840-cff245a6509b/go.mod h1:FeLwcggjj3mMvU+oOTbSwawSJRM1uh48EjtB4UJZlP0=
-golang.org/x/image v0.7.0 h1:gzS29xtG1J5ybQlv0PuyfE3nmc6R4qB73m6LUUmvFuw=
-golang.org/x/image v0.7.0/go.mod h1:nd/q4ef1AKKYl/4kft7g+6UyGbdiqWqTP1ZAbRoV7Rg=
+golang.org/x/image v0.11.0 h1:ds2RoQvBvYTiJkwpSFDwCcDFNX7DqjL2WsUgTNk0Ooo=
+golang.org/x/image v0.11.0/go.mod h1:bglhjqbqVuEb9e9+eNR45Jfu7D+T4Qan+NhQk8Ck2P8=
 golang.org/x/lint v0.0.0-20181026193005-c67002cb31c3/go.mod h1:UVdnD1Gm6xHRNCYTkRU2/jEulfH38KcIWyp/GAMgvoE=
 golang.org/x/lint v0.0.0-20190227174305-5b3e6a55c961/go.mod h1:wehouNa3lNwaWXcvxsM5YxQ5yQlVC4a0KAMCusXpPoU=
 golang.org/x/lint v0.0.0-20190301231843-5614ed5bae6f/go.mod h1:UVdnD1Gm6xHRNCYTkRU2/jEulfH38KcIWyp/GAMgvoE=
@@ -603,8 +602,8 @@ golang.org/x/net v0.0.0-20220826154423-83b083e8dc8b/go.mod h1:YDH+HFinaLZZlnHAfS
 golang.org/x/net v0.0.0-20220909164309-bea034e7d591/go.mod h1:YDH+HFinaLZZlnHAfSS6ZXJJ9M9t4Dl22yv3iI2vPwk=
 golang.org/x/net v0.0.0-20221002022538-bcab6841153b/go.mod h1:YDH+HFinaLZZlnHAfSS6ZXJJ9M9t4Dl22yv3iI2vPwk=
 golang.org/x/net v0.6.0/go.mod h1:2Tu9+aMcznHK/AK1HMvgo6xiTLG5rD5rZLDS+rp2Bjs=
-golang.org/x/net v0.9.0 h1:aWJ/m6xSmxWBx+V0XRHTlrYrPG56jKsLdTFmsSsCzOM=
-golang.org/x/net v0.9.0/go.mod h1:d48xBJpPfHeWQsugry2m+kC02ZBRGRgulfHnEXEuWns=
+golang.org/x/net v0.14.0 h1:BONx9s002vGdD9umnlX1Po8vOZmrgH34qlHcD1MfK14=
+golang.org/x/net v0.14.0/go.mod h1:PpSgVXXLK0OxS0F31C1/tv6XNguvCrnXIDrFMspZIUI=
 golang.org/x/oauth2 v0.0.0-20180821212333-d2e6202438be/go.mod h1:N/0e6XlmueqKjAGxoOufVs8QHGRruUQn6yWY3a++T0U=
 golang.org/x/oauth2 v0.0.0-20190226205417-e64efc72b421/go.mod h1:gOpvHmFTYa4IltrdGE7lF6nIHvwfUNPOp7c8zoXwtLw=
 golang.org/x/oauth2 v0.0.0-20190604053449-0f29369cfe45/go.mod h1:gOpvHmFTYa4IltrdGE7lF6nIHvwfUNPOp7c8zoXwtLw=
@@ -630,10 +629,9 @@ golang.org/x/sync v0.0.0-20201207232520-09787c993a3a/go.mod h1:RxMgew5VJxzue5/jJ
 golang.org/x/sync v0.0.0-20210220032951-036812b2e83c/go.mod h1:RxMgew5VJxzue5/jJTE5uejpjVlOe/izrB70Jof72aM=
 golang.org/x/sync v0.0.0-20220601150217-0de741cfad7f/go.mod h1:RxMgew5VJxzue5/jJTE5uejpjVlOe/izrB70Jof72aM=
 golang.org/x/sync v0.0.0-20220722155255-886fb9371eb4/go.mod h1:RxMgew5VJxzue5/jJTE5uejpjVlOe/izrB70Jof72aM=
-golang.org/x/sync v0.1.0 h1:wsuoTGHzEhffawBOhz5CYhcrV4IdKZbEyZjBMuTp12o=
 golang.org/x/sync v0.1.0/go.mod h1:RxMgew5VJxzue5/jJTE5uejpjVlOe/izrB70Jof72aM=
-golang.org/x/sync v0.2.0 h1:PUR+T4wwASmuSTYdKjYHI5TD22Wy5ogLU5qZCOLxBrI=
-golang.org/x/sync v0.2.0/go.mod h1:RxMgew5VJxzue5/jJTE5uejpjVlOe/izrB70Jof72aM=
+golang.org/x/sync v0.3.0 h1:ftCYgMx6zT/asHUrPw8BLLscYtGznsLAnjq5RH9P66E=
+golang.org/x/sync v0.3.0/go.mod h1:FU7BRWz2tNW+3quACPkgCx/L+uEAv1htQ0V83Z9Rj+Y=
 golang.org/x/sys v0.0.0-20180823144017-11551d06cbcc/go.mod h1:STP8DvDyc/dI5b8T5hshtkjS+E42TnysNCUPdjciGhY=
 golang.org/x/sys v0.0.0-20180830151530-49385e6e1522/go.mod h1:STP8DvDyc/dI5b8T5hshtkjS+E42TnysNCUPdjciGhY=
 golang.org/x/sys v0.0.0-20180909124046-d0be0721c37e/go.mod h1:STP8DvDyc/dI5b8T5hshtkjS+E42TnysNCUPdjciGhY=
@@ -707,14 +705,14 @@ golang.org/x/sys v0.0.0-20220728004956-3c1f35247d10/go.mod h1:oPkhp1MJrh7nUepCBc
 golang.org/x/sys v0.0.0-20220811171246-fbc7d0a398ab/go.mod h1:oPkhp1MJrh7nUepCBck5+mAzfO9JrbApNNgaTdGDITg=
 golang.org/x/sys v0.0.0-20220919091848-fb04ddd9f9c8/go.mod h1:oPkhp1MJrh7nUepCBck5+mAzfO9JrbApNNgaTdGDITg=
 golang.org/x/sys v0.0.0-20220928140112-f11e5e49a4ec/go.mod h1:oPkhp1MJrh7nUepCBck5+mAzfO9JrbApNNgaTdGDITg=
+golang.org/x/sys v0.1.0/go.mod h1:oPkhp1MJrh7nUepCBck5+mAzfO9JrbApNNgaTdGDITg=
 golang.org/x/sys v0.2.0/go.mod h1:oPkhp1MJrh7nUepCBck5+mAzfO9JrbApNNgaTdGDITg=
 golang.org/x/sys v0.4.0/go.mod h1:oPkhp1MJrh7nUepCBck5+mAzfO9JrbApNNgaTdGDITg=
 golang.org/x/sys v0.5.0/go.mod h1:oPkhp1MJrh7nUepCBck5+mAzfO9JrbApNNgaTdGDITg=
-golang.org/x/sys v0.6.0/go.mod h1:oPkhp1MJrh7nUepCBck5+mAzfO9JrbApNNgaTdGDITg=
-golang.org/x/sys v0.7.0 h1:3jlCCIQZPdOYu1h8BkNvLz8Kgwtae2cagcG/VamtZRU=
-golang.org/x/sys v0.7.0/go.mod h1:oPkhp1MJrh7nUepCBck5+mAzfO9JrbApNNgaTdGDITg=
-golang.org/x/sys v0.8.0 h1:EBmGv8NaZBZTWvrbjNoL6HVt+IVy3QDQpJs7VRIw3tU=
 golang.org/x/sys v0.8.0/go.mod h1:oPkhp1MJrh7nUepCBck5+mAzfO9JrbApNNgaTdGDITg=
+golang.org/x/sys v0.10.0/go.mod h1:oPkhp1MJrh7nUepCBck5+mAzfO9JrbApNNgaTdGDITg=
+golang.org/x/sys v0.11.0 h1:eG7RXZHdqOJ1i+0lgLgCpSXAp6M3LYlAo6osgSi0xOM=
+golang.org/x/sys v0.11.0/go.mod h1:oPkhp1MJrh7nUepCBck5+mAzfO9JrbApNNgaTdGDITg=
 golang.org/x/term v0.0.0-20201126162022-7de9c90e9dd1/go.mod h1:bj7SfCRtBDWHUb9snDiAeCFNEtKQo2Wmx5Cou7ajbmo=
 golang.org/x/term v0.0.0-20210927222741-03fcf44c2211/go.mod h1:jbD1KX2456YbFQfuXm/mYQcufACuNUgVhRMnK/tPxf8=
 golang.org/x/term v0.5.0/go.mod h1:jMB1sMXY+tzblOD4FWmEbocvup2/aLOaQEp7JmGp78k=
@@ -729,8 +727,8 @@ golang.org/x/text v0.3.6/go.mod h1:5Zoc/QRtKVWzQhOtBMvqHzDpF6irO9z98xDceosuGiQ=
 golang.org/x/text v0.3.7/go.mod h1:u+2+/6zg+i71rQMx5EYifcz6MCKuco9NR6JIITiCfzQ=
 golang.org/x/text v0.6.0/go.mod h1:mrYo+phRRbMaCq/xk9113O4dZlRixOauAjOtrjsXDZ8=
 golang.org/x/text v0.7.0/go.mod h1:mrYo+phRRbMaCq/xk9113O4dZlRixOauAjOtrjsXDZ8=
-golang.org/x/text v0.9.0 h1:2sjJmO8cDvYveuX97RDLsxlyUxLl+GHoLxBiRdHllBE=
-golang.org/x/text v0.9.0/go.mod h1:e1OnstbJyHTd6l/uOt8jFFHp6TRDWZR/bV3emEE/zU8=
+golang.org/x/text v0.12.0 h1:k+n5B8goJNdU7hSvEtMUz3d1Q6D/XW4COJSJR6fN0mc=
+golang.org/x/text v0.12.0/go.mod h1:TvPlkZtksWOMsz7fbANvkp4WM8x/WCo/om8BMLbz+aE=
 golang.org/x/time v0.0.0-20181108054448-85acf8d2951c/go.mod h1:tRJNPiyCQ0inRvYxbN9jk5I+vvW/OXSQhTDSoE431IQ=
 golang.org/x/time v0.0.0-20190308202827-9d24e82272b4/go.mod h1:tRJNPiyCQ0inRvYxbN9jk5I+vvW/OXSQhTDSoE431IQ=
 golang.org/x/time v0.0.0-20191024005414-555d28b269f0/go.mod h1:tRJNPiyCQ0inRvYxbN9jk5I+vvW/OXSQhTDSoE431IQ=
@@ -868,8 +866,8 @@ google.golang.org/genproto v0.0.0-20210310155132-4ce2db91004e/go.mod h1:FWY/as6D
 google.golang.org/genproto v0.0.0-20210319143718-93e7006c17a6/go.mod h1:FWY/as6DDZQgahTzZj3fqbO1CbirC29ZNUFHwi0/+no=
 google.golang.org/genproto v0.0.0-20210402141018-6c239bbf2bb1/go.mod h1:9lPAdzaEmUacj36I+k7YKbEc5CXzPIeORRgDAUOu28A=
 google.golang.org/genproto v0.0.0-20210602131652-f16073e35f0c/go.mod h1:UODoCrxHCcBojKKwX1terBiRUaqAsFqJiF615XL43r0=
-google.golang.org/genproto v0.0.0-20230410155749-daa745c078e1 h1:KpwkzHKEF7B9Zxg18WzOa7djJ+Ha5DzthMyZYQfEn2A=
-google.golang.org/genproto v0.0.0-20230410155749-daa745c078e1/go.mod h1:nKE/iIaLqn2bQwXBg8f1g2Ylh6r5MN5CmZvuzZCgsCU=
+google.golang.org/genproto/googleapis/rpc v0.0.0-20230814215434-ca7cfce7776a h1:5rTPHLf5eLPfqGvw3fLpEmUpko2Ky91ft14LxGs5BZc=
+google.golang.org/genproto/googleapis/rpc v0.0.0-20230814215434-ca7cfce7776a/go.mod h1:+Bk1OCOj40wS2hwAMA+aCW9ypzm63QTBBHp6lQ3p+9M=
 google.golang.org/grpc v1.19.0/go.mod h1:mqu4LbDTu4XGKhr4mRzUsmM4RtVoemTSY81AxZiDr8c=
 google.golang.org/grpc v1.20.1/go.mod h1:10oTOabMzJvdu6/UiuZezV6QK5dSlG84ov/aaiqXj38=
 google.golang.org/grpc v1.21.1/go.mod h1:oYelfM1adQP15Ek0mdvEgi9Df8B9CZIaU1084ijfRaM=
@@ -890,10 +888,8 @@ google.golang.org/grpc v1.35.0/go.mod h1:qjiiYl8FncCW8feJPdyg3v6XW24KsRHe+dy9BAG
 google.golang.org/grpc v1.36.0/go.mod h1:qjiiYl8FncCW8feJPdyg3v6XW24KsRHe+dy9BAGRRjU=
 google.golang.org/grpc v1.36.1/go.mod h1:qjiiYl8FncCW8feJPdyg3v6XW24KsRHe+dy9BAGRRjU=
 google.golang.org/grpc v1.38.0/go.mod h1:NREThFqKR1f3iQ6oBuvc5LadQuXVGo9rkm5ZGrQdJfM=
-google.golang.org/grpc v1.54.0 h1:EhTqbhiYeixwWQtAEZAxmV9MGqcjEU2mFx52xCzNyag=
-google.golang.org/grpc v1.54.0/go.mod h1:PUSEXI6iWghWaB6lXM4knEgpJNu2qUcKfDtNci3EC2g=
-google.golang.org/grpc v1.55.0 h1:3Oj82/tFSCeUrRTg/5E/7d/W5A1tj6Ky1ABAuZuv5ag=
-google.golang.org/grpc v1.55.0/go.mod h1:iYEXKGkEBhg1PjZQvoYEVPTDkHo1/bjTnfwTeGONTY8=
+google.golang.org/grpc v1.57.0 h1:kfzNeI/klCGD2YPMUlaGNT3pxvYfga7smW3Vth8Zsiw=
+google.golang.org/grpc v1.57.0/go.mod h1:Sd+9RMTACXwmub0zcNY2c4arhtrbBYD1AUHI/dt16Mo=
 google.golang.org/protobuf v0.0.0-20200109180630-ec00e32a8dfd/go.mod h1:DFci5gLYBciE7Vtevhsrf46CRTquxDuWsQurQQe4oz8=
 google.golang.org/protobuf v0.0.0-20200221191635-4d8936d0db64/go.mod h1:kwYJMbMJ01Woi6D6+Kah6886xMZcty6N08ah7+eCXa0=
 google.golang.org/protobuf v0.0.0-20200228230310-ab0ca4ff8a60/go.mod h1:cfTl7dwQJ+fmap5saPgwCLgHXTUD7jkjRqWcaiX5VyM=
@@ -908,12 +904,13 @@ google.golang.org/protobuf v1.26.0-rc.1/go.mod h1:jlhhOSvTdKEhbULTjvd4ARK9grFBp0
 google.golang.org/protobuf v1.26.0/go.mod h1:9q0QmTI4eRPtz6boOQmLYwt+qCgq0jsYwAQnmE0givc=
 google.golang.org/protobuf v1.28.0/go.mod h1:HV8QOd/L58Z+nl8r43ehVNZIU/HEI6OcFqwMG9pJV4I=
 google.golang.org/protobuf v1.28.1/go.mod h1:HV8QOd/L58Z+nl8r43ehVNZIU/HEI6OcFqwMG9pJV4I=
-google.golang.org/protobuf v1.30.0 h1:kPPoIgf3TsEvrm0PFe15JQ+570QVxYzEvvHqChK+cng=
-google.golang.org/protobuf v1.30.0/go.mod h1:HV8QOd/L58Z+nl8r43ehVNZIU/HEI6OcFqwMG9pJV4I=
+google.golang.org/protobuf v1.31.0 h1:g0LDEJHgrBl9N9r17Ru3sqWhkIx2NB67okBHPwC7hs8=
+google.golang.org/protobuf v1.31.0/go.mod h1:HV8QOd/L58Z+nl8r43ehVNZIU/HEI6OcFqwMG9pJV4I=
 gopkg.in/check.v1 v0.0.0-20161208181325-20d25e280405/go.mod h1:Co6ibVJAznAaIkqp8huTwlJQCZ016jof/cbN4VW5Yz0=
 gopkg.in/check.v1 v1.0.0-20180628173108-788fd7840127/go.mod h1:Co6ibVJAznAaIkqp8huTwlJQCZ016jof/cbN4VW5Yz0=
 gopkg.in/check.v1 v1.0.0-20190902080502-41f04d3bba15/go.mod h1:Co6ibVJAznAaIkqp8huTwlJQCZ016jof/cbN4VW5Yz0=
 gopkg.in/check.v1 v1.0.0-20200902074654-038fdea0a05b/go.mod h1:Co6ibVJAznAaIkqp8huTwlJQCZ016jof/cbN4VW5Yz0=
+gopkg.in/check.v1 v1.0.0-20201130134442-10cb98267c6c h1:Hei/4ADfdWqJk1ZMxUNpqntNwaWcugrBjAiHlqqRiVk=
 gopkg.in/check.v1 v1.0.0-20201130134442-10cb98267c6c/go.mod h1:JHkPIbrfpd72SG/EVd6muEfDQjcINNoR0C8j2r3qZ4Q=
 gopkg.in/errgo.v2 v2.1.0/go.mod h1:hNsd1EY+bozCKY1Ytp96fpM3vjJbqLJn88ws8XvfDNI=
 gopkg.in/fsnotify.v1 v1.4.7/go.mod h1:Tz8NjZHkW78fSQdbUxIjBTcgA1z1m8ZHf0WmKUhAMys=
@@ -929,6 +926,7 @@ gopkg.in/yaml.v2 v2.3.0/go.mod h1:hI93XBmqTisBFMUTm0b8Fm+jr3Dg1NNxqwp+5A1VGuI=
 gopkg.in/yaml.v2 v2.4.0/go.mod h1:RDklbk79AGWmwhnvt/jBztapEOGDOx6ZbXqjP6csGnQ=
 gopkg.in/yaml.v3 v3.0.0-20200313102051-9f266ea9e77c/go.mod h1:K4uyk7z7BCEPqu6E+C64Yfv1cQ7kz7rIZviUmN+EgEM=
 gopkg.in/yaml.v3 v3.0.0-20210107192922-496545a6307b/go.mod h1:K4uyk7z7BCEPqu6E+C64Yfv1cQ7kz7rIZviUmN+EgEM=
+gopkg.in/yaml.v3 v3.0.1 h1:fxVm/GzAzEWqLHuvctI91KS9hhNmmWOoWu0XTYJS7CA=
 gopkg.in/yaml.v3 v3.0.1/go.mod h1:K4uyk7z7BCEPqu6E+C64Yfv1cQ7kz7rIZviUmN+EgEM=
 honnef.co/go/tools v0.0.0-20190102054323-c2f93a96b099/go.mod h1:rf3lG4BRIbNafJWhAfAdb/ePZxsR/4RtNHQocxwk9r4=
 honnef.co/go/tools v0.0.0-20190106161140-3f1c8253044a/go.mod h1:rf3lG4BRIbNafJWhAfAdb/ePZxsR/4RtNHQocxwk9r4=

From 502d63b1a1897947ba213188fbaf829916784a96 Mon Sep 17 00:00:00 2001
From: Khadim Fall <khadimfall0602@gmail.com>
Date: Wed, 16 Aug 2023 08:10:02 +0200
Subject: [PATCH 04/31] Record from browser (#1068)

* add link to new lecture

* target blank

* :)

* prepared everthing for inpage recording

* nice record button

* video design

* responsive

* added select screen

* add start stop methods

* recording should work

* added play buttonc

* simplify colors

* controls working

* add data as a file

* make it work

* mute video preview

* added notices

* fix bug

* fix OnLastSlide :)
---
 .idea/runConfigurations/run_production.xml    |   1 -
 .../lecture-record-slide.gohtml               |  88 ++++++
 .../lecture-type-slide.gohtml                 |  23 +-
 .../course/manage/create-lecture-form.gohtml  |  26 +-
 web/ts/edit-course.ts                         | 263 ++++++++++++++++++
 5 files changed, 388 insertions(+), 13 deletions(-)
 create mode 100644 web/template/partial/course/manage/create-lecture-form-slides/lecture-record-slide.gohtml

diff --git a/.idea/runConfigurations/run_production.xml b/.idea/runConfigurations/run_production.xml
index 300ff0eee..2706ea143 100644
--- a/.idea/runConfigurations/run_production.xml
+++ b/.idea/runConfigurations/run_production.xml
@@ -1,7 +1,6 @@
 <component name="ProjectRunConfigurationManager">
   <configuration default="false" name="run-production" type="CompoundRunConfigurationType">
     <toRun name="run-tumlive-go" type="GoApplicationRunConfiguration" />
-    <toRun name="build" type="js.build_tools.npm" />
     <method v="2" />
   </configuration>
 </component>
\ No newline at end of file
diff --git a/web/template/partial/course/manage/create-lecture-form-slides/lecture-record-slide.gohtml b/web/template/partial/course/manage/create-lecture-form-slides/lecture-record-slide.gohtml
new file mode 100644
index 000000000..8d9c834e4
--- /dev/null
+++ b/web/template/partial/course/manage/create-lecture-form-slides/lecture-record-slide.gohtml
@@ -0,0 +1,88 @@
+{{define "lecture-record-slide"}}
+    <div
+            x-data="{
+                recorder: initRecorder($el)
+            }"
+    >
+        <div class="dark:bg-gray-800 dark:text-orange-300 border-l-4 border-orange-500 rounded text-orange-500 p-4 bg-orange-100 mt-2">
+            <p class="font-bold">Notice</p>
+            <p>Please keep in mind, this feature hasn't been fully tested yet. So, we recommend using it only for short recordings where you can easily redo them if anything goes wrong.</p>
+        </div>
+        <div class="flex flex-col justify-center mt-7 xl:flex-row">
+            <div
+                class="aspect-video xl:w-[47%] xl:mx-[1.5%] my-2 rounded relative max-xl:min-w-full cursor-pointer text-white overflow-hidden"
+                :class="recorder.screencastAvailable ? 'bg-black' : 'bg-black/30 dark:bg-black/20'"
+            >
+                <div
+                    x-show="!recorder.screencastAvailable"
+                    @click="() => recorder.selectScreencast($refs.screenDisplay)"
+                    class="flex justify-center flex-col items-center h-full"
+                >
+                    <i class="fa fa-desktop text-2xl mb-2"></i>
+                    <span class="block">
+                        Click to enable Screencast
+                    </span>
+                </div>
+
+                <video class="h-full w-full" x-ref="screenDisplay"></video>
+            </div>
+            <div
+                class="aspect-video xl:w-[47%] xl:mx-[1.5%] my-2 rounded relative max-xl:min-w-full cursor-pointer text-white overflow-hidden"
+                :class="recorder.cameraAvailable ? 'bg-black' : 'bg-black/30 dark:bg-black/20'"
+            >
+                <div
+                    x-show="!recorder.cameraAvailable"
+                    @click="() => recorder.selectCamera($refs.camDisplay)"
+                    class="flex justify-center flex-col items-center h-full"
+                >
+                    <i class="fa fa-camera text-2xl mb-2"></i>
+                    <span class="block">
+                        Click to enable Camera
+                    </span>
+                </div>
+
+                <video class="h-full w-full" x-ref="camDisplay"></video>
+            </div>
+        </div>
+
+        <div class="dark:text-gray-300 p-4 text-center">
+            <p>We kindly draw your attention to the fact that <b>voice recording functionality is dependent on the activation of your camera feed</b>.</p>
+        </div>
+
+        <div x-show="!recorder.recordingsReady" class="flex justify-center mt-7">
+            <button
+                @click.prevent="recorder.toggleRecording()"
+                class="rounded-full w-20 h-20 hover:scale-105 transition ease-in-out active:scale-90 active:bg-gray-600 flex justify-center items-center duration-100 disabled:opacity-20 disabled:scale-100 disabled:bg-gray-400"
+                :class="recorder.isRecording ? 'bg-gray-500' : 'bg-red-400'"
+                :disabled="recorder.retrieveRecording"
+            >
+                <div
+                    class="bg-white transition-all ease-in-out duration-100"
+                    :class="recorder.isRecording ? 'rounded w-7 h-7' : 'rounded-full w-5 h-5'"
+                ></div>
+            </button>
+        </div>
+
+        <div x-show="recorder.recordingsReady" class="flex justify-center mt-7">
+            <button
+                    @click.prevent="recorder.deleteRecordings()"
+                    class="rounded-full w-20 h-20 hover:scale-110 transition ease-in-out active:scale-90 flex justify-center items-center text-red-400 duration-100 disabled:opacity-20 disabled:scale-100"
+            >
+                <i class="fa fa-trash text-2xl"></i>
+            </button>
+            <button
+                @click.prevent="recorder.togglePlay()"
+                class="rounded-full w-20 h-20 hover:scale-105 transition ease-in-out bg-blue-400 active:scale-90 active:bg-gray-600 flex justify-center items-center duration-100 text-white disabled:opacity-20 disabled:scale-100 disabled:bg-gray-400"
+            >
+                <i x-show="!recorder.isPlaying" class="fa fa-play text-2xl"></i>
+                <i x-show="recorder.isPlaying" class="fa fa-pause text-2xl"></i>
+            </button>
+            <button
+                    @click.prevent="recorder.resetPlay()"
+                    class="rounded-full w-20 h-20 hover:scale-110 transition ease-in-out active:scale-90 flex justify-center items-center text-blue-400 duration-100 disabled:opacity-20 disabled:scale-100"
+            >
+                <i class="fa fa-stop text-2xl"></i>
+            </button>
+        </div>
+    </div>
+{{end}}
\ No newline at end of file
diff --git a/web/template/partial/course/manage/create-lecture-form-slides/lecture-type-slide.gohtml b/web/template/partial/course/manage/create-lecture-form-slides/lecture-type-slide.gohtml
index 24b0886fc..2ddd74df7 100644
--- a/web/template/partial/course/manage/create-lecture-form-slides/lecture-type-slide.gohtml
+++ b/web/template/partial/course/manage/create-lecture-form-slides/lecture-type-slide.gohtml
@@ -2,9 +2,10 @@
     <ul class="w-full">
         <li class="mb-2">
             <button
-                    @click.prevent="() => updateType(false)"
+                    x-data="{ itemCreateType: admin.LectureCreateType.livestream }"
+                    @click.prevent="() => updateCreateType(itemCreateType)"
                     class="inline-flex items-center justify-between w-full p-5 text-gray-500 bg-white border border-gray-200 rounded-lg cursor-pointer dark:hover:text-gray-300 dark:border-gray-700 hover:text-gray-600 hover:bg-gray-100 dark:text-gray-400 dark:bg-gray-600 dark:hover:bg-gray-500"
-                    :class="formData.vodup === true ? '' : 'dark:text-white dark:border-white border-blue-600 text-blue-600'"
+                    :class="createType === itemCreateType ? 'dark:text-white dark:border-white border-blue-600 text-blue-600' : ''"
             >
                 <div class="block text-left">
                     <div class="w-full text-lg font-semibold">Livestream</div>
@@ -12,11 +13,25 @@
                 </div>
             </button>
         </li>
+        <li class="mb-2">
+            <button
+                    x-data="{ itemCreateType: admin.LectureCreateType.vodRecord }"
+                    @click.prevent="() => updateCreateType(itemCreateType)"
+                    class="inline-flex items-center justify-between w-full p-5 text-gray-500 bg-white border border-gray-200 rounded-lg cursor-pointer dark:hover:text-gray-300 dark:border-gray-700 hover:text-gray-600 hover:bg-gray-100 dark:text-gray-400 dark:bg-gray-600 dark:hover:bg-gray-500"
+                    :class="createType === itemCreateType ? 'dark:text-white dark:border-white border-blue-600 text-blue-600' : ''"
+            >
+                <div class="block text-left">
+                    <div class="w-full text-lg font-semibold">Record Lecture</div>
+                    <div class="w-full">Record a Lecture in your Browser</div>
+                </div>
+            </button>
+        </li>
         <li>
             <button
-                    @click.prevent="() => updateType(true)"
+                    x-data="{ itemCreateType: admin.LectureCreateType.vodUpload }"
+                    @click.prevent="() => updateCreateType(itemCreateType)"
                     class="inline-flex items-center justify-between w-full p-5 text-gray-500 bg-white border border-gray-200 rounded-lg cursor-pointer dark:hover:text-gray-300 dark:border-gray-700 hover:text-gray-600 hover:bg-gray-100 dark:text-gray-400 dark:bg-gray-600 dark:hover:bg-gray-500"
-                    :class="formData.vodup !== true ? '' : 'dark:text-white dark:border-white border-blue-600 text-blue-600'"
+                    :class="createType === itemCreateType ? 'dark:text-white dark:border-white border-blue-600 text-blue-600' : ''"
             >
                 <div class="block text-left">
                     <div class="w-full text-lg font-semibold">Video Upload</div>
diff --git a/web/template/partial/course/manage/create-lecture-form.gohtml b/web/template/partial/course/manage/create-lecture-form.gohtml
index e4b8cb3a4..368ed7f51 100644
--- a/web/template/partial/course/manage/create-lecture-form.gohtml
+++ b/web/template/partial/course/manage/create-lecture-form.gohtml
@@ -18,16 +18,24 @@
                     2
                 </span>
                 <span class="hidden sm:inline-flex sm:ml-2">Details</span>
-                <svg aria-hidden="true" class="w-4 h-4 ml-2 sm:ml-4" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 5l7 7-7 7M5 5l7 7-7 7"></path></svg>
+                <svg x-show="createType === admin.LectureCreateType.vodUpload || createType === admin.LectureCreateType.vodRecord" aria-hidden="true" class="w-4 h-4 ml-2 sm:ml-4" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 5l7 7-7 7M5 5l7 7-7 7"></path></svg>
+            </li>
+            <li x-show="createType === admin.LectureCreateType.vodUpload" class="flex items-center " :class="currentTab === 2 ? `text-blue-500 dark:text-white` : `text-gray-400 dark:text-gray-500`">
+                <span class="flex items-center justify-center w-5 h-5 mr-2 text-xs border rounded-full shrink-0" :class="currentTab === 2 ? `border-blue-500 dark:border-white` : `border-gray-400 dark:border-gray-500`">
+                    3
+                </span>
+                Upload Media
             </li>
-            <li class="flex items-center " :class="currentTab === 2 ? `text-blue-500 dark:text-white` : `text-gray-400 dark:text-gray-500`">
+            <li x-show="createType === admin.LectureCreateType.vodRecord" class="flex items-center " :class="currentTab === 2 ? `text-blue-500 dark:text-white` : `text-gray-400 dark:text-gray-500`">
                 <span class="flex items-center justify-center w-5 h-5 mr-2 text-xs border rounded-full shrink-0" :class="currentTab === 2 ? `border-blue-500 dark:border-white` : `border-gray-400 dark:border-gray-500`">
                     3
                 </span>
+                Record Media
             </li>
         </ol>
 
         <div class="form-container-body">
+            {{- /* Loading Tab */ -}}
             <div x-show="currentTab === -1" x-data="{ progress: { COMB: 0, PRES: null, CAM: null } }" @voduploadprogress.window="(e) => (progress = e.detail)">
                 <h3>Your lecture is being created ...</h3>
                 <ul x-show="formData.vodup" class="mt-2">
@@ -37,21 +45,23 @@
                 </ul>
             </div>
 
+            {{- /* Tab 1 */ -}}
             <div x-show="currentTab === 0" class="flex py-4">
                 {{template "lecture-type-slide"}}
             </div>
 
-            <div x-show="currentTab === 1 && !formData.vodup">
-                {{template "livestream-type-slide"}}
-            </div>
-
-            <div x-show="(currentTab === 1 && formData.vodup) || (currentTab === 2 && !formData.vodup) " class="grid grid-cols-2 space-x-2">
+            {{- /* Tab 2 */ -}}
+            <div x-show="currentTab === 1" class="grid grid-cols-2 space-x-2">
                 {{template "lecture-details-slide"}}
             </div>
 
-            <div x-show="currentTab === 2 && formData.vodup">
+            {{- /* Tab 3 */ -}}
+            <div x-show="createType === admin.LectureCreateType.vodUpload && currentTab === 2" class="">
                 {{template "lecture-media-slide"}}
             </div>
+            <div x-show="createType === admin.LectureCreateType.vodRecord && currentTab === 2" class="">
+                {{template "lecture-record-slide"}}
+            </div>
         </div>
 
         <div x-show="error" class="flex justify-end px-6 py-2">
diff --git a/web/ts/edit-course.ts b/web/ts/edit-course.ts
index e8a395faa..0b1e65ab7 100644
--- a/web/ts/edit-course.ts
+++ b/web/ts/edit-course.ts
@@ -594,8 +594,244 @@ interface MediaUpload {
     progress: number;
 }
 
+export enum LectureCreateType {
+    vodRecord,
+    livestream,
+    vodUpload,
+}
+
+function stopRecorder(recorder: MediaRecorder): Promise<Blob> {
+    return new Promise((resolve) => {
+        recorder.ondataavailable = (e) => {
+            resolve(e.data);
+        };
+        recorder.stop();
+    });
+}
+
+function loadVideoBlob(elem: HTMLVideoElement, video: Blob): Promise<void> {
+    return new Promise((resolve) => {
+        elem.srcObject = null;
+        elem.onloadedmetadata = (e) => {
+            elem.pause();
+            elem.currentTime = 0;
+            resolve();
+        };
+        elem.src = URL.createObjectURL(video);
+    });
+}
+
+class LectureRecorder {
+    private eventRoot: HTMLElement;
+    private readonly onUpdateData: (screenRecording: Blob, cameraRecording: Blob) => void;
+
+    private screencastStream: MediaStream;
+    private cameraStream: MediaStream;
+
+    private screencastDisplay: HTMLVideoElement;
+    private cameraDisplay: HTMLVideoElement;
+
+    private screencastRecorder: MediaRecorder;
+    private cameraRecorder: MediaRecorder;
+
+    private screenRecording: Blob;
+    private cameraRecording: Blob;
+
+    public screencastAvailable: boolean;
+    public cameraAvailable: boolean;
+    public isRecording: boolean;
+    public retrieveRecording: boolean;
+    public recordingsReady: boolean;
+    public isPlaying: boolean;
+
+    constructor(eventRoot: HTMLElement, onUpdateData: (screenRecording: Blob, cameraRecording: Blob) => void) {
+        this.eventRoot = eventRoot;
+        this.onUpdateData = onUpdateData;
+        this.screencastAvailable = false;
+        this.cameraAvailable = false;
+        this.isRecording = false;
+        this.retrieveRecording = false;
+        this.recordingsReady = false;
+        this.isPlaying = false;
+    }
+
+    async selectScreencast(display: HTMLVideoElement): Promise<void> {
+        if (this.isRecording || this.recordingsReady) return;
+        try {
+            this.screencastDisplay = display;
+            this.screencastStream = await navigator.mediaDevices.getDisplayMedia({
+                audio: true,
+                video: true,
+            });
+
+            await this.initScreencastDisplay();
+        } catch (err) {
+            alert("Failed to access your screen.");
+        }
+    }
+
+    async selectCamera(display: HTMLVideoElement): Promise<void> {
+        if (this.isRecording || this.recordingsReady) return;
+        try {
+            this.cameraDisplay = display;
+            this.cameraStream = await navigator.mediaDevices.getUserMedia({
+                audio: true,
+                video: true,
+            });
+
+            await this.initCameraDisplay();
+
+            this.cameraAvailable = true;
+        } catch (err) {
+            alert("Failed to access your webcam & mic.");
+        }
+    }
+
+    initScreencastDisplay() {
+        return new Promise<void>((resolve) => {
+            this.screencastDisplay.srcObject = this.screencastStream;
+            this.screencastDisplay.onloadedmetadata = (e) => {
+                this.screencastDisplay.muted = true;
+                this.screencastDisplay.play();
+                this.screencastRecorder = new MediaRecorder(this.screencastStream, {
+                    mimeType: "video/webm",
+                });
+                this.screencastAvailable = true;
+                resolve();
+            };
+        });
+    }
+
+    initCameraDisplay(): Promise<void> {
+        return new Promise<void>((resolve) => {
+            this.cameraDisplay.srcObject = this.cameraStream;
+            this.cameraDisplay.onloadedmetadata = (e) => {
+                this.cameraDisplay.muted = true;
+                this.cameraDisplay.play();
+                this.cameraRecorder = new MediaRecorder(this.cameraStream, {
+                    mimeType: "video/webm",
+                });
+                resolve();
+            };
+        });
+    }
+
+    async toggleRecording(): Promise<void> {
+        if (this.isRecording) {
+            await this.stop();
+        } else {
+            this.start();
+        }
+    }
+
+    start(): void {
+        if (this.isRecording) return;
+        if (this.screencastAvailable) {
+            this.screencastRecorder.start();
+        }
+        if (this.cameraRecorder) {
+            this.cameraRecorder.start();
+        }
+        this.isRecording = true;
+    }
+
+    async stop(): Promise<void> {
+        if (!this.isRecording || this.retrieveRecording) return;
+        this.isRecording = false;
+        this.retrieveRecording = true;
+
+        await Promise.all(
+            [
+                async () => {
+                    if (!this.screencastRecorder) {
+                        return;
+                    }
+                    this.screenRecording = await stopRecorder(this.screencastRecorder);
+                    this.screencastRecorder = null;
+                },
+                async () => {
+                    if (!this.cameraRecorder) {
+                        return;
+                    }
+                    this.cameraRecording = await stopRecorder(this.cameraRecorder);
+                    this.cameraRecorder = null;
+                },
+            ].map((fn) => fn()),
+        );
+        await this.displayRecordings();
+        this.onUpdateData(this.screenRecording, this.cameraRecording);
+        this.retrieveRecording = false;
+        this.recordingsReady = true;
+    }
+
+    async displayRecordings(): Promise<void> {
+        if (this.screenRecording) {
+            await loadVideoBlob(this.screencastDisplay, this.screenRecording);
+        }
+        if (this.cameraRecording) {
+            await loadVideoBlob(this.cameraDisplay, this.cameraRecording);
+        }
+    }
+
+    togglePlay() {
+        if (this.isPlaying) {
+            this.pause();
+        } else {
+            this.play();
+        }
+    }
+
+    play() {
+        if (this.isPlaying) return;
+        if (this.screenRecording) {
+            this.screencastDisplay.play();
+            this.screencastDisplay.onended = () => this.resetPlay();
+        }
+        if (this.cameraRecording) {
+            this.cameraDisplay.currentTime = this.screencastDisplay.currentTime;
+            this.cameraDisplay.play();
+            this.cameraDisplay.onended = () => this.resetPlay();
+        }
+        this.isPlaying = true;
+    }
+
+    pause() {
+        if (!this.isPlaying) return;
+        if (this.screenRecording) {
+            this.screencastDisplay.pause();
+        }
+        if (this.cameraRecording) {
+            this.cameraDisplay.pause();
+        }
+        this.isPlaying = false;
+    }
+
+    resetPlay() {
+        this.pause();
+        if (this.screenRecording) {
+            this.screencastDisplay.currentTime = 0;
+        }
+        if (this.cameraRecording) {
+            this.cameraDisplay.currentTime = 0;
+        }
+    }
+
+    deleteRecordings() {
+        this.pause();
+        if (confirm("Are your sure you want to delete all recordings?")) {
+            this.screenRecording = null;
+            this.cameraRecording = null;
+            this.recordingsReady = null;
+            this.initScreencastDisplay();
+            this.initCameraDisplay();
+            this.onUpdateData(this.screenRecording, this.cameraRecording);
+        }
+    }
+}
+
 export function createLectureForm(args: { s: [] }) {
     return {
+        createType: LectureCreateType.livestream,
         currentTab: 0,
         canGoBack: false,
         canContinue: true,
@@ -627,6 +863,9 @@ export function createLectureForm(args: { s: [] }) {
         init() {
             this.onUpdate();
         },
+        initRecorder(eventRoot: HTMLElement): LectureRecorder {
+            return new LectureRecorder(eventRoot, (screen, cam) => this.updateRecordings(screen, cam));
+        },
         next() {
             if (this.onLastSlide) {
                 this.submitData();
@@ -639,6 +878,14 @@ export function createLectureForm(args: { s: [] }) {
             this.currentTab--;
             this.onUpdate();
         },
+        updateCreateType(newType: LectureCreateType) {
+            this.createType = newType;
+            if (newType === LectureCreateType.livestream) {
+                this.formData.vodup = false;
+            } else {
+                this.formData.vodup = true;
+            }
+        },
         updateLiveAdHoc(adHoc: boolean) {
             this.formData.adHoc = adHoc;
             this.next();
@@ -675,6 +922,21 @@ export function createLectureForm(args: { s: [] }) {
             this.onUpdate();
         },
 
+        updateRecordings(screenRecording: Blob, cameraRecording: Blob) {
+            this.formData.combFile = [];
+            this.formData.presFile = [];
+            this.formData.camFile = [];
+
+            if (screenRecording) {
+                this.formData.presFile = [new File([screenRecording], "pres.webm")];
+            }
+            if (cameraRecording) {
+                this.formData.camFile = [new File([cameraRecording], "cam.webm")];
+            }
+
+            this.onUpdate();
+        },
+
         // This function sets flags depending on the current tab and current data
         onUpdate() {
             if (this.currentTab === 0) {
@@ -692,6 +954,7 @@ export function createLectureForm(args: { s: [] }) {
                     this.canGoBack = true;
                     this.canContinue = this.formData.start.length > 0;
                 } else {
+                    this.onLastSlide = true;
                     this.canGoBack = true;
                     this.canContinue = this.formData.start.length > 0 && this.formData.end.length > 0;
                 }

From 46a940bbade921a238df98c54730a5a625040908 Mon Sep 17 00:00:00 2001
From: "renovate[bot]" <29139614+renovate[bot]@users.noreply.github.com>
Date: Wed, 16 Aug 2023 08:11:05 +0200
Subject: [PATCH 05/31] Update aler9/rtsp-simple-server Docker tag to v1
 (#1118)

Co-authored-by: renovate[bot] <29139614+renovate[bot]@users.noreply.github.com>
---
 worker/rtmp-relay/Dockerfile | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/worker/rtmp-relay/Dockerfile b/worker/rtmp-relay/Dockerfile
index 19546d83c..93def54e2 100644
--- a/worker/rtmp-relay/Dockerfile
+++ b/worker/rtmp-relay/Dockerfile
@@ -3,7 +3,7 @@ FROM golang:1.20 as authBuilder
 COPY main.go .
 RUN CGO_ENABLED=0 go build -ldflags="-extldflags=-static" -o /auth main.go
 
-FROM aler9/rtsp-simple-server:v0.23.4 AS rtsp
+FROM aler9/rtsp-simple-server:v1.0.0 AS rtsp
 
 FROM alpine:3.18
 

From a85cc21d45229779a4d9c80fc7a252d752f90a66 Mon Sep 17 00:00:00 2001
From: "renovate[bot]" <29139614+renovate[bot]@users.noreply.github.com>
Date: Wed, 16 Aug 2023 08:12:20 +0200
Subject: [PATCH 06/31] Update golang Docker tag to v1.21 (#1055)

* Update golang Docker tag to v1.21

* Update vod-service/Dockerfile

---------

Co-authored-by: renovate[bot] <29139614+renovate[bot]@users.noreply.github.com>
Co-authored-by: Joscha Henningsen <44805696+joschahenningsen@users.noreply.github.com>
---
 vod-service/Dockerfile       | 2 +-
 worker/rtmp-relay/Dockerfile | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/vod-service/Dockerfile b/vod-service/Dockerfile
index 479b4dddb..deed4920c 100644
--- a/vod-service/Dockerfile
+++ b/vod-service/Dockerfile
@@ -1,4 +1,4 @@
-FROM golang:1.20-alpine3.17 as builder
+FROM golang:1.21-alpine3.18 as builder
 
 WORKDIR /app
 
diff --git a/worker/rtmp-relay/Dockerfile b/worker/rtmp-relay/Dockerfile
index 93def54e2..6557f2b82 100644
--- a/worker/rtmp-relay/Dockerfile
+++ b/worker/rtmp-relay/Dockerfile
@@ -1,4 +1,4 @@
-FROM golang:1.20 as authBuilder
+FROM golang:1.21 as authBuilder
 
 COPY main.go .
 RUN CGO_ENABLED=0 go build -ldflags="-extldflags=-static" -o /auth main.go

From 108591b6b750e13a254d295259b2807d2e9692a3 Mon Sep 17 00:00:00 2001
From: matthias <matthias.reumann@tum.de>
Date: Thu, 17 Aug 2023 10:24:02 +0200
Subject: [PATCH 07/31] Video Section Component (#1084)

* Add VideoSectionAPI; Reutilize ts utilities

* Add slidingWindow and Time

* Add watchers

* Update highlight search

* Add back follow sections

* Remove old code

* Update css

* Update mobile css

* Small css changes

* Uncomment chat
---
 .../partial/stream/video-sections.gohtml      | 158 ++++--------------
 web/ts/TUMLiveVjs.ts                          |  28 ----
 web/ts/api/video-sections.ts                  |  44 +++++
 web/ts/components/video-sections.ts           |  57 +++++++
 web/ts/data-store/video-sections.ts           |  45 +----
 web/ts/entry/video.ts                         |   1 +
 web/ts/global.ts                              |  52 +-----
 web/ts/utilities/fetch-wrappers.ts            |  30 ++++
 web/ts/utilities/paginator.ts                 |  11 +-
 web/ts/utilities/sliding-window.ts            |  38 +++++
 web/ts/utilities/time.ts                      |  50 ++++++
 web/ts/video-sections.ts                      | 111 +-----------
 12 files changed, 274 insertions(+), 351 deletions(-)
 create mode 100644 web/ts/api/video-sections.ts
 create mode 100644 web/ts/components/video-sections.ts
 create mode 100644 web/ts/utilities/sliding-window.ts
 create mode 100644 web/ts/utilities/time.ts

diff --git a/web/template/partial/stream/video-sections.gohtml b/web/template/partial/stream/video-sections.gohtml
index 6bf289a0e..363c7b032 100644
--- a/web/template/partial/stream/video-sections.gohtml
+++ b/web/template/partial/stream/video-sections.gohtml
@@ -1,127 +1,43 @@
 {{define "videosections"}}
-    <div>
-        <div class="hidden md:block">
-            {{template "videosections-desktop" .ID}}
-        </div>
-        <div class="md:hidden">
-            {{template "videosections-mobile" .ID}}
-        </div>
-    </div>
-{{end}}
-
-{{define "videosections-desktop"}}
-    <div x-data="{vs: new watch.VideoSectionsDesktop({{.}})}"
-         x-init="watch.attachCurrentTimeEvent(vs);">
-        <div class="group relative">
-            <div class="grid gap-1 px-2">
-                <div class="flex justify-between items-center border-b mb-3 dark:border-gray-800 lg:justify-start">
-                    <h3 class="text-4 font-semibold">Sections</h3>
-                    <button @click="vs.followSections = !vs.followSections;"
-                            class="text-xs rounded h-fit w-fit font-semibold uppercase lg:ml-3 px-1"
-                            :class="vs.followSections ? 'text-7' : 'hover:bg-gray-200 dark:hover:bg-gray-600 text-5 hover:text-1'"
-                            :disabled="vs.followSections">
-                        Follow sections
+    <article x-data="watch.videoSectionContext({{.ID}})" class = "p-3 lg:p-0 lg:h-48 overflow-y-clip">
+        <header class="flex space-x-2 mb-3 text-3 justify-between lg:justify-start">
+            <h3 class="font-bold">Sections</h3>
+            <button @click="autoScroll.toggle()"
+                    class="tum-live-button tum-live-button-tertiary"
+                    :class="{'active' : autoScroll.value}">
+                Auto-Scroll
+            </button>
+        </header>
+        <article class="relative flex flex-col space-y-2 lg:space-y-0 lg:space-x-2 lg:flex-row lg:items-stretch">
+            <template x-if="sections.hasNext()">
+                <section class = "flex items-end absolute -left-2 z-40 h-full lg:items-baseline lg:pt-8 lg:left-auto lg:-right-4">
+                    <button type="button" @click="nextSection()"
+                            class="tum-live-icon-button tum-live-border tum-live-bg text-3 border rounded-full h-8 w-8">
+                        <i class="fa-solid fa-chevron-right rotate-90 lg:rotate-0"></i>
                     </button>
-                </div>
-                <div class="relative flex w-fit">
-                    <template x-if="vs.showPrev()">
-                        <button @click="vs.prev();vs.followSections = false;"
-                                class="group-hover:block hidden absolute -left-4 z-50 bg-white border shadow text-sm py-2 px-3 my-auto h-fit top-0 bottom-0 rounded-lg hover:bg-gray-50 hover:dark:bg-gray-600 dark:border-gray-800 dark:bg-secondary">
-                            <i class="fa fa-chevron-left text-3"></i>
-                        </button>
-                    </template>
-                    <template x-if="vs.showNext()">
-                        <button @click="vs.next();vs.followSections = false;"
-                                class="group-hover:block hidden absolute -right-2 z-50 bg-white border shadow text-sm py-2 px-3 my-auto h-fit top-0 bottom-0 rounded-lg hover:bg-gray-50 hover:dark:bg-gray-600 dark:border-gray-800 dark:bg-secondary">
-                            <i class="fa fa-chevron-right text-3"></i>
-                        </button>
-                    </template>
-                    <template x-for="(s, i) in vs.getList()" :key="s.ID">
-                        <button x-cloak
-                                class="relative flex h-40 w-32 mb-1 mr-2 bg-transparent outline-none border-0 rounded-lg"
-                                x-data="{previewImgLoaded: false}"
-                                @click="watch.jumpTo({ timeParts: {hours: s.startHours, minutes: s.startMinutes, seconds: s.startSeconds }}); vs.followSections = false;">
-                    <span class="flex flex-col h-full p-1 bg-white dark:bg-secondary justify-between w-full border hover:dark:bg-gray-600 hover:bg-gray-200 rounded-lg"
-                          :class="vs.isCurrent(i) ? 'border-2 border-blue-500/50 dark:border-indigo-600/50' : 'dark:border-gray-800'">
-                        <template x-if="s.fileID !== 0">
-                            <img x-cloak x-show="previewImgLoaded"
-                                 src=""
-                                 :src="`/api/download/${s.fileID}?type=serve`"
-                                 width="128" height="32"
-                                 @load="previewImgLoaded=true"
-                                 alt="preview"
-                                 class="w-full h-16 rounded object-cover z-10">
-                        </template>
-                        <span x-show="!previewImgLoaded"
-                              class="block w-full h-16 bg-gray-50 dark:bg-gray-700 rounded"></span>
-                         <span x-text="s.description"
-                               class="block text-left text-xs text-3 mt-2 mb-auto px-1"></span>
-                        <span class="absolute bottom-1 right-1 px-1 py-1">
-                            <span x-text="s.friendlyTimestamp"
-                                  class="block text-sky-800 ml-auto w-fit bg-sky-200 text-xs dark:text-indigo-200 dark:bg-indigo-800 p-1 rounded">
-                            </span>
-                        </span>
-                    </span>
-                        </button>
-                    </template>
-                </div>
-            </div>
-        </div>
-    </div>
-{{end}}
-
-{{define "videosections-mobile"}}
-    <div x-data="{vs: new watch.VideoSectionsMobile({{.}})}"
-         x-init="watch.attachCurrentTimeEvent(vs);" class="pt-3">
-        <div class="flex justify-between items-center border-b dark:border-gray-800 mb-3">
-            <h3 class="text-4 font-semibold">Sections</h3>
-            <template x-if="!vs.minimize">
-                <button @click="vs.minimize = true;"
-                        class="text-5 text-xs rounded h-fit w-fit font-semibold px-2 py-1 uppercase">
-                    Minimize
-                </button>
+                </section>
             </template>
-            <template x-if="vs.minimize">
-                <button @click="vs.minimize = false;"
-                        class="text-5 text-xs rounded h-fit w-fit font-semibold px-2 py-1 uppercase">
-                    Show all
-                </button>
+            <template x-if="sections.hasPrev()">
+                <section class = "flex items-baseline absolute -left-2 z-40 h-full lg:items-baseline lg:pt-8 lg:-left-4">
+                    <button type="button" @click="prevSection()"
+                            class="tum-live-icon-button tum-live-border tum-live-bg text-3 border rounded-full h-8 w-8">
+                        <i class="fa-solid fa-chevron-left rotate-90 lg:rotate-0"></i>
+                    </button>
+                </section>
             </template>
-        </div>
-        <div class="p-1 border bg-gray-100 rounded dark:bg-gray-800 dark:border-gray-800">
-            <div class="grid gap-1 overflow-y-scroll" :class="vs.minimize ? 'h-fit' : 'h-56'">
-                <template x-for="(s, i) in vs.getList()" :key="s.ID">
-                    <button x-cloak class="flex w-full bg-transparent outline-none border-0 rounded-lg"
-                            x-data="{previewImgLoaded: false}"
-                            @click="watch.jumpTo({ timeParts: {hours: s.startHours, minutes: s.startMinutes, seconds: s.startSeconds }})">
-                    <span class="flex justify-start p-1 bg-white dark:bg-secondary w-full border hover:dark:bg-gray-600 hover:bg-gray-200 rounded-lg"
-                          :class="vs.isCurrent(i) ? 'border-2 border-blue-500/50 dark:border-indigo-600/50' : 'dark:border-gray-800'">
-                        <span class="block">
-                            <template x-if="s.fileID !== 0">
-                            <img x-cloak x-show="previewImgLoaded"
-                                 src=""
-                                 :src="`/api/download/${s.fileID}?type=serve`"
-                                 width="128" height="32"
-                                 @load="previewImgLoaded=true"
-                                 alt="preview"
-                                 class="w-full h-16 rounded object-cover z-10">
-                            </template>
-                            <span x-show="!previewImgLoaded"
-                                  class="block rounded w-36 h-16 bg-gray-50 dark:bg-gray-600"></span>
+            <template x-for="s in sections.get()" :key="s.ID">
+                <button type="button"
+                        @click="watch.jumpTo({ timeParts: {hours: s.startHours, minutes: s.startMinutes, seconds: s.startSeconds }});"
+                        class="flex flex-row h-16 group rounded-lg lg:flex-col lg:h-auto lg:w-36">
+                        <span :style="`background-image:url('/api/download/${s.fileID}?type=serve')`"
+                              class="relative block shrink-0 h-full aspect-video bg-gray-100 border-2 rounded-lg dark:bg-gray-800 dark:shadow-gray-900/75 lg:group-hover:shadow-lg lg:h-auto lg:w-full"
+                              :class="s.isCurrent ? 'border-blue-500/50 dark:border-indigo-600/50 shadow-lg' : 'border-transparent'">
+                            <span class="tum-live-badge text-xs text-sky-800 bg-sky-200 dark:text-indigo-200 dark:bg-indigo-800 absolute bottom-2 right-2 px-1 py-1px"
+                                  x-text="s.friendlyTimestamp"></span>
                         </span>
-                        <span class="block ml-2">
-                             <span x-text="s.description"
-                                   class="block text-left text-xs text-3 my-2 px-1"></span>
-                            <span class="flex flex-grow items-end flex-1 px-1 py-1">
-                                <span x-text="s.friendlyTimestamp"
-                                      class="block text-sky-800 w-fit bg-sky-200 text-xs dark:text-indigo-200 dark:bg-indigo-800 p-1 rounded">
-                                </span>
-                            </span>
-                        </span>
-                    </span>
-                    </button>
-                </template>
-            </div>
-        </div>
-    </div>
+                    <span x-text="s.description" class="block font-semibold overflow-ellipsis text-xs text-3 text-left p-1 my-auto pl-3 lg:my-0 lg:pl-1"></span>
+                </button>
+            </template>
+        </article>
+    </article>
 {{end}}
\ No newline at end of file
diff --git a/web/ts/TUMLiveVjs.ts b/web/ts/TUMLiveVjs.ts
index 828c1863f..537a93c19 100644
--- a/web/ts/TUMLiveVjs.ts
+++ b/web/ts/TUMLiveVjs.ts
@@ -1,5 +1,4 @@
 import { getQueryParam, keepQuery, postData, Time } from "./global";
-import { VideoSectionList } from "./video-sections";
 import { StatusCodes } from "http-status-codes";
 import videojs, { VideoJsPlayer } from "video.js";
 import airplay from "@silvermine/videojs-airplay";
@@ -675,21 +674,6 @@ export class SeekLogger {
     }
 }
 
-export function attachCurrentTimeEvent(videoSection: VideoSectionList) {
-    for (let j = 0; j < players.length; j++) {
-        players[j].ready(() => {
-            let timer;
-            (function checkTimestamp() {
-                timer = setTimeout(() => {
-                    highlight(players[j], videoSection);
-                    checkTimestamp();
-                }, 500);
-            })();
-            players[j].on("seeked", () => highlight(players[j], videoSection));
-        });
-    }
-}
-
 export function switchView(baseUrl: string) {
     const isDVR = getQueryParam("dvr") === "";
 
@@ -703,18 +687,6 @@ export function switchView(baseUrl: string) {
     window.location.assign(redirectUrl);
 }
 
-function highlight(player, videoSection) {
-    const currentTime = player.currentTime();
-    videoSection.currentHighlightIndex = videoSection.list.findIndex((section, i, list) => {
-        const next = list[i + 1];
-        const sectionSeconds = new Time(section.startHours, section.startMinutes, section.startSeconds).toSeconds();
-        return next === undefined || next === null // if last element and no next exists
-            ? sectionSeconds <= currentTime
-            : sectionSeconds <= currentTime &&
-                  currentTime <= new Time(next.startHours, next.startMinutes, next.startSeconds).toSeconds() - 1;
-    });
-}
-
 function debounce(func, timeout) {
     let timer;
     return (...args) => {
diff --git a/web/ts/api/video-sections.ts b/web/ts/api/video-sections.ts
new file mode 100644
index 000000000..9acb866c5
--- /dev/null
+++ b/web/ts/api/video-sections.ts
@@ -0,0 +1,44 @@
+import { del, get, post, put } from "../utilities/fetch-wrappers";
+
+export class UpdateVideoSectionRequest {
+    Description: string;
+    StartHours: number;
+    StartMinutes: number;
+    StartSeconds: number;
+}
+
+export type Section = {
+    ID?: number;
+    description: string;
+
+    startHours: number;
+    startMinutes: number;
+    startSeconds: number;
+
+    streamID: number;
+    friendlyTimestamp?: string;
+    fileID?: number;
+
+    isCurrent: boolean;
+};
+
+/**
+ * REST API Wrapper for /api/stream/:id/sections
+ */
+export const VideoSectionAPI = {
+    get: async function (streamId: number): Promise<Section[]> {
+        return get(`/api/stream/${streamId}/sections`);
+    },
+
+    add: async function (streamId: number, request: object) {
+        return post(`/api/stream/${streamId}/sections`, request);
+    },
+
+    update: function (streamId: number, id: number, request: UpdateVideoSectionRequest) {
+        return put(`/api/stream/${streamId}/sections/${id}`, request);
+    },
+
+    delete: async function (streamId: number, id: number): Promise<Response> {
+        return del(`/api/stream/${streamId}/sections/${id}`);
+    },
+};
diff --git a/web/ts/components/video-sections.ts b/web/ts/components/video-sections.ts
new file mode 100644
index 000000000..fc897d4d1
--- /dev/null
+++ b/web/ts/components/video-sections.ts
@@ -0,0 +1,57 @@
+import { AlpineComponent } from "./alpine-component";
+import { Section } from "../api/video-sections";
+import { DataStore } from "../data-store/data-store";
+import { SlidingWindow } from "../utilities/sliding-window";
+import { registerTimeWatcher } from "../video/watchers";
+import { getPlayers } from "../TUMLiveVjs";
+import { Time } from "../utilities/time";
+import { ToggleableElement } from "../utilities/ToggleableElement";
+
+export function videoSectionContext(streamId: number): AlpineComponent {
+    return {
+        streamId: streamId,
+        autoScroll: new ToggleableElement(),
+        sections: new SlidingWindow([], 6),
+
+        init() {
+            DataStore.videoSections.subscribe(this.streamId, this.updateSection.bind(this));
+            registerTimeWatcher(getPlayers()[0], this.setCurrent.bind(this));
+        },
+
+        nextSection() {
+            this.autoScroll.toggle(false);
+            this.sections.next();
+        },
+
+        prevSection() {
+            this.autoScroll.toggle(false);
+            this.sections.prev();
+        },
+
+        setCurrent(t: number) {
+            this.sections.forEach((s, _) => (s.isCurrent = false));
+            const section = this.sections.find((s, i, arr) => {
+                const next = arr[i + 1];
+                const sectionSeconds = new Time(s.startHours, s.startMinutes, s.startSeconds).toSeconds();
+                return next === undefined || next === null // if last element and no next exists
+                    ? sectionSeconds <= t
+                    : sectionSeconds <= t &&
+                          t <= new Time(next.startHours, next.startMinutes, next.startSeconds).toSeconds() - 1;
+            });
+
+            if (section) {
+                section.isCurrent = true;
+                if (!this.sections.isInWindow(section) && this.autoScroll.value) this.sections.show(section);
+            }
+        },
+
+        isCurrent(i: number) {
+            return i == 0;
+        },
+
+        updateSection(sections: Section[]) {
+            this.sections.set(sections);
+            this.sections.reset();
+        },
+    } as AlpineComponent;
+}
diff --git a/web/ts/data-store/video-sections.ts b/web/ts/data-store/video-sections.ts
index 2ae6837ea..446de9c5a 100644
--- a/web/ts/data-store/video-sections.ts
+++ b/web/ts/data-store/video-sections.ts
@@ -1,9 +1,10 @@
-import { Delete, getData, postData, putData, Section, Time } from "../global";
+import { Time } from "../global";
 import { StreamableMapProvider } from "./provider";
+import { Section, UpdateVideoSectionRequest, VideoSectionAPI } from "../api/video-sections";
 
 export class VideoSectionProvider extends StreamableMapProvider<number, Section[]> {
     protected async fetcher(streamId: number): Promise<Section[]> {
-        const result = await VideoSections.get(streamId);
+        const result = await VideoSectionAPI.get(streamId);
         return result.map((s) => {
             s.friendlyTimestamp = new Time(s.startHours, s.startMinutes, s.startSeconds).toString();
             return s;
@@ -11,18 +12,18 @@ export class VideoSectionProvider extends StreamableMapProvider<number, Section[
     }
 
     async add(streamId: number, sections: Section[]): Promise<void> {
-        await VideoSections.add(streamId, sections);
+        await VideoSectionAPI.add(streamId, sections);
         await this.fetch(streamId, true);
         await this.triggerUpdate(streamId);
     }
 
     async delete(streamId: number, sectionId: number) {
-        await VideoSections.delete(streamId, sectionId);
+        await VideoSectionAPI.delete(streamId, sectionId);
         this.data[streamId] = (await this.getData(streamId)).filter((s) => s.ID !== sectionId);
     }
 
     async update(streamId: number, sectionId: number, request: UpdateVideoSectionRequest) {
-        await VideoSections.update(streamId, sectionId, request);
+        await VideoSectionAPI.update(streamId, sectionId, request);
         this.data[streamId] = (await this.getData(streamId)).map((s) => {
             if (s.ID === sectionId) {
                 s = {
@@ -43,37 +44,3 @@ export class VideoSectionProvider extends StreamableMapProvider<number, Section[
         await this.triggerUpdate(streamId);
     }
 }
-
-export class UpdateVideoSectionRequest {
-    Description: string;
-    StartHours: number;
-    StartMinutes: number;
-    StartSeconds: number;
-}
-
-/**
- * Wrapper for REST-API calls @ /api/stream/:id/sections
- * @category watch-page
- * @category admin-page
- */
-const VideoSections = {
-    get: async function (streamId: number): Promise<Section[]> {
-        const resp = await getData(`/api/stream/${streamId}/sections`);
-        if (!resp.ok) {
-            throw Error(resp.statusText);
-        }
-        return resp.json();
-    },
-
-    add: async function (streamId: number, request: object) {
-        return postData(`/api/stream/${streamId}/sections`, request);
-    },
-
-    update: function (streamId: number, id: number, request: UpdateVideoSectionRequest) {
-        return putData(`/api/stream/${streamId}/sections/${id}`, request);
-    },
-
-    delete: async function (streamId: number, id: number): Promise<Response> {
-        return Delete(`/api/stream/${streamId}/sections/${id}`);
-    },
-};
diff --git a/web/ts/entry/video.ts b/web/ts/entry/video.ts
index 99c0f2ff5..7d83fb7ff 100644
--- a/web/ts/entry/video.ts
+++ b/web/ts/entry/video.ts
@@ -6,4 +6,5 @@ export * from "../video-sections";
 export * from "../splitview";
 export * from "../bookmarks";
 export * from "../subtitle-search";
+export * from "../components/video-sections";
 // Lecture Units are currently not used, so we don't include them in the bundle at the moment
diff --git a/web/ts/global.ts b/web/ts/global.ts
index 7016ad9cb..5fe96316d 100644
--- a/web/ts/global.ts
+++ b/web/ts/global.ts
@@ -3,6 +3,7 @@ import { StatusCodes } from "http-status-codes";
 export * from "./notifications";
 export * from "./user-settings";
 export * from "./start-page";
+export * from "./utilities/time";
 
 export async function getData(url = "") {
     return await fetch(url);
@@ -252,57 +253,6 @@ export function keepQuery(url: string): string {
     return window.location.search.length > 0 ? url + window.location.search : url;
 }
 
-/**
- * Time Utility Class
- * Conversion of seconds to (hours, minutes, seconds) and vice versa.
- */
-export class Time {
-    private readonly hours: number;
-    private readonly minutes: number;
-    private readonly seconds: number;
-
-    static FromSeconds(seconds: number): Time {
-        const date = new Date(seconds * 1000);
-        return new Time(date.getUTCHours(), date.getUTCMinutes(), date.getUTCSeconds());
-    }
-
-    constructor(hours = 0, minutes = 0, seconds = 0) {
-        this.hours = hours;
-        this.minutes = minutes;
-        this.seconds = seconds;
-    }
-
-    public toString() {
-        let s = `${Time.padZero(this.minutes)}:${Time.padZero(this.seconds)}`;
-        if (this.hours > 0) {
-            s = `${Time.padZero(this.hours)}:` + s;
-        }
-        return s;
-    }
-
-    public toStringWithLeadingZeros() {
-        return `${Time.padZero(this.hours)}:${Time.padZero(this.minutes)}:${Time.padZero(this.seconds)}`;
-    }
-
-    public toSeconds(): number {
-        return this.hours * 60 * 60 + this.minutes * 60 + this.seconds;
-    }
-
-    public toObject() {
-        return { hours: this.hours, minutes: this.minutes, seconds: this.seconds };
-    }
-
-    private static padZero(i: string | number) {
-        if (typeof i === "string") {
-            i = parseInt(i);
-        }
-        if (i < 10) {
-            i = "0" + i;
-        }
-        return i;
-    }
-}
-
 /**
  * TypeScript Mapping of model.VideoSection
  */
diff --git a/web/ts/utilities/fetch-wrappers.ts b/web/ts/utilities/fetch-wrappers.ts
index cdf32e896..797912d56 100644
--- a/web/ts/utilities/fetch-wrappers.ts
+++ b/web/ts/utilities/fetch-wrappers.ts
@@ -41,3 +41,33 @@ export async function post(url: string, body: object = {}) {
         return res;
     });
 }
+
+/**
+ * Wrapper for Javascript's fetch function for PUT
+ * @param  {string} url URL to fetch
+ * @param  {object} body Data object to put
+ * @return {Promise<Response>}
+ */
+export async function put(url = "", body: object = {}) {
+    return await fetch(url, {
+        method: "PUT",
+        headers: {
+            "Content-Type": "application/json",
+        },
+        body: JSON.stringify(body),
+    }).then((res) => {
+        if (!res.ok) {
+            throw Error(res.statusText);
+        }
+        return res;
+    });
+}
+
+/**
+ * Wrapper for Javascript's fetch function for DELETE
+ * @param  {string} url URL to fetch
+ * @return {Promise<Response>}
+ */
+export async function del(url: string) {
+    return await fetch(url, { method: "DELETE" });
+}
diff --git a/web/ts/utilities/paginator.ts b/web/ts/utilities/paginator.ts
index da58c3991..a0a49331e 100644
--- a/web/ts/utilities/paginator.ts
+++ b/web/ts/utilities/paginator.ts
@@ -1,8 +1,7 @@
 export class Paginator<T> {
-    private list: T[];
-    private split_number: number;
-
-    private index: number;
+    protected list: T[];
+    protected split_number: number;
+    protected index: number;
 
     private readonly preloader: Preload<T>;
 
@@ -39,6 +38,10 @@ export class Paginator<T> {
         return this;
     }
 
+    find(callback: (obj: T, i: number, arr?: T[]) => boolean): T {
+        return this.list.find(callback);
+    }
+
     hasElements() {
         return this.list.length > 0;
     }
diff --git a/web/ts/utilities/sliding-window.ts b/web/ts/utilities/sliding-window.ts
new file mode 100644
index 000000000..276160426
--- /dev/null
+++ b/web/ts/utilities/sliding-window.ts
@@ -0,0 +1,38 @@
+import { Paginator } from "./paginator";
+
+export class SlidingWindow<T> extends Paginator<T> {
+    constructor(list: T[], split_number: number) {
+        super(list, split_number);
+    }
+
+    get(sortFn?: CompareFunction<T>): T[] {
+        const copy = [...this.list].filter(this.filterPred.bind(this));
+        return sortFn
+            ? copy.sort(sortFn).slice(0, this.index * this.split_number)
+            : copy.slice(0, this.index * this.split_number);
+    }
+
+    isInWindow(o: T): boolean {
+        const i = this.list.findIndex((o1) => o1 === o);
+        return i !== -1 && this.filterPred(o, i);
+    }
+
+    show(o: T) {
+        const i = this.list.findIndex((o1) => o1 === o);
+        this.index = Math.floor(i / this.split_number) + 1;
+    }
+
+    prev() {
+        this.index--;
+    }
+
+    hasPrev() {
+        return this.index > 1;
+    }
+
+    private filterPred(o: T, index: number): boolean {
+        return index >= (this.index - 1) * this.split_number && index < this.index * this.split_number;
+    }
+}
+
+type CompareFunction<T> = (a: T, b: T) => number;
diff --git a/web/ts/utilities/time.ts b/web/ts/utilities/time.ts
new file mode 100644
index 000000000..b1c4bb20f
--- /dev/null
+++ b/web/ts/utilities/time.ts
@@ -0,0 +1,50 @@
+/**
+ * Time Utility Class
+ * Conversion of seconds to (hours, minutes, seconds) and vice versa.
+ */
+export class Time {
+    private readonly hours: number;
+    private readonly minutes: number;
+    private readonly seconds: number;
+
+    static FromSeconds(seconds: number): Time {
+        const date = new Date(seconds * 1000);
+        return new Time(date.getUTCHours(), date.getUTCMinutes(), date.getUTCSeconds());
+    }
+
+    constructor(hours = 0, minutes = 0, seconds = 0) {
+        this.hours = hours;
+        this.minutes = minutes;
+        this.seconds = seconds;
+    }
+
+    public toString() {
+        let s = `${Time.padZero(this.minutes)}:${Time.padZero(this.seconds)}`;
+        if (this.hours > 0) {
+            s = `${Time.padZero(this.hours)}:` + s;
+        }
+        return s;
+    }
+
+    public toStringWithLeadingZeros() {
+        return `${Time.padZero(this.hours)}:${Time.padZero(this.minutes)}:${Time.padZero(this.seconds)}`;
+    }
+
+    public toSeconds(): number {
+        return this.hours * 60 * 60 + this.minutes * 60 + this.seconds;
+    }
+
+    public toObject() {
+        return { hours: this.hours, minutes: this.minutes, seconds: this.seconds };
+    }
+
+    private static padZero(i: string | number) {
+        if (typeof i === "string") {
+            i = parseInt(i);
+        }
+        if (i < 10) {
+            i = "0" + i;
+        }
+        return i;
+    }
+}
diff --git a/web/ts/video-sections.ts b/web/ts/video-sections.ts
index a436b8830..1bb6d74bb 100644
--- a/web/ts/video-sections.ts
+++ b/web/ts/video-sections.ts
@@ -1,112 +1,6 @@
-import { Section, Time } from "./global";
+import { Time } from "./global";
 import { DataStore } from "./data-store/data-store";
-import { UpdateVideoSectionRequest } from "./data-store/video-sections";
-
-export abstract class VideoSectionList {
-    private streamId: number;
-
-    protected list: Section[];
-
-    currentHighlightIndex: number;
-
-    protected constructor(streamId: number) {
-        this.streamId = streamId;
-        this.list = [];
-        this.currentHighlightIndex = -1;
-        DataStore.videoSections.subscribe(this.streamId, (data) => this.onUpdate(data));
-    }
-
-    private onUpdate(data: Section[]) {
-        this.list = data;
-    }
-
-    abstract getList(): Section[];
-
-    abstract isCurrent(i: number): boolean;
-}
-
-/**
- * Mobile VideoSection Functionality
- * @category watch-page
- */
-export class VideoSectionsMobile extends VideoSectionList {
-    minimize: boolean;
-
-    constructor(streamId: number) {
-        super(streamId);
-        this.minimize = true;
-    }
-
-    getList(): Section[] {
-        return this.minimize && this.list.length > 0 ? [this.list.at(this.currentHighlightIndex)] : this.list;
-    }
-
-    isCurrent(i: number): boolean {
-        return this.minimize ? true : this.currentHighlightIndex !== -1 && i === this.currentHighlightIndex;
-    }
-}
-
-/**
- * Desktop VideoSection Functionality
- * @category watch-page
- */
-export class VideoSectionsDesktop extends VideoSectionList {
-    readonly sectionsPerGroup: number;
-
-    private followSections: boolean;
-    private currentIndex: number;
-
-    constructor(streamId: number) {
-        super(streamId);
-        this.currentIndex = 0;
-        this.followSections = false;
-        this.sectionsPerGroup = 4;
-    }
-
-    getList(): Section[] {
-        const currentHighlightPage = Math.floor(this.currentHighlightIndex / this.sectionsPerGroup);
-        const startIndex = this.followSections && this.validHighlightIndex() ? currentHighlightPage : this.currentIndex;
-        return this.list.slice(
-            startIndex * this.sectionsPerGroup,
-            startIndex * this.sectionsPerGroup + this.sectionsPerGroup,
-        );
-    }
-
-    isCurrent(i: number): boolean {
-        const idx =
-            this.currentHighlightIndex -
-            Math.floor(this.currentHighlightIndex / this.sectionsPerGroup) * this.sectionsPerGroup;
-        return this.validHighlightIndex() && this.onCurrentPage() && i === idx;
-    }
-
-    showNext(): boolean {
-        return this.currentIndex < this.list.length / this.sectionsPerGroup - 1;
-    }
-
-    showPrev(): boolean {
-        return this.currentIndex > 0;
-    }
-
-    next() {
-        this.currentIndex = (this.currentIndex + 1) % this.list.length;
-    }
-
-    prev() {
-        this.currentIndex = (this.currentIndex - 1) % this.list.length;
-    }
-
-    private validHighlightIndex(): boolean {
-        return this.currentHighlightIndex !== -1;
-    }
-
-    private onCurrentPage(): boolean {
-        const currentHighlightPage = Math.floor(this.currentHighlightIndex / this.sectionsPerGroup);
-        return (
-            (this.followSections ? currentHighlightPage : this.currentIndex) ===
-            Math.floor(this.currentHighlightIndex / this.sectionsPerGroup)
-        );
-    }
-}
+import { Section, UpdateVideoSectionRequest } from "./api/video-sections";
 
 /**
  * Admin Page VideoSection Management
@@ -190,6 +84,7 @@ export class VideoSectionsAdminController {
             startMinutes: 0,
             startSeconds: 0,
             streamID: this.streamId,
+            isCurrent: false,
         };
     }
 }

From e11b49d6debe23c235de1a3f0794d18466654327 Mon Sep 17 00:00:00 2001
From: matthias <matthias.reumann@tum.de>
Date: Sat, 19 Aug 2023 14:15:35 +0200
Subject: [PATCH 08/31] Video Section Admin Bugs (#1125)

- Resolves deletion of video sections broken #1123 (Allow the deletion of video sections for which no thumbnail exists)
- Resolves Input validation for video section timestamps not working on Firefox #1124 (Firefox still allows letters in <input type="number"> fields. Manual validation via regex necessary)
---
 api/stream.go                                 | 30 +++++++++----------
 api/stream_test.go                            | 29 ------------------
 web/router.go                                 |  1 -
 .../course/manage/edit-video-sections.gohtml  | 24 ++++++++-------
 web/ts/video-sections.ts                      | 14 ++++++++-
 5 files changed, 41 insertions(+), 57 deletions(-)

diff --git a/api/stream.go b/api/stream.go
index cac67f15b..74c2a43f9 100644
--- a/api/stream.go
+++ b/api/stream.go
@@ -571,35 +571,35 @@ func (r streamRoutes) deleteVideoSection(c *gin.Context) {
 		return
 	}
 
-	file, err := r.FileDao.GetFileById(fmt.Sprintf("%d", old.FileID))
+	err = r.VideoSectionDao.Delete(uint(id))
 	if err != nil {
-		log.WithError(err).Error("can not find file")
+		log.WithError(err).Error("can not delete video-section")
 		_ = c.Error(tools.RequestError{
-			Status:        http.StatusNotFound,
-			CustomMessage: "can not find file",
+			Status:        http.StatusInternalServerError,
+			CustomMessage: "can not delete video-section",
 			Err:           err,
 		})
 		return
 	}
 
-	err = r.VideoSectionDao.Delete(uint(id))
-	if err != nil {
-		log.WithError(err).Error("can not delete video-section")
+	file, err := r.FileDao.GetFileById(fmt.Sprintf("%d", old.FileID))
+	if err != nil && !errors.Is(err, gorm.ErrRecordNotFound) {
+		log.WithError(err).Error("can not get video section thumbnail file")
 		_ = c.Error(tools.RequestError{
 			Status:        http.StatusInternalServerError,
-			CustomMessage: "can not delete video-section",
+			CustomMessage: "can not get video section thumbnail file",
 			Err:           err,
 		})
 		return
+	} else {
+		go func() {
+			err := DeleteVideoSectionImage(r.DaoWrapper.WorkerDao, file.Path)
+			if err != nil {
+				log.WithError(err).Error("failed to generate video section images")
+			}
+		}()
 	}
 
-	go func() {
-		err := DeleteVideoSectionImage(r.DaoWrapper.WorkerDao, file.Path)
-		if err != nil {
-			log.WithError(err).Error("failed to generate video section images")
-		}
-	}()
-
 	c.Status(http.StatusAccepted)
 }
 
diff --git a/api/stream_test.go b/api/stream_test.go
index 3b8420715..db1b59da2 100644
--- a/api/stream_test.go
+++ b/api/stream_test.go
@@ -539,35 +539,6 @@ func TestStreamVideoSections(t *testing.T) {
 				Middlewares:  testutils.GetMiddlewares(tools.ErrorHandler, testutils.TUMLiveContext(testutils.TUMLiveContextAdmin)),
 				ExpectedCode: http.StatusBadRequest,
 			},
-			"GetFileById returns error": {
-				Router: func(r *gin.Engine) {
-					wrapper := dao.DaoWrapper{
-						StreamsDao: testutils.GetStreamMock(t),
-						CoursesDao: testutils.GetCoursesMock(t),
-						VideoSectionDao: func() dao.VideoSectionDao {
-							sectionMock := mock_dao.NewMockVideoSectionDao(gomock.NewController(t))
-							sectionMock.
-								EXPECT().
-								Get(section.ID).
-								Return(section, nil).
-								AnyTimes()
-							return sectionMock
-						}(),
-						FileDao: func() dao.FileDao {
-							fileMock := mock_dao.NewMockFileDao(gomock.NewController(t))
-							fileMock.
-								EXPECT().
-								GetFileById(fmt.Sprintf("%d", section.ID)).
-								Return(model.File{}, errors.New("")).
-								AnyTimes()
-							return fileMock
-						}(),
-					}
-					configGinStreamRestRouter(r, wrapper)
-				},
-				Middlewares:  testutils.GetMiddlewares(tools.ErrorHandler, testutils.TUMLiveContext(testutils.TUMLiveContextAdmin)),
-				ExpectedCode: http.StatusNotFound,
-			},
 			"Delete returns error": {
 				Router: func(r *gin.Engine) {
 					wrapper := dao.DaoWrapper{
diff --git a/web/router.go b/web/router.go
index ce4bd6c36..455726a51 100755
--- a/web/router.go
+++ b/web/router.go
@@ -33,7 +33,6 @@ var templatePaths = []string{
 	"template/partial/*.gohtml",
 	"template/partial/stream/*.gohtml",
 	"template/partial/course/manage/*.gohtml",
-	"template/partial/stream/chat/*.gohtml",
 	"template/partial/course/manage/*.gohtml",
 	"template/partial/course/manage/create-lecture-form-slides/*.gohtml",
 }
diff --git a/web/template/partial/course/manage/edit-video-sections.gohtml b/web/template/partial/course/manage/edit-video-sections.gohtml
index c7992715f..71f1edf2f 100644
--- a/web/template/partial/course/manage/edit-video-sections.gohtml
+++ b/web/template/partial/course/manage/edit-video-sections.gohtml
@@ -1,8 +1,7 @@
 {{define "editvideosections"}}
-    <article
-            x-data="{ videoSectionController: new admin.VideoSectionsAdminController(lecture.lectureId), videoSections: [] }"
+    <article x-data="{ videoSectionController: new admin.VideoSectionsAdminController(lecture.lectureId) }"
             x-init="() => videoSectionController.init(`edit-video-sections-${lecture.lectureId}`, $el)"
-            @update="(e) => (videoSections = e.detail)" class="grid gap-y-3">
+            class="grid gap-y-3">
         <header class="flex justify-between items-center border-b dark:border-gray-600">
             <div class="flex items-center">
                 <h6 class="text-sm text-5 font-light">Video Sections</h6>
@@ -36,21 +35,24 @@
                 <span class="font-light">Unsaved Changes</span>
             </div>
         </header>
-        <form @submit.prevent="videoSectionController.publishNewSections()">
+        <form id = "new-section-form" @submit.prevent="videoSectionController.publishNewSections()">
             <div class="flex align-middle">
                 <input id="startHours"
+                       onkeyup="this.value=this.value.replace(/[^\d]/,'')"
                        x-model.number="videoSectionController.current.startHours"
                        type="number" min="0" max="23" step="1"
                        placeholder="0"
                        class="w-20 rounded px-4 py-3 tl-input">
                 <span class="px-2 my-auto font-semibold text-5">:</span>
                 <input id="startMinutes"
+                       onkeyup="this.value=this.value.replace(/[^\d]/,'')"
                        x-model.number="videoSectionController.current.startMinutes"
                        type="number" min="0" max="59" step="1"
                        placeholder="0"
                        class="w-20 rounded px-4 py-3 tl-input">
                 <span class="px-2 my-auto font-semibold text-5">:</span>
                 <input id="startSeconds"
+                       onkeyup="this.value=this.value.replace(/[^\d]/,'')"
                        x-model.number="videoSectionController.current.startSeconds"
                        type="number" min="0" max="59" step="1"
                        placeholder="0"
@@ -60,9 +62,9 @@
                        placeholder="Introduction"
                        class="mx-2 rounded px-4 py-3 tl-input">
                 <button type="button"
-                        class="w-fit bg-gray-100 text-center px-3 rounded w-full dark:bg-gray-600"
+                        class="w-fit bg-gray-100 text-center px-3 rounded dark:bg-gray-600"
                         @click="videoSectionController.pushNewSection()"
-                        :disabled="videoSectionController.current.description === ''">
+                        :disabled="!videoSectionController.currentIsValid()">
                     <i class="fa fa-plus text-3"></i>
                 </button>
             </div>
@@ -87,19 +89,19 @@
                         </template>
                     </article>
                     <div class="flex items-center justify-center grow py-2">
-                        <button class="rounded-lg text-center w-full py-2 font-semibold bg-blue-500 dark:bg-indigo-600"
-                                type="submit">
+                        <button type="submit" form="new-section-form" value="Submit"
+                                class="rounded-lg text-center w-full py-2 font-semibold bg-blue-500 dark:bg-indigo-600">
                             <span class="text-white text-sm">Save new sections</span>
                         </button>
                     </div>
                 </section>
             </template>
         </form>
-        <template x-if="videoSections.length > 0">
+        <template x-if="videoSectionController.existingSections.length > 0">
             <div class="">
                 <div class="grid gap-2">
-                    <template x-if="videoSections.length > 0">
-                        <template x-for="section in videoSections" :key="section.ID">
+                    <template x-if="videoSectionController.existingSections.length > 0">
+                        <template x-for="section in videoSectionController.existingSections" :key="section.ID">
                             <div x-data="{updater: {}}"
                                  x-init="updater = new admin.VideoSectionUpdater(lecture.lectureId, section);"
                                  class="flex align-middle items-stretch w-full border dark:border-gray-600 rounded">
diff --git a/web/ts/video-sections.ts b/web/ts/video-sections.ts
index 1bb6d74bb..d06d8045d 100644
--- a/web/ts/video-sections.ts
+++ b/web/ts/video-sections.ts
@@ -48,7 +48,6 @@ export class VideoSectionsAdminController {
 
     onUpdate(data: Section[]) {
         this.existingSections = data;
-        this.elem.dispatchEvent(new CustomEvent("update", { detail: this.existingSections }));
     }
 
     pushNewSection() {
@@ -75,6 +74,19 @@ export class VideoSectionsAdminController {
 
     async removeExistingSection(id: number) {
         await DataStore.videoSections.delete(this.streamId, id);
+        this.existingSections = this.existingSections.filter((s) => s.ID !== id);
+    }
+
+    currentIsValid(): boolean {
+        return (
+            this.current.description !== "" &&
+            this.current.startHours !== null &&
+            this.current.startMinutes < 32 &&
+            this.current.startMinutes !== null &&
+            this.current.startMinutes < 60 &&
+            this.current.startSeconds !== null &&
+            this.current.startSeconds < 60
+        );
     }
 
     private resetCurrent() {

From 246f60ae857cc2690ebb5bcabb8a93602e3efc76 Mon Sep 17 00:00:00 2001
From: matthias <matthias.reumann@tum.de>
Date: Mon, 21 Aug 2023 06:23:51 +0200
Subject: [PATCH 09/31] Change startMinutes to startHours (#1127)

---
 web/ts/video-sections.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/web/ts/video-sections.ts b/web/ts/video-sections.ts
index d06d8045d..7d73601e3 100644
--- a/web/ts/video-sections.ts
+++ b/web/ts/video-sections.ts
@@ -81,7 +81,7 @@ export class VideoSectionsAdminController {
         return (
             this.current.description !== "" &&
             this.current.startHours !== null &&
-            this.current.startMinutes < 32 &&
+            this.current.startHours < 32 &&
             this.current.startMinutes !== null &&
             this.current.startMinutes < 60 &&
             this.current.startSeconds !== null &&

From 3b522f406c477d37dbe9a5b3d0741a0a1832d4e6 Mon Sep 17 00:00:00 2001
From: matthias <matthias.reumann@tum.de>
Date: Tue, 22 Aug 2023 09:28:16 +0200
Subject: [PATCH 10/31] Remove hardcoded stream-id (#1130)

* Remove hardcoded stream-id

* Move init to video-information

* Fix websocket for popup chat
---
 web/template/popup-chat.gohtml         |  2 +-
 web/template/watch.gohtml              |  2 +-
 web/ts/api/chat-ws.ts                  |  2 +-
 web/ts/components/popup.ts             | 11 +++++++++++
 web/ts/components/video-information.ts |  4 +++-
 web/ts/components/video-interaction.ts |  1 +
 web/ts/entry/interactions.ts           |  1 +
 7 files changed, 19 insertions(+), 4 deletions(-)
 create mode 100644 web/ts/components/popup.ts

diff --git a/web/template/popup-chat.gohtml b/web/template/popup-chat.gohtml
index a4814fd2b..fce4c6638 100644
--- a/web/template/popup-chat.gohtml
+++ b/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">
+<body class="bg-white dark:bg-secondary h-screen" x-data="interaction.popupContext({{$stream.ID}})">
     {{template "chat-component" .}}
 </body>
diff --git a/web/template/watch.gohtml b/web/template/watch.gohtml
index 32f7dfefb..9330da3da 100644
--- a/web/template/watch.gohtml
+++ b/web/template/watch.gohtml
@@ -87,7 +87,7 @@
 <div id="watchPageMainWrapper">
     <input type="hidden" id="description" value="{{.Description}}">
     <input type="hidden" id="streamID" value="{{$stream.Model.ID}}">
-    <div x-data="interaction.videoInformationContext();"
+    <div x-data="interaction.videoInformationContext({{$stream.ID}});"
          class="flex flex-wrap shadow border bg-white dark:bg-secondary dark:shadow-0 dark:border-0">
         <div id="watchWrapper"
              x-data="{ 'chatEnabled': {{and $course.ChatEnabled $stream.ChatEnabled}} }"
diff --git a/web/ts/api/chat-ws.ts b/web/ts/api/chat-ws.ts
index 926bba8ea..6d538f55c 100644
--- a/web/ts/api/chat-ws.ts
+++ b/web/ts/api/chat-ws.ts
@@ -11,7 +11,7 @@ enum ChatMessageType {
 }
 
 export abstract class SocketConnections {
-    static ws: RealtimeFacade = new RealtimeFacade("chat/12845");
+    static ws: RealtimeFacade;
 }
 
 export type NewChatMessage = {
diff --git a/web/ts/components/popup.ts b/web/ts/components/popup.ts
new file mode 100644
index 000000000..d423a50d0
--- /dev/null
+++ b/web/ts/components/popup.ts
@@ -0,0 +1,11 @@
+import { AlpineComponent } from "./alpine-component";
+import { RealtimeFacade } from "../utilities/ws";
+import { SocketConnections } from "../api/chat-ws";
+
+export function popupContext(streamId: number): AlpineComponent {
+    return {
+        init() {
+            SocketConnections.ws = new RealtimeFacade("chat/" + streamId);
+        },
+    } as AlpineComponent;
+}
diff --git a/web/ts/components/video-information.ts b/web/ts/components/video-information.ts
index 0917ceb61..c4f96adf3 100644
--- a/web/ts/components/video-information.ts
+++ b/web/ts/components/video-information.ts
@@ -1,10 +1,11 @@
 import { AlpineComponent } from "./alpine-component";
 import { SocketConnections } from "../api/chat-ws";
 import { ToggleableElement } from "../utilities/ToggleableElement";
+import { RealtimeFacade } from "../utilities/ws";
 
 const CUTOFFLENGTH = 256;
 
-export function videoInformationContext(): AlpineComponent {
+export function videoInformationContext(streamId: number): AlpineComponent {
     // TODO: REST
     const descriptionEl = document.getElementById("description") as HTMLInputElement;
     return {
@@ -15,6 +16,7 @@ export function videoInformationContext(): AlpineComponent {
         showFullDescription: new ToggleableElement(),
 
         init() {
+            SocketConnections.ws = new RealtimeFacade("chat/" + streamId);
             Promise.all([this.initWebsocket()]);
         },
 
diff --git a/web/ts/components/video-interaction.ts b/web/ts/components/video-interaction.ts
index fe88f4b01..e38dfaa71 100644
--- a/web/ts/components/video-interaction.ts
+++ b/web/ts/components/video-interaction.ts
@@ -1,6 +1,7 @@
 import { AlpineComponent } from "./alpine-component";
 import { User } from "../api/users";
 import { SocketConnections } from "../api/chat-ws";
+import { RealtimeFacade } from "../utilities/ws";
 
 enum InteractionType {
     Chat,
diff --git a/web/ts/entry/interactions.ts b/web/ts/entry/interactions.ts
index 853129a0b..6afe2699f 100644
--- a/web/ts/entry/interactions.ts
+++ b/web/ts/entry/interactions.ts
@@ -4,3 +4,4 @@ export * from "../components/chat-prompt";
 export * from "../components/poll";
 export * from "../components/emoji-picker";
 export * from "../components/video-information";
+export * from "../components/popup";

From 19af0f03155bdf1a79e8d648d6afcdfd325a878d Mon Sep 17 00:00:00 2001
From: matthias <matthias.reumann@tum.de>
Date: Tue, 22 Aug 2023 10:11:43 +0200
Subject: [PATCH 11/31] Add my courses list to start page (#1128)

---
 web/template/home.gohtml | 34 ++++++++++++++++++++++++++++++++++
 1 file changed, 34 insertions(+)

diff --git a/web/template/home.gohtml b/web/template/home.gohtml
index 13a5f0513..abddff374 100644
--- a/web/template/home.gohtml
+++ b/web/template/home.gohtml
@@ -697,6 +697,40 @@
                         </article>
                     </template>
 
+                    <!-- my courses -->
+                    <template x-if="userCourses.length > 0">
+                        <article class="tum-live-content-grid-item my-3" id="my-courses">
+                            <h3><i class="fa-solid fa-graduation-cap mr-2"></i>My Courses</h3>
+                            <article class="grid gap-2 py-3 pl-2">
+                                <template x-for="course in userCourses.slice(0, 8)" :key="course.ID">
+                                    <section class="tum-live-course-list-item">
+                                        <a class="title"
+                                           :href="course.URL()"
+                                           @click.prevent="showCourse(course.Slug)"
+                                           x-text="course.Name">
+                                        </a>
+                                        <div class="links">
+                                            <span x-text="course.LastRecording.ID !== 0
+                                                    ? `Next lecture: ${course.LastRecording.FriendlyDateStart()}`
+                                                    : 'No upcoming lecture.'"></span>
+                                            <a x-cloak x-show="course.LastRecording.ID !== 0" :href="course.LastRecordingURL()">
+                                                <i class="fa-solid fa-square-up-right"></i>
+                                                <span class="hover:underline">Most recent lecture</span>
+                                            </a>
+                                        </div>
+                                    </section>
+                                </template>
+                            </article>
+                            <template x-if="userCourses.length > 8 && !state.isUserCourses()">
+                                <button @click="showUserCourses()"
+                                        class="tum-live-side-navigation-group-item hover ml-2">
+                                    <i class="fa-solid fa-chevron-right"></i>
+                                    Show all my courses
+                                </button>
+                            </template>
+                        </article>
+                    </template>
+
                     <!-- Recently -->
                     <template x-if="recently.hasElements()">
                         <article class="tum-live-content-grid-item" id="recent-vods">

From a470e129a4f147a35b386857d9e8ac6e97067772 Mon Sep 17 00:00:00 2001
From: matthias <matthias.reumann@tum.de>
Date: Tue, 22 Aug 2023 15:10:43 +0200
Subject: [PATCH 12/31] Course page updates (#1122)

* Add smart array

* Add GroupedSmartArray

* Update groupedsmartarray

* Add sorting

* Fix variable vod title length due to ellipsis button

* Update grid sizing

* Lint

* Add ts-ignore

* Fix lint (2)

* Fix lint (3)

* Lint

* Lint please work

* Lint :-)

* Fix download

* Update getMonthName
---
 web/template/home.gohtml       | 346 +++++++++++++++++----------------
 web/ts/api/courses.ts          |   4 +
 web/ts/components/course.ts    |  27 ++-
 web/ts/utilities/paginator.ts  |  28 +--
 web/ts/utilities/smartarray.ts |  66 +++++++
 5 files changed, 271 insertions(+), 200 deletions(-)
 create mode 100644 web/ts/utilities/smartarray.ts

diff --git a/web/template/home.gohtml b/web/template/home.gohtml
index abddff374..08695dd1a 100644
--- a/web/template/home.gohtml
+++ b/web/template/home.gohtml
@@ -344,203 +344,205 @@
                         {{end}}
                     </section>
                 </header>
-                <div class="grid gap-x-8 xl:grid-cols-3">
-                    <div :class="plannedStreams.hasElements() ? 'xl:col-span-2' : 'col-span-full'">
-                        <div x-data="home.livestreams((s) => s.Course.ID === course.ID)"
-                             x-init="$watch('course.ID', (id) => refilter((s) => s.Course.ID === id))"
-                             :class="{'tum-live-course-view-item' : hasLivestreams()}">
-                            <template x-if="hasLivestreams()">
-                                <section>
-                                    <template x-for="livestream in livestreams" :key="livestream.Stream.ID">
-                                        <article class="tum-live-stream-row" :id="`livestream-${livestream.Stream.ID}`">
-                                            <div class="aspect-video relative md:h-40">
-                                                <div class="absolute right-2 bottom-2 flex items-center space-x-2 text-xs font-semibold text-white z-40">
-                                                    <template x-if="livestream.InLectureHall()">
-                                                        <a class="tum-live-badge bg-black"
-                                                           target="_blank"
-                                                           :href="livestream.LectureHall.ExternalURL">
-                                                            <i class="fas fa-location-pin"></i>
-                                                            <span x-text="livestream.LectureHall.Name"></span>
-                                                        </a>
-                                                    </template>
-                                                    <span class="tum-live-badge bg-red-500 text-white uppercase">
+                <div class="grid gap-x-8 xl:grid-cols-3 grid-cols-1">
+                    <div x-data="home.livestreams((s) => s.Course.ID === course.ID)"
+                         x-init="$watch('course.ID', (id) => refilter((s) => s.Course.ID === id))"
+                         class="col-span-full"
+                         :class="{'tum-live-course-view-item' : hasLivestreams()}">
+                        <template x-if="hasLivestreams()">
+                            <section>
+                                <template x-for="livestream in livestreams" :key="livestream.Stream.ID">
+                                    <article class="tum-live-stream-row" :id="`livestream-${livestream.Stream.ID}`">
+                                        <div class="aspect-video relative md:h-40">
+                                            <div class="absolute right-2 bottom-2 flex items-center space-x-2 text-xs font-semibold text-white z-40">
+                                                <template x-if="livestream.InLectureHall()">
+                                                    <a class="tum-live-badge bg-black"
+                                                       target="_blank"
+                                                       :href="livestream.LectureHall.ExternalURL">
+                                                        <i class="fas fa-location-pin"></i>
+                                                        <span x-text="livestream.LectureHall.Name"></span>
+                                                    </a>
+                                                </template>
+                                                <span class="tum-live-badge bg-red-500 text-white uppercase">
                                                     <i class="fa-solid fa-satellite-dish"></i>
                                                     Live
                                                 </span>
-                                                </div>
-                                                <a :href="`/w/${livestream.Course.Slug}/${livestream.Stream.ID}`">
-                                                    <div :style="`background:url('/api/stream/${livestream.Stream.ID}/thumbs/live'), url('/thumb-fallback.png'); background-size: cover;`"
-                                                         class="h-full tum-live-thumbnail"></div>
-                                                </a>
                                             </div>
-                                            <div class="px-3">
-                                                <a class="title text-xl"
-                                                   :href="`/w/${livestream.Course.Slug}/${livestream.Stream.ID}`"
-                                                   x-text="livestream.Stream.Name"></a>
-                                                <span class="description text-sm mt-2"
-                                                      x-text="livestream.Stream.Description"></span>
-                                                <span class="date text-sm"
-                                                      x-text="livestream.Stream.UntilString()"></span>
-                                            </div>
-                                        </article>
-                                    </template>
-                                </section>
-                            </template>
-                        </div>
+                                            <a :href="`/w/${livestream.Course.Slug}/${livestream.Stream.ID}`">
+                                                <div :style="`background:url('/api/stream/${livestream.Stream.ID}/thumbs/live'), url('/thumb-fallback.png'); background-size: cover;`"
+                                                     class="h-full tum-live-thumbnail"></div>
+                                            </a>
+                                        </div>
+                                        <div class="px-3">
+                                            <a class="title text-xl"
+                                               :href="`/w/${livestream.Course.Slug}/${livestream.Stream.ID}`"
+                                               x-text="livestream.Stream.Name"></a>
+                                            <span class="description text-sm mt-2"
+                                                  x-text="livestream.Stream.Description"></span>
+                                            <span class="date text-sm"
+                                                  x-text="livestream.Stream.UntilString()"></span>
+                                        </div>
+                                    </article>
+                                </template>
+                            </section>
+                        </template>
+                    </div>
 
-                        <template x-if="upcomingStreams.hasElements()">
-                            <section class="tum-live-course-view-item">
-                                <section class="tum-live-upcoming">
-                                    <template x-for="upcoming in upcomingStreams.get()" :key="upcoming.ID">
-                                        <article class="tum-live-upcoming-item">
-                                            <span>Next lecture starts in </span><!--
+                    <template x-if="upcomingStreams.hasElements()">
+                        <section class="tum-live-course-view-item col-span-full">
+                            <section class="tum-live-upcoming">
+                                <template x-for="upcoming in upcomingStreams.get()" :key="upcoming.ID">
+                                    <article class="tum-live-upcoming-item">
+                                        <span>Next lecture starts in </span><!--
                                             --><span x-text="upcoming.MinutesLeftToStart()"></span><!--
                                             --><span> Minutes.</span>
-                                            <a :href="course.WatchURL(upcoming.ID)" class="underline"
-                                               title="Join waiting room">Join waiting room</a>
-                                        </article>
-                                    </template>
-                                </section>
+                                        <a :href="course.WatchURL(upcoming.ID)" class="underline"
+                                           title="Join waiting room">Join waiting room</a>
+                                    </article>
+                                </template>
                             </section>
-                        </template>
+                        </section>
+                    </template>
 
-                        <template x-if="courseStreams.hasElements()">
-                            <section class="tum-live-course-view-item">
-                                <header>
-                                    <h3 class="font-bold">VODs</h3>
-                                    <section class="space-x-2">
-                                        <button type="button" @click="sortNewestFirst()"
-                                                class="tum-live-button tum-live-button-tertiary"
-                                                :class="{'active' : isNewestFirst() }">
-                                            Newest first
-                                        </button>
-                                        <button type="button" @click="sortOldestFirst()"
+                    <template x-if="courseStreams.hasElements()">
+                        <section class="tum-live-course-view-item"
+                                 :class="plannedStreams.hasElements() ? 'col-span-2' : 'col-span-full'">
+                            <header>
+                                <h3 class="font-bold">VODs</h3>
+                                <section class="space-x-2">
+                                    <button type="button" @click="sortNewestFirst()"
+                                            class="tum-live-button tum-live-button-tertiary"
+                                            :class="{'active' : isNewestFirst() }">
+                                        Newest first
+                                    </button>
+                                    <button type="button" @click="sortOldestFirst()"
+                                            class="tum-live-button tum-live-button-tertiary"
+                                            :class="{'active' : isOldestFirst() }">
+                                        Oldest first
+                                    </button>
+                                    {{if $user}}
+                                        <button type="button" @click="toggleShowWatched()"
                                                 class="tum-live-button tum-live-button-tertiary"
-                                                :class="{'active' : isOldestFirst() }">
-                                            Oldest first
+                                                :class="{'active' : isHideWatched() }">
+                                            Hide watched
                                         </button>
-                                        {{if $user}}
-                                            <button type="button" @click="toggleShowWatched()"
-                                                    class="tum-live-button tum-live-button-tertiary"
-                                                    :class="{'active' : isHideWatched() }">
-                                                Hide watched
-                                            </button>
-                                        {{end}}
-                                    </section>
-                                </header>
-                                <section>
-                                    <article class="grid gap-3"
-                                             :class="plannedStreams.hasElements()
-                                                ? 'xl:grid-cols-3 lg:grid-cols-2 grid-cols-1'
-                                                : 'xl:grid-cols-4 lg:grid-cols-3 md:grid-cols-2 grid-cols-1'">
+                                    {{end}}
+                                </section>
+                            </header>
+                            <section>
+                                <template x-if="courseStreams.hasElements()">
+                                    <article class="flex flex-col" :class="{'flex-col-reverse' : isOldestFirst() }">
                                         <template
-                                                x-for="vod in courseStreams.get(sortFn(streamSortMode), filterPred(streamFilterMode))"
-                                                :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">
-                                                        <div :id="`vod-progress-${vod.ID}`"
-                                                             class="tum-live-thumbnail-progress">
-                                                            <div>
-                                                                <template x-if="vod.Progress !== undefined">
-                                                    <span :style="`width: ${vod.Progress.Percentage()}%`"
-                                                          :class="{'rounded-br-lg': vod.Progress.HasProgressOne()}"></span>
-                                                                </template>
-                                                            </div>
-                                                        </div>
-                                                        <div class="flex space-x-1 absolute text-white bottom-4 right-2 z-40 text-xs">
-                                                            <div x-cloak x-show="vod.Progress?.watched"
-                                                                 class="bg-black/[.8] rounded-full px-2 py-1 text-white">
-                                                                <i class="fa-solid fa-eye mr-0"></i>
-                                                            </div>
-                                                            <div class="tum-live-badge bg-black/[.8]">
-                                                                <span x-text="vod.DurationString()"></span>
-                                                            </div>
-                                                        </div>
-                                                    </div>
-                                                </a>
-                                                <div class="relative flex justify-between px-1 min-h-[32px]">
-                                                    <div>
-                                                        <template x-if="vod.HasName()">
-                                                            <a class="title" :href="course.WatchURL(vod.ID)"
-                                                               x-text="vod.Name"></a>
-                                                        </template>
-                                                        <span class="date text-sm"
-                                                              x-text="vod.FriendlyDateStart()"></span>
-                                                    </div>
-                                                    <button type="button" @click="vod.Dropdown.toggle()"
-                                                            class="md:group-hover:block md:hidden px-2">
-                                                        <i class="fa-solid fa-ellipsis-vertical"></i>
-                                                    </button>
-                                                    <template x-if="vod.Dropdown.value">
-                                                        <div class="absolute tum-live-menu py-px bottom-full right-0 h-fit overflow-hidden z-50 w-56">
-                                                            {{if $user}}
-                                                                <button type="button"
-                                                                        @click="vod.Progress.ToggleWatched()"
-                                                                        class="tum-live-menu-item">
-                                                                    <i class="fa-solid mr-4"
-                                                                       :class="vod.Progress.watched
-                                                                ? 'fa-eye-slash'
-                                                                : 'fa-eye'"></i>
-                                                                    <span class="block"
-                                                                          x-text="vod.Progress.watched
-                                                                ? 'Unmark as watched'
-                                                                : 'Mark as watched'"></span>
+                                                x-for="[m, streams] of Object.entries(courseStreams.get(sortFn(streamSortMode), filterPred(streamFilterMode)))">
+                                            <article class="mb-8">
+                                                <header class="mb-2">
+                                                    <h6 class="font-semibold" x-text="getMonthName(m)"></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'">
+                                                    <template x-for="vod in streams" :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">
+                                                                    <div :id="`vod-progress-${vod.ID}`"
+                                                                         class="tum-live-thumbnail-progress">
+                                                                        <div>
+                                                                            <template
+                                                                                    x-if="vod.Progress !== undefined">
+                                                                                    <span :style="`width: ${vod.Progress.Percentage()}%`"
+                                                                                          :class="{'rounded-br-lg': vod.Progress.HasProgressOne()}"></span>
+                                                                            </template>
+                                                                        </div>
+                                                                    </div>
+                                                                    <div class="flex space-x-1 absolute text-white bottom-4 right-2 z-40 text-xs">
+                                                                        <div x-cloak x-show="vod.Progress?.watched"
+                                                                             class="bg-black/[.8] rounded-full px-2 py-1 text-white">
+                                                                            <i class="fa-solid fa-eye mr-0"></i>
+                                                                        </div>
+                                                                        <div class="tum-live-badge bg-black/[.8]">
+                                                                            <span x-text="vod.DurationString()"></span>
+                                                                        </div>
+                                                                    </div>
+                                                                </div>
+                                                            </a>
+                                                            <div class="relative flex justify-between px-1 min-h-[32px]">
+                                                                <div>
+                                                                    <template x-if="vod.HasName()">
+                                                                        <a class="title"
+                                                                           :href="course.WatchURL(vod.ID)"
+                                                                           x-text="vod.Name"></a>
+                                                                    </template>
+                                                                    <span class="date text-sm"
+                                                                          x-text="vod.FriendlyDateStart()"></span>
+                                                                </div>
+                                                                <button type="button" @click="vod.Dropdown.toggle()"
+                                                                        class="md:group-hover:opacity-100 md:opacity-0 px-2">
+                                                                    <i class="fa-solid fa-ellipsis-vertical"></i>
                                                                 </button>
-                                                            {{end}}
-                                                            <button type="button" @click="copyHLS(vod, vod.Dropdown)"
-                                                                    class="tum-live-menu-item">
-                                                                <i class="fa-solid fa-link mr-4"></i>
-                                                                <span class="block">Copy HLS URL</span>
-                                                            </button>
-                                                            {{if $user}}
-                                                                <template
-                                                                        x-if="course.DownloadsEnabled && vod.HasDownloads()">
-                                                                    <div>
+                                                                <template x-if="vod.Dropdown.value">
+                                                                    <div class="absolute tum-live-menu py-px bottom-full right-0 h-fit overflow-hidden z-50 w-56">
+                                                                        {{if $user}}
+                                                                            <button type="button"
+                                                                                    @click="vod.Progress.ToggleWatched()"
+                                                                                    class="tum-live-menu-item">
+                                                                                <i class="fa-solid mr-4"
+                                                                                   :class="vod.Progress.watched ? 'fa-eye-slash' : 'fa-eye'"></i>
+                                                                                <span class="block"
+                                                                                      x-text="vod.Progress.watched ? 'Unmark as watched' : 'Mark as watched'"></span>
+                                                                            </button>
+                                                                        {{end}}
                                                                         <button type="button"
-                                                                                @click="vod.Dropdown.getChild('downloads').toggle()"
+                                                                                @click="copyHLS(vod, vod.Dropdown)"
                                                                                 class="tum-live-menu-item">
-                                                                            <i class="fa-solid fa-cloud-arrow-down mr-4"></i>
-                                                                            <span class="block">Download</span>
-                                                                            <i class="fa-solid ml-auto"
-                                                                               :class="vod.Dropdown.getChild('downloads').value ? 'fa-chevron-up' : 'fa-chevron-down'"></i>
+                                                                            <i class="fa-solid fa-link mr-4"></i>
+                                                                            <span class="block">Copy HLS URL</span>
                                                                         </button>
-                                                                        <div x-cloak
-                                                                             x-show="vod.Dropdown.getChild('downloads').value"
-                                                                             class="grid gap-1">
-                                                                            <template x-for="file in vod.Downloads">
-                                                                                <a href="" download
-                                                                                   class="block text-left hover:bg-gray-100 dark:hover:bg-gray-800 py-2 px-4"
-                                                                                   x-text="file.FriendlyName">
-                                                                                </a>
+                                                                        {{if $user}}
+                                                                            <template
+                                                                                    x-if="course.DownloadsEnabled && vod.HasDownloads()">
+                                                                                <div>
+                                                                                    <button type="button"
+                                                                                            @click="vod.Dropdown.getChild('downloads').toggle()"
+                                                                                            class="tum-live-menu-item">
+                                                                                        <i class="fa-solid fa-cloud-arrow-down mr-4"></i>
+                                                                                        <span class="block">Download</span>
+                                                                                        <i class="fa-solid ml-auto"
+                                                                                           :class="vod.Dropdown.getChild('downloads').value ? 'fa-chevron-up' : 'fa-chevron-down'"></i>
+                                                                                    </button>
+                                                                                    <div x-cloak
+                                                                                         x-show="vod.Dropdown.getChild('downloads').value"
+                                                                                         class="grid gap-1">
+                                                                                        <template
+                                                                                                x-for="file in vod.Downloads">
+                                                                                            <a :href="file.DownloadURL" download
+                                                                                               class="block text-left hover:bg-gray-100 dark:hover:bg-gray-800 py-2 px-4"
+                                                                                               x-text="file.FriendlyName">
+                                                                                            </a>
+                                                                                        </template>
+                                                                                    </div>
+                                                                                </div>
                                                                             </template>
-                                                                        </div>
+                                                                        {{end}}
                                                                     </div>
                                                                 </template>
-                                                            {{end}}
-                                                        </div>
+                                                            </div>
+                                                        </article>
                                                     </template>
-                                                </div>
+                                                </section>
                                             </article>
                                         </template>
                                     </article>
-                                    <template x-if="courseStreams.hasNext()">
-                                        <div class="flex flex-grow justify-center mt-8">
-                                            <button class="tum-live-button tum-live-button-secondary" type="button"
-                                                    @click="courseStreams.next()">
-                                                <i class="fa-solid fa-angles-down mr-2"></i>
-                                                More
-                                            </button>
-                                        </div>
-                                    </template>
-                                </section>
+                                </template>
                             </section>
-                        </template>
-                    </div>
+                        </section>
+                    </template>
                     <template x-if="plannedStreams.hasElements()">
-                        <section class="tum-live-course-view-item xl:col-span-1">
+                        <section class="tum-live-course-view-item px-3">
                             <header>
                                 <h3>Scheduled</h3>
                             </header>
diff --git a/web/ts/api/courses.ts b/web/ts/api/courses.ts
index f1ae39ed8..11eb7d636 100644
--- a/web/ts/api/courses.ts
+++ b/web/ts/api/courses.ts
@@ -45,6 +45,10 @@ export class Stream implements Identifiable {
         return new Date(this.Start).toLocaleString("default", { month: "short" });
     }
 
+    public NumericMonthOfStart(): number {
+        return new Date(this.Start).getMonth() + 1;
+    }
+
     public DayOfStart(): number {
         return new Date(this.Start).getDate();
     }
diff --git a/web/ts/components/course.ts b/web/ts/components/course.ts
index a17bb58f9..69ac23916 100644
--- a/web/ts/components/course.ts
+++ b/web/ts/components/course.ts
@@ -7,6 +7,7 @@ import { AlpineComponent } from "./alpine-component";
 import { Tunnel } from "../utilities/tunnels";
 import { ToggleableElement } from "../utilities/ToggleableElement";
 import { getFromStorage, setInStorage } from "../utilities/storage";
+import { GroupedSmartArray, SmartArray } from "../utilities/smartarray";
 
 export enum StreamSortMode {
     NewestFirst,
@@ -28,7 +29,7 @@ export function courseContext(slug: string, year: number, term: string, userId:
 
         course: new Course() as Course,
 
-        courseStreams: new Paginator<Stream>([], 8, (s: Stream) => s.FetchThumbnail()),
+        courseStreams: new GroupedSmartArray<Stream, number>([], (_) => 0),
         plannedStreams: new Paginator<Stream>([], 3),
         upcomingStreams: new Paginator<Stream>([], 3),
 
@@ -62,11 +63,8 @@ export function courseContext(slug: string, year: number, term: string, userId:
                     this.plannedStreams.set(this.course.Planned.reverse()).reset();
                     this.upcomingStreams.set(this.course.Upcoming).reset();
                     this.loadProgresses(this.course.Recordings.map((s: Stream) => s.ID)).then((progresses) => {
-                        this.courseStreams
-                            .set(this.course.Recordings)
-                            .forEach((s: Stream, i) => (s.Progress = progresses[i]))
-                            .reset()
-                            .preload(this.sortFn(this.streamSortMode));
+                        this.course.Recordings.forEach((s: Stream, i) => (s.Progress = progresses[i]));
+                        this.courseStreams.set(this.course.Recordings, (s: Stream) => s.NumericMonthOfStart());
                     });
                     console.log("🌑 init course", this.course);
                 });
@@ -137,6 +135,23 @@ export function courseContext(slug: string, year: number, term: string, userId:
             dropdown.toggle(false);
         },
 
+        getMonthName(m: number): string {
+            return [
+                "January",
+                "February",
+                "March",
+                "April",
+                "May",
+                "June",
+                "July",
+                "August",
+                "September",
+                "October",
+                "November",
+                "December",
+            ][m - 1];
+        },
+
         async loadCourse() {
             this.course = await CoursesAPI.get(this.slug, this.year, this.term, this.userId);
         },
diff --git a/web/ts/utilities/paginator.ts b/web/ts/utilities/paginator.ts
index a0a49331e..7f6d775b3 100644
--- a/web/ts/utilities/paginator.ts
+++ b/web/ts/utilities/paginator.ts
@@ -1,12 +1,13 @@
-export class Paginator<T> {
-    protected list: T[];
-    protected split_number: number;
-    protected index: number;
+import { CompareFunction, FilterPredicate, SmartArray } from "./smartarray";
 
+export class Paginator<T> extends SmartArray<T> {
     private readonly preloader: Preload<T>;
 
+    protected split_number: number;
+    protected index: number;
+
     constructor(list: T[], split_number: number, preloader?: Preload<T>) {
-        this.list = list;
+        super(list);
         this.split_number = split_number;
         this.index = 1;
         this.preloader = preloader;
@@ -19,11 +20,6 @@ export class Paginator<T> {
             : copy.slice(0, this.index * this.split_number);
     }
 
-    set(list: T[]): Paginator<T> {
-        this.list = list;
-        return this;
-    }
-
     next(all = false) {
         this.index = all ? this.list.length / this.split_number : this.index + 1;
         this.preload();
@@ -33,19 +29,10 @@ export class Paginator<T> {
         return Math.ceil(this.list.length / this.split_number) >= this.index + 1;
     }
 
-    forEach(callback: (obj: T, i: number) => void): Paginator<T> {
-        this.list.forEach(callback);
-        return this;
-    }
-
     find(callback: (obj: T, i: number, arr?: T[]) => boolean): T {
         return this.list.find(callback);
     }
 
-    hasElements() {
-        return this.list.length > 0;
-    }
-
     reset(): Paginator<T> {
         this.index = 1;
         return this;
@@ -76,6 +63,3 @@ export class AutoPaginator<T> extends Paginator<T> {
 }
 
 type Preload<T> = (o: T) => void;
-
-type CompareFunction<T> = (a: T, b: T) => number;
-type FilterPredicate<T> = (o: T) => boolean;
diff --git a/web/ts/utilities/smartarray.ts b/web/ts/utilities/smartarray.ts
new file mode 100644
index 000000000..a3a2a592e
--- /dev/null
+++ b/web/ts/utilities/smartarray.ts
@@ -0,0 +1,66 @@
+export class SmartArray<T> {
+    protected list: T[];
+
+    constructor(list: T[]) {
+        this.list = list;
+    }
+
+    get(sortFn?: CompareFunction<T>, filterPred?: FilterPredicate<T>): T[] {
+        const copy = filterPred ? [...this.list].filter(filterPred) : [...this.list];
+        return sortFn ? copy.sort(sortFn) : copy;
+    }
+
+    set(list: T[]): SmartArray<T> {
+        this.list = list;
+        return this;
+    }
+
+    forEach(callback: (obj: T, i: number) => void): SmartArray<T> {
+        this.list.forEach(callback);
+        return this;
+    }
+
+    hasElements() {
+        return this.list.length > 0;
+    }
+}
+
+export class GroupedSmartArray<T, K extends keyof never> {
+    private list: T[];
+    private key: (i: T) => K;
+
+    constructor(list: T[], key: (i: T) => K) {
+        this.list = list;
+        this.key = key;
+    }
+
+    get(sortFn?: CompareFunction<T>, filterPred?: FilterPredicate<T>) {
+        const copy = filterPred ? [...this.list].filter(filterPred) : [...this.list];
+        const _list = sortFn ? copy.sort(sortFn) : copy;
+        return groupBy(_list, this.key);
+    }
+
+    set(list: T[], key: (i: T) => K): GroupedSmartArray<T, K> {
+        this.list = list;
+        this.key = key;
+        return this;
+    }
+
+    hasElements() {
+        return this.list.length > 0;
+    }
+}
+
+export type CompareFunction<T> = (a: T, b: T) => number;
+export type FilterPredicate<T> = (o: T) => boolean;
+
+/* eslint-disable */
+function groupBy<T, K extends keyof never>(list: T[], getKey: (item: T) => K) {
+    /* eslint-disable */
+    return list.reduce(function (previous, currentItem) {
+        const group = getKey(currentItem);
+        if (!previous[group]) previous[group] = [];
+        previous[group].push(currentItem);
+        return previous;
+    }, {} as Record<K, T[]>);
+}

From acc65f813161c81318c6ede914dff3d3fddb86e7 Mon Sep 17 00:00:00 2001
From: Joscha Henningsen <44805696+joschahenningsen@users.noreply.github.com>
Date: Tue, 22 Aug 2023 20:50:15 +0200
Subject: [PATCH 13/31] fix duration on video thumbnails (#1132)

* fix duration on video thumbnails

* remove unneccessary imports
---
 api/worker_grpc.go    | 3 ++-
 dao/video-seek.go     | 4 ++--
 go.work.sum           | 7 +------
 model/stream.go       | 9 ++++++++-
 web/ts/api/courses.ts | 8 ++------
 5 files changed, 15 insertions(+), 16 deletions(-)

diff --git a/api/worker_grpc.go b/api/worker_grpc.go
index cd6415403..4415dea62 100644
--- a/api/worker_grpc.go
+++ b/api/worker_grpc.go
@@ -3,6 +3,7 @@ package api
 // worker_grpc.go handles communication with workers via grpc
 import (
 	"context"
+	"database/sql"
 	"encoding/json"
 	"errors"
 	"fmt"
@@ -387,7 +388,7 @@ func (s server) NotifyTranscodingFinished(ctx context.Context, request *pb.Trans
 	}
 
 	if request.Duration != 0 {
-		stream.Duration = request.Duration
+		stream.Duration = sql.NullInt32{Int32: int32(request.Duration)}
 	}
 	err = s.DaoWrapper.StreamsDao.SaveStream(&stream)
 	if err != nil {
diff --git a/dao/video-seek.go b/dao/video-seek.go
index 46a8e9f3e..d4de19a0e 100644
--- a/dao/video-seek.go
+++ b/dao/video-seek.go
@@ -31,12 +31,12 @@ func (d videoSeekDao) Add(streamID string, pos float64) error {
 		return err
 	}
 
-	if (pos / float64(stream.Duration)) > 1 {
+	if (pos / float64(stream.Duration.Int32)) > 1 {
 		log.Error("position is bigger than stream duration")
 		return errors.New("position is bigger than stream duration")
 	}
 
-	chunkTimeRange := float64(stream.Duration) / maxChunksPerVideo
+	chunkTimeRange := float64(stream.Duration.Int32) / maxChunksPerVideo
 	chunk := uint(pos / chunkTimeRange)
 
 	return DB.Clauses(clause.OnConflict{
diff --git a/go.work.sum b/go.work.sum
index 121a21a59..b32177595 100644
--- a/go.work.sum
+++ b/go.work.sum
@@ -1,6 +1,4 @@
 github.com/cespare/xxhash v1.1.0 h1:a6HrQnmkObjyL+Gs60czilIUGqrzKutQD6XZog3p+ko=
-github.com/go-sql-driver/mysql v1.7.1 h1:lUIinVbN1DY0xBg0eMOzmmtGoHwWBbvnWubQUrtU8EI=
-github.com/go-sql-driver/mysql v1.7.1/go.mod h1:OXbVy3sEdcQ2Doequ6Z5BW6fXNQTmx+9S1MCJN5yJMI=
 github.com/golang-jwt/jwt v3.2.2+incompatible h1:IfV12K8xAKAnZqdXVzCZ+TOjboZ2keLg81eXfW3O+oY=
 github.com/pelletier/go-toml v1.9.3 h1:zeC5b1GviRUyKYd6OJPvBU/mcVDVoL1OhT17FCt5dSQ=
 github.com/rogpeppe/go-internal v1.10.0/go.mod h1:UQnix2H7Ngw/k4C5ijL5+65zddjncjaFoBhdsK/akog=
@@ -11,9 +9,6 @@ golang.org/x/crypto v0.9.0/go.mod h1:yrmDGqONDYtNj3tH8X9dzUun2m2lzPa9ngI6/RUPGR0
 golang.org/x/net v0.10.0 h1:X2//UzNDwYmtCLn7To6G58Wr6f5ahEAQgKNzv9Y951M=
 golang.org/x/net v0.10.0/go.mod h1:0qNGK6F8kojg2nk9dLZ2mShWaEBan6FAoqfSigmmuDg=
 golang.org/x/sys v0.8.0 h1:EBmGv8NaZBZTWvrbjNoL6HVt+IVy3QDQpJs7VRIw3tU=
-golang.org/x/sys v0.8.0/go.mod h1:oPkhp1MJrh7nUepCBck5+mAzfO9JrbApNNgaTdGDITg=
 golang.org/x/term v0.8.0/go.mod h1:xPskH00ivmX89bAKVGSKKtLOWNx2+17Eiy94tnKShWo=
+google.golang.org/genproto v0.0.0-20230803162519-f966b187b2e5 h1:L6iMMGrtzgHsWofoFcihmDEMYeDR9KN/ThbPWGrh++g=
 gorm.io/gorm v1.25.1 h1:nsSALe5Pr+cM3V1qwwQ7rOkw+6UeLrX5O4v3llhHa64=
-gorm.io/gorm v1.25.1/go.mod h1:L4uxeKpfBml98NYqVqwAdmV1a2nBtAec/cf3fpucW/k=
-mvdan.cc/xurls/v2 v2.5.0 h1:lyBNOm8Wo71UknhUs4QTFUNNMyxy2JEIaKKo0RWOh+8=
-mvdan.cc/xurls/v2 v2.5.0/go.mod h1:yQgaGQ1rFtJUzkmKiHYSSfuQxqfYmd//X6PxvholpeE=
diff --git a/model/stream.go b/model/stream.go
index 855c13990..6fac079af 100755
--- a/model/stream.go
+++ b/model/stream.go
@@ -1,6 +1,7 @@
 package model
 
 import (
+	"database/sql"
 	"encoding/json"
 	"fmt"
 	"github.com/gin-gonic/gin"
@@ -47,7 +48,7 @@ type Stream struct {
 	Files                 []File `gorm:"foreignKey:StreamID"`
 	ThumbInterval         uint32 `gorm:"default:null"`
 	StreamName            string
-	Duration              uint32           `gorm:"default:null"`
+	Duration              sql.NullInt32    `gorm:"default:null"`
 	StreamWorkers         []Worker         `gorm:"many2many:stream_workers;"`
 	StreamProgresses      []StreamProgress `gorm:"foreignKey:StreamID"`
 	VideoSections         []VideoSection
@@ -369,6 +370,7 @@ type StreamDTO struct {
 	Downloads   []DownloadableVod
 	Start       time.Time
 	End         time.Time
+	Duration    int32
 }
 
 func (s Stream) ToDTO() StreamDTO {
@@ -376,6 +378,10 @@ func (s Stream) ToDTO() StreamDTO {
 	if s.IsDownloadable() {
 		downloads = s.GetVodFiles()
 	}
+	duration := int32(s.End.Sub(s.Start).Seconds())
+	if s.Duration.Valid {
+		duration = s.Duration.Int32
+	}
 	return StreamDTO{
 		ID:          s.ID,
 		Name:        s.Name,
@@ -387,5 +393,6 @@ func (s Stream) ToDTO() StreamDTO {
 		HLSUrl:      s.HLSUrl(),
 		Start:       s.Start,
 		End:         s.End,
+		Duration:    duration,
 	}
 }
diff --git a/web/ts/api/courses.ts b/web/ts/api/courses.ts
index 11eb7d636..a69bd9915 100644
--- a/web/ts/api/courses.ts
+++ b/web/ts/api/courses.ts
@@ -20,6 +20,7 @@ export class Stream implements Identifiable {
     readonly End: string;
     readonly Start: string;
     readonly Downloads: DownloadableVOD[];
+    readonly Duration: number;
 
     Progress?: Progress;
 
@@ -70,12 +71,7 @@ export class Stream implements Identifiable {
     }
 
     public DurationString() {
-        const diff = new Date(this.End).getTime() - new Date(this.Start).getTime();
-        return new Date(diff).toLocaleTimeString("default", {
-            hour: "2-digit",
-            minute: "2-digit",
-            second: "2-digit",
-        });
+        return new Date(this.Duration * 1000).toISOString().slice(11, 19);
     }
 
     public UntilString(): string {

From 6fac47ba0ce5aa964f9fc6614d39239fd29c6f08 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Josef=20Sch=C3=B6nberger?=
 <82521952+JosefSchoenberger@users.noreply.github.com>
Date: Wed, 23 Aug 2023 08:28:05 +0200
Subject: [PATCH 14/31] Exclude course admins from chat rate limit (#1134)

---
 model/chat.go | 29 ++++++++++++++++-------------
 1 file changed, 16 insertions(+), 13 deletions(-)

diff --git a/model/chat.go b/model/chat.go
index a62fd6a8f..80daebe1c 100644
--- a/model/chat.go
+++ b/model/chat.go
@@ -3,14 +3,15 @@ package model
 import (
 	"database/sql"
 	"errors"
-	"github.com/microcosm-cc/bluemonday"
-	"github.com/russross/blackfriday/v2"
-	"gorm.io/gorm"
 	"html"
-	"mvdan.cc/xurls/v2"
 	"strconv"
 	"strings"
 	"time"
+
+	"github.com/microcosm-cc/bluemonday"
+	"github.com/russross/blackfriday/v2"
+	"gorm.io/gorm"
+	"mvdan.cc/xurls/v2"
 )
 
 var (
@@ -88,15 +89,17 @@ func (c *Chat) BeforeCreate(tx *gorm.DB) (err error) {
 	if len(c.Message) == 0 {
 		return ErrMessageNoText
 	}
-	var recentMessages int64
-	err = tx.Model(&Chat{}).
-		Where("created_at > ? AND user_id = ?", time.Now().Add(-coolDown), c.UserID).
-		Count(&recentMessages).Error
-	if err != nil {
-		return err
-	}
-	if recentMessages >= coolDownMessages {
-		return ErrCooledDown
+	if !c.Admin {
+		var recentMessages int64
+		err = tx.Model(&Chat{}).
+			Where("created_at > ? AND user_id = ?", time.Now().Add(-coolDown), c.UserID).
+			Count(&recentMessages).Error
+		if err != nil {
+			return err
+		}
+		if recentMessages >= coolDownMessages {
+			return ErrCooledDown
+		}
 	}
 
 	// set chat color:

From 8519c75fbf136eeb3cb707514d754988aabd7264 Mon Sep 17 00:00:00 2001
From: Joscha Henningsen <joscha.henningsen@tum.de>
Date: Wed, 23 Aug 2023 08:51:42 +0200
Subject: [PATCH 15/31] Fix: add lecturehalls to create-lecture-form-slide

---
 .../create-lecture-form-slides/lecture-details-slide.gohtml     | 2 ++
 web/template/partial/course/manage/create-lecture-form.gohtml   | 2 +-
 2 files changed, 3 insertions(+), 1 deletion(-)

diff --git a/web/template/partial/course/manage/create-lecture-form-slides/lecture-details-slide.gohtml b/web/template/partial/course/manage/create-lecture-form-slides/lecture-details-slide.gohtml
index ceb9fd062..a3be796ea 100644
--- a/web/template/partial/course/manage/create-lecture-form-slides/lecture-details-slide.gohtml
+++ b/web/template/partial/course/manage/create-lecture-form-slides/lecture-details-slide.gohtml
@@ -1,4 +1,6 @@
 {{define "lecture-details-slide"}}
+
+    {{- /*gotype: github.com/joschahenningsen/TUM-Live/web.EditCourseData*/ -}}
     {{$course := .IndexData.TUMLiveContext.Course}}
     <span class="text-sm text-5 pl-2">Options</span>
     <div class="col-span-full flex gap-3 px-2 py-2">
diff --git a/web/template/partial/course/manage/create-lecture-form.gohtml b/web/template/partial/course/manage/create-lecture-form.gohtml
index 368ed7f51..7fbe0b474 100644
--- a/web/template/partial/course/manage/create-lecture-form.gohtml
+++ b/web/template/partial/course/manage/create-lecture-form.gohtml
@@ -52,7 +52,7 @@
 
             {{- /* Tab 2 */ -}}
             <div x-show="currentTab === 1" class="grid grid-cols-2 space-x-2">
-                {{template "lecture-details-slide"}}
+                {{template "lecture-details-slide" .}}
             </div>
 
             {{- /* Tab 3 */ -}}

From c57bef94a2e73cc9e2b392aeefbbfacecd6368ff Mon Sep 17 00:00:00 2001
From: Joscha Henningsen <44805696+joschahenningsen@users.noreply.github.com>
Date: Wed, 23 Aug 2023 12:19:14 +0200
Subject: [PATCH 16/31] load stream progresses in one query (#1136)

* load stream progresses in one query

* fixes and test fixes
---
 api/progress.go      | 34 +++++++++++++++++-----------------
 api/progress_test.go |  8 ++++----
 dao/progress.go      |  6 +++---
 mock_dao/progress.go | 10 +++++-----
 web/watch.go         |  6 +++---
 5 files changed, 32 insertions(+), 32 deletions(-)

diff --git a/api/progress.go b/api/progress.go
index 45382b894..d390fe410 100644
--- a/api/progress.go
+++ b/api/progress.go
@@ -2,7 +2,6 @@ package api
 
 import (
 	"errors"
-	"github.com/getsentry/sentry-go"
 	"github.com/joschahenningsen/TUM-Live/dao"
 	"github.com/joschahenningsen/TUM-Live/model"
 	"github.com/joschahenningsen/TUM-Live/tools"
@@ -204,25 +203,26 @@ func (r progressRoutes) getProgressBatch(c *gin.Context) {
 		ids = append(ids, uint(id))
 	}
 
-	streamProgresses := make([]model.StreamProgress, len(ids))
+	progressResults := make([]model.StreamProgress, len(ids))
+	streamProgresses, err := r.LoadProgress(tumLiveContext.User.ID, ids)
+	if err != nil && !errors.Is(err, gorm.ErrRecordNotFound) {
+		_ = c.Error(tools.RequestError{
+			Status:        http.StatusInternalServerError,
+			CustomMessage: "can not load progress",
+			Err:           err,
+		})
+		return
+	}
 	for i, id := range ids {
-		p, err := r.LoadProgress(tumLiveContext.User.ID, id)
-		if err != nil {
-			if errors.Is(err, gorm.ErrRecordNotFound) {
-				streamProgresses[i] = model.StreamProgress{StreamID: id}
-			} else {
-				sentry.CaptureException(err)
-				_ = c.Error(tools.RequestError{
-					Err:           err,
-					Status:        http.StatusInternalServerError,
-					CustomMessage: "can't retrieve streamProgresses for user",
-				})
-				return
+		progressResults[i] = model.StreamProgress{StreamID: id}
+		for _, progress := range streamProgresses {
+			if progress.StreamID == id {
+				progressResults[i].Progress = progress.Progress
+				progressResults[i].Watched = progress.Watched
+				break
 			}
-		} else {
-			streamProgresses[i] = p
 		}
 	}
 
-	c.JSON(http.StatusOK, streamProgresses)
+	c.JSON(http.StatusOK, progressResults)
 }
diff --git a/api/progress_test.go b/api/progress_test.go
index bea9a103b..0e2427f24 100644
--- a/api/progress_test.go
+++ b/api/progress_test.go
@@ -157,7 +157,7 @@ func TestUserProgress(t *testing.T) {
 							progressMock.
 								EXPECT().
 								LoadProgress(testutils.TUMLiveContextStudent.User.ID, gomock.Any()).
-								Return(model.StreamProgress{}, errors.New(""))
+								Return([]model.StreamProgress{}, errors.New(""))
 							return progressMock
 						}(),
 					}
@@ -175,7 +175,7 @@ func TestUserProgress(t *testing.T) {
 							progressMock.
 								EXPECT().
 								LoadProgress(testutils.TUMLiveContextStudent.User.ID, gomock.Any()).
-								Return(model.StreamProgress{}, gorm.ErrRecordNotFound)
+								Return([]model.StreamProgress{}, gorm.ErrRecordNotFound)
 							return progressMock
 						}(),
 					}
@@ -194,7 +194,7 @@ func TestUserProgress(t *testing.T) {
 							progressMock.
 								EXPECT().
 								LoadProgress(testutils.TUMLiveContextStudent.User.ID, gomock.Any()).
-								Return(model.StreamProgress{StreamID: 16, Watched: true, Progress: 0.5}, nil).
+								Return([]model.StreamProgress{{StreamID: 16, Watched: true, Progress: 0.5}}, nil).
 								AnyTimes()
 							return progressMock
 						}(),
@@ -214,7 +214,7 @@ func TestUserProgress(t *testing.T) {
 							progressMock.
 								EXPECT().
 								LoadProgress(testutils.TUMLiveContextStudent.User.ID, gomock.Any()).
-								Return(model.StreamProgress{StreamID: 16, Watched: true, Progress: 0.5}, nil)
+								Return([]model.StreamProgress{{StreamID: 16, Watched: true, Progress: 0.5}}, nil)
 							return progressMock
 						}(),
 					}
diff --git a/dao/progress.go b/dao/progress.go
index 2898b7587..e88332273 100644
--- a/dao/progress.go
+++ b/dao/progress.go
@@ -13,7 +13,7 @@ var Progress = NewProgressDao()
 type ProgressDao interface {
 	SaveProgresses(progresses []model.StreamProgress) error
 	GetProgressesForUser(userID uint) ([]model.StreamProgress, error)
-	LoadProgress(userID uint, streamID uint) (streamProgress model.StreamProgress, err error)
+	LoadProgress(userID uint, streamIDs []uint) (streamProgress []model.StreamProgress, err error)
 	SaveWatchedState(progress *model.StreamProgress) error
 }
 
@@ -47,7 +47,7 @@ func (d progressDao) SaveWatchedState(progress *model.StreamProgress) error {
 }
 
 // LoadProgress retrieves the current StreamProgress from the database for a given user and stream.
-func (d progressDao) LoadProgress(userID uint, streamID uint) (streamProgress model.StreamProgress, err error) {
-	err = DB.First(&streamProgress, "user_id = ? AND stream_id = ?", userID, streamID).Error
+func (d progressDao) LoadProgress(userID uint, streamIDs []uint) (streamProgress []model.StreamProgress, err error) {
+	err = DB.Find(&streamProgress, "user_id = ? AND stream_id IN ?", userID, streamIDs).Error
 	return streamProgress, err
 }
diff --git a/mock_dao/progress.go b/mock_dao/progress.go
index 053f06bb1..8cdd5baf8 100644
--- a/mock_dao/progress.go
+++ b/mock_dao/progress.go
@@ -50,18 +50,18 @@ func (mr *MockProgressDaoMockRecorder) GetProgressesForUser(userID interface{})
 }
 
 // LoadProgress mocks base method.
-func (m *MockProgressDao) LoadProgress(userID, streamID uint) (model.StreamProgress, error) {
+func (m *MockProgressDao) LoadProgress(userID uint, streamIDs []uint) ([]model.StreamProgress, error) {
 	m.ctrl.T.Helper()
-	ret := m.ctrl.Call(m, "LoadProgress", userID, streamID)
-	ret0, _ := ret[0].(model.StreamProgress)
+	ret := m.ctrl.Call(m, "LoadProgress", userID, streamIDs)
+	ret0, _ := ret[0].([]model.StreamProgress)
 	ret1, _ := ret[1].(error)
 	return ret0, ret1
 }
 
 // LoadProgress indicates an expected call of LoadProgress.
-func (mr *MockProgressDaoMockRecorder) LoadProgress(userID, streamID interface{}) *gomock.Call {
+func (mr *MockProgressDaoMockRecorder) LoadProgress(userID, streamIDs interface{}) *gomock.Call {
 	mr.mock.ctrl.T.Helper()
-	return mr.mock.ctrl.RecordCallWithMethodType(mr.mock, "LoadProgress", reflect.TypeOf((*MockProgressDao)(nil).LoadProgress), userID, streamID)
+	return mr.mock.ctrl.RecordCallWithMethodType(mr.mock, "LoadProgress", reflect.TypeOf((*MockProgressDao)(nil).LoadProgress), userID, streamIDs)
 }
 
 // SaveProgresses mocks base method.
diff --git a/web/watch.go b/web/watch.go
index 4494a22d4..afb58c6c6 100644
--- a/web/watch.go
+++ b/web/watch.go
@@ -84,14 +84,14 @@ func (r mainRoutes) WatchPage(c *gin.Context) {
 	// Check for fetching progress
 	if tumLiveContext.User != nil && tumLiveContext.Stream.Recording {
 
-		progress, err := dao.Progress.LoadProgress(tumLiveContext.User.ID, tumLiveContext.Stream.ID)
+		progress, err := dao.Progress.LoadProgress(tumLiveContext.User.ID, []uint{tumLiveContext.Stream.ID})
 		if err != nil {
 			data.Progress = model.StreamProgress{Progress: 0}
 			if !errors.Is(err, gorm.ErrRecordNotFound) {
 				log.WithError(err).Warn("Couldn't fetch progress from the database.")
 			}
-		} else {
-			data.Progress = progress
+		} else if len(progress) > 0 {
+			data.Progress = progress[0]
 		}
 	}
 	if c.Query("restart") == "1" {

From 721f5cc19b380ce134a43fa3d423d89e39c47fb3 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Josef=20Sch=C3=B6nberger?=
 <82521952+JosefSchoenberger@users.noreply.github.com>
Date: Wed, 23 Aug 2023 13:26:21 +0200
Subject: [PATCH 17/31] Prolong maximum chat message length to 1000 characters
 (#1135)

* Prolong maximum chat message length to 1000 characters

* Fix ESLint and server-side check
---
 model/chat.go                       |  2 +-
 web/template/components/chat.gohtml |  8 ++++----
 web/ts/components/chat-prompt.ts    | 11 +++++++++--
 3 files changed, 14 insertions(+), 7 deletions(-)

diff --git a/model/chat.go b/model/chat.go
index 80daebe1c..05bc35721 100644
--- a/model/chat.go
+++ b/model/chat.go
@@ -37,7 +37,7 @@ var (
 )
 
 const (
-	maxMessageLength = 250
+	maxMessageLength = 1000
 	coolDown         = time.Minute * 2
 	coolDownMessages = 5 // 5 messages -> 5 messages per 2 minutes max
 )
diff --git a/web/template/components/chat.gohtml b/web/template/components/chat.gohtml
index 07e2331bd..0d34d4b4e 100644
--- a/web/template/components/chat.gohtml
+++ b/web/template/components/chat.gohtml
@@ -288,11 +288,11 @@
                             </button>
                         </template>
                     </section>
-                    <article class="flex flex-col space-y-2 px-5 border-t dark:border-gray-800 py-2 font-light">
+                    <article class="flex flex-col space-y-2 px-3 border-t dark:border-gray-800 py-2 font-light">
                         <label class="grow">
-                            <input id="chat-input" type="text" spellcheck="true" maxlength="200"
+                            <textarea id="chat-input" type="text" spellcheck="true" maxlength="1000"
                                    @keyup="keyup()"
-                                   @keyup.enter="send()"
+                                   @keyup.enter="send(event)"
                                    @keyup.esc="cancelReply()"
                                    :disabled="!isLoggedIn()"
                                    x-model="message"
@@ -505,4 +505,4 @@
                 </template>
             </article>
         </template>
-{{end}}
\ No newline at end of file
+{{end}}
diff --git a/web/ts/components/chat-prompt.ts b/web/ts/components/chat-prompt.ts
index 94d524a53..55eaf50c2 100644
--- a/web/ts/components/chat-prompt.ts
+++ b/web/ts/components/chat-prompt.ts
@@ -21,7 +21,7 @@ export function chatPromptContext(streamId: number): AlpineComponent {
 
         ws: new ChatWebsocketConnection(SocketConnections.ws),
 
-        inputEl: document.getElementById("chat-input") as HTMLInputElement,
+        inputEl: document.getElementById("chat-input") as HTMLTextAreaElement,
         usersEl: document.getElementById("chat-user-list") as HTMLInputElement,
         emojiEl: document.getElementById("chat-emoji-list") as HTMLInputElement,
 
@@ -41,7 +41,10 @@ export function chatPromptContext(streamId: number): AlpineComponent {
             this.users.reset();
         },
 
-        send() {
+        send(event: KeyboardEvent) {
+            if (event.shiftKey) {
+                return;
+            }
             console.log("🌑 send message '", this.message, "'");
             this.ws.sendMessage({
                 msg: this.message,
@@ -84,6 +87,10 @@ export function chatPromptContext(streamId: number): AlpineComponent {
             } else if (this.emojis.hasSuggestions()) {
                 this.emojiEl.focus();
             }
+
+            // https://stackoverflow.com/a/21079335
+            this.inputEl.style.height = "0px";
+            this.inputEl.style.height = this.inputEl.scrollHeight + "px";
         },
 
         keypressAlphanumeric(e) {

From 805c3c3d8180428693ee23eadb4793494c16fbb2 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Josef=20Sch=C3=B6nberger?=
 <82521952+JosefSchoenberger@users.noreply.github.com>
Date: Wed, 23 Aug 2023 16:13:31 +0200
Subject: [PATCH 18/31] Improve semester selection in home sidebar (#1139)

Adds /20xx to all winter semesters in the semester selection sidebar.
Also increases bottom margin on the currently selected semester.
---
 web/template/home.gohtml | 4 ++--
 web/ts/api/semesters.ts  | 3 ++-
 2 files changed, 4 insertions(+), 3 deletions(-)

diff --git a/web/template/home.gohtml b/web/template/home.gohtml
index 08695dd1a..e36d43b15 100644
--- a/web/template/home.gohtml
+++ b/web/template/home.gohtml
@@ -150,7 +150,7 @@
                 <i class="fa-solid fa-calendar"></i>
                 Semesters
             </header>
-            <span class="tum-live-side-navigation-group-item mb-1 border-l-4 bg-blue-100/50 border-blue-500/50 dark:bg-indigo-500/25 dark:border-indigo-600/50"
+            <span class="tum-live-side-navigation-group-item mb-4 border-l-4 bg-blue-100/50 border-blue-500/50 dark:bg-indigo-500/25 dark:border-indigo-600/50"
                   x-text="semesters[selectedSemesterIndex]?.FriendlyString()"></span>
             <template x-if="navigation.getChild('allSemesters').value">
                 <template x-for="s in semesters">
@@ -832,4 +832,4 @@
             </div>
         </div>
     </div>
-{{end}}
\ No newline at end of file
+{{end}}
diff --git a/web/ts/api/semesters.ts b/web/ts/api/semesters.ts
index ea9d4e3fc..70758f3eb 100644
--- a/web/ts/api/semesters.ts
+++ b/web/ts/api/semesters.ts
@@ -15,7 +15,8 @@ export class Semester {
     }
 
     public FriendlyString(): string {
-        return `${this.TeachingTerm === "W" ? "Winter" : "Summer"} ${this.Year}`;
+        if (this.TeachingTerm === "W") return `Winter ${this.Year}/` + `${this.Year + 1}`.slice(-2);
+        else return `Summer ${this.Year}`;
     }
 }
 

From 8d3e387e4f8d80aaae758ff28b3d069df7b0d359 Mon Sep 17 00:00:00 2001
From: Joscha Henningsen <44805696+joschahenningsen@users.noreply.github.com>
Date: Thu, 24 Aug 2023 10:05:36 +0200
Subject: [PATCH 19/31] Migrate go module and imports to TUM-Dev (#1141)

* replace joschahenningsen/tum-live with tum-dev/gocast

* restore .idea
---
 .github/workflows/deploy-server.yml              |  2 +-
 .github/workflows/deploy-workers.yml             |  2 +-
 .github/workflows/ts-deploy.yml                  |  4 ++--
 api/audit.go                                     |  6 +++---
 api/audit_test.go                                | 10 +++++-----
 api/bookmarks.go                                 |  6 +++---
 api/bookmarks_test.go                            | 10 +++++-----
 api/chat.go                                      |  8 ++++----
 api/chat_test.go                                 | 10 +++++-----
 api/courseimport.go                              |  6 +++---
 api/courses.go                                   |  8 ++++----
 api/courses_test.go                              | 10 +++++-----
 api/download.go                                  |  6 +++---
 api/download_ics.go                              |  6 +++---
 api/download_ics_test.go                         | 10 +++++-----
 api/download_test.go                             | 10 +++++-----
 api/info-pages.go                                |  6 +++---
 api/info-pages_test.go                           | 10 +++++-----
 api/lecture_halls.go                             |  6 +++---
 api/lecture_halls_test.go                        | 10 +++++-----
 api/live_update.go                               | 10 +++++-----
 api/maintenance.go                               |  6 +++---
 api/notifications.go                             |  6 +++---
 api/notifications_test.go                        | 10 +++++-----
 api/progress.go                                  |  6 +++---
 api/progress_test.go                             | 10 +++++-----
 api/realtime.go                                  |  6 +++---
 api/router.go                                    |  4 ++--
 api/search.go                                    |  4 ++--
 api/seek_stats.go                                |  2 +-
 api/seek_stats_test.go                           |  8 ++++----
 api/semesters.go                                 |  4 ++--
 api/server-notifications.go                      |  6 +++---
 api/statistics.go                                |  6 +++---
 api/statistics_test.go                           | 10 +++++-----
 api/stream.go                                    | 12 ++++++------
 api/stream_test.go                               | 10 +++++-----
 api/token.go                                     |  6 +++---
 api/token_test.go                                | 10 +++++-----
 api/users.go                                     |  6 +++---
 api/users_test.go                                | 10 +++++-----
 api/voice_service_grpc.go                        |  8 ++++----
 api/worker.go                                    |  4 ++--
 api/worker_grpc.go                               | 12 ++++++------
 api/worker_test.go                               |  8 ++++----
 api/wsHub.go                                     |  6 +++---
 cmd/modelGen/daoTemplate.tmpl                    |  2 +-
 cmd/tumlive/tumlive.go                           | 12 ++++++------
 dao/audit.go                                     |  2 +-
 dao/bookmark.go                                  |  2 +-
 dao/camera-preset.go                             |  2 +-
 dao/chat.go                                      |  2 +-
 dao/courses.go                                   |  2 +-
 dao/email.go                                     |  2 +-
 dao/file.go                                      |  2 +-
 dao/info-page.go                                 |  2 +-
 dao/ingest_server.go                             |  2 +-
 dao/lecture_halls.go                             |  2 +-
 dao/migrations/202201280.go                      |  2 +-
 dao/migrations/202207240.go                      |  2 +-
 dao/migrations/202208100.go                      |  2 +-
 dao/migrations/202208110.go                      |  2 +-
 dao/migrations/202210270.go                      |  2 +-
 dao/migrations/202212010.go                      |  2 +-
 dao/migrator.go                                  |  2 +-
 dao/notifications.go                             |  2 +-
 dao/progress.go                                  |  2 +-
 dao/server-notification.go                       |  2 +-
 dao/statistics.go                                |  4 ++--
 dao/streams.go                                   |  2 +-
 dao/subtitles.go                                 |  2 +-
 dao/token.go                                     |  2 +-
 dao/transcoding-failure.go                       |  2 +-
 dao/upload_key.go                                |  2 +-
 dao/users.go                                     |  2 +-
 dao/video-section.go                             |  2 +-
 dao/video-seek.go                                |  2 +-
 dao/worker.go                                    |  2 +-
 go.mod                                           |  4 ++--
 go.sum                                           |  4 ++--
 mock_dao/audit.go                                |  2 +-
 mock_dao/bookmark.go                             |  2 +-
 mock_dao/camera-preset.go                        |  2 +-
 mock_dao/chat.go                                 |  2 +-
 mock_dao/courses.go                              |  4 ++--
 mock_dao/email.go                                |  2 +-
 mock_dao/file.go                                 |  2 +-
 mock_dao/info-page.go                            |  2 +-
 mock_dao/ingest_server.go                        |  2 +-
 mock_dao/lecture_halls.go                        |  4 ++--
 mock_dao/notifications.go                        |  2 +-
 mock_dao/progress.go                             |  2 +-
 mock_dao/server-notification.go                  |  2 +-
 mock_dao/statistics.go                           |  4 ++--
 mock_dao/streams.go                              |  4 ++--
 mock_dao/subtitles.go                            |  2 +-
 mock_dao/token.go                                |  4 ++--
 mock_dao/transcoding-failure.go                  |  2 +-
 mock_dao/upload_key.go                           |  2 +-
 mock_dao/users.go                                |  2 +-
 mock_dao/video-section.go                        |  2 +-
 mock_dao/video-seek.go                           |  2 +-
 mock_dao/worker.go                               |  2 +-
 mock_tools/mock_camera/camera.go                 |  2 +-
 mock_tools/presets.go                            |  4 ++--
 renovate.json                                    |  2 +-
 tools/bot/bot.go                                 |  4 ++--
 tools/bot/matrix.go                              |  2 +-
 tools/camera/axis.go                             |  2 +-
 tools/camera/camera.go                           |  2 +-
 tools/camera/panasonic.go                        |  2 +-
 tools/email.go                                   |  2 +-
 tools/functions.go                               |  2 +-
 tools/meiliExporter.go                           |  2 +-
 tools/middlewares.go                             |  6 +++---
 tools/presets.go                                 |  6 +++---
 tools/realtime/connector/melody.go               |  2 +-
 tools/stats_export.dart.go                       |  2 +-
 tools/stream-signing.go                          |  2 +-
 tools/testutils/testdata.go                      | 10 +++++-----
 tools/testutils/testutils.go                     |  2 +-
 tools/tum/campus-online-base.go                  |  4 ++--
 tools/tum/courses.go                             |  6 +++---
 tools/tum/events.go                              |  6 +++---
 tools/tum/ldap.go                                |  4 ++--
 tools/tum/students.go                            |  6 +++---
 vod-service/cmd/vod-service/main.go              |  2 +-
 vod-service/go.mod                               |  2 +-
 web/admin.go                                     |  8 ++++----
 web/course.go                                    |  4 ++--
 web/index.go                                     |  8 ++++----
 web/package.json                                 |  6 +++---
 web/popup.go                                     |  2 +-
 web/router.go                                    |  4 ++--
 web/saml.go                                      |  6 +++---
 web/template/admin/admin.gohtml                  |  2 +-
 .../admin/admin_tabs/create-course.gohtml        |  2 +-
 web/template/admin/admin_tabs/edit-course.gohtml |  2 +-
 web/template/admin/admin_tabs/info-pages.gohtml  |  4 ++--
 .../admin/admin_tabs/lecture_halls.gohtml        |  2 +-
 .../admin/admin_tabs/notifications.gohtml        |  2 +-
 web/template/admin/admin_tabs/schedule.gohtml    |  2 +-
 .../admin/admin_tabs/server-notifications.gohtml |  2 +-
 web/template/admin/admin_tabs/stats.gohtml       |  2 +-
 web/template/admin/admin_tabs/token.gohtml       |  2 +-
 web/template/admin/admin_tabs/workers.gohtml     |  4 ++--
 web/template/admin/lecture-cut.gohtml            |  2 +-
 web/template/admin/lecture-units.gohtml          |  2 +-
 web/template/admin/opt-out.gohtml                |  2 +-
 web/template/components/chat.gohtml              |  2 +-
 web/template/course-card.gohtml                  |  2 +-
 web/template/course-overview.gohtml              |  2 +-
 web/template/course_list.gohtml                  |  2 +-
 web/template/edit-course-by-token.gohtml         |  2 +-
 web/template/error.gohtml                        |  2 +-
 web/template/header.gohtml                       |  2 +-
 web/template/home.gohtml                         | 10 +++++-----
 web/template/index.gohtml                        |  2 +-
 web/template/info-page.gohtml                    |  2 +-
 web/template/onboarding.gohtml                   |  2 +-
 .../course/manage/course-admin-management.gohtml |  2 +-
 .../manage/course-lecture-management.gohtml      |  2 +-
 .../partial/course/manage/course_actions.gohtml  |  2 +-
 .../partial/course/manage/course_settings.gohtml |  4 ++--
 .../lecture-details-slide.gohtml                 |  2 +-
 .../course/manage/create-lecture-form.gohtml     |  2 +-
 .../course/manage/external-participants.gohtml   |  2 +-
 .../course/manage/lecture-management-card.gohtml |  2 +-
 web/template/partial/info-dropdown.gohtml        | 16 ++++++++--------
 web/template/partial/stream/actions.gohtml       |  2 +-
 web/template/partial/stream/watch-info.gohtml    |  2 +-
 web/template/passwordreset.gohtml                |  2 +-
 web/template/planned_course_list.gohtml          |  2 +-
 web/template/popup-chat.gohtml                   |  2 +-
 web/template/semester-selection.gohtml           |  2 +-
 web/template/user-settings.gohtml                |  4 ++--
 web/template/video_only.gohtml                   |  2 +-
 web/template/vod_course_list.gohtml              |  2 +-
 web/template/watch.gohtml                        |  2 +-
 web/user.go                                      |  8 ++++----
 web/watch.go                                     |  8 ++++----
 worker/Dockerfile                                |  2 +-
 worker/README.md                                 |  2 +-
 worker/api/api_server.go                         |  6 +++---
 worker/api/api_server_test.go                    |  4 ++--
 worker/client/main.go                            |  2 +-
 worker/cmd/worker/worker.go                      | 10 +++++-----
 worker/edge/Dockerfile                           |  2 +-
 worker/edge/go.mod                               |  2 +-
 worker/go.mod                                    |  2 +-
 worker/rest/rest.go                              |  2 +-
 worker/rest/selfstream.go                        |  6 +++---
 worker/rest/selfstream_test.go                   |  2 +-
 worker/rest/vod_upload.go                        |  2 +-
 worker/worker/notify.go                          |  4 ++--
 worker/worker/persist.go                         |  2 +-
 worker/worker/premiere.go                        |  2 +-
 worker/worker/request_handlers.go                |  4 ++--
 worker/worker/request_handlers_test.go           |  4 ++--
 worker/worker/status.go                          |  6 +++---
 worker/worker/stream.go                          |  2 +-
 worker/worker/transcode.go                       |  4 ++--
 worker/worker/upload.go                          |  2 +-
 worker/worker/upload_test.go                     |  2 +-
 worker/worker/waveform.go                        |  2 +-
 worker/worker/worker.go                          |  4 ++--
 206 files changed, 408 insertions(+), 408 deletions(-)

diff --git a/.github/workflows/deploy-server.yml b/.github/workflows/deploy-server.yml
index 8e6a67241..9fd2df484 100644
--- a/.github/workflows/deploy-server.yml
+++ b/.github/workflows/deploy-server.yml
@@ -16,7 +16,7 @@ jobs:
         id: meta
         uses: docker/metadata-action@v4
         with:
-          images: ghcr.io/joschahenningsen/tum-live/tum-live
+          images: ghcr.io/tum-dev/gocast/tum-live
           tags: |
             type=ref,event=branch
             type=ref,event=pr
diff --git a/.github/workflows/deploy-workers.yml b/.github/workflows/deploy-workers.yml
index 15907c3b3..569edb0d4 100644
--- a/.github/workflows/deploy-workers.yml
+++ b/.github/workflows/deploy-workers.yml
@@ -24,7 +24,7 @@ jobs:
         id: meta
         uses: docker/metadata-action@v4
         with:
-          images: ghcr.io/joschahenningsen/tum-live/${{ env.containername }}
+          images: ghcr.io/tum-dev/gocast/${{ env.containername }}
           tags: |
             type=sha
           flavor: |
diff --git a/.github/workflows/ts-deploy.yml b/.github/workflows/ts-deploy.yml
index 51b564585..c852ecc11 100644
--- a/.github/workflows/ts-deploy.yml
+++ b/.github/workflows/ts-deploy.yml
@@ -20,7 +20,7 @@ jobs:
         id: meta
         uses: docker/metadata-action@v4
         with:
-          images: ghcr.io/joschahenningsen/tum-live/test-server
+          images: ghcr.io/tum-dev/gocast/test-server
           tags: |
             type=sha
           flavor: |
@@ -46,7 +46,7 @@ jobs:
         id: metaWorker
         uses: docker/metadata-action@v4
         with:
-          images: ghcr.io/joschahenningsen/tum-live/test-worker
+          images: ghcr.io/tum-dev/gocast/test-worker
           tags: |
             type=sha
           flavor: |
diff --git a/api/audit.go b/api/audit.go
index d85483392..61dec7725 100644
--- a/api/audit.go
+++ b/api/audit.go
@@ -3,9 +3,9 @@ package api
 import (
 	"errors"
 	"github.com/gin-gonic/gin"
-	"github.com/joschahenningsen/TUM-Live/dao"
-	"github.com/joschahenningsen/TUM-Live/model"
-	"github.com/joschahenningsen/TUM-Live/tools"
+	"github.com/TUM-Dev/gocast/dao"
+	"github.com/TUM-Dev/gocast/model"
+	"github.com/TUM-Dev/gocast/tools"
 	"gorm.io/gorm"
 	"net/http"
 )
diff --git a/api/audit_test.go b/api/audit_test.go
index 1b554aa5e..186c71546 100644
--- a/api/audit_test.go
+++ b/api/audit_test.go
@@ -3,11 +3,11 @@ package api
 import (
 	"github.com/gin-gonic/gin"
 	"github.com/golang/mock/gomock"
-	"github.com/joschahenningsen/TUM-Live/dao"
-	"github.com/joschahenningsen/TUM-Live/mock_dao"
-	"github.com/joschahenningsen/TUM-Live/model"
-	"github.com/joschahenningsen/TUM-Live/tools"
-	"github.com/joschahenningsen/TUM-Live/tools/testutils"
+	"github.com/TUM-Dev/gocast/dao"
+	"github.com/TUM-Dev/gocast/mock_dao"
+	"github.com/TUM-Dev/gocast/model"
+	"github.com/TUM-Dev/gocast/tools"
+	"github.com/TUM-Dev/gocast/tools/testutils"
 	"github.com/matthiasreumann/gomino"
 	"net/http"
 	"testing"
diff --git a/api/bookmarks.go b/api/bookmarks.go
index 5e45f8dd6..353709961 100644
--- a/api/bookmarks.go
+++ b/api/bookmarks.go
@@ -3,9 +3,9 @@ package api
 import (
 	"errors"
 	"github.com/gin-gonic/gin"
-	"github.com/joschahenningsen/TUM-Live/dao"
-	"github.com/joschahenningsen/TUM-Live/model"
-	"github.com/joschahenningsen/TUM-Live/tools"
+	"github.com/TUM-Dev/gocast/dao"
+	"github.com/TUM-Dev/gocast/model"
+	"github.com/TUM-Dev/gocast/tools"
 	"gorm.io/gorm"
 	"net/http"
 	"strconv"
diff --git a/api/bookmarks_test.go b/api/bookmarks_test.go
index 9cba23510..fa4aee13f 100644
--- a/api/bookmarks_test.go
+++ b/api/bookmarks_test.go
@@ -5,11 +5,11 @@ import (
 	"fmt"
 	"github.com/gin-gonic/gin"
 	"github.com/golang/mock/gomock"
-	"github.com/joschahenningsen/TUM-Live/dao"
-	"github.com/joschahenningsen/TUM-Live/mock_dao"
-	"github.com/joschahenningsen/TUM-Live/model"
-	"github.com/joschahenningsen/TUM-Live/tools"
-	"github.com/joschahenningsen/TUM-Live/tools/testutils"
+	"github.com/TUM-Dev/gocast/dao"
+	"github.com/TUM-Dev/gocast/mock_dao"
+	"github.com/TUM-Dev/gocast/model"
+	"github.com/TUM-Dev/gocast/tools"
+	"github.com/TUM-Dev/gocast/tools/testutils"
 	"github.com/matthiasreumann/gomino"
 	"gorm.io/gorm"
 	"net/http"
diff --git a/api/chat.go b/api/chat.go
index 715f62518..bc6b575ab 100644
--- a/api/chat.go
+++ b/api/chat.go
@@ -12,10 +12,10 @@ import (
 
 	"gorm.io/gorm"
 
-	"github.com/joschahenningsen/TUM-Live/dao"
-	"github.com/joschahenningsen/TUM-Live/model"
-	"github.com/joschahenningsen/TUM-Live/tools"
-	"github.com/joschahenningsen/TUM-Live/tools/realtime"
+	"github.com/TUM-Dev/gocast/dao"
+	"github.com/TUM-Dev/gocast/model"
+	"github.com/TUM-Dev/gocast/tools"
+	"github.com/TUM-Dev/gocast/tools/realtime"
 
 	"github.com/getsentry/sentry-go"
 	"github.com/gin-gonic/gin"
diff --git a/api/chat_test.go b/api/chat_test.go
index 2037e561f..e9986d22a 100644
--- a/api/chat_test.go
+++ b/api/chat_test.go
@@ -7,11 +7,11 @@ import (
 
 	"github.com/gin-gonic/gin"
 	"github.com/golang/mock/gomock"
-	"github.com/joschahenningsen/TUM-Live/dao"
-	"github.com/joschahenningsen/TUM-Live/mock_dao"
-	"github.com/joschahenningsen/TUM-Live/model"
-	"github.com/joschahenningsen/TUM-Live/tools"
-	"github.com/joschahenningsen/TUM-Live/tools/testutils"
+	"github.com/TUM-Dev/gocast/dao"
+	"github.com/TUM-Dev/gocast/mock_dao"
+	"github.com/TUM-Dev/gocast/model"
+	"github.com/TUM-Dev/gocast/tools"
+	"github.com/TUM-Dev/gocast/tools/testutils"
 	"github.com/matthiasreumann/gomino"
 	"gorm.io/gorm"
 )
diff --git a/api/courseimport.go b/api/courseimport.go
index 287554888..77e81a55d 100644
--- a/api/courseimport.go
+++ b/api/courseimport.go
@@ -8,9 +8,9 @@ import (
 	campusonline "github.com/RBG-TUM/CAMPUSOnline"
 	"github.com/getsentry/sentry-go"
 	"github.com/gin-gonic/gin"
-	"github.com/joschahenningsen/TUM-Live/model"
-	"github.com/joschahenningsen/TUM-Live/tools"
-	"github.com/joschahenningsen/TUM-Live/tools/tum"
+	"github.com/TUM-Dev/gocast/model"
+	"github.com/TUM-Dev/gocast/tools"
+	"github.com/TUM-Dev/gocast/tools/tum"
 	uuid "github.com/satori/go.uuid"
 	log "github.com/sirupsen/logrus"
 	"html/template"
diff --git a/api/courses.go b/api/courses.go
index f286e3469..2ae7e1ef7 100644
--- a/api/courses.go
+++ b/api/courses.go
@@ -8,10 +8,10 @@ import (
 	"github.com/RBG-TUM/commons"
 	"github.com/getsentry/sentry-go"
 	"github.com/gin-gonic/gin"
-	"github.com/joschahenningsen/TUM-Live/dao"
-	"github.com/joschahenningsen/TUM-Live/model"
-	"github.com/joschahenningsen/TUM-Live/tools"
-	"github.com/joschahenningsen/TUM-Live/tools/tum"
+	"github.com/TUM-Dev/gocast/dao"
+	"github.com/TUM-Dev/gocast/model"
+	"github.com/TUM-Dev/gocast/tools"
+	"github.com/TUM-Dev/gocast/tools/tum"
 	"github.com/meilisearch/meilisearch-go"
 	uuid "github.com/satori/go.uuid"
 	log "github.com/sirupsen/logrus"
diff --git a/api/courses_test.go b/api/courses_test.go
index 270691467..dcc979f8e 100644
--- a/api/courses_test.go
+++ b/api/courses_test.go
@@ -7,11 +7,11 @@ import (
 	"github.com/dgraph-io/ristretto"
 	"github.com/gin-gonic/gin"
 	"github.com/golang/mock/gomock"
-	"github.com/joschahenningsen/TUM-Live/dao"
-	"github.com/joschahenningsen/TUM-Live/mock_dao"
-	"github.com/joschahenningsen/TUM-Live/model"
-	"github.com/joschahenningsen/TUM-Live/tools"
-	"github.com/joschahenningsen/TUM-Live/tools/testutils"
+	"github.com/TUM-Dev/gocast/dao"
+	"github.com/TUM-Dev/gocast/mock_dao"
+	"github.com/TUM-Dev/gocast/model"
+	"github.com/TUM-Dev/gocast/tools"
+	"github.com/TUM-Dev/gocast/tools/testutils"
 	"github.com/matthiasreumann/gomino"
 	"github.com/u2takey/go-utils/uuid"
 	"gorm.io/gorm"
diff --git a/api/download.go b/api/download.go
index 846015233..47f2ddf51 100644
--- a/api/download.go
+++ b/api/download.go
@@ -5,9 +5,9 @@ import (
 	"fmt"
 	"github.com/getsentry/sentry-go"
 	"github.com/gin-gonic/gin"
-	"github.com/joschahenningsen/TUM-Live/dao"
-	"github.com/joschahenningsen/TUM-Live/model"
-	"github.com/joschahenningsen/TUM-Live/tools"
+	"github.com/TUM-Dev/gocast/dao"
+	"github.com/TUM-Dev/gocast/model"
+	"github.com/TUM-Dev/gocast/tools"
 	log "github.com/sirupsen/logrus"
 	"net/http"
 	"os"
diff --git a/api/download_ics.go b/api/download_ics.go
index 63bb29581..3217eb5f8 100644
--- a/api/download_ics.go
+++ b/api/download_ics.go
@@ -2,9 +2,9 @@ package api
 
 import (
 	"github.com/gin-gonic/gin"
-	"github.com/joschahenningsen/TUM-Live/dao"
-	"github.com/joschahenningsen/TUM-Live/model"
-	"github.com/joschahenningsen/TUM-Live/tools"
+	"github.com/TUM-Dev/gocast/dao"
+	"github.com/TUM-Dev/gocast/model"
+	"github.com/TUM-Dev/gocast/tools"
 	log "github.com/sirupsen/logrus"
 	"html/template"
 	"net/http"
diff --git a/api/download_ics_test.go b/api/download_ics_test.go
index 68f532c29..aa478a5bd 100644
--- a/api/download_ics_test.go
+++ b/api/download_ics_test.go
@@ -6,11 +6,11 @@ import (
 	"fmt"
 	"github.com/gin-gonic/gin"
 	"github.com/golang/mock/gomock"
-	"github.com/joschahenningsen/TUM-Live/dao"
-	"github.com/joschahenningsen/TUM-Live/mock_dao"
-	"github.com/joschahenningsen/TUM-Live/model"
-	"github.com/joschahenningsen/TUM-Live/tools"
-	"github.com/joschahenningsen/TUM-Live/tools/testutils"
+	"github.com/TUM-Dev/gocast/dao"
+	"github.com/TUM-Dev/gocast/mock_dao"
+	"github.com/TUM-Dev/gocast/model"
+	"github.com/TUM-Dev/gocast/tools"
+	"github.com/TUM-Dev/gocast/tools/testutils"
 	"github.com/matthiasreumann/gomino"
 	"html/template"
 	"net/http"
diff --git a/api/download_test.go b/api/download_test.go
index 8718f8621..d613f7588 100644
--- a/api/download_test.go
+++ b/api/download_test.go
@@ -5,11 +5,11 @@ import (
 	"fmt"
 	"github.com/gin-gonic/gin"
 	"github.com/golang/mock/gomock"
-	"github.com/joschahenningsen/TUM-Live/dao"
-	"github.com/joschahenningsen/TUM-Live/mock_dao"
-	"github.com/joschahenningsen/TUM-Live/model"
-	"github.com/joschahenningsen/TUM-Live/tools"
-	"github.com/joschahenningsen/TUM-Live/tools/testutils"
+	"github.com/TUM-Dev/gocast/dao"
+	"github.com/TUM-Dev/gocast/mock_dao"
+	"github.com/TUM-Dev/gocast/model"
+	"github.com/TUM-Dev/gocast/tools"
+	"github.com/TUM-Dev/gocast/tools/testutils"
 	"github.com/matthiasreumann/gomino"
 	"log"
 	"net/http"
diff --git a/api/info-pages.go b/api/info-pages.go
index 1f16416f7..4991e21bf 100644
--- a/api/info-pages.go
+++ b/api/info-pages.go
@@ -2,9 +2,9 @@ package api
 
 import (
 	"github.com/gin-gonic/gin"
-	"github.com/joschahenningsen/TUM-Live/dao"
-	"github.com/joschahenningsen/TUM-Live/model"
-	"github.com/joschahenningsen/TUM-Live/tools"
+	"github.com/TUM-Dev/gocast/dao"
+	"github.com/TUM-Dev/gocast/model"
+	"github.com/TUM-Dev/gocast/tools"
 	"net/http"
 	"strconv"
 )
diff --git a/api/info-pages_test.go b/api/info-pages_test.go
index aa62b708d..29804c4f3 100644
--- a/api/info-pages_test.go
+++ b/api/info-pages_test.go
@@ -6,11 +6,11 @@ import (
 	"github.com/Masterminds/sprig/v3"
 	"github.com/gin-gonic/gin"
 	"github.com/golang/mock/gomock"
-	"github.com/joschahenningsen/TUM-Live/dao"
-	"github.com/joschahenningsen/TUM-Live/mock_dao"
-	"github.com/joschahenningsen/TUM-Live/model"
-	"github.com/joschahenningsen/TUM-Live/tools"
-	"github.com/joschahenningsen/TUM-Live/tools/testutils"
+	"github.com/TUM-Dev/gocast/dao"
+	"github.com/TUM-Dev/gocast/mock_dao"
+	"github.com/TUM-Dev/gocast/model"
+	"github.com/TUM-Dev/gocast/tools"
+	"github.com/TUM-Dev/gocast/tools/testutils"
 	"github.com/matthiasreumann/gomino"
 	"html/template"
 	"net/http"
diff --git a/api/lecture_halls.go b/api/lecture_halls.go
index 9f3b84583..725669ed3 100644
--- a/api/lecture_halls.go
+++ b/api/lecture_halls.go
@@ -6,9 +6,9 @@ import (
 	"fmt"
 	"github.com/getsentry/sentry-go"
 	"github.com/gin-gonic/gin"
-	"github.com/joschahenningsen/TUM-Live/dao"
-	"github.com/joschahenningsen/TUM-Live/model"
-	"github.com/joschahenningsen/TUM-Live/tools"
+	"github.com/TUM-Dev/gocast/dao"
+	"github.com/TUM-Dev/gocast/model"
+	"github.com/TUM-Dev/gocast/tools"
 	log "github.com/sirupsen/logrus"
 	"net/http"
 	"strconv"
diff --git a/api/lecture_halls_test.go b/api/lecture_halls_test.go
index c108d9f04..e259112b9 100644
--- a/api/lecture_halls_test.go
+++ b/api/lecture_halls_test.go
@@ -7,11 +7,11 @@ import (
 	campusonline "github.com/RBG-TUM/CAMPUSOnline"
 	"github.com/gin-gonic/gin"
 	"github.com/golang/mock/gomock"
-	"github.com/joschahenningsen/TUM-Live/dao"
-	"github.com/joschahenningsen/TUM-Live/mock_dao"
-	"github.com/joschahenningsen/TUM-Live/model"
-	"github.com/joschahenningsen/TUM-Live/tools"
-	"github.com/joschahenningsen/TUM-Live/tools/testutils"
+	"github.com/TUM-Dev/gocast/dao"
+	"github.com/TUM-Dev/gocast/mock_dao"
+	"github.com/TUM-Dev/gocast/model"
+	"github.com/TUM-Dev/gocast/tools"
+	"github.com/TUM-Dev/gocast/tools/testutils"
 	"github.com/matthiasreumann/gomino"
 	"html/template"
 	"net/http"
diff --git a/api/live_update.go b/api/live_update.go
index bc44cea24..443126c3c 100644
--- a/api/live_update.go
+++ b/api/live_update.go
@@ -6,11 +6,11 @@ import (
 	"github.com/RBG-TUM/commons"
 	"github.com/getsentry/sentry-go"
 	"github.com/gin-gonic/gin"
-	"github.com/joschahenningsen/TUM-Live/dao"
-	"github.com/joschahenningsen/TUM-Live/model"
-	"github.com/joschahenningsen/TUM-Live/tools"
-	"github.com/joschahenningsen/TUM-Live/tools/realtime"
-	"github.com/joschahenningsen/TUM-Live/tools/tum"
+	"github.com/TUM-Dev/gocast/dao"
+	"github.com/TUM-Dev/gocast/model"
+	"github.com/TUM-Dev/gocast/tools"
+	"github.com/TUM-Dev/gocast/tools/realtime"
+	"github.com/TUM-Dev/gocast/tools/tum"
 	log "github.com/sirupsen/logrus"
 	"sync"
 )
diff --git a/api/maintenance.go b/api/maintenance.go
index 0f55e4cdc..0a321e510 100644
--- a/api/maintenance.go
+++ b/api/maintenance.go
@@ -2,9 +2,9 @@ package api
 
 import (
 	"github.com/gin-gonic/gin"
-	"github.com/joschahenningsen/TUM-Live/dao"
-	"github.com/joschahenningsen/TUM-Live/model"
-	"github.com/joschahenningsen/TUM-Live/tools"
+	"github.com/TUM-Dev/gocast/dao"
+	"github.com/TUM-Dev/gocast/model"
+	"github.com/TUM-Dev/gocast/tools"
 	log "github.com/sirupsen/logrus"
 	"net/http"
 	"strconv"
diff --git a/api/notifications.go b/api/notifications.go
index 1864fc493..2d51c5802 100644
--- a/api/notifications.go
+++ b/api/notifications.go
@@ -2,9 +2,9 @@ package api
 
 import (
 	"github.com/gin-gonic/gin"
-	"github.com/joschahenningsen/TUM-Live/dao"
-	"github.com/joschahenningsen/TUM-Live/model"
-	"github.com/joschahenningsen/TUM-Live/tools"
+	"github.com/TUM-Dev/gocast/dao"
+	"github.com/TUM-Dev/gocast/model"
+	"github.com/TUM-Dev/gocast/tools"
 	log "github.com/sirupsen/logrus"
 	"net/http"
 	"strconv"
diff --git a/api/notifications_test.go b/api/notifications_test.go
index 4ebcaa84f..1ad35ec98 100644
--- a/api/notifications_test.go
+++ b/api/notifications_test.go
@@ -6,11 +6,11 @@ import (
 	"fmt"
 	"github.com/gin-gonic/gin"
 	"github.com/golang/mock/gomock"
-	"github.com/joschahenningsen/TUM-Live/dao"
-	"github.com/joschahenningsen/TUM-Live/mock_dao"
-	"github.com/joschahenningsen/TUM-Live/model"
-	"github.com/joschahenningsen/TUM-Live/tools"
-	"github.com/joschahenningsen/TUM-Live/tools/testutils"
+	"github.com/TUM-Dev/gocast/dao"
+	"github.com/TUM-Dev/gocast/mock_dao"
+	"github.com/TUM-Dev/gocast/model"
+	"github.com/TUM-Dev/gocast/tools"
+	"github.com/TUM-Dev/gocast/tools/testutils"
 	"github.com/matthiasreumann/gomino"
 	"net/http"
 	"testing"
diff --git a/api/progress.go b/api/progress.go
index d390fe410..5af7b4986 100644
--- a/api/progress.go
+++ b/api/progress.go
@@ -2,9 +2,9 @@ package api
 
 import (
 	"errors"
-	"github.com/joschahenningsen/TUM-Live/dao"
-	"github.com/joschahenningsen/TUM-Live/model"
-	"github.com/joschahenningsen/TUM-Live/tools"
+	"github.com/TUM-Dev/gocast/dao"
+	"github.com/TUM-Dev/gocast/model"
+	"github.com/TUM-Dev/gocast/tools"
 	"gorm.io/gorm"
 	"net/http"
 	"strconv"
diff --git a/api/progress_test.go b/api/progress_test.go
index 0e2427f24..ede63b0a8 100644
--- a/api/progress_test.go
+++ b/api/progress_test.go
@@ -5,11 +5,11 @@ import (
 	"fmt"
 	"github.com/gin-gonic/gin"
 	"github.com/golang/mock/gomock"
-	"github.com/joschahenningsen/TUM-Live/dao"
-	"github.com/joschahenningsen/TUM-Live/mock_dao"
-	"github.com/joschahenningsen/TUM-Live/model"
-	"github.com/joschahenningsen/TUM-Live/tools"
-	"github.com/joschahenningsen/TUM-Live/tools/testutils"
+	"github.com/TUM-Dev/gocast/dao"
+	"github.com/TUM-Dev/gocast/mock_dao"
+	"github.com/TUM-Dev/gocast/model"
+	"github.com/TUM-Dev/gocast/tools"
+	"github.com/TUM-Dev/gocast/tools/testutils"
 	"github.com/matthiasreumann/gomino"
 	"gorm.io/gorm"
 	"net/http"
diff --git a/api/realtime.go b/api/realtime.go
index 543b7a74f..0d8f5779e 100644
--- a/api/realtime.go
+++ b/api/realtime.go
@@ -2,9 +2,9 @@ package api
 
 import (
 	"github.com/gin-gonic/gin"
-	"github.com/joschahenningsen/TUM-Live/dao"
-	"github.com/joschahenningsen/TUM-Live/tools/realtime"
-	"github.com/joschahenningsen/TUM-Live/tools/realtime/connector"
+	"github.com/TUM-Dev/gocast/dao"
+	"github.com/TUM-Dev/gocast/tools/realtime"
+	"github.com/TUM-Dev/gocast/tools/realtime/connector"
 	log "github.com/sirupsen/logrus"
 )
 
diff --git a/api/router.go b/api/router.go
index abd5f0ece..1b03a7eec 100755
--- a/api/router.go
+++ b/api/router.go
@@ -2,8 +2,8 @@ package api
 
 import (
 	"github.com/gin-gonic/gin"
-	"github.com/joschahenningsen/TUM-Live/dao"
-	"github.com/joschahenningsen/TUM-Live/tools"
+	"github.com/TUM-Dev/gocast/dao"
+	"github.com/TUM-Dev/gocast/tools"
 )
 
 // ConfigChatRouter configure gin router for chat (without gzip)
diff --git a/api/search.go b/api/search.go
index 1bdc11758..791e654f3 100644
--- a/api/search.go
+++ b/api/search.go
@@ -2,8 +2,8 @@ package api
 
 import (
 	"github.com/gin-gonic/gin"
-	"github.com/joschahenningsen/TUM-Live/dao"
-	"github.com/joschahenningsen/TUM-Live/tools"
+	"github.com/TUM-Dev/gocast/dao"
+	"github.com/TUM-Dev/gocast/tools"
 	"net/http"
 )
 
diff --git a/api/seek_stats.go b/api/seek_stats.go
index 22dcf0039..90e8b0f3f 100644
--- a/api/seek_stats.go
+++ b/api/seek_stats.go
@@ -2,7 +2,7 @@ package api
 
 import (
 	"github.com/gin-gonic/gin"
-	"github.com/joschahenningsen/TUM-Live/dao"
+	"github.com/TUM-Dev/gocast/dao"
 	log "github.com/sirupsen/logrus"
 	"net/http"
 )
diff --git a/api/seek_stats_test.go b/api/seek_stats_test.go
index c9aa85bb0..dd6b5cfa6 100644
--- a/api/seek_stats_test.go
+++ b/api/seek_stats_test.go
@@ -8,10 +8,10 @@ import (
 
 	"github.com/gin-gonic/gin"
 	"github.com/golang/mock/gomock"
-	"github.com/joschahenningsen/TUM-Live/dao"
-	"github.com/joschahenningsen/TUM-Live/mock_dao"
-	"github.com/joschahenningsen/TUM-Live/model"
-	"github.com/joschahenningsen/TUM-Live/tools/testutils"
+	"github.com/TUM-Dev/gocast/dao"
+	"github.com/TUM-Dev/gocast/mock_dao"
+	"github.com/TUM-Dev/gocast/model"
+	"github.com/TUM-Dev/gocast/tools/testutils"
 	"github.com/matthiasreumann/gomino"
 )
 
diff --git a/api/semesters.go b/api/semesters.go
index fe523ebb2..244e50633 100644
--- a/api/semesters.go
+++ b/api/semesters.go
@@ -3,8 +3,8 @@ package api
 import (
 	"context"
 	"github.com/gin-gonic/gin"
-	"github.com/joschahenningsen/TUM-Live/dao"
-	"github.com/joschahenningsen/TUM-Live/tools/tum"
+	"github.com/TUM-Dev/gocast/dao"
+	"github.com/TUM-Dev/gocast/tools/tum"
 	"net/http"
 )
 
diff --git a/api/server-notifications.go b/api/server-notifications.go
index 502b06aa1..17bf6e97e 100644
--- a/api/server-notifications.go
+++ b/api/server-notifications.go
@@ -2,9 +2,9 @@ package api
 
 import (
 	"github.com/gin-gonic/gin"
-	"github.com/joschahenningsen/TUM-Live/dao"
-	"github.com/joschahenningsen/TUM-Live/model"
-	"github.com/joschahenningsen/TUM-Live/tools"
+	"github.com/TUM-Dev/gocast/dao"
+	"github.com/TUM-Dev/gocast/model"
+	"github.com/TUM-Dev/gocast/tools"
 	"log"
 	"net/http"
 	"time"
diff --git a/api/statistics.go b/api/statistics.go
index 0f46ef69e..ae3373d58 100644
--- a/api/statistics.go
+++ b/api/statistics.go
@@ -3,9 +3,9 @@ package api
 import (
 	"encoding/json"
 	"github.com/gin-gonic/gin"
-	"github.com/joschahenningsen/TUM-Live/dao"
-	"github.com/joschahenningsen/TUM-Live/model"
-	"github.com/joschahenningsen/TUM-Live/tools"
+	"github.com/TUM-Dev/gocast/dao"
+	"github.com/TUM-Dev/gocast/model"
+	"github.com/TUM-Dev/gocast/tools"
 	log "github.com/sirupsen/logrus"
 	"net/http"
 	"strconv"
diff --git a/api/statistics_test.go b/api/statistics_test.go
index 4038c62d1..238cfb48c 100644
--- a/api/statistics_test.go
+++ b/api/statistics_test.go
@@ -5,11 +5,11 @@ import (
 	"fmt"
 	"github.com/gin-gonic/gin"
 	"github.com/golang/mock/gomock"
-	"github.com/joschahenningsen/TUM-Live/dao"
-	"github.com/joschahenningsen/TUM-Live/mock_dao"
-	"github.com/joschahenningsen/TUM-Live/model"
-	"github.com/joschahenningsen/TUM-Live/tools"
-	"github.com/joschahenningsen/TUM-Live/tools/testutils"
+	"github.com/TUM-Dev/gocast/dao"
+	"github.com/TUM-Dev/gocast/mock_dao"
+	"github.com/TUM-Dev/gocast/model"
+	"github.com/TUM-Dev/gocast/tools"
+	"github.com/TUM-Dev/gocast/tools/testutils"
 	"github.com/matthiasreumann/gomino"
 	"gorm.io/gorm"
 	"net/http"
diff --git a/api/stream.go b/api/stream.go
index 74c2a43f9..b50174cad 100644
--- a/api/stream.go
+++ b/api/stream.go
@@ -4,7 +4,7 @@ import (
 	"context"
 	"errors"
 	"fmt"
-	"github.com/joschahenningsen/TUM-Live/tools/pathprovider"
+	"github.com/TUM-Dev/gocast/tools/pathprovider"
 	"net/http"
 	"os"
 	"path/filepath"
@@ -14,11 +14,11 @@ import (
 
 	"github.com/getsentry/sentry-go"
 	"github.com/gin-gonic/gin"
-	"github.com/joschahenningsen/TUM-Live/dao"
-	"github.com/joschahenningsen/TUM-Live/model"
-	"github.com/joschahenningsen/TUM-Live/tools"
-	"github.com/joschahenningsen/TUM-Live/tools/bot"
-	"github.com/joschahenningsen/TUM-Live/voice-service/pb"
+	"github.com/TUM-Dev/gocast/dao"
+	"github.com/TUM-Dev/gocast/model"
+	"github.com/TUM-Dev/gocast/tools"
+	"github.com/TUM-Dev/gocast/tools/bot"
+	"github.com/TUM-Dev/gocast/voice-service/pb"
 	uuid "github.com/satori/go.uuid"
 	log "github.com/sirupsen/logrus"
 	"gorm.io/gorm"
diff --git a/api/stream_test.go b/api/stream_test.go
index db1b59da2..f186e38d2 100644
--- a/api/stream_test.go
+++ b/api/stream_test.go
@@ -5,11 +5,11 @@ import (
 	"fmt"
 	"github.com/gin-gonic/gin"
 	"github.com/golang/mock/gomock"
-	"github.com/joschahenningsen/TUM-Live/dao"
-	"github.com/joschahenningsen/TUM-Live/mock_dao"
-	"github.com/joschahenningsen/TUM-Live/model"
-	"github.com/joschahenningsen/TUM-Live/tools"
-	"github.com/joschahenningsen/TUM-Live/tools/testutils"
+	"github.com/TUM-Dev/gocast/dao"
+	"github.com/TUM-Dev/gocast/mock_dao"
+	"github.com/TUM-Dev/gocast/model"
+	"github.com/TUM-Dev/gocast/tools"
+	"github.com/TUM-Dev/gocast/tools/testutils"
 	"github.com/matthiasreumann/gomino"
 	"gorm.io/gorm"
 	"net/http"
diff --git a/api/token.go b/api/token.go
index f54c0ed6f..41fc9a368 100644
--- a/api/token.go
+++ b/api/token.go
@@ -3,9 +3,9 @@ package api
 import (
 	"database/sql"
 	"github.com/gin-gonic/gin"
-	"github.com/joschahenningsen/TUM-Live/dao"
-	"github.com/joschahenningsen/TUM-Live/model"
-	"github.com/joschahenningsen/TUM-Live/tools"
+	"github.com/TUM-Dev/gocast/dao"
+	"github.com/TUM-Dev/gocast/model"
+	"github.com/TUM-Dev/gocast/tools"
 	uuid "github.com/satori/go.uuid"
 	log "github.com/sirupsen/logrus"
 	"net/http"
diff --git a/api/token_test.go b/api/token_test.go
index a29822baa..d69f356fa 100644
--- a/api/token_test.go
+++ b/api/token_test.go
@@ -4,11 +4,11 @@ import (
 	"errors"
 	"github.com/gin-gonic/gin"
 	"github.com/golang/mock/gomock"
-	"github.com/joschahenningsen/TUM-Live/dao"
-	"github.com/joschahenningsen/TUM-Live/mock_dao"
-	"github.com/joschahenningsen/TUM-Live/model"
-	"github.com/joschahenningsen/TUM-Live/tools"
-	"github.com/joschahenningsen/TUM-Live/tools/testutils"
+	"github.com/TUM-Dev/gocast/dao"
+	"github.com/TUM-Dev/gocast/mock_dao"
+	"github.com/TUM-Dev/gocast/model"
+	"github.com/TUM-Dev/gocast/tools"
+	"github.com/TUM-Dev/gocast/tools/testutils"
 	"github.com/matthiasreumann/gomino"
 	"net/http"
 	"testing"
diff --git a/api/users.go b/api/users.go
index 374024f80..e96921e63 100644
--- a/api/users.go
+++ b/api/users.go
@@ -13,9 +13,9 @@ import (
 
 	"github.com/getsentry/sentry-go"
 	"github.com/gin-gonic/gin"
-	"github.com/joschahenningsen/TUM-Live/dao"
-	"github.com/joschahenningsen/TUM-Live/model"
-	"github.com/joschahenningsen/TUM-Live/tools"
+	"github.com/TUM-Dev/gocast/dao"
+	"github.com/TUM-Dev/gocast/model"
+	"github.com/TUM-Dev/gocast/tools"
 	log "github.com/sirupsen/logrus"
 	"gorm.io/gorm"
 )
diff --git a/api/users_test.go b/api/users_test.go
index cc284f2a2..511536a87 100644
--- a/api/users_test.go
+++ b/api/users_test.go
@@ -6,11 +6,11 @@ import (
 	"errors"
 	"github.com/gin-gonic/gin"
 	"github.com/golang/mock/gomock"
-	"github.com/joschahenningsen/TUM-Live/dao"
-	"github.com/joschahenningsen/TUM-Live/mock_dao"
-	"github.com/joschahenningsen/TUM-Live/model"
-	"github.com/joschahenningsen/TUM-Live/tools"
-	"github.com/joschahenningsen/TUM-Live/tools/testutils"
+	"github.com/TUM-Dev/gocast/dao"
+	"github.com/TUM-Dev/gocast/mock_dao"
+	"github.com/TUM-Dev/gocast/model"
+	"github.com/TUM-Dev/gocast/tools"
+	"github.com/TUM-Dev/gocast/tools/testutils"
 	"github.com/matthiasreumann/gomino"
 	"gorm.io/gorm"
 	"net/http"
diff --git a/api/voice_service_grpc.go b/api/voice_service_grpc.go
index 5497654ab..b2da029b7 100644
--- a/api/voice_service_grpc.go
+++ b/api/voice_service_grpc.go
@@ -5,10 +5,10 @@ package api
 import (
 	"context"
 	"fmt"
-	"github.com/joschahenningsen/TUM-Live/dao"
-	"github.com/joschahenningsen/TUM-Live/model"
-	"github.com/joschahenningsen/TUM-Live/tools"
-	"github.com/joschahenningsen/TUM-Live/voice-service/pb"
+	"github.com/TUM-Dev/gocast/dao"
+	"github.com/TUM-Dev/gocast/model"
+	"github.com/TUM-Dev/gocast/tools"
+	"github.com/TUM-Dev/gocast/voice-service/pb"
 	log "github.com/sirupsen/logrus"
 	"google.golang.org/grpc"
 	"google.golang.org/grpc/credentials/insecure"
diff --git a/api/worker.go b/api/worker.go
index 70460f6e2..aac2413cd 100644
--- a/api/worker.go
+++ b/api/worker.go
@@ -2,8 +2,8 @@ package api
 
 import (
 	"github.com/gin-gonic/gin"
-	"github.com/joschahenningsen/TUM-Live/dao"
-	"github.com/joschahenningsen/TUM-Live/tools"
+	"github.com/TUM-Dev/gocast/dao"
+	"github.com/TUM-Dev/gocast/tools"
 	log "github.com/sirupsen/logrus"
 	"net/http"
 )
diff --git a/api/worker_grpc.go b/api/worker_grpc.go
index 4415dea62..0aa754f9e 100644
--- a/api/worker_grpc.go
+++ b/api/worker_grpc.go
@@ -7,7 +7,7 @@ import (
 	"encoding/json"
 	"errors"
 	"fmt"
-	"github.com/joschahenningsen/TUM-Live/tools/pathprovider"
+	"github.com/TUM-Dev/gocast/tools/pathprovider"
 	"io"
 	"net"
 	"net/http"
@@ -20,11 +20,11 @@ import (
 
 	go_anel_pwrctrl "github.com/RBG-TUM/go-anel-pwrctrl"
 	"github.com/getsentry/sentry-go"
-	"github.com/joschahenningsen/TUM-Live/dao"
-	"github.com/joschahenningsen/TUM-Live/model"
-	"github.com/joschahenningsen/TUM-Live/tools"
-	"github.com/joschahenningsen/TUM-Live/tools/camera"
-	"github.com/joschahenningsen/TUM-Live/worker/pb"
+	"github.com/TUM-Dev/gocast/dao"
+	"github.com/TUM-Dev/gocast/model"
+	"github.com/TUM-Dev/gocast/tools"
+	"github.com/TUM-Dev/gocast/tools/camera"
+	"github.com/TUM-Dev/gocast/worker/pb"
 	uuid "github.com/satori/go.uuid"
 	log "github.com/sirupsen/logrus"
 	"google.golang.org/grpc"
diff --git a/api/worker_test.go b/api/worker_test.go
index 3dcae9192..1df793a91 100644
--- a/api/worker_test.go
+++ b/api/worker_test.go
@@ -5,10 +5,10 @@ import (
 	"fmt"
 	"github.com/gin-gonic/gin"
 	"github.com/golang/mock/gomock"
-	"github.com/joschahenningsen/TUM-Live/dao"
-	"github.com/joschahenningsen/TUM-Live/mock_dao"
-	"github.com/joschahenningsen/TUM-Live/tools"
-	"github.com/joschahenningsen/TUM-Live/tools/testutils"
+	"github.com/TUM-Dev/gocast/dao"
+	"github.com/TUM-Dev/gocast/mock_dao"
+	"github.com/TUM-Dev/gocast/tools"
+	"github.com/TUM-Dev/gocast/tools/testutils"
 	"github.com/matthiasreumann/gomino"
 	"net/http"
 	"testing"
diff --git a/api/wsHub.go b/api/wsHub.go
index 9ef2ce4c0..d2876263f 100644
--- a/api/wsHub.go
+++ b/api/wsHub.go
@@ -7,9 +7,9 @@ import (
 	"fmt"
 	"github.com/getsentry/sentry-go"
 	"github.com/gin-gonic/gin"
-	"github.com/joschahenningsen/TUM-Live/dao"
-	"github.com/joschahenningsen/TUM-Live/tools"
-	"github.com/joschahenningsen/TUM-Live/tools/realtime"
+	"github.com/TUM-Dev/gocast/dao"
+	"github.com/TUM-Dev/gocast/tools"
+	"github.com/TUM-Dev/gocast/tools/realtime"
 	log "github.com/sirupsen/logrus"
 	"strconv"
 	"strings"
diff --git a/cmd/modelGen/daoTemplate.tmpl b/cmd/modelGen/daoTemplate.tmpl
index 04b2cd9b6..40aa37b85 100644
--- a/cmd/modelGen/daoTemplate.tmpl
+++ b/cmd/modelGen/daoTemplate.tmpl
@@ -2,7 +2,7 @@ package dao
 
 import (
 	"context"
-	"github.com/joschahenningsen/TUM-Live/model"
+	"github.com/TUM-Dev/gocast/model"
 	"gorm.io/gorm"
 )
 
diff --git a/cmd/tumlive/tumlive.go b/cmd/tumlive/tumlive.go
index 906a70445..9fa949cc0 100755
--- a/cmd/tumlive/tumlive.go
+++ b/cmd/tumlive/tumlive.go
@@ -7,12 +7,12 @@ import (
 	sentrygin "github.com/getsentry/sentry-go/gin"
 	"github.com/gin-contrib/gzip"
 	"github.com/gin-gonic/gin"
-	"github.com/joschahenningsen/TUM-Live/api"
-	"github.com/joschahenningsen/TUM-Live/dao"
-	"github.com/joschahenningsen/TUM-Live/model"
-	"github.com/joschahenningsen/TUM-Live/tools"
-	"github.com/joschahenningsen/TUM-Live/tools/tum"
-	"github.com/joschahenningsen/TUM-Live/web"
+	"github.com/TUM-Dev/gocast/api"
+	"github.com/TUM-Dev/gocast/dao"
+	"github.com/TUM-Dev/gocast/model"
+	"github.com/TUM-Dev/gocast/tools"
+	"github.com/TUM-Dev/gocast/tools/tum"
+	"github.com/TUM-Dev/gocast/web"
 	"github.com/pkg/profile"
 	log "github.com/sirupsen/logrus"
 	"gorm.io/driver/mysql"
diff --git a/dao/audit.go b/dao/audit.go
index 72243147a..2bdcad78b 100644
--- a/dao/audit.go
+++ b/dao/audit.go
@@ -1,7 +1,7 @@
 package dao
 
 import (
-	"github.com/joschahenningsen/TUM-Live/model"
+	"github.com/TUM-Dev/gocast/model"
 	"gorm.io/gorm"
 )
 
diff --git a/dao/bookmark.go b/dao/bookmark.go
index 9635cf58e..659a87c87 100644
--- a/dao/bookmark.go
+++ b/dao/bookmark.go
@@ -1,7 +1,7 @@
 package dao
 
 import (
-	"github.com/joschahenningsen/TUM-Live/model"
+	"github.com/TUM-Dev/gocast/model"
 	"gorm.io/gorm"
 )
 
diff --git a/dao/camera-preset.go b/dao/camera-preset.go
index 1a628bf3f..aadbff654 100644
--- a/dao/camera-preset.go
+++ b/dao/camera-preset.go
@@ -1,7 +1,7 @@
 package dao
 
 import (
-	"github.com/joschahenningsen/TUM-Live/model"
+	"github.com/TUM-Dev/gocast/model"
 	"gorm.io/gorm"
 )
 
diff --git a/dao/chat.go b/dao/chat.go
index 9130dce48..18cd74aed 100644
--- a/dao/chat.go
+++ b/dao/chat.go
@@ -3,7 +3,7 @@ package dao
 import (
 	"errors"
 	"github.com/go-sql-driver/mysql"
-	"github.com/joschahenningsen/TUM-Live/model"
+	"github.com/TUM-Dev/gocast/model"
 	"gorm.io/gorm"
 )
 
diff --git a/dao/courses.go b/dao/courses.go
index 1191d8504..23978d086 100644
--- a/dao/courses.go
+++ b/dao/courses.go
@@ -6,7 +6,7 @@ import (
 	"fmt"
 	"time"
 
-	"github.com/joschahenningsen/TUM-Live/model"
+	"github.com/TUM-Dev/gocast/model"
 
 	"github.com/RBG-TUM/commons"
 	"github.com/getsentry/sentry-go"
diff --git a/dao/email.go b/dao/email.go
index 75ab7c654..64632a743 100644
--- a/dao/email.go
+++ b/dao/email.go
@@ -2,7 +2,7 @@ package dao
 
 import (
 	"context"
-	"github.com/joschahenningsen/TUM-Live/model"
+	"github.com/TUM-Dev/gocast/model"
 	"gorm.io/gorm"
 	"time"
 )
diff --git a/dao/file.go b/dao/file.go
index f51e7f3ef..4f31790a5 100644
--- a/dao/file.go
+++ b/dao/file.go
@@ -1,7 +1,7 @@
 package dao
 
 import (
-	"github.com/joschahenningsen/TUM-Live/model"
+	"github.com/TUM-Dev/gocast/model"
 	"gorm.io/gorm"
 )
 
diff --git a/dao/info-page.go b/dao/info-page.go
index 25af81bb4..3636afc48 100644
--- a/dao/info-page.go
+++ b/dao/info-page.go
@@ -1,7 +1,7 @@
 package dao
 
 import (
-	"github.com/joschahenningsen/TUM-Live/model"
+	"github.com/TUM-Dev/gocast/model"
 	"gorm.io/gorm"
 )
 
diff --git a/dao/ingest_server.go b/dao/ingest_server.go
index daf180c62..a21fdcb27 100644
--- a/dao/ingest_server.go
+++ b/dao/ingest_server.go
@@ -1,7 +1,7 @@
 package dao
 
 import (
-	"github.com/joschahenningsen/TUM-Live/model"
+	"github.com/TUM-Dev/gocast/model"
 	"gorm.io/gorm"
 	"time"
 )
diff --git a/dao/lecture_halls.go b/dao/lecture_halls.go
index b23fca4c3..9e7e82558 100644
--- a/dao/lecture_halls.go
+++ b/dao/lecture_halls.go
@@ -1,7 +1,7 @@
 package dao
 
 import (
-	"github.com/joschahenningsen/TUM-Live/model"
+	"github.com/TUM-Dev/gocast/model"
 	"gorm.io/gorm"
 	"gorm.io/gorm/clause"
 	"time"
diff --git a/dao/migrations/202201280.go b/dao/migrations/202201280.go
index d984a1d7b..3a76179ac 100644
--- a/dao/migrations/202201280.go
+++ b/dao/migrations/202201280.go
@@ -2,7 +2,7 @@ package migrations
 
 import (
 	"github.com/go-gormigrate/gormigrate/v2"
-	"github.com/joschahenningsen/TUM-Live/model"
+	"github.com/TUM-Dev/gocast/model"
 	"gorm.io/gorm"
 )
 
diff --git a/dao/migrations/202207240.go b/dao/migrations/202207240.go
index aed521d4c..33859c108 100644
--- a/dao/migrations/202207240.go
+++ b/dao/migrations/202207240.go
@@ -2,7 +2,7 @@ package migrations
 
 import (
 	"github.com/go-gormigrate/gormigrate/v2"
-	"github.com/joschahenningsen/TUM-Live/model"
+	"github.com/TUM-Dev/gocast/model"
 	"gorm.io/gorm"
 )
 
diff --git a/dao/migrations/202208100.go b/dao/migrations/202208100.go
index e0f147dd1..bfe15e8c5 100644
--- a/dao/migrations/202208100.go
+++ b/dao/migrations/202208100.go
@@ -2,7 +2,7 @@ package migrations
 
 import (
 	"github.com/go-gormigrate/gormigrate/v2"
-	"github.com/joschahenningsen/TUM-Live/model"
+	"github.com/TUM-Dev/gocast/model"
 	"gorm.io/gorm"
 )
 
diff --git a/dao/migrations/202208110.go b/dao/migrations/202208110.go
index 46429d37f..accb92e22 100644
--- a/dao/migrations/202208110.go
+++ b/dao/migrations/202208110.go
@@ -2,7 +2,7 @@ package migrations
 
 import (
 	"github.com/go-gormigrate/gormigrate/v2"
-	"github.com/joschahenningsen/TUM-Live/model"
+	"github.com/TUM-Dev/gocast/model"
 	"gorm.io/gorm"
 )
 
diff --git a/dao/migrations/202210270.go b/dao/migrations/202210270.go
index 9412d8673..9bc60de9c 100644
--- a/dao/migrations/202210270.go
+++ b/dao/migrations/202210270.go
@@ -2,7 +2,7 @@ package migrations
 
 import (
 	"github.com/go-gormigrate/gormigrate/v2"
-	"github.com/joschahenningsen/TUM-Live/model"
+	"github.com/TUM-Dev/gocast/model"
 	"gorm.io/gorm"
 )
 
diff --git a/dao/migrations/202212010.go b/dao/migrations/202212010.go
index ea3f1ead1..93362726c 100644
--- a/dao/migrations/202212010.go
+++ b/dao/migrations/202212010.go
@@ -2,7 +2,7 @@ package migrations
 
 import (
 	"github.com/go-gormigrate/gormigrate/v2"
-	"github.com/joschahenningsen/TUM-Live/model"
+	"github.com/TUM-Dev/gocast/model"
 	"gorm.io/gorm"
 )
 
diff --git a/dao/migrator.go b/dao/migrator.go
index 8cb9ae74f..acdc28944 100644
--- a/dao/migrator.go
+++ b/dao/migrator.go
@@ -2,7 +2,7 @@ package dao
 
 import (
 	"github.com/go-gormigrate/gormigrate/v2"
-	"github.com/joschahenningsen/TUM-Live/dao/migrations"
+	"github.com/TUM-Dev/gocast/dao/migrations"
 	"gorm.io/gorm"
 )
 
diff --git a/dao/notifications.go b/dao/notifications.go
index a8e2677d4..6e7b94ff4 100644
--- a/dao/notifications.go
+++ b/dao/notifications.go
@@ -1,7 +1,7 @@
 package dao
 
 import (
-	"github.com/joschahenningsen/TUM-Live/model"
+	"github.com/TUM-Dev/gocast/model"
 	"gorm.io/gorm"
 )
 
diff --git a/dao/progress.go b/dao/progress.go
index e88332273..6a73c07b6 100644
--- a/dao/progress.go
+++ b/dao/progress.go
@@ -1,7 +1,7 @@
 package dao
 
 import (
-	"github.com/joschahenningsen/TUM-Live/model"
+	"github.com/TUM-Dev/gocast/model"
 	"gorm.io/gorm"
 	"gorm.io/gorm/clause"
 )
diff --git a/dao/server-notification.go b/dao/server-notification.go
index 823aebd60..6b61e5453 100644
--- a/dao/server-notification.go
+++ b/dao/server-notification.go
@@ -1,7 +1,7 @@
 package dao
 
 import (
-	"github.com/joschahenningsen/TUM-Live/model"
+	"github.com/TUM-Dev/gocast/model"
 	"gorm.io/gorm"
 	"time"
 )
diff --git a/dao/statistics.go b/dao/statistics.go
index 8452131e6..931e0a7ba 100644
--- a/dao/statistics.go
+++ b/dao/statistics.go
@@ -2,8 +2,8 @@ package dao
 
 import (
 	"fmt"
-	"github.com/joschahenningsen/TUM-Live/model"
-	"github.com/joschahenningsen/TUM-Live/tools/timing"
+	"github.com/TUM-Dev/gocast/model"
+	"github.com/TUM-Dev/gocast/tools/timing"
 	"gorm.io/gorm"
 )
 
diff --git a/dao/streams.go b/dao/streams.go
index e82365501..b6da68ba5 100755
--- a/dao/streams.go
+++ b/dao/streams.go
@@ -7,7 +7,7 @@ import (
 	"strconv"
 	"time"
 
-	"github.com/joschahenningsen/TUM-Live/model"
+	"github.com/TUM-Dev/gocast/model"
 	"gorm.io/gorm"
 )
 
diff --git a/dao/subtitles.go b/dao/subtitles.go
index a2e5a1057..cc04ad91f 100644
--- a/dao/subtitles.go
+++ b/dao/subtitles.go
@@ -3,7 +3,7 @@ package dao
 import (
 	"context"
 	"errors"
-	"github.com/joschahenningsen/TUM-Live/model"
+	"github.com/TUM-Dev/gocast/model"
 	"gorm.io/gorm"
 )
 
diff --git a/dao/token.go b/dao/token.go
index 2499dfddb..213ee13e5 100644
--- a/dao/token.go
+++ b/dao/token.go
@@ -1,7 +1,7 @@
 package dao
 
 import (
-	"github.com/joschahenningsen/TUM-Live/model"
+	"github.com/TUM-Dev/gocast/model"
 	"gorm.io/gorm"
 	"time"
 )
diff --git a/dao/transcoding-failure.go b/dao/transcoding-failure.go
index d44049c26..88682c694 100644
--- a/dao/transcoding-failure.go
+++ b/dao/transcoding-failure.go
@@ -1,7 +1,7 @@
 package dao
 
 import (
-	"github.com/joschahenningsen/TUM-Live/model"
+	"github.com/TUM-Dev/gocast/model"
 	"gorm.io/gorm"
 )
 
diff --git a/dao/upload_key.go b/dao/upload_key.go
index a8487a35f..f2606584c 100644
--- a/dao/upload_key.go
+++ b/dao/upload_key.go
@@ -1,7 +1,7 @@
 package dao
 
 import (
-	"github.com/joschahenningsen/TUM-Live/model"
+	"github.com/TUM-Dev/gocast/model"
 	"gorm.io/gorm"
 )
 
diff --git a/dao/users.go b/dao/users.go
index ea369219c..aabbea98b 100644
--- a/dao/users.go
+++ b/dao/users.go
@@ -4,7 +4,7 @@ import (
 	"context"
 	"errors"
 	"fmt"
-	"github.com/joschahenningsen/TUM-Live/model"
+	"github.com/TUM-Dev/gocast/model"
 	uuid "github.com/satori/go.uuid"
 	"gorm.io/gorm"
 	"gorm.io/gorm/clause"
diff --git a/dao/video-section.go b/dao/video-section.go
index f8838f76b..6116b923b 100644
--- a/dao/video-section.go
+++ b/dao/video-section.go
@@ -1,7 +1,7 @@
 package dao
 
 import (
-	"github.com/joschahenningsen/TUM-Live/model"
+	"github.com/TUM-Dev/gocast/model"
 	"gorm.io/gorm"
 )
 
diff --git a/dao/video-seek.go b/dao/video-seek.go
index d4de19a0e..4cc7200ed 100644
--- a/dao/video-seek.go
+++ b/dao/video-seek.go
@@ -2,7 +2,7 @@ package dao
 
 import (
 	"errors"
-	"github.com/joschahenningsen/TUM-Live/model"
+	"github.com/TUM-Dev/gocast/model"
 	log "github.com/sirupsen/logrus"
 	"gorm.io/gorm"
 	"gorm.io/gorm/clause"
diff --git a/dao/worker.go b/dao/worker.go
index fd49ac9a9..3c30316e3 100644
--- a/dao/worker.go
+++ b/dao/worker.go
@@ -2,7 +2,7 @@ package dao
 
 import (
 	"context"
-	"github.com/joschahenningsen/TUM-Live/model"
+	"github.com/TUM-Dev/gocast/model"
 	"gorm.io/gorm"
 )
 
diff --git a/go.mod b/go.mod
index d9a38ae68..bed62c80a 100644
--- a/go.mod
+++ b/go.mod
@@ -1,4 +1,4 @@
-module github.com/joschahenningsen/TUM-Live
+module github.com/TUM-Dev/gocast
 
 go 1.18
 
@@ -40,7 +40,7 @@ require (
 	github.com/crewjam/saml v0.4.13
 	github.com/golang/mock v1.6.0
 	github.com/icholy/digest v0.1.22
-	github.com/joschahenningsen/TUM-Live/worker v0.0.0-20230813170152-4b40e4b3a301
+	github.com/TUM-Dev/gocast/worker v0.0.0-20230813170152-4b40e4b3a301
 	github.com/stretchr/testify v1.8.4
 	github.com/u2takey/go-utils v0.3.1
 )
diff --git a/go.sum b/go.sum
index f4b1d30ab..7a3df2946 100644
--- a/go.sum
+++ b/go.sum
@@ -279,8 +279,8 @@ github.com/joho/godotenv v1.5.1 h1:7eLL/+HRGLY0ldzfGMeQkb7vMd0as4CfYvUVzLqw0N0=
 github.com/jonboulle/clockwork v0.2.2/go.mod h1:Pkfl5aHPm1nk2H9h0bjmnJD/BcgbGXUBGnn1kMkgxc8=
 github.com/jonboulle/clockwork v0.4.0 h1:p4Cf1aMWXnXAUh8lVfewRBx1zaTSYKrKMF2g3ST4RZ4=
 github.com/jonboulle/clockwork v0.4.0/go.mod h1:xgRqUGwRcjKCO1vbZUEtSLrqKoPSsUpK7fnezOII0kc=
-github.com/joschahenningsen/TUM-Live/worker v0.0.0-20230813170152-4b40e4b3a301 h1:lqbhUuaWE5GETZI5bRWAcl8/JBNU54Rcoow5yyX1zbw=
-github.com/joschahenningsen/TUM-Live/worker v0.0.0-20230813170152-4b40e4b3a301/go.mod h1:o/rM0tvFWj9+9TGOGZa+H7xmumcljkRWvrbuvysiLYE=
+github.com/TUM-Dev/gocast/worker v0.0.0-20230813170152-4b40e4b3a301 h1:lqbhUuaWE5GETZI5bRWAcl8/JBNU54Rcoow5yyX1zbw=
+github.com/TUM-Dev/gocast/worker v0.0.0-20230813170152-4b40e4b3a301/go.mod h1:o/rM0tvFWj9+9TGOGZa+H7xmumcljkRWvrbuvysiLYE=
 github.com/josharian/intern v1.0.0 h1:vlS4z54oSdjm0bgjRigI+G1HpF+tI+9rE5LLzOg8HmY=
 github.com/josharian/intern v1.0.0/go.mod h1:5DoeVV0s6jJacbCEi61lwdGj/aVlrQvzHFFd8Hwg//Y=
 github.com/json-iterator/go v1.1.10/go.mod h1:KdQUCv79m/52Kvf8AW2vK1V8akMuk1QjK/uOdHXbAo4=
diff --git a/mock_dao/audit.go b/mock_dao/audit.go
index 0f9e828e8..122c2c0bf 100644
--- a/mock_dao/audit.go
+++ b/mock_dao/audit.go
@@ -8,7 +8,7 @@ import (
 	reflect "reflect"
 
 	gomock "github.com/golang/mock/gomock"
-	model "github.com/joschahenningsen/TUM-Live/model"
+	model "github.com/TUM-Dev/gocast/model"
 )
 
 // MockAuditDao is a mock of AuditDao interface.
diff --git a/mock_dao/bookmark.go b/mock_dao/bookmark.go
index 79b09ccf0..4a77d8138 100644
--- a/mock_dao/bookmark.go
+++ b/mock_dao/bookmark.go
@@ -8,7 +8,7 @@ import (
 	reflect "reflect"
 
 	gomock "github.com/golang/mock/gomock"
-	model "github.com/joschahenningsen/TUM-Live/model"
+	model "github.com/TUM-Dev/gocast/model"
 )
 
 // MockBookmarkDao is a mock of BookmarkDao interface.
diff --git a/mock_dao/camera-preset.go b/mock_dao/camera-preset.go
index 29af98d45..c05ffa639 100644
--- a/mock_dao/camera-preset.go
+++ b/mock_dao/camera-preset.go
@@ -8,7 +8,7 @@ import (
 	reflect "reflect"
 
 	gomock "github.com/golang/mock/gomock"
-	model "github.com/joschahenningsen/TUM-Live/model"
+	model "github.com/TUM-Dev/gocast/model"
 )
 
 // MockCameraPresetDao is a mock of CameraPresetDao interface.
diff --git a/mock_dao/chat.go b/mock_dao/chat.go
index 6b61ac8fe..dc92f62a5 100644
--- a/mock_dao/chat.go
+++ b/mock_dao/chat.go
@@ -8,7 +8,7 @@ import (
 	reflect "reflect"
 
 	gomock "github.com/golang/mock/gomock"
-	model "github.com/joschahenningsen/TUM-Live/model"
+	model "github.com/TUM-Dev/gocast/model"
 )
 
 // MockChatDao is a mock of ChatDao interface.
diff --git a/mock_dao/courses.go b/mock_dao/courses.go
index f32a05dbe..7a508b40b 100644
--- a/mock_dao/courses.go
+++ b/mock_dao/courses.go
@@ -9,8 +9,8 @@ import (
 	reflect "reflect"
 
 	gomock "github.com/golang/mock/gomock"
-	dao "github.com/joschahenningsen/TUM-Live/dao"
-	model "github.com/joschahenningsen/TUM-Live/model"
+	dao "github.com/TUM-Dev/gocast/dao"
+	model "github.com/TUM-Dev/gocast/model"
 )
 
 // MockCoursesDao is a mock of CoursesDao interface.
diff --git a/mock_dao/email.go b/mock_dao/email.go
index 0f9ed4ddb..e27a77d22 100644
--- a/mock_dao/email.go
+++ b/mock_dao/email.go
@@ -9,7 +9,7 @@ import (
 	reflect "reflect"
 
 	gomock "github.com/golang/mock/gomock"
-	model "github.com/joschahenningsen/TUM-Live/model"
+	model "github.com/TUM-Dev/gocast/model"
 )
 
 // MockEmailDao is a mock of EmailDao interface.
diff --git a/mock_dao/file.go b/mock_dao/file.go
index 185dcb25a..90a782392 100644
--- a/mock_dao/file.go
+++ b/mock_dao/file.go
@@ -8,7 +8,7 @@ import (
 	reflect "reflect"
 
 	gomock "github.com/golang/mock/gomock"
-	model "github.com/joschahenningsen/TUM-Live/model"
+	model "github.com/TUM-Dev/gocast/model"
 )
 
 // MockFileDao is a mock of FileDao interface.
diff --git a/mock_dao/info-page.go b/mock_dao/info-page.go
index 6780598d0..3ce7bf621 100644
--- a/mock_dao/info-page.go
+++ b/mock_dao/info-page.go
@@ -8,7 +8,7 @@ import (
 	reflect "reflect"
 
 	gomock "github.com/golang/mock/gomock"
-	model "github.com/joschahenningsen/TUM-Live/model"
+	model "github.com/TUM-Dev/gocast/model"
 )
 
 // MockInfoPageDao is a mock of InfoPageDao interface.
diff --git a/mock_dao/ingest_server.go b/mock_dao/ingest_server.go
index 115b69985..7d38fc8bc 100644
--- a/mock_dao/ingest_server.go
+++ b/mock_dao/ingest_server.go
@@ -8,7 +8,7 @@ import (
 	reflect "reflect"
 
 	gomock "github.com/golang/mock/gomock"
-	model "github.com/joschahenningsen/TUM-Live/model"
+	model "github.com/TUM-Dev/gocast/model"
 )
 
 // MockIngestServerDao is a mock of IngestServerDao interface.
diff --git a/mock_dao/lecture_halls.go b/mock_dao/lecture_halls.go
index d56231c13..2cec5abff 100644
--- a/mock_dao/lecture_halls.go
+++ b/mock_dao/lecture_halls.go
@@ -8,8 +8,8 @@ import (
 	reflect "reflect"
 
 	gomock "github.com/golang/mock/gomock"
-	dao "github.com/joschahenningsen/TUM-Live/dao"
-	model "github.com/joschahenningsen/TUM-Live/model"
+	dao "github.com/TUM-Dev/gocast/dao"
+	model "github.com/TUM-Dev/gocast/model"
 )
 
 // MockLectureHallsDao is a mock of LectureHallsDao interface.
diff --git a/mock_dao/notifications.go b/mock_dao/notifications.go
index 492637d4f..b9b94b5f7 100644
--- a/mock_dao/notifications.go
+++ b/mock_dao/notifications.go
@@ -8,7 +8,7 @@ import (
 	reflect "reflect"
 
 	gomock "github.com/golang/mock/gomock"
-	model "github.com/joschahenningsen/TUM-Live/model"
+	model "github.com/TUM-Dev/gocast/model"
 )
 
 // MockNotificationsDao is a mock of NotificationsDao interface.
diff --git a/mock_dao/progress.go b/mock_dao/progress.go
index 8cdd5baf8..e0a4c7843 100644
--- a/mock_dao/progress.go
+++ b/mock_dao/progress.go
@@ -8,7 +8,7 @@ import (
 	reflect "reflect"
 
 	gomock "github.com/golang/mock/gomock"
-	model "github.com/joschahenningsen/TUM-Live/model"
+	model "github.com/TUM-Dev/gocast/model"
 )
 
 // MockProgressDao is a mock of ProgressDao interface.
diff --git a/mock_dao/server-notification.go b/mock_dao/server-notification.go
index e08e4f203..c5a8d4131 100644
--- a/mock_dao/server-notification.go
+++ b/mock_dao/server-notification.go
@@ -8,7 +8,7 @@ import (
 	reflect "reflect"
 
 	gomock "github.com/golang/mock/gomock"
-	model "github.com/joschahenningsen/TUM-Live/model"
+	model "github.com/TUM-Dev/gocast/model"
 )
 
 // MockServerNotificationDao is a mock of ServerNotificationDao interface.
diff --git a/mock_dao/statistics.go b/mock_dao/statistics.go
index bd270c77f..6370ebe3a 100644
--- a/mock_dao/statistics.go
+++ b/mock_dao/statistics.go
@@ -8,8 +8,8 @@ import (
 	reflect "reflect"
 
 	gomock "github.com/golang/mock/gomock"
-	dao "github.com/joschahenningsen/TUM-Live/dao"
-	model "github.com/joschahenningsen/TUM-Live/model"
+	dao "github.com/TUM-Dev/gocast/dao"
+	model "github.com/TUM-Dev/gocast/model"
 )
 
 // MockStatisticsDao is a mock of StatisticsDao interface.
diff --git a/mock_dao/streams.go b/mock_dao/streams.go
index 6fe7cf423..f5b32c272 100644
--- a/mock_dao/streams.go
+++ b/mock_dao/streams.go
@@ -10,8 +10,8 @@ import (
 	time "time"
 
 	gomock "github.com/golang/mock/gomock"
-	dao "github.com/joschahenningsen/TUM-Live/dao"
-	model "github.com/joschahenningsen/TUM-Live/model"
+	dao "github.com/TUM-Dev/gocast/dao"
+	model "github.com/TUM-Dev/gocast/model"
 )
 
 // MockStreamsDao is a mock of StreamsDao interface.
diff --git a/mock_dao/subtitles.go b/mock_dao/subtitles.go
index f26c65cec..f8a0249de 100644
--- a/mock_dao/subtitles.go
+++ b/mock_dao/subtitles.go
@@ -9,7 +9,7 @@ import (
 	reflect "reflect"
 
 	gomock "github.com/golang/mock/gomock"
-	model "github.com/joschahenningsen/TUM-Live/model"
+	model "github.com/TUM-Dev/gocast/model"
 )
 
 // MockSubtitlesDao is a mock of SubtitlesDao interface.
diff --git a/mock_dao/token.go b/mock_dao/token.go
index fa429eb2b..1a3266432 100644
--- a/mock_dao/token.go
+++ b/mock_dao/token.go
@@ -8,8 +8,8 @@ import (
 	reflect "reflect"
 
 	gomock "github.com/golang/mock/gomock"
-	dao "github.com/joschahenningsen/TUM-Live/dao"
-	model "github.com/joschahenningsen/TUM-Live/model"
+	dao "github.com/TUM-Dev/gocast/dao"
+	model "github.com/TUM-Dev/gocast/model"
 )
 
 // MockTokenDao is a mock of TokenDao interface.
diff --git a/mock_dao/transcoding-failure.go b/mock_dao/transcoding-failure.go
index 16c70bbaa..c222c7fc8 100644
--- a/mock_dao/transcoding-failure.go
+++ b/mock_dao/transcoding-failure.go
@@ -8,7 +8,7 @@ import (
 	reflect "reflect"
 
 	gomock "github.com/golang/mock/gomock"
-	model "github.com/joschahenningsen/TUM-Live/model"
+	model "github.com/TUM-Dev/gocast/model"
 )
 
 // MockTranscodingFailureDao is a mock of TranscodingFailureDao interface.
diff --git a/mock_dao/upload_key.go b/mock_dao/upload_key.go
index 87bde0f4b..c3b92c9e4 100644
--- a/mock_dao/upload_key.go
+++ b/mock_dao/upload_key.go
@@ -8,7 +8,7 @@ import (
 	reflect "reflect"
 
 	gomock "github.com/golang/mock/gomock"
-	model "github.com/joschahenningsen/TUM-Live/model"
+	model "github.com/TUM-Dev/gocast/model"
 )
 
 // MockUploadKeyDao is a mock of UploadKeyDao interface.
diff --git a/mock_dao/users.go b/mock_dao/users.go
index 876fda273..fb97525b3 100644
--- a/mock_dao/users.go
+++ b/mock_dao/users.go
@@ -9,7 +9,7 @@ import (
 	reflect "reflect"
 
 	gomock "github.com/golang/mock/gomock"
-	model "github.com/joschahenningsen/TUM-Live/model"
+	model "github.com/TUM-Dev/gocast/model"
 )
 
 // MockUsersDao is a mock of UsersDao interface.
diff --git a/mock_dao/video-section.go b/mock_dao/video-section.go
index 536f56272..83619ed2d 100644
--- a/mock_dao/video-section.go
+++ b/mock_dao/video-section.go
@@ -8,7 +8,7 @@ import (
 	reflect "reflect"
 
 	gomock "github.com/golang/mock/gomock"
-	model "github.com/joschahenningsen/TUM-Live/model"
+	model "github.com/TUM-Dev/gocast/model"
 )
 
 // MockVideoSectionDao is a mock of VideoSectionDao interface.
diff --git a/mock_dao/video-seek.go b/mock_dao/video-seek.go
index 487b15071..47bfba104 100644
--- a/mock_dao/video-seek.go
+++ b/mock_dao/video-seek.go
@@ -8,7 +8,7 @@ import (
 	reflect "reflect"
 
 	gomock "github.com/golang/mock/gomock"
-	model "github.com/joschahenningsen/TUM-Live/model"
+	model "github.com/TUM-Dev/gocast/model"
 )
 
 // MockVideoSeekDao is a mock of VideoSeekDao interface.
diff --git a/mock_dao/worker.go b/mock_dao/worker.go
index 22d07fce3..1095c0e71 100644
--- a/mock_dao/worker.go
+++ b/mock_dao/worker.go
@@ -9,7 +9,7 @@ import (
 	reflect "reflect"
 
 	gomock "github.com/golang/mock/gomock"
-	model "github.com/joschahenningsen/TUM-Live/model"
+	model "github.com/TUM-Dev/gocast/model"
 )
 
 // MockWorkerDao is a mock of WorkerDao interface.
diff --git a/mock_tools/mock_camera/camera.go b/mock_tools/mock_camera/camera.go
index 6c029215e..2e2c42486 100644
--- a/mock_tools/mock_camera/camera.go
+++ b/mock_tools/mock_camera/camera.go
@@ -8,7 +8,7 @@ import (
 	reflect "reflect"
 
 	gomock "github.com/golang/mock/gomock"
-	model "github.com/joschahenningsen/TUM-Live/model"
+	model "github.com/TUM-Dev/gocast/model"
 )
 
 // MockCam is a mock of Cam interface.
diff --git a/mock_tools/presets.go b/mock_tools/presets.go
index 129099e80..4a2c05abe 100644
--- a/mock_tools/presets.go
+++ b/mock_tools/presets.go
@@ -9,8 +9,8 @@ import (
 	reflect "reflect"
 
 	gomock "github.com/golang/mock/gomock"
-	model "github.com/joschahenningsen/TUM-Live/model"
-	camera "github.com/joschahenningsen/TUM-Live/tools/camera"
+	model "github.com/TUM-Dev/gocast/model"
+	camera "github.com/TUM-Dev/gocast/tools/camera"
 )
 
 // MockPresetUtility is a mock of PresetUtility interface.
diff --git a/renovate.json b/renovate.json
index 04351d92b..55aff20a5 100644
--- a/renovate.json
+++ b/renovate.json
@@ -4,5 +4,5 @@
     "config:base",
     "group:allNonMajor"
   ],
-  "ignoreDeps": ["github.com/joschahenningsen/TUM-Live/worker"]
+  "ignoreDeps": ["github.com/TUM-Dev/gocast/worker"]
 }
diff --git a/tools/bot/bot.go b/tools/bot/bot.go
index 4fff3cda8..572e448e8 100644
--- a/tools/bot/bot.go
+++ b/tools/bot/bot.go
@@ -2,8 +2,8 @@ package bot
 
 import (
 	"github.com/getsentry/sentry-go"
-	"github.com/joschahenningsen/TUM-Live/dao"
-	"github.com/joschahenningsen/TUM-Live/model"
+	"github.com/TUM-Dev/gocast/dao"
+	"github.com/TUM-Dev/gocast/model"
 	"github.com/microcosm-cc/bluemonday"
 	log "github.com/sirupsen/logrus"
 	"strings"
diff --git a/tools/bot/matrix.go b/tools/bot/matrix.go
index e2a18823d..0bd8e8e2d 100644
--- a/tools/bot/matrix.go
+++ b/tools/bot/matrix.go
@@ -6,7 +6,7 @@ import (
 	"errors"
 	"fmt"
 	"github.com/getsentry/sentry-go"
-	"github.com/joschahenningsen/TUM-Live/tools"
+	"github.com/TUM-Dev/gocast/tools"
 	log "github.com/sirupsen/logrus"
 	"io"
 	"math/rand"
diff --git a/tools/camera/axis.go b/tools/camera/axis.go
index 0f7c4694b..8e887ec5b 100644
--- a/tools/camera/axis.go
+++ b/tools/camera/axis.go
@@ -3,7 +3,7 @@ package camera
 import (
 	"errors"
 	"fmt"
-	"github.com/joschahenningsen/TUM-Live/model"
+	"github.com/TUM-Dev/gocast/model"
 	uuid "github.com/satori/go.uuid"
 	"strconv"
 	"strings"
diff --git a/tools/camera/camera.go b/tools/camera/camera.go
index 419ae330b..27d2554fa 100644
--- a/tools/camera/camera.go
+++ b/tools/camera/camera.go
@@ -4,7 +4,7 @@ import (
 	"bytes"
 	"fmt"
 	"github.com/icholy/digest"
-	"github.com/joschahenningsen/TUM-Live/model"
+	"github.com/TUM-Dev/gocast/model"
 	"io"
 	"net/http"
 	"os"
diff --git a/tools/camera/panasonic.go b/tools/camera/panasonic.go
index 67bcd1536..65864c6d7 100644
--- a/tools/camera/panasonic.go
+++ b/tools/camera/panasonic.go
@@ -2,7 +2,7 @@ package camera
 
 import (
 	"fmt"
-	"github.com/joschahenningsen/TUM-Live/model"
+	"github.com/TUM-Dev/gocast/model"
 	uuid "github.com/satori/go.uuid"
 	log "github.com/sirupsen/logrus"
 )
diff --git a/tools/email.go b/tools/email.go
index 5406651d7..02700d7e9 100644
--- a/tools/email.go
+++ b/tools/email.go
@@ -4,7 +4,7 @@ import (
 	"bytes"
 	"context"
 	"fmt"
-	"github.com/joschahenningsen/TUM-Live/dao"
+	"github.com/TUM-Dev/gocast/dao"
 	"log"
 	"net/smtp"
 	"os/exec"
diff --git a/tools/functions.go b/tools/functions.go
index 59c0fd347..6053e14ae 100644
--- a/tools/functions.go
+++ b/tools/functions.go
@@ -2,7 +2,7 @@ package tools
 
 import (
 	"errors"
-	"github.com/joschahenningsen/TUM-Live/model"
+	"github.com/TUM-Dev/gocast/model"
 	"log"
 	"os/exec"
 	"regexp"
diff --git a/tools/meiliExporter.go b/tools/meiliExporter.go
index 4404394fd..2fbd595e6 100644
--- a/tools/meiliExporter.go
+++ b/tools/meiliExporter.go
@@ -4,7 +4,7 @@ import (
 	"errors"
 	"fmt"
 	"github.com/asticode/go-astisub"
-	"github.com/joschahenningsen/TUM-Live/dao"
+	"github.com/TUM-Dev/gocast/dao"
 	"github.com/meilisearch/meilisearch-go"
 	log "github.com/sirupsen/logrus"
 	"strings"
diff --git a/tools/middlewares.go b/tools/middlewares.go
index ecfa2d3a3..b523ba213 100644
--- a/tools/middlewares.go
+++ b/tools/middlewares.go
@@ -5,9 +5,9 @@ import (
 	"github.com/getsentry/sentry-go"
 	"github.com/gin-gonic/gin"
 	"github.com/golang-jwt/jwt/v4"
-	"github.com/joschahenningsen/TUM-Live/dao"
-	"github.com/joschahenningsen/TUM-Live/model"
-	"github.com/joschahenningsen/TUM-Live/tools/realtime"
+	"github.com/TUM-Dev/gocast/dao"
+	"github.com/TUM-Dev/gocast/model"
+	"github.com/TUM-Dev/gocast/tools/realtime"
 	log "github.com/sirupsen/logrus"
 	"net/http"
 	"net/url"
diff --git a/tools/presets.go b/tools/presets.go
index c5b755301..317725ec0 100644
--- a/tools/presets.go
+++ b/tools/presets.go
@@ -4,9 +4,9 @@ import (
 	"context"
 	"errors"
 	"github.com/getsentry/sentry-go"
-	"github.com/joschahenningsen/TUM-Live/dao"
-	"github.com/joschahenningsen/TUM-Live/model"
-	"github.com/joschahenningsen/TUM-Live/tools/camera"
+	"github.com/TUM-Dev/gocast/dao"
+	"github.com/TUM-Dev/gocast/model"
+	"github.com/TUM-Dev/gocast/tools/camera"
 	log "github.com/sirupsen/logrus"
 	"time"
 )
diff --git a/tools/realtime/connector/melody.go b/tools/realtime/connector/melody.go
index 5bfcad054..83573d087 100644
--- a/tools/realtime/connector/melody.go
+++ b/tools/realtime/connector/melody.go
@@ -2,7 +2,7 @@ package connector
 
 import (
 	"github.com/gabstv/melody"
-	"github.com/joschahenningsen/TUM-Live/tools/realtime"
+	"github.com/TUM-Dev/gocast/tools/realtime"
 	"net/http"
 )
 
diff --git a/tools/stats_export.dart.go b/tools/stats_export.dart.go
index c3b300c78..73ec0a911 100644
--- a/tools/stats_export.dart.go
+++ b/tools/stats_export.dart.go
@@ -2,7 +2,7 @@ package tools
 
 import (
 	"github.com/gin-gonic/gin"
-	"github.com/joschahenningsen/TUM-Live/dao"
+	"github.com/TUM-Dev/gocast/dao"
 	"strconv"
 	"strings"
 )
diff --git a/tools/stream-signing.go b/tools/stream-signing.go
index 8c787421b..60ff1af01 100644
--- a/tools/stream-signing.go
+++ b/tools/stream-signing.go
@@ -3,7 +3,7 @@ package tools
 import (
 	"fmt"
 	"github.com/golang-jwt/jwt/v4"
-	"github.com/joschahenningsen/TUM-Live/model"
+	"github.com/TUM-Dev/gocast/model"
 	"strings"
 	"time"
 )
diff --git a/tools/testutils/testdata.go b/tools/testutils/testdata.go
index b63498e92..fed7833b3 100644
--- a/tools/testutils/testdata.go
+++ b/tools/testutils/testdata.go
@@ -8,11 +8,11 @@ import (
 	"time"
 
 	"github.com/golang/mock/gomock"
-	"github.com/joschahenningsen/TUM-Live/dao"
-	"github.com/joschahenningsen/TUM-Live/mock_dao"
-	"github.com/joschahenningsen/TUM-Live/mock_tools"
-	"github.com/joschahenningsen/TUM-Live/model"
-	"github.com/joschahenningsen/TUM-Live/tools"
+	"github.com/TUM-Dev/gocast/dao"
+	"github.com/TUM-Dev/gocast/mock_dao"
+	"github.com/TUM-Dev/gocast/mock_tools"
+	"github.com/TUM-Dev/gocast/model"
+	"github.com/TUM-Dev/gocast/tools"
 	"gorm.io/gorm"
 )
 
diff --git a/tools/testutils/testutils.go b/tools/testutils/testutils.go
index b86a94158..296149332 100644
--- a/tools/testutils/testutils.go
+++ b/tools/testutils/testutils.go
@@ -2,7 +2,7 @@ package testutils
 
 import (
 	"github.com/gin-gonic/gin"
-	"github.com/joschahenningsen/TUM-Live/tools"
+	"github.com/TUM-Dev/gocast/tools"
 	"github.com/stretchr/testify/assert"
 	"testing"
 )
diff --git a/tools/tum/campus-online-base.go b/tools/tum/campus-online-base.go
index 8e42c83e6..b990327e0 100644
--- a/tools/tum/campus-online-base.go
+++ b/tools/tum/campus-online-base.go
@@ -5,8 +5,8 @@ import (
 	"errors"
 	"fmt"
 	"github.com/antchfx/xmlquery"
-	"github.com/joschahenningsen/TUM-Live/dao"
-	"github.com/joschahenningsen/TUM-Live/tools"
+	"github.com/TUM-Dev/gocast/dao"
+	"github.com/TUM-Dev/gocast/tools"
 	log "github.com/sirupsen/logrus"
 )
 
diff --git a/tools/tum/courses.go b/tools/tum/courses.go
index 9184cabef..9d0b731e5 100644
--- a/tools/tum/courses.go
+++ b/tools/tum/courses.go
@@ -4,9 +4,9 @@ import (
 	"context"
 	"fmt"
 	"github.com/TUM-Dev/CampusProxy/client"
-	"github.com/joschahenningsen/TUM-Live/dao"
-	"github.com/joschahenningsen/TUM-Live/model/search"
-	"github.com/joschahenningsen/TUM-Live/tools"
+	"github.com/TUM-Dev/gocast/dao"
+	"github.com/TUM-Dev/gocast/model/search"
+	"github.com/TUM-Dev/gocast/tools"
 	log "github.com/sirupsen/logrus"
 	"strconv"
 	"strings"
diff --git a/tools/tum/events.go b/tools/tum/events.go
index d8314f91d..f56b83f3b 100644
--- a/tools/tum/events.go
+++ b/tools/tum/events.go
@@ -5,9 +5,9 @@ import (
 	"errors"
 	"fmt"
 	"github.com/antchfx/xmlquery"
-	"github.com/joschahenningsen/TUM-Live/dao"
-	"github.com/joschahenningsen/TUM-Live/model"
-	"github.com/joschahenningsen/TUM-Live/tools"
+	"github.com/TUM-Dev/gocast/dao"
+	"github.com/TUM-Dev/gocast/model"
+	"github.com/TUM-Dev/gocast/tools"
 	uuid "github.com/satori/go.uuid"
 	log "github.com/sirupsen/logrus"
 	"strconv"
diff --git a/tools/tum/ldap.go b/tools/tum/ldap.go
index b1eb93cf8..809d6a0f9 100644
--- a/tools/tum/ldap.go
+++ b/tools/tum/ldap.go
@@ -6,8 +6,8 @@ import (
 	"fmt"
 	"github.com/getsentry/sentry-go"
 	"github.com/go-ldap/ldap/v3"
-	"github.com/joschahenningsen/TUM-Live/model"
-	"github.com/joschahenningsen/TUM-Live/tools"
+	"github.com/TUM-Dev/gocast/model"
+	"github.com/TUM-Dev/gocast/tools"
 	"time"
 )
 
diff --git a/tools/tum/students.go b/tools/tum/students.go
index ff94f66f2..127cb3bf9 100644
--- a/tools/tum/students.go
+++ b/tools/tum/students.go
@@ -4,9 +4,9 @@ import (
 	"errors"
 	"fmt"
 	"github.com/antchfx/xmlquery"
-	"github.com/joschahenningsen/TUM-Live/dao"
-	"github.com/joschahenningsen/TUM-Live/model"
-	"github.com/joschahenningsen/TUM-Live/tools"
+	"github.com/TUM-Dev/gocast/dao"
+	"github.com/TUM-Dev/gocast/model"
+	"github.com/TUM-Dev/gocast/tools"
 	log "github.com/sirupsen/logrus"
 )
 
diff --git a/vod-service/cmd/vod-service/main.go b/vod-service/cmd/vod-service/main.go
index a44319c28..1d722b6e7 100644
--- a/vod-service/cmd/vod-service/main.go
+++ b/vod-service/cmd/vod-service/main.go
@@ -1,6 +1,6 @@
 package main
 
-import "github.com/joschahenningsen/TUM-Live/vod-service/internal"
+import "github.com/TUM-Dev/gocast/vod-service/internal"
 
 func main() {
 	app := internal.NewApp()
diff --git a/vod-service/go.mod b/vod-service/go.mod
index 135f4a1c3..c81cc2985 100644
--- a/vod-service/go.mod
+++ b/vod-service/go.mod
@@ -1,3 +1,3 @@
-module github.com/joschahenningsen/TUM-Live/vod-service
+module github.com/TUM-Dev/gocast/vod-service
 
 go 1.19
diff --git a/web/admin.go b/web/admin.go
index 7e99b9064..9a7b992f7 100755
--- a/web/admin.go
+++ b/web/admin.go
@@ -7,10 +7,10 @@ import (
 	"fmt"
 	"github.com/getsentry/sentry-go"
 	"github.com/gin-gonic/gin"
-	"github.com/joschahenningsen/TUM-Live/dao"
-	"github.com/joschahenningsen/TUM-Live/model"
-	"github.com/joschahenningsen/TUM-Live/tools"
-	"github.com/joschahenningsen/TUM-Live/tools/tum"
+	"github.com/TUM-Dev/gocast/dao"
+	"github.com/TUM-Dev/gocast/model"
+	"github.com/TUM-Dev/gocast/tools"
+	"github.com/TUM-Dev/gocast/tools/tum"
 	log "github.com/sirupsen/logrus"
 	"gorm.io/gorm"
 	"net/http"
diff --git a/web/course.go b/web/course.go
index 522ee8857..d6c076790 100644
--- a/web/course.go
+++ b/web/course.go
@@ -6,8 +6,8 @@ import (
 	"html/template"
 	"net/http"
 
-	"github.com/joschahenningsen/TUM-Live/model"
-	"github.com/joschahenningsen/TUM-Live/tools"
+	"github.com/TUM-Dev/gocast/model"
+	"github.com/TUM-Dev/gocast/tools"
 	log "github.com/sirupsen/logrus"
 
 	"github.com/getsentry/sentry-go"
diff --git a/web/index.go b/web/index.go
index 34ec7a764..fbb2f692e 100644
--- a/web/index.go
+++ b/web/index.go
@@ -6,10 +6,10 @@ import (
 	"github.com/RBG-TUM/commons"
 	"github.com/getsentry/sentry-go"
 	"github.com/gin-gonic/gin"
-	"github.com/joschahenningsen/TUM-Live/dao"
-	"github.com/joschahenningsen/TUM-Live/model"
-	"github.com/joschahenningsen/TUM-Live/tools"
-	"github.com/joschahenningsen/TUM-Live/tools/tum"
+	"github.com/TUM-Dev/gocast/dao"
+	"github.com/TUM-Dev/gocast/model"
+	"github.com/TUM-Dev/gocast/tools"
+	"github.com/TUM-Dev/gocast/tools/tum"
 	log "github.com/sirupsen/logrus"
 	"gorm.io/gorm"
 	"html/template"
diff --git a/web/package.json b/web/package.json
index 384f40d24..797083551 100755
--- a/web/package.json
+++ b/web/package.json
@@ -4,7 +4,7 @@
   "description": "Backend of TUMs live streaming service",
   "repository": {
     "type": "git",
-    "url": "git+https://github.com/joschahenningsen/TUM-Live.git"
+    "url": "git+https://github.com/TUM-Dev/gocast.git"
   },
   "scripts": {
     "postinstall": "npm run build && npm run tailwind-compile",
@@ -19,9 +19,9 @@
   "author": "Joscha Henningsen",
   "license": "MIT",
   "bugs": {
-    "url": "https://github.com/joschahenningsen/TUM-Live/issues"
+    "url": "https://github.com/TUM-Dev/gocast/issues"
   },
-  "homepage": "https://github.com/joschahenningsen/TUM-Live#readme",
+  "homepage": "https://github.com/TUM-Dev/gocast#readme",
   "dependencies": {
     "@alpinejs/focus": "^3.12.3",
     "@alpinejs/persist": "^3.12.3",
diff --git a/web/popup.go b/web/popup.go
index 2a96c197d..d4c1a8eac 100644
--- a/web/popup.go
+++ b/web/popup.go
@@ -4,7 +4,7 @@ import (
 	"errors"
 	"github.com/getsentry/sentry-go"
 	"github.com/gin-gonic/gin"
-	"github.com/joschahenningsen/TUM-Live/tools"
+	"github.com/TUM-Dev/gocast/tools"
 	"log"
 	"net/http"
 )
diff --git a/web/router.go b/web/router.go
index 455726a51..90d2faea0 100755
--- a/web/router.go
+++ b/web/router.go
@@ -12,8 +12,8 @@ import (
 
 	"github.com/Masterminds/sprig/v3"
 	"github.com/gin-gonic/gin"
-	"github.com/joschahenningsen/TUM-Live/dao"
-	"github.com/joschahenningsen/TUM-Live/tools"
+	"github.com/TUM-Dev/gocast/dao"
+	"github.com/TUM-Dev/gocast/tools"
 )
 
 var templateExecutor tools.TemplateExecutor
diff --git a/web/saml.go b/web/saml.go
index 51ec65759..b38426f05 100644
--- a/web/saml.go
+++ b/web/saml.go
@@ -12,9 +12,9 @@ import (
 	"github.com/crewjam/saml"
 	"github.com/crewjam/saml/samlsp"
 	"github.com/gin-gonic/gin"
-	"github.com/joschahenningsen/TUM-Live/dao"
-	"github.com/joschahenningsen/TUM-Live/model"
-	"github.com/joschahenningsen/TUM-Live/tools"
+	"github.com/TUM-Dev/gocast/dao"
+	"github.com/TUM-Dev/gocast/model"
+	"github.com/TUM-Dev/gocast/tools"
 	log "github.com/sirupsen/logrus"
 )
 
diff --git a/web/template/admin/admin.gohtml b/web/template/admin/admin.gohtml
index af6bd554d..8e7549b56 100755
--- a/web/template/admin/admin.gohtml
+++ b/web/template/admin/admin.gohtml
@@ -15,7 +15,7 @@
 {{$page := .Page}}
 {{$indexData := .IndexData}}
 {{template "header" .IndexData.TUMLiveContext}}
-{{- /*gotype: github.com/joschahenningsen/TUM-Live/web.AdminPageData*/ -}}
+{{- /*gotype: github.com/TUM-Dev/gocast/web.AdminPageData*/ -}}
 <div x-data="{hidden:true}" class="lg:hidden mx-6 mt-2">
     <button class="btn" @click="hidden=!hidden"
             x-text="hidden?'Open Menu':'Close Menu'">Open Menu
diff --git a/web/template/admin/admin_tabs/create-course.gohtml b/web/template/admin/admin_tabs/create-course.gohtml
index 9598f3482..5fc3dac20 100644
--- a/web/template/admin/admin_tabs/create-course.gohtml
+++ b/web/template/admin/admin_tabs/create-course.gohtml
@@ -1,4 +1,4 @@
-{{- /*gotype: github.com/joschahenningsen/TUM-Live/web.CreateCourseData*/ -}}
+{{- /*gotype: github.com/TUM-Dev/gocast/web.CreateCourseData*/ -}}
 {{template "header" .IndexData.TUMLiveContext}}
 {{define "create-course"}}
     <div class="text-1 container mx-auto"
diff --git a/web/template/admin/admin_tabs/edit-course.gohtml b/web/template/admin/admin_tabs/edit-course.gohtml
index c1efc1dc5..880614c99 100644
--- a/web/template/admin/admin_tabs/edit-course.gohtml
+++ b/web/template/admin/admin_tabs/edit-course.gohtml
@@ -2,7 +2,7 @@
 <link rel="stylesheet" href="/static/node_modules/flatpickr/dist/flatpickr.min.css">
 <script src="/static/node_modules/flatpickr/dist/flatpickr.min.js"></script>
 <script src="/static/node_modules/chart.js/dist/chart.min.js"></script>
-{{- /*gotype: github.com/joschahenningsen/TUM-Live/web.AdminPageData*/ -}}
+{{- /*gotype: github.com/TUM-Dev/gocast/web.AdminPageData*/ -}}
 {{$course := .IndexData.TUMLiveContext.Course}}
 {{$lecture := .IndexData.TUMLiveContext.Stream}}
 <div class="text-1 mt-4" x-data="{userId: {{.IndexData.TUMLiveContext.User.Model.ID}} }">
diff --git a/web/template/admin/admin_tabs/info-pages.gohtml b/web/template/admin/admin_tabs/info-pages.gohtml
index a93174292..9a61b86a8 100644
--- a/web/template/admin/admin_tabs/info-pages.gohtml
+++ b/web/template/admin/admin_tabs/info-pages.gohtml
@@ -1,9 +1,9 @@
 {{define "info-pages"}}
     <h2 class="text-2xl text-1 my-auto mt-4 font-medium">Info Pages</h2>
-    {{- /*gotype: github.com/joschahenningsen/TUM-Live/[]model.Text*/ -}}
+    {{- /*gotype: github.com/TUM-Dev/gocast/[]model.Text*/ -}}
     <div class="grid gap-2 pt-5">
         {{range $i, $text := .}}
-            {{- /*gotype: github.com/joschahenningsen/TUM-Live/model.Text*/ -}}
+            {{- /*gotype: github.com/TUM-Dev/gocast/model.Text*/ -}}
             <div x-data="{editOpen: false, oldName: '{{$text.Name}}', name:'', oldContent: `{{$text.RawContent}}`, newContent: ''}"
                  x-init="newContent=oldContent;name=oldName">
                 <form class="form-container my-0"
diff --git a/web/template/admin/admin_tabs/lecture_halls.gohtml b/web/template/admin/admin_tabs/lecture_halls.gohtml
index ecf0acf0f..f5edf15b9 100755
--- a/web/template/admin/admin_tabs/lecture_halls.gohtml
+++ b/web/template/admin/admin_tabs/lecture_halls.gohtml
@@ -1,5 +1,5 @@
 {{define "lectureHalls"}}
-    {{- /*gotype: github.com/joschahenningsen/TUM-Live/[]model.LectureHall*/ -}}
+    {{- /*gotype: github.com/TUM-Dev/gocast/[]model.LectureHall*/ -}}
     <a href="/admin/lectureHalls/new" class="mx-auto w-4/5 mt-8 btn primary block">
         &#43; New Lecture Hall
     </a>
diff --git a/web/template/admin/admin_tabs/notifications.gohtml b/web/template/admin/admin_tabs/notifications.gohtml
index e0d0800af..8c368fd63 100644
--- a/web/template/admin/admin_tabs/notifications.gohtml
+++ b/web/template/admin/admin_tabs/notifications.gohtml
@@ -2,7 +2,7 @@
 <h1 class="text-2xl text-1 my-4">User Notifications</h1>
 {{if . }}
     {{ range . }}
-        {{- /*gotype: github.com/joschahenningsen/TUM-Live/model.Notification*/ -}}
+        {{- /*gotype: github.com/TUM-Dev/gocast/model.Notification*/ -}}
         <section x-data class="form-container">
             <h2 class="form-container-title flex justify-between items-center">
                 <div>
diff --git a/web/template/admin/admin_tabs/schedule.gohtml b/web/template/admin/admin_tabs/schedule.gohtml
index 4b26726dd..1aa757e3e 100644
--- a/web/template/admin/admin_tabs/schedule.gohtml
+++ b/web/template/admin/admin_tabs/schedule.gohtml
@@ -34,7 +34,7 @@
                                 Selfstreaming
                             </label>
                             {{range .}}
-                                {{- /*gotype: github.com/joschahenningsen/TUM-Live/model.LectureHall*/ -}}
+                                {{- /*gotype: github.com/TUM-Dev/gocast/model.LectureHall*/ -}}
                                 <label class="block">
                                     <input type="checkbox" checked class="lh-toggle" @change="e=>{if ($el.checked){lectureHalls.push({{.Model.ID}})}else{lectureHalls=lectureHalls.filter(i=>i!=={{.Model.ID}})}}">
                                     {{.Name}}
diff --git a/web/template/admin/admin_tabs/server-notifications.gohtml b/web/template/admin/admin_tabs/server-notifications.gohtml
index ac9fa651a..1decfc038 100644
--- a/web/template/admin/admin_tabs/server-notifications.gohtml
+++ b/web/template/admin/admin_tabs/server-notifications.gohtml
@@ -8,7 +8,7 @@
 {{template "server-notification-edit"}}
 {{end}}
 
-{{- /*gotype: github.com/joschahenningsen/TUM-Live/model.ServerNotification*/ -}}
+{{- /*gotype: github.com/TUM-Dev/gocast/model.ServerNotification*/ -}}
 {{define "server-notification-edit"}}
 <form class="form-container" action="/api/serverNotification/{{if .Model.ID}}{{.Model.ID}}{{else}}create{{end}}"
     method="post">
diff --git a/web/template/admin/admin_tabs/stats.gohtml b/web/template/admin/admin_tabs/stats.gohtml
index 3fc56642c..b3e496eba 100644
--- a/web/template/admin/admin_tabs/stats.gohtml
+++ b/web/template/admin/admin_tabs/stats.gohtml
@@ -1,5 +1,5 @@
 {{define "stats"}}
-{{- /*gotype: github.com/joschahenningsen/TUM-Live/web.IndexData*/ -}}
+{{- /*gotype: github.com/TUM-Dev/gocast/web.IndexData*/ -}}
 <label class="hidden" for="courseID">CourseID<input id="courseID" type="text" class="hidden"
         value="{{.TUMLiveContext.Course.Model.ID}}"></label>
 
diff --git a/web/template/admin/admin_tabs/token.gohtml b/web/template/admin/admin_tabs/token.gohtml
index c36c077a7..8ce4d64c8 100644
--- a/web/template/admin/admin_tabs/token.gohtml
+++ b/web/template/admin/admin_tabs/token.gohtml
@@ -19,7 +19,7 @@
             </thead>
             <tbody class="text-3">
             {{range .}}
-                {{- /*gotype: github.com/joschahenningsen/TUM-Live/dao.AllTokensDto*/ -}}
+                {{- /*gotype: github.com/TUM-Dev/gocast/dao.AllTokensDto*/ -}}
                 <tr x-data="{id: {{.Token.Model.ID}}, show:true}" x-show="show">
                     <td class="p-4">{{if .UserMail}}{{.UserMail}}{{else}}{{.UserName}} {{.UserLrzID}}{{end}}</td>
                     <td>{{.Scope}}</td>
diff --git a/web/template/admin/admin_tabs/workers.gohtml b/web/template/admin/admin_tabs/workers.gohtml
index db16fcbc2..a61e6545f 100644
--- a/web/template/admin/admin_tabs/workers.gohtml
+++ b/web/template/admin/admin_tabs/workers.gohtml
@@ -13,7 +13,7 @@
                     </tr>
                     </thead>
                     <tbody class="text-3">
-                        {{- /*gotype: github.com/joschahenningsen/TUM-Live/web.WorkersData*/ -}}
+                        {{- /*gotype: github.com/TUM-Dev/gocast/web.WorkersData*/ -}}
                         {{range $worker := .Workers}}
                             <tr class="border-gray-500">
                                 <td class="pt-3 px-6">
@@ -79,7 +79,7 @@
             <span class="flex">
                 {{template "terminalprompt"}}
                 <span class="text-gray-300">docker run -p 50051:50051 -e "Host=vm1234" -e "Token=<span
-                      x-text="token"></span>" ghcr.io/joschahenningsen/tum-live/worker:latest</span>
+                      x-text="token"></span>" ghcr.io/TUM-Dev/gocast/worker:latest</span>
             </span>
             </p>
             <p class="dark:bg-secondary-lighter text-white shadow rounded bg-gray-400 p-3" x-show="show==='swarm'">
diff --git a/web/template/admin/lecture-cut.gohtml b/web/template/admin/lecture-cut.gohtml
index 278768d06..fa1537de0 100644
--- a/web/template/admin/lecture-cut.gohtml
+++ b/web/template/admin/lecture-cut.gohtml
@@ -11,7 +11,7 @@
 </head>
 <body class="bg-primary">
 
-{{- /*gotype: github.com/joschahenningsen/TUM-Live/tools.TUMLiveContext*/ -}}
+{{- /*gotype: github.com/TUM-Dev/gocast/tools.TUMLiveContext*/ -}}
 {{template "header" .}}
 {{$course := .Course}}
 {{$stream := .Stream}}
diff --git a/web/template/admin/lecture-units.gohtml b/web/template/admin/lecture-units.gohtml
index 131c39804..5fc64f8e3 100644
--- a/web/template/admin/lecture-units.gohtml
+++ b/web/template/admin/lecture-units.gohtml
@@ -11,7 +11,7 @@
 </head>
 <body class="bg-primary">
 
-{{- /*gotype: github.com/joschahenningsen/TUM-Live/web.LectureUnitsPageData*/ -}}
+{{- /*gotype: github.com/TUM-Dev/gocast/web.LectureUnitsPageData*/ -}}
 {{template "header" .IndexData.TUMLiveContext}}
 
 <div class="text-white container mx-auto">
diff --git a/web/template/admin/opt-out.gohtml b/web/template/admin/opt-out.gohtml
index d98ce4c90..a0bf0da02 100644
--- a/web/template/admin/opt-out.gohtml
+++ b/web/template/admin/opt-out.gohtml
@@ -1,4 +1,4 @@
-{{- /*gotype: github.com/joschahenningsen/TUM-Live/web.OptOutPageData*/ -}}
+{{- /*gotype: github.com/TUM-Dev/gocast/web.OptOutPageData*/ -}}
 <!DOCTYPE html>
 <html lang="en" class="dark">
 <head>
diff --git a/web/template/components/chat.gohtml b/web/template/components/chat.gohtml
index 0d34d4b4e..84c7e1e25 100644
--- a/web/template/components/chat.gohtml
+++ b/web/template/components/chat.gohtml
@@ -1,5 +1,5 @@
 {{define "chat-component"}}
-    {{- /*gotype: github.com/joschahenningsen/TUM-Live/web.ChatData*/ -}}
+    {{- /*gotype: github.com/TUM-Dev/gocast/web.ChatData*/ -}}
     {{$course := .IndexData.TUMLiveContext.Course}}
     {{$stream := .IndexData.TUMLiveContext.Stream}}
     {{$userName := ""}}
diff --git a/web/template/course-card.gohtml b/web/template/course-card.gohtml
index a88da1205..c0a1f6f03 100644
--- a/web/template/course-card.gohtml
+++ b/web/template/course-card.gohtml
@@ -1,4 +1,4 @@
-{{define "course-card"}}{{- /*gotype: github.com/joschahenningsen/TUM-Live/model.Course*/ -}}
+{{define "course-card"}}{{- /*gotype: github.com/TUM-Dev/gocast/model.Course*/ -}}
 {{$args := .}}
 {{$user := get $args "user"}}
 {{$course := get $args "course"}}
diff --git a/web/template/course-overview.gohtml b/web/template/course-overview.gohtml
index 86456a476..6014878a9 100644
--- a/web/template/course-overview.gohtml
+++ b/web/template/course-overview.gohtml
@@ -1,4 +1,4 @@
-{{- /*gotype: github.com/joschahenningsen/TUM-Live/web.CoursePageData*/ -}}
+{{- /*gotype: github.com/TUM-Dev/gocast/web.CoursePageData*/ -}}
 {{$course := .IndexData.TUMLiveContext.Course}}
 <!DOCTYPE html>
 <html lang="en" class="dark">
diff --git a/web/template/course_list.gohtml b/web/template/course_list.gohtml
index 75a2650e0..da5b20ea2 100644
--- a/web/template/course_list.gohtml
+++ b/web/template/course_list.gohtml
@@ -1,5 +1,5 @@
 {{define "course_list"}}
-    {{- /*gotype: github.com/joschahenningsen/TUM-Live/tools.TUMLiveContext*/ -}}
+    {{- /*gotype: github.com/TUM-Dev/gocast/tools.TUMLiveContext*/ -}}
     {{$course := .Course}}
     {{$lastMonth := -1}}
 
diff --git a/web/template/edit-course-by-token.gohtml b/web/template/edit-course-by-token.gohtml
index d45c38c21..c7090156a 100644
--- a/web/template/edit-course-by-token.gohtml
+++ b/web/template/edit-course-by-token.gohtml
@@ -3,7 +3,7 @@
 <head>
     <meta charset="UTF-8">
     <title>{{.IndexData.Branding.Title}} | Edit Course</title>
-    {{- /*gotype: github.com/joschahenningsen/TUM-Live/web.editCourseByTokenPageData*/ -}}
+    {{- /*gotype: github.com/TUM-Dev/gocast/web.editCourseByTokenPageData*/ -}}
     {{template "headImports" .IndexData.VersionTag}}
 </head>
 <body>
diff --git a/web/template/error.gohtml b/web/template/error.gohtml
index 3890227f8..2069c1197 100644
--- a/web/template/error.gohtml
+++ b/web/template/error.gohtml
@@ -30,7 +30,7 @@
     </style>
 </head>
 <body class="bg-primary" style="height: calc(100vh - 5rem)">
-{{- /*gotype: github.com/joschahenningsen/TUM-Live/tools.ErrorPageData*/ -}}
+{{- /*gotype: github.com/TUM-Dev/gocast/tools.ErrorPageData*/ -}}
 {{template "header"}}
 
 <div class="wrap relative overflow-hidden h-full">
diff --git a/web/template/header.gohtml b/web/template/header.gohtml
index 60d1b46a0..3ff1b363f 100644
--- a/web/template/header.gohtml
+++ b/web/template/header.gohtml
@@ -1,4 +1,4 @@
-{{define "header"}} {{- /*gotype: github.com/joschahenningsen/TUM-Live/tools.TUMLiveContext*/ -}}
+{{define "header"}} {{- /*gotype: github.com/TUM-Dev/gocast/tools.TUMLiveContext*/ -}}
 <div x-data="{dark: false}" class="inline">
     <nav class="flex z-50 sticky w-full items-center bg-white dark:bg-secondary
                     shadow border-b dark:border-0 p-3 h-20">
diff --git a/web/template/home.gohtml b/web/template/home.gohtml
index e36d43b15..bd5a6d647 100644
--- a/web/template/home.gohtml
+++ b/web/template/home.gohtml
@@ -1,4 +1,4 @@
-{{- /*gotype: github.com/joschahenningsen/TUM-Live/web.IndexData*/ -}}
+{{- /*gotype: github.com/TUM-Dev/gocast/web.IndexData*/ -}}
 {{$user := .TUMLiveContext.User}}
 {{$userID := 0}}
 {{if $user}}{{$userID = $user.ID}}{{end}}
@@ -116,13 +116,13 @@
                                 <p>Settings</p>
                             </a>
                             <div class="border-b dark:border-gray-800"></div>
-                            <a href="https://github.com/joschahenningsen/TUM-Live"
+                            <a href="https://github.com/TUM-Dev/gocast"
                                target="_blank"
                                class="tum-live-menu-item">
                                 <i class="fa-regular fa-comment mr-4"></i>
                                 <p>Send Feedback</p>
                             </a>
-                            <a href="https://github.com/joschahenningsen/TUM-Live/issues/new?assignees=&labels=&template=bug_report.md&title="
+                            <a href="https://github.com/TUM-Dev/gocast/issues/new?assignees=&labels=&template=bug_report.md&title="
                                class="tum-live-menu-item"
                                target="_blank">
                                 <i class="fa-brands fa-github mr-4"></i>
@@ -229,7 +229,7 @@
                 <a href="/privacy">Data Privacy</a>
                 <a href="/imprint">Imprint</a>
             </div>
-            <a href="https://github.com/joschahenningsen/TUM-Live" class="block mt-2 text-center">
+            <a href="https://github.com/TUM-Dev/gocast" class="block mt-2 text-center">
                 <i class="fa-brands fa-github"></i> GitHub
             </a>
         </footer>
@@ -790,7 +790,7 @@
         <a href="/privacy">Data Privacy</a>
         <a href="/imprint">Imprint</a>
     </div>
-    <a href="https://github.com/joschahenningsen/TUM-Live"><i class="fa-brands fa-github"></i> GitHub</a>
+    <a href="https://github.com/TUM-Dev/gocast"><i class="fa-brands fa-github"></i> GitHub</a>
 </footer>
 </body>
 </html>
diff --git a/web/template/index.gohtml b/web/template/index.gohtml
index 2230b4b9f..b5cdb91f6 100644
--- a/web/template/index.gohtml
+++ b/web/template/index.gohtml
@@ -9,7 +9,7 @@
 <body>
 {{template "header" .TUMLiveContext}}
 
-{{- /*gotype: github.com/joschahenningsen/TUM-Live/web.IndexData*/ -}}
+{{- /*gotype: github.com/TUM-Dev/gocast/web.IndexData*/ -}}
 {{$user := .TUMLiveContext.User}}
 <div x-init="global.liveUpdateListener.init()" class="container flex flex-col pb-16">
     {{if .ServerNotifications}}
diff --git a/web/template/info-page.gohtml b/web/template/info-page.gohtml
index 400370a20..ee6cc15a6 100644
--- a/web/template/info-page.gohtml
+++ b/web/template/info-page.gohtml
@@ -7,7 +7,7 @@
     {{template "headImports" .VersionTag}}
 </head>
 <body>
-{{- /*gotype: github.com/joschahenningsen/TUM-Live/web.IndexData*/ -}}
+{{- /*gotype: github.com/TUM-Dev/gocast/web.IndexData*/ -}}
 {{template "header" .TUMLiveContext}}
 <div class="w-full md:w-1/2 2xl:max-w-screen-xl mx-auto p-6 text-3">
     <div class = "tum-live-markdown pb-10">
diff --git a/web/template/onboarding.gohtml b/web/template/onboarding.gohtml
index 276342057..431f4a40c 100644
--- a/web/template/onboarding.gohtml
+++ b/web/template/onboarding.gohtml
@@ -7,7 +7,7 @@
     {{template "headImports" .VersionTag}}
     <script src="/static/assets/ts-dist/admin.bundle.js?v={{.VersionTag}}"></script>
 </head>
-{{- /*gotype: github.com/joschahenningsen/TUM-Live/web.IndexData*/ -}}
+{{- /*gotype: github.com/TUM-Dev/gocast/web.IndexData*/ -}}
 <body x-init="admin.initElements()">
 
 {{template "header"}}
diff --git a/web/template/partial/course/manage/course-admin-management.gohtml b/web/template/partial/course/manage/course-admin-management.gohtml
index 4280b4b8d..aca54e0d0 100644
--- a/web/template/partial/course/manage/course-admin-management.gohtml
+++ b/web/template/partial/course/manage/course-admin-management.gohtml
@@ -1,5 +1,5 @@
 {{define "course-admin-management"}}
-{{- /*gotype: github.com/joschahenningsen/TUM-Live/model.Course*/ -}}
+{{- /*gotype: github.com/TUM-Dev/gocast/model.Course*/ -}}
 <div class="form-container-body">
     <h2 class="text-5 text-sm">Add or remove users who can help moderate the chat, plan lectures and manage the course.</h2>
     <table x-data="admin.courseAdminManagement()" x-init="$nextTick (()=>{m.init({{.Model.ID}}, userId)});">
diff --git a/web/template/partial/course/manage/course-lecture-management.gohtml b/web/template/partial/course/manage/course-lecture-management.gohtml
index 5ab2dc695..268dc1e33 100644
--- a/web/template/partial/course/manage/course-lecture-management.gohtml
+++ b/web/template/partial/course/manage/course-lecture-management.gohtml
@@ -1,5 +1,5 @@
 {{define "course-lecture-management"}}
-    {{- /*gotype: github.com/joschahenningsen/TUM-Live/web.AdminPageData*/ -}}
+    {{- /*gotype: github.com/TUM-Dev/gocast/web.AdminPageData*/ -}}
     {{$course := .IndexData.TUMLiveContext.Course}}
     {{$user := .IndexData.TUMLiveContext.User}}
     {{$ingestBase := .IngestBase}}
diff --git a/web/template/partial/course/manage/course_actions.gohtml b/web/template/partial/course/manage/course_actions.gohtml
index 433b1bde6..b1006bcaa 100644
--- a/web/template/partial/course/manage/course_actions.gohtml
+++ b/web/template/partial/course/manage/course_actions.gohtml
@@ -1,5 +1,5 @@
 {{define "dangerzone"}}
-    {{- /*gotype: github.com/joschahenningsen/TUM-Live/model.Course*/ -}}
+    {{- /*gotype: github.com/TUM-Dev/gocast/model.Course*/ -}}
     <div class="form-container-body grid gap-3"
          x-data="{ copying: false , year: '', yearW: '', semester: 'Wintersemester' }">
         <div x-show="copying" class="grid gap-3">
diff --git a/web/template/partial/course/manage/course_settings.gohtml b/web/template/partial/course/manage/course_settings.gohtml
index 63b492d4a..1994b0ce3 100644
--- a/web/template/partial/course/manage/course_settings.gohtml
+++ b/web/template/partial/course/manage/course_settings.gohtml
@@ -1,5 +1,5 @@
 {{define "course_settings"}}
-    {{- /* gotype:github.com/joschahenningsen/TUM-Live/model.Course */ -}}
+    {{- /* gotype:github.com/TUM-Dev/gocast/model.Course */ -}}
     <div x-data="{
         showCourseSettingsModal:false, isChatEnabledForCourse: {{.ChatEnabled}}
     }">
@@ -23,7 +23,7 @@
                 </label>
                 <label class="block" for="enrolled">
                     <input class="w-auto" type="radio" id="enrolled" name="access" value="enrolled" {{- /*gotype:
-                    github.com/joschahenningsen/TUM-Live/model.Course*/ -}} {{if not (and .
+                    github.com/TUM-Dev/gocast/model.Course*/ -}} {{if not (and .
                     .TUMOnlineIdentifier)}}disabled{{end}} {{if .}} {{if eq .Visibility "enrolled"
                     }}checked{{end}}{{end}}>
                     <span>Enrolled: Only students enrolled in TUMOnline can see this course</span>
diff --git a/web/template/partial/course/manage/create-lecture-form-slides/lecture-details-slide.gohtml b/web/template/partial/course/manage/create-lecture-form-slides/lecture-details-slide.gohtml
index a3be796ea..ebee24920 100644
--- a/web/template/partial/course/manage/create-lecture-form-slides/lecture-details-slide.gohtml
+++ b/web/template/partial/course/manage/create-lecture-form-slides/lecture-details-slide.gohtml
@@ -1,6 +1,6 @@
 {{define "lecture-details-slide"}}
 
-    {{- /*gotype: github.com/joschahenningsen/TUM-Live/web.EditCourseData*/ -}}
+    {{- /*gotype: github.com/TUM-Dev/gocast/web.EditCourseData*/ -}}
     {{$course := .IndexData.TUMLiveContext.Course}}
     <span class="text-sm text-5 pl-2">Options</span>
     <div class="col-span-full flex gap-3 px-2 py-2">
diff --git a/web/template/partial/course/manage/create-lecture-form.gohtml b/web/template/partial/course/manage/create-lecture-form.gohtml
index 7fbe0b474..fa0de6478 100644
--- a/web/template/partial/course/manage/create-lecture-form.gohtml
+++ b/web/template/partial/course/manage/create-lecture-form.gohtml
@@ -1,5 +1,5 @@
 {{define "create-lecture-form"}}
-    {{- /*gotype: github.com/joschahenningsen/TUM-Live/web.AdminPageData*/ -}}
+    {{- /*gotype: github.com/TUM-Dev/gocast/web.AdminPageData*/ -}}
     {{$course := .IndexData.TUMLiveContext.Course}}
     <form method="post" action="/api/createLecture"
           x-data="admin.createLectureForm({ s: {{toJson ($course.StreamTimes)}} })" @submit.prevent="submitData"
diff --git a/web/template/partial/course/manage/external-participants.gohtml b/web/template/partial/course/manage/external-participants.gohtml
index 5140a7498..c741178b5 100644
--- a/web/template/partial/course/manage/external-participants.gohtml
+++ b/web/template/partial/course/manage/external-participants.gohtml
@@ -1,5 +1,5 @@
 {{define "externalParticipants"}}
-{{- /*gotype: github.com/joschahenningsen/TUM-Live/model.Course*/ -}}
+{{- /*gotype: github.com/TUM-Dev/gocast/model.Course*/ -}}
 <ul class="form-container-body" x-data="{expanded: false}">
     <h2 class="text-sm text-5 col-span-full">Add participants. They'll get notified about your invitation to
         your lecture via mail.</h2>
diff --git a/web/template/partial/course/manage/lecture-management-card.gohtml b/web/template/partial/course/manage/lecture-management-card.gohtml
index 8681f9931..c0b8a831a 100644
--- a/web/template/partial/course/manage/lecture-management-card.gohtml
+++ b/web/template/partial/course/manage/lecture-management-card.gohtml
@@ -1,5 +1,5 @@
 {{define "lecture-management-card"}}
-    {{- /*gotype: github.com/joschahenningsen/TUM-Live/web.AdminPageData*/ -}}
+    {{- /*gotype: github.com/TUM-Dev/gocast/web.AdminPageData*/ -}}
 
     {{$course := .IndexData.TUMLiveContext.Course}}
     {{$user := .IndexData.TUMLiveContext.User}}
diff --git a/web/template/partial/info-dropdown.gohtml b/web/template/partial/info-dropdown.gohtml
index e2510b770..8d6abb94b 100644
--- a/web/template/partial/info-dropdown.gohtml
+++ b/web/template/partial/info-dropdown.gohtml
@@ -34,15 +34,15 @@
                     <h6 class="text-3 font-bold text-sm">Contribute</h6>
                 </div>
                 <div class="grid gap-2 pl-7">
-                    <a class="flex text-sm font-light text-5" href="https://github.com/joschahenningsen/TUM-Live"
+                    <a class="flex text-sm font-light text-5" href="https://github.com/TUM-Dev/gocast"
                        aria-label="GitHub">
                         <i class="vjs-icon-github my-auto"></i>-Repository
                     </a>
-                    <a class="flex text-sm font-light text-5" href="https://github.com/joschahenningsen/TUM-Live/issues/new?assignees=&labels=&template=bug_report.md&title="
+                    <a class="flex text-sm font-light text-5" href="https://github.com/TUM-Dev/gocast/issues/new?assignees=&labels=&template=bug_report.md&title="
                        aria-label="Bug report">
                         Bug report
                     </a>
-                    <a class="flex text-sm font-light text-5" href="https://github.com/joschahenningsen/TUM-Live/issues/new?assignees=&labels=enhancement&template=feature_request.md&title="
+                    <a class="flex text-sm font-light text-5" href="https://github.com/TUM-Dev/gocast/issues/new?assignees=&labels=enhancement&template=feature_request.md&title="
                        aria-label="Feature request">
                         Feature request
                     </a>
@@ -50,7 +50,7 @@
             </div>
         </div>
         <div class = "border-t dark:border-gray-800 text-center px-2 py-2">
-            <a class="text-sm font-light text-5" href="https://github.com/joschahenningsen/TUM-Live">
+            <a class="text-sm font-light text-5" href="https://github.com/TUM-Dev/gocast">
                 <i class="fa-brands fa-github"></i> GitHub</a>
         </div>
     </div>
@@ -125,15 +125,15 @@
                     </button>
                 </div>
                 <div x-cloak x-show="open" class="grid gap-2 pl-10 pt-3">
-                    <a class="flex text-sm font-light text-5" href="https://github.com/joschahenningsen/TUM-Live"
+                    <a class="flex text-sm font-light text-5" href="https://github.com/TUM-Dev/gocast"
                        aria-label="GitHub">
                         <i class="vjs-icon-github my-auto"></i>-Repository
                     </a>
-                    <a class="flex text-sm font-light text-5" href="https://github.com/joschahenningsen/TUM-Live/issues/new?assignees=&labels=&template=bug_report.md&title="
+                    <a class="flex text-sm font-light text-5" href="https://github.com/TUM-Dev/gocast/issues/new?assignees=&labels=&template=bug_report.md&title="
                        aria-label="Bug report">
                         Bug report
                     </a>
-                    <a class="flex text-sm font-light text-5" href="https://github.com/joschahenningsen/TUM-Live/issues/new?assignees=&labels=enhancement&template=feature_request.md&title="
+                    <a class="flex text-sm font-light text-5" href="https://github.com/TUM-Dev/gocast/issues/new?assignees=&labels=enhancement&template=feature_request.md&title="
                        aria-label="Feature request">
                         Feature request
                     </a>
@@ -141,7 +141,7 @@
             </div>
         </div>
         <div class = "border-t dark:border-gray-800 text-center px-2 py-2">
-            <a class="text-sm font-light text-5" href="https://github.com/joschahenningsen/TUM-Live">
+            <a class="text-sm font-light text-5" href="https://github.com/TUM-Dev/gocast">
                 <i class="fa-brands fa-github"></i> GitHub</a>
         </div>
     </div>
diff --git a/web/template/partial/stream/actions.gohtml b/web/template/partial/stream/actions.gohtml
index f278adf5f..59a30648a 100644
--- a/web/template/partial/stream/actions.gohtml
+++ b/web/template/partial/stream/actions.gohtml
@@ -1,5 +1,5 @@
 {{define "actions"}}
-    {{- /*gotype: github.com/joschahenningsen/TUM-Live/web.WatchPageData*/ -}}
+    {{- /*gotype: github.com/TUM-Dev/gocast/web.WatchPageData*/ -}}
     {{$stream := .IndexData.TUMLiveContext.Stream}}
     {{$course := .IndexData.TUMLiveContext.Course}}
     {{$user := .IndexData.TUMLiveContext.User}}
diff --git a/web/template/partial/stream/watch-info.gohtml b/web/template/partial/stream/watch-info.gohtml
index 1b2d78761..8f594ca35 100644
--- a/web/template/partial/stream/watch-info.gohtml
+++ b/web/template/partial/stream/watch-info.gohtml
@@ -1,5 +1,5 @@
 {{define "watch-info"}}
-    {{- /*gotype: github.com/joschahenningsen/TUM-Live/web.WatchPageData*/ -}}
+    {{- /*gotype: github.com/TUM-Dev/gocast/web.WatchPageData*/ -}}
     {{$stream := .IndexData.TUMLiveContext.Stream}}
     {{$course := .IndexData.TUMLiveContext.Course}}
     <div class="text-5 text-xs mt-2 lg:text-sm">
diff --git a/web/template/passwordreset.gohtml b/web/template/passwordreset.gohtml
index 1283f55f6..1abba916b 100644
--- a/web/template/passwordreset.gohtml
+++ b/web/template/passwordreset.gohtml
@@ -6,7 +6,7 @@
     <title>Setup</title>
     {{template "headImports" .VersionTag}}
 </head>
-{{- /*gotype: github.com/joschahenningsen/TUM-Live/web.LoginPageData*/ -}}
+{{- /*gotype: github.com/TUM-Dev/gocast/web.LoginPageData*/ -}}
 <body>
 {{template "header"}}
 <div class="lg:w-4/12 md:6/12 w-10/12 m-auto mt-24 shadow-md">
diff --git a/web/template/planned_course_list.gohtml b/web/template/planned_course_list.gohtml
index f037ee04c..9dddbd88c 100644
--- a/web/template/planned_course_list.gohtml
+++ b/web/template/planned_course_list.gohtml
@@ -1,5 +1,5 @@
 {{define "planned_course_list"}}
-    {{- /*gotype: github.com/joschahenningsen/TUM-Live/tools.TUMLiveContext*/ -}}
+    {{- /*gotype: github.com/TUM-Dev/gocast/tools.TUMLiveContext*/ -}}
     {{$course := .Course}}
     {{$lastMonth := -1}}
     {{range $lecture := $course.Streams }}
diff --git a/web/template/popup-chat.gohtml b/web/template/popup-chat.gohtml
index fce4c6638..ba0c9f442 100644
--- a/web/template/popup-chat.gohtml
+++ b/web/template/popup-chat.gohtml
@@ -1,4 +1,4 @@
-{{- /*gotype: github.com/joschahenningsen/TUM-Live/web.ChatData*/ -}}
+{{- /*gotype: github.com/TUM-Dev/gocast/web.ChatData*/ -}}
 {{$course := .IndexData.TUMLiveContext.Course}}
 {{$stream := .IndexData.TUMLiveContext.Stream}}
 <!DOCTYPE html>
diff --git a/web/template/semester-selection.gohtml b/web/template/semester-selection.gohtml
index 700cd23ba..7902238d0 100644
--- a/web/template/semester-selection.gohtml
+++ b/web/template/semester-selection.gohtml
@@ -1,5 +1,5 @@
 {{define "semesterselection"}}
-    {{- /*gotype: github.com/joschahenningsen/TUM-Live/web.IndexData*/ -}}
+    {{- /*gotype: github.com/TUM-Dev/gocast/web.IndexData*/ -}}
     {{$currentYear := .CurrentYear}}
     {{$currentTerm := .CurrentTerm}}
     <div x-cloak x-data="{showSemesterSelect: false}">
diff --git a/web/template/user-settings.gohtml b/web/template/user-settings.gohtml
index c88ef0b6a..8725b6214 100644
--- a/web/template/user-settings.gohtml
+++ b/web/template/user-settings.gohtml
@@ -8,7 +8,7 @@
 </head>
 
 <body class="text-4">
-{{- /*gotype: github.com/joschahenningsen/TUM-Live/web.userSettingsData*/ -}}
+{{- /*gotype: github.com/TUM-Dev/gocast/web.userSettingsData*/ -}}
 {{template "header" .IndexData.TUMLiveContext}}
 <div class="form-container">
     <h1 class="form-container-title">Settings</h1>
@@ -61,7 +61,7 @@
         <div class="text-center p-3">
             <i class="text-5">Not a lot going on here <b>yet</b>.
                 <a class="underline" target="_blank" rel="noopener"
-                   href="https://github.com/joschahenningsen/TUM-Live/issues/new/choose">Open an issue</a>
+                   href="https://github.com/TUM-Dev/gocast/issues/new/choose">Open an issue</a>
                 if you have any ideas what settings you miss :)
             </i>
         </div>
diff --git a/web/template/video_only.gohtml b/web/template/video_only.gohtml
index 5defc85b7..aeb73f0ea 100644
--- a/web/template/video_only.gohtml
+++ b/web/template/video_only.gohtml
@@ -4,7 +4,7 @@
     <meta charset="UTF-8">
     <meta name="viewport"
           content="width=device-width, initial-scale=1.0">
-    {{- /*gotype: github.com/joschahenningsen/TUM-Live/web.WatchPageData*/ -}}
+    {{- /*gotype: github.com/TUM-Dev/gocast/web.WatchPageData*/ -}}
     {{$stream := .IndexData.TUMLiveContext.Stream}}
     {{$course := .IndexData.TUMLiveContext.Course}}
     <title>{{$course.Name}} | {{$stream.Name}}</title>
diff --git a/web/template/vod_course_list.gohtml b/web/template/vod_course_list.gohtml
index 09394dafa..da6a38304 100644
--- a/web/template/vod_course_list.gohtml
+++ b/web/template/vod_course_list.gohtml
@@ -1,5 +1,5 @@
 {{define "vod_course_list"}}
-    {{- /*gotype: github.com/joschahenningsen/TUM-Live/web.CoursePageData*/ -}}
+    {{- /*gotype: github.com/TUM-Dev/gocast/web.CoursePageData*/ -}}
     {{$course := .Course}}
     {{$lastMonth := -1}}
     {{$user := .IndexData.TUMLiveContext.User}}
diff --git a/web/template/watch.gohtml b/web/template/watch.gohtml
index 9330da3da..422dbb9e4 100644
--- a/web/template/watch.gohtml
+++ b/web/template/watch.gohtml
@@ -1,6 +1,6 @@
 <!DOCTYPE html>
 <html lang="en" class="h-full dark">
-{{- /*gotype: github.com/joschahenningsen/TUM-Live/web.WatchPageData*/ -}}
+{{- /*gotype: github.com/TUM-Dev/gocast/web.WatchPageData*/ -}}
 <head>
     <meta charset="UTF-8">
     {{$stream := .IndexData.TUMLiveContext.Stream}}
diff --git a/web/user.go b/web/user.go
index d48c018e4..a8ba80334 100644
--- a/web/user.go
+++ b/web/user.go
@@ -3,10 +3,10 @@ package web
 import (
 	"context"
 	"github.com/gin-gonic/gin"
-	"github.com/joschahenningsen/TUM-Live/dao"
-	"github.com/joschahenningsen/TUM-Live/model"
-	"github.com/joschahenningsen/TUM-Live/tools"
-	"github.com/joschahenningsen/TUM-Live/tools/tum"
+	"github.com/TUM-Dev/gocast/dao"
+	"github.com/TUM-Dev/gocast/model"
+	"github.com/TUM-Dev/gocast/tools"
+	"github.com/TUM-Dev/gocast/tools/tum"
 	log "github.com/sirupsen/logrus"
 	"net/http"
 	"net/url"
diff --git a/web/watch.go b/web/watch.go
index afb58c6c6..e07426739 100644
--- a/web/watch.go
+++ b/web/watch.go
@@ -4,10 +4,10 @@ import (
 	"errors"
 	"github.com/getsentry/sentry-go"
 	"github.com/gin-gonic/gin"
-	"github.com/joschahenningsen/TUM-Live/api"
-	"github.com/joschahenningsen/TUM-Live/dao"
-	"github.com/joschahenningsen/TUM-Live/model"
-	"github.com/joschahenningsen/TUM-Live/tools"
+	"github.com/TUM-Dev/gocast/api"
+	"github.com/TUM-Dev/gocast/dao"
+	"github.com/TUM-Dev/gocast/model"
+	"github.com/TUM-Dev/gocast/tools"
 	log "github.com/sirupsen/logrus"
 	"gorm.io/gorm"
 	"html/template"
diff --git a/worker/Dockerfile b/worker/Dockerfile
index 9281a74db..4c51d0a1c 100644
--- a/worker/Dockerfile
+++ b/worker/Dockerfile
@@ -1,6 +1,6 @@
 FROM amd64/golang:1.21-alpine3.18 as builder
 
-WORKDIR /go/src/github.com/joschahenningsen/TUM-Live/worker
+WORKDIR /go/src/github.com/TUM-Dev/gocast/worker
 COPY . .
 
 RUN GO111MODULE=on go mod download
diff --git a/worker/README.md b/worker/README.md
index 42151170d..552ace26a 100644
--- a/worker/README.md
+++ b/worker/README.md
@@ -1,6 +1,6 @@
 # TUM-Live-Worker
 
-The worker for [TUM-Live](https://github.com/joschahenningsen/TUM-Live)
+The worker for [TUM-Live](https://github.com/TUM-Dev/gocast)
 
 features include:
 
diff --git a/worker/api/api_server.go b/worker/api/api_server.go
index c1bf936bd..fb8a8ec16 100644
--- a/worker/api/api_server.go
+++ b/worker/api/api_server.go
@@ -12,9 +12,9 @@ import (
 
 	"github.com/u2takey/go-utils/uuid"
 
-	"github.com/joschahenningsen/TUM-Live/worker/cfg"
-	"github.com/joschahenningsen/TUM-Live/worker/pb"
-	"github.com/joschahenningsen/TUM-Live/worker/worker"
+	"github.com/TUM-Dev/gocast/worker/cfg"
+	"github.com/TUM-Dev/gocast/worker/pb"
+	"github.com/TUM-Dev/gocast/worker/worker"
 	log "github.com/sirupsen/logrus"
 	"google.golang.org/grpc"
 	"google.golang.org/grpc/keepalive"
diff --git a/worker/api/api_server_test.go b/worker/api/api_server_test.go
index 0bd60dba5..609ef0b18 100644
--- a/worker/api/api_server_test.go
+++ b/worker/api/api_server_test.go
@@ -2,8 +2,8 @@ package api
 
 import (
 	"context"
-	"github.com/joschahenningsen/TUM-Live/worker/cfg"
-	"github.com/joschahenningsen/TUM-Live/worker/pb"
+	"github.com/TUM-Dev/gocast/worker/cfg"
+	"github.com/TUM-Dev/gocast/worker/pb"
 	"testing"
 )
 
diff --git a/worker/client/main.go b/worker/client/main.go
index a4b663d13..b10886755 100644
--- a/worker/client/main.go
+++ b/worker/client/main.go
@@ -4,7 +4,7 @@ import (
 	"context"
 	"encoding/base64"
 	"fmt"
-	"github.com/joschahenningsen/TUM-Live/worker/pb"
+	"github.com/TUM-Dev/gocast/worker/pb"
 	log "github.com/sirupsen/logrus"
 	"google.golang.org/grpc"
 	"google.golang.org/grpc/backoff"
diff --git a/worker/cmd/worker/worker.go b/worker/cmd/worker/worker.go
index 96a24b16c..85d2de84f 100644
--- a/worker/cmd/worker/worker.go
+++ b/worker/cmd/worker/worker.go
@@ -3,11 +3,11 @@ package main
 import (
 	"context"
 	"fmt"
-	"github.com/joschahenningsen/TUM-Live/worker/api"
-	"github.com/joschahenningsen/TUM-Live/worker/cfg"
-	"github.com/joschahenningsen/TUM-Live/worker/pb"
-	"github.com/joschahenningsen/TUM-Live/worker/rest"
-	"github.com/joschahenningsen/TUM-Live/worker/worker"
+	"github.com/TUM-Dev/gocast/worker/api"
+	"github.com/TUM-Dev/gocast/worker/cfg"
+	"github.com/TUM-Dev/gocast/worker/pb"
+	"github.com/TUM-Dev/gocast/worker/rest"
+	"github.com/TUM-Dev/gocast/worker/worker"
 	"github.com/pkg/profile"
 	log "github.com/sirupsen/logrus"
 	"google.golang.org/grpc"
diff --git a/worker/edge/Dockerfile b/worker/edge/Dockerfile
index 059c2dda2..a152a2bcb 100644
--- a/worker/edge/Dockerfile
+++ b/worker/edge/Dockerfile
@@ -1,6 +1,6 @@
 FROM golang:1.21-alpine3.18 as builder
 
-WORKDIR /go/src/github.com/joschahenningsen/TUM-Live/worker
+WORKDIR /go/src/github.com/TUM-Dev/gocast/worker
 COPY . .
 
 RUN GO111MODULE=on go mod download
diff --git a/worker/edge/go.mod b/worker/edge/go.mod
index 7be79bdfd..2f502c36a 100644
--- a/worker/edge/go.mod
+++ b/worker/edge/go.mod
@@ -1,4 +1,4 @@
-module github.com/joschahenningsen/tum-live/worker/edge
+module github.com/TUM-Dev/gocast/worker/edge
 
 go 1.19
 
diff --git a/worker/go.mod b/worker/go.mod
index 49b7783f1..865100d31 100644
--- a/worker/go.mod
+++ b/worker/go.mod
@@ -1,4 +1,4 @@
-module github.com/joschahenningsen/TUM-Live/worker
+module github.com/TUM-Dev/gocast/worker
 
 go 1.19
 
diff --git a/worker/rest/rest.go b/worker/rest/rest.go
index 2f407d3d9..60d168715 100644
--- a/worker/rest/rest.go
+++ b/worker/rest/rest.go
@@ -7,7 +7,7 @@ import (
 	"strings"
 	"sync"
 
-	"github.com/joschahenningsen/TUM-Live/worker/worker"
+	"github.com/TUM-Dev/gocast/worker/worker"
 	log "github.com/sirupsen/logrus"
 )
 
diff --git a/worker/rest/selfstream.go b/worker/rest/selfstream.go
index 3ba4e0db5..c8edde1be 100644
--- a/worker/rest/selfstream.go
+++ b/worker/rest/selfstream.go
@@ -6,9 +6,9 @@ import (
 	"io"
 	"net/http"
 
-	"github.com/joschahenningsen/TUM-Live/worker/cfg"
-	"github.com/joschahenningsen/TUM-Live/worker/pb"
-	"github.com/joschahenningsen/TUM-Live/worker/worker"
+	"github.com/TUM-Dev/gocast/worker/cfg"
+	"github.com/TUM-Dev/gocast/worker/pb"
+	"github.com/TUM-Dev/gocast/worker/worker"
 	log "github.com/sirupsen/logrus"
 )
 
diff --git a/worker/rest/selfstream_test.go b/worker/rest/selfstream_test.go
index 46627e0a0..ad100c0f1 100644
--- a/worker/rest/selfstream_test.go
+++ b/worker/rest/selfstream_test.go
@@ -8,7 +8,7 @@ import (
 	"testing"
 	"time"
 
-	"github.com/joschahenningsen/TUM-Live/worker/cfg"
+	"github.com/TUM-Dev/gocast/worker/cfg"
 	log "github.com/sirupsen/logrus"
 )
 
diff --git a/worker/rest/vod_upload.go b/worker/rest/vod_upload.go
index e968e7633..de1df6c23 100644
--- a/worker/rest/vod_upload.go
+++ b/worker/rest/vod_upload.go
@@ -1,7 +1,7 @@
 package rest
 
 import (
-	"github.com/joschahenningsen/TUM-Live/worker/worker"
+	"github.com/TUM-Dev/gocast/worker/worker"
 	log "github.com/sirupsen/logrus"
 	"io"
 	"net/http"
diff --git a/worker/worker/notify.go b/worker/worker/notify.go
index 2cf1964e1..56c806994 100644
--- a/worker/worker/notify.go
+++ b/worker/worker/notify.go
@@ -3,8 +3,8 @@ package worker
 import (
 	"context"
 	"fmt"
-	"github.com/joschahenningsen/TUM-Live/worker/cfg"
-	"github.com/joschahenningsen/TUM-Live/worker/pb"
+	"github.com/TUM-Dev/gocast/worker/cfg"
+	"github.com/TUM-Dev/gocast/worker/pb"
 	log "github.com/sirupsen/logrus"
 	"google.golang.org/grpc"
 	"google.golang.org/grpc/credentials/insecure"
diff --git a/worker/worker/persist.go b/worker/worker/persist.go
index a27d527c0..c7df26ff7 100644
--- a/worker/worker/persist.go
+++ b/worker/worker/persist.go
@@ -3,7 +3,7 @@ package worker
 import (
 	"encoding/gob"
 	"errors"
-	"github.com/joschahenningsen/TUM-Live/worker/cfg"
+	"github.com/TUM-Dev/gocast/worker/cfg"
 	"os"
 	"sync"
 	"time"
diff --git a/worker/worker/premiere.go b/worker/worker/premiere.go
index 097da50f3..80511f2f8 100644
--- a/worker/worker/premiere.go
+++ b/worker/worker/premiere.go
@@ -2,7 +2,7 @@ package worker
 
 import (
 	"fmt"
-	"github.com/joschahenningsen/TUM-Live/worker/cfg"
+	"github.com/TUM-Dev/gocast/worker/cfg"
 	log "github.com/sirupsen/logrus"
 	"os"
 	"os/exec"
diff --git a/worker/worker/request_handlers.go b/worker/worker/request_handlers.go
index 3051c516a..45b30a6d7 100644
--- a/worker/worker/request_handlers.go
+++ b/worker/worker/request_handlers.go
@@ -14,8 +14,8 @@ import (
 	"syscall"
 	"time"
 
-	"github.com/joschahenningsen/TUM-Live/worker/cfg"
-	"github.com/joschahenningsen/TUM-Live/worker/pb"
+	"github.com/TUM-Dev/gocast/worker/cfg"
+	"github.com/TUM-Dev/gocast/worker/pb"
 	log "github.com/sirupsen/logrus"
 )
 
diff --git a/worker/worker/request_handlers_test.go b/worker/worker/request_handlers_test.go
index d3125cb8b..9b357db83 100644
--- a/worker/worker/request_handlers_test.go
+++ b/worker/worker/request_handlers_test.go
@@ -6,9 +6,9 @@ import (
 	"testing"
 	"time"
 
-	"github.com/joschahenningsen/TUM-Live/worker/pb"
+	"github.com/TUM-Dev/gocast/worker/pb"
 
-	"github.com/joschahenningsen/TUM-Live/worker/cfg"
+	"github.com/TUM-Dev/gocast/worker/cfg"
 )
 
 var s StreamContext
diff --git a/worker/worker/status.go b/worker/worker/status.go
index eee913db4..e82753d8f 100644
--- a/worker/worker/status.go
+++ b/worker/worker/status.go
@@ -7,9 +7,9 @@ import (
 	"sync"
 	"time"
 
-	"github.com/joschahenningsen/TUM-Live/worker/cfg"
-	"github.com/joschahenningsen/TUM-Live/worker/pb"
-	"github.com/joschahenningsen/TUM-Live/worker/worker/vmstat"
+	"github.com/TUM-Dev/gocast/worker/cfg"
+	"github.com/TUM-Dev/gocast/worker/pb"
+	"github.com/TUM-Dev/gocast/worker/worker/vmstat"
 	log "github.com/sirupsen/logrus"
 	"google.golang.org/grpc"
 	"google.golang.org/grpc/credentials/insecure"
diff --git a/worker/worker/stream.go b/worker/worker/stream.go
index d187a8ff4..8c73c2294 100644
--- a/worker/worker/stream.go
+++ b/worker/worker/stream.go
@@ -8,7 +8,7 @@ import (
 	"syscall"
 	"time"
 
-	"github.com/joschahenningsen/TUM-Live/worker/cfg"
+	"github.com/TUM-Dev/gocast/worker/cfg"
 	log "github.com/sirupsen/logrus"
 )
 
diff --git a/worker/worker/transcode.go b/worker/worker/transcode.go
index a04d6c92c..3658e1e66 100644
--- a/worker/worker/transcode.go
+++ b/worker/worker/transcode.go
@@ -4,8 +4,8 @@ import (
 	"bufio"
 	"context"
 	"fmt"
-	"github.com/joschahenningsen/TUM-Live/worker/cfg"
-	"github.com/joschahenningsen/TUM-Live/worker/pb"
+	"github.com/TUM-Dev/gocast/worker/cfg"
+	"github.com/TUM-Dev/gocast/worker/pb"
 	log "github.com/sirupsen/logrus"
 	"io"
 	"os"
diff --git a/worker/worker/upload.go b/worker/worker/upload.go
index f03b15db9..b70920b34 100644
--- a/worker/worker/upload.go
+++ b/worker/worker/upload.go
@@ -1,7 +1,7 @@
 package worker
 
 import (
-	"github.com/joschahenningsen/TUM-Live/worker/cfg"
+	"github.com/TUM-Dev/gocast/worker/cfg"
 	log "github.com/sirupsen/logrus"
 	"io"
 	"mime/multipart"
diff --git a/worker/worker/upload_test.go b/worker/worker/upload_test.go
index 1a05aca1d..903bebcde 100644
--- a/worker/worker/upload_test.go
+++ b/worker/worker/upload_test.go
@@ -1,7 +1,7 @@
 package worker
 
 import (
-	"github.com/joschahenningsen/TUM-Live/worker/cfg"
+	"github.com/TUM-Dev/gocast/worker/cfg"
 	"net/http"
 	"os"
 	"sync"
diff --git a/worker/worker/waveform.go b/worker/worker/waveform.go
index ed24f9c00..6d3d6e819 100644
--- a/worker/worker/waveform.go
+++ b/worker/worker/waveform.go
@@ -3,7 +3,7 @@ package worker
 import (
 	"fmt"
 	uuid "github.com/iris-contrib/go.uuid"
-	"github.com/joschahenningsen/TUM-Live/worker/pb"
+	"github.com/TUM-Dev/gocast/worker/pb"
 	log "github.com/sirupsen/logrus"
 	"io"
 	"os"
diff --git a/worker/worker/worker.go b/worker/worker/worker.go
index ff6d9190f..40e0582aa 100644
--- a/worker/worker/worker.go
+++ b/worker/worker/worker.go
@@ -1,8 +1,8 @@
 package worker
 
 import (
-	"github.com/joschahenningsen/TUM-Live/worker/cfg"
-	"github.com/joschahenningsen/TUM-Live/worker/worker/vmstat"
+	"github.com/TUM-Dev/gocast/worker/cfg"
+	"github.com/TUM-Dev/gocast/worker/worker/vmstat"
 	"github.com/robfig/cron/v3"
 	log "github.com/sirupsen/logrus"
 	"os"

From 2b0e72fa4ef32e07b98f51322f582669cdce92cb Mon Sep 17 00:00:00 2001
From: Joscha Henningsen <44805696+joschahenningsen@users.noreply.github.com>
Date: Sun, 27 Aug 2023 10:22:20 +0200
Subject: [PATCH 20/31] Move to TUM-Dev: fix go modules and run configurations
 (#1142)

* fix go modules and run configurations

* explicitly set package permission

* add permission to remaining workflows
---
 .github/workflows/deploy-server.yml           |   3 +
 .github/workflows/deploy-workers.yml          |   3 +
 .github/workflows/ts-deploy.yml               |   3 +
 .../TUM_Live__frontend__worker.xml            |   2 +-
 .idea/runConfigurations/run_tumlive_go.xml    |   2 +-
 go.mod                                        |   2 +-
 go.sum                                        |   4 +-
 go.work.sum                                   | 142 ++++++++++++++++++
 8 files changed, 156 insertions(+), 5 deletions(-)

diff --git a/.github/workflows/deploy-server.yml b/.github/workflows/deploy-server.yml
index 9fd2df484..65704f2ff 100644
--- a/.github/workflows/deploy-server.yml
+++ b/.github/workflows/deploy-server.yml
@@ -6,6 +6,9 @@ on:
     tags:
       - '*'
 
+permissions:
+  packages: write
+
 jobs:
   build:
     runs-on: ubuntu-latest
diff --git a/.github/workflows/deploy-workers.yml b/.github/workflows/deploy-workers.yml
index 569edb0d4..378b1970b 100644
--- a/.github/workflows/deploy-workers.yml
+++ b/.github/workflows/deploy-workers.yml
@@ -6,6 +6,9 @@ on:
     tags:
       - '*'
 
+permissions:
+  packages: write
+
 jobs:
   build:
     runs-on: ubuntu-latest
diff --git a/.github/workflows/ts-deploy.yml b/.github/workflows/ts-deploy.yml
index c852ecc11..e9e924f41 100644
--- a/.github/workflows/ts-deploy.yml
+++ b/.github/workflows/ts-deploy.yml
@@ -5,6 +5,9 @@ on:
     # The branches below must be a subset of the branches above
     branches: [ dev ]
 
+permissions:
+  packages: write
+
 jobs:
   build:
     runs-on: ubuntu-latest
diff --git a/.idea/runConfigurations/TUM_Live__frontend__worker.xml b/.idea/runConfigurations/TUM_Live__frontend__worker.xml
index af915ef9e..3596e70d4 100644
--- a/.idea/runConfigurations/TUM_Live__frontend__worker.xml
+++ b/.idea/runConfigurations/TUM_Live__frontend__worker.xml
@@ -1,6 +1,6 @@
 <component name="ProjectRunConfigurationManager">
   <configuration default="false" name="TUM-Live, frontend, worker" type="CompoundRunConfigurationType">
-    <toRun name="go build github.com/joschahenningsen/TUM-Live/worker/cmd/worker" type="GoApplicationRunConfiguration" />
+    <toRun name="go build github.com/TUM-Dev/gocast/worker/cmd/worker" type="GoApplicationRunConfiguration" />
     <toRun name="run-tumlive-go" type="GoApplicationRunConfiguration" />
     <toRun name="build-dev" type="js.build_tools.npm" />
     <method v="2" />
diff --git a/.idea/runConfigurations/run_tumlive_go.xml b/.idea/runConfigurations/run_tumlive_go.xml
index fa9c94ae6..58690651b 100644
--- a/.idea/runConfigurations/run_tumlive_go.xml
+++ b/.idea/runConfigurations/run_tumlive_go.xml
@@ -3,7 +3,7 @@
     <module name="TUM-Live-Backend" />
     <working_directory value="$PROJECT_DIR$" />
     <kind value="PACKAGE" />
-    <package value="github.com/joschahenningsen/TUM-Live/cmd/tumlive" />
+    <package value="github.com/TUM-Dev/gocast/cmd/tumlive" />
     <directory value="$PROJECT_DIR$" />
     <filePath value="$PROJECT_DIR$/cmd/tumlive/tumlive.go" />
     <output_directory value="$PROJECT_DIR$/bin" />
diff --git a/go.mod b/go.mod
index bed62c80a..dd030c58c 100644
--- a/go.mod
+++ b/go.mod
@@ -40,13 +40,13 @@ require (
 	github.com/crewjam/saml v0.4.13
 	github.com/golang/mock v1.6.0
 	github.com/icholy/digest v0.1.22
-	github.com/TUM-Dev/gocast/worker v0.0.0-20230813170152-4b40e4b3a301
 	github.com/stretchr/testify v1.8.4
 	github.com/u2takey/go-utils v0.3.1
 )
 
 require (
 	github.com/TUM-Dev/CampusProxy/client v0.0.0-20230226120508-3e8bb2411921
+	github.com/TUM-Dev/gocast/worker v0.0.0-20230824080536-8d3e387e4f8d
 	github.com/asticode/go-astisub v0.26.0
 	github.com/matthiasreumann/gomino v0.0.2
 	github.com/meilisearch/meilisearch-go v0.25.0
diff --git a/go.sum b/go.sum
index 7a3df2946..1b9e9cfab 100644
--- a/go.sum
+++ b/go.sum
@@ -55,6 +55,8 @@ github.com/RBG-TUM/go-anel-pwrctrl v1.0.0 h1:8V7MV6oyg+sQzSRWhEfgg9FcOaQMGBreOh3
 github.com/RBG-TUM/go-anel-pwrctrl v1.0.0/go.mod h1:6c2j1rcryE6BWphhJtGb+yXFIGRzmIXi+31TjE9Cft4=
 github.com/TUM-Dev/CampusProxy/client v0.0.0-20230226120508-3e8bb2411921 h1:c4RdbLP4UftJQOV2Q6XrXC2ScWSEqN/ojBD9ava5LR8=
 github.com/TUM-Dev/CampusProxy/client v0.0.0-20230226120508-3e8bb2411921/go.mod h1:UuXuuqgljQbgtLAw5NY+VcThXAwO6UISn6U3s4TJx8k=
+github.com/TUM-Dev/gocast/worker v0.0.0-20230824080536-8d3e387e4f8d h1:jiYEexXXaW17n9lPFxwvJbJgzle97VKT39uSTROuCnY=
+github.com/TUM-Dev/gocast/worker v0.0.0-20230824080536-8d3e387e4f8d/go.mod h1:+ddm5cnR0+RC/+TARNV5wSo15yOcd+jooxZofwzd9wc=
 github.com/alexbrainman/sspi v0.0.0-20210105120005-909beea2cc74 h1:Kk6a4nehpJ3UuJRqlA3JxYxBZEqCeOmATOvrbT4p9RA=
 github.com/alexbrainman/sspi v0.0.0-20210105120005-909beea2cc74/go.mod h1:cEWa1LVoE5KvSD9ONXsZrj0z6KqySlCCNKHlLzbqAt4=
 github.com/andybalholm/brotli v1.0.4/go.mod h1:fO7iG3H7G2nSZ7m0zPUDn85XEX2GTukHGRSepvi9Eig=
@@ -279,8 +281,6 @@ github.com/joho/godotenv v1.5.1 h1:7eLL/+HRGLY0ldzfGMeQkb7vMd0as4CfYvUVzLqw0N0=
 github.com/jonboulle/clockwork v0.2.2/go.mod h1:Pkfl5aHPm1nk2H9h0bjmnJD/BcgbGXUBGnn1kMkgxc8=
 github.com/jonboulle/clockwork v0.4.0 h1:p4Cf1aMWXnXAUh8lVfewRBx1zaTSYKrKMF2g3ST4RZ4=
 github.com/jonboulle/clockwork v0.4.0/go.mod h1:xgRqUGwRcjKCO1vbZUEtSLrqKoPSsUpK7fnezOII0kc=
-github.com/TUM-Dev/gocast/worker v0.0.0-20230813170152-4b40e4b3a301 h1:lqbhUuaWE5GETZI5bRWAcl8/JBNU54Rcoow5yyX1zbw=
-github.com/TUM-Dev/gocast/worker v0.0.0-20230813170152-4b40e4b3a301/go.mod h1:o/rM0tvFWj9+9TGOGZa+H7xmumcljkRWvrbuvysiLYE=
 github.com/josharian/intern v1.0.0 h1:vlS4z54oSdjm0bgjRigI+G1HpF+tI+9rE5LLzOg8HmY=
 github.com/josharian/intern v1.0.0/go.mod h1:5DoeVV0s6jJacbCEi61lwdGj/aVlrQvzHFFd8Hwg//Y=
 github.com/json-iterator/go v1.1.10/go.mod h1:KdQUCv79m/52Kvf8AW2vK1V8akMuk1QjK/uOdHXbAo4=
diff --git a/go.work.sum b/go.work.sum
index b32177595..20e0d67ff 100644
--- a/go.work.sum
+++ b/go.work.sum
@@ -1,14 +1,156 @@
+cloud.google.com/go v0.44.3/go.mod h1:60680Gw3Yr4ikxnPRS/oxxkBccT6SA1yMk63TGekxKY=
+cloud.google.com/go v0.75.0/go.mod h1:VGuuCn7PG0dwsd5XPVm2Mm3wlh3EL55/79EKB6hlPTY=
+cloud.google.com/go/storage v1.14.0/go.mod h1:GrKmX003DSIwi9o29oFT7YDnHYwZoctc3fOKtUw0Xmo=
+github.com/Azure/go-ntlmssp v0.0.0-20221128193559-754e69321358/go.mod h1:chxPXzSsl7ZWRAuOIE23GDNzjWuZquvFlgA8xmpunjU=
+github.com/Masterminds/goutils v1.1.1/go.mod h1:8cTjp+g8YejhMuvIA5y2vz3BpJxksy863GQaJW2MFNU=
+github.com/Masterminds/semver/v3 v3.2.0/go.mod h1:qvl/7zhW3nngYb5+80sSMF+FG2BjYrf8m9wsX0PNOMQ=
+github.com/Masterminds/semver/v3 v3.2.1/go.mod h1:qvl/7zhW3nngYb5+80sSMF+FG2BjYrf8m9wsX0PNOMQ=
+github.com/Masterminds/sprig/v3 v3.2.3/go.mod h1:rXcFaZ2zZbLRJv/xSysmlgIM1u11eBaRMhvYXJNkGuM=
+github.com/RBG-TUM/CAMPUSOnline v0.0.0-20230412070523-8db58ed5c0b4/go.mod h1:pcWaw3hQOKmvRfldxtPlYBGAFbWQXUU44+KcDYwqduc=
+github.com/RBG-TUM/commons v0.0.0-20220406105618-030c095f6a1b/go.mod h1:Nw30dUekEb8ZrJwoGck0lILeVDCIX9dqJsEAPSOxBs0=
+github.com/RBG-TUM/go-anel-pwrctrl v1.0.0/go.mod h1:6c2j1rcryE6BWphhJtGb+yXFIGRzmIXi+31TjE9Cft4=
+github.com/TUM-Dev/CampusProxy/client v0.0.0-20230226120508-3e8bb2411921/go.mod h1:UuXuuqgljQbgtLAw5NY+VcThXAwO6UISn6U3s4TJx8k=
+github.com/alexbrainman/sspi v0.0.0-20210105120005-909beea2cc74/go.mod h1:cEWa1LVoE5KvSD9ONXsZrj0z6KqySlCCNKHlLzbqAt4=
+github.com/andybalholm/brotli v1.0.5/go.mod h1:fO7iG3H7G2nSZ7m0zPUDn85XEX2GTukHGRSepvi9Eig=
+github.com/antchfx/xmlquery v1.3.17/go.mod h1:Afkq4JIeXut75taLSuI31ISJ/zeq+3jG7TunF7noreA=
+github.com/antchfx/xpath v1.2.4/go.mod h1:i54GszH55fYfBmoZXapTHN8T8tkcHfRgLyVwwqzXNcs=
+github.com/asticode/go-astikit v0.20.0/go.mod h1:h4ly7idim1tNhaVkdVBeXQZEE3L0xblP7fCWbgwipF0=
+github.com/asticode/go-astikit v0.30.0/go.mod h1:h4ly7idim1tNhaVkdVBeXQZEE3L0xblP7fCWbgwipF0=
+github.com/asticode/go-astikit v0.40.0/go.mod h1:h4ly7idim1tNhaVkdVBeXQZEE3L0xblP7fCWbgwipF0=
+github.com/asticode/go-astisub v0.26.0/go.mod h1:WTkuSzFB+Bp7wezuSf2Oxulj5A8zu2zLRVFf6bIFQK8=
+github.com/asticode/go-astits v1.8.0/go.mod h1:DkOWmBNQpnr9mv24KfZjq4JawCFX1FCqjLVGvO0DygQ=
+github.com/asticode/go-astits v1.13.0/go.mod h1:QSHmknZ51pf6KJdHKZHJTLlMegIrhega3LPWz3ND/iI=
+github.com/beevik/etree v1.1.0/go.mod h1:r8Aw8JqVegEf0w2fDnATrX9VpkMcyFeM0FhwO62wh+A=
+github.com/beevik/etree v1.2.0/go.mod h1:aiPf89g/1k3AShMVAzriilpcE4R/Vuor90y83zVZWFc=
+github.com/bytedance/sonic v1.5.0/go.mod h1:ED5hyg4y6t3/9Ku1R6dU/4KyJ48DZ4jPhfY1O2AihPM=
+github.com/bytedance/sonic v1.10.0-rc/go.mod h1:ElCzW+ufi8qKqNW0FY314xriJhyJhuoJ3gFZdAHF7NM=
+github.com/bytedance/sonic v1.10.0/go.mod h1:iZcSUejdk5aukTND/Eu/ivjQuEL0Cu9/rf50Hi0u/g4=
 github.com/cespare/xxhash v1.1.0 h1:a6HrQnmkObjyL+Gs60czilIUGqrzKutQD6XZog3p+ko=
+github.com/cespare/xxhash/v2 v2.1.1/go.mod h1:VGX0DQ3Q6kWi7AoAeZDth3/j3BFtOZR5XLFGgcrjCOs=
+github.com/chenzhuoyu/base64x v0.0.0-20211019084208-fb5309c8db06/go.mod h1:DH46F32mSOjUmXrMHnKwZdA8wcEefY7UVqBKYGjpdQY=
+github.com/chenzhuoyu/base64x v0.0.0-20221115062448-fe3a3abad311/go.mod h1:b583jCggY9gE99b6G5LEC39OIiVsWj+R97kbl5odCEk=
+github.com/chenzhuoyu/base64x v0.0.0-20230717121745-296ad89f973d/go.mod h1:8EPpVsBuRksnlj1mLy4AWzRNQYxauNi62uWcE3to6eA=
+github.com/chenzhuoyu/iasm v0.9.0/go.mod h1:Xjy2NpN3h7aUqeqM+woSuuvxmIe6+DDsiNLIrkAmYog=
+github.com/crewjam/httperr v0.2.0/go.mod h1:Jlz+Sg/XqBQhyMjdDiC+GNNRzZTD7x39Gu3pglZ5oH4=
+github.com/crewjam/saml v0.4.13/go.mod h1:igEejV+fihTIlHXYP8zOec3V5A8y3lws5bQBFsTm4gA=
+github.com/dchest/uniuri v1.2.0/go.mod h1:fSzm4SLHzNZvWLvWJew423PhAzkpNQYq+uNLq4kxhkY=
+github.com/dgraph-io/ristretto v0.1.1/go.mod h1:S1GPSBCYCIhmVNfcth17y2zZtQT6wzkzgwUve0VDWWA=
+github.com/dustin/go-humanize v1.0.1/go.mod h1:Mu1zIs6XwVuF/gI1OepvI0qD18qycQx+mFykh5fBlto=
+github.com/fsnotify/fsnotify v1.6.0/go.mod h1:sl3t1tCWJFWoRz9R8WJCbQihKKwmorjAbSClcnxKAGw=
+github.com/gabriel-vasile/mimetype v1.4.2/go.mod h1:zApsH/mKG4w07erKIaJPFiX0Tsq9BFQgN3qGY5GnNgA=
+github.com/gabstv/melody v1.0.2/go.mod h1:fvJW9enOHGIN1E4nCuBZ3lIZxHiPbnMIIYEXcSKQq9o=
+github.com/gin-contrib/gzip v0.0.6/go.mod h1:QOJlmV2xmayAjkNS2Y8NQsMneuRShOU/kjovCXNuzzk=
+github.com/gin-gonic/gin v1.9.1/go.mod h1:hPrL7YrpYKXt5YId3A/Tnip5kqbEAP+KLuI3SUcPTeU=
+github.com/go-asn1-ber/asn1-ber v1.5.4/go.mod h1:hEBeB/ic+5LoWskz+yKT7vGhhPYkProFKoKdwZRWMe0=
+github.com/go-gormigrate/gormigrate/v2 v2.1.0/go.mod h1:gpA97koYGyjqaiLDTmLE5W7nyYTmI26AYIf2a/earuo=
+github.com/go-ldap/ldap/v3 v3.4.5/go.mod h1:bMGIq3AGbytbaMwf8wdv5Phdxz0FWHTIYMSzyrYgnQs=
+github.com/go-playground/locales v0.14.1/go.mod h1:hxrqLVvrK65+Rwrd5Fc6F2O76J/NuW9t0sjnWqG1slY=
+github.com/go-playground/universal-translator v0.18.1/go.mod h1:xekY+UJKNuX9WP91TpwSH2VMlDf28Uj24BCp08ZFTUY=
+github.com/go-playground/validator/v10 v10.15.0/go.mod h1:9iXMNT7sEkjXb0I+enO7QXmzG6QCsPWY4zveKFVRSyU=
+github.com/go-sql-driver/mysql v1.7.0/go.mod h1:OXbVy3sEdcQ2Doequ6Z5BW6fXNQTmx+9S1MCJN5yJMI=
+github.com/go-sql-driver/mysql v1.7.1/go.mod h1:OXbVy3sEdcQ2Doequ6Z5BW6fXNQTmx+9S1MCJN5yJMI=
+github.com/goccy/go-json v0.10.2/go.mod h1:6MelG93GURQebXPDq3khkgXZkazVtN9CRI+MGFi0w8I=
 github.com/golang-jwt/jwt v3.2.2+incompatible h1:IfV12K8xAKAnZqdXVzCZ+TOjboZ2keLg81eXfW3O+oY=
+github.com/golang-jwt/jwt/v4 v4.4.3/go.mod h1:m21LjoU+eqJr34lmDMbreY2eSTRJ1cv77w39/MY0Ch0=
+github.com/golang/glog v1.1.2/go.mod h1:zR+okUeTbrL6EL3xHUDxZuEtGv04p5shwip1+mL/rLQ=
+github.com/golang/groupcache v0.0.0-20210331224755-41bb18bfe9da/go.mod h1:cIg4eruTrX1D+g88fzRXU5OdNfaM+9IcxsU14FzY7Hc=
+github.com/golang/mock v1.6.0/go.mod h1:p6yTPP+5HYm5mzsMV8JkE6ZKdX+/wYM6Hr+LicevLPs=
+github.com/google/pprof v0.0.0-20201218002935-b9804c9f04c2/go.mod h1:kpwsk12EmLew5upagYY7GY0pfYCcupk39gWOCRROcvE=
+github.com/googleapis/google-cloud-go-testing v0.0.0-20200911160855-bcd43fbb19e8/go.mod h1:dvDLG8qkwmyD9a/MJJN3XJcT3xFxOKAvTZGvuZmac9g=
+github.com/gorilla/websocket v1.4.0/go.mod h1:E7qHFY5m1UJ88s3WnNqhKjPHQ0heANvMoAMk2YaljkQ=
+github.com/huandu/xstrings v1.3.3/go.mod h1:y5/lhBue+AyNmUVz9RLU9xbLR0o4KIIExikq4ovT0aE=
+github.com/huandu/xstrings v1.4.0/go.mod h1:y5/lhBue+AyNmUVz9RLU9xbLR0o4KIIExikq4ovT0aE=
+github.com/icholy/digest v0.1.22/go.mod h1:uLAeDdWKIWNFMH0wqbwchbTQOmJWhzSnL7zmqSPqEEc=
+github.com/imdario/mergo v0.3.11/go.mod h1:jmQim1M+e3UYxmgPu/WyfjB3N3VflVyUjjjwH0dnCYA=
+github.com/imdario/mergo v0.3.16/go.mod h1:WBLT9ZmE3lPoWsEzCh9LPo3TiwVN+ZKEjmz+hD27ysY=
+github.com/jinzhu/inflection v1.0.0/go.mod h1:h+uFLlag+Qp1Va5pdKtLDYj+kHp5pxUVkryuEj+Srlc=
+github.com/jinzhu/now v1.1.5/go.mod h1:d3SSVoowX0Lcu0IBviAWJpolVfI5UJVZZ7cO71lE/z8=
+github.com/jonboulle/clockwork v0.2.2/go.mod h1:Pkfl5aHPm1nk2H9h0bjmnJD/BcgbGXUBGnn1kMkgxc8=
+github.com/jonboulle/clockwork v0.4.0/go.mod h1:xgRqUGwRcjKCO1vbZUEtSLrqKoPSsUpK7fnezOII0kc=
+github.com/klauspost/compress v1.15.6/go.mod h1:PhcZ0MbTNciWF3rruxRgKxI5NkcHHrHUDtV4Yw2GlzU=
+github.com/klauspost/compress v1.16.7/go.mod h1:ntbaceVETuRiXiv4DpjP66DpAtAGkEQskQzEyD//IeE=
+github.com/klauspost/cpuid/v2 v2.0.9/go.mod h1:FInQzS24/EEf25PyTYn52gqo7WaD8xa0213Md/qVLRg=
+github.com/klauspost/cpuid/v2 v2.2.5/go.mod h1:Lcz8mBdAVJIBVzewtcLocK12l3Y+JytZYpaMropDUws=
+github.com/knz/go-libedit v1.10.1/go.mod h1:MZTVkCWyz0oBc7JOWP3wNAzd002ZbM/5hgShxwh4x8M=
+github.com/kr/pretty v0.3.1/go.mod h1:hoEshYVHaxMs3cyo3Yncou5ZscifuDolrwPKZanG3xk=
+github.com/leodido/go-urn v1.2.4/go.mod h1:7ZrI8mTSeBSHl/UaRyKQW1qZeMgak41ANeCNaVckg+4=
+github.com/magiconair/properties v1.8.7/go.mod h1:Dhd985XPs7jluiymwWYZ0G4Z61jb3vdS329zhj2hYo0=
+github.com/mattermost/xml-roundtrip-validator v0.1.0/go.mod h1:qccnGMcpgwcNaBnxqpJpWWUiPNr5H3O8eDgGV9gT5To=
+github.com/matthiasreumann/gomino v0.0.2/go.mod h1:bmKxa4ZOGY6RSFH4NnfYf7hk7FbMu2nkSpoAF5TD6fY=
+github.com/mattn/go-isatty v0.0.19/go.mod h1:W+V8PltTTMOvKvAeJH7IuucS94S2C6jfK/D7dTCTo3Y=
+github.com/meilisearch/meilisearch-go v0.25.0/go.mod h1:SxuSqDcPBIykjWz1PX+KzsYzArNLSCadQodWs8extS0=
+github.com/microcosm-cc/bluemonday v1.0.25/go.mod h1:ZIOjCQp1OrzBBPIJmfX4qDYFuhU02nx4bn030ixfHLE=
+github.com/mitchellh/copystructure v1.0.0/go.mod h1:SNtv71yrdKgLRyLFxmLdkAbkKEFWgYaq1OVrnRcwhnw=
+github.com/mitchellh/copystructure v1.2.0/go.mod h1:qLl+cE2AmVv+CoeAwDPye/v+N2HKCj9FbZEVFJRxO9s=
+github.com/mitchellh/mapstructure v1.5.0/go.mod h1:bFUtVrKA4DC2yAKiSyO/QUcy7e+RRV2QTWOzhPopBRo=
+github.com/mitchellh/reflectwalk v1.0.0/go.mod h1:mSTlrgnPZtwu0c4WaC2kGObEpuNDbx0jmZXqmk4esnw=
+github.com/mitchellh/reflectwalk v1.0.2/go.mod h1:mSTlrgnPZtwu0c4WaC2kGObEpuNDbx0jmZXqmk4esnw=
+github.com/olahol/melody v0.0.0-20180227134253-7bd65910e5ab/go.mod h1:3lo03f1jM3KFUG/rsujuLB1rBmlvIzVM3SCqbuHqsBU=
 github.com/pelletier/go-toml v1.9.3 h1:zeC5b1GviRUyKYd6OJPvBU/mcVDVoL1OhT17FCt5dSQ=
+github.com/pelletier/go-toml/v2 v2.0.9/go.mod h1:tJU2Z3ZkXwnxa4DPO899bsyIoywizdUvyaeZurnPPDc=
+github.com/pkg/profile v1.4.0/go.mod h1:NWz/XGvpEW1FyYQ7fCx4dqYBLlfTcE+A9FLAkNKqjFE=
+github.com/pkg/sftp v1.13.1/go.mod h1:3HaPG6Dq1ILlpPZRO0HVMrsydcdLt6HRDccSgb87qRg=
+github.com/rogpeppe/go-internal v1.9.0/go.mod h1:WtVeX8xhTBvf0smdhujwtBcq4Qrzq/fJaraNFVN+nFs=
 github.com/rogpeppe/go-internal v1.10.0/go.mod h1:UQnix2H7Ngw/k4C5ijL5+65zddjncjaFoBhdsK/akog=
+github.com/russellhaering/goxmldsig v1.2.0/go.mod h1:gM4MDENBQf7M+V824SGfyIUVFWydB7n0KkEubVJl+Tw=
+github.com/russellhaering/goxmldsig v1.4.0/go.mod h1:gM4MDENBQf7M+V824SGfyIUVFWydB7n0KkEubVJl+Tw=
 github.com/russross/blackfriday v1.5.2 h1:HyvC0ARfnZBqnXwABFeSZHpKvJHJJfPz81GNueLj0oo=
+github.com/satori/go.uuid v1.2.0/go.mod h1:dA0hQrYB0VpLJoorglMZABFdXlWrHn1NEOzdhQKdks0=
+github.com/shopspring/decimal v1.2.0/go.mod h1:DKyhrW/HYNuLGql+MJL6WCR6knT2jwCFRcu2hWCYk4o=
+github.com/shopspring/decimal v1.3.1/go.mod h1:DKyhrW/HYNuLGql+MJL6WCR6knT2jwCFRcu2hWCYk4o=
+github.com/spf13/afero v1.9.5/go.mod h1:UBogFpq8E9Hx+xc5CNTTEpTnuHVmXDwZcZcE1eb/UhQ=
+github.com/spf13/cast v1.5.1/go.mod h1:b9PdjNptOpzXr7Rq1q9gJML/2cdGQAo69NKzQ10KN48=
+github.com/spf13/viper v1.16.0/go.mod h1:yg78JgCJcbrQOvV9YLXgkLaZqUidkY9K+Dd1FofRzQg=
+github.com/stretchr/testify v1.8.1/go.mod h1:w2LPCIKwWwSfY2zedu0+kehJoqGctiVI29o6fzry7u4=
+github.com/stretchr/testify v1.8.2/go.mod h1:w2LPCIKwWwSfY2zedu0+kehJoqGctiVI29o6fzry7u4=
+github.com/subosito/gotenv v1.6.0/go.mod h1:Dk4QP5c2W3ibzajGcXpNraDfq2IrhjMIvMSWPKKo0FU=
+github.com/twitchyliquid64/golang-asm v0.15.1/go.mod h1:a1lVb/DtPvCB8fslRZhAngC2+aY1QWCk3Cedj/Gdt08=
 github.com/ugorji/go v1.2.7 h1:qYhyWUUd6WbiM+C6JZAUkIJt/1WrjzNHY9+KCIjVqTo=
+github.com/ugorji/go/codec v1.2.11/go.mod h1:UNopzCgEMSXjBc6AOMqYvWC1ktqTAfzJZUZgYf6w6lg=
+github.com/valyala/fasthttp v1.37.1-0.20220607072126-8a320890c08d/go.mod h1:t/G+3rLek+CyY9bnIE+YlMRddxVAAGjhxndDB4i4C0I=
+github.com/valyala/fasthttp v1.48.0/go.mod h1:k2zXd82h/7UZc3VOdJ2WaUqt1uZ/XpXAfE9i+HBC3lA=
+github.com/zenazn/goji v1.0.1/go.mod h1:7S9M489iMyHBNxwZnk9/EHS098H4/F6TATF2mIxtB1Q=
+golang.org/x/arch v0.0.0-20210923205945-b76863e36670/go.mod h1:5om86z9Hs0C8fWVUuoMHwpExlXzs5Tkyp9hOrfG7pp8=
+golang.org/x/arch v0.4.0/go.mod h1:5om86z9Hs0C8fWVUuoMHwpExlXzs5Tkyp9hOrfG7pp8=
+golang.org/x/crypto v0.0.0-20210421170649-83a5a9bb288b/go.mod h1:T9bdIzuCu7OtxOm1hfPfRQxPLYneinmdGuTeoZ9dtd4=
+golang.org/x/crypto v0.0.0-20220128200615-198e4374d7ed/go.mod h1:IxCIyHEi3zRg3s0A5j5BB6A9Jmi73HwBIUl50j+osU4=
+golang.org/x/crypto v0.0.0-20220722155217-630584e8d5aa/go.mod h1:IxCIyHEi3zRg3s0A5j5BB6A9Jmi73HwBIUl50j+osU4=
+golang.org/x/crypto v0.3.0/go.mod h1:hebNnKkNXi2UzZN1eVRvBB7co0a+JxK6XbPiWVs/3J4=
+golang.org/x/crypto v0.7.0/go.mod h1:pYwdfH91IfpZVANVyUOhSIPZaFoJGxTFbZhFTx+dXZU=
 golang.org/x/crypto v0.9.0 h1:LF6fAI+IutBocDJ2OT0Q1g8plpYljMZ4+lty+dsqw3g=
 golang.org/x/crypto v0.9.0/go.mod h1:yrmDGqONDYtNj3tH8X9dzUun2m2lzPa9ngI6/RUPGR0=
+golang.org/x/crypto v0.12.0/go.mod h1:NF0Gs7EO5K4qLn+Ylc+fih8BSTeIjAP05siRnAh98yw=
+golang.org/x/net v0.0.0-20200904194848-62affa334b73/go.mod h1:/O7V0waA8r7cgGh81Ro3o1hOxt32SMVPicZroKQ2sZA=
+golang.org/x/net v0.0.0-20201224014010-6772e930b67b/go.mod h1:m0MpNAwzfU5UDzcl9v0D8zg8gWTRqZa9RBIspLL5mdg=
+golang.org/x/net v0.2.0/go.mod h1:KqCZLdyyvdV855qA2rE3GC2aiw5xGR5TEjj8smXukLY=
+golang.org/x/net v0.7.0/go.mod h1:2Tu9+aMcznHK/AK1HMvgo6xiTLG5rD5rZLDS+rp2Bjs=
+golang.org/x/net v0.8.0/go.mod h1:QVkue5JL9kW//ek3r6jTKnTFis1tRmNAW2P1shuFdJc=
 golang.org/x/net v0.10.0 h1:X2//UzNDwYmtCLn7To6G58Wr6f5ahEAQgKNzv9Y951M=
 golang.org/x/net v0.10.0/go.mod h1:0qNGK6F8kojg2nk9dLZ2mShWaEBan6FAoqfSigmmuDg=
+golang.org/x/oauth2 v0.11.0/go.mod h1:LdF7O/8bLR/qWK9DrpXmbHLTouvRHK0SgJl0GmDBchk=
+golang.org/x/sys v0.0.0-20210225134936-a50acf3fe073/go.mod h1:h1NjWce9XRLGQEsW7wpKNCjG9DtNlClVuFLEZdDNbEs=
+golang.org/x/sys v0.0.0-20210423185535-09eb48e85fd7/go.mod h1:h1NjWce9XRLGQEsW7wpKNCjG9DtNlClVuFLEZdDNbEs=
+golang.org/x/sys v0.0.0-20220908164124-27713097b956/go.mod h1:oPkhp1MJrh7nUepCBck5+mAzfO9JrbApNNgaTdGDITg=
+golang.org/x/sys v0.0.0-20221010170243-090e33056c14/go.mod h1:oPkhp1MJrh7nUepCBck5+mAzfO9JrbApNNgaTdGDITg=
+golang.org/x/sys v0.6.0/go.mod h1:oPkhp1MJrh7nUepCBck5+mAzfO9JrbApNNgaTdGDITg=
 golang.org/x/sys v0.8.0 h1:EBmGv8NaZBZTWvrbjNoL6HVt+IVy3QDQpJs7VRIw3tU=
+golang.org/x/term v0.2.0/go.mod h1:TVmDHMZPmdnySmBfhjOoOdhjzdE1h4u1VwSiw2l1Nuc=
+golang.org/x/term v0.6.0/go.mod h1:m6U89DPEgQRMq3DNkDClhWw02AUbt2daBVO4cn4Hv9U=
 golang.org/x/term v0.8.0/go.mod h1:xPskH00ivmX89bAKVGSKKtLOWNx2+17Eiy94tnKShWo=
+golang.org/x/text v0.4.0/go.mod h1:mrYo+phRRbMaCq/xk9113O4dZlRixOauAjOtrjsXDZ8=
+golang.org/x/text v0.8.0/go.mod h1:e1OnstbJyHTd6l/uOt8jFFHp6TRDWZR/bV3emEE/zU8=
+golang.org/x/tools v0.0.0-20190624222133-a101b041ded4/go.mod h1:/rFqwRUd4F7ZHNgwSSTFct+R/Kf4OFW1sUzUTQQTgfc=
+golang.org/x/tools v0.0.0-20210108195828-e2f9c7f1fc8e/go.mod h1:emZCQorbCU4vsT4fOWvOPXz4eW1wZW4PmDk9uLelYpA=
+golang.org/x/tools v0.1.1/go.mod h1:o0xws9oXOQQZyjljx8fwUC0k7L1pTE6eaCbjGeHmOkk=
+google.golang.org/genproto v0.0.0-20210108203827-ffc7fda8c3d7/go.mod h1:FWY/as6DDZQgahTzZj3fqbO1CbirC29ZNUFHwi0/+no=
+google.golang.org/genproto v0.0.0-20210226172003-ab064af71705/go.mod h1:FWY/as6DDZQgahTzZj3fqbO1CbirC29ZNUFHwi0/+no=
 google.golang.org/genproto v0.0.0-20230803162519-f966b187b2e5 h1:L6iMMGrtzgHsWofoFcihmDEMYeDR9KN/ThbPWGrh++g=
+gorm.io/driver/mysql v1.5.1/go.mod h1:Jo3Xu7mMhCyj8dlrb3WoCaRd1FhsVh+yMXb1jUInf5o=
 gorm.io/gorm v1.25.1 h1:nsSALe5Pr+cM3V1qwwQ7rOkw+6UeLrX5O4v3llhHa64=
+gorm.io/gorm v1.25.1/go.mod h1:L4uxeKpfBml98NYqVqwAdmV1a2nBtAec/cf3fpucW/k=
+gorm.io/gorm v1.25.3/go.mod h1:L4uxeKpfBml98NYqVqwAdmV1a2nBtAec/cf3fpucW/k=
+gotest.tools v2.2.0+incompatible/go.mod h1:DsYFclhRJ6vuDpmuTbkuFWG+y2sxOXAzmJt81HFBacw=
+gotest.tools/v3 v3.0.2/go.mod h1:3SzNCllyD9/Y+b5r9JIKQ474KzkZyqLqEfYqMsX94Bk=
+mvdan.cc/xurls/v2 v2.5.0/go.mod h1:yQgaGQ1rFtJUzkmKiHYSSfuQxqfYmd//X6PxvholpeE=
+nullprogram.com/x/optparse v1.0.0/go.mod h1:KdyPE+Igbe0jQUrVfMqDMeJQIJZEuyV7pjYmp6pbG50=
+rsc.io/pdf v0.1.1/go.mod h1:n8OzWcQ6Sp37PL01nO98y4iUCRdTGarVfzxY20ICaU4=

From c21c40f4577a9dfdd9d5ea2c87c37b15f0591551 Mon Sep 17 00:00:00 2001
From: matthias <matthias.reumann@tum.de>
Date: Wed, 30 Aug 2023 13:07:17 +0200
Subject: [PATCH 21/31] Use start attribute for sorting (#1148)

The weird ordering occurred because we used createdAt for sorting. To fix this issue, use the start attribute.
---
 web/ts/data-store/stream-playlist.ts | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/web/ts/data-store/stream-playlist.ts b/web/ts/data-store/stream-playlist.ts
index d213bb50c..493744971 100644
--- a/web/ts/data-store/stream-playlist.ts
+++ b/web/ts/data-store/stream-playlist.ts
@@ -6,10 +6,10 @@ export class StreamPlaylistProvider extends StreamableMapProvider<number, Stream
         const result = await StreamPlaylist.get(streamId);
         return result
             .map((e) => {
-                e.createdAtDate = new Date(e.createdAt);
+                e.startDate = new Date(e.start);
                 return e;
             })
-            .sort((a, b) => a.createdAtDate.getTime() - b.createdAtDate.getTime());
+            .sort((a, b) => (a.startDate < b.startDate ? -1 : 1));
     }
 }
 
@@ -23,7 +23,7 @@ export type StreamPlaylistEntry = {
     createdAt: string;
 
     // Client Generated
-    createdAtDate: Date;
+    startDate: Date;
 };
 
 const StreamPlaylist = {

From 710cc242addfd151a1108205c2d8bd601a12ce49 Mon Sep 17 00:00:00 2001
From: matthias <matthias.reumann@tum.de>
Date: Wed, 30 Aug 2023 13:14:56 +0200
Subject: [PATCH 22/31] Fix chat (#1147)

In #1135 the textarea tag hasn't been closed. As a result the chat UI doesn't work properly. Furthermore, it broke the polls. This is fixed by closing the tag.
---
 web/template/components/chat.gohtml | 2 +-
 web/ts/components/chat-prompt.ts    | 4 ++--
 2 files changed, 3 insertions(+), 3 deletions(-)

diff --git a/web/template/components/chat.gohtml b/web/template/components/chat.gohtml
index 84c7e1e25..b58a412e3 100644
--- a/web/template/components/chat.gohtml
+++ b/web/template/components/chat.gohtml
@@ -298,7 +298,7 @@
                                    x-model="message"
                                    :placeholder="!isConnected() ? 'Reconnecting to chat...' : isLoggedIn() ? 'Send a message' : 'Log in to chat'"
                                    class="tum-live-border border-b bg-transparent text-sm font-normal placeholder:text-sm focus:outline-none py-1 w-full"
-                                   autocomplete="off">
+                                      autocomplete="off"></textarea>
                         </label>
                         <section class="flex justify-between">
                             <div class="relative">
diff --git a/web/ts/components/chat-prompt.ts b/web/ts/components/chat-prompt.ts
index 55eaf50c2..9ed6fbda6 100644
--- a/web/ts/components/chat-prompt.ts
+++ b/web/ts/components/chat-prompt.ts
@@ -41,8 +41,8 @@ export function chatPromptContext(streamId: number): AlpineComponent {
             this.users.reset();
         },
 
-        send(event: KeyboardEvent) {
-            if (event.shiftKey) {
+        send(event?: KeyboardEvent) {
+            if (event !== undefined && event.shiftKey) {
                 return;
             }
             console.log("🌑 send message '", this.message, "'");

From ed017c5dd9e3dcc55f97089cb17761364901141d Mon Sep 17 00:00:00 2001
From: matthias <matthias.reumann@tum.de>
Date: Wed, 30 Aug 2023 13:23:40 +0200
Subject: [PATCH 23/31] Add 'overflow-wrap-anywhere' to reply messages and
 reply prompt message (#1144)

---
 web/template/components/chat.gohtml | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/web/template/components/chat.gohtml b/web/template/components/chat.gohtml
index b58a412e3..9062e95d9 100644
--- a/web/template/components/chat.gohtml
+++ b/web/template/components/chat.gohtml
@@ -202,7 +202,7 @@
                                             </div>
                                             <div class="group p-2 rounded hover:bg-gray-100 dark:hover:bg-gray-700">
                                                 <div class="flex justify-between">
-                                                    <span class="w-5/6 my-auto" x-html="reply.message"></span>
+                                                    <span class="w-5/6 overflow-wrap-anywhere my-auto" x-html="reply.message"></span>
                                                     <span class="hidden group-hover:inline text-xs text-5 font-light mt-auto"
                                                           x-text="reply.friendlyCreatedAt()"></span>
                                                 </div>
@@ -255,7 +255,7 @@
                                       class="h-fit fa-video text-xs text-white bg-red-400 p-1 rounded fas mr-1"></span>
                                 <span class="text-2 font-semibold mr-2" x-text="`${reply.message.name}:`"
                                       :style="'color:'+reply.message.color"></span>
-                                <span class="" x-html="reply.message.message"
+                                <span class="w-5/6 overflow-wrap-anywhere" x-html="reply.message.message"
                                       x-init="$nextTick(() => renderMathInElement($el, global.getKatexOptions()))"></span>
                             </div>
                         </article>

From 6eb96ea6b6ce33a7a3ccc92f3e3219e93eb256b1 Mon Sep 17 00:00:00 2001
From: matthias <matthias.reumann@tum.de>
Date: Wed, 30 Aug 2023 13:31:31 +0200
Subject: [PATCH 24/31] Fix false order of videos on course-page by negating
 predicate (#1145)

---
 web/template/home.gohtml | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/web/template/home.gohtml b/web/template/home.gohtml
index bd5a6d647..970aba26b 100644
--- a/web/template/home.gohtml
+++ b/web/template/home.gohtml
@@ -431,7 +431,7 @@
                             </header>
                             <section>
                                 <template x-if="courseStreams.hasElements()">
-                                    <article class="flex flex-col" :class="{'flex-col-reverse' : isOldestFirst() }">
+                                    <article class="flex flex-col" :class="{'flex-col-reverse' : !isOldestFirst() }">
                                         <template
                                                 x-for="[m, streams] of Object.entries(courseStreams.get(sortFn(streamSortMode), filterPred(streamFilterMode)))">
                                             <article class="mb-8">

From 9f1f3eb6fb2fd9658afbf0a6431ee6e3a02264f8 Mon Sep 17 00:00:00 2001
From: matthias <matthias.reumann@tum.de>
Date: Mon, 4 Sep 2023 16:47:33 +0200
Subject: [PATCH 25/31] Subscribe to WS in video-information (#1146)

---
 web/ts/components/video-information.ts | 2 +-
 web/ts/components/video-interaction.ts | 6 ++----
 2 files changed, 3 insertions(+), 5 deletions(-)

diff --git a/web/ts/components/video-information.ts b/web/ts/components/video-information.ts
index c4f96adf3..1b76125b5 100644
--- a/web/ts/components/video-information.ts
+++ b/web/ts/components/video-information.ts
@@ -32,7 +32,7 @@ export function videoInformationContext(streamId: number): AlpineComponent {
                     this.handleDescriptionUpdate(data);
                 }
             };
-            SocketConnections.ws.addHandler(handler);
+            SocketConnections.ws.subscribe(handler);
         },
 
         handleViewersUpdate(upd: { viewers: number }) {
diff --git a/web/ts/components/video-interaction.ts b/web/ts/components/video-interaction.ts
index e38dfaa71..22473e68c 100644
--- a/web/ts/components/video-interaction.ts
+++ b/web/ts/components/video-interaction.ts
@@ -1,7 +1,6 @@
 import { AlpineComponent } from "./alpine-component";
 import { User } from "../api/users";
 import { SocketConnections } from "../api/chat-ws";
-import { RealtimeFacade } from "../utilities/ws";
 
 enum InteractionType {
     Chat,
@@ -13,9 +12,8 @@ export function videoInteractionContext(user: User) {
         type: InteractionType.Chat,
         user: user as User,
 
-        init() {
-            SocketConnections.ws.subscribe();
-        },
+        // eslint-disable-next-line @typescript-eslint/no-empty-function
+        init() {},
 
         showChat() {
             this.type = InteractionType.Chat;

From 926c79abbf71646665b18ac9479200d729ea26f7 Mon Sep 17 00:00:00 2001
From: matthias <matthias.reumann@tum.de>
Date: Wed, 6 Sep 2023 12:41:49 +0200
Subject: [PATCH 26/31] Fix group order (#1150)

Dictionaries are not really great for ordering (i.e. they don't have an order). Rewrite the group function to return a 2-dimensional array (an array of stream groups starting in the same month and year).
---
 web/template/home.gohtml       |  8 +++----
 web/ts/api/courses.ts          | 33 ++++++++++++++++++++++-------
 web/ts/components/course.ts    | 21 ++-----------------
 web/ts/utilities/smartarray.ts | 38 ++++++++++++++++++++--------------
 4 files changed, 53 insertions(+), 47 deletions(-)

diff --git a/web/template/home.gohtml b/web/template/home.gohtml
index 970aba26b..93877a8dd 100644
--- a/web/template/home.gohtml
+++ b/web/template/home.gohtml
@@ -431,18 +431,18 @@
                             </header>
                             <section>
                                 <template x-if="courseStreams.hasElements()">
-                                    <article class="flex flex-col" :class="{'flex-col-reverse' : !isOldestFirst() }">
+                                    <article class="grid">
                                         <template
-                                                x-for="[m, streams] of Object.entries(courseStreams.get(sortFn(streamSortMode), filterPred(streamFilterMode)))">
+                                                x-for="group in courseStreams.get(sortFn(streamSortMode), filterPred(streamFilterMode))">
                                             <article class="mb-8">
                                                 <header class="mb-2">
-                                                    <h6 class="font-semibold" x-text="getMonthName(m)"></h6>
+                                                    <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'">
-                                                    <template x-for="vod in streams" :key="vod.ID">
+                                                    <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)">
diff --git a/web/ts/api/courses.ts b/web/ts/api/courses.ts
index a69bd9915..582dc8042 100644
--- a/web/ts/api/courses.ts
+++ b/web/ts/api/courses.ts
@@ -42,16 +42,16 @@ export class Stream implements Identifiable {
         });
     }
 
-    public MonthOfStart(): string {
-        return new Date(this.Start).toLocaleString("default", { month: "short" });
+    public StartDate(): Date {
+        return new Date(this.Start);
     }
 
-    public NumericMonthOfStart(): number {
-        return new Date(this.Start).getMonth() + 1;
+    public MonthOfStart(): string {
+        return this.StartDate().toLocaleString("default", { month: "short" });
     }
 
     public DayOfStart(): number {
-        return new Date(this.Start).getDate();
+        return this.StartDate().getDate();
     }
 
     public TimeOfStart(): string {
@@ -63,11 +63,11 @@ export class Stream implements Identifiable {
     }
 
     public IsToday(): boolean {
-        return same_day(new Date(this.Start), new Date());
+        return same_day(this.StartDate(), new Date());
     }
 
     public MinutesLeftToStart(): number {
-        return Math.round((new Date(this.Start).valueOf() - new Date().valueOf()) / 60000);
+        return Math.round((this.StartDate().valueOf() - new Date().valueOf()) / 60000);
     }
 
     public DurationString() {
@@ -86,7 +86,7 @@ export class Stream implements Identifiable {
     }
 
     public CompareStart(other: Stream) {
-        const a = new Date(this.Start);
+        const a = this.StartDate();
         const b = new Date(other.Start);
         if (a < b) {
             return 1;
@@ -101,6 +101,23 @@ export class Stream implements Identifiable {
         this.Thumbnail.src = `/api/stream/${this.ID}/thumbs/vod`;
     }
 
+    public GetMonthName(): string {
+        return [
+            "January",
+            "February",
+            "March",
+            "April",
+            "May",
+            "June",
+            "July",
+            "August",
+            "September",
+            "October",
+            "November",
+            "December",
+        ][this.StartDate().getMonth()];
+    }
+
     private static TimeOf(d: string): string {
         return new Date(d).toLocaleTimeString("default", { hour: "2-digit", minute: "2-digit" });
     }
diff --git a/web/ts/components/course.ts b/web/ts/components/course.ts
index 69ac23916..eb175df4b 100644
--- a/web/ts/components/course.ts
+++ b/web/ts/components/course.ts
@@ -29,7 +29,7 @@ export function courseContext(slug: string, year: number, term: string, userId:
 
         course: new Course() as Course,
 
-        courseStreams: new GroupedSmartArray<Stream, number>([], (_) => 0),
+        courseStreams: new GroupedSmartArray<Stream, number>(),
         plannedStreams: new Paginator<Stream>([], 3),
         upcomingStreams: new Paginator<Stream>([], 3),
 
@@ -64,7 +64,7 @@ export function courseContext(slug: string, year: number, term: string, userId:
                     this.upcomingStreams.set(this.course.Upcoming).reset();
                     this.loadProgresses(this.course.Recordings.map((s: Stream) => s.ID)).then((progresses) => {
                         this.course.Recordings.forEach((s: Stream, i) => (s.Progress = progresses[i]));
-                        this.courseStreams.set(this.course.Recordings, (s: Stream) => s.NumericMonthOfStart());
+                        this.courseStreams.set(this.course.Recordings, (s: Stream) => s.StartDate().getMonth());
                     });
                     console.log("🌑 init course", this.course);
                 });
@@ -135,23 +135,6 @@ export function courseContext(slug: string, year: number, term: string, userId:
             dropdown.toggle(false);
         },
 
-        getMonthName(m: number): string {
-            return [
-                "January",
-                "February",
-                "March",
-                "April",
-                "May",
-                "June",
-                "July",
-                "August",
-                "September",
-                "October",
-                "November",
-                "December",
-            ][m - 1];
-        },
-
         async loadCourse() {
             this.course = await CoursesAPI.get(this.slug, this.year, this.term, this.userId);
         },
diff --git a/web/ts/utilities/smartarray.ts b/web/ts/utilities/smartarray.ts
index a3a2a592e..d57015e4f 100644
--- a/web/ts/utilities/smartarray.ts
+++ b/web/ts/utilities/smartarray.ts
@@ -25,19 +25,18 @@ export class SmartArray<T> {
     }
 }
 
-export class GroupedSmartArray<T, K extends keyof never> {
+export class GroupedSmartArray<T, K> {
     private list: T[];
     private key: (i: T) => K;
 
-    constructor(list: T[], key: (i: T) => K) {
-        this.list = list;
-        this.key = key;
+    constructor() {
+        this.list = [];
     }
 
     get(sortFn?: CompareFunction<T>, filterPred?: FilterPredicate<T>) {
         const copy = filterPred ? [...this.list].filter(filterPred) : [...this.list];
         const _list = sortFn ? copy.sort(sortFn) : copy;
-        return groupBy(_list, this.key);
+        return this.group(_list, this.key);
     }
 
     set(list: T[], key: (i: T) => K): GroupedSmartArray<T, K> {
@@ -49,18 +48,25 @@ export class GroupedSmartArray<T, K extends keyof never> {
     hasElements() {
         return this.list.length > 0;
     }
+
+    private group(list: T[], key: (i: T) => K) {
+        const groups = [];
+
+        let lastKey = null;
+        let currentGroup = [];
+
+        list.forEach((l) => {
+            if (lastKey !== null && key(l) != lastKey) {
+                groups.push(currentGroup);
+                currentGroup = [];
+            }
+            currentGroup.push(l);
+            lastKey = key(l);
+        });
+        groups.push(currentGroup);
+        return groups;
+    }
 }
 
 export type CompareFunction<T> = (a: T, b: T) => number;
 export type FilterPredicate<T> = (o: T) => boolean;
-
-/* eslint-disable */
-function groupBy<T, K extends keyof never>(list: T[], getKey: (item: T) => K) {
-    /* eslint-disable */
-    return list.reduce(function (previous, currentItem) {
-        const group = getKey(currentItem);
-        if (!previous[group]) previous[group] = [];
-        previous[group].push(currentItem);
-        return previous;
-    }, {} as Record<K, T[]>);
-}

From 8170ab5bc773f6a290d48aa77a2ec90dba27a229 Mon Sep 17 00:00:00 2001
From: matthias <matthias.reumann@tum.de>
Date: Fri, 8 Sep 2023 12:48:02 +0200
Subject: [PATCH 27/31] Moderate replies (#1131)

Add TS logic to handle reply moderation
---
 dao/chat.go                         |  2 +-
 web/template/components/chat.gohtml | 41 ++++++++++++++++++-----------
 web/ts/api/chat.ts                  |  7 +++++
 web/ts/components/chat.ts           |  3 ++-
 4 files changed, 36 insertions(+), 17 deletions(-)

diff --git a/dao/chat.go b/dao/chat.go
index 18cd74aed..a8f93e01c 100644
--- a/dao/chat.go
+++ b/dao/chat.go
@@ -89,7 +89,7 @@ func (d chatDao) GetReactions(chatID uint) ([]model.ChatReaction, error) {
 func (d chatDao) GetVisibleChats(userID uint, streamID uint) ([]model.Chat, error) {
 	var chats []model.Chat
 	query := DB.
-		Preload("Replies").
+		Preload("Replies", "(visible = 1) OR (user_id = ?)", userID).
 		Preload("Reactions").
 		Preload("AddressedToUsers").
 		Where("(visible = 1) OR (user_id = ?)", userID).
diff --git a/web/template/components/chat.gohtml b/web/template/components/chat.gohtml
index 9062e95d9..be871fd55 100644
--- a/web/template/components/chat.gohtml
+++ b/web/template/components/chat.gohtml
@@ -74,9 +74,7 @@
                                     <span x-show="m.admin"
                                           class="fa-video text-white bg-red-400 p-1 rounded fas"></span>
                                     <span class="text-2 font-semibold" x-text="m.name" :style="'color:'+m.color"></span>
-                                    <span x-show="!m.visible" class="text-5 font-light">
-                        This message is currently only visible to you and admins.
-                    </span>
+                                    <span x-show="!m.visible" class="text-5 font-light">This message is currently only visible to you and admins.</span>
                                 </div>
                                 <div class="relative group p-2 rounded hover:bg-gray-100 dark:hover:bg-gray-600">
                                     <div class="flex justify-between">
@@ -190,26 +188,39 @@
 
 
                                 <!-- replies -->
-                                <div x-cloak x-show="m.ShowReplies.value"
-                                     class="grid gap-y-3 py-1 pl-2 mt-2 ml-4 border-l-2 dark:border-secondary-light">
+                                <article x-cloak x-show="m.ShowReplies.value"
+                                         class="grid gap-y-3 py-1 pl-2 mt-2 ml-4 border-l-2 dark:border-secondary-light">
                                     <template x-for="reply in m.replies">
-                                        <div class="grid gap-y-1">
+                                        <section class="grid gap-y-1">
                                             <div>
-                            <span x-show="reply.admin"
-                                  class="text-white bg-red-400 p-1 text-xs rounded fas fa-video"></span>
+                                                <span x-show="reply.admin"
+                                                      class="text-white bg-red-400 p-1 text-xs rounded fas fa-video"></span>
                                                 <span class="text-2 font-semibold" x-text="reply.name"
                                                       :style="'color:'+reply.color"></span>
+                                                <span x-show="!reply.visible" class="text-xs text-5 font-light">This message is currently only visible to you and admins.</span>
                                             </div>
-                                            <div class="group p-2 rounded hover:bg-gray-100 dark:hover:bg-gray-700">
-                                                <div class="flex justify-between">
-                                                    <span class="w-5/6 overflow-wrap-anywhere my-auto" x-html="reply.message"></span>
-                                                    <span class="hidden group-hover:inline text-xs text-5 font-light mt-auto"
-                                                          x-text="reply.friendlyCreatedAt()"></span>
+                                            <div class="flex">
+                                                <div class="group p-2 rounded hover:bg-gray-100 dark:hover:bg-gray-700 flex-grow">
+                                                    <div class="flex justify-between">
+                                                        <span class="w-5/6 overflow-wrap-anywhere my-auto" x-html="reply.message"></span>
+                                                        <span class="hidden group-hover:inline text-xs text-5 font-light mt-auto"
+                                                              x-text="reply.friendlyCreatedAt()"></span>
+                                                    </div>
                                                 </div>
+                                                {{if $course.ModeratedChatEnabled}}
+                                                    <template x-if="isAdmin()">
+                                                        <button x-cloak x-show="!reply.visible"
+                                                                @click="approveMessage(reply.ID)"
+                                                                title="Approve Message"
+                                                                class="tum-live-icon-button shrink mx-2">
+                                                            <i class="fa-solid fa-spell-check"></i>
+                                                        </button>
+                                                    </template>
+                                                {{end}}
                                             </div>
-                                        </div>
+                                        </section>
                                     </template>
-                                </div>
+                                </article>
                             </section>
                         </template>
                     </div>
diff --git a/web/ts/api/chat.ts b/web/ts/api/chat.ts
index fcbce6ecd..7bf8753c7 100644
--- a/web/ts/api/chat.ts
+++ b/web/ts/api/chat.ts
@@ -92,6 +92,13 @@ export class ChatMessageArray {
         this.messages = filtered;
     }
 
+    approveReply(m: ChatMessage) {
+        const base = this.messages.find((msg) => msg.ID === m.replyTo.Int64);
+        const filtered = base.replies.filter((msg) => msg.ID !== m.ID);
+        filtered.push(Object.assign(new ChatMessage(), m));
+        base.replies = filtered;
+    }
+
     retract(msg: ChatMessage, isAdmin: boolean) {
         if (isAdmin) {
             this.messages.find((m) => m.ID === msg.ID).visible = false;
diff --git a/web/ts/components/chat.ts b/web/ts/components/chat.ts
index e260f88c2..1b187e3f4 100644
--- a/web/ts/components/chat.ts
+++ b/web/ts/components/chat.ts
@@ -232,7 +232,8 @@ export function chatContext(streamId: number, user: User, isRecording: boolean):
 
         handleApprove(msg: ChatMessage) {
             this.preprocessors.forEach((f) => f(msg, this.user));
-            this.messages.approve(msg);
+            if (msg.replyTo.Valid) this.messages.approveReply(msg);
+            else this.messages.approve(msg);
         },
 
         handleRetract(msg: ChatMessage) {

From 628646c675d3b77326a18d3418140e0abf806c47 Mon Sep 17 00:00:00 2001
From: Joscha Henningsen <44805696+joschahenningsen@users.noreply.github.com>
Date: Wed, 13 Sep 2023 11:08:57 +0200
Subject: [PATCH 28/31] version workers with tag (#1157)

---
 .github/workflows/deploy-workers.yml | 5 +++++
 1 file changed, 5 insertions(+)

diff --git a/.github/workflows/deploy-workers.yml b/.github/workflows/deploy-workers.yml
index 378b1970b..444c17cb8 100644
--- a/.github/workflows/deploy-workers.yml
+++ b/.github/workflows/deploy-workers.yml
@@ -29,9 +29,14 @@ jobs:
         with:
           images: ghcr.io/tum-dev/gocast/${{ env.containername }}
           tags: |
+            type=ref,event=branch
+            type=ref,event=pr
+            type=semver,pattern={{version}}
             type=sha
           flavor: |
             latest=true
+            prefix=
+            suffix=
       - name: Set up Docker Buildx
         uses: docker/setup-buildx-action@v2
       - name: Login to DockerHub

From ac6ae655883260288bbe1fbeb707d78cab8b27b2 Mon Sep 17 00:00:00 2001
From: Khadim Fall <khadimfall0602@gmail.com>
Date: Wed, 20 Sep 2023 17:58:17 +0200
Subject: [PATCH 29/31] course management data-providers refactor (#1137)

* started wit hrefactor of course management

* add dao & route

* update route

* started wit hfetching

* Add changeset abstraction

* cleanup file

* remove get all streams again, as there is AdminJson method

* Its rendering

* further dev :S

* added some directive

* little fixes

* ...

* ... no idea...

* right path i guess

* changeset working except video sections

* fix discard files

* save from laptop

* Add changeset doku

* make private works like charm

* changing works pretty well

* add video upload

* add series update

* ported transcoding

* add readme and lecture hall select

* more description

* simplified lecture hall set

* linter

* more fixes

* :)

* add attachments

* :)

* Impl. Feedback

* fix delete lecture

* reenable page reload on create
---
 api/courses.go                                |  16 +-
 web/assets/init-admin.js                      | 157 +++++
 web/template/admin/admin.gohtml               |   1 +
 .../manage/course-lecture-management.gohtml   |   5 +-
 .../manage/lecture-management-card.gohtml     | 231 +++----
 web/ts/api/admin-lecture-list.ts              | 307 +++++++++
 web/ts/change-set.ts                          | 223 ++++++
 web/ts/data-store/admin-lecture-list.ts       | 179 +++++
 web/ts/data-store/data-store.ts               |   4 +
 web/ts/edit-course.ts                         | 651 ++++++------------
 web/ts/global.ts                              |  33 +
 web/ts/utilities/fetch-wrappers.ts            |  71 ++
 12 files changed, 1286 insertions(+), 592 deletions(-)
 create mode 100644 web/assets/init-admin.js
 create mode 100644 web/ts/api/admin-lecture-list.ts
 create mode 100644 web/ts/change-set.ts
 create mode 100644 web/ts/data-store/admin-lecture-list.ts

diff --git a/api/courses.go b/api/courses.go
index 2ae7e1ef7..7502d87f5 100644
--- a/api/courses.go
+++ b/api/courses.go
@@ -6,12 +6,12 @@ import (
 	"errors"
 	"fmt"
 	"github.com/RBG-TUM/commons"
-	"github.com/getsentry/sentry-go"
-	"github.com/gin-gonic/gin"
 	"github.com/TUM-Dev/gocast/dao"
 	"github.com/TUM-Dev/gocast/model"
 	"github.com/TUM-Dev/gocast/tools"
 	"github.com/TUM-Dev/gocast/tools/tum"
+	"github.com/getsentry/sentry-go"
+	"github.com/gin-gonic/gin"
 	"github.com/meilisearch/meilisearch-go"
 	uuid "github.com/satori/go.uuid"
 	log "github.com/sirupsen/logrus"
@@ -61,6 +61,7 @@ func configGinCourseRouter(router *gin.Engine, daoWrapper dao.DaoWrapper) {
 			courses.Use(tools.InitCourse(daoWrapper))
 			courses.Use(tools.AdminOfCourse)
 			courses.DELETE("/", routes.deleteCourse)
+			courses.GET("/lectures", routes.fetchLectures)
 			courses.POST("/createVOD", routes.createVOD)
 			courses.POST("/uploadVODMedia", routes.uploadVODMedia)
 			courses.POST("/copy", routes.copyCourse)
@@ -1038,6 +1039,17 @@ func (r coursesRoutes) renameLecture(c *gin.Context) {
 	}
 }
 
+func (r coursesRoutes) fetchLectures(c *gin.Context) {
+	tlctx := c.MustGet("TUMLiveContext").(tools.TUMLiveContext)
+
+	lectureHalls := r.LectureHallsDao.GetAllLectureHalls()
+	streams := tlctx.Course.AdminJson(lectureHalls)
+
+	c.JSON(http.StatusOK, gin.H{
+		"streams": streams,
+	})
+}
+
 func (r coursesRoutes) updateLectureSeries(c *gin.Context) {
 	stream, err := r.StreamsDao.GetStreamByID(context.Background(), c.Param("streamID"))
 	if err != nil {
diff --git a/web/assets/init-admin.js b/web/assets/init-admin.js
new file mode 100644
index 000000000..172d2513d
--- /dev/null
+++ b/web/assets/init-admin.js
@@ -0,0 +1,157 @@
+document.addEventListener("alpine:init", () => {
+    const textInputTypes = [
+        'text',
+        'password',
+        'email',
+        'search',
+        'url',
+        'tel',
+        'number',
+        'datetime-local',
+        'date',
+        'month',
+        'week',
+        'time',
+        'color'
+    ];
+
+    const convert = (modifiers, value) => {
+        if (modifiers.includes("int")) {
+            return parseInt(value);
+        } else if (modifiers.includes("float")) {
+            return parseFloat(value);
+        }
+        return value;
+    }
+
+    /**
+     * Alpine.js Directive: `x-bind-change-set`
+     *
+     * This directive allows you to synchronize form elements with a given changeSet object.
+     * It is designed to work with different form input types including text inputs,
+     * textareas, checkboxes, and file inputs.
+     *
+     * ## Parameters
+     *
+     * - `el`: The DOM element this directive is attached to.
+     * - `expression`: The JavaScript expression passed to the directive, evaluated to get the changeSet object.
+     * - `value`: Optional parameter to specify the field name. Defaults to the `name` attribute of the element.
+     * - `modifiers`: Array of additional modifiers to customize the behavior. For instance, use 'single' for single-file uploads.
+     * - `evaluate`: Function to evaluate Alpine.js expressions.
+     * - `cleanup`: Function to remove event listeners when element is destroyed or directive is unbound.
+     *
+     * ## Events
+     *
+     * This directive emits a custom event named "csupdate" whenever the changeSet object or the form element is updated.
+     *
+     * ## Usage
+     *
+     * ### Example in HTML
+     *
+     * ```html
+     * <select name="lectureHallId" x-bind-change-set="changeSet">
+     *   <option value="0">Self streaming</option>
+     *   <!-- ... other options ... -->
+     * </select>
+     * ```
+     *
+     * - `changeSet`: The changeSet object you want to bind with the form element.
+     *
+     * ## Modifiers
+     *
+     * - `single`: Use this modifier for file inputs when you want to work with a single file instead of a FileList.
+     * - `int`: Use this modifier to convert the inserted value to integer.
+     * - `float`: Use this modifier to convert the inserted value to float.
+     *
+     * ```html
+     * <input type="file" x-bind-change-set.single="changeSet" />
+     * ```
+     *
+     * ## Notes
+     *
+     * This directive is intended to be used with the existing `ChangeSet` class.
+     * Make sure to import and initialize a `ChangeSet` object in your Alpine.js component
+     * to utilize this directive effectively. The `ChangeSet` class should have implemented
+     * methods such as `patch`, `listen`, `removeListener`, and `get`,
+     * and manage a `DirtyState` object for tracking changes.
+     */
+
+    Alpine.directive("bind-change-set", (el, { expression, value, modifiers }, { evaluate, cleanup }) => {
+        const changeSet = evaluate(expression);
+        const fieldName = value || el.name;
+        const nativeEventName = "csupdate";
+
+        if (el.type === "file") {
+            const isSingle = modifiers.includes("single")
+
+            const changeHandler = (e) => {
+                changeSet.patch(fieldName, isSingle ? e.target.files[0] : e.target.files);
+            };
+
+            const onChangeSetUpdateHandler = (data) => {
+                if (!data[fieldName]) {
+                    el.value = "";
+                }
+                el.dispatchEvent(new CustomEvent(nativeEventName, { detail: data[fieldName] }));
+            };
+
+            changeSet.listen(onChangeSetUpdateHandler);
+            el.addEventListener('change', changeHandler);
+
+            cleanup(() => {
+                changeSet.removeListener(onChangeSetUpdateHandler);
+                el.removeEventListener('change', changeHandler)
+            })
+        } else if (el.type === "checkbox") {
+            const changeHandler = (e) => {
+                changeSet.patch(fieldName, e.target.checked);
+            };
+
+            const onChangeSetUpdateHandler = (data) => {
+                el.checked = !!data[fieldName];
+                el.dispatchEvent(new CustomEvent(nativeEventName, { detail: !!data[fieldName] }));
+            };
+
+            changeSet.listen(onChangeSetUpdateHandler);
+            el.addEventListener('change', changeHandler)
+            el.checked = changeSet.get()[fieldName];
+
+            cleanup(() => {
+                changeSet.removeListener(onChangeSetUpdateHandler);
+                el.removeEventListener('change', changeHandler)
+            })
+        } else  if (el.tagName === "textarea" || textInputTypes.includes(el.type)) {
+            const keyupHandler = (e) => changeSet.patch(fieldName, convert(modifiers, e.target.value));
+
+            const onChangeSetUpdateHandler = (data) => {
+                el.value = `${data[fieldName]}`;
+                el.dispatchEvent(new CustomEvent(nativeEventName, { detail: data[fieldName] }));
+            };
+
+            changeSet.listen(onChangeSetUpdateHandler);
+            el.addEventListener('keyup', keyupHandler)
+            el.value = `${changeSet.get()[fieldName]}`;
+
+            cleanup(() => {
+                changeSet.removeListener(onChangeSetUpdateHandler);
+                el.removeEventListener('keyup', keyupHandler)
+            })
+        } else {
+            const changeHandler = (e) => changeSet.patch(fieldName, convert(modifiers, e.target.value));
+
+            const onChangeSetUpdateHandler = (data) => {
+                el.value = `${data[fieldName]}`;
+                el.dispatchEvent(new CustomEvent(nativeEventName, { detail: data[fieldName] }));
+            };
+
+            changeSet.listen(onChangeSetUpdateHandler);
+            el.addEventListener('change', changeHandler)
+            el.value = `${changeSet.get()[fieldName]}`;
+
+            cleanup(() => {
+                changeSet.removeListener(onChangeSetUpdateHandler);
+                el.removeEventListener('change', changeHandler)
+            })
+        }
+    });
+});
\ No newline at end of file
diff --git a/web/template/admin/admin.gohtml b/web/template/admin/admin.gohtml
index 8e7549b56..72a4ff16c 100755
--- a/web/template/admin/admin.gohtml
+++ b/web/template/admin/admin.gohtml
@@ -4,6 +4,7 @@
     <meta charset="UTF-8">
     <title>{{.IndexData.Branding.Title}} | Administration</title>
     {{template "headImports" .IndexData.VersionTag}}
+    <script src="/static/assets/init-admin.js"></script>
     <script src="/static/assets/ts-dist/admin.bundle.js?v={{.IndexData.VersionTag}}"></script>
 </head>
 <body>
diff --git a/web/template/partial/course/manage/course-lecture-management.gohtml b/web/template/partial/course/manage/course-lecture-management.gohtml
index 268dc1e33..1c0c38e1c 100644
--- a/web/template/partial/course/manage/course-lecture-management.gohtml
+++ b/web/template/partial/course/manage/course-lecture-management.gohtml
@@ -59,9 +59,8 @@
         </div>
 
         {{- /* streams: */ -}}
-        <div x-data="{ lectures: [], marked: [] }"
-             x-on:newlectures.window="e => {lectures = e.detail.lectures; marked = e.detail.markedIds; }"
-             x-init="$nextTick(() => admin.LectureList.init({{toJson ($course.AdminJson $lectureHalls)}}))">
+        <div x-data="{ lectureList: new admin.LectureList({{$course.Model.ID}}), lectures: [], marked: [] }"
+             x-on:newlectures.window="e => {lectures = e.detail.lectures; marked = e.detail.markedIds; }">
             <ul class="flex" :class="sortAsc ? 'flex-col' : 'flex-col-reverse'">
                 <template x-for="lecture in lectures" :key="lecture.lectureId">
                     {{template "lecture-management-card" .}}
diff --git a/web/template/partial/course/manage/lecture-management-card.gohtml b/web/template/partial/course/manage/lecture-management-card.gohtml
index c0b8a831a..6046fc044 100644
--- a/web/template/partial/course/manage/lecture-management-card.gohtml
+++ b/web/template/partial/course/manage/lecture-management-card.gohtml
@@ -6,49 +6,50 @@
     {{$ingestBase := .IngestBase}}
     {{$lectureHalls := .LectureHalls}}
 
-    <li :id="`lecture-${lecture.lectureId}`"
-        x-show="!filterPast || !lecture.isPast"
-        :key="lecture.lectureId"
+    <li x-data="admin.lectureEditor(lecture)"
+        x-show="!filterPast || !lectureData.isPast"
+        :id="`lecture-${lectureData.lectureId}`"
+        :key="lectureData.lectureId"
         class="w-full mb-4 relative bg-white dark:bg-gray-800 border dark:border-0 rounded shadow">
-        <div class="border-t-2 flex justify-between mb-2 rounded-t" :class="'border-' + lecture.color">
+        <div class="border-t-2 flex justify-between mb-2 rounded-t" :class="'border-' + lectureData.color">
             <div class="pt-2 px-2 w-full">
                 <div class="text-3 font-semibold flex justify-start items-center">
-                    <input @change="$event.target.checked ? selectedLectures.push({ id: lecture.lectureId, isPast: lecture.isPast }) : (selectedLectures = selectedLectures.filter(({id}) => id != lecture.lectureId))"
+                    <input @change="$event.target.checked ? selectedLectures.push({ id: lectureData.lectureId, isPast: lectureData.isPast }) : (selectedLectures = selectedLectures.filter(({id}) => id != lectureData.lectureId))"
                            class="w-auto mr-2" type="checkbox"/>
-                    <div x-show="marked.includes(lecture.lectureId)" class="rounded-full bg-green-400 dark:bg-green-600 w-11 h-4 mr-2 text-center text-xs inline-block">
+                    <div x-show="marked.includes(lectureData.lectureId)" class="rounded-full bg-green-400 dark:bg-green-600 w-11 h-4 mr-2 text-center text-xs inline-block">
                         NEW
                     </div>
-                    <a :href="`/w/${lecture.courseSlug}/${lecture.lectureId}`"><span
-                                x-text="lecture.startDateFormatted()"></span> <i class="fas fa-external-link"></i></a>
+                    <a :href="`/w/${lectureData.courseSlug}/${lectureData.lectureId}`"><span
+                                x-text="lectureData.startDateFormatted"></span> <i class="fas fa-external-link"></i></a>
                 </div>
                 <div class="text-3 font-sans ml-6" x-data="{ showKeys: false }">
-                    <span x-text="lecture.startTimeFormatted()"></span>
+                    <span x-text="lectureData.startTimeFormatted"></span>
                     -
-                    <span x-text="lecture.endTimeFormatted()"></span>
+                    <span x-text="lectureData.endTimeFormatted"></span>
                     <i class="ml-2 fas fa-location-pin text-5"></i>
-                    <span x-text="lecture.lectureHallName" class="text-5"></span>
-                    <button @click="showKeys=!showKeys" x-show="lecture.lectureHallId===0 && !lecture.isPast"
+                    <span x-text="lectureData.lectureHallName" class="text-5"></span>
+                    <button @click="showKeys=!showKeys" x-show="lectureData.lectureHallId===0 && !lectureData.isPast"
                             class="bg-indigo-500 rounded px-2 py-0 font-semibold">
                         <i class="fas fa-key mr-2"></i><span x-text="showKeys?'Hide Keys':'Show Keys'"></span></button>
                     <p x-show="showKeys" class="mt-1 ml-2 p-2 border dark:border-gray-600 rounded w-full">
                         <span class="font-semibold">Stream Server:</span>
-                        <span x-text="'{{$ingestBase}}{{$course.Slug}}-'+ lecture.lectureId +'?secret=' + lecture.streamKey"></span>
+                        <span x-text="'{{$ingestBase}}{{$course.Slug}}-'+ lectureData.lectureId +'?secret=' + lectureData.streamKey"></span>
                         <i class="fas fa-clipboard hover:text-purple-500"
-                           @click="() => global.copyToClipboard('{{$ingestBase}}{{$course.Slug}}-'+ lecture.lectureId +'?secret=' + lecture.streamKey)"></i>
+                           @click="() => global.copyToClipboard('{{$ingestBase}}{{$course.Slug}}-'+ lectureData.lectureId +'?secret=' + lectureData.streamKey)"></i>
                         <br>
                         <span class="font-semibold">Stream Key:</span>
-                        <span x-text="lecture.courseSlug + '-' + lecture.lectureId"></span>
+                        <span x-text="lectureData.courseSlug + '-' + lectureData.lectureId"></span>
                         <i class="fas fa-clipboard hover:text-purple-500"
-                           @click="() => global.copyToClipboard(lecture.courseSlug + '-' + lecture.lectureId)"></i>
+                           @click="() => global.copyToClipboard(lectureData.courseSlug + '-' + lectureData.lectureId)"></i>
                         <br>
                         {{if ne $user.Role 1}}
                             <span>Want to stream from a lecture hall instead? Please reach out to the RBG.</span>
                         {{end}}
                     </p>
                 </div>
-                <div x-show="lecture.isConverting" class="p-4" x-init="lecture.keepProgressesUpdated()">
+                <div x-show="lectureData.isConverting" class="p-4" x-init="keepProgressesUpdated()">
                     <span class="text-1 font-semibold text-sm">Converting:</span>
-                    <template x-for="p in lecture.transcodingProgresses">
+                    <template x-for="p in lectureData.transcodingProgresses">
                         <div class="w-full ml-2">
                             <div class="font-semibold text-sm text-4" x-text="`${p.version} (${p.progress}%)`"></div>
                             <div class="w-full bg-gray-200 rounded-full h-1.5 mb-1 dark:bg-gray-700">
@@ -58,17 +59,17 @@
                         </div>
                     </template>
                 </div>
-                <div x-show="lecture.uiEditMode == 0"
+                <div x-show="uiEditMode == 0"
                      class="text-2 font-sans ml-6 mt-2 pl-3 border-l-4 border-gray-500 dark:border-white">
-                    <span class="italic text-gray-400 dark:text-gray-600" x-show="lecture.name.length === 0">Unknown Name</span>
-                    <span class="text-gray-700 dark:text-white" x-show="lecture.name.length > 0"
-                          x-text="lecture.name"></span>
+                    <span class="italic text-gray-400 dark:text-gray-600" x-show="lectureData.name.length === 0">Unknown Name</span>
+                    <span class="text-gray-700 dark:text-white" x-show="lectureData.name.length > 0"
+                          x-text="lectureData.name"></span>
                 </div>
             </div>
 
             <div class="flex items-center justify-end h-8">
                 <!-- generate subtitles button -->
-                <template x-if="lecture.isRecording">
+                <template x-if="lectureData.isRecording">
                     <div class="relative mr-2" x-data="{'showLanguageSelect': false}">
                         <button @click="showLanguageSelect = !showLanguageSelect"
                                 @click.outside="showLanguageSelect = false"
@@ -82,13 +83,13 @@
                                 <span class="text-xs text-3">Generate subtitles</span>
                             </div>
                             <div class="pt-3">
-                                <button @click="await admin.requestSubtitles(lecture.lectureId, 'de')"
+                                <button @click="await admin.requestSubtitles(lectureData.lectureId, 'de')"
                                         class="flex items-center justify-start
                                     py-1 px-2 text-3 w-full hover:bg-gray-200 hover:dark:bg-gray-600">
                                     <i class="text-lg w-8">🇩🇪</i>
                                     <span class="font-light text-sm ">German</span>
                                 </button>
-                                <button @click="await admin.requestSubtitles(lecture.lectureId, 'en')"
+                                <button @click="await admin.requestSubtitles(lectureData.lectureId, 'en')"
                                         class="flex items-center justify-start
                                     py-1 px-2 text-3 w-full hover:bg-gray-200 hover:dark:bg-gray-600">
                                     <i class="text-lg w-8">🇬🇧</i>
@@ -98,7 +99,7 @@
                         </div>
                     </div>
                 </template>
-                <template x-if="lecture.isRecording && lecture.downloadableVods && lecture.downloadableVods.length > 0">
+                <template x-if="lectureData.isRecording && lectureData.downloadableVods && lectureData.downloadableVods.length > 0">
                     <span class="relative mr-2" x-data="{expand:false}">
                         <button @click="expand=!expand" type="button"
                                 id="menu-button" aria-expanded="true"
@@ -113,7 +114,7 @@
                               aria-labelledby="menu-button" tabindex="-1">
                             <span class="py-1" role="none">
                             <!-- Active: "bg-gray-100 text-gray-900", Not Active: "text-gray-700" -->
-                                <template x-for="file in lecture.getDownloads()">
+                                <template x-for="file in lectureData.downloadableVods">
                                     <a :href="file.DownloadURL" download
                                        class="hover:bg-gray-100 text-3 dark:hover:bg-gray-600
                                     block px-4 py-2 text-sm first:rounded-t-md last:rounded-b-md"
@@ -124,22 +125,22 @@
                         </span>
                     </span>
                 </template>
-                <div x-show="lecture.isRecording">
+                <div x-show="lectureData.isRecording">
                     <div class="font-semibold border-success w-auto inline-block px-4 text-1 flex items-center rounded-b-lg h-8 text-white dark:text-black"
-                         :class="lecture.private?'bg-gray-500':'bg-success'">
-                        <i title="This lecture is hidden" x-show="lecture.private" class="fas fa-eye-slash"></i>
-                        <span x-show="!lecture.isConverting">VoD</span>
+                         :class="lectureData.private?'bg-gray-500':'bg-success'">
+                        <i title="This lecture is hidden" x-show="lectureData.private" class="fas fa-eye-slash"></i>
+                        <span x-show="!lectureData.isConverting">VoD</span>
                     </div>
                 </div>
-                <div x-show="lecture.isLiveNow"
+                <div x-show="lectureData.isLiveNow"
                      class="font-semibold bg-danger border-danger w-auto inline-block px-4 text-1 flex items-center rounded-b-lg h-8 text-white dark:text-black">
                     Live
                 </div>
-                <div x-show="!lecture.isRecording && lecture.isPast"
+                <div x-show="!lectureData.isRecording && lectureData.isPast"
                      class="font-semibold bg-warn border-warn w-auto inline-block px-4 text-1 flex items-center rounded-b-lg h-8 text-white dark:text-black">
                     Past
                 </div>
-                <div x-show="!lecture.isPast && !lecture.isLiveNow && !lecture.isRecording"
+                <div x-show="!lectureData.isPast && !lectureData.isLiveNow && !lectureData.isRecording"
                      class="font-semibold bg-info border-info w-auto inline-block px-4 text-1 flex items-center rounded-b-lg h-8 text-white dark:text-black">
                     Scheduled
                 </div>
@@ -184,29 +185,29 @@
                             class="absolute left-0 mt-2 w-36 bg-white dark:bg-gray-800 border border-black rounded shadow-md overflow-hidden"
                     >
                         <div>
-                            <button @click="lecture.startSingleEdit(); closeMoreDropdown();"
+                            <button @click="startSingleEdit(); closeMoreDropdown();"
                                     class="block w-full px-4 py-2 text-left text-sm text-gray-400 dark:hover:text-gray-500 hover:text-gray-300">
                                 Edit Lecture
                             </button>
-                            <button @click="lecture.deleteLecture(); closeMoreDropdown();"
+                            <button @click="deleteLecture(); closeMoreDropdown();"
                                     class="block w-full px-4 py-2 text-left text-sm text-red-400 dark:hover:text-red-500 hover:text-red-300">
                                 Delete Lecture
                             </button>
-                            <button x-text="lecture.private?'Make public': 'Make private'"
+                            <button x-text="lectureData.private?'Make public': 'Make private'"
                                     class="block w-full px-4 py-2 text-left text-sm"
-                                    @click="lecture.toggleVisibility(); closeMoreDropdown()"
-                                    x-show="lecture.isRecording"
-                                    :class="lecture.private?'text-gray-400 dark:hover:text-gray-500 hover:text-gray-300':'text-red-400 dark:hover:text-red-500 hover:text-red-300'">
+                                    @click="toggleVisibility(); closeMoreDropdown()"
+                                    x-show="lectureData.isRecording"
+                                    :class="lectureData.private?'text-gray-400 dark:hover:text-gray-500 hover:text-gray-300':'text-red-400 dark:hover:text-red-500 hover:text-red-300'">
                                 Make private
                             </button>
                         </div>
-                        <template x-if="lecture.seriesIdentifier.length > 0">
+                        <template x-if="lectureData.seriesIdentifier.length > 0">
                             <div class="border-t border-black">
-                                <button @click="lecture.startSeriesEdit(); closeMoreDropdown();"
+                                <button @click="startSeriesEdit(); closeMoreDropdown();"
                                         class="block w-full px-4 py-2 text-left text-sm text-gray-400 dark:hover:text-gray-500 hover:text-gray-300">
                                     Edit Series
                                 </button>
-                                <button @click="lecture.deleteLectureSeries(); closeMoreDropdown();"
+                                <button @click="deleteLectureSeries(); closeMoreDropdown();"
                                         class="block w-full px-4 py-2 text-left text-sm text-red-400 dark:hover:text-red-500 hover:text-red-300">
                                     Delete Series
                                 </button>
@@ -217,87 +218,42 @@
             </div>
         </div>
 
-        <button x-show="lecture.uiEditMode == 0"
-                @click="lecture.startSingleEdit(); closeMoreDropdown();"
+        <button x-show="uiEditMode == 0"
+                @click="startSingleEdit()"
                 class="bg-gray-100 dark:bg-gray-900 w-full py-2 mt-2 rounded-b">
             <span class="text-gray-700 dark:text-gray-300">Edit Lecture</span>
         </button>
 
-        <div x-show="lecture.uiEditMode > 0" class="grid gap-y-4 p-4">
+        <div x-show="uiEditMode > 0" class="grid gap-y-4 p-4">
             <article class="grid gap-2 w-full">
                 <header class="border-b dark:border-gray-600 w-full">
                     <h6 class="text-sm text-5 font-light">Media</h6>
                 </header>
-                <article x-data="{ id: `lecture_media_${lecture.lectureId}`, progress: { 'COMB': 0, 'PRES': 0, 'CAM': 0 } }"
-                         @voduploadprogressedit.window="({ detail: { type, progress, lectureId } }) => { if (lectureId === lecture.lectureId) { progress[type] = progress; }}"
+                <article x-data="{ id: `lecture_media_${lectureData.lectureId}`, progress: { 'COMB': 0, 'PRES': 0, 'CAM': 0 } }"
+                         @voduploadprogressedit.window="({ detail: { type, progress, lectureId } }) => { if (lectureId === lectureData.lectureId) { progress[type] = progress; }}"
                          class="w-full flex justify-center flex-wrap">
-                    <div x-data="{ inputId: `${id}_comb` }"
-                         x-on:click="document.querySelector(`#${inputId}`).click()"
-                         class="h-40 w-[30%] mx-[1.5%] my-2 bg-black/30 dark:bg-black/20 rounded relative max-xl:min-w-full cursor-pointer text-white overflow-hidden"
-                    >
-                        <div class="absolute bg-cover bottom-0 left-0 right-0 top-0 brightness-75" :style="`background-image: url('/api/stream/${lecture.lectureId}/thumbs/vod?type=COMB')`"></div>
-                        <div class="absolute text-sm bottom-3 left-3 rounded-full bg-black/20 inline-block px-2">
-                            Combined Video
-                        </div>
-                        <div class="w-full h-full flex justify-center items-center drop-shadow-[2px_4px_6px_black]">
-                            <span x-show="!lecture.newCombinedVideo">Click to upload new Video</span>
-                            <template x-if="lecture.newCombinedVideo !== null">
-                                <span class="text-green-400" x-text="lecture.newCombinedVideo.name"></span>
-                            </template>
-                        </div>
-                        <div x-on:click="() => { $event.stopPropagation(); lecture.newCombinedVideo = null; lecture.updateIsDirty(); }" x-show="lecture.newCombinedVideo" class="absolute text-sm top-3 right-3 rounded-full bg-black/20 inline-block px-3">
-                            <i class="fa fa-xmark text-3"></i>
-                        </div>
-                        <input :id="inputId" class="hidden" type="file" accept="video/mp4" x-on:change="() => { lecture.newCombinedVideo = $event.target.files[0]; lecture.updateIsDirty(); }" />
-                        <div x-show="lecture.isSaving && lecture.newCombinedVideo !== null" class="absolute top-0 left-0 bottom-0 right-0 bg-black/[.8] flex justify-center items-center font-bold text-2xl">
-                            <span x-text="`${progress.COMB}%`"></span>
-                        </div>
-                    </div>
-                    <div x-data="{ inputId: `${id}_pres` }"
-                         x-on:click="document.querySelector(`#${inputId}`).click()"
-                         class="h-40 w-[30%] mx-[1.5%] my-2 bg-black/30 dark:bg-black/20 rounded relative max-xl:min-w-full cursor-pointer text-white overflow-hidden"
-                    >
-                        <div class="absolute bg-cover bottom-0 left-0 right-0 top-0 brightness-75" :style="`background-image: url('/api/stream/${lecture.lectureId}/thumbs/vod?type=PRES')`"></div>
-                        <div class="absolute text-sm bottom-3 left-3 rounded-full bg-black/20 inline-block px-2">
-                            Presentation Video
-                        </div>
-                        <div class="w-full h-full flex justify-center items-center p-2 drop-shadow-[2px_4px_6px_black]">
-                            <span x-show="!lecture.newPresentationVideo">Click to upload new Video</span>
-                            <template x-if="lecture.newPresentationVideo !== null">
-                                <span class="text-green-400" x-text="lecture.newPresentationVideo.name"></span>
-                            </template>
-                        </div>
-                        <div x-on:click="() => { $event.stopPropagation(); lecture.newPresentationVideo = null; lecture.updateIsDirty(); }" x-show="lecture.newPresentationVideo" class="absolute text-sm top-3 right-3 rounded-full bg-black/20 inline-block px-3">
-                            <i class="fa fa-xmark text-3"></i>
-                        </div>
-                        <input :id="inputId" class="hidden" type="file" accept="video/mp4" x-on:change="() => { lecture.newPresentationVideo = $event.target.files[0]; lecture.updateIsDirty(); }" />
-                        <div x-show="lecture.isSaving && lecture.newPresentationVideo !== null" class="absolute top-0 left-0 bottom-0 right-0 bg-black/[.8] flex justify-center items-center font-bold text-2xl">
-                            <span x-text="`${progress.PRES}%`"></span>
-                        </div>
-                    </div>
-                    <div
-                            x-data="{ inputId: `${id}_cam` }"
-                            x-on:click="document.querySelector(`#${inputId}`).click()"
-                            class="h-40 w-[30%] mx-[1.5%] my-2 bg-black/30 dark:bg-black/20 rounded relative max-xl:min-w-full cursor-pointer text-white overflow-hidden"
-                    >
-                        <div class="absolute bg-cover bottom-0 left-0 right-0 top-0 brightness-75" :style="`background-image: url('/api/stream/${lecture.lectureId}/thumbs/vod?type=CAM')`"></div>
-                        <div class="absolute text-sm bottom-3 left-3 rounded-full bg-black/20 inline-block px-2">
-                            Camera Video
-                        </div>
-                        <div class="w-full h-full flex justify-center items-center p-2 drop-shadow-[2px_4px_6px_black]">
-                            <span x-show="!lecture.newCameraVideo">Click to upload new Video</span>
-                            <template x-if="lecture.newCameraVideo !== null">
-                                <span class="text-green-400" x-text="lecture.newCameraVideo.name"></span>
-                            </template>
-                        </div>
-                        <div x-on:click="() => { $event.stopPropagation(); lecture.newCameraVideo = null; lecture.updateIsDirty(); }" x-show="lecture.newCameraVideo" class="absolute text-sm top-3 right-3 rounded-full bg-black/20 inline-block px-3">
-                            <i class="fa fa-xmark text-3"></i>
-                        </div>
-                        <input :id="inputId" class="hidden" type="file" accept="video/mp4" x-on:change="() => { lecture.newCameraVideo = $event.target.files[0]; lecture.updateIsDirty(); }" />
-                        <div x-show="lecture.isSaving && lecture.newCameraVideo !== null" class="absolute top-0 left-0 bottom-0 right-0 bg-black/[.8] flex justify-center items-center font-bold text-2xl">
-                            <span x-text="`${progress.CAM}%`"></span>
+                    <template x-for="video in videoFiles" :key="video.info.key">
+                        <div x-data="{ file: getVideoFile(video.info.key) }"
+                             x-on:click="() => document.querySelector(`#${video.inputId}`).click()"
+                             class="h-40 w-[30%] mx-[1.5%] my-2 bg-black/30 dark:bg-black/20 rounded relative max-xl:min-w-full cursor-pointer text-white overflow-hidden"
+                        >
+                            <div class="absolute bg-cover bottom-0 left-0 right-0 top-0 brightness-75" :style="`background-image: url('/api/stream/${lectureData.lectureId}/thumbs/vod?type=${video.info.type}')`"></div>
+                            <div class="absolute text-sm bottom-3 left-3 rounded-full bg-black/20 inline-block px-2" x-text="video.title"></div>
+                            <div class="w-full h-full flex justify-center items-center drop-shadow-[2px_4px_6px_black]">
+                                <span x-show="!file">Click to upload new Video</span>
+                                <template x-if="file !== null">
+                                    <span class="text-green-400" x-text="file.name"></span>
+                                </template>
+                            </div>
+                            <div x-on:click="() => { $event.stopPropagation(); changeSet.patch(video.info.key, null); file = getVideoFile(video.info.key); }" x-show="file" class="absolute text-sm top-3 right-3 rounded-full bg-black/20 inline-block px-3">
+                                <i class="fa fa-xmark text-3"></i>
+                            </div>
+                            <input :id="video.inputId" class="hidden" :name="video.info.key" type="file" accept="video/mp4" x-bind-change-set.single="changeSet" @csupdate="(e) => { file = e.detail; }" />
+                            <div x-show="lectureData.isSaving && file !== null" class="absolute top-0 left-0 bottom-0 right-0 bg-black/[.8] flex justify-center items-center font-bold text-2xl">
+                                <span x-text="`${progress[video.info.type]}%`"></span>
+                            </div>
                         </div>
-                    </div>
+                    </template>
                 </article>
                 <header class="border-b dark:border-gray-600 w-full">
                     <h6 class="text-sm text-5 font-light">Title and Description</h6>
@@ -307,8 +263,7 @@
                     <label :for="id" class="hidden">Lecture Title</label>
                     <input :id="id"
                            class="grow tl-input" type="text"
-                           x-model="lecture.newName"
-                           x-on:keyup="lecture.updateIsDirty()"
+                           x-bind-change-set:name="changeSet"
                            placeholder="Lecture 2: Dark-Patterns I"
                            autocomplete="off">
                 </article>
@@ -317,13 +272,12 @@
                              class="w-full">
                         <label :for="id" class="hidden">Lecture description</label>
                         <textarea :id="id"
-                                  @drop.prevent="(e) => lecture.onFileDrop(e)"
+                                  @drop.prevent="(e) => onAttachmentFileDrop(e)"
                                   @dragover.prevent=""
                                   class="tl-textarea grow"
                                   placeholder="Add a nice description, links, and more. You can use Markdown. Drop files here."
                                   autocomplete="off"
-                                  x-model="lecture.newDescription"
-                                  x-on:keyup="lecture.updateIsDirty()"></textarea>
+                                  x-bind-change-set:description="changeSet"></textarea>
                     </article>
                     <article class="flex justify-center">
                         <span class="text-xs text-3 my-auto">Attach files or URL to files by Drag & Drop in the description field.</span>
@@ -350,7 +304,7 @@
                     </article>
                 </section>
 
-                <div x-show="!lecture.isPast && !lecture.isRecording"
+                <div x-show="!lectureData.isPast && !lectureData.isRecording"
                      class="p-3 border dark:border-gray-600 rounded mt-3">
                     {{if eq $user.Role 1}}
                         <div x-data="{ id: $id('select') }">
@@ -358,15 +312,13 @@
                                 <span>Select Lecture Hall</span>
                                 <select class="text-gray-700 dark:text-gray-300 dark:bg-secondary bg-gray-100 p-2"
                                         :id="id"
-                                        x-on:change="lecture.updateIsDirty()"
-                                        x-model="lecture.newLectureHallId">
+                                        name="lectureHallId"
+                                        x-bind-change-set.int="changeSet">
                                     <option class="text-gray-700 dark:text-gray-300" value="0">
                                         Self streaming
                                     </option>
                                     {{range $lectureHall := $lectureHalls}}
-                                        <option class="text-gray-700 dark:text-gray-300"
-                                                value="{{$lectureHall.Model.ID}}"
-                                                :selected="lecture.lectureHallId === '{{$lectureHall.Model.ID}}'">
+                                        <option class="text-gray-700 dark:text-gray-300" value="{{$lectureHall.Model.ID}}">
                                             {{$lectureHall.Name}}
                                         </option>
                                     {{end}}
@@ -375,10 +327,10 @@
                         </div>
                     {{end}}
                     {{if eq $user.Role 2}}
-                        <div x-show="lecture.newLectureHallId !== '0'">
+                        <div x-show="lectureData.newLectureHallId !== '0'">
                             This lecture will be streamed from <span
                                     class="font-semibold text-white">{{range $lectureHall := $lectureHalls}}<span
-                                        x-show="lecture.lectureHallId === '{{$lectureHall.Model.ID}}'">{{$lectureHall.Name}}</span>{{end}}</span>.
+                                        x-show="lectureData.lectureHallId === '{{$lectureHall.Model.ID}}'">{{$lectureHall.Name}}</span>{{end}}</span>.
                             If you need this changed or want to stream from home (with obs, zoom etc.), please reach
                             out to the RBG.
                         </div>
@@ -386,18 +338,18 @@
                 </div>
             </article>
 
-            <template x-if="lecture.hasAttachments()">
+            <template x-if="lectureData.hasAttachments">
                 <article>
                     <h6 class="text-sm text-5 font-light border-b dark:border-gray-600">Attachments</h6>
                     <ul class="list-disc grid py-2 ml-6">
-                        <template x-for="file in lecture.files">
+                        <template x-for="file in lectureData.files">
                             <template x-if="file.fileType === admin.FileType.attachment">
                                 <li>
                                     <section class="flex items-center">
                                     <span class="text-xs font-semibold text-3 my-auto"
                                           x-text="file.friendlyName"></span>
                                         <button class="px-3"
-                                                @click="lecture.deleteFile(file.id)">
+                                                @click="deleteAttachment(file.id)">
                                             <i class="fa fa-xmark"></i>
                                         </button>
                                     </section>
@@ -408,17 +360,17 @@
                 </article>
             </template>
 
-            <template x-if="lecture.uiEditMode > 0"> <!-- only render if in edit mode to avoid network calls -->
+            <template x-if="uiEditMode > 0"> <!-- only render if in edit mode to avoid network calls -->
                 {{template "editvideosections"}}
             </template>
 
-            <span x-show="lecture.isRecording" class="absolute left-0 bottom-0 p-4">
+            <span x-show="lectureData.isRecording" class="absolute left-0 bottom-0 p-4">
                 <!-- buttons go here -->
             </span>
 
-            <div x-show="lecture.lastErrors.length > 0" class="px-6 py-3 bg-red-400 my-3 rounded">
+            <div x-show="lastErrors.length > 0" class="px-6 py-3 bg-red-400 my-3 rounded">
                 <ul>
-                    <template x-for="error in lecture.lastErrors">
+                    <template x-for="error in lastErrors">
                         <li x-text="error"></li>
                     </template>
                 </ul>
@@ -427,8 +379,7 @@
             <div class="mt-6 flex items-center justify-between">
                 <section class="flex items-center py-1 px-3">
                     <label class="relative inline-flex items-center cursor-pointer">
-                        <input type="checkbox" value="" class="sr-only peer" @change="lecture.updateIsDirty()"
-                               x-model="lecture.newIsChatEnabled">
+                        <input type="checkbox" name="isChatEnabled" class="sr-only peer" x-bind-change-set="changeSet" />
                         <div class="w-11 h-6 bg-gray-200 peer-focus:outline-none peer-focus:ring-4 peer-focus:ring-blue-600
                         dark:peer-focus:ring-indigo-600 rounded-full peer dark:bg-gray-600 peer-checked:after:translate-x-full
                         peer-checked:after:border-white after:content-[''] after:absolute after:top-[2px] after:left-[2px]
@@ -438,15 +389,15 @@
                     </label>
                 </section>
                 <div>
-                    <button :disabled="lecture.isSaving" @click="lecture.discardEdit();"
+                    <button :disabled="isSaving" @click="discardEdit();"
                             class="px-8 py-3 text-2 text-white rounded bg-indigo-500/70 hover:bg-indigo-500/90 dark:bg-indigo-500/10 disabled:opacity-20 dark:hover:bg-indigo-500/20 mr-4">
                         Discard Changes
                     </button>
                     <button
-                            @click="lecture.saveEdit();"
-                            :disabled="!lecture.isDirty || lecture.isSaving"
+                            @click="saveEdit();"
+                            :disabled="!isDirty || isSaving"
                             class="px-8 py-3 text-2 rounded text-white bg-indigo-500 hover:bg-indigo-600 disabled:opacity-20 disabled:hover:bg-indigo-500"
-                            x-text="lecture.isSaving ? 'loading ...' : (lecture.uiEditMode === admin.UIEditMode.single ? 'Save Lecture' : 'Save Series')"
+                            x-text="isSaving ? 'loading ...' : (uiEditMode === admin.UIEditMode.single ? 'Save Lecture' : 'Save Series')"
                     ></button>
                 </div>
             </div>
diff --git a/web/ts/api/admin-lecture-list.ts b/web/ts/api/admin-lecture-list.ts
new file mode 100644
index 000000000..c7f2d6ac9
--- /dev/null
+++ b/web/ts/api/admin-lecture-list.ts
@@ -0,0 +1,307 @@
+import {
+    del,
+    get,
+    patch,
+    post,
+    postFormData,
+    PostFormDataListener,
+    put,
+    uploadFile,
+} from "../utilities/fetch-wrappers";
+import { StatusCodes } from "http-status-codes";
+
+export interface UpdateLectureMetaRequest {
+    name?: string;
+    description?: string;
+    lectureHallId?: number;
+    isChatEnabled?: boolean;
+}
+
+export class LectureFile {
+    readonly id: number;
+    readonly fileType: number;
+    readonly friendlyName: string;
+
+    constructor({ id, fileType, friendlyName }) {
+        this.id = id;
+        this.fileType = fileType;
+        this.friendlyName = friendlyName;
+    }
+}
+
+export interface CreateNewLectureRequest {
+    title: "";
+    lectureHallId: 0;
+    start: "";
+    end: "";
+    isChatEnabled: false;
+    duration: 0; // Duration in Minutes
+    formatedDuration: ""; // Duration in Minutes
+    premiere: false;
+    vodup: false;
+    adHoc: false;
+    recurring: false;
+    recurringInterval: "weekly";
+    eventsCount: 10;
+    recurringDates: [];
+    combFile: [];
+    presFile: [];
+    camFile: [];
+}
+
+export interface TranscodingProgress {
+    version: string;
+    progress: number;
+}
+
+export interface LectureVideoType {
+    key: string;
+    type: string;
+}
+
+export const LectureVideoTypeComb = {
+    key: "newCombinedVideo",
+    type: "COMB",
+} as LectureVideoType;
+
+export const LectureVideoTypePres = {
+    key: "newPresentationVideo",
+    type: "PRES",
+} as LectureVideoType;
+
+export const LectureVideoTypeCam = {
+    key: "newCameraVideo",
+    type: "CAM",
+} as LectureVideoType;
+
+export const LectureVideoTypes = [
+    LectureVideoTypeComb,
+    LectureVideoTypePres,
+    LectureVideoTypeCam,
+] as LectureVideoType[];
+
+export interface Lecture {
+    color: string;
+    courseId: number;
+    courseSlug: string;
+    description: string;
+    downloadableVods: DownloadableVOD[];
+    end: string;
+    files: LectureFile[];
+    hasStats: boolean;
+    isChatEnabled: boolean;
+    isConverting: boolean;
+    isLiveNow: boolean;
+    isPast: boolean;
+    isRecording: boolean;
+    lectureHallId: number;
+    lectureHallName: string;
+    lectureId: number;
+    name: string;
+    private: boolean;
+    seriesIdentifier: string;
+    start: string;
+    streamKey: string;
+    transcodingProgresses: TranscodingProgress[];
+
+    // Clientside computed fields
+    hasAttachments: boolean;
+    startDate: Date;
+    startDateFormatted: string;
+    startTimeFormatted: string;
+    endDate: Date;
+    endDateFormatted: string;
+    endTimeFormatted: string;
+
+    // Clientside pseudo fields
+    newCombinedVideo: File | null;
+    newPresentationVideo: File | null;
+    newCameraVideo: File | null;
+}
+
+export interface DownloadableVOD {
+    FriendlyName: string;
+    DownloadURL: string;
+}
+
+/**
+ * REST API Wrapper for /api/stream/:id/sections
+ */
+export const AdminLectureList = {
+    /**
+     * Fetches all lectures for a course
+     * @param courseId
+     */
+    get: async function (courseId: number): Promise<Lecture[]> {
+        const result = await get(`/api/course/${courseId}/lectures`);
+        return result["streams"];
+    },
+
+    /**
+     * Adds a new lecture to a course.
+     * @param courseId
+     * @param request
+     */
+    add: async function (courseId: number, request: object) {
+        return post(`/api/stream/${courseId}/sections`, request);
+    },
+
+    /**
+     * Updates metadata of a lecture.
+     * @param courseId
+     * @param lectureId
+     * @param request
+     */
+    updateMetadata: async function (courseId: number, lectureId: number, request: UpdateLectureMetaRequest) {
+        const promises = [];
+        if (request.name !== undefined) {
+            promises.push(
+                post(`/api/course/${courseId}/renameLecture/${lectureId}`, {
+                    name: request.name,
+                }),
+            );
+        }
+
+        if (request.description !== undefined) {
+            promises.push(
+                put(`/api/course/${courseId}/updateDescription/${lectureId}`, {
+                    name: request.description,
+                }),
+            );
+        }
+
+        if (request.lectureHallId !== undefined) {
+            promises.push(
+                post("/api/setLectureHall", {
+                    streamIds: [lectureId],
+                    lectureHall: request.lectureHallId,
+                }),
+            );
+        }
+
+        if (request.isChatEnabled !== undefined) {
+            promises.push(
+                patch(`/api/stream/${lectureId}/chat/enabled`, {
+                    lectureId,
+                    isChatEnabled: request.isChatEnabled,
+                }),
+            );
+        }
+
+        const errors = (await Promise.all(promises)).filter((res) => res.status !== StatusCodes.OK);
+        if (errors.length > 0) {
+            console.error(errors);
+            throw Error("Failed to update all data.");
+        }
+    },
+
+    /**
+     * Distributes the lecture metadata of given lecture to all lectures in its series.
+     * @param courseId
+     * @param lectureId
+     */
+    saveSeriesMetadata: async (courseId: number, lectureId: number): Promise<void> => {
+        await post(`/api/course/${courseId}/updateLectureSeries/${lectureId}`);
+    },
+
+    /**
+     * Updates the private state of a lecture.
+     * @param lectureId
+     * @param isPrivate
+     */
+    setPrivate: async (lectureId: number, isPrivate: boolean): Promise<void> => {
+        await patch(`/api/stream/${lectureId}/visibility`, {
+            private: isPrivate,
+        });
+    },
+
+    /**
+     * Uploads a video to a lecture.
+     * @param courseId
+     * @param lectureId
+     * @param videoType
+     * @param file
+     * @param listener
+     */
+    uploadVideo: async (
+        courseId: number,
+        lectureId: number,
+        videoType: string,
+        file: File,
+        listener: PostFormDataListener = {},
+    ) => {
+        await uploadFile(
+            `/api/course/${courseId}/uploadVODMedia?streamID=${lectureId}&videoType=${videoType}`,
+            file,
+            listener,
+        );
+    },
+
+    /**
+     * Upload a file as attachment for a lecture
+     * @param courseId
+     * @param lectureId
+     * @param file
+     * @param listener
+     */
+    uploadAttachmentFile: async (
+        courseId: number,
+        lectureId: number,
+        file: File,
+        listener: PostFormDataListener = {},
+    ) => {
+        return await uploadFile(`/api/stream/${lectureId}/files?type=file`, file, listener);
+    },
+
+    /**
+     * Upload a url as attachment for a lecture
+     * @param courseId
+     * @param lectureId
+     * @param url
+     * @param listener
+     */
+    uploadAttachmentUrl: async (
+        courseId: number,
+        lectureId: number,
+        url: string,
+        listener: PostFormDataListener = {},
+    ) => {
+        const vodUploadFormData = new FormData();
+        vodUploadFormData.append("file_url", url);
+        return postFormData(`/api/stream/${lectureId}/files?type=url`, vodUploadFormData, listener);
+    },
+
+    deleteAttachment: async (courseId: number, lectureId: number, attachmentId: number) => {
+        return del(`/api/stream/${lectureId}/files/${attachmentId}`);
+    },
+
+    /**
+     * Get transcoding progress
+     * @param courseId
+     * @param lectureId
+     * @param version
+     */
+    getTranscodingProgress: async (courseId: number, lectureId: number, version: number): Promise<number> => {
+        return (await fetch(`/api/course/${courseId}/stream/${lectureId}/transcodingProgress?v=${version}`)).json();
+    },
+
+    /**
+     * Deletes a lecture
+     * @param courseId
+     * @param lectureIds
+     */
+    delete: async function (courseId: number, lectureIds: number[]): Promise<Response> {
+        return await post(`/api/course/${courseId}/deleteLectures`, {
+            streamIDs: lectureIds.map((id) => `${id}`),
+        });
+    },
+
+    /**
+     * Delete lecture series of a lecture
+     * @param courseId
+     * @param lectureId
+     */
+    deleteSeries: async function (courseId: number, lectureId: number): Promise<Response> {
+        return await del(`/api/course/${courseId}/deleteLectureSeries/${lectureId}`);
+    },
+};
diff --git a/web/ts/change-set.ts b/web/ts/change-set.ts
new file mode 100644
index 000000000..ff590d7fe
--- /dev/null
+++ b/web/ts/change-set.ts
@@ -0,0 +1,223 @@
+export interface DirtyState {
+    isDirty: boolean;
+    dirtyKeys: string[];
+}
+
+/**
+ * ## ChangeSet Class
+ *
+ * The `ChangeSet` class is designed to manage and track changes to a state object.
+ * It provides an encapsulated way of observing state changes, committing them,
+ * or rolling them back. Essentially, it helps in maintaining two versions of a state:
+ * one that represents the current, committed state and another that captures all the changes (dirty state).
+ *
+ * ### Features
+ * - **DirtyState**: Utilizes a `DirtyState` object to indicate if the state is dirty (modified but not committed)
+ *   and which keys in the state object are dirty.
+ * - **Custom Comparators**: Optionally, you can pass in a custom comparator function to determine how to compare state objects.
+ * - **Event Subscriptions**: Offers an API for listening to changes in the state.
+ *
+ * ### Example Usage
+ * ```typescript
+ * const myState = { key1: 'value1', key2: 'value2' };
+ * const changeSet = new ChangeSet(myState);
+ *
+ * changeSet.listen((changeState, dirtyState) => {
+ *   console.log("Changed State:", changeState);
+ *   console.log("Is Dirty:", dirtyState.isDirty);
+ * });
+ *
+ * changeSet.patch('key1', 'new_value1');
+ * ```
+ *
+ * ### Methods
+ * - `listen(onUpdate)`: Subscribe to state changes.
+ * - `removeListener(onUpdate)`: Unsubscribe from state changes.
+ * - `get()`: Get the current uncommitted state.
+ * - `set(val)`: Set the change state.
+ * - `patch(key, val, options)`: Patch a specific key in the state object.
+ * - `updateState(state)`: Update the state object, and reconcile it with the change state.
+ * - `commit(options)`: Commit the change state, making it the new committed state.
+ * - `reset()`: Reset the change state back to the last committed state.
+ * - `isDirty()`: Check if the state has changes that are not yet committed.
+ * - `changedKeys()`: Get the keys that have uncommitted changes.
+ *
+ * ### Alpine.js `bind-change-set` Directive Example
+ * The `ChangeSet` class seamlessly integrates with Alpine.js through the `bind-change-set` directive.
+ * For example, to bind a text input element to a `ChangeSet` instance, you can use the following HTML snippet:
+ *
+ * ```html
+ * <input type="text" name="firstName" x-bind-change-set="changeSet">
+ * ```
+ *
+ * This makes it a useful utility for handling state changes in a predictable way.
+ */
+export class ChangeSet<T> {
+    private state: T;
+    private changeState: T;
+    private readonly comparator?: LectureComparator<T>;
+    private onUpdate: ((changeState: T, dirtyState: DirtyState) => void)[];
+
+    constructor(
+        state: T,
+        comparator?: (key: string, a: T, b: T) => boolean,
+        onUpdate?: (changeState: T, dirtyState: DirtyState) => void,
+    ) {
+        this.state = state;
+        this.onUpdate = onUpdate ? [onUpdate] : [];
+        this.comparator = comparator;
+        this.reset();
+    }
+
+    /**
+     * Add listener to receive change set updates
+     * @param onUpdate
+     */
+    listen(onUpdate: (changeState: T, dirtyState: DirtyState) => void) {
+        this.onUpdate.push(onUpdate);
+    }
+
+    /**
+     * Remove listener from change set.
+     * @param onUpdate
+     */
+    removeListener(onUpdate: (changeState: T, dirtyState: DirtyState) => void) {
+        this.onUpdate = this.onUpdate.filter((o) => o !== onUpdate);
+    }
+
+    /**
+     * Returns the current uncommitted change state.
+     */
+    get(): T {
+        return this.changeState;
+    }
+
+    /**
+     * Sets the change state.
+     * @param val
+     */
+    set(val: T) {
+        this.changeState = { ...val };
+        this.dispatchUpdate();
+    }
+
+    /**
+     * Patches a key with a new value. This makes the state dirty.
+     * @param key
+     * @param val
+     * @param isCommitted if true, the data will be passed also to the state, and won't make the model dirty.
+     */
+    /* eslint-disable @typescript-eslint/no-explicit-any */
+    patch(key: string, val: any, { isCommitted = false }: { isCommitted?: boolean } = {}) {
+        this.changeState = { ...this.changeState, [key]: val };
+        if (isCommitted) {
+            this.state = { ...this.state, [key]: val };
+        }
+        this.dispatchUpdate();
+    }
+
+    /**
+     * Updates the state. Also updates all keys that are not dirty on the change-state, so they remain "undirty".
+     * @param state
+     */
+    updateState(state: T) {
+        const changedKeys = this.changedKeys();
+        this.state = { ...state };
+
+        for (const key of Object.keys(this.state)) {
+            if (!changedKeys.includes(key)) {
+                this.changeState[key] = this.state[key];
+            }
+        }
+
+        this.dispatchUpdate();
+    }
+
+    /**
+     * Commits the change state to the state. State is updated to the latest change state afterwards.
+     * @param discardKeys List of keys that should be discarded and not committed.
+     */
+    commit({ discardKeys = [] }: { discardKeys?: string[] } = {}): void {
+        for (const key in discardKeys) {
+            this.changeState[key] = this.state[key];
+        }
+        this.state = { ...this.changeState };
+        this.dispatchUpdate();
+    }
+
+    /**
+     * Resets the change state to the state. Change state is the most current state afterwards.
+     */
+    reset(): void {
+        this.changeState = { ...this.state };
+        this.dispatchUpdate();
+    }
+
+    /**
+     * A flag that indicated whether the change state is the same then the state or not.
+     */
+    isDirty(): boolean {
+        for (const key of Object.keys(this.state)) {
+            if (this.keyChanged(key)) {
+                return true;
+            }
+        }
+        return false;
+    }
+
+    /**
+     * Returns the keys that are not the same between the state and the change state.
+     */
+    changedKeys(): string[] {
+        const res = [];
+        for (const key of Object.keys(this.state)) {
+            if (this.keyChanged(key)) {
+                res.push(key);
+            }
+        }
+        return res;
+    }
+
+    /**
+     * Checks if a specific key's value is different on the state and the change state.
+     * @param key Key that should be checked
+     */
+    keyChanged(key: string): boolean {
+        // Check with custom comparator if set
+        if (this.comparator !== undefined) {
+            const result = this.comparator(key, this.state, this.changeState);
+            if (result !== null) {
+                return result;
+            }
+        }
+
+        // else just check if equiv
+        return this.state[key] !== this.changeState[key];
+    }
+
+    /**
+     * Executes all onUpdate listeners
+     */
+    dispatchUpdate() {
+        if (this.onUpdate.length > 0) {
+            const dirtyKeys = this.changedKeys();
+            for (const onUpdate of this.onUpdate) {
+                onUpdate(this.changeState, {
+                    dirtyKeys,
+                    isDirty: dirtyKeys.length > 0,
+                });
+            }
+        }
+    }
+}
+
+export type LectureComparator<T> = (key: string, a: T, b: T) => boolean | null;
+
+export function ignoreKeys<T>(list: string[]): LectureComparator<T> {
+    return (key: string, a, b) => {
+        if (list.includes(key)) {
+            return false;
+        }
+        return null;
+    };
+}
diff --git a/web/ts/data-store/admin-lecture-list.ts b/web/ts/data-store/admin-lecture-list.ts
new file mode 100644
index 000000000..077a71984
--- /dev/null
+++ b/web/ts/data-store/admin-lecture-list.ts
@@ -0,0 +1,179 @@
+import { StreamableMapProvider } from "./provider";
+import { AdminLectureList, Lecture, LectureFile, UpdateLectureMetaRequest } from "../api/admin-lecture-list";
+import { FileType } from "../edit-course";
+import { UploadFileListener } from "../global";
+
+const dateFormatOptions: Intl.DateTimeFormatOptions = {
+    weekday: "long",
+    year: "numeric",
+    month: "short",
+    day: "2-digit",
+};
+const timeFormatOptions: Intl.DateTimeFormatOptions = {
+    hour: "2-digit",
+    minute: "2-digit",
+};
+
+export interface UpdateMetaProps {
+    payload: UpdateLectureMetaRequest;
+    options?: {
+        saveSeries?: boolean;
+    };
+}
+
+export class AdminLectureListProvider extends StreamableMapProvider<number, Lecture[]> {
+    protected async fetcher(courseId: number): Promise<Lecture[]> {
+        const result = await AdminLectureList.get(courseId);
+        return result.map((s) => {
+            s.hasAttachments = (s.files || []).some((f) => f.fileType === FileType.attachment);
+
+            s.startDate = new Date(s.start);
+            s.startDateFormatted = s.startDate.toLocaleDateString("en-US", dateFormatOptions);
+            s.startTimeFormatted = s.startDate.toLocaleTimeString("en-US", timeFormatOptions);
+
+            s.endDate = new Date(s.end);
+            s.endDateFormatted = s.endDate.toLocaleDateString("en-US", dateFormatOptions);
+            s.endTimeFormatted = s.endDate.toLocaleTimeString("en-US", timeFormatOptions);
+
+            s.newCombinedVideo = null;
+            s.newPresentationVideo = null;
+            s.newCameraVideo = null;
+
+            return s;
+        });
+    }
+
+    async add(courseId: number, lecture: Lecture): Promise<void> {
+        await AdminLectureList.add(courseId, lecture);
+        await this.fetch(courseId, true);
+        await this.triggerUpdate(courseId);
+    }
+
+    async setPrivate(courseId: number, lectureId: number, isPrivate: boolean) {
+        await AdminLectureList.setPrivate(lectureId, isPrivate);
+        this.data[courseId] = (await this.getData(courseId)).map((s) => {
+            if (s.lectureId !== lectureId) {
+                return s;
+            }
+            return {
+                ...s,
+                private: !s.private,
+            };
+        });
+        await this.triggerUpdate(courseId);
+    }
+
+    async delete(courseId: number, lectureIds: number[]) {
+        await AdminLectureList.delete(courseId, lectureIds);
+        this.data[courseId] = (await this.getData(courseId)).filter((s) => !lectureIds.includes(s.lectureId));
+        await this.triggerUpdate(courseId);
+    }
+
+    async deleteSeries(courseId: number, lectureId: number) {
+        await AdminLectureList.deleteSeries(courseId, lectureId);
+
+        const lectures = await this.getData(courseId);
+        const seriesIdentifier = lectures.find((l) => l.lectureId === lectureId)?.seriesIdentifier ?? null;
+        const lectureIds = lectures.filter((l) => l.seriesIdentifier === seriesIdentifier).map((l) => l.lectureId);
+
+        this.data[courseId] = lectures.filter((s) => !lectureIds.includes(s.lectureId));
+        await this.triggerUpdate(courseId);
+    }
+
+    async updateMeta(courseId: number, lectureId: number, props: UpdateMetaProps) {
+        const updateSeries = props?.options?.saveSeries === true;
+        const seriesIdentifier =
+            (await this.getData(courseId)).find((l) => l.lectureId === lectureId)?.seriesIdentifier ?? null;
+
+        await AdminLectureList.updateMetadata(courseId, lectureId, props.payload);
+        if (updateSeries) {
+            await AdminLectureList.saveSeriesMetadata(courseId, lectureId);
+        }
+
+        this.data[courseId] = (await this.getData(courseId)).map((s) => {
+            const isLecture = s.lectureId === lectureId;
+            const isInLectureSeries = s.seriesIdentifier === seriesIdentifier;
+
+            if (isLecture || (updateSeries && isInLectureSeries)) {
+                s = {
+                    ...s,
+                };
+
+                // Patch updated keys in local data
+                for (const requestKey in props.payload) {
+                    const val = props.payload[requestKey];
+                    if (val !== undefined) {
+                        s[requestKey] = val;
+                    }
+                }
+            }
+            return s;
+        });
+        await this.triggerUpdate(courseId);
+    }
+
+    async uploadAttachmentFile(courseId: number, lectureId: number, file: File) {
+        const res = await AdminLectureList.uploadAttachmentFile(courseId, lectureId, file);
+        const newFile = new LectureFile({
+            id: JSON.parse(res.responseText),
+            fileType: 2,
+            friendlyName: file.name,
+        });
+
+        this.data[courseId] = (await this.getData(courseId)).map((s) => {
+            if (s.lectureId === lectureId) {
+                return {
+                    ...s,
+                    files: [...s.files, newFile],
+                };
+            }
+            return s;
+        });
+        await this.triggerUpdate(courseId);
+    }
+
+    async uploadAttachmentUrl(courseId: number, lectureId: number, url: string) {
+        const res = await AdminLectureList.uploadAttachmentUrl(courseId, lectureId, url);
+        const newFile = new LectureFile({
+            id: JSON.parse(res.responseText),
+            fileType: 2,
+            friendlyName: url.substring(url.lastIndexOf("/") + 1),
+        });
+
+        this.data[courseId] = (await this.getData(courseId)).map((s) => {
+            if (s.lectureId === lectureId) {
+                return {
+                    ...s,
+                    files: [...s.files, newFile],
+                };
+            }
+            return s;
+        });
+        await this.triggerUpdate(courseId);
+    }
+
+    async deleteAttachment(courseId: number, lectureId: number, attachmentId: number) {
+        await AdminLectureList.deleteAttachment(courseId, lectureId, attachmentId);
+
+        this.data[courseId] = (await this.getData(courseId)).map((s) => {
+            if (s.lectureId === lectureId) {
+                return {
+                    ...s,
+                    files: [...s.files.filter((a) => a.id !== attachmentId)],
+                };
+            }
+            return s;
+        });
+        await this.triggerUpdate(courseId);
+    }
+
+    async uploadVideo(
+        courseId: number,
+        lectureId: number,
+        videoType: string,
+        file: File,
+        listener: UploadFileListener = {},
+    ) {
+        await AdminLectureList.uploadVideo(courseId, lectureId, videoType, file, listener);
+    }
+}
diff --git a/web/ts/data-store/data-store.ts b/web/ts/data-store/data-store.ts
index 381f2efc4..39890a666 100644
--- a/web/ts/data-store/data-store.ts
+++ b/web/ts/data-store/data-store.ts
@@ -1,9 +1,13 @@
 import { VideoSectionProvider } from "./video-sections";
 import { BookmarksProvider } from "./bookmarks";
 import { StreamPlaylistProvider } from "./stream-playlist";
+import { AdminLectureListProvider } from "./admin-lecture-list";
 
 export abstract class DataStore {
     static bookmarks: BookmarksProvider = new BookmarksProvider();
     static videoSections: VideoSectionProvider = new VideoSectionProvider();
     static streamPlaylist: StreamPlaylistProvider = new StreamPlaylistProvider();
+
+    // Admin Data-Stores
+    static adminLectureList: AdminLectureListProvider = new AdminLectureListProvider();
 }
diff --git a/web/ts/edit-course.ts b/web/ts/edit-course.ts
index 0b1e65ab7..039559e60 100644
--- a/web/ts/edit-course.ts
+++ b/web/ts/edit-course.ts
@@ -1,5 +1,17 @@
-import { Delete, patchData, postData, putData, sendFormData, showMessage } from "./global";
+import { Delete, patchData, postData, putData, sendFormData, showMessage, uploadFile } from "./global";
 import { StatusCodes } from "http-status-codes";
+import { DataStore } from "./data-store/data-store";
+import {
+    AdminLectureList,
+    Lecture,
+    LectureVideoType,
+    LectureVideoTypeCam,
+    LectureVideoTypeComb,
+    LectureVideoTypePres,
+    LectureVideoTypes,
+} from "./api/admin-lecture-list";
+import { ChangeSet, ignoreKeys } from "./change-set";
+import { AlpineComponent } from "./components/alpine-component";
 
 export enum UIEditMode {
     none,
@@ -18,36 +30,30 @@ export enum FileType {
 }
 
 export class LectureList {
-    static lectures: Lecture[] = [];
-    static markedIds: number[] = [];
-
-    static init(initialState: Lecture[]) {
-        if (initialState === null) {
-            initialState = [];
-        }
+    courseId: number;
+    lectures: Lecture[] = [];
+    markedIds: number[] = [];
 
+    constructor(courseId: number) {
+        this.courseId = courseId;
         this.markedIds = this.parseUrlHash();
+        this.setup();
+    }
 
-        // load initial state into lecture objects
-        for (const lecture of initialState) {
-            let l = new Lecture();
-            l = Object.assign(l, lecture);
-            l.start = new Date(lecture.start);
-            l.end = new Date(lecture.end);
-            LectureList.lectures.push(l);
-        }
-
-        LectureList.triggerUpdate();
-        setTimeout(() => this.scrollSelectedLecturesIntoView(), 500);
+    async setup() {
+        await DataStore.adminLectureList.subscribe(this.courseId, (lectures) => {
+            this.lectures = lectures;
+            this.triggerUpdateEvent();
+        });
     }
 
-    static scrollSelectedLecturesIntoView() {
+    scrollSelectedLecturesIntoView() {
         if (this.markedIds.length > 0) {
             document.querySelector(`#lecture-${this.markedIds[0]}`).scrollIntoView({ behavior: "smooth" });
         }
     }
 
-    static parseUrlHash(): number[] {
+    parseUrlHash(): number[] {
         if (!window.location.hash.startsWith("#lectures:")) {
             return [];
         }
@@ -57,17 +63,17 @@ export class LectureList {
             .map((s) => parseInt(s));
     }
 
-    static hasIndividualChatEnabledSettings(): boolean {
+    hasIndividualChatEnabledSettings(): boolean {
         const lectures = this.lectures;
         if (lectures.length < 2) return false;
         const first = lectures[0];
-        return lectures.slice(1).some((lecture) => lecture.isChatEnabled !== first.isChatEnabled);
+        return lectures.slice(1).some((l) => l.isChatEnabled !== first.isChatEnabled);
     }
 
-    static triggerUpdate() {
+    triggerUpdateEvent() {
         const event = new CustomEvent("newlectures", {
             detail: {
-                lectures: LectureList.lectures,
+                lectures: this.lectures,
                 markedIds: this.markedIds,
             },
         });
@@ -75,426 +81,198 @@ export class LectureList {
     }
 }
 
-class LectureFile {
-    readonly id: number;
-    readonly fileType: number;
-    readonly friendlyName: string;
-
-    constructor({ id, fileType, friendlyName }) {
-        this.id = id;
-        this.fileType = fileType;
-        this.friendlyName = friendlyName;
-    }
-}
-
 class DownloadableVod {
     downloadURL: string;
     friendlyName: string;
 }
 
-class TranscodingProgress {
-    version: string;
-    progress: number;
+interface VideoFileUI {
+    info: LectureVideoType;
+    title: string;
+    inputId: string;
 }
 
-export class Lecture {
-    static dateFormatOptions: Intl.DateTimeFormatOptions = {
-        weekday: "long",
-        year: "numeric",
-        month: "short",
-        day: "2-digit",
-    };
-    static timeFormatOptions: Intl.DateTimeFormatOptions = {
-        hour: "2-digit",
-        minute: "2-digit",
-    };
-    readonly courseId: number;
-    readonly courseSlug: string;
-    readonly lectureId: number;
-    readonly streamKey: string;
-    readonly seriesIdentifier: string;
-    color: string;
-    readonly vodViews: number;
-    start: Date;
-    end: Date;
-    readonly isLiveNow: boolean;
-    isConverting: boolean;
-    readonly isRecording: boolean;
-    readonly isPast: boolean;
-    readonly hasStats: boolean;
-
-    name: string;
-    description: string;
-    lectureHallId: string;
-    lectureHallName: string;
-    isChatEnabled = false;
-    uiEditMode: UIEditMode = UIEditMode.none;
-    newName: string;
-    newDescription: string;
-    newLectureHallId: string;
-    newIsChatEnabled = false;
-    newCombinedVideo = null;
-    newPresentationVideo = null;
-    newCameraVideo = null;
-    isDirty = false;
-    isSaving = false;
-    isDeleted = false;
-    lastErrors: string[] = [];
-    transcodingProgresses: TranscodingProgress[];
-    files: LectureFile[];
-    private: boolean;
-    downloadableVods: DownloadableVod[];
-
-    clone() {
-        return Object.assign(Object.create(Object.getPrototypeOf(this)), this);
-    }
-
-    startDateFormatted() {
-        return this.start.toLocaleDateString("en-US", Lecture.dateFormatOptions);
-    }
-
-    startTimeFormatted() {
-        return this.start.toLocaleTimeString("en-US", Lecture.timeFormatOptions);
-    }
-
-    endFormatted() {
-        return this.end.toLocaleDateString("en-US", Lecture.dateFormatOptions);
-    }
-
-    endTimeFormatted() {
-        return this.end.toLocaleTimeString("en-US", Lecture.timeFormatOptions);
-    }
-
-    updateIsDirty() {
-        this.isDirty =
-            this.newName !== this.name ||
-            this.newDescription !== this.description ||
-            this.newLectureHallId !== this.lectureHallId ||
-            this.newIsChatEnabled !== this.isChatEnabled ||
-            this.newCombinedVideo !== null ||
-            this.newPresentationVideo !== null ||
-            this.newCameraVideo !== null;
-    }
-
-    resetNewFields() {
-        this.newName = this.name;
-        this.newDescription = this.description;
-        this.newLectureHallId = this.lectureHallId;
-        this.newIsChatEnabled = this.isChatEnabled;
-        this.isDirty = false;
-        this.lastErrors = [];
-        this.newCombinedVideo = null;
-        this.newPresentationVideo = null;
-        this.newCameraVideo = null;
-    }
-
-    startSeriesEdit() {
-        if (this.uiEditMode !== UIEditMode.none) return;
-        this.resetNewFields();
-        this.uiEditMode = UIEditMode.series;
-    }
-
-    startSingleEdit() {
-        if (this.uiEditMode !== UIEditMode.none) return;
-        this.resetNewFields();
-        this.uiEditMode = UIEditMode.single;
-    }
+export function lectureEditor(lecture: Lecture): AlpineComponent {
+    return {
+        videoFiles: [
+            { info: LectureVideoTypeComb, title: "Combined Video", inputId: `input_${lecture.lectureId}_comb` },
+            { info: LectureVideoTypePres, title: "Presentation Video", inputId: `input_${lecture.lectureId}_pres` },
+            { info: LectureVideoTypeCam, title: "Camera Video", inputId: `input_${lecture.lectureId}_cam` },
+        ] as VideoFileUI[],
+
+        // UI Data
+        lastErrors: [] as string[],
+        uiEditMode: UIEditMode.none,
+        isDirty: false,
+        isSaving: false,
+
+        // Lecture Data
+        changeSet: null as ChangeSet<Lecture> | null,
+        lectureData: null as Lecture | null,
+
+        /**
+         * AlpineJS init function which is called automatically in addition to 'x-init'
+         */
+        init() {
+            // This tracks changes that are not saved yet
+            this.changeSet = new ChangeSet<Lecture>(lecture, ignoreKeys(["files"]), (data, dirtyState) => {
+                this.lectureData = data;
+                this.isDirty = dirtyState.isDirty;
+            });
 
-    async toggleVisibility() {
-        fetch(`/api/stream/${this.lectureId}/visibility`, {
-            method: "PATCH",
-            body: JSON.stringify({ private: !this.private }),
-            headers: { "Content-Type": "application/json" },
-        }).then((r) => {
-            if (r.status == StatusCodes.OK) {
-                this.private = !this.private;
-                if (this.private) {
-                    this.color = "gray-500";
-                } else {
-                    this.color = "success";
+            // This updates the state live in background
+            DataStore.adminLectureList.subscribe(lecture.courseId, (lectureList) => {
+                const update = lectureList.find((l) => l.lectureId === lecture.lectureId);
+                if (update) {
+                    this.changeSet.updateState(update);
                 }
-            }
-        });
-    }
-
-    async keepProgressesUpdated() {
-        if (!this.isConverting) {
-            return;
-        }
-        setTimeout(() => {
-            for (let i = 0; i < this.transcodingProgresses.length; i++) {
-                fetch(
-                    `/api/course/${this.courseId}/stream/${this.lectureId}/transcodingProgress?v=${this.transcodingProgresses[i].version}`,
-                )
-                    .then((r) => {
-                        return r.json() as Promise<number>;
-                    })
-                    .then((r) => {
-                        if (r === 100) {
-                            this.transcodingProgresses.splice(i, 1);
-                        } else {
-                            this.transcodingProgresses[i].progress = r;
-                        }
-                    });
-            }
-            this.isConverting = this.transcodingProgresses.length > 0;
-            this.keepProgressesUpdated();
-        }, 5000);
-    }
-
-    async saveEdit() {
-        this.lastErrors = [];
-        if (this.uiEditMode === UIEditMode.none) return;
-
-        this.isSaving = true;
-
-        // Save Settings
-        const promises = [];
-        if (this.newName !== this.name) promises.push(this.saveNewLectureName());
-        if (this.newDescription !== this.description) promises.push(this.saveNewLectureDescription());
-        if (this.newLectureHallId !== this.lectureHallId) promises.push(this.saveNewLectureHall());
-        if (this.newIsChatEnabled !== this.isChatEnabled) promises.push(this.saveNewIsChatEnabled());
-        const errors = (await Promise.all(promises)).filter((res) => res.status !== StatusCodes.OK);
-
-        if (this.uiEditMode === UIEditMode.series && errors.length === 0) {
-            const seriesUpdateResult = await this.saveSeries();
-            if (seriesUpdateResult.status !== StatusCodes.OK) {
-                errors.push(seriesUpdateResult);
-            }
-        }
+            });
+        },
 
-        if (errors.length > 0) {
-            this.lastErrors = await Promise.all(
-                errors.map((e) => {
-                    const text = e.text();
-                    try {
-                        const msg = JSON.parse(text).msg;
-                        if (msg != null && msg.length > 0) {
-                            return msg;
-                        }
-                        // eslint-disable-next-line no-empty
-                    } catch (_) {}
-                    return text;
-                }),
+        toggleVisibility() {
+            DataStore.adminLectureList.setPrivate(
+                this.lectureData.courseId,
+                this.lectureData.lectureId,
+                !this.lectureData.private,
             );
-            this.isSaving = false;
-            return false;
-        }
-
-        // Upload new media files
-        const uploadErrors = await this.saveNewVODMedia();
-
-        if (uploadErrors.length > 0) {
-            this.lastErrors = uploadErrors;
-            this.isSaving = false;
-            return false;
-        }
-
-        this.uiEditMode = UIEditMode.none;
-        this.isSaving = false;
-        return true;
-    }
-
-    discardEdit() {
-        this.uiEditMode = UIEditMode.none;
-    }
-
-    async saveNewLectureName() {
-        const res = await postData("/api/course/" + this.courseId + "/renameLecture/" + this.lectureId, {
-            name: this.newName,
-        });
-
-        if (res.status == StatusCodes.OK) {
-            this.name = this.newName;
-        }
-
-        return res;
-    }
-
-    async saveNewLectureDescription() {
-        const res = await putData("/api/course/" + this.courseId + "/updateDescription/" + this.lectureId, {
-            name: this.newDescription,
-        });
-
-        if (res.status == StatusCodes.OK) {
-            this.description = this.newDescription;
-        }
-
-        return res;
-    }
-
-    async saveNewLectureHall() {
-        const res = await saveLectureHall([this.lectureId], this.newLectureHallId);
-
-        if (res.status == StatusCodes.OK) {
-            this.lectureHallId = this.newLectureHallId;
-            this.lectureHallName = "";
-        }
-
-        return res;
-    }
-
-    async saveNewIsChatEnabled() {
-        const res = await saveIsChatEnabled(this.lectureId, this.newIsChatEnabled);
-
-        if (res.status == StatusCodes.OK) {
-            this.isChatEnabled = this.newIsChatEnabled;
-        } else {
-            res.text().then((t) => showMessage(t));
-        }
-        return res;
-    }
+        },
 
-    async saveNewVODMedia(): Promise<string[]> {
-        const errors = [];
-        const mediaInfo = [
-            { key: "newCombinedVideo", type: "COMB" },
-            { key: "newPresentationVideo", type: "PRES" },
-            { key: "newCameraVideo", type: "CAM" },
-        ];
+        async keepProgressesUpdated() {
+            if (!this.isConverting) {
+                return;
+            }
+            setTimeout(async () => {
+                for (let i = 0; i < this.transcodingProgresses.length; i++) {
+                    const res = await AdminLectureList.getTranscodingProgress(
+                        this.lectureData.courseId,
+                        this.lectureData.lectureId,
+                        this.transcodingProgresses[i].version,
+                    );
+                    if (res === 100) {
+                        this.transcodingProgresses.splice(i, 1);
+                    } else {
+                        this.transcodingProgresses[i].progress = res;
+                    }
+                }
+                this.isConverting = this.transcodingProgresses.length > 0;
+                this.keepProgressesUpdated();
+            }, 5000);
+        },
 
-        for (const info of mediaInfo) {
-            const mediaFile = this[info.key];
-            if (mediaFile === null) continue;
+        getVideoFile(key: string): File {
+            return this.lectureData[key];
+        },
 
-            try {
-                await uploadFilePost(
-                    `/api/course/${this.courseId}/uploadVODMedia?streamID=${this.lectureId}&videoType=${info.type}`,
-                    mediaFile,
-                    (progress) => {
-                        window.dispatchEvent(
-                            new CustomEvent(`voduploadprogressedit`, {
-                                detail: { type: info.type, progress, lectureId: this.lectureId },
-                            }),
+        onAttachmentFileDrop(e) {
+            if (e.dataTransfer.items) {
+                const item = e.dataTransfer.items[0];
+                const { kind } = item;
+                switch (kind) {
+                    case "file": {
+                        DataStore.adminLectureList.uploadAttachmentFile(
+                            this.lectureData.courseId,
+                            this.lectureData.lectureId,
+                            item.getAsFile(),
                         );
-                    },
-                );
-                this[info.key] = null;
-            } catch (e) {
-                const error = `Failed to upload "${mediaFile.name}".`;
-                errors.push(error);
-            }
-        }
-        return errors;
-    }
-
-    async saveSeries() {
-        const res = await postData("/api/course/" + this.courseId + "/updateLectureSeries/" + this.lectureId);
-
-        if (res.status == StatusCodes.OK) {
-            LectureList.lectures = LectureList.lectures.map((lecture) => {
-                if (this.lectureId !== lecture.lectureId && lecture.seriesIdentifier === this.seriesIdentifier) {
-                    /* cloning, as otherwise alpine doesn't detect the changed object in the array ... */
-                    lecture = lecture.clone();
-                    lecture.name = this.name;
-                    lecture.description = this.description;
-                    lecture.lectureHallId = this.lectureHallId;
-                    lecture.uiEditMode = UIEditMode.none;
+                        break;
+                    }
+                    case "string": {
+                        DataStore.adminLectureList.uploadAttachmentUrl(
+                            this.lectureData.courseId,
+                            this.lectureData.lectureId,
+                            e.dataTransfer.getData("URL"),
+                        );
+                    }
                 }
-                return lecture;
-            });
-            LectureList.triggerUpdate();
-        }
-
-        return res;
-    }
+            }
+        },
 
-    async deleteLecture() {
-        if (confirm("Confirm deleting video?")) {
-            const res = await postData("/api/course/" + this.courseId + "/deleteLectures", {
-                streamIDs: [this.lectureId.toString()],
-            });
+        deleteAttachment(id: number) {
+            DataStore.adminLectureList.deleteAttachment(this.lectureData.courseId, this.lectureData.lectureId, id);
+        },
 
-            if (res.status !== StatusCodes.OK) {
-                alert("An unknown error occurred during the deletion process!");
-                return;
-            }
+        deleteLecture() {
+            DataStore.adminLectureList.delete(this.lectureData.courseId, [this.lectureData.lectureId]);
+        },
 
-            LectureList.lectures = LectureList.lectures.filter((l) => l.lectureId !== this.lectureId);
-            LectureList.triggerUpdate();
-        }
-    }
+        deleteLectureSeries() {
+            DataStore.adminLectureList.deleteSeries(this.lectureData.courseId, this.lectureData.lectureId);
+        },
 
-    async deleteLectureSeries() {
-        const lectureCount = LectureList.lectures.filter((l) => l.seriesIdentifier === this.seriesIdentifier).length;
-        if (confirm("Confirm deleting " + lectureCount + " videos in the lecture series?")) {
-            const res = await Delete("/api/course/" + this.courseId + "/deleteLectureSeries/" + this.lectureId);
+        /**
+         * Opens the series lecture editor UI
+         */
+        startSeriesEdit() {
+            if (this.uiEditMode !== UIEditMode.none) return;
+            this.changeSet.reset();
+            this.uiEditMode = UIEditMode.series;
+        },
 
-            if (res.status === StatusCodes.OK) {
-                LectureList.lectures = LectureList.lectures.filter((l) => l.seriesIdentifier !== this.seriesIdentifier);
-                LectureList.triggerUpdate();
-            }
+        /**
+         * Opens the single lecture editor UI
+         */
+        startSingleEdit() {
+            if (this.uiEditMode !== UIEditMode.none) return;
+            this.changeSet.reset();
+            this.uiEditMode = UIEditMode.single;
+        },
 
-            return res;
-        }
-    }
+        /**
+         * Discards current changes
+         */
+        discardEdit() {
+            this.changeSet.reset();
+            this.uiEditMode = UIEditMode.none;
+        },
 
-    getDownloads() {
-        return this.downloadableVods;
-    }
+        /**
+         * Save changes send them to backend and commit change set.
+         */
+        async saveEdit() {
+            const { courseId, lectureId, name, description, lectureHallId, isChatEnabled } = this.lectureData;
+            const changedKeys = this.changeSet.changedKeys();
 
-    async deleteFile(fileId: number) {
-        await fetch(`/api/stream/${this.lectureId}/files/${fileId}`, {
-            method: "DELETE",
-        })
-            .catch((err) => console.log(err))
-            .then(() => {
-                this.files = this.files.filter((f) => f.id !== fileId);
-            });
-    }
+            try {
+                // Saving new meta data
+                await DataStore.adminLectureList.updateMeta(courseId, lectureId, {
+                    payload: {
+                        name: changedKeys.includes("name") ? name : undefined,
+                        description: changedKeys.includes("description") ? description : undefined,
+                        lectureHallId: changedKeys.includes("lectureHallId") ? lectureHallId : undefined,
+                        isChatEnabled: changedKeys.includes("isChatEnabled") ? isChatEnabled : undefined,
+                    },
+                    options: {
+                        saveSeries: this.uiEditMode === UIEditMode.series,
+                    },
+                });
 
-    hasAttachments(): boolean {
-        if (this.files !== undefined && this.files !== null) {
-            const filtered = this.files.filter((f) => f.fileType === FileType.attachment);
-            return filtered.length > 0;
-        }
-        return false;
-    }
+                // Uploading new videos
+                for (const videoFile of this.videoFiles) {
+                    if (!changedKeys.includes(videoFile.info.key)) {
+                        continue;
+                    }
 
-    onFileDrop(e) {
-        if (e.dataTransfer.items) {
-            const kind = e.dataTransfer.items[0].kind;
-            switch (kind) {
-                case "file": {
-                    this.postFile(e.dataTransfer.items[0].getAsFile());
-                    break;
-                }
-                case "string": {
-                    this.postFileAsURL(e.dataTransfer.getData("URL"));
+                    const file = this.lectureData[videoFile.info.key];
+                    await DataStore.adminLectureList.uploadVideo(courseId, lectureId, videoFile.info.type, file, {
+                        onProgress: (progress) => {
+                            window.dispatchEvent(
+                                new CustomEvent(`voduploadprogressedit`, {
+                                    detail: { type: videoFile.info.type, progress, lectureId: this.lectureId },
+                                }),
+                            );
+                        },
+                    });
                 }
+            } catch (e) {
+                console.error(e);
+                this.lastErrors = [e.message];
+                return;
             }
-        }
-    }
-
-    private async postFile(file) {
-        const formData = new FormData();
-        formData.append("file", file);
-        await fetch(`/api/stream/${this.lectureId}/files?type=file`, {
-            method: "POST",
-            body: formData,
-        }).then((res) =>
-            res.json().then((id) => {
-                const friendlyName = file.name;
-                const fileType = 2;
-                this.files.push(new LectureFile({ id, fileType, friendlyName }));
-            }),
-        );
-    }
 
-    private async postFileAsURL(fileURL) {
-        const formData = new FormData();
-        formData.append("file_url", fileURL);
-        await fetch(`/api/stream/${this.lectureId}/files?type=url`, {
-            method: "POST",
-            body: formData,
-        }).then((res) =>
-            res.json().then((id) => {
-                const friendlyName = fileURL.substring(fileURL.lastIndexOf("/") + 1);
-                const fileType = 2;
-                this.files.push(new LectureFile({ id, fileType, friendlyName }));
-            }),
-        );
-    }
+            this.changeSet.commit({ discardKeys: this.videoFiles.map((v) => v.info.key) });
+            this.uiEditMode = UIEditMode.none;
+        },
+    } as AlpineComponent;
 }
 
 export function decodeHtml(html) {
@@ -514,8 +292,8 @@ export async function deleteLectures(cid: number, lids: number[]) {
             return;
         }
 
-        LectureList.lectures = LectureList.lectures.filter((l) => !lids.includes(l.lectureId));
-        LectureList.triggerUpdate();
+        //LectureList.lectures = LectureList.lectures.filter((l) => !lids.includes(l.lectureId));
+        //LectureList.triggerUpdate();
     }
 }
 
@@ -525,9 +303,9 @@ export function saveIsChatEnabled(streamId: number, isChatEnabled: boolean) {
 
 export async function saveIsChatEnabledForAllLectures(isChatEnabled: boolean) {
     const promises = [];
-    for (const lecture of LectureList.lectures) {
+    /*for (const lecture of LectureList.lectures) {
         promises.push(saveIsChatEnabled(lecture.lectureId, isChatEnabled));
-    }
+    }*/
     const errors = (await Promise.all(promises)).filter((res) => res.status !== StatusCodes.OK);
     return errors.length <= 0;
 }
@@ -1126,12 +904,14 @@ export function createLectureForm(args: { s: [] }) {
             // Upload media
             try {
                 for (const mediaUpload of mediaFiles) {
-                    await uploadFilePost(
+                    await uploadFile(
                         `/api/course/${this.courseID}/uploadVODMedia?streamID=${streamID}&videoType=${mediaUpload.type}`,
                         mediaUpload.file,
-                        (progress) => {
-                            mediaUpload.progress = progress;
-                            this.dispatchMediaProgress(mediaFiles);
+                        {
+                            onProgress: (progress) => {
+                                mediaUpload.progress = progress;
+                                this.dispatchMediaProgress(mediaFiles);
+                            },
                         },
                     );
                 }
@@ -1147,29 +927,6 @@ export function createLectureForm(args: { s: [] }) {
     };
 }
 
-function uploadFilePost(url: string, file: File, onProgress: (progress: number) => void): Promise<string> {
-    const xhr = new XMLHttpRequest();
-    const vodUploadFormData = new FormData();
-    vodUploadFormData.append("file", file);
-    return new Promise((resolve, reject) => {
-        xhr.onloadend = () => {
-            if (xhr.status === 200) {
-                resolve(xhr.responseText);
-            } else {
-                reject();
-            }
-        };
-        xhr.upload.onprogress = (e: ProgressEvent) => {
-            if (!e.lengthComputable) {
-                return;
-            }
-            onProgress(Math.floor(100 * (e.loaded / e.total)));
-        };
-        xhr.open("POST", url);
-        xhr.send(vodUploadFormData);
-    });
-}
-
 export function sendCourseSettingsForm(courseId: number) {
     const form = document.getElementById("course-settings-form") as HTMLFormElement;
     const formData = new FormData(form);
diff --git a/web/ts/global.ts b/web/ts/global.ts
index 5fe96316d..a0069080a 100644
--- a/web/ts/global.ts
+++ b/web/ts/global.ts
@@ -45,6 +45,39 @@ export async function Delete(url = "") {
     });
 }
 
+export interface UploadFileListener {
+    onProgress?: (progress: number) => void;
+}
+
+export function uploadFile(url: string, file: File, listener: UploadFileListener = {}): Promise<XMLHttpRequest> {
+    const vodUploadFormData = new FormData();
+    vodUploadFormData.append("file", file);
+    return postFormData(url, vodUploadFormData, listener);
+}
+
+export function postFormData(url: string, data: FormData, listener: UploadFileListener = {}): Promise<XMLHttpRequest> {
+    const xhr = new XMLHttpRequest();
+    return new Promise((resolve, reject) => {
+        xhr.onloadend = () => {
+            if (xhr.status === 200) {
+                resolve(xhr);
+            } else {
+                reject(xhr);
+            }
+        };
+        xhr.upload.onprogress = (e: ProgressEvent) => {
+            if (!e.lengthComputable) {
+                return;
+            }
+            if (listener.onProgress) {
+                listener.onProgress(Math.floor(100 * (e.loaded / e.total)));
+            }
+        };
+        xhr.open("POST", url);
+        xhr.send(data);
+    });
+}
+
 export function sendFormData(url, formData: FormData) {
     const HttpReq = new XMLHttpRequest();
     HttpReq.open("POST", url, false);
diff --git a/web/ts/utilities/fetch-wrappers.ts b/web/ts/utilities/fetch-wrappers.ts
index 797912d56..ed4bf4f0c 100644
--- a/web/ts/utilities/fetch-wrappers.ts
+++ b/web/ts/utilities/fetch-wrappers.ts
@@ -42,6 +42,44 @@ export async function post(url: string, body: object = {}) {
     });
 }
 
+export interface PostFormDataListener {
+    onProgress?: (progress: number) => void;
+}
+
+/**
+ * Wrapper for XMLHttpRequest to send form data via POST
+ * @param  {string} url URL to send to
+ * @param  {FormData} body form-data
+ * @param  {PostFormDataListener} listener attached progress listeners
+ * @return {Promise<XMLHttpRequest>}
+ */
+export function postFormData(
+    url: string,
+    body: FormData,
+    listener: PostFormDataListener = {},
+): Promise<XMLHttpRequest> {
+    const xhr = new XMLHttpRequest();
+    return new Promise((resolve, reject) => {
+        xhr.onloadend = () => {
+            if (xhr.status === 200) {
+                resolve(xhr);
+            } else {
+                reject(xhr);
+            }
+        };
+        xhr.upload.onprogress = (e: ProgressEvent) => {
+            if (!e.lengthComputable) {
+                return;
+            }
+            if (listener.onProgress) {
+                listener.onProgress(Math.floor(100 * (e.loaded / e.total)));
+            }
+        };
+        xhr.open("POST", url);
+        xhr.send(body);
+    });
+}
+
 /**
  * Wrapper for Javascript's fetch function for PUT
  * @param  {string} url URL to fetch
@@ -63,6 +101,27 @@ export async function put(url = "", body: object = {}) {
     });
 }
 
+/**
+ * Wrapper for Javascript's fetch function for PATCH
+ * @param  {string} url URL to fetch
+ * @param  {object} body Data object to put
+ * @return {Promise<Response>}
+ */
+export async function patch(url = "", body = {}) {
+    return await fetch(url, {
+        method: "PATCH",
+        headers: {
+            "Content-Type": "application/json",
+        },
+        body: JSON.stringify(body),
+    }).then((res) => {
+        if (!res.ok) {
+            throw Error(res.statusText);
+        }
+        return res;
+    });
+}
+
 /**
  * Wrapper for Javascript's fetch function for DELETE
  * @param  {string} url URL to fetch
@@ -71,3 +130,15 @@ export async function put(url = "", body: object = {}) {
 export async function del(url: string) {
     return await fetch(url, { method: "DELETE" });
 }
+
+/**
+ * Wrapper for XMLHttpRequest to upload a file
+ * @param url URL to upload to
+ * @param file File to be uploaded
+ * @param listener Upload progress listeners
+ */
+export function uploadFile(url: string, file: File, listener: PostFormDataListener = {}): Promise<XMLHttpRequest> {
+    const vodUploadFormData = new FormData();
+    vodUploadFormData.append("file", file);
+    return postFormData(url, vodUploadFormData, listener);
+}

From 074f3523b7c7499954844a30bede53638fd6393b Mon Sep 17 00:00:00 2001
From: matthias <matthias.reumann@tum.de>
Date: Wed, 20 Sep 2023 18:00:59 +0200
Subject: [PATCH 30/31] Settings Page UI (#1152)

* Update user-settings.gohtml

* Minimize header footprint
---
 web/assets/css/home.css           |  12 ++++
 web/template/user-settings.gohtml | 110 +++++++++++++++++++-----------
 web/user.go                       |   4 +-
 3 files changed, 84 insertions(+), 42 deletions(-)

diff --git a/web/assets/css/home.css b/web/assets/css/home.css
index fe3b3fb61..90480057b 100644
--- a/web/assets/css/home.css
+++ b/web/assets/css/home.css
@@ -95,6 +95,10 @@
     @apply bg-gray-800 text-white dark:bg-gray-600
 }
 
+.tum-live-button-muted {
+    @apply bg-gray-200 dark:bg-gray-600 hover:bg-gray-300 dark:hover:bg-gray-700
+}
+
 .tum-live-icon-button {
     @apply flex justify-center items-center rounded-full text-gray-400 hover:text-gray-600 dark:hover:text-white active:bg-gray-100/50 dark:active:bg-gray-700/50 disabled:opacity-20;
 }
@@ -372,6 +376,14 @@ label:has(~ .tum-live-input) {
     @apply text-sm rounded-lg bg-amber-500/25 border-l-4 px-3 py-2 border-amber-500
 }
 
+.tum-live-settings-grid{
+    @apply grid gap-y-5 content-start lg:w-3/6 md:w-4/5 w-full p-6 text-3;
+}
+
+.tum-live-settings-grid > section > h2{
+    @apply text-sm text-5 mb-1;
+}
+
 
 .tum-live-footer {
     @apply bg-gray-100 dark:bg-secondary-light py-4 px-8;
diff --git a/web/template/user-settings.gohtml b/web/template/user-settings.gohtml
index 8725b6214..06e1e40d1 100644
--- a/web/template/user-settings.gohtml
+++ b/web/template/user-settings.gohtml
@@ -1,33 +1,64 @@
 <!DOCTYPE html>
 <html lang="en" class="dark">
-
+{{- /*gotype: github.com/TUM-Dev/gocast/web*/ -}}
 <head>
     <meta charset="UTF-8">
-    <title>{{.IndexData.Branding.Title}}</title>
-    {{template "headImports" .IndexData.VersionTag}}
-</head>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
+    <meta name="description" content="{{.Branding.Description}}"/>
+    <link rel="manifest" href="/static/assets/manifest.json">
 
-<body class="text-4">
-{{- /*gotype: github.com/TUM-Dev/gocast/web.userSettingsData*/ -}}
-{{template "header" .IndexData.TUMLiveContext}}
-<div class="form-container">
-    <h1 class="form-container-title">Settings</h1>
+    <title>{{.Branding.Title}} | Settings</title>
 
-    <div class="form-container-body"
-         x-data=" { initialName: '{{.IndexData.TUMLiveContext.User.GetPreferredName}}', name: '{{.IndexData.TUMLiveContext.User.GetPreferredName}}', err: '' } ">
-        <label class="text-sm text-5" for="displayName">Preferred Name <span class="italic font-bold">You can change
-                    this once every three months.</span></label>
-        <p x-cloak x-show="err!==''" class="text-red-500" x-text="err"></p>
-        <div class="flex gap-3">
-            <input class="tl-input" type="text" x-model="name" id="displayName" {{ if not
-            .IndexData.TUMLiveContext.User.PreferredNameChangeAllowed }} readonly {{ end }}>
-            <button type="button" :disabled="name === initialName" class="btn w-auto whitespace-nowrap"
-                    @click="global.updatePreference(global.UserSetting.Name, name).then((r) => {err=r; if(r==='') {initialName=name;}})">
-                Update Name
-            </button>
+    {{if and .VersionTag (eq .VersionTag "development")}}
+    <script defer src="/static/node_modules/alpinejs/dist/cdn.js"></script>
+    {{else}}
+    <script defer src="/static/node_modules/alpinejs/dist/cdn.min.js"></script>
+    {{end}}
+    <script src="static/assets/init.js"></script>
+    <script src="/static/assets/ts-dist/global.bundle.js?v={{if .VersionTag}}{{.VersionTag}}{{else}}development{{end}}"></script>
+
+    <link href="/static/assets/css-dist/home.css?v={{if .VersionTag}}{{.VersionTag}}{{else}}development{{end}}"
+          rel="stylesheet">
+    <style>[x-cloak] {
+            display: none !important;
+        }</style>
+</head>
+
+<body class="h-screen flex flex-col items-stretch tum-live-bg">
+<header class="text-3 flex z-50 w-full items-center px-3 py-2 h-16 justify-between shrink-0 grow-0">
+    <div class="flex items-center">
+        <a href="/" class="mx-3" type="button" id="logo" title="Start">
+            <img src="/logo.svg" width="42" alt="TUM-Live Logo">
+        </a>
+    </div>
+</header>
+<main id="content" class="flex justify-center grow h-full overflow-y-scroll">
+    <article class="tum-live-settings-grid" x-data=" { err: '' } ">
+        <header>
+            <h1 class="font-bold text-3">Settings</h1>
+        </header>
+        <div x-cloak x-show="err!==''" class="bg-danger/25 text-sm rounded-lg px-2 py-1 space-x-3 py-2">
+            <i class="fa-solid fa-triangle-exclamation"></i>
+            <span x-text="err">Error</span>
         </div>
-        <h2 class="text-sm text-5">Preferred greeting</h2>
-        <div x-data="{ currentGreeting: {{toJson .IndexData.TUMLiveContext.User.GetPreferredGreeting}}, err:'' }">
+        <section
+                x-data="{initialName: '{{.TUMLiveContext.User.GetPreferredName}}', name: '{{.TUMLiveContext.User.GetPreferredName}}'}">
+            <h2>Preferred Name<span class="italic font-bold pl-2">You can change this once every three months.</span>
+            </h2>
+            <div class="grid gap-y-2">
+                <label for="displayName">
+                    <input class="tum-live-input" type="text" x-model="name" id="displayName" {{ if not
+                    .TUMLiveContext.User.PreferredNameChangeAllowed }} readonly {{ end }}>
+                </label>
+                <button type="button" :disabled="name === initialName"
+                        class="tum-live-input-submit tum-live-button-primary py-2 text-sm"
+                        @click="global.updatePreference(global.UserSetting.Name, name).then((r) => {err=r; if(r==='') {initialName=name;}})">
+                    Update Name
+                </button>
+            </div>
+        </section>
+        <section x-data="{ currentGreeting: {{toJson .TUMLiveContext.User.GetPreferredGreeting}}}">
+            <h2>Preferred greeting</h2>
             <input class="w-auto" type="radio" name="greet" value="Moin" id="greeting1" x-model="currentGreeting"
                    :checked="currentGreeting==='Moin'"
                    @change="global.updatePreference(global.UserSetting.Greeting, currentGreeting).then((r) => {err=r})">
@@ -36,11 +67,9 @@
                    :checked="currentGreeting==='Servus'"
                    @change="global.updatePreference(global.UserSetting.Greeting, currentGreeting).then((r) => {err=r;})">
             <label for="greeting2">Servus</label>
-            <p class="text-danger" x-cloak x-show="err!==''" x-text="err"></p>
-        </div>
-        <h2 class="text-sm text-5">Playback Speeds</h2>
-        <div class="pl-2"
-             x-data="{ playbackspeeds: {{toJson .IndexData.TUMLiveContext.User.GetPlaybackSpeeds}}, err:'' }">
+        </section>
+        <section x-data="{ playbackspeeds: {{toJson .TUMLiveContext.User.GetPlaybackSpeeds}} }">
+            <h2>Playback Speeds</h2>
             <template x-for="ps in playbackspeeds">
                     <span class="mr-2">
                         <label>
@@ -50,22 +79,23 @@
                         </label>
                     </span>
             </template>
-            <p class="text-danger" x-cloak x-show="err!==''" x-text="err"></p>
-        </div>
-
-        <h2 class="text-sm text-5">Privacy & Data Protection</h2>
-        <a href="/api/users/exportData" download="personal_data.json" class="btn block">
-            <i class="fas fa-download"></i> Export my personal data
-        </a>
+        </section>
+        <section>
+            <h2>Privacy & Data Protection</h2>
+            <a href="/api/users/exportData" download="personal_data.json"
+               class="tum-live-input-submit tum-live-button-muted block py-2 text-center text-sm">
+                <i class="fas fa-download"></i> Export my personal data
+            </a>
+        </section>
 
-        <div class="text-center p-3">
-            <i class="text-5">Not a lot going on here <b>yet</b>.
+        <footer class="text-5 text-sm text-center">
+            <i>Not a lot going on here <b>yet</b>.
                 <a class="underline" target="_blank" rel="noopener"
                    href="https://github.com/TUM-Dev/gocast/issues/new/choose">Open an issue</a>
                 if you have any ideas what settings you miss :)
             </i>
-        </div>
-    </div>
-</div>
+        </footer>
+    </article>
+</main>
 </body>
 </html>
diff --git a/web/user.go b/web/user.go
index a8ba80334..ce6e4a2ea 100644
--- a/web/user.go
+++ b/web/user.go
@@ -2,11 +2,11 @@ package web
 
 import (
 	"context"
-	"github.com/gin-gonic/gin"
 	"github.com/TUM-Dev/gocast/dao"
 	"github.com/TUM-Dev/gocast/model"
 	"github.com/TUM-Dev/gocast/tools"
 	"github.com/TUM-Dev/gocast/tools/tum"
+	"github.com/gin-gonic/gin"
 	log "github.com/sirupsen/logrus"
 	"net/http"
 	"net/url"
@@ -23,7 +23,7 @@ func (r mainRoutes) settingsPage(c *gin.Context) {
 	d := userSettingsData{IndexData: NewIndexData()}
 	d.IndexData.TUMLiveContext = c.MustGet("TUMLiveContext").(tools.TUMLiveContext)
 
-	err := templateExecutor.ExecuteTemplate(c.Writer, "user-settings.gohtml", d)
+	err := templateExecutor.ExecuteTemplate(c.Writer, "user-settings.gohtml", d.IndexData)
 	if err != nil {
 		log.Error(err)
 		c.AbortWithStatus(http.StatusInternalServerError)

From 95b124e209c785bdf4a6c2ac8c7c0401ec5a17f0 Mon Sep 17 00:00:00 2001
From: matthias <matthias.reumann@tum.de>
Date: Wed, 20 Sep 2023 18:01:36 +0200
Subject: [PATCH 31/31] Update info-page ui; Minimize header (#1154)

---
 web/assets/css/home.css       | 23 +++++++++++++++++++++++
 web/template/info-page.gohtml | 17 ++++++++++++++---
 2 files changed, 37 insertions(+), 3 deletions(-)

diff --git a/web/assets/css/home.css b/web/assets/css/home.css
index 90480057b..6803a68cd 100644
--- a/web/assets/css/home.css
+++ b/web/assets/css/home.css
@@ -392,3 +392,26 @@ label:has(~ .tum-live-input) {
 .tum-live-footer a {
     @apply text-sm font-light text-5 md:py-0 py-1
 }
+
+.tum-live-markdown h1, .tum-live-markdown h2, .tum-live-markdown h3, .tum-live-markdown h4, .tum-live-markdown h5, .tum-live-markdown h6 {
+    font-weight: bold;
+}
+
+.tum-live-markdown h1 {
+    margin-bottom: 16px;
+}
+
+.tum-live-markdown h2, .tum-live-markdown h3, .tum-live-markdown h4, .tum-live-markdown h5, .tum-live-markdown h6 {
+    margin-top: 16px;
+}
+
+.tum-live-markdown ul {
+    list-style-type: disc;
+    padding-left: 16px;
+    padding-bottom: 8px;
+    padding-top: 8px;
+}
+
+.tum-live-markdown a {
+    border-bottom: 1px solid black;
+}
diff --git a/web/template/info-page.gohtml b/web/template/info-page.gohtml
index ee6cc15a6..5fb82b2b4 100644
--- a/web/template/info-page.gohtml
+++ b/web/template/info-page.gohtml
@@ -4,11 +4,22 @@
     <meta charset="UTF-8">
     <title>{{.Branding.Title}}</title>
     <link rel="canonical" href="{{.IndexData.CanonicalURL.Info .Name}}" />
-    {{template "headImports" .VersionTag}}
+    <script src="static/assets/init.js"></script>
+    <link href="/static/assets/css-dist/home.css?v={{if .VersionTag}}{{.VersionTag}}{{else}}development{{end}}"
+          rel="stylesheet">
+    <style>[x-cloak] {
+            display: none !important;
+        }</style>
 </head>
-<body>
 {{- /*gotype: github.com/TUM-Dev/gocast/web.IndexData*/ -}}
-{{template "header" .TUMLiveContext}}
+<body class="h-screen flex flex-col items-stretch tum-live-bg">
+<header class="text-3 flex z-50 w-full items-center px-3 py-2 h-16 justify-between shrink-0 grow-0">
+    <div class="flex items-center">
+        <a href="/" class="mx-3" type="button" id="logo" title="Start">
+            <img src="/logo.svg" width="42" alt="TUM-Live Logo">
+        </a>
+    </div>
+</header>
 <div class="w-full md:w-1/2 2xl:max-w-screen-xl mx-auto p-6 text-3">
     <div class = "tum-live-markdown pb-10">
         {{.Text}}