From 75a43c07a4c75966456ad24541a07369222c5e18 Mon Sep 17 00:00:00 2001
From: janebuoy <janne.jensen@posteo.de>
Date: Wed, 28 Sep 2022 19:17:49 +0200
Subject: [PATCH 1/3] WIP: tus file upload

---
 package.json                       |   1 +
 src/components/AdminDrawer.vue     |   2 +-
 src/components/UploadDialog.vue    |  85 ++++++++++++++++++++++
 src/router/index.js                |  13 ++--
 src/services/api.js                |  34 +++++++++
 src/views/Admin/ChannelProfile.vue |  69 +++++++++++-------
 vue.config.js                      |  10 +--
 yarn.lock                          | 110 ++++++++++++++++++++++++++++-
 8 files changed, 287 insertions(+), 37 deletions(-)
 create mode 100644 src/components/UploadDialog.vue

diff --git a/package.json b/package.json
index 5a6f482..420e0cd 100644
--- a/package.json
+++ b/package.json
@@ -18,6 +18,7 @@
 		"marked": "^4.0.16",
 		"ovenplayer": "~0.10.25",
 		"pretty-ms": "^8.0.0",
+		"tus-js-client": "^3.1.0",
 		"vue": "^2.6.11",
 		"vue-chat-scroll": "^1.4.0",
 		"vue-masonry-css": "^1.0.3",
diff --git a/src/components/AdminDrawer.vue b/src/components/AdminDrawer.vue
index 9fbb7e5..b3c0892 100644
--- a/src/components/AdminDrawer.vue
+++ b/src/components/AdminDrawer.vue
@@ -25,7 +25,7 @@
               <v-list-item
                 input-value="false"
                 :to="{
-                  name: 'ChannelEdit',
+                  name: 'ChannelProfile',
                   params: { channelid: selectionAdminChannel },
                 }"
               >
diff --git a/src/components/UploadDialog.vue b/src/components/UploadDialog.vue
new file mode 100644
index 0000000..14701d2
--- /dev/null
+++ b/src/components/UploadDialog.vue
@@ -0,0 +1,85 @@
+<template>
+  <v-dialog
+    width="300"
+    hide-overlay
+    content-class="elevation-10"
+    v-model="dialog"
+    @input="close()"
+  >
+    <v-card
+      outlined
+      tile
+      elevation="0"
+      :color="darkMode ? 'grey darken-4' : 'grey lighten-5'"
+    >
+      <v-card-title> Upload </v-card-title>
+      <v-card-text class="pb-0">
+        <v-form class="mt-2" @submit="upload()">
+          <v-file-input
+            v-model="fileSrc"
+            truncate-length="15"
+            outlined
+            dense
+            label="File input"
+            :error-messages="errorMessage"
+          ></v-file-input>
+        </v-form>
+        <v-progress-linear
+          :value="uploadProgress"
+          v-if="uploadProgress > 0"
+        ></v-progress-linear>
+      </v-card-text>
+      <v-divider />
+
+      <v-card-actions class="neutral lighten-1">
+        <v-btn text class="ml-auto" @click="close()"> Cancel </v-btn>
+        <v-btn text color="success" @click="upload()"> Upload </v-btn>
+      </v-card-actions>
+    </v-card>
+  </v-dialog>
+</template>
+
+<script>
+import { mapGetters } from "vuex";
+import { api } from "@/services/api.js";
+
+export default {
+  name: "UploadDialog",
+  computed: {
+    ...mapGetters(["darkMode"]),
+  },
+  props: ["channelid"],
+  data() {
+    return {
+      dialog: true,
+      fileSrc: {},
+      uploadProgress: 0,
+      errorMessage: null,
+    };
+  },
+  methods: {
+    close() {
+      this.$emit("closeUploadDialog", false);
+    },
+    upload() {
+      console.log("upload");
+      this.errorMessage = null;
+      api.Channels.LogoUploader(
+        this.channelid,
+        this.fileSrc,
+        () => console.log("success"),
+        (percent) => {
+          console.log(percent, "%");
+          this.uploadProgress = percent;
+        },
+        (error) => {
+          this.errorMessage = error.message
+            .split(", caused by")[0]
+            .split(", originated from request")[0];
+          console.error(this.errorMessage);
+        }
+      );
+    },
+  },
+};
+</script>
diff --git a/src/router/index.js b/src/router/index.js
index 413487a..a6bbe09 100644
--- a/src/router/index.js
+++ b/src/router/index.js
@@ -8,6 +8,9 @@ import Stats from "@/views/Admin/Stats.vue"
 import Server from "@/views/Admin/Server.vue"
 import About from "@/views/Admin/About.vue"
 import GlobalStreamSchedule from "@/views/Admin/GlobalStreamSchedule.vue"
+// import ChannelEdit from "@/views/Admin/ChannelEdit.vue"
+import ChannelProfile from "@/views/Admin/ChannelProfile.vue"
+
 // for channel
 import ChannelDistribution from "@/views/Admin/ChannelDistribution.vue"
 import StreamSchedule from "@/views/Admin/StreamSchedule.vue"
