From de1458e6b549b2c83e843b30f2c987bbb3dca07b Mon Sep 17 00:00:00 2001
From: genofire <geno+dev@fireorbit.de>
Date: Wed, 1 Mar 2023 19:00:22 +0100
Subject: [PATCH] feat: admin live look

---
 src/components/AdminDrawer.vue  |  13 ++-
 src/router/index.js             |   9 +-
 src/views/Admin/ChannelEdit.vue |  50 ---------
 src/views/Admin/ChannelLive.vue | 187 ++++++++++++++++++++++++++++++++
 src/views/Main/Live.vue         |   3 -
 5 files changed, 204 insertions(+), 58 deletions(-)
 create mode 100644 src/views/Admin/ChannelLive.vue

diff --git a/src/components/AdminDrawer.vue b/src/components/AdminDrawer.vue
index 93693e7..9fbb7e5 100644
--- a/src/components/AdminDrawer.vue
+++ b/src/components/AdminDrawer.vue
@@ -151,15 +151,20 @@ export default {
       channels: [],
       channelMenu: [
         {
-          name: "StreamSchedule",
+          name: "AdminChannelLive",
           icon: "mdi-broadcast",
-          title: "Stream Schedule",
+          title: "Live",
         },
         {
           name: "ChannelDistribution",
-          icon: "mdi-vector-polyline",
+          icon: "mdi-multicast",
           title: "Distribution",
         },
+        {
+          name: "StreamSchedule",
+          icon: "mdi-calendar",
+          title: "Stream Schedule",
+        },
         { name: "ChannelRecordings", icon: "mdi-video", title: "Recordings" },
         {
           name: "ChannelSpeakers",
@@ -171,7 +176,7 @@ export default {
       globalMenu: [
         {
           name: "Global Stream Schedule",
-          icon: "mdi-broadcast",
+          icon: "mdi-calendar",
           title: "Global Stream Schedule",
         },
         {
diff --git a/src/router/index.js b/src/router/index.js
index 624fcd6..413487a 100644
--- a/src/router/index.js
+++ b/src/router/index.js
@@ -8,10 +8,11 @@ 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"
 // 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 StreamEdit from "@/views/Admin/StreamEdit.vue"
 import ChannelRecordings from "@/views/Admin/ChannelRecordings.vue"
 import RecordingEdit from "@/views/Admin/RecordingEdit.vue"
@@ -122,6 +123,12 @@ const routes = [
 				name: "AdminChannel",
 				redirect: "streams",
 			},
+			{
+				path: "live",
+				name: "AdminChannelLive",
+				component: AdminChannelLive,
+				props: true,
+			},
 			{
 				path: "edit",
 				name: "ChannelEdit",
diff --git a/src/views/Admin/ChannelEdit.vue b/src/views/Admin/ChannelEdit.vue
index 15ff818..34293b3 100644
--- a/src/views/Admin/ChannelEdit.vue
+++ b/src/views/Admin/ChannelEdit.vue
@@ -67,52 +67,6 @@
             Delete
           </v-btn>
         </v-form>
-        <v-divider v-if="channelid" class="mt-4 mb-4" />
-        <h4 v-if="channelid">Stream Ingress</h4>
-        <v-simple-table v-if="channelid" dense>
-          <template #default>
-            <thead>
-              <tr>
-                <th class="text-left">Description</th>
-                <th class="text-left">Value</th>
-              </tr>
-            </thead>
-            <tbody>
-              <tr>
-                <td>RTMP Complete Link</td>
-                <td>
-                  <code>{{ ingressRTMP }}</code>
-                </td>
-              </tr>
-              <tr>
-                <td>RTMP URL</td>
-                <td>
-                  <code>{{ ingressRTMP.slice(0, ingressRTMP.length -ingressRTMP.split("/").slice(-1)[0].length-1) }}</code>
-                </td>
-              </tr>
-              <tr>
-                <td>Secret</td>
-                <td>
-                  <code>{{ ingressRTMP.split("/").slice(-1)[0] }}</code>
-                </td>
-              </tr>
-              <tr>
-                <td>
-                  Stream from Browser, by using this WebRTC-URL in Input like
-                  <a
-                    href="https://demo.ovenplayer.com/demo_input.html"
-                    target="_blank"
-                  >
-                    OvenPlayer Demo Input
-                  </a>
-                </td>
-                <td>
-                  <code>{{ ingressWS }}</code>
-                </td>
-              </tr>
-            </tbody>
-          </template>
-        </v-simple-table>
       </v-col>
     </v-row>
   </v-container>
@@ -128,8 +82,6 @@ export default {
   props: ["channelid"],
   data() {
     return {
-      ingressRTMP: "",
-      ingressWS: "",
       channel: {},
       channelFormDefault: {},
       enableSave: false,
@@ -178,8 +130,6 @@ export default {
       api.Channels.Get(this.channelid).then(
         (response) => {
 		this.channel = response.data.data;
-		this.ingressRTMP = response.data.ingress.rtmp;
-		this.ingressWS = response.data.ingress.webrtc;
 	});
     },
   },
diff --git a/src/views/Admin/ChannelLive.vue b/src/views/Admin/ChannelLive.vue
new file mode 100644
index 0000000..5c8cea8
--- /dev/null
+++ b/src/views/Admin/ChannelLive.vue
@@ -0,0 +1,187 @@
+<template>
+  <v-container fluid>
+    <v-row no-gutters>
+      <v-col>
+        <h3>Channel</h3>
+        <h4>Stream Ingress</h4>
+        <v-simple-table dense>
+          <template #default>
+            <thead>
+              <tr>
+                <th class="text-left">Description</th>
+                <th class="text-left">Value</th>
+              </tr>
+            </thead>
+            <tbody>
+              <tr>
+                <td>RTMP Complete Link</td>
+                <td>
+                  <code>{{ ingressRTMP }}</code>
+                </td>
+              </tr>
+              <tr>
+                <td>RTMP URL</td>
+                <td>
+                  <code>{{ ingressRTMP.slice(0, ingressRTMP.length -ingressRTMP.split("/").slice(-1)[0].length-1) }}</code>
+                </td>
+              </tr>
+              <tr>
+                <td>Secret</td>
+                <td>
+                  <code>{{ ingressRTMP.split("/").slice(-1)[0] }}</code>
+                </td>
+              </tr>
+              <tr>
+                <td>
+                  Stream from Browser, by using this WebRTC-URL in Input like
+                  <a
+                    href="https://demo.ovenplayer.com/demo_input.html"
+                    target="_blank"
+                  >
+                    OvenPlayer Demo Input
+                  </a>
+                </td>
+                <td>
+                  <code>{{ ingressWS }}</code>
+                </td>
+              </tr>
+            </tbody>
+          </template>
+        </v-simple-table>
+      </v-col>
+    </v-row>
+    <v-row no-gutters>
+      <v-col cols="12" md="8" class="d-flex flex-column">
+        <v-chip
+          v-if="video !== null && video.running"
+          class="ma-2"
+          text-color="white"
+          color="red"
+        >Live</v-chip>
+        <v-chip
+          v-else
+          class="ma-2"
+          text-color="white"
+          color="purple"
+        >Preview</v-chip>
+        <VideoPlayerWrapper
+          ref="player"
+          :video="video"
+          :sources="sources"
+          :autostart="true"
+          class="mx-n2"
+        />
+      </v-col>
+      <v-col cols="12" md="4">
+        <v-chip
+          v-if="video === null || !video.chat"
+          class="ma-2"
+          color="purple"
+          text-color="white"
+        >Disabled</v-chip>
+        <ChatBox class="ma-2" :room="video.channel.id" />
+      </v-col>
+    </v-row>
+  </v-container>
+</template>
+
+<script>
+import { mapGetters } from "vuex";
+import ChatBox from "@/components/ChatBox";
+import VideoPlayerWrapper from "@/components/VideoPlayerWrapper";
+
+import { api } from "@/services/api.js";
+import { websocket } from "@/services/websocket.js";
+
+export default {
+  name: "AdminChannelLive",
+  components: {
+    ChatBox,
+    VideoPlayerWrapper,
+  },
+  props: ["channelid"],
+  data() {
+    return {
+      // Info Box
+      ingressRTMP: "",
+      ingressWS: "",
+      // Stream
+      sources: "",
+      video: null,
+    };
+  },
+  computed: {
+    ...mapGetters(["darkMode"]),
+  },
+  watch: {
+    channelid() {
+      this.init();
+      this.load();
+    },
+  },
+  created() {
+      this.init();
+    this.load();
+  },
+  methods: {
+    init() {
+      api.Channels.Get(this.channelid).then((resp) => {
+        this.ingressRTMP = resp.data.ingress.rtmp;
+        this.ingressWS = resp.data.ingress.webrtc;
+        this.sources = resp.data.stream_sources;
+        websocket.joinHandler(
+          resp.data.data.id,
+          "status",
+          "live for status",
+          (ev) => {
+            this.$set(this.video, "viewers", ev.viewers);
+            this.$set(this.video, "running", ev.running);
+            if (ev.stream != this.video.id) {
+              if (ev.stream == "00000000-0000-0000-0000-000000000000") {
+                console.log(
+                  "load stream description - no new",
+                  ev.stream,
+                  this.video.channel.id
+                );
+              } else {
+                console.log(
+                  "load stream description - next",
+                  ev.stream,
+                  this.video.channel.id
+                );
+              }
+              this.load();
+              this.$refs.player.play();
+            }
+          }
+        );
+      });
+    },
+    load() {
+      api.Channels.GetStream(this.channelid).then(
+        (resp) => {
+          this.video = resp.data;
+          if (this.video.poster == "") {
+            this.video.poster = resp.data.channel.logo;
+          }
+        },
+        () => {
+          api.Channels.Get(this.id).then((resp) => {
+            this.video = {
+              id: "00000000-0000-0000-0000-000000000000",
+              channel: resp.data.data,
+              poster: resp.data.data.logo,
+              lang: {
+                title: "No Stream Live",
+                subtitle: "no event scheduled",
+                short: "This Channel has no stream event scheduled",
+                long: "This Channel has no stream event scheduled",
+              },
+            };
+          });
+        }
+      );
+    },
+  },
+};
+</script>
diff --git a/src/views/Main/Live.vue b/src/views/Main/Live.vue
index 4781984..ebfcbea 100644
--- a/src/views/Main/Live.vue
+++ b/src/views/Main/Live.vue
@@ -42,9 +42,6 @@ export default {
     return {
       video: null,
       sources: "",
-      viewers: 0,
-      tagsPosition: "top",
-      isRunning: true,
     };
   },
   watch: {