diff --git a/docs/.vitepress/theme/custom.css b/docs/.vitepress/theme/custom.css index 8dd408d4..dc145ee9 100644 --- a/docs/.vitepress/theme/custom.css +++ b/docs/.vitepress/theme/custom.css @@ -33,4 +33,10 @@ .VPHomeHero .VPImage { max-width: 160px; +} + +.video { + border-radius: 12px; + overflow: hidden; + border: 3px solid rgb(60, 60, 67); } \ No newline at end of file diff --git a/docs/guide/dashboard.md b/docs/guide/dashboard.md index 2aa9aad6..eaec11a2 100644 --- a/docs/guide/dashboard.md +++ b/docs/guide/dashboard.md @@ -1,12 +1,19 @@ # Dashboard -The dashboard is a single page application where you can manage a wide variety of functionalities. +The dashboard is a single page application where you can manage a wide variety of functionalities. Typically, you'd want to build the dashboard once and upload it to S3 to serve it as a static site. The dashboard is an SPA and requires no separate server / backend to function. -- Shows pending, running, completed and failed jobs. -- Inspect a job, with logs, sub processes and many more metrics. -- A storage tab that lets you explore the configured S3 bucket. You can see what kind of playlists are generated, what is uploaded to S3, and more. -- Watch API / Stitcher documentation and call API requests directly from within the dashboard. +Verify you've set the correct variables in `config.env`, each env key prefixed with `PUBLIC_` will be available in the dashboard and will be included in the final Javascript bundle. -Typically, you'd want to build the dashboard once and upload it to S3 to serve it as a static site. The dashboard is an SPA and requires no separate server / backend to function. +Show pending, running, completed and failed jobs. You can easily inspect a job, with logs, sub processes and other metrics. -Verify you've set the correct variables in `config.env`, each env key prefixed with `PUBLIC_` will be available in the dashboard and will be included in the final Javascript bundle. \ No newline at end of file + + +We've got a neat storage tab that lets you explore the configured S3 bucket, as if it was your local hard disk. There's a preview function that lets you inspect readable files such as playlists (m3u8) and more. + + + +A playground for the Stitcher, where you can throw any configuration at it and it'll create a session for you. We've got our player embedded on the right for instant preview. + + + +But wait, there's more! We have a page dedicated to the API and the Sticher API. You can read through the Swagger documentation and fire API calls right away. The dashboard is all you need to get started quickly. \ No newline at end of file diff --git a/docs/guide/what-is-superstreamer.md b/docs/guide/what-is-superstreamer.md index ea7e687f..40a9ddd3 100644 --- a/docs/guide/what-is-superstreamer.md +++ b/docs/guide/what-is-superstreamer.md @@ -10,6 +10,12 @@ There are plenty of great video tools out there, but we saw a gap — a unified Can't wait? Head over to our [Getting Started](/guide/getting-started) page and jump right into it! ::: +::: tip + +Check out these cool screen recordings of the dashboard app! Click here to view them. The link will open in a new tab, so you won't lose your place. + +::: + ## Developer Experience - **Simplified workflow** diff --git a/docs/public/dashboard-jobs.mp4 b/docs/public/dashboard-jobs.mp4 new file mode 100644 index 00000000..73b5baf3 Binary files /dev/null and b/docs/public/dashboard-jobs.mp4 differ diff --git a/docs/public/dashboard-stitcher.mp4 b/docs/public/dashboard-stitcher.mp4 new file mode 100644 index 00000000..c05a0761 Binary files /dev/null and b/docs/public/dashboard-stitcher.mp4 differ diff --git a/docs/public/dashboard-storage.mp4 b/docs/public/dashboard-storage.mp4 new file mode 100644 index 00000000..be836c87 Binary files /dev/null and b/docs/public/dashboard-storage.mp4 differ