Schildbrau 20 (#886)

* Update devapp1.yml

New Release

* Bump async from 2.6.3 to 2.6.4 in /ui/dashboard (#887)

Bumps [async](https://github.com/caolan/async) from 2.6.3 to 2.6.4.
- [Release notes](https://github.com/caolan/async/releases)
- [Changelog](https://github.com/caolan/async/blob/v2.6.4/CHANGELOG.md)
- [Commits](caolan/async@v2.6.3...v2.6.4)

---
updated-dependencies:
- dependency-name: async
  dependency-type: indirect
...

Signed-off-by: dependabot[bot] <support@github.com>

Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com>

* Issue 738 Stream replays (#888)

* fix square frame/no frame video stream

* stream catch up techniques

* type safety

* Issue 889 Video issue (#891)

* modernize foyer

* fix static video dragging issue

* handle video load studio

* on loaded metadata

* Issue 882 System config interface (#893)

* reorder sidebar & typo

* email subject prefix saveable

* load email subject prefix from db

* config value instead of object

* defualt rehearsal status (#896)

* reload config after saving (#895)

* Issue 873 Stage visibility on Foyer (#894)

* stage visibility option

* update foyer display rule

* toggle and explaination (#899)

* move button from green banner (#902)

* fix broken stream url when broadcasting using obs (#905)

* remove button hide (#904)

* studio footer (#903)

Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com>
Co-authored-by: Hồng Phát <hongphat.js@gmail.com>

.github/workflows/devapp1.yml

@@ -6,7 +6,7 @@ name: DEVAPP1 CI
 on:
  # Triggers the workflow on push or approved pull request on R1-2021 branch
  push:
- branches: [ Rheineck-19 ]
+ branches: [ Schildbrau-20 ]
 
  # Allows you to run this workflow manually from the Actions tab
  workflow_dispatch:
@@ -32,7 +32,7 @@ jobs:
  script: |
  cd /home/upstage/upstage/ui/dashboard/
  git fetch
- git checkout Rheineck-19
+ git checkout Schildbrau-20
  git pull
  yarn
  yarn build:dev

config/schema.py

@@ -14,6 +14,7 @@
 
 TERMS_OF_SERVICE = 'TERMS_OF_SERVICE'
 MANUAL = 'MANUAL'
+EMAIL_SUBJECT_PREFIX = 'EMAIL_SUBJECT_PREFIX'
 
 
 class NginxConfig(graphene.ObjectType):
@@ -44,13 +45,16 @@ def get_config(name):
 class SystemConfig(graphene.ObjectType):
  termsOfService = graphene.String()
  manual = graphene.String()
+ esp = graphene.String()
 
  def resolve_termsOfService(self, info):
  return get_config(TERMS_OF_SERVICE)
 
  def resolve_manual(self, info):
  return get_config(MANUAL)
 
+ def resolve_esp(self, info):
+ return get_config(EMAIL_SUBJECT_PREFIX)
 
 class FoyerConfig(graphene.ObjectType):
  title = graphene.String()

mail/mail_utils.py

@@ -5,15 +5,17 @@
 import sys
 import os
 import re
+from config.models import Config
+from config.project_globals import DBSession
 
 from config.settings import (EMAIL_HOST, EMAIL_PORT,
  EMAIL_HOST_USER, EMAIL_HOST_PASSWORD, EMAIL_HOST_DISPLAY_NAME,
  ADMIN_EMAIL, ENV_TYPE)
 
 def send_sync(to, subject, content):
-
+ subject_prefix = DBSession.query(Config).filter(Config.name == 'EMAIL_SUBJECT_PREFIX').first().value
  msg = MIMEText(content, "html")
- msg["Subject"] = f'{ENV_TYPE}: {subject}'
+ msg["Subject"] = f'{subject_prefix}: {subject}'
  # some SMTP servers will do this automatically, not all
  msg["From"] = f'{EMAIL_HOST_DISPLAY_NAME} <{EMAIL_HOST_USER}>'
  msg["To"] = to

stage/schema.py

@@ -37,7 +37,8 @@ class StageAttribute:
  name = graphene.String(description="Stage Name")
  description = graphene.String(description="Stage Description")
  file_location = graphene.String(description="Unique File Location")
- status = graphene.String(description="Live/Upcoming/Rehearsal")
+ status = graphene.String(description="Live/Rehearsal")
+ visibility = graphene.Boolean(description="Show or hide the stage on the Foyer")
  cover = graphene.String(description="Cover image url")
  media = graphene.String(description="Media attached to stage")
  config = graphene.String(description="Stage configurations")
@@ -232,7 +233,9 @@ def mutate(self, info, input):
  continue
  if hasattr(stage, key):
  setattr(stage, key, value)
- elif value:
+ elif value != None:
+ if not value:
+ value = ''
  attribute = stage.attributes.filter(
  StageAttributeModel.name == key
  ).first()

ui/dashboard/.env.localhost

@@ -1,5 +1,5 @@
 VUE_APP_API_ENDPOINT=http://127.0.0.1:5000/api/
 VUE_APP_GRAPHQL_ENDPOINT=http://127.0.0.1:5000/api/
-VUE_APP_STATIC_ASSETS_ENDPOINT=https://dev-app1.upstage.live/static/assets/
+VUE_APP_STATIC_ASSETS_ENDPOINT=https://upstage.live/static/assets/
 VUE_APP_MQTT_NAMESPACE=dev
 VUE_APP_JITSI_ENDPOINT=https://streaming1.upstage.live/

ui/dashboard/jsconfig.json

@@ -5,7 +5,8 @@
  "@/*": [
  "./src/*"
  ]
- }
+ },
+ "jsx": "preserve"
  },
  "exclude": [
  "node_modules",

ui/dashboard/package.json

@@ -1,7 +1,7 @@
 {
  "name": "dashboard",
- "version": "1.19.0",
- "versionAlias": "Rheineck-19",
+ "version": "1.20.0",
+ "versionAlias": "Schildbrau-20",
  "license": "GPL-3.0",
  "private": true,
  "scripts": {

ui/dashboard/src/components/RTMPStream.vue

@@ -4,16 +4,27 @@
 </template>
 
 <script>
-import { computed, ref } from "@vue/runtime-core";
+import { computed, ref, onMounted } from "@vue/runtime-core";
 import { getSubsribeLink } from "@/utils/streaming";
 import { useFlv } from "./objects/Streamer/composable";
 export default {
  props: ["src"],
- setup: (props) => {
+ emits: ['scan'],
+ setup: (props, { emit }) => {
  const video = ref();
  const fullUrl = computed(() => getSubsribeLink(props.src));
 
  const { playable } = useFlv(video, fullUrl);
+ onMounted(() => {
+ video.value.addEventListener("loadedmetadata", () => {
+ emit('scan', {
+ width: video.value.videoWidth,
+ height: video.value.videoHeight,
+ duration: video.value.duration,
+ video: video.value
+ });
+ });
+ })
  return { video, playable };
  },
 };

ui/dashboard/src/components/objects/Streamer/composable.js

@@ -1,4 +1,4 @@
-import { onMounted, ref, watch } from "vue";
+import { onBeforeUnmount, onMounted, ref, watch } from "vue";
 import { cropImageFromCanvas } from "@/utils/canvas";
 import flvjs from "flv.js";
 
@@ -86,11 +86,35 @@ export const useFlv = (video, src) => {
  });
  flvPlayer.attachMediaElement(video.value);
  flvPlayer.load();
+ flvPlayer.on(flvjs.Events.ERROR, () => {
+ playable.value = false
+ });
+ video.value.addEventListener('ended', () => {
+ playable.value = false
+ }, { once: true });
  }
  };
 
  onMounted(initPlayer);
  watch(src, initPlayer);
 
  return { playable }
+}
+
+export const useCatchup = (video) => {
+ const onProgress = () => {
+ if (video.value.buffered.length) {
+ var end = video.value.buffered.end(0);
+ var delta = end - video.value.currentTime;
+ if (delta > 3) {
+ video.value.currentTime = (end - 0.5)
+ }
+ }
+ }
+ onMounted(() => {
+ video.value.addEventListener('progress', onProgress);
+ })
+ onBeforeUnmount(() => {
+ video.value.removeEventListener('progress', onProgress);
+ })
 }

ui/dashboard/src/components/objects/Streamer/index.vue

@@ -7,25 +7,11 @@
 
  <template #render>
  <Loading v-if="loading" height="100%" />
- <video
- v-bind:id="'video' + stream.id"
- v-show="!loading"
- ref="video"
- :src="object.url"
- :muted="localMuted"
- preload="auto"
- disablepictureinpicture
- @loadeddata="loadeddata"
- @ended="stream.isPlaying = false"
- :style="{
+ <video v-bind:id="'video' + stream.id" v-show="!loading" ref="video" :src="object.url" :muted="localMuted"
+ preload="auto" disablepictureinpicture @loadeddata="loadeddata" @ended="stream.isPlaying = false" :style="{
  'border-radius': stream.shape === 'circle' ? '100%' : 0,
- }"
- ></video>
- <button
- v-if="isPlayer"
- class="button is-small mute-icon clickable"
- @mousedown="toggleMuted"
- >
+ }"></video>
+ <button v-if="isPlayer" class="button is-small mute-icon clickable" @mousedown="toggleMuted">
  <i v-if="localMuted" class="fas fa-volume-mute has-text-danger"></i>
  <i v-else class="fas fa-volume-up has-text-primary"></i>
  </button>
@@ -38,7 +24,7 @@
 import { computed, reactive, ref, watch } from "vue";
 import Object from "../Object.vue";
 import { useStore } from "vuex";
-import { useFlv } from "./composable";
+import { useFlv, useCatchup } from "./composable";
 import { getSubsribeLink } from "@/utils/streaming";
 import Loading from "@/components/Loading.vue";
 import MenuContent from '../Avatar/ContextMenu'
@@ -78,7 +64,15 @@ export default {
 
  if (props.object.isRTMP) {
  const fullUrl = computed(() => getSubsribeLink(props.object.url));
- useFlv(video, fullUrl);
+ useCatchup(video);
+ const { playable } = useFlv(video, fullUrl);
+
+ watch(playable, value => {
+ console.log("playable", value);
+ if (!value) {
+ store.dispatch("stage/deleteObject", props.object);
+ }
+ })
  }
 
  const clip = (shape) => {

ui/dashboard/src/components/stage/Entry.vue

@@ -0,0 +1,70 @@
+<template>
+ <div class="p-4">
+ <router-link :to="`/${stage.fileLocation}`" class="stage">
+ <img class="cover" :src="coverImage(stage.cover)" lazy>
+ <PlayerAudienceCounter :stage-url="stage.fileLocation" class="counter" />
+ <span class="name">{{ stage.name }}</span>
+ </router-link>
+ </div>
+</template>
+
+<script setup>
+import { defineProps } from 'vue';
+import config from "@/../vue.config";
+import PlayerAudienceCounter from "@/components/stage/PlayerAudienceCounter";
+import { absolutePath } from '@/utils/common';
+
+const props = defineProps({
+ stage: {
+ type: Object,
+ required: true,
+ },
+ fallbackCover: {
+ type: String,
+ },
+});
+console.log(props.fallbackCover, `${config.publicPath}img/${props.fallbackCover}`);
+const coverImage = (src) => src ? absolutePath(src) : `${config.publicPath}img/${props.fallbackCover}`;
+</script>
+
+<style lang="scss" scoped>
+@import "@/styles/bulma";
+@import "@/styles/mixins";
+
+.stage {
+ @include textShadow;
+ position: relative;
+ font-weight: bold;
+ font-size: 25px;
+ border: 1px solid $black;
+ border-top: 10px solid $primary;
+ display: flex;
+ justify-content: center;
+ align-items: center;
+ width: 100%;
+ box-shadow: 10px 5px 0 0 $black;
+ color: white;
+ border-radius: 12px;
+ overflow: hidden;
+
+ .cover {
+ width: 100%;
+ height: 100%;
+ min-height: 200px;
+ background-size: cover;
+ }
+
+ .name {
+ position: absolute;
+ z-index: 10;
+ padding: 2rem;
+ }
+
+ .counter {
+ position: absolute;
+ right: 10px;
+ top: 10px;
+ width: auto !important;
+ }
+}
+</style>

ui/dashboard/src/components/stage/Toolbox/tools/Streams/index.vue

@@ -1,9 +1,9 @@
 <template>
- <div v-for="stream in streams" :key="stream">
- <Skeleton :data="stream">
+ <div v-for="stream in streams" :key="stream" :class="{ 'has-background-warning': !stream.ready && stream.alive }">
+ <Skeleton :data="stream" :nodrop="stream.isRTMP && !stream.ready">
  <template v-if="stream.isRTMP">
  <div class="centered">
- <RTMPStream v-if="stream.alive" :src="stream.url"></RTMPStream>
+ <RTMPStream v-if="stream.alive" :src="stream.url" @scan="scanVideo($event, stream)"></RTMPStream>
  <QRCodePopup v-else :stream="stream" />
  </div>
  </template>
@@ -60,8 +60,10 @@ export default {
  const index = res.findIndex((s) => s.url === stream.url);
  if (index >= 0) {
  res[index].alive = true;
- res[index].w = stream.w
- res[index].h = stream.h
+ if (stream.w > 0 && stream.h > 0) {
+ res[index].w = stream.w
+ res[index].h = stream.h
+ }
  } else {
  if (autoDetect.value) {
  res.push(stream);
@@ -72,20 +74,38 @@ export default {
  return res;
  });
 
- return { streams, loading, fetchRunningStreams, autoDetect };
+ const scanVideo = ({ width, height }, stream) => {
+ console.log(stream, width, height)
+ if (!stream.ready) {
+ Object.assign(stream, {
+ w: 100 * width / height,
+ h: 100,
+ ready: true
+ })
+ }
+ }
+
+ return { streams, loading, fetchRunningStreams, autoDetect, scanVideo };
  },
 };
 </script>
 
 <style lang="scss" scoped>
 @import "@/styles/mixins.scss";
+
 .fas.fa-plus {
  @include gradientText(#30ac45, #6fb1fc);
 }
+
 video {
  height: 100%;
 }
+
 .centered {
  margin: auto;
 }
+
+.pending-stream {
+ cursor: not-allowed;
+}
 </style>