From 62238f5957449eb8bec4f9c1f356475c5bd1c944 Mon Sep 17 00:00:00 2001
From: edwinbradford <edwinbradford@gmail.com>
Date: Fri, 11 Oct 2024 19:18:15 +0100
Subject: [PATCH] Add new Scss files from 8.19.0

---
 src/css/_icons.scss                       | 29 ++++++++++++++
 src/css/components/_skip-buttons.scss     | 40 +++++++++++++++++++
 src/css/components/_title-bar.scss        | 46 ++++++++++++++++++++++
 src/css/components/_transient-button.scss | 48 +++++++++++++++++++++++
 4 files changed, 163 insertions(+)
 create mode 100644 src/css/_icons.scss
 create mode 100644 src/css/components/_skip-buttons.scss
 create mode 100644 src/css/components/_title-bar.scss
 create mode 100644 src/css/components/_transient-button.scss

diff --git a/src/css/_icons.scss b/src/css/_icons.scss
new file mode 100644
index 0000000000..fc0f974939
--- /dev/null
+++ b/src/css/_icons.scss
@@ -0,0 +1,29 @@
+// CSS styles for SVG icons used throughout video.js.
+//
+// The goal is to replace all icons from the font family pulled from videojs/font entirely.
+// This project currently uses fonts. We want to replace this with SVGs from
+// images/icons.svg. This will ensure consitency between versions, as well as simplified
+// and straight-forward customization.
+
+// Default styling for all SVG icons
+.vjs-svg-icon {
+  display: inline-block;
+  background-repeat: no-repeat;
+  background-position: center;
+
+  fill: currentColor;
+  height: 1.8em;
+  width: 1.8em;
+
+  // Overwrite any font content
+  &:before {
+    content: none !important;
+  }
+}
+
+// SVG shadow on hover and focus
+.vjs-svg-icon:hover,
+.vjs-control:focus .vjs-svg-icon {
+  -webkit-filter: drop-shadow(0 0 0.25em #fff);
+  filter: drop-shadow(0 0 0.25em #fff);
+}
diff --git a/src/css/components/_skip-buttons.scss b/src/css/components/_skip-buttons.scss
new file mode 100644
index 0000000000..135e895964
--- /dev/null
+++ b/src/css/components/_skip-buttons.scss
@@ -0,0 +1,40 @@
+.video-js .vjs-skip-forward-5 {
+  cursor: pointer;
+  & .vjs-icon-placeholder {
+    @extend .vjs-icon-forward-5;
+  }
+}
+
+.video-js .vjs-skip-forward-10 {
+  cursor: pointer;
+  & .vjs-icon-placeholder {
+    @extend .vjs-icon-forward-10;
+  }
+}
+.video-js .vjs-skip-forward-30 {
+  cursor: pointer;
+  & .vjs-icon-placeholder {
+    @extend .vjs-icon-forward-30;
+  }
+}
+
+.video-js .vjs-skip-backward-5 {
+  cursor: pointer;
+  & .vjs-icon-placeholder {
+    @extend .vjs-icon-replay-5;
+  }
+}
+
+.video-js .vjs-skip-backward-10 {
+  cursor: pointer;
+  & .vjs-icon-placeholder {
+    @extend .vjs-icon-replay-10;
+  }
+}
+
+.video-js .vjs-skip-backward-30 {
+  cursor: pointer;
+  & .vjs-icon-placeholder {
+    @extend .vjs-icon-replay-30;
+  }
+}
diff --git a/src/css/components/_title-bar.scss b/src/css/components/_title-bar.scss
new file mode 100644
index 0000000000..19b5b6be80
--- /dev/null
+++ b/src/css/components/_title-bar.scss
@@ -0,0 +1,46 @@
+.vjs-title-bar {
+
+  // At a base inherited font-size of 10px, the title bar overall height should
+  // be 96px with the area of text occupying the first 48px and the rest being
+  // padding. This leaves plenty of room for the gradient to fade to
+  // transparent while maintaining an WCAG AA-compliant contrast ratio (tested
+  // using the TPGi Color Contrast Analyzer application) even on top of a solid
+  // white background.
+  @include linear-gradient(
+    180deg,
+    rgba(0, 0, 0, 0.9) 0%,
+    rgba(0, 0, 0, 0.7) 60%,
+    rgba(0, 0, 0, 0) 100%
+  );
+  font-size: 1.2em; // 12px
+  line-height: 1.5; // 18px
+  @include transition(opacity 0.1s);
+  padding: 0.666em 1.333em 4em; // 8px 16px 48px
+  pointer-events: none;
+  position: absolute;
+  top: 0;
+  width: 100%;
+}
+
+// Hide if an error occurs
+.vjs-error .vjs-title-bar {
+  display: none;
+}
+
+.vjs-title-bar-title,
+.vjs-title-bar-description {
+  margin: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.vjs-title-bar-title {
+  font-weight: bold;
+  margin-bottom: 0.333em; // 4px
+}
+
+.vjs-playing.vjs-user-inactive .vjs-title-bar {
+  opacity: 0;
+  @include transition(opacity 1s);
+}
diff --git a/src/css/components/_transient-button.scss b/src/css/components/_transient-button.scss
new file mode 100644
index 0000000000..ddc866f5ae
--- /dev/null
+++ b/src/css/components/_transient-button.scss
@@ -0,0 +1,48 @@
+.video-js .vjs-transient-button {
+  position: absolute;
+  height: 3em;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background-color: rgba(50, 50, 50, 0.5);
+  cursor: pointer;
+  opacity: 1;
+  transition: opacity 1s;
+}
+
+.video-js:not(.vjs-has-started) .vjs-transient-button {
+  display: none;
+}
+
+.video-js.not-hover .vjs-transient-button:not(.force-display),
+.video-js.vjs-user-inactive .vjs-transient-button:not(.force-display) {
+  opacity: 0;
+}
+
+.video-js .vjs-transient-button span {
+  padding: 0 0.5em;
+}
+
+.video-js .vjs-transient-button.vjs-left {
+  left: 1em;
+}
+
+.video-js .vjs-transient-button.vjs-right {
+  right: 1em;
+}
+
+.video-js .vjs-transient-button.vjs-top {
+  top: 1em;
+}
+
+.video-js .vjs-transient-button.vjs-near-top {
+  top: 4em;
+}
+
+.video-js .vjs-transient-button.vjs-bottom {
+  bottom: 4em;
+}
+
+.video-js .vjs-transient-button:hover {
+  background-color: rgba(50, 50, 50, 0.9);
+}