feat: add main player and replace video.js with vidstack

2 files changed, 3 insertions, 142 deletions

diff --git a/resources/src/styles/index.scss b/resources/src/styles/index.scss
index c2ec5d2..582e733 100644
--- a/resources/src/styles/index.scss
+++ b/resources/src/styles/index.scss
@@ -1,4 +1,3 @@
-@use "./videojs";
 @use "@fontsource/nunito-sans/scss/mixins" as NunitoSans;
 $fontsourceDir: "~@fontsource";
 @include NunitoSans.faces($weights: (200, 300, 400, 500, 600, 700, 800, 900));
@@ -7,9 +6,9 @@ $fa-font-path: "~@fortawesome/fontawesome-free/webfonts";
 @import "@fortawesome/fontawesome-free/scss/regular";
 @import "@fortawesome/fontawesome-free/scss/solid";
 @import "@fortawesome/fontawesome-free/scss/fontawesome";
+@import '@vidstack/react/player/styles/default/theme.css';
+@import '@vidstack/react/player/styles/default/layouts/video.css';
+@import '@vidstack/react/player/styles/default/layouts/audio.css';
 @import "tailwindcss/base";
 @import "tailwindcss/components";
 @import "tailwindcss/utilities";
-@import "video.js/dist/video-js.css";
-@import "videojs-mobile-ui/dist/videojs-mobile-ui.css";
-@import "@silvermine/videojs-quality-selector/dist/css/quality-selector.css";
diff --git a/resources/src/styles/videojs.scss b/resources/src/styles/videojs.scss
deleted file mode 100644
index 10f9f43..0000000
--- a/resources/src/styles/videojs.scss
+++ /dev/null
@@ -1,138 +0,0 @@
-.vjs-tubo .vjs-poster img {
-  object-fit: cover;
-}
-
-.vjs-tubo .vjs-control-bar {
-  background: linear-gradient(to bottom, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.6) 100%);
-}
-
-.vjs-tubo .vjs-menu-button-popup .vjs-menu .vjs-menu-content {
-  background: rgba(0, 0, 0, 0.5);
-  backdrop-filter: blur(6px);
-}
-
-.vjs-tubo .vjs-current-time, .vjs-tubo .vjs-time-divider, .vjs-tubo .vjs-duration {
-  display: block;
-}
-
-.vjs-tubo .vjs-big-play-button, .vjs-tubo.vjs-paused .vjs-big-play-button, .vjs-tubo:hover .vjs-big-play-button {
-  content: '';
-  background-size: 60%;
-  background-position: center center;
-  background-repeat: no-repeat;
-  background-image: url('data:image/svg+xml;utf8,<svg fill="%23FFFFFF" height="24" viewBox="0 0 24 24" width="24" xmlns="http://www.w3.org/2000/svg"><path d="M8 5v14l11-7z"/><path d="M0 0h24v24H0z" fill="none"/></svg>');
-  background-color: transparent;
-  border: none;
-}
-
-.vjs-tubo .vjs-progress-control {
-  position: absolute;
-  width: calc(100% - 4em);
-  top: -.5em;
-  height: 0.5em;
-  margin-left: 2em;
-  margin-right: 2em;
-}
-
-.vjs-tubo .vjs-progress-control .vjs-progress-holder {
-  position: relative;
-  margin: 0px !important;
-  top: 0;
-  width: 100%;
-  font-size: 13px;
-  padding: 8px 0 15px 0;
-  background: none;
-}
-
-.vjs-tubo .vjs-progress-control .vjs-progress-holder::before {
-  content: '';
-  display: block;
-  width: 100%;
-  height: 5px;
-  background: rgba(115, 133, 159, 0.3);
-  border-radius: 20px;
-}
-
-.vjs-tubo .vjs-progress-control .vjs-load-progress,
-.vjs-tubo .vjs-progress-control .vjs-play-progress {
-  height: 5px;
-  top: 8px;
-  border-radius: 20px;
-}
-
-.vjs-tubo .vjs-progress-control .vjs-load-progress > div:first-of-type {
-  border-radius: 20px;
-}
-
-.vjs-tubo .vjs-progress-control .vjs-mouse-display {
-  background: none;
-}
-
-.vjs-tubo .vjs-spacer {
-  display: flex;
-  flex: 1 1 auto;
-}
-
-.vjs-tubo .vjs-volume-bar.vjs-slider-horizontal {
-  background: none;
-  padding: 0px 0 15px 0;
-}
-
-.vjs-tubo .vjs-volume-bar.vjs-slider-horizontal::before {
-  content: '';
-  display: block;
-  width: 100%;
-  height: 3px;
-  background: rgba(115, 133, 159, 0.3);
-}
-
-.vjs-tubo .vjs-volume-bar.vjs-slider-horizontal .vjs-volume-level {
-  height: 3px;
-  top: 0;
-}
-
-.vjs-tubo .vjs-volume-bar.vjs-slider-horizontal .vjs-mouse-display {
-  display: none;
-}
-
-.vjs-tubo.vjs-layout-x-small .vjs-progress-control,
-.vjs-tubo.vjs-layout-tiny .vjs-progress-control {
-  display: block;
-}
-
-.vjs-tubo.vjs-layout-x-small .vjs-control-bar .vjs-play-control,
-.vjs-tubo.vjs-layout-tiny .vjs-control-bar .vjs-play-control {
-  display: none;
-}
-
-.vjs-tubo.vjs-layout-small .vjs-current-time,
-.vjs-tubo.vjs-layout-small .vjs-time-divider,
-.vjs-tubo.vjs-layout-small .vjs-duration,
-.vjs-tubo.vjs-layout-x-small .vjs-current-time,
-.vjs-tubo.vjs-layout-x-small .vjs-time-divider,
-.vjs-tubo.vjs-layout-x-small .vjs-duration,
-.vjs-tubo.vjs-layout-tiny .vjs-current-time,
-.vjs-tubo.vjs-layout-tiny .vjs-time-divider,
-.vjs-tubo.vjs-layout-tiny .vjs-duration {
-  display: inline-block;
-}
-
-.vjs-tubo.vjs-layout-small .vjs-progress-control .vjs-load-progress,
-.vjs-tubo.vjs-layout-small .vjs-progress-control .vjs-play-progress,
-.vjs-tubo.vjs-layout-x-small .vjs-progress-control .vjs-load-progress,
-.vjs-tubo.vjs-layout-x-small .vjs-progress-control .vjs-play-progress,
-.vjs-tubo.vjs-layout-tiny .vjs-progress-control .vjs-load-progress
-.vjs-tubo.vjs-layout-tiny .vjs-progress-control .vjs-play-progress {
-  top: 0;
-}
-
-.vjs-tubo.vjs-layout-small .vjs-progress-control .vjs-progress-holder,
-.vjs-tubo.vjs-layout-x-small .vjs-progress-control .vjs-progress-holder,
-.vjs-tubo.vjs-layout-tiny-small .vjs-progress-control .vjs-progress-holder {
-  padding: 0 0 15px 0;
-}
-
-.vjs-tubo.vjs-layout-tiny .vjs-menu-button-popup .vjs-menu .vjs-menu-content,
-.vjs-tubo.vjs-layout-x-small .vjs-menu-button-popup .vjs-menu .vjs-menu-content {
-  max-height: 10em;
-}