Update and simplify plyr theme

Signed-off-by: John Molakvoæ <[email protected]>
Signed-off-by: nextcloud-command <[email protected]>

package.json

@@ -34,6 +34,7 @@
     "stylelint:fix": "stylelint src --fix",
     "cypress": "TESTING=true cypress run",
     "cypress:gui": "TESTING=true cypress open",
+    "precypress:update-snapshots": "TESTING=true npm run dev",
     "cypress:update-snapshots": "TESTING=true cypress run --env type=base --spec cypress/e2e/visual-regression.cy.js --config screenshotsFolder=cypress/snapshots/base",
     "wait-on": "wait-on -i 500 -t 300000"
   },

src/components/Audios.vue

@@ -114,42 +114,31 @@ export default {
 
 <style scoped lang="scss">
 audio {
-	background-color: black;
+	/* over arrows in tiny screens */
+	z-index: 20050;
+	align-self: center;
 	max-width: 100%;
 	max-height: 100%;
-	align-self: center;
+	background-color: black;
+
 	justify-self: center;
-	/* over arrows in tiny screens */
-	z-index: 20050;
 }
 
 ::v-deep {
 	.plyr__progress__container {
 		flex: 1 1;
 	}
-	.plyr__volume {
-		min-width: 80px;
-	}
-	// plyr buttons style
-	.plyr--audio .plyr__progress__buffer,
-	.plyr--audio .plyr__control {
-		&.plyr__tab-focus,
-		&:hover,
-		&[aria-expanded=true] {
-			background-color: var(--color-primary-element);
-			color: var(--color-primary-text);
-			box-shadow: none !important;
-		}
-	}
-	// plyr volume control
-	.plyr--full-ui input[type=range] {
-		color: var(--color-primary-element);
+
+	.plyr {
+		@import '../mixins/Plyr';
 	}
+
 	// make it a bit off-center in order to fix mobile controls
 	@media only screen and (max-width: 500px) {
 		.plyr--audio {
 			top: calc(35vw / 2 + 60px / 2);
 		}
 	}
 }
+
 </style>

src/components/Videos.vue

@@ -151,47 +151,43 @@ export default {
 
 <style scoped lang="scss">
 video {
-	background-color: black;
+	/* over arrows in tiny screens */
+	z-index: 20050;
+	align-self: center;
 	max-width: 100%;
 	max-height: 100%;
-	align-self: center;
+	background-color: black;
+
 	justify-self: center;
-	/* over arrows in tiny screens */
-	z-index: 20050;
 }
 
 ::v-deep {
 	.plyr:-webkit-full-screen video {
-		height: 100% !important;
 		width: 100% !important;
+		height: 100% !important;
 	}
 	.plyr:fullscreen video {
-		height: 100% !important;
 		width: 100% !important;
+		height: 100% !important;
 	}
 	.plyr__progress__container {
 		flex: 1 1;
 	}
-	.plyr__volume {
-		min-width: 80px;
-	}
-	// plyr buttons style
-	.plyr--video .plyr__progress__buffer,
-	.plyr--video .plyr__control {
-		&.plyr__tab-focus,
-		&:hover,
-		&[aria-expanded=true] {
-			background-color: var(--color-primary-element);
-			color: var(--color-primary-text);
-			box-shadow: none !important;
+
+	.plyr {
+		@import '../mixins/Plyr';
+
+		// Override server font style
+		button {
+			color: white;
+
+			&:hover,
+			&:focus {
+				color: var(--color-primary-text);
+				background-color: var(--color-primary-element);
+			}
 		}
 	}
-	.plyr__control--overlaid {
-		background-color: var(--color-primary-element);
-	}
-	// plyr volume control
-	.plyr--full-ui input[type=range] {
-		color: var(--color-primary-element);
-	}
 }
+
 </style>

src/mixins/Plyr.scss

@@ -0,0 +1,82 @@
+// Shared style between video and audio component for plyr
+& {
+	// https://github.com/sampotts/plyr#customizing-the-css
+	--plyr-color-main: var(--color-primary);
+	--plyr-control-icon-size: 18px;
+	--plyr-menu-background: var(--color-main-background);
+	--plyr-menu-color: var(--color-main-text);
+
+	// Audio specific
+	--plyr-audio-controls-background: var(--color-main-background);
+	--plyr-audio-control-color: var(--color-main-text);
+	.plyr__volume {
+		min-width: 120px;
+	}
+
+	// Override server font style
+	--plyr-button-size: 44px;
+	button {
+		width: var(--plyr-button-size);
+		height: var(--plyr-button-size);
+		// Center icon
+		padding: calc((var(--plyr-button-size) - var(--plyr-control-icon-size)) / 2);
+		cursor: pointer;
+		border: none;
+		background-color: transparent;
+		line-height: inherit;
+
+		&:hover,
+		&:focus {
+			color: var(--color-main-text);
+			background-color: var(--color-background-hover);
+		}
+
+		&.plyr__control--overlaid {
+			width: var(--plyr-button-size);
+			height: var(--plyr-button-size);
+			color: var(--color-primary-text);
+			background-color: var(--color-primary-element);
+
+			--plyr-button-size: 50px;
+
+			&:hover,
+			&:focus {
+				background-color: var(--color-primary-element-hover);
+			}
+		}
+	}
+
+	// Menu items
+	.plyr__menu__container button {
+		// avoid size change and flicker
+		width: 120px;
+		margin: 0;
+		// background is main-bg
+		color: var(--color-main-text);
+
+		&:hover,
+		&:focus {
+			color: var(--color-main-text);
+			background-color: var(--color-background-hover);
+		}
+
+		&.plyr__control--forward {
+			padding-right: 28px;
+			padding-right: calc(var(--plyr-control-spacing, 10px) * .7 * 4);
+		}
+
+		&.plyr__control--back {
+			margin: calc(var(--plyr-control-spacing, 10px) * .7);
+			padding-left: 28px;
+			padding-left: calc(var(--plyr-control-spacing, 10px) * .7 * 4);
+		}
+	}
+
+	// Progress
+	--plyr-range-fill-background: var(--color-primary-element);
+	.plyr__progress__buffer {
+		width: calc(100% + var(--plyr-range-thumb-height, 13px));
+		height: var(--plyr-range-track-height, 5px);
+		background: transparent;
+	}
+}

stylelint.config.js

@@ -1,3 +1,6 @@
 const stylelintConfig = require('@nextcloud/stylelint-config')
 
+// Disable nested scss import
+stylelintConfig.rules['no-invalid-position-at-import-rule'] = null
+
 module.exports = stylelintConfig