@@ -94,7 +97,7 @@ const routes = [
 			{
 				path: "add",
 				name: "ChannelAdd",
-				component: ChannelEdit,
+				component: ChannelProfile,
 			},
 			{
 				path: "stats",
@@ -129,10 +132,10 @@ const routes = [
 				component: AdminChannelLive,
 				props: true,
 			},
-			{
-				path: "edit",
-				name: "ChannelEdit",
-				component: ChannelEdit,
+      {
+				path: "profile",
+				name: "ChannelProfile",
+				component: ChannelProfile,
 				props: true,
 			},
 			{
diff --git a/src/services/api.js b/src/services/api.js
index dfa7fb6..d61505e 100644
--- a/src/services/api.js
+++ b/src/services/api.js
@@ -1,4 +1,5 @@
 import axios from 'axios';
+import * as tus from 'tus-js-client';
 
 import { config } from "../../config.js";
 import { store } from "./store.js";
@@ -22,6 +23,36 @@ function delay(resp) {
 	return new Promise(resolve => setTimeout(() => resolve(resp), 300));
 }
 
+function tusUploader(file, endpoint, onSuccess, onProgress, onError) {
+	const upload = new tus.Upload(file, {
+			endpoint: endpoint,
+			// retryDelays: [0, 3000, 5000, 10000, 20000],
+			retryDelays: [0],
+			metadata: {
+					filename: file.name,
+					filetype: file.type
+			},
+			onError: onError,
+			onProgress: function (bytesUploaded, bytesTotal) {
+				var percentage = (bytesUploaded / bytesTotal * 100).toFixed(2)
+				onProgress(percentage, bytesUploaded, bytesTotal),	
+				console.log(bytesUploaded, bytesTotal, percentage + "%")
+			},
+			onSuccess: onSuccess,
+	})
+
+	// Check if there are any previous uploads to continue.
+	upload.findPreviousUploads().then(function (previousUploads) {
+			// Found previous uploads so we select the first one. 
+			if (previousUploads.length) {
+					upload.resumeFromPreviousUpload(previousUploads[0])
+			}
+
+			// Start the upload
+			upload.start()
+	})
+	return upload
+}
 
 export const api = {
 	Or(f, params, flat = true) {
@@ -52,6 +83,9 @@ export const api = {
 		Save(channelID, channel) {
 			return axios.put(new URL(config.apiURL + "/channel/" + channelID), channel)
 		},
+		LogoUploader(channelID, file, onSuccess, onProgress, onError) {
+			return tusUploader(file, new URL(config.apiURL + "/channel/" + channelID + "/logo"), onSuccess, onProgress, onError)
+		},
 		Delete(channelID) {
 			return axios.delete(new URL(config.apiURL + "/channel/" + channelID))
 		},
diff --git a/src/views/Admin/ChannelProfile.vue b/src/views/Admin/ChannelProfile.vue
index d634162..47e1ffe 100644
--- a/src/views/Admin/ChannelProfile.vue
+++ b/src/views/Admin/ChannelProfile.vue
@@ -23,36 +23,37 @@
             </v-col>
           </v-row>
         </v-alert>
-        <v-avatar color="black" size="128" class="my-4">
-          <v-img v-if="channel.logo" :src="channel.logo" contain />
-          <span v-else>{{ channel.title.slice(0, 2) }}</span>
-        </v-avatar>
         <v-form class="pa-0 mt-2" @submit="save()">
           <v-text-field
-            v-model.lazy="channel.logo"
+            v-model="channel.title"
             :color="darkMode ? 'grey lighten-3' : 'grey darken-2'"
-            label="Logo URL"
+            label="Title"
             outlined
             dense
             @input="enableSave = true"
           />
           <v-text-field
-            v-model="channel.title"
+            v-model="channel.common_name"
             :color="darkMode ? 'grey lighten-3' : 'grey darken-2'"
-            label="Title"
+            label="Comman Name (used in URLs)"
             outlined
             dense
             @input="enableSave = true"
           />
           <v-text-field
-            v-model="channel.common_name"
+            v-model.lazy="channel.logo"
             :color="darkMode ? 'grey lighten-3' : 'grey darken-2'"
-            label="Comman Name (used in URLs)"
+            label="Logo URL"
             outlined
             dense
             @input="enableSave = true"
-          />
-
+          >
+            <template #append-outer>
+              <v-btn icon @click="showUploadDialog = true" class="mt-n1">
+                <v-icon> mdi-plus </v-icon>
+              </v-btn>
+            </template>
+          </v-text-field>
           <v-btn
             class="ml-auto mr-1"
             color="success"
@@ -66,7 +67,6 @@
             v-if="channelid"
             class="ml-1"
             color="error"
-            outlined
             @click="confirmRemove = true"
           >
             <v-icon left> mdi-delete </v-icon>
@@ -87,21 +87,26 @@
               <tr>
                 <td>RTMP Complete Link</td>
                 <td>
-                  <code>{{
-                    ingressRTMP.replace("{ID}", "/" + channel.id)
-                  }}</code>
+                  <code>{{ ingressRTMP }}</code>
                 </td>
               </tr>
               <tr>
                 <td>RTMP URL</td>
                 <td>
-                  <code>{{ ingressRTMP.replace("{ID}", "") }}</code>
+                  <code>{{
+                    ingressRTMP.slice(
+                      0,
+                      ingressRTMP.length -
+                        ingressRTMP.split("/").slice(-1)[0].length -
+                        1
+                    )
+                  }}</code>
                 </td>
               </tr>
               <tr>
                 <td>Secret</td>
                 <td>
-                  <code>{{ channel.id }}</code>
+                  <code>{{ ingressRTMP.split("/").slice(-1)[0] }}</code>
                 </td>
               </tr>
               <tr>
@@ -115,12 +120,17 @@
                   </a>
                 </td>
                 <td>
-                  <code>{{ ingressWS.replace("{ID}", channel.id) }}</code>
+                  <code>{{ ingressWS }}</code>
                 </td>
               </tr>
             </tbody>
           </template>
         </v-simple-table>
+        <UploadDialog
+          v-if="showUploadDialog"
+          :channelid="channelid"
+          @closeSpeakerEditDialog="closeUploadDialog"
+        />
       </v-col>
     </v-row>
   </v-container>
@@ -130,19 +140,23 @@
 import { mapGetters } from "vuex";
 
 import { api } from "@/services/api.js";
-import { config } from "../../../config.js"; // ingressURLs
+import UploadDialog from "@/components/UploadDialog.vue";
 
 export default {
   name: "ChannelProfile",
+  components: {
+    UploadDialog,
+  },
   props: ["channelid"],
   data() {
     return {
-      ingressRTMP: config.ingressURL.rtmp,
-      ingressWS: config.ingressURL.ws,
+      ingressRTMP: "",
+      ingressWS: "",
       channel: {},
       channelFormDefault: {},
       enableSave: false,
       confirmRemove: false,
+      showUploadDialog: false,
     };
   },
   computed: {
@@ -184,9 +198,14 @@ export default {
         this.channel = Object.assign({}, this.channelFormDefault);
         return;
       }
-      api.Channels.Get(this.channelid).then(
-        (response) => (this.channel = response.data)
-      );
+      api.Channels.Get(this.channelid).then((response) => {
+        this.channel = response.data.data;
+        this.ingressRTMP = response.data.ingress.rtmp;
+        this.ingressWS = response.data.ingress.webrtc;
+      });
+    },
+    closeUploadDialog(v) {
+      this.showUploadDialog = v;
     },
   },
 };
diff --git a/vue.config.js b/vue.config.js
index a88ba1e..fda7d6b 100644
--- a/vue.config.js
+++ b/vue.config.js
@@ -17,11 +17,11 @@ module.exports = {
 				// target: 'https://media.kukoon.de',
 				changeOrigin: true,
 			},
-			'^/ws': {
-				target: 'wss://media.kukoon.de',
-				ws: true,
-				changeOrigin: true,
-			},
+			// '^/ws': {
+			// 	target: 'wss://media.kukoon.de',
+			// 	ws: true,
+			// 	changeOrigin: true,
+			// },
 		},
 	},
 }
diff --git a/yarn.lock b/yarn.lock
index 0ceab70..e858a9b 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -2183,7 +2183,7 @@ browserslist@^4.14.5, browserslist@^4.21.3:
     node-releases "^2.0.8"
     update-browserslist-db "^1.0.10"
 
-buffer-from@^1.0.0:
+buffer-from@^1.0.0, buffer-from@^1.1.2:
   version "1.1.2"
   resolved "https://registry.yarnpkg.com/buffer-from/-/buffer-from-1.1.2.tgz#2b146a6fd72e80b4f55d255f35ed59a3a9a41bd5"
   integrity sha512-E+XQCRwSbaaiChtv6k6Dwgc+bx+Bs6vuKJHHl5kox/BaKbhiXzqQOwK4cO22yElGp2OCmjwVhT3HmxgyPGnJfQ==
@@ -2421,6 +2421,14 @@ colorette@^2.0.10:
   resolved "https://registry.yarnpkg.com/colorette/-/colorette-2.0.19.tgz#cdf044f47ad41a0f4b56b3a0d5b4e6e1a2d5a798"
   integrity sha512-3tlv/dIP7FWvj3BsbHrGLJ6l/oKh1O3TcgBqMn+yyCagOxc23fyzDS6HypQbgxWbkpDnf52p1LuR4eWDQ/K9WQ==
 
+combine-errors@^3.0.3:
+  version "3.0.3"
+  resolved "https://registry.yarnpkg.com/combine-errors/-/combine-errors-3.0.3.tgz#f4df6740083e5703a3181110c2b10551f003da86"
+  integrity sha512-C8ikRNRMygCwaTx+Ek3Yr+OuZzgZjduCOfSQBjbM8V3MfgcjSTeto/GXP6PAwKvJz/v15b7GHZvx5rOlczFw/Q==
+  dependencies:
+    custom-error-instance "2.1.1"
+    lodash.uniqby "4.5.0"
+
 combined-stream@^1.0.8:
   version "1.0.8"
   resolved "https://registry.yarnpkg.com/combined-stream/-/combined-stream-1.0.8.tgz#c3d45a8b34fd730631a110a8a2520682b31d5a7f"
@@ -2707,6 +2715,11 @@ csstype@^3.1.0:
   resolved "https://registry.yarnpkg.com/csstype/-/csstype-3.1.1.tgz#841b532c45c758ee546a11d5bd7b7b473c8c30b9"
   integrity sha512-DJR/VvkAvSZW9bTouZue2sSxDwdTN92uHjqeKVm+0dAqdfNykRzQ95tay8aXMBAAPpUiq4Qcug2L7neoRh2Egw==
 
+custom-error-instance@2.1.1:
+  version "2.1.1"
+  resolved "https://registry.yarnpkg.com/custom-error-instance/-/custom-error-instance-2.1.1.tgz#3cf6391487a6629a6247eb0ca0ce00081b7e361a"
+  integrity sha512-p6JFxJc3M4OTD2li2qaHkDCw9SfMw82Ldr6OC9Je1aXiGfhx2W8p3GaoeaGrPJTUN9NirTM/KTxHWMUdR1rsUg==
+
 de-indent@^1.0.2:
   version "1.0.2"
   resolved "https://registry.yarnpkg.com/de-indent/-/de-indent-1.0.2.tgz#b2038e846dc33baa5796128d0804b455b8c1e21d"
@@ -3931,6 +3944,11 @@ joi@^17.4.0:
     "@sideway/formula" "^3.0.0"
     "@sideway/pinpoint" "^2.0.0"
 
+js-base64@^3.7.2:
+  version "3.7.5"
+  resolved "https://registry.yarnpkg.com/js-base64/-/js-base64-3.7.5.tgz#21e24cf6b886f76d6f5f165bfcd69cc55b9e3fca"
+  integrity sha512-3MEt5DTINKqfScXKfJFrRbxkrnk2AxPWGBL/ycjz4dK8iqiSJ06UxD8jh8xuh6p10TX4t2+7FsBYVxxQbMg+qA==
+
 js-message@1.0.7:
   version "1.0.7"
   resolved "https://registry.yarnpkg.com/js-message/-/js-message-1.0.7.tgz#fbddd053c7a47021871bb8b2c95397cc17c20e47"
@@ -4099,6 +4117,43 @@ locate-path@^6.0.0:
   dependencies:
     p-locate "^5.0.0"
 
+lodash._baseiteratee@~4.7.0:
+  version "4.7.0"
+  resolved "https://registry.yarnpkg.com/lodash._baseiteratee/-/lodash._baseiteratee-4.7.0.tgz#34a9b5543572727c3db2e78edae3c0e9e66bd102"
+  integrity sha512-nqB9M+wITz0BX/Q2xg6fQ8mLkyfF7MU7eE+MNBNjTHFKeKaZAPEzEg+E8LWxKWf1DQVflNEn9N49yAuqKh2mWQ==
+  dependencies:
+    lodash._stringtopath "~4.8.0"
+
+lodash._basetostring@~4.12.0:
+  version "4.12.0"
+  resolved "https://registry.yarnpkg.com/lodash._basetostring/-/lodash._basetostring-4.12.0.tgz#9327c9dc5158866b7fa4b9d42f4638e5766dd9df"
+  integrity sha512-SwcRIbyxnN6CFEEK4K1y+zuApvWdpQdBHM/swxP962s8HIxPO3alBH5t3m/dl+f4CMUug6sJb7Pww8d13/9WSw==
+
+lodash._baseuniq@~4.6.0:
+  version "4.6.0"
+  resolved "https://registry.yarnpkg.com/lodash._baseuniq/-/lodash._baseuniq-4.6.0.tgz#0ebb44e456814af7905c6212fa2c9b2d51b841e8"
+  integrity sha512-Ja1YevpHZctlI5beLA7oc5KNDhGcPixFhcqSiORHNsp/1QTv7amAXzw+gu4YOvErqVlMVyIJGgtzeepCnnur0A==
+  dependencies:
+    lodash._createset "~4.0.0"
+    lodash._root "~3.0.0"
+
+lodash._createset@~4.0.0:
+  version "4.0.3"
+  resolved "https://registry.yarnpkg.com/lodash._createset/-/lodash._createset-4.0.3.tgz#0f4659fbb09d75194fa9e2b88a6644d363c9fe26"
+  integrity sha512-GTkC6YMprrJZCYU3zcqZj+jkXkrXzq3IPBcF/fIPpNEAB4hZEtXU8zp/RwKOvZl43NUmwDbyRk3+ZTbeRdEBXA==
+
+lodash._root@~3.0.0:
+  version "3.0.1"
+  resolved "https://registry.yarnpkg.com/lodash._root/-/lodash._root-3.0.1.tgz#fba1c4524c19ee9a5f8136b4609f017cf4ded692"
+  integrity sha512-O0pWuFSK6x4EXhM1dhZ8gchNtG7JMqBtrHdoUFUWXD7dJnNSUze1GuyQr5sOs0aCvgGeI3o/OJW8f4ca7FDxmQ==
+
+lodash._stringtopath@~4.8.0:
+  version "4.8.0"
+  resolved "https://registry.yarnpkg.com/lodash._stringtopath/-/lodash._stringtopath-4.8.0.tgz#941bcf0e64266e5fc1d66fed0a6959544c576824"
+  integrity sha512-SXL66C731p0xPDC5LZg4wI5H+dJo/EO4KTqOMwLYCH3+FmmfAKJEZCm6ohGpI+T1xwsDsJCfL4OnhorllvlTPQ==
+  dependencies:
+    lodash._basetostring "~4.12.0"
+
 lodash.debounce@^4.0.8:
   version "4.0.8"
   resolved "https://registry.yarnpkg.com/lodash.debounce/-/lodash.debounce-4.0.8.tgz#82d79bff30a67c4005ffd5e2515300ad9ca4d7af"
@@ -4129,11 +4184,24 @@ lodash.merge@^4.6.2:
   resolved "https://registry.yarnpkg.com/lodash.merge/-/lodash.merge-4.6.2.tgz#558aa53b43b661e1925a0afdfa36a9a1085fe57a"
   integrity sha512-0KpjqXRVvrYyCsX1swR/XTK0va6VQkQM6MNo7PqW77ByjAhoARA8EfrP1N4+KlKj8YS0ZUCtRT/YUuhyYDujIQ==
 
+lodash.throttle@^4.1.1:
+  version "4.1.1"
+  resolved "https://registry.yarnpkg.com/lodash.throttle/-/lodash.throttle-4.1.1.tgz#c23e91b710242ac70c37f1e1cda9274cc39bf2f4"
+  integrity sha512-wIkUCfVKpVsWo3JSZlc+8MB5it+2AN5W8J7YVMST30UrvcQNZ1Okbj+rbVniijTWE6FGYy4XJq/rHkas8qJMLQ==
+
 lodash.uniq@^4.5.0:
   version "4.5.0"
   resolved "https://registry.yarnpkg.com/lodash.uniq/-/lodash.uniq-4.5.0.tgz#d0225373aeb652adc1bc82e4945339a842754773"
   integrity sha512-xfBaXQd9ryd9dlSDvnvI0lvxfLJlYAZzXomUYzLKtUeOQvOP5piqAWuGtrhWeqaXK9hhoM/iyJc5AV+XfsX3HQ==
 
+lodash.uniqby@4.5.0:
+  version "4.5.0"
+  resolved "https://registry.yarnpkg.com/lodash.uniqby/-/lodash.uniqby-4.5.0.tgz#a3a17bbf62eeb6240f491846e97c1c4e2a5e1e21"
+  integrity sha512-IRt7cfTtHy6f1aRVA5n7kT8rgN3N1nH6MOWLcHfpWG2SH19E3JksLK38MktLxZDhlAjCP9jpIXkOnRXlu6oByQ==
+  dependencies:
+    lodash._baseiteratee "~4.7.0"
+    lodash._baseuniq "~4.6.0"
+
 lodash@^4.17.14, lodash@^4.17.20, lodash@^4.17.21:
   version "4.17.21"
   resolved "https://registry.yarnpkg.com/lodash/-/lodash-4.17.21.tgz#679591c564c3bffaae8454cf0b3df370c3d6911c"
@@ -5061,6 +5129,15 @@ progress-webpack-plugin@^1.0.12:
     figures "^2.0.0"
     log-update "^2.3.0"
 
+proper-lockfile@^4.1.2:
+  version "4.1.2"
+  resolved "https://registry.yarnpkg.com/proper-lockfile/-/proper-lockfile-4.1.2.tgz#c8b9de2af6b2f1601067f98e01ac66baa223141f"
+  integrity sha512-TjNPblN4BwAWMXU8s9AEz4JmQxnD1NNL7bNOY/AKUzyamc379FWASUhc/K1pL2noVb+XmZKLL68cjzLsiOAMaA==
+  dependencies:
+    graceful-fs "^4.2.4"
+    retry "^0.12.0"
+    signal-exit "^3.0.2"
+
 proxy-addr@~2.0.7:
   version "2.0.7"
   resolved "https://registry.yarnpkg.com/proxy-addr/-/proxy-addr-2.0.7.tgz#f19fe69ceab311eeb94b42e70e8c2070f9ba1025"
@@ -5099,6 +5176,11 @@ qs@6.10.3:
   dependencies:
     side-channel "^1.0.4"
 
+querystringify@^2.1.1:
+  version "2.2.0"
+  resolved "https://registry.yarnpkg.com/querystringify/-/querystringify-2.2.0.tgz#3345941b4153cb9d082d8eee4cda2016a9aef7f6"
+  integrity sha512-FIqgj2EUvTa7R50u0rGsyTftzjYmv/a3hO345bZNrqabNqjtgiDMgmo4mkUjd+nzU5oF3dClKqFIPUKybUyqoQ==
+
 queue-microtask@^1.2.2:
   version "1.2.3"
   resolved "https://registry.yarnpkg.com/queue-microtask/-/queue-microtask-1.2.3.tgz#4929228bbc724dfac43e0efb058caf7b6cfb6243"
@@ -5295,6 +5377,11 @@ restore-cursor@^3.1.0:
     onetime "^5.1.0"
     signal-exit "^3.0.2"
 
+retry@^0.12.0:
+  version "0.12.0"
+  resolved "https://registry.yarnpkg.com/retry/-/retry-0.12.0.tgz#1b42a6266a21f07421d1b0b54b7dc167b01c013b"
+  integrity sha512-9LkiTwjUh6rT555DtE9rTX+BKByPfrMzEAtnlEtdEwr3Nkffwiihqe2bWADg+OQRjt9gl6ICdmB/ZFDCGAtSow==
+
 retry@^0.13.1:
   version "0.13.1"
   resolved "https://registry.yarnpkg.com/retry/-/retry-0.13.1.tgz#185b1587acf67919d63b357349e03537b2484658"
@@ -5863,6 +5950,19 @@ tslib@^2.0.3:
   resolved "https://registry.yarnpkg.com/tslib/-/tslib-2.4.0.tgz#7cecaa7f073ce680a05847aa77be941098f36dc3"
   integrity sha512-d6xOpEDfsi2CZVlPQzGeux8XMwLT9hssAsaPYExaQMuYskwb+x1x7J371tWlbBdWHroy99KnVB6qIkUbs5X3UQ==
 
+tus-js-client@^3.1.0:
+  version "3.1.0"
+  resolved "https://registry.yarnpkg.com/tus-js-client/-/tus-js-client-3.1.0.tgz#20af57d06c23823fbe108ccb3a3dcb7503968cb4"
+  integrity sha512-Hfpc8ho4C9Lhs/OflPUA/nHUHZJUrKD5upoPBq7dYJJ9DQhWocsjJU2RZYfN16Y5n19j9dFDszwCvVZ5sfcogw==
+  dependencies:
+    buffer-from "^1.1.2"
+    combine-errors "^3.0.3"
+    is-stream "^2.0.0"
+    js-base64 "^3.7.2"
+    lodash.throttle "^4.1.1"
+    proper-lockfile "^4.1.2"
+    url-parse "^1.5.7"
+
 type-check@^0.4.0, type-check@~0.4.0:
   version "0.4.0"
   resolved "https://registry.yarnpkg.com/type-check/-/type-check-0.4.0.tgz#07b8203bfa7056c0657050e3ccd2c37730bab8f1"
@@ -5941,6 +6041,14 @@ uri-js@^4.2.2:
   dependencies:
     punycode "^2.1.0"
 
+url-parse@^1.5.7:
+  version "1.5.10"
+  resolved "https://registry.yarnpkg.com/url-parse/-/url-parse-1.5.10.tgz#9d3c2f736c1d75dd3bd2be507dcc111f1e2ea9c1"
+  integrity sha512-WypcfiRhfeUP9vvF0j6rw0J3hrWrw6iZv3+22h6iRMJ/8z1Tj6XfLP4DsUix5MhMPnXpiHDoKyoZ/bdCkwBCiQ==
+  dependencies:
+    querystringify "^2.1.1"
+    requires-port "^1.0.0"
+
 util-deprecate@^1.0.1, util-deprecate@^1.0.2, util-deprecate@~1.0.1:
   version "1.0.2"
   resolved "https://registry.yarnpkg.com/util-deprecate/-/util-deprecate-1.0.2.tgz#450d4dc9fa70de732762fbd2d4a28981419a0ccf"

From 16d6282ec45741015c1868f638bcdd9a4960061c Mon Sep 17 00:00:00 2001
From: janebuoy <janne.jensen@posteo.de>
Date: Wed, 28 Sep 2022 22:46:27 +0200
Subject: [PATCH 2/3] Redesign ChannelProfile

---
 src/components/AdminDrawer.vue     |  20 ++-
 src/components/UploadDialog.vue    |  29 ++++-
 src/router/index.js                |   5 +-
 src/views/Admin/ChannelProfile.vue | 189 ++++++++++++++++++-----------
 vue.config.js                      |  10 +-
 5 files changed, 161 insertions(+), 92 deletions(-)

diff --git a/src/components/AdminDrawer.vue b/src/components/AdminDrawer.vue
index b3c0892..d437667 100644
--- a/src/components/AdminDrawer.vue
+++ b/src/components/AdminDrawer.vue
@@ -8,10 +8,17 @@
   >
     <v-list>
       <v-list-item v-if="channel">
-        <v-list-item-avatar color="black">
-          <v-img v-if="channel.logo" :src="channel.logo" contain />
-          <span v-else>{{ channel.title.slice(0, 2) }}</span>
-        </v-list-item-avatar>
+        <router-link
+          :to="{
+            name: 'ChannelProfile',
+            params: { channelid: selectionAdminChannel },
+          }"
+        >
+          <v-list-item-avatar color="black">
+            <v-img v-if="channel.logo" :src="channel.logo" contain />
+            <span v-else>{{ channel.title.slice(0, 2) }}</span>
+          </v-list-item-avatar></router-link
+        >
 
         <v-spacer />
         <v-menu offset-y>
@@ -93,7 +100,10 @@
         v-for="item in channelMenu"
         :key="item.name"
         link
-        :to="{ name: item.name, params: { channelid: selectionAdminChannel } }"
+        :to="{
+          name: item.name,
+          params: { channel: channel },
+        }"
       >
         <v-list-item-icon>
           <v-icon>{{ item.icon }}</v-icon>
diff --git a/src/components/UploadDialog.vue b/src/components/UploadDialog.vue
index 14701d2..2e8c6b8 100644
--- a/src/components/UploadDialog.vue
+++ b/src/components/UploadDialog.vue
@@ -21,13 +21,25 @@
             outlined
             dense
             label="File input"
+            :success="success"
+            :error="errorMessage !== null"
             :error-messages="errorMessage"
           ></v-file-input>
         </v-form>
-        <v-progress-linear
-          :value="uploadProgress"
-          v-if="uploadProgress > 0"
-        ></v-progress-linear>
+        <v-expand-transition>
+          <v-progress-linear
+            :value="uploadProgress"
+            v-if="uploadProgress > 0"
+            height="20"
+            class="mb-6"
+            color="success darken-1"
+            background-color="neutral lighten-1"
+          >
+            <template #default="{ value }">
+              <strong>{{ Math.ceil(value) }}%</strong>
+            </template>
+          </v-progress-linear>
+        </v-expand-transition>
       </v-card-text>
       <v-divider />
 
@@ -53,8 +65,9 @@ export default {
     return {
       dialog: true,
       fileSrc: {},
-      uploadProgress: 0,
+      uploadProgress: 20,
       errorMessage: null,
+      success: null,
     };
   },
   methods: {
@@ -64,10 +77,14 @@ export default {
     upload() {
       console.log("upload");
       this.errorMessage = null;
+      this.success = false;
       api.Channels.LogoUploader(
         this.channelid,
         this.fileSrc,
-        () => console.log("success"),
+        () => {
+          this.success = true;
+          console.log("success");
+        },
         (percent) => {
           console.log(percent, "%");
           this.uploadProgress = percent;
diff --git a/src/router/index.js b/src/router/index.js
index a6bbe09..8ef8b6d 100644
--- a/src/router/index.js
+++ b/src/router/index.js
@@ -8,14 +8,13 @@ import Stats from "@/views/Admin/Stats.vue"
 import Server from "@/views/Admin/Server.vue"
 import About from "@/views/Admin/About.vue"
 import GlobalStreamSchedule from "@/views/Admin/GlobalStreamSchedule.vue"
-// import ChannelEdit from "@/views/Admin/ChannelEdit.vue"
-import ChannelProfile from "@/views/Admin/ChannelProfile.vue"
 
 // for channel
 import ChannelDistribution from "@/views/Admin/ChannelDistribution.vue"
 import StreamSchedule from "@/views/Admin/StreamSchedule.vue"
 import AdminChannelLive from "@/views/Admin/ChannelLive.vue"
-import ChannelEdit from "@/views/Admin/ChannelEdit.vue"
+// import ChannelEdit from "@/views/Admin/ChannelEdit.vue"
+import ChannelProfile from "@/views/Admin/ChannelProfile.vue"
 import StreamEdit from "@/views/Admin/StreamEdit.vue"
 import ChannelRecordings from "@/views/Admin/ChannelRecordings.vue"
 import RecordingEdit from "@/views/Admin/RecordingEdit.vue"
diff --git a/src/views/Admin/ChannelProfile.vue b/src/views/Admin/ChannelProfile.vue
index 47e1ffe..625d120 100644
--- a/src/views/Admin/ChannelProfile.vue
+++ b/src/views/Admin/ChannelProfile.vue
@@ -1,80 +1,107 @@
 <template>
   <v-container fluid>
-    <v-row no-gutters>
-      <v-col>
-        <h3>Channel Profile</h3>
-        <v-alert
-          v-if="confirmRemove"
+    <v-card>
+      <v-overlay :value="confirmRemove">
+        <v-snackbar
           v-model="confirmRemove"
-          class="mt-2"
-          border="left"
-          type="error"
-          prominent
-          dense
-          dismissible
+          app
+          top
+          max-width="100%"
+          transition="scroll-y-transition"
         >
-          <v-row align="center">
-            <v-col class="grow">
-              Do you really want to remove this channel? This action cannot be
-              undone.
-            </v-col>
-            <v-col class="shrink">
-              <v-btn outlined @click="remove()"> Remove </v-btn>
-            </v-col>
-          </v-row>
-        </v-alert>
-        <v-form class="pa-0 mt-2" @submit="save()">
-          <v-text-field
-            v-model="channel.title"
-            :color="darkMode ? 'grey lighten-3' : 'grey darken-2'"
-            label="Title"
-            outlined
+          <v-alert
+            id="alert"
+            v-model="confirmRemove"
+            class="mb-0"
+            type="error"
+            icon="mdi-alert"
             dense
-            @input="enableSave = true"
-          />
-          <v-text-field
-            v-model="channel.common_name"
-            :color="darkMode ? 'grey lighten-3' : 'grey darken-2'"
-            label="Comman Name (used in URLs)"
-            outlined
-            dense
-            @input="enableSave = true"
-          />
-          <v-text-field
-            v-model.lazy="channel.logo"
-            :color="darkMode ? 'grey lighten-3' : 'grey darken-2'"
-            label="Logo URL"
-            outlined
-            dense
-            @input="enableSave = true"
-          >
-            <template #append-outer>
-              <v-btn icon @click="showUploadDialog = true" class="mt-n1">
-                <v-icon> mdi-plus </v-icon>
-              </v-btn>
-            </template>
-          </v-text-field>
-          <v-btn
-            class="ml-auto mr-1"
-            color="success"
-            :disabled="!enableSave"
-            @click="save()"
+            dismissible
           >
-            <v-icon left> mdi-content-save </v-icon>
-            Save
-          </v-btn>
-          <v-btn
-            v-if="channelid"
-            class="ml-1"
-            color="error"
-            @click="confirmRemove = true"
+            <v-row align="center">
+              <v-col class="grow">
+                Do you really want to remove this channel? This action cannot be
+                undone.
+              </v-col>
+              <v-col class="shrink">
+                <v-btn outlined @click="remove()"> Remove </v-btn>
+              </v-col>
+            </v-row>
+          </v-alert>
+        </v-snackbar>
+      </v-overlay>
+      <v-card-title>Channel Profile</v-card-title>
+      <v-card-text>
+        <div class="d-flex mt-4">
+          <div
+            class="d-flex flex-column mr-2 align-center"
+            style="width: 200px"
           >
-            <v-icon left> mdi-delete </v-icon>
-            Delete
-          </v-btn>
-        </v-form>
-        <v-divider v-if="channelid" class="mt-4 mb-4" />
-        <h4 v-if="channelid">Stream Ingress</h4>
+            <v-avatar class="ma-4" rounded="0" height="128" width="128">
+              <v-img v-if="channel.logo" :src="channel.logo" contain />
+            </v-avatar>
+            <v-btn fab depressed @click="showUploadDialog = true" class="mt-2">
+              <v-icon> mdi-pencil </v-icon>
+            </v-btn>
+          </div>
+          <div class="d-flex flex-grow-1 ml-2">
+            <v-form class="pa-0 mt-2" @submit="save()" style="width: 100%">
+              <v-text-field
+                v-model="channel.title"
+                :color="darkMode ? 'grey lighten-3' : 'grey darken-2'"
+                label="Title"
+                outlined
+                dense
+                @input="enableSave = true"
+              />
+              <v-text-field
+                v-model="channel.common_name"
+                :color="darkMode ? 'grey lighten-3' : 'grey darken-2'"
+                label="Comman Name (used in URLs)"
+                outlined
+                dense
+                @input="enableSave = true"
+              />
+              <v-text-field
+                v-model.lazy="channel.logo"
+                :color="darkMode ? 'grey lighten-3' : 'grey darken-2'"
+                label="Logo URL"
+                outlined
+                dense
+                @input="enableSave = true"
+              >
+              </v-text-field>
+            </v-form>
+          </div>
+        </div>
+      </v-card-text>
+      <v-divider />
+      <v-card-actions class="neutral lighten-1">
+        <v-btn
+          v-if="channelid"
+          class="ml-1"
+          color="error"
+          text
+          @click="confirmRemove = true"
+        >
+          <v-icon left> mdi-delete </v-icon>
+          Delete
+        </v-btn>
+        <v-btn
+          class="ml-auto mr-1"
+          color="success"
+          :disabled="!enableSave"
+          @click="save()"
+        >
+          <v-icon left> mdi-content-save </v-icon>
+          Save
+        </v-btn>
+      </v-card-actions>
+    </v-card>
+    <v-divider v-if="channelid" class="mt-4 mb-4" />
+    <v-card v-if="channelid">
+      <v-card-title>Stream Ingress</v-card-title>
+      <v-card-text>
         <v-simple-table v-if="channelid" dense>
           <template #default>
             <thead>
@@ -129,10 +156,10 @@
         <UploadDialog
           v-if="showUploadDialog"
           :channelid="channelid"
-          @closeSpeakerEditDialog="closeUploadDialog"
+          @closeUploadDialog="closeUploadDialog"
         />
-      </v-col>
-    </v-row>
+      </v-card-text>
+    </v-card>
   </v-container>
 </template>
 
@@ -210,3 +237,19 @@ export default {
   },
 };
 </script>
+
+<style scoped>
+#alert {
+  border-top-left-radius: 0px;
+  border-top-right-radius: 0px;
+}
+.v-snack >>> .v-snack__content {
+  padding: 0 !important;
+}
+.v-snack >>> .v-snack__wrapper {
+  display: block;
+  margin: 0;
+  width: 60% !important;
+  min-height: unset !important;
+}
+</style>
\ No newline at end of file
diff --git a/vue.config.js b/vue.config.js
index fda7d6b..a88ba1e 100644
--- a/vue.config.js
+++ b/vue.config.js
@@ -17,11 +17,11 @@ module.exports = {
 				// target: 'https://media.kukoon.de',
 				changeOrigin: true,
 			},
-			// '^/ws': {
-			// 	target: 'wss://media.kukoon.de',
-			// 	ws: true,
-			// 	changeOrigin: true,
-			// },
+			'^/ws': {
+				target: 'wss://media.kukoon.de',
+				ws: true,
+				changeOrigin: true,
+			},
 		},
 	},
 }

From 2f086d13017b85f04dac283ce2f5410ae8af9744 Mon Sep 17 00:00:00 2001
From: genofire <geno+dev@fireorbit.de>
Date: Fri, 10 Mar 2023 23:18:27 +0100
Subject: [PATCH 3/3] fix: migrate to file upload structure with .url

---
 src/components/AdminDrawer.vue        | 4 ++--
 src/components/Poster.vue             | 6 +++---
 src/components/VideoPlayer.vue        | 2 +-
 src/views/Admin/ChannelEvents.vue     | 2 +-
 src/views/Admin/ChannelLive.vue       | 2 +-
 src/views/Admin/ChannelProfile.vue    | 5 +++--
 src/views/Admin/ChannelRecordings.vue | 2 +-
 src/views/Main/Live.vue               | 2 +-
 src/views/Single.vue                  | 2 +-
 9 files changed, 14 insertions(+), 13 deletions(-)

diff --git a/src/components/AdminDrawer.vue b/src/components/AdminDrawer.vue
index d437667..a910f77 100644
--- a/src/components/AdminDrawer.vue
+++ b/src/components/AdminDrawer.vue
@@ -15,7 +15,7 @@
           }"
         >
           <v-list-item-avatar color="black">
-            <v-img v-if="channel.logo" :src="channel.logo" contain />
+            <v-img v-if="channel.logo" :src="channel.logo.url" contain />
             <span v-else>{{ channel.title.slice(0, 2) }}</span>
           </v-list-item-avatar></router-link
         >
@@ -75,7 +75,7 @@
             :to="{ name: 'AdminChannel', params: { channelid: channel.id } }"
           >
             <v-list-item-avatar color="black" size="24" class="mr-8">
-              <v-img v-if="channel.logo" :src="channel.logo" contain />
+              <v-img v-if="channel.logo" :src="channel.logo.url" contain />
               <span v-else>{{ channel.title.slice(0, 2) }}</span>
             </v-list-item-avatar>
             <v-list-item-content>
diff --git a/src/components/Poster.vue b/src/components/Poster.vue
index ba521d2..d309439 100644
--- a/src/components/Poster.vue
+++ b/src/components/Poster.vue
@@ -19,7 +19,7 @@
       <v-img
         v-if="showPreview"
         v-ripple="{ class: 'neutral--text', center: true }"
-        :src="video.preview"
+        :src="video.preview.url"
         class="white--text align-end"
         gradient="to bottom, rgba(0,0,0,0), rgba(0,0,0,.5)"
         height="100%"
@@ -47,7 +47,7 @@
         <v-img
           v-if="!showPreview"
           v-ripple="{ class: 'neutral--text', center: true }"
-          :src="video.poster"
+          :src="video.poster.url"
           class="white--text align-end"
           gradient="to bottom, rgba(0,0,0,0), rgba(0,0,0,.5)"
           height="100%"
@@ -72,7 +72,7 @@
     <v-img
       v-else
       v-ripple="{ class: 'neutral--text', center: true }"
-      :src="video.poster"
+      :src="video.poster.url"
       class="white--text align-end"
       gradient="to bottom, rgba(0,0,0,0), rgba(0,0,0,.5)"
       height="100%"
diff --git a/src/components/VideoPlayer.vue b/src/components/VideoPlayer.vue
index 78619ca..dcc7409 100644
--- a/src/components/VideoPlayer.vue
+++ b/src/components/VideoPlayer.vue
@@ -18,7 +18,7 @@ export default {
       // Disabled as source is now passed as a prop from parent component
       // source: this.source,
       options: {
-        image: this.poster,
+        image: this.poster.url,
         autoStart: this.autostart,
         sources: this.sources,
         hlsConfig: {
diff --git a/src/views/Admin/ChannelEvents.vue b/src/views/Admin/ChannelEvents.vue
index 83e06ba..d21d4ec 100644
--- a/src/views/Admin/ChannelEvents.vue
+++ b/src/views/Admin/ChannelEvents.vue
@@ -48,7 +48,7 @@
               <tr v-for="item in list" :key="item.id">
                 <td>
                   <v-avatar v-if="item.logo" size="32px">
-                    <img :src="item.logo" />
+                    <img :src="item.logo.url" />
                   </v-avatar>
                 </td>
                 <td>{{ item.name }}</td>
diff --git a/src/views/Admin/ChannelLive.vue b/src/views/Admin/ChannelLive.vue
index e55a601..b3ccc7f 100644
--- a/src/views/Admin/ChannelLive.vue
+++ b/src/views/Admin/ChannelLive.vue
@@ -171,7 +171,7 @@ export default {
       api.Channels.GetStream(this.channelid).then(
         (resp) => {
           this.video = resp.data;
-          if (this.video.poster == "") {
+          if (this.video.poster) {
             this.video.poster = resp.data.channel.logo;
           }
         },
diff --git a/src/views/Admin/ChannelProfile.vue b/src/views/Admin/ChannelProfile.vue
index 625d120..d400684 100644
--- a/src/views/Admin/ChannelProfile.vue
+++ b/src/views/Admin/ChannelProfile.vue
@@ -38,7 +38,7 @@
             style="width: 200px"
           >
             <v-avatar class="ma-4" rounded="0" height="128" width="128">
-              <v-img v-if="channel.logo" :src="channel.logo" contain />
+              <v-img v-if="channel.logo" :src="channel.logo.url" contain />
             </v-avatar>
             <v-btn fab depressed @click="showUploadDialog = true" class="mt-2">
               <v-icon> mdi-pencil </v-icon>
@@ -63,7 +63,8 @@
                 @input="enableSave = true"
               />
               <v-text-field
-                v-model.lazy="channel.logo"
+                v-if="channel.logo"
+                v-model.lazy="channel.logo.url"
                 :color="darkMode ? 'grey lighten-3' : 'grey darken-2'"
                 label="Logo URL"
                 outlined
diff --git a/src/views/Admin/ChannelRecordings.vue b/src/views/Admin/ChannelRecordings.vue
index 17ddc97..80d9831 100644
--- a/src/views/Admin/ChannelRecordings.vue
+++ b/src/views/Admin/ChannelRecordings.vue
@@ -69,7 +69,7 @@
           >
             <template #item.poster="{ item }">
               <v-img
-                :src="item.poster"
+                :src="item.poster.url"
                 alt="Poster"
                 height="56"
                 max-width="100"
diff --git a/src/views/Main/Live.vue b/src/views/Main/Live.vue
index ebfcbea..cb954e3 100644
--- a/src/views/Main/Live.vue
+++ b/src/views/Main/Live.vue
@@ -90,7 +90,7 @@ export default {
       api.Channels.GetStream(this.id).then(
         (resp) => {
           this.video = resp.data;
-          if (this.video.poster == "") {
+          if (this.video.poster) {
             this.video.poster = resp.data.channel.logo;
           }
         },
diff --git a/src/views/Single.vue b/src/views/Single.vue
index 7e4534a..eb45310 100644
--- a/src/views/Single.vue
+++ b/src/views/Single.vue
@@ -64,7 +64,7 @@ export default {
       return api.Channels.GetStream(this.id).then(
         (resp) => {
           this.video = resp.data;
-          if (this.video.poster == "") {
+          if (this.video.poster) {
             this.video.poster = resp.data.channel.logo;
           }
         },