diff options
author | Miguel Ángel Moreno <mail@migalmoreno.com> | 2024-06-04 14:13:33 +0200 |
---|---|---|
committer | Miguel Ángel Moreno <mail@migalmoreno.com> | 2024-06-04 14:13:33 +0200 |
commit | 30a03d4fbf43b0d02e969e912627b3b47e25c883 (patch) | |
tree | b7ee250db78b86d7e4de18c0767fbd00365e232b /resources/src | |
parent | 906bd96c1e5b0449099b8161792c9baa2ffc18e4 (diff) |
feat: add main player and replace video.js with vidstack
Diffstat (limited to 'resources/src')
-rw-r--r-- | resources/src/styles/index.scss | 7 | ||||
-rw-r--r-- | resources/src/styles/videojs.scss | 138 |
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; -} |