From e6e896c5a63ca9e278aecaacce8ea9830fe68dbd Mon Sep 17 00:00:00 2001
From: Kathrin Osswald <kathrin.osswald@uni-ulm.de>
Date: Thu, 7 Nov 2019 10:42:08 +0100
Subject: [PATCH] Improved Video JS Skin for hiding big play button in audio
players and removed centered placement of this button in SCSS.
---
CHANGES.md | 3 +++
README.md | 2 +-
scss/post.scss | 28 ++--------------------------
3 files changed, 6 insertions(+), 27 deletions(-)
diff --git a/CHANGES.md b/CHANGES.md
index 16dca60..7df607c 100644
--- a/CHANGES.md
+++ b/CHANGES.md
@@ -6,6 +6,9 @@ Changes
### Unreleased
+* 2019-11-13 - Improved Video JS Skin for hiding big play button in audio players and removed centered placement of this button in SCSS.
+ IMPORTANT NOTE for ADMINS: If you want the button to be centered again, please add the class "vjs-big-play-centered"
+ to the setting "media_videojs | videocssclass".
* 2019-11-11 - Improved loginform.mustache for the info box and maintenance box to fit to the login box.
* 2019-11-08 - Added special CSS styles for plugin mod_attendance.
* 2019-10-28 - Changed the link in the README.md to get to the correct Font Awesome version.
diff --git a/README.md b/README.md
index 0d898bf..13f062a 100644
--- a/README.md
+++ b/README.md
@@ -366,7 +366,7 @@ We added a back to top button that appears in the right bottom corner when the u
### Design
* Added Font Awesome icons to mailto and broken links. Furthermore, colored broken link in red for fast recognizability.
-* Added a Video JS skin that fits to the brand color and moves the player button back to the center.
+* Added a Video JS skin that fits to the brand color.
Course Design:
diff --git a/scss/post.scss b/scss/post.scss
index 9e7b14e..92b9637 100644
--- a/scss/post.scss
+++ b/scss/post.scss
@@ -1045,9 +1045,6 @@ a[href^="mailto"]::before {
&.vjs-no-flex .vjs-menu-button-inline {
width: 10em;
}
- .vjs-controls-disabled .vjs-big-play-button {
- display: none !important;
- }
.vjs-control {
width: 3em;
}
@@ -1061,21 +1058,14 @@ a[href^="mailto"]::before {
.vjs-menu-button-inline .vjs-menu {
left: 3em;
}
-.vjs-paused.vjs-has-started.video-js .vjs-big-play-button {
+.vjs-paused.vjs-has-started.video-js:not(.vjs-audio) .vjs-big-play-button {
display: block;
}
-.video-js {
+.video-js :not(.vjs-audio) {
&.vjs-ended .vjs-big-play-button,
&.vjs-paused .vjs-big-play-button {
display: block;
}
- .vjs-load-progress div {
- display: none !important;
- }
-}
-.vjs-seeking .vjs-big-play-button,
-.vjs-waiting .vjs-big-play-button {
- display: none !important;
}
.video-js {
.vjs-mouse-display:after,
@@ -1086,24 +1076,12 @@ a[href^="mailto"]::before {
.vjs-loading-spinner {
display: none;
}
- .vjs-big-play-button {
- display: block !important;
- }
}
}
-.video-js.vjs-ended .vjs-big-play-button,
-.video-js.vjs-paused .vjs-big-play-button,
-.vjs-paused.vjs-has-started.video-js .vjs-big-play-button {
- display: block;
-}
.video-js {
.vjs-big-play-button {
- top: 50%;
- left: 50%;
- margin-left: -1.5em;
background-color: $brand-primary;
border-radius: 2px;
- margin-top: -1em !important;
}
&:hover .vjs-big-play-button {
background-color: $brand-primary;
@@ -1129,8 +1107,6 @@ a[href^="mailto"]::before {
background-color: $brand-primary;
}
.vjs-big-play-button {
- width: 2em !important;
- margin-left: -1em;
border-width: 2px;
}
.vjs-icon-play:before,
--
GitLab