Compare commits
No commits in common. "wip/vue-material" and "main" have entirely different histories.
wip/vue-ma
...
main
23
Caddyfile
23
Caddyfile
|
|
@ -1,23 +0,0 @@
|
||||||
{
|
|
||||||
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
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
@ -59,10 +59,3 @@ services:
|
||||||
- 8888:8888
|
- 8888:8888
|
||||||
volumes:
|
volumes:
|
||||||
- ./srs.conf:/usr/local/srs/conf/docker.conf:ro
|
- ./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"
|
|
||||||
|
|
@ -1,4 +0,0 @@
|
||||||
> 1%
|
|
||||||
last 2 versions
|
|
||||||
not dead
|
|
||||||
not ie 11
|
|
||||||
|
|
@ -1,5 +0,0 @@
|
||||||
[*.{js,jsx,ts,tsx,vue}]
|
|
||||||
indent_style = space
|
|
||||||
indent_size = 2
|
|
||||||
trim_trailing_whitespace = true
|
|
||||||
insert_final_newline = true
|
|
||||||
|
|
@ -1,10 +0,0 @@
|
||||||
module.exports = {
|
|
||||||
root: true,
|
|
||||||
env: {
|
|
||||||
node: true,
|
|
||||||
},
|
|
||||||
extends: [
|
|
||||||
'plugin:vue/vue3-essential',
|
|
||||||
'eslint:recommended',
|
|
||||||
],
|
|
||||||
}
|
|
||||||
|
|
@ -1,22 +0,0 @@
|
||||||
.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?
|
|
||||||
|
|
@ -1,79 +0,0 @@
|
||||||
# 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
|
|
||||||
|
|
@ -1,16 +0,0 @@
|
||||||
<!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>
|
|
||||||
|
|
@ -1,20 +0,0 @@
|
||||||
{
|
|
||||||
"compilerOptions": {
|
|
||||||
"allowJs": true,
|
|
||||||
"target": "es5",
|
|
||||||
"module": "esnext",
|
|
||||||
"baseUrl": "./",
|
|
||||||
"moduleResolution": "node",
|
|
||||||
"paths": {
|
|
||||||
"@/*": [
|
|
||||||
"src/*"
|
|
||||||
]
|
|
||||||
},
|
|
||||||
"lib": [
|
|
||||||
"esnext",
|
|
||||||
"dom",
|
|
||||||
"dom.iterable",
|
|
||||||
"scripthost"
|
|
||||||
]
|
|
||||||
}
|
|
||||||
}
|
|
||||||
File diff suppressed because it is too large
Load Diff
|
|
@ -1,38 +0,0 @@
|
||||||
{
|
|
||||||
"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"
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
@ -1,17 +0,0 @@
|
||||||
<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>
|
|
||||||
|
|
@ -1,58 +0,0 @@
|
||||||
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 }
|
|
||||||
|
|
@ -1,38 +0,0 @@
|
||||||
<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>
|
|
||||||
|
|
@ -1,35 +0,0 @@
|
||||||
# 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>
|
|
||||||
```
|
|
||||||
|
|
@ -1,20 +0,0 @@
|
||||||
<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>
|
|
||||||
|
|
@ -1,43 +0,0 @@
|
||||||
<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>
|
|
||||||
|
|
@ -1,40 +0,0 @@
|
||||||
<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>
|
|
||||||
|
|
@ -1,24 +0,0 @@
|
||||||
<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>
|
|
||||||
|
|
@ -1,44 +0,0 @@
|
||||||
<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>
|
|
||||||
|
|
@ -1,16 +0,0 @@
|
||||||
<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>
|
|
||||||
|
|
@ -1,40 +0,0 @@
|
||||||
<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>
|
|
||||||
|
|
||||||
|
|
@ -1,20 +0,0 @@
|
||||||
/**
|
|
||||||
* 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')
|
|
||||||
|
|
@ -1,3 +0,0 @@
|
||||||
# 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.
|
|
||||||
|
|
@ -1,17 +0,0 @@
|
||||||
/**
|
|
||||||
* 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)
|
|
||||||
}
|
|
||||||
|
|
@ -1,19 +0,0 @@
|
||||||
/**
|
|
||||||
* 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',
|
|
||||||
},
|
|
||||||
})
|
|
||||||
|
|
@ -1,57 +0,0 @@
|
||||||
|
|
||||||
/**
|
|
||||||
* 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
|
|
||||||
|
|
@ -1,3 +0,0 @@
|
||||||
# Styles
|
|
||||||
|
|
||||||
This directory is for configuring the styles of the application.
|
|
||||||
|
|
@ -1,10 +0,0 @@
|
||||||
/**
|
|
||||||
* src/styles/settings.scss
|
|
||||||
*
|
|
||||||
* Configures SASS variables and Vuetify overwrites
|
|
||||||
*/
|
|
||||||
|
|
||||||
// https://vuetifyjs.com/features/sass-variables/`
|
|
||||||
// @use 'vuetify/settings' with (
|
|
||||||
// $color-pack: false
|
|
||||||
// );
|
|
||||||
|
|
@ -1,7 +0,0 @@
|
||||||
<template>
|
|
||||||
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<script setup>
|
|
||||||
//
|
|
||||||
</script>
|
|
||||||
|
|
@ -1,48 +0,0 @@
|
||||||
<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>
|
|
||||||
|
|
@ -1,79 +0,0 @@
|
||||||
<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>
|
|
||||||
|
|
@ -1,48 +0,0 @@
|
||||||
<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>
|
|
||||||
|
|
@ -1,103 +0,0 @@
|
||||||
<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>
|
|
||||||
|
|
@ -1,61 +0,0 @@
|
||||||
<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>
|
|
||||||
|
|
@ -1,54 +0,0 @@
|
||||||
// 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,
|
|
||||||
},
|
|
||||||
})
|
|
||||||
2619
frontend/yarn.lock
2619
frontend/yarn.lock
File diff suppressed because it is too large
Load Diff
Loading…
Reference in New Issue