File uploader

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",

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.url" contain />
+            <span v-else>{{ channel.title.slice(0, 2) }}</span>
+          </v-list-item-avatar></router-link
+        >
 
         <v-spacer />
         <v-menu offset-y>
@@ -25,7 +32,7 @@
               <v-list-item
                 input-value="false"
                 :to="{
-                  name: 'ChannelEdit',
+                  name: 'ChannelProfile',
                   params: { channelid: selectionAdminChannel },
                 }"
               >
@@ -68,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>
@@ -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>

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%"

src/components/UploadDialog.vue

@@ -0,0 +1,102 @@
+<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"
+            :success="success"
+            :error="errorMessage !== null"
+            :error-messages="errorMessage"
+          ></v-file-input>
+        </v-form>
+        <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 />
+
+      <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: 20,
+      errorMessage: null,
+      success: null,
+    };
+  },
+  methods: {
+    close() {
+      this.$emit("closeUploadDialog", false);
+    },
+    upload() {
+      console.log("upload");
+      this.errorMessage = null;
+      this.success = false;
+      api.Channels.LogoUploader(
+        this.channelid,
+        this.fileSrc,
+        () => {
+          this.success = true;
+          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>

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: {

src/router/index.js

@@ -8,11 +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"
+
 // 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"
@@ -94,7 +96,7 @@ const routes = [
 			{
 				path: "add",
 				name: "ChannelAdd",
-				component: ChannelEdit,
+				component: ChannelProfile,
 			},
 			{
 				path: "stats",
@@ -129,10 +131,10 @@ const routes = [
 				component: AdminChannelLive,
 				props: true,
 			},
-			{
-				path: "edit",
-				name: "ChannelEdit",
-				component: ChannelEdit,
+      {
+				path: "profile",
+				name: "ChannelProfile",
+				component: ChannelProfile,
 				props: true,
 			},
 			{

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))
 		},

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>

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;
           }
         },