stream page

Author: samipe

src/assets/css/elements.css

@@ -146,9 +146,9 @@ details {
 
 button.theme,
 button.stroke {
-  border: 1px solid var(--color-white);
+  border: 1px solid var(--color-black);
   border-radius: var(--border-radius-rounded-small);
-  color: var(--color-white);
+  color: var(--color-theme);
   font-family: var(--font-title);
   padding: var(--size-2xsmall) var(--size-small);
   text-transform: uppercase;
@@ -159,15 +159,15 @@ button.theme:hover {
   border-color: var(--color-theme);
 }
 button.theme {
-  background-color: var(--color-theme);
+  background-color: var(--color-white);
 }
 button.stroke {
   border: solid 0.05rem var(--color-white);
 }
 button.theme.active {
   border: none;
   background-color: var(--color-theme);
-  color: var(--color-black);
+  color: var(--color-white);
   box-shadow: inset 2px 3px 2px -1px rgba(0, 0, 0, 0.2);
 }
 button.small {

src/components/PretalxSchedule.vue

@@ -55,10 +55,6 @@ import { useFetch } from '@vueuse/core'
 import TalkItem from './TalkItem.vue'
 import type { Break, BreakParsed, PretalxEvent, PretalxSession, ScheduleResponse, SubmissionsResponse } from '@/types/pretalx';
 import {getDate} from 'date-fns'
-import CryptoJS from 'crypto-js'
-import * as jose from 'jose'
-
-
 
 const props = defineProps({
   content: Object as PropType<PretalxSchedule['fields']>

src/router/index.ts

@@ -1,6 +1,7 @@
 import { createRouter, createWebHistory } from 'vue-router'
 import ContentPage from '../views/ContentPage.vue'
 import Archive from '../views/Archive.vue'
+import Stream from '../views/Stream.vue'
 import NotFound from '../views/NotFound.vue'
 import { useStore } from '../store'
 
@@ -25,6 +26,11 @@ const getRoutes = () => {
       component: Archive,
       children: []
     },
+    {
+      path: '/stream',
+      name: 'Stream',
+      component: Stream
+    },
     {
       path: '/cs',
       name: 'CS',

src/store/index.ts

@@ -8,7 +8,9 @@ import type { Page } from '../content';
 export const useStore = defineStore("store", {
   state: () => ({
     pages: [] as Entry<Page>[],
-    entries: [] as Entry[]
+    entries: [] as Entry[],
+    name: undefined as string,
+    token: undefined as string
   })
 });
 

src/utils/ticket.ts

@@ -115,14 +115,16 @@ export function getVideoUrl(code: string): string | undefined {
 
   if (!authenticated) return undefined
 
+  return generateYouTubeUrl(decrypt(maybeUrl))
+}
 
+export function decrypt(hash: string) {
   try {
-    const decrypted = CryptoJS.AES.decrypt(maybeUrl, token.hashKey || '')
+    const decrypted = CryptoJS.AES.decrypt(hash, token.hashKey || '')
     const url = decrypted.toString(CryptoJS.enc.Utf8)
     if (!url) return undefined
-    return generateYouTubeUrl(url)
+    return url
   } catch (e) {
-    console.error(`Error decrypting recording for code: ${code}`, e)
     return undefined
   }
 }

src/views/Stream.vue

@@ -1,17 +1,17 @@
 <template>
-  <div v-if="dataReady && !error">
-    <div class="px-small py-xsmall bg-black row between">
+  <div>
+    <div class="px-small py-xsmall row between">
       <div>
-        <button class="theme small type-small mr-small" :class="selectedDay === 1 && 'active'" @click="selectedDay = 1">Day 1</button>
-        <button class="theme small type-small" :class="selectedDay === 2 && 'active'" @click="selectedDay = 2">Day 2</button>
+        <button class="theme mr-small" :class="selectedDay === 1 && 'active'" @click="selectedDay = 1">Day 1</button>
+        <button class="theme" :class="selectedDay === 2 && 'active'" @click="selectedDay = 2">Day 2</button>
       </div>
-      <button @click="chatShown = !chatShown" class="theme small type-small">
-        {{ chatShown ? 'Hide Q&amp;A' : 'Show Q&amp;A' }}
+      <button @click="showChat = !showChat" class="theme small type-small">
+        {{ showChat ? 'Hide Q&amp;A' : 'Show Q&amp;A' }}
       </button>
     </div>
     <div class="stream-container" :class="isFullScreen && 'fullscreen'">
-    <iframe class="stream col-sm-12" :class="chatShown && 'col-md-9'" :src=streamUrl title="Robocon stream" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen></iframe>
-    <iframe v-show="chatShown" class="chat col-sm-12 col-md-3" :src=chatUrl frameBorder="0" title="Stream chat"></iframe>
+    <iframe class="stream col-sm-12" :class="showChat && 'col-md-9'" :src=streamUrl title="Robocon stream" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen></iframe>
+    <iframe v-show="showChat" class="chat col-sm-12 col-md-3" :src=chatUrl frameBorder="0" title="Stream chat"></iframe>
     </div>
   </div>
   <h1 v-if="dataReady && error" class="color-white mt-2xlarge type-center type-xlarge">
@@ -20,99 +20,32 @@
     <span class="color-theme">AUTH</span>
   </h1>
   <div v-if="!isFullScreen" class="container narrow">
-    <talks24 :hashKey="token.hashKey" :speakers="[speakers]" />
+    <PretalxSchedule :content="{url: 'https://pretalx.com/api/events/robocon-2025/schedules/latest/'}" />
   </div>
 </template>
 
-<script>
-import { Talks24 } from 'Components'
-import CryptoJS from 'crypto-js'
-import * as jose from 'jose'
-export default {
-  components: {
-    Talks24
-  },
-  data: () => ({
-    selectedDay: 2,
-    day1: 'U2FsdGVkX1+iO3u49D3q6rlcds7ZJOz4N8+vuQz+VYo=',
-    day2: 'U2FsdGVkX19TiGQLj7xCUJBO02Zg78fjU1zyOE64GsQ=',
-    chat: 'U2FsdGVkX1/BKQP6AzzQFrb28NyI/BbFuQvgO4Ipq6RMnvdrRMI/qd0Lwxi4grBNerT48tEJF/IKMcxZYMzdrA==',
-    token: {},
-    public: `-----BEGIN PUBLIC KEY-----
-MIICIjANBgkqhkiG9w0BAQEFAAOCAg8AMIICCgKCAgEA1RHu1qgXJ81+2tlBy4UF
-B8OdRsBjWhswMQaS/NhA2yWBaQiQ1YG4Tzen2aNmlTIkTBhSR3hqOnkzPQq77nMs
-KP9HD1WHz/UNici/a/2UwXFy9bOyX+GKnPCtdcvZrIougvW5K7EBeUWcgY68xNQk
-V9vFq4GSczOud7juk62eqqV26esV5tE2c4/J714SYwUl6NqLc7XeQNZMrsRHabIL
-Bzg+A+2kw1jiJpJsJliPCT9T/NiAMrbZk1KR/NQ7uHARclAk13LwLwm5JfOhyKSs
-Qkdfr8rVYuj3DDQCitea269Xy5RsFW/Cqyh3gHzt7bB9auU3UFaAXWPvnPURhTO4
-Yf3c7YrizmpTfDGPIG/7zkegx9nPiBPNIGPq/LpmCC9iawNH7ixOH8ZC5Ijrti0b
-8rMnuJBKysZxIowJAFvd7Zh+soekUei90qQnYwhFO49h7fwXXSq2sGeRfpg99Nu/
-RdqqxM2zCMPpVMWHjxAVIubgNW5ZA33PW1wS075npC3oK+YUh2xt/9A6Ll4AcAOt
-oaCmENEyeZEnHlaEWeXhNPQv1/nZN5Z3Fq3uKWCQRry1HMoOGKrdATfUUIXc6vvk
-nRPuT57RDafiyxjektPLx0z2LvRZZb7lU5G9/+rO2yJ1f65Sd5k0drIb48YZ+OBj
-6IrJDlqg3BaMV5Hr8LdQtY8CAwEAAQ==
------END PUBLIC KEY-----`,
-    dataReady: false,
-    error: false,
-    chatShown: true,
-    speakers: []
-  }),
-  computed: {
-    streamUrl() {
-      const url = this.selectedDay === 1 ? this.day1 : this.day2
-      const code = CryptoJS.AES.decrypt(url, this.token.liveHash).toString(CryptoJS.enc.Utf8)
-      return `https://www.youtube.com/embed/${code}?rel=0&autoplay=1&mute=0&controls=1&origin=https%3A%2F%2Frobocon.io&playsinline=0&showinfo=0&modestbranding=1`
-    },
-    chatUrl() {
-      return CryptoJS.AES.decrypt(this.chat, this.token.liveHash).toString(CryptoJS.enc.Utf8)
-    },
-    isFullScreen() {
-      return this.token.name === 'gather'
-    }
-  },
-  async created() {
-    const today = new Date()
-    if (today.getDate() === 29 && today.getMonth() === 2) {
-      this.selectedDay = 2
-    }
-    const params = new URLSearchParams(window.location.search)
-    const auth = Object.fromEntries(params.entries()).auth || window.localStorage.getItem('auth')
-    const attendee = Object.fromEntries(params.entries()).attendee || window.localStorage.getItem('attendee')
-    if (typeof auth !== 'undefined' && typeof attendee !== 'undefined') {
-      window.history.replaceState({}, document.title, '/stream' + window.location.hash)
-      if (attendee !== 'gather') {
-        window.localStorage.setItem('auth', auth)
-        window.localStorage.setItem('attendee', attendee)
-      }
-      try {
-        const { payload } = await jose.jwtVerify(auth, await jose.importSPKI(this.public, 'RS256'), {
-          issuer: 'pretix'
-        })
-        this.token = payload
-        if (payload.name !== attendee) {
-          console.log('invalid Attendee')
-          this.error = true
-        }
-      } catch (error) {
-        this.error = true
-        console.error(error)
-      }
-    }
-    this.dataReady = true
-    Promise.all([
-      fetch('https://cfp.robocon.io/api/events/robocon-2024/submissions/'),
-      fetch('https://cfp.robocon.io/api/events/robocon-2024/submissions/?offset=25'),
-      fetch('https://cfp.robocon.io/api/events/robocon-2024/submissions/?offset=50')
-    ])
-      .then(async([first, second, third]) => {
-        const f = await first.json()
-        const s = await second.json()
-        const t = await third.json()
-        const arr = [...f.results, ...s.results, ...t.results]
-        this.speakers = arr.flatMap(({ speakers }) => speakers)
-      })
-  }
-}
+<script setup lang="ts">
+import PretalxSchedule from 'Components/PretalxSchedule.vue';
+import { useStore } from 'Store';
+import { decrypt, getVideoUrl } from 'Utils/ticket';
+import { computed, ref } from 'vue';
+
+const day1 = 'U2FsdGVkX1+iO3u49D3q6rlcds7ZJOz4N8+vuQz+VYo='
+const day2 = 'U2FsdGVkX19TiGQLj7xCUJBO02Zg78fjU1zyOE64GsQ='
+const chat = 'U2FsdGVkX1/BKQP6AzzQFrb28NyI/BbFuQvgO4Ipq6RMnvdrRMI/qd0Lwxi4grBNerT48tEJF/IKMcxZYMzdrA=='
+
+const selectedDay = ref(1)
+const showChat = ref(true)
+const selectedStream = ref<string>(null!)
+
+selectedStream.value = day1
+
+const streamUrl = computed(() => getVideoUrl(selectedStream.value))
+const chatUrl = computed(() => decrypt(chat))
+
+const store = useStore()
+const isFullScreen = store.name === 'gather'
+
 </script>
 
 <style scoped>

tsconfig.json

@@ -19,6 +19,7 @@
       "Fonts": ["./src/assets/fonts"],
       "Content": ["./src/content"],
       "Utils/*": ["./src/utils/*"],
+      "Store/*": ["./src/store/*"],
       "Components/*": ["./src/components/*"],
       "Img/*": ["./src/assets/img/*"],
       "Css/*": ["./src/assets/css/*"],

vite.config.ts

@@ -17,6 +17,7 @@ export default defineConfig ({
       Css: path.resolve(__dirname, 'src/assets/css/'),
       Fonts: path.resolve(__dirname, 'src/assets/fonts/'),
       Utils: path.resolve(__dirname, 'src/utils'),
+      Store: path.resolve(__dirname, 'src/store'),
       Content: path.resolve(__dirname, 'src/content/')
     }
   }