this makes me sad

Caddyfile

@@ -0,0 +1,23 @@
+{
+  auto_https off
+  http_port 8080
+  https_port 8443
+  servers :8080 {
+    protocols h1
+  }
+}
+
+:8080 {
+  handle /api/* {
+    reverse_proxy localhost:8000
+  }
+  handle /static/* {
+    reverse_proxy localhost:8000
+  }
+  handle /admin* {
+    reverse_proxy localhost:8000
+  }
+  handle {
+    reverse_proxy localhost:3000
+  }
+}

docker-compose.yaml

@@ -59,3 +59,10 @@ services:
       - 8888:8888
     volumes:
       - ./srs.conf:/usr/local/srs/conf/docker.conf:ro
+  concierge:
+    image: git.chaoswest.tv/cwtv/concierge:latest
+    volumes:
+      - /var/run/docker.sock:/var/run/docker.sock
+    environment:
+      CONCIERGE_ENDPOINT: "http://app"
+      CONCIERGE_IDENTITY: "ee463ecf-a0cf-4ca1-a1d6-2cbf1726d59d"

frontend/.browserslistrc

@@ -0,0 +1,4 @@
+> 1%
+last 2 versions
+not dead
+not ie 11

frontend/.editorconfig

@@ -0,0 +1,5 @@
+[*.{js,jsx,ts,tsx,vue}]
+indent_style = space
+indent_size = 2
+trim_trailing_whitespace = true
+insert_final_newline = true

frontend/.eslintrc.js

@@ -0,0 +1,10 @@
+module.exports = {
+  root: true,
+  env: {
+    node: true,
+  },
+  extends: [
+    'plugin:vue/vue3-essential',
+    'eslint:recommended',
+  ],
+}

frontend/.gitignore

@@ -0,0 +1,22 @@
+.DS_Store
+node_modules
+/dist
+
+# local env files
+.env.local
+.env.*.local
+
+# Log files
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+pnpm-debug.log*
+
+# Editor directories and files
+.idea
+.vscode
+*.suo
+*.ntvs*
+*.njsproj
+*.sln
+*.sw?

frontend/README.md

@@ -0,0 +1,79 @@
+# Vuetify (Default)
+
+This is the official scaffolding tool for Vuetify, designed to give you a head start in building your new Vuetify application. It sets up a base template with all the necessary configurations and standard directory structure, enabling you to begin development without the hassle of setting up the project from scratch.
+
+## ❗️ Important Links
+
+- 📄 [Docs](https://vuetifyjs.com/)
+- 🚨 [Issues](https://issues.vuetifyjs.com/)
+- 🏬 [Store](https://store.vuetifyjs.com/)
+- 🎮 [Playground](https://play.vuetifyjs.com/)
+- 💬 [Discord](https://community.vuetifyjs.com)
+
+## 💿 Install
+
+Set up your project using your preferred package manager. Use the corresponding command to install the dependencies:
+
+| Package Manager                                                | Command        |
+|---------------------------------------------------------------|----------------|
+| [yarn](https://yarnpkg.com/getting-started)                   | `yarn install` |
+| [npm](https://docs.npmjs.com/cli/v7/commands/npm-install)     | `npm install`  |
+| [pnpm](https://pnpm.io/installation)                          | `pnpm install` |
+| [bun](https://bun.sh/#getting-started)                        | `bun install`  |
+
+After completing the installation, your environment is ready for Vuetify development.
+
+## ✨ Features
+
+- 🖼️ **Optimized Front-End Stack**: Leverage the latest Vue 3 and Vuetify 3 for a modern, reactive UI development experience. [Vue 3](https://v3.vuejs.org/) | [Vuetify 3](https://vuetifyjs.com/en/)
+- 🗃️ **State Management**: Integrated with [Pinia](https://pinia.vuejs.org/), the intuitive, modular state management solution for Vue.
+- 🚦 **Routing and Layouts**: Utilizes Vue Router for SPA navigation and vite-plugin-vue-layouts for organizing Vue file layouts. [Vue Router](https://router.vuejs.org/) | [vite-plugin-vue-layouts](https://github.com/JohnCampionJr/vite-plugin-vue-layouts)
+- ⚡ **Next-Gen Tooling**: Powered by Vite, experience fast cold starts and instant HMR (Hot Module Replacement). [Vite](https://vitejs.dev/)
+- 🧩 **Automated Component Importing**: Streamline your workflow with unplugin-vue-components, automatically importing components as you use them. [unplugin-vue-components](https://github.com/antfu/unplugin-vue-components)
+
+These features are curated to provide a seamless development experience from setup to deployment, ensuring that your Vuetify application is both powerful and maintainable.
+
+## 💡 Usage
+
+This section covers how to start the development server and build your project for production.
+
+### Starting the Development Server
+
+To start the development server with hot-reload, run the following command. The server will be accessible at [http://localhost:3000](http://localhost:3000):
+
+```bash
+yarn dev
+```
+
+(Repeat for npm, pnpm, and bun with respective commands.)
+
+> Add NODE_OPTIONS='--no-warnings' to suppress the JSON import warnings that happen as part of the Vuetify import mapping. If you are on Node [v21.3.0](https://nodejs.org/en/blog/release/v21.3.0) or higher, you can change this to NODE_OPTIONS='--disable-warning=5401'. If you don't mind the warning, you can remove this from your package.json dev script.
+
+### Building for Production
+
+To build your project for production, use:
+
+```bash
+yarn build
+```
+
+(Repeat for npm, pnpm, and bun with respective commands.)
+
+Once the build process is completed, your application will be ready for deployment in a production environment.
+
+## 💪 Support Vuetify Development
+
+This project is built with [Vuetify](https://vuetifyjs.com/en/), a UI Library with a comprehensive collection of Vue components. Vuetify is an MIT licensed Open Source project that has been made possible due to the generous contributions by our [sponsors and backers](https://vuetifyjs.com/introduction/sponsors-and-backers/). If you are interested in supporting this project, please consider:
+
+- [Requesting Enterprise Support](https://support.vuetifyjs.com/)
+- [Sponsoring John on Github](https://github.com/users/johnleider/sponsorship)
+- [Sponsoring Kael on Github](https://github.com/users/kaelwd/sponsorship)
+- [Supporting the team on Open Collective](https://opencollective.com/vuetify)
+- [Becoming a sponsor on Patreon](https://www.patreon.com/vuetify)
+- [Becoming a subscriber on Tidelift](https://tidelift.com/subscription/npm/vuetify)
+- [Making a one-time donation with Paypal](https://paypal.me/vuetify)
+
+## 📑 License
+[MIT](http://opensource.org/licenses/MIT)
+
+Copyright (c) 2016-present Vuetify, LLC

frontend/index.html

@@ -0,0 +1,16 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+  <meta charset="UTF-8" />
+  <link rel="icon" href="/favicon.ico" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  <title>Portier</title>
+</head>
+
+<body>
+  <div id="app"></div>
+  <script type="module" src="/src/main.js"></script>
+</body>
+
+</html>

frontend/jsconfig.json

@@ -0,0 +1,20 @@
+{
+  "compilerOptions": {
+    "allowJs": true,
+    "target": "es5",
+    "module": "esnext",
+    "baseUrl": "./",
+    "moduleResolution": "node",
+    "paths": {
+      "@/*": [
+        "src/*"
+      ]
+    },
+    "lib": [
+      "esnext",
+      "dom",
+      "dom.iterable",
+      "scripthost"
+    ]
+  }
+}

frontend/package.json

@@ -0,0 +1,38 @@
+{
+  "name": "frontend",
+  "version": "0.0.0",
+  "scripts": {
+    "dev": "vite",
+    "build": "vite build",
+    "preview": "vite preview",
+    "lint": "eslint . --fix --ignore-path .gitignore"
+  },
+  "dependencies": {
+    "@mdi/font": "7.0.96",
+    "@tanstack/vue-query": "^5.28.4",
+    "@tanstack/vue-query-devtools": "^5.28.4",
+    "axios": "^1.6.8",
+    "core-js": "^3.34.0",
+    "gravatar-url": "^4.0.1",
+    "roboto-fontface": "*",
+    "vue": "^3.3.0",
+    "vuetify": "^3.0.0"
+  },
+  "devDependencies": {
+    "@vitejs/plugin-vue": "^5.0.4",
+    "eslint": "^8.57.0",
+    "eslint-config-standard": "^17.1.0",
+    "eslint-plugin-import": "^2.29.1",
+    "eslint-plugin-n": "^16.6.2",
+    "eslint-plugin-node": "^11.1.0",
+    "eslint-plugin-promise": "^6.1.1",
+    "eslint-plugin-vue": "^9.22.0",
+    "sass": "^1.71.1",
+    "unplugin-fonts": "^1.1.1",
+    "unplugin-vue-components": "^0.26.0",
+    "unplugin-vue-router": "^0.8.4",
+    "vite": "^5.1.5",
+    "vite-plugin-vuetify": "^2.0.3",
+    "vue-router": "^4.3.0"
+  }
+}

frontend/src/App.vue

@@ -0,0 +1,17 @@
+<template>
+  <v-app>
+    <MainNavigation />
+    <SecondaryNavigation />
+    <v-main>
+      <v-container>
+        <v-row>
+          <v-spacer />
+          <v-col cols="12" lg="10" xl="8">
+            <router-view />
+          </v-col>
+          <v-spacer />
+        </v-row>
+      </v-container>
+    </v-main>
+  </v-app>
+</template>

frontend/src/client/client.js

@@ -0,0 +1,58 @@
+import axios from "axios"
+
+axios.defaults.xsrfCookieName = "csrftoken"
+axios.defaults.xsrfHeaderName = "X-CSRFTOKEN"
+
+const apiBase = "/api/v2/"
+
+const sleep = m => new Promise(r => setTimeout(r, m))
+
+const returnDataIfNotError = async (response) => {
+  if (response.status >= 400) {
+    throw new Error(response.data.detail || "An error occurred")
+  }
+  await sleep(500)
+  return response.data
+}
+
+const getMe = async () => {
+  return await axios.get(`${apiBase}me`)
+    .then(res => returnDataIfNotError(res))
+}
+
+const listStreams = async (filter = null) => {
+  return await axios.get(`${apiBase}config/streams`)
+    .then(res => returnDataIfNotError(res))
+}
+
+const getStream = async (id) => {
+  return await axios.get(`${apiBase}config/streams/${id}`)
+    .then(res => returnDataIfNotError(res))
+}
+
+const deleteStream = async (id) => {
+  return await axios.delete(`${apiBase}config/streams/${id}`)
+    .then(res => returnDataIfNotError(res))
+}
+
+const createStream = async (data) => {
+  return await axios.post(`${apiBase}config/streams`, data)
+    .then(res => returnDataIfNotError(res))
+}
+
+const getRestream = async (id) => {
+  return await axios.get(`${apiBase}config/restreams/${id}`)
+    .then(res => returnDataIfNotError(res))
+}
+
+const listRestreams = async () => {
+  return await axios.get(`${apiBase}config/restreams`)
+    .then(res => returnDataIfNotError(res))
+}
+
+const patchRestream = async (id, data) => {
+  return await axios.patch(`${apiBase}config/restreams/${id}`, data)
+    .then(res => returnDataIfNotError(res))
+}
+
+export { getMe, listStreams, getStream, deleteStream, createStream, getRestream, listRestreams, patchRestream }

frontend/src/components/MainNavigation.vue

@@ -0,0 +1,38 @@
+<template>
+  <v-navigation-drawer permanent rail theme="dark" class="elevation-2">
+    <v-list density="compact">
+      <v-list-item link :to="{name: 'HomeView' }" :active="false">
+        <v-icon icon="mdi-grain" color="blue-lighten-5"></v-icon>
+      </v-list-item>
+    </v-list>
+    <template v-slot:append>
+      <v-list density="compact">
+        <v-list-item to="/profile">
+          <v-avatar color="blue-lighten-2" v-if="data">
+            <v-img :src="gravatarUrl(data.email)"></v-img>
+          </v-avatar>
+        </v-list-item>
+        <v-list-item prepend-icon="mdi-theme-light-dark" @click="toggleTheme" :active="false"></v-list-item>
+      </v-list>
+    </template>
+  </v-navigation-drawer>
+</template>
+
+<script setup>
+import { ref } from 'vue'
+import { useQuery } from '@tanstack/vue-query'
+import { getMe } from '@/client/client'
+import gravatarUrl from 'gravatar-url'
+
+import { useTheme } from 'vuetify'
+
+const theme = useTheme()
+
+function toggleTheme () {
+  theme.global.name.value = theme.global.current.value.dark ? 'light' : 'dark'
+}
+const { data, error, isFetching, isPending, isSuccess } = useQuery({
+  queryKey: ['me'],
+  queryFn: () => getMe(),
+})
+</script>

frontend/src/components/README.md

@@ -0,0 +1,35 @@
+# Components
+
+Vue template files in this folder are automatically imported.
+
+## 🚀 Usage
+
+Importing is handled by [unplugin-vue-components](https://github.com/unplugin/unplugin-vue-components). This plugin automatically imports `.vue` files created in the `src/components` directory, and registers them as global components. This means that you can use any component in your application without having to manually import it.
+
+The following example assumes a component located at `src/components/MyComponent.vue`:
+
+```vue
+<template>
+  <div>
+    <MyComponent />
+  </div>
+</template>
+
+<script lang="ts" setup>
+  //
+</script>
+```
+
+When your template is rendered, the component's import will automatically be inlined, which renders to this:
+
+```vue
+<template>
+  <div>
+    <MyComponent />
+  </div>
+</template>
+
+<script lang="ts" setup>
+  import MyComponent from '@/components/MyComponent.vue'
+</script>
+```

frontend/src/components/RestreamListItem.vue

@@ -0,0 +1,20 @@
+<template>
+  <v-list-item :lines="lines" :to="{ name: 'StreamDetailView', params: { id: item.id }}" prepend-icon="mdi-multicast">
+    <v-list-item-title>
+      {{ item.name }}
+    </v-list-item-title>
+    <v-list-item-subtitle>
+      {{ item.id }}
+    </v-list-item-subtitle>
+  </v-list-item>
+</template>
+
+<script setup>
+const props = defineProps({
+  item: Object,
+  lines: {
+    type: String,
+    default: 'one',
+  },
+})
+</script>

frontend/src/components/RestreamListItemToggle.vue

@@ -0,0 +1,43 @@
+<template>
+  <v-btn
+    :icon="item.active ? 'mdi-check' : 'mdi-close'"
+    variant="tonal"
+    density="comfortable"
+    rounded="1"
+    :color="item.active ? 'green' : 'red'"
+    :loading="isPending"
+    @click="toggleActive(item)"
+    v-if="item"
+    >
+  </v-btn>
+  <v-skeleton-loader type="button" variant="tonal" density="comfortable" rounded="1" color="gray" icon="mdi-sandglass" v-else />
+</template>
+
+<script setup>
+import { defineProps, computed, toRaw } from 'vue'
+import { useMutation, useQuery } from '@tanstack/vue-query'
+import { getRestream, patchRestream } from '@/client/client'
+
+
+const props = defineProps({
+  id: Number,
+})
+
+const restream = useQuery({
+  queryKey: ['restream', { id: props.id }],
+  queryFn: () => getRestream(props.id),
+})
+
+const item = restream.data
+
+const { mutate, isPending } = useMutation({
+  mutationFn: (item) => patchRestream(item.id, { active: item.active }),
+  onSuccess: async () => {
+    await queryClient.invalidateQueries({ queryKey: ['restream', { id: props.id }] })
+  },
+})
+
+const toggleActive = (item) => {
+  mutate({ id: item.id, active: !item.active})
+}
+</script>

frontend/src/components/SecondaryNavigation.vue

@@ -0,0 +1,40 @@
+<template>
+  <v-navigation-drawer
+   permanent
+   :rail="rail"
+  >
+    <v-list>
+        <v-btn
+          :icon="rail ? 'mdi-chevron-right' : 'mdi-chevron-left'"
+          variant="text"
+          @click.stop="rail = !rail"
+          class="ml-1"
+        ></v-btn>
+      <v-list-item lines="two" title="Configuration" prepend-icon="mdi-wrench-cog-outline">
+        <template v-slot:append>
+        </template>
+      </v-list-item>
+
+      <v-list-item link prepend-icon="mdi-video" title="Stream" :to="{ name: 'StreamsListView' }"></v-list-item>
+      <v-list-item link prepend-icon="mdi-multicast" title="Restream" :to="{ name: 'RestreamsListView' }"></v-list-item>
+      <v-list-item link prepend-icon="mdi-import" title="Pull" disabled></v-list-item>
+      <v-list-item link prepend-icon="mdi-broadcast" title="Broadcast" disabled></v-list-item>
+      <v-list-item link prepend-icon="mdi-harddisk" title="Recording" disabled></v-list-item>
+      <v-list-item link prepend-icon="mdi-dip-switch" title="Switcher" disabled></v-list-item>
+
+      <v-divider></v-divider>
+      <v-list-item lines="two" title="Administration" prepend-icon="mdi-shield-crown">
+      </v-list-item>
+
+      <v-list-item link prepend-icon="mdi-account-multiple" title="Users" disabled></v-list-item>
+      <v-list-item link prepend-icon="mdi-server-network" title="SRS Nodes" disabled></v-list-item>
+      <v-list-item link prepend-icon="mdi-cog-box" title="Concierge Identities" disabled></v-list-item>
+    </v-list>
+  </v-navigation-drawer>
+</template>
+
+<script setup>
+import { ref } from 'vue'
+
+const rail = ref(false)
+</script>

frontend/src/components/SecretTextField.vue

@@ -0,0 +1,24 @@
+<template>
+  <v-text-field 
+    v-model="value" 
+    variant="outlined" 
+    readonly 
+    :type="showSecret ? 'text' : 'password'" 
+    :append-inner-icon="showSecret ? 'mdi-eye' : 'mdi-eye-off'" 
+    @click:append-inner="showSecret = !showSecret" 
+    prepend-icon="mdi-key"
+  >
+    <template v-slot:append>
+      <v-icon @click="copyToClipboard(value)" v-ripple>mdi-content-copy</v-icon>
+    </template>
+  </v-text-field>
+</template>
+
+<script setup>
+  import { ref } from 'vue'
+  const value = defineModel('value')
+  const showSecret = ref(false)
+  const copyToClipboard = (text) => {
+    navigator.clipboard.writeText(text)
+  }
+</script>

frontend/src/components/StreamListItem.vue

@@ -0,0 +1,44 @@
+<template>
+  <v-list-item :lines="lines" :to="{ name: 'StreamDetailView', params: { id: item.id }}" prepend-icon="mdi-video" v-if="item">
+    <v-list-item-title>
+      {{ item.name }}
+    </v-list-item-title>
+    <v-list-item-subtitle>
+      <StreamPublishCounterChip :count="item.publish_counter" size="x-small" v-if="showCounter" />
+      {{ item.id }}
+    </v-list-item-subtitle>
+  </v-list-item>
+</template>
+
+<script setup>
+import { computed, defineProps, toRaw } from 'vue'
+import { useQuery } from '@tanstack/vue-query'
+import { listStreams } from '@/client/client'
+
+const props = defineProps({
+  id: Number,
+  lines: {
+    type: String,
+    default: 'one',
+  },
+  showCounter: {
+    type: Boolean,
+    default: false,
+  },
+})
+
+const { data, error} = useQuery({
+  queryKey: ['streams'],
+  queryFn: listStreams,
+  refetchInterval: 1000,
+})
+
+const item = computed(() => {
+  if (!data) {
+    return null
+  }
+
+  return toRaw(data.value).find((item) => item.id === props.id)
+})
+
+</script>

frontend/src/components/StreamPublishCounterChip.vue

@@ -0,0 +1,16 @@
+<template>
+  <v-chip :color="count > 0 ? 'success' : 'error'" :size="size">
+    <v-icon>mdi-{{ count > 0 ? count > 1 ? 'check-all' : 'check' : 'close'}}</v-icon>
+    <v-tooltip :text="count" activator="parent" v-if="count > 3"></v-tooltip>
+  </v-chip>
+</template>
+
+<script setup>
+const props = defineProps({
+  count: Number,
+  size: {
+    type: String,
+    default: 'default',
+  },
+})
+</script>

frontend/src/components/StreamUsedByTab.vue

@@ -0,0 +1,40 @@
+<template>
+    <v-data-table
+      :items="filteredRestreams"
+      :headers="headers"
+      :search="search"
+      :sort-by="[{ key: 'receiveCount', order: 'desc' }]"
+      items-per-page="-1"
+    >
+      <template v-slot:item.name="{ item }">
+        <RestreamListItem :item="item" lines="one" />
+      </template>
+      <template v-slot:item.active="{ item }">
+          <RestreamListItemToggle :id="item.id" />
+      </template>
+    </v-data-table>
+</template>
+
+<script setup>
+  import { ref, computed, toRaw } from 'vue'
+  import { useQuery } from '@tanstack/vue-query'
+  import { listRestreams } from '@/client/client'
+
+  const props = defineProps(['stream'])
+  const search = ref('')
+
+  const headers = [
+    { title: "Restream", key: "name"},
+    { title: "Enabled", key: "active"},
+  ]
+
+  const restreams = useQuery({
+    queryKey: ['restreams'],
+    queryFn: listRestreams,
+    refetchInterval: 5000,
+    initialData: [],
+  })
+
+  const filteredRestreams = computed(() => toRaw(restreams.data.value).filter((data) => data.stream === props.stream.id))
+</script>
+

frontend/src/main.js

@@ -0,0 +1,20 @@
+/**
+ * main.js
+ *
+ * Bootstraps Vuetify and other plugins then mounts the App`
+ */
+
+// Plugins
+import { registerPlugins } from '@/plugins'
+
+// Components
+import App from './App.vue'
+
+// Composables
+import { createApp } from 'vue'
+
+const app = createApp(App)
+
+registerPlugins(app)
+
+app.mount('#app')

frontend/src/plugins/README.md

@@ -0,0 +1,3 @@
+# Plugins
+
+Plugins are a way to extend the functionality of your Vue application. Use this folder for registering plugins that you want to use globally.

frontend/src/plugins/index.js

@@ -0,0 +1,17 @@
+/**
+ * plugins/index.js
+ *
+ * Automatically included in `./src/main.js`
+ */
+
+// Plugins
+import vuetify from './vuetify'
+import router from '@/router'
+import { VueQueryPlugin } from '@tanstack/vue-query'
+
+export function registerPlugins (app) {
+  app
+    .use(vuetify)
+    .use(router)
+    .use(VueQueryPlugin)
+}

frontend/src/plugins/vuetify.js

@@ -0,0 +1,19 @@
+/**
+ * plugins/vuetify.js
+ *
+ * Framework documentation: https://vuetifyjs.com`
+ */
+
+// Styles
+import '@mdi/font/css/materialdesignicons.css'
+import 'vuetify/styles'
+
+// Composables
+import { createVuetify } from 'vuetify'
+
+// https://vuetifyjs.com/en/introduction/why-vuetify/#feature-guides
+export default createVuetify({
+  theme: {
+    defaultTheme: 'dark',
+  },
+})

frontend/src/router/index.js

@@ -0,0 +1,57 @@
+
+/**
+ * router/index.ts
+ *
+ * Automatic routes for `./src/pages/*.vue`
+ */
+
+// Composables
+import { createRouter, createWebHistory } from 'vue-router'
+
+import HomeView from '@/views/HomeView.vue'
+import ProfileView from '@/views/ProfileView.vue'
+import StreamsListView from '@/views/StreamsListView.vue'
+import StreamCreateView from '@/views/StreamCreateView.vue'
+import StreamDetailView from '@/views/StreamDetailView.vue'
+import RestreamsListView from '@/views/RestreamsListView.vue'
+
+const routes = [
+  {
+    path: '/',
+    name: 'HomeView',
+    component: HomeView,
+  },
+  {
+    path: '/profile',
+    name: 'ProfileView',
+    component: ProfileView,
+  },
+  {
+    path: '/streams',
+    name: 'StreamsListView',
+    component: StreamsListView,
+  },
+  {
+    path: '/streams/new',
+    name: 'StreamCreateView',
+    component: StreamCreateView,
+  },
+  {
+    path: '/streams/:id',
+    name: 'StreamDetailView',
+    component: StreamDetailView,
+    props: true,
+  },
+  {
+    path: '/restreams',
+    name: 'RestreamsListView',
+    component: RestreamsListView,
+  },
+]
+
+const router = createRouter({
+  history: createWebHistory(process.env.BASE_URL),
+  routes,
+})
+
+export default router

frontend/src/styles/README.md

@@ -0,0 +1,3 @@
+# Styles
+
+This directory is for configuring the styles of the application.

frontend/src/styles/settings.scss

@@ -0,0 +1,10 @@
+/**
+ * src/styles/settings.scss
+ *
+ * Configures SASS variables and Vuetify overwrites
+ */
+
+// https://vuetifyjs.com/features/sass-variables/`
+// @use 'vuetify/settings' with (
+//   $color-pack: false
+// );

frontend/src/views/HomeView.vue

@@ -0,0 +1,7 @@
+<template>
+  
+</template>
+
+<script setup>
+  //
+</script>

frontend/src/views/ProfileView.vue

@@ -0,0 +1,48 @@
+<template>
+  <v-breadcrumbs :items="crumbs"></v-breadcrumbs>
+  <v-card class="elevation-5" :loading="!isSuccess">
+    <template v-slot:title>
+      <v-card-title v-if="data">
+        {{ data.first_name && data.last_name ? data.first_name + ' ' + data.last_name : data.username }}
+      </v-card-title>
+      <v-skeleton-loader v-else></v-skeleton-loader>
+    </template>
+    <template v-slot:subtitle>
+      <v-card-subtitle v-if="data">{{ data.first_name && data.last_name ? data.username + ' - ' : '' }} {{ data.email }}</v-card-subtitle>
+      <v-skeleton-loader v-else></v-skeleton-loader>
+    </template>
+    <template v-slot:prepend>
+      <v-avatar v-if="data" size="64" class="elevation-3">
+        <v-img :src="gravatarUrl(data.email)"></v-img>
+      </v-avatar>
+      <v-skeleton-loader v-else></v-skeleton-loader>
+    </template>
+    <v-card-text>
+      <div class="d-flex justify-left ga-2">
+        <v-chip v-if="data && data.is_superuser" color="error">Superuser</v-chip>
+        <v-chip v-if="data && data.is_staff" color="primary">Staff</v-chip>
+      </div>
+    </v-card-text>
+    <v-card-actions>
+      <v-btn prepend-icon="mdi-logout">Logout</v-btn>
+    </v-card-actions>
+  </v-card>
+</template>
+
+<script setup>
+import { getMe } from '@/client/client'
+import { useQuery } from '@tanstack/vue-query'
+import { ref } from 'vue'
+import gravatarUrl from 'gravatar-url'
+
+const crumbs = ref([
+  { title: 'Profile', disabled: false},
+])
+  
+const { data, error, isFetching, isPending, isSuccess } = useQuery({
+  queryKey: ['me'],
+  queryFn: () => getMe(),
+})
+
+
+</script>

frontend/src/views/RestreamsListView.vue

@@ -0,0 +1,79 @@
+<template>
+  <v-breadcrumbs :items="['Restreams']"></v-breadcrumbs>
+  <v-card :loading="!restreamsIsSuccess" class="elevation-5" title="Restreams" prepend-icon="mdi-multicast">
+    <template v-slot:text>
+      <v-text-field
+        v-model="search"
+        label="Search"
+        prepend-icon="mdi-magnify"
+        variant="underlined"
+        hide-details
+        single-line
+      ></v-text-field>
+    </template>
+    <v-data-table
+      :items="items"
+      :headers="headers"
+      :search="search"
+      :sort-by="[{ key: 'receiveCount', order: 'desc' }]"
+      items-per-page="-1"
+    >
+      <template v-slot:item.name="{ item }">
+        <RestreamListItem :item="item" />
+      </template>
+      <template v-slot:item.active="{ item }">
+          <RestreamListItemToggle :id="item.id" />
+      </template>
+      <template v-slot:item.stream="{ item }">
+        <StreamListItem :id="item.stream.id" :showCounter="true" />
+      </template>
+    </v-data-table>
+  </v-card>
+</template>
+
+<script setup>
+  import { ref, computed, toRaw } from 'vue'
+  import { useQuery, useQueryClient, useMutation } from '@tanstack/vue-query'
+  import { listStreams, listRestreams, patchRestream } from '@/client/client'
+
+  const search = ref('')
+
+  const queryClient = useQueryClient()
+
+  const headers = [
+    { title: "Restream", key: "name"},
+    { title: "Enabled", key: "active"},
+    { title: "Stream", key: "stream"},
+  ]
+
+  const { data: restreams, isSuccess: restreamsIsSuccess } = useQuery({
+    queryKey: ['restreams'],
+    queryFn: listRestreams,
+    refetchInterval: 5000,
+  })
+
+  const { data: streams, isSuccess: streamsIsSuccess } = useQuery({
+    queryKey: ['streams'],
+    queryFn: listStreams,
+    refetchInterval: 5000,
+  })
+
+  const restreamsData = ref(restreams || [])
+  const streamsData = ref(streams || [])
+
+  const items = computed(() => {
+    if (! restreamsIsSuccess.value || ! streamsIsSuccess.value) {
+      return []
+    }
+
+    return toRaw(restreamsData.value).map((restream) => {
+      const stream = toRaw(streamsData.value).find((stream) => stream.id === restream.stream)
+      return {
+        ...restream,
+        stream: stream,
+      }
+    })
+  })
+
+
+</script>

frontend/src/views/StreamCreateView.vue

@@ -0,0 +1,48 @@
+<template>
+  <v-breadcrumbs :items="crumbs"></v-breadcrumbs>
+  <v-card class="elevation-5" prepend-icon="mdi-video" title="Create Stream" subtitle="Subtitle">
+    <v-divider></v-divider>
+    <v-card-text
+      class="d-flex flex-column"
+      >
+      <v-text-field
+        v-model="name"
+        label="Name"
+        prepend-icon="mdi-label"
+        required
+        ></v-text-field>
+
+    </v-card-text>
+    <v-card-actions>
+      <v-spacer></v-spacer>
+      <v-btn @click="submit" color="primary">Create</v-btn>
+    </v-card-actions>
+  </v-card>
+</template>
+
+<script setup>
+import { ref } from 'vue'
+import { useMutation } from '@tanstack/vue-query'
+import { createStream } from '@/client/client'
+import { useRouter } from 'vue-router'
+
+const router = useRouter()
+
+const name = ref('')
+const crumbs = ref([
+  { title: 'Streams', disabled: false, to: { name: 'StreamsListView' }},
+  { title: 'Create', disabled: true },
+])
+
+const createStreamMutation = useMutation({
+  mutationFn: createStream,
+  onSuccess: (data) => {
+    console.log(data)
+    router.push({ name: 'StreamDetailView', params: { id: data.id }})
+  }
+})
+
+const submit = () => {
+  createStreamMutation.mutate({ name: name.value })
+}
+</script>

frontend/src/views/StreamDetailView.vue

@@ -0,0 +1,103 @@
+<script setup>
+  import { ref } from 'vue'
+  import { useRoute, useRouter } from 'vue-router'
+  import { useQuery, useQueryClient, useMutation } from '@tanstack/vue-query'
+  import { getStream, deleteStream } from '@/client/client'
+
+  const route = useRoute()
+  const router = useRouter()
+  const queryClient = useQueryClient()
+  const deleteDialog = ref(false)
+  
+  const tab = ref("stats")
+ 
+  const crumbs = ref([
+    { title: 'Streams', disabled: false, to: { name: 'StreamsListView' }},
+    { title: 'Stream', disabled: true },
+  ])
+ 
+  queryClient.invalidateQueries({ queryKey: ['streams', route.params.id] }) 
+  queryClient.invalidateQueries({ queryKey: ['restreams'] }) 
+  
+  const { data, error, isFetching, isPending, isSuccess } = useQuery({
+    queryKey: ['streams', route.params.id],
+    queryFn: () => getStream(route.params.id),
+    retry: 1,
+  })
+
+  const deleteStreamMutation = useMutation({
+    mutationFn: deleteStream,
+    onSuccess: () => {
+      queryClient.invalidateQueries({ queryKey: ['streams', route.params.id] })
+      router.push({ name: 'StreamsListView' })
+    }
+  })
+
+  const doDeletion = async () => {
+    await deleteStreamMutation.mutateAsync(route.params.id)
+  }
+</script>
+
+<template>
+  <v-breadcrumbs :items="crumbs"></v-breadcrumbs>
+  <v-card
+    prepend-icon="mdi-video"
+    :title="data.name"
+    :subtitle="data.id"
+    class="elevation-5"
+    v-if="data"
+  >
+  <v-divider></v-divider>
+    <v-card-text>
+      <v-container>
+        <v-row>
+          <v-col cols="12" md="6">
+            <SecretTextField v-model:value="data.stream" label="Stream Key" />
+          </v-col>
+        </v-row>
+      </v-container>
+    </v-card-text>
+    <v-card-actions>
+      <v-spacer></v-spacer>
+      <v-btn prepend-icon="mdi-pencil">Edit</v-btn>
+      <v-btn prepend-icon="mdi-delete" @click="deleteDialog = true">Delete</v-btn>
+    </v-card-actions>
+  </v-card>
+  <v-alert
+    title="Not Found"
+    text="The requested Stream could not be found by the provided ID. You maybe do not have the required access."
+    type="error"
+    v-else-if="error">
+  </v-alert>
+  <v-skeleton-loader type="card" class="elevation-5" v-else></v-skeleton-loader>
+  <v-card class="mt-5 elevation-5" v-if="isSuccess">
+    <v-tabs v-model="tab">
+      <v-tab value="rel">Used By</v-tab>
+    </v-tabs>
+    <v-divider></v-divider>
+    <v-card-text>
+      <v-window v-model="tab">
+        <v-window-item value="rel">
+          <StreamUsedByTab :stream="data" />
+        </v-window-item>
+      </v-window>
+    </v-card-text>
+  </v-card>
+
+  <v-dialog v-model="deleteDialog" max-width="400">
+    <v-card color="error">
+      <v-card-title>Delete Stream</v-card-title>
+      <v-card-text>
+        Are you sure you want to delete this stream?
+        Deleting this stream will also delete all configurations that are using this stream.
+        <br />
+        This action cannot be undone.
+      </v-card-text>
+      <v-card-actions>
+        <v-spacer></v-spacer>
+        <v-btn @click="doDeletion" prepend-icon="mdi-delete">Delete</v-btn>
+        <v-btn @click="deleteDialog = false">Cancel</v-btn>
+      </v-card-actions>
+    </v-card>
+  </v-dialog>
+</template>

frontend/src/views/StreamsListView.vue

@@ -0,0 +1,61 @@
+<template>
+  <v-breadcrumbs :items="['Streams']"></v-breadcrumbs>
+
+  <v-card :loading="isFetching || isPending" class="elevation-5" title="Streams" prepend-icon="mdi-video">
+    <template v-slot:text>
+      <v-text-field
+        v-model="search"
+        label="Search"
+        prepend-icon="mdi-magnify"
+        variant="underlined"
+        hide-details
+        single-line
+      ></v-text-field>
+    </template>
+    <v-data-table
+      :items="data"
+      :loading="!data && (isFetching || isPending)"
+      :headers="headers"
+      :search="search"
+      :sort-by="[{ key: 'receiveCount', order: 'desc' }]"
+      items-per-page="-1"
+      v-if="data"
+    >
+      <template v-slot:item.name="{ item }">
+        <StreamListItem :id="item.id" />
+      </template>
+      <template v-slot:item.publish_counter="{ item }">
+        <StreamPublishCounterChip :count="item.publish_counter" />
+      </template>
+      <template v-slot:loading>
+        <v-row justify="center">
+          <v-skeleton-loader type="table-row@6"></v-skeleton-loader>
+        </v-row>
+      </template>
+    </v-data-table>
+    <v-card-actions>
+      <v-spacer></v-spacer>
+      <v-btn :to="{ name: 'StreamCreateView' }" color="primary" prepend-icon="mdi-video-plus">Create Stream</v-btn>
+    </v-card-actions>
+  </v-card>
+</template>
+
+<script setup>
+  import { ref } from 'vue'
+  import { useQuery } from '@tanstack/vue-query'
+  import {listStreams } from '@/client/client'
+  import StreamListItem from '@/components/StreamListItem.vue';
+
+  const headers = [
+    { title: "Stream", key: "name", align: "start"},
+    { title: "Receiving", key: "publish_counter"},
+  ]
+
+  const { data, error, isFetching, isPending } = useQuery({
+    queryKey: ['streams'],
+    queryFn: listStreams,
+    refetchInterval: 1000,
+  })
+
+  const search = ref('')
+</script>

frontend/vite.config.mjs

@@ -0,0 +1,54 @@
+// Plugins
+import Components from 'unplugin-vue-components/vite'
+import Vue from '@vitejs/plugin-vue'
+import Vuetify, { transformAssetUrls } from 'vite-plugin-vuetify'
+import ViteFonts from 'unplugin-fonts/vite'
+import VueRouter from 'unplugin-vue-router/vite'
+
+// Utilities
+import { defineConfig } from 'vite'
+import { fileURLToPath, URL } from 'node:url'
+
+// https://vitejs.dev/config/
+export default defineConfig({
+  plugins: [
+    VueRouter(),
+    Vue({
+      template: { transformAssetUrls }
+    }),
+    // https://github.com/vuetifyjs/vuetify-loader/tree/master/packages/vite-plugin#readme
+    Vuetify({
+      autoImport: true,
+      styles: {
+        configFile: 'src/styles/settings.scss',
+      },
+    }),
+    Components(),
+    ViteFonts({
+      google: {
+        families: [{
+          name: 'Roboto',
+          styles: 'wght@100;300;400;500;700;900',
+        }],
+      },
+    }),
+  ],
+  define: { 'process.env': {} },
+  resolve: {
+    alias: {
+      '@': fileURLToPath(new URL('./src', import.meta.url))
+    },
+    extensions: [
+      '.js',
+      '.json',
+      '.jsx',
+      '.mjs',
+      '.ts',
+      '.tsx',
+      '.vue',
+    ],
+  },
+  server: {
+    port: 3000,
+  },
+})