Fixes and enhancements for version 2.0 (#3)

* Fix English language strings * CSS improvements and code style * JS code style * Add missing cleanImageURL for sources * Clean-up CSS and adjust to J4 / Cassiopeia * More CSS clean-up and J4 / Cassiopeia adjustments * CSS code style fix * Fix language strings alpha sort * No hard-coded sizing in CSS * Make it work for any module position * Remove margin-bottom * Use CSS grid, add display of playlist title, make things configurable * Remove unused suffix from sources * Set selected source group after page load * CSS and JS fixes * Fix usage of removed suffix * Bump version to 2.0.0-alpha1 * SEO, a11y: Use buttons not links in playlist * Release 2.0.0-alpha2 * Add duration display and webvtt playlist options * Add media/vtt folder to module XML file * Add example.vtt to media/vtt folder * Language string improvement * Language string fixes * Limit playlist size to (default) video size * Playlist with sublayout, max width if no playlist * Limit playlist min sizes by smallest video * Language string improvement * Configurable playlist position * Bump version to 2.0.0-alpha3 * Use web asset manager instead of inline styles Necessary for a good content security policy, CSP * Fix JS linter complaint * Bump version to 2.0.0-beta1 * Add validate="Subform" to subform fields in config * Add min and max to source groups and sources config fields * Change attributes order in config and add required where missing * Add engineering unit "px" to labels where missing * Add missing information and translations to inline help * Move source group description in form * Add missing information to ru-RU inline help * Bump version to 2.0.0-rc1 * Update manifest.xml with 2.0.0-rc1 * Fix stability tag in manifest.xml * Add vendor prefixed CSS to support older browsers * Improved es5 transpile and js minify * Bump version to 2.0.0-rc2 * Bump version to 2.0.0 stable
richard67 · Apr 9, 2023 · 4b2dfce · 4b2dfce
1 parent 8d420a9
commit 4b2dfce
Show file tree

Hide file tree

Showing 20 changed files with 1,072 additions and 575 deletions.
diff --git a/build/media_source/mod_rfvideo/css/rfvideo.css b/build/media_source/mod_rfvideo/css/rfvideo.css
@@ -1,145 +1,145 @@
+div.rfvideoplayerwrapper {
+  display: block;
+  width: 100%;
+  padding: 0;
+  margin: 0;
+}
+
 div.rfvidqseldiv {
-	width: 100%;
-	display: block;
-	margin: 1rem 0;
-	padding: 0;
+  display: block;
+  width: 100%;
+  padding: 0;
+  margin: 1rem 0;
 }
+
 div.rfvidqseldiv label {
-	width: 100%;
-	display: block;
-	font-weight: bolder;
+  display: block;
+  width: 100%;
+  font-weight: bolder;
 }
+
 div.rfvidqseldiv select {
-	width: auto;
-}
+  width: auto;
+}
+
+div.rfvideoplayer {
+  display: -webkit-box;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-box-orient: horizontal;
+  -webkit-box-direction: normal;
+      -ms-flex-flow: row wrap;
+          flex-flow: row wrap;
+  -webkit-box-align: stretch;
+      -ms-flex-align: stretch;
+          align-items: stretch;
+}
+
 div.rfvideo {
-	position: relative;
-	background-color: #000;
-	color: #fff;
-	float: left;
-	margin: 0 0 9px;
-	padding: 0;
-}
-div.rfvideo480p {
-	height: 480px;
-	width: 640px;
-}
-div.rfvideo360p {
-	height: 360px;
-	width: 480px;
-}
+  position: relative;
+  padding: 0;
+  color: #fff;
+  background-color: #000;
+}
+
+div.rfvideo.rfvideoplaylist-side1,
+div.rfvideo.rfvideoplaylist-top {
+  -webkit-box-ordinal-group: 2;
+      -ms-flex-order: 1;
+          order: 1;
+}
+
+div.rfvideo video {
+  width: 100%;
+  height: auto;
+}
+
 div.rfvideostatus {
-	position: absolute;
-	display: block;
-	top: 0;
-	left: 0;
-	margin: 9px;
-	padding: 0;
-	z-index: 9999;
-	font-family: var(--body-font-family);
-	font-size: 13px;
-	text-decoration: none;
-	color: #fff;
-}
+  position: absolute;
+  top: 0;
+  left: 0;
+  z-index: 9999;
+  display: block;
+  padding: 0;
+  margin: 0.5rem;
+  text-decoration: none;
+}
+
+div.rfvideoplaylistwrapper {
+  display: -webkit-box;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-box-orient: vertical;
+  -webkit-box-direction: normal;
+      -ms-flex-flow: column nowrap;
+          flex-flow: column nowrap;
+  -webkit-box-align: stretch;
+      -ms-flex-align: stretch;
+          align-items: stretch;
+  padding: 0;
+  background-color: #222;
+}
+
+div.rfvideoplaylistwrapper.rfvideoplaylist-none {
+  display: none;
+}
+
+div.rfvideoplaylistwrapper.rfvideoplaylist-side1,
+div.rfvideoplaylistwrapper.rfvideoplaylist-top {
+  -webkit-box-ordinal-group: 1;
+      -ms-flex-order: 0;
+          order: 0;
+}
+
+div.rfvideoplaylisttop {
+  height: 1.5rem;
+}
+
 div.rfvideoplaylist {
-	background-color: #222;
-	float: none;
-	display: block;
-	overflow: auto;
-	margin: 0 0 9px;
-	padding: 0;
-}
-div.rfvideoplaylist480p {
-	height: 480px;
-	width: 350px;
-}
-div.rfvideoplaylist360p {
-	height: 360px;
-	width: 350px;
-}
-div.rfvideoplaylist ul {
-	margin: 10px 0 0 15px;
-	padding: 0;
-}
-div.rfvideoplaylist li {
-	list-style: none outside none;
-	height: 30px;
-	margin: 0;
-	padding: 0;
-}
-div.rfvideoplaylist li a {
-	font-family: var(--body-font-family);
-	font-size: 13px;
-	text-decoration: none;
-	color: #bbb !important;
-}
-div.rfvideoplaylist li a:hover,
-div.rfvideoplaylist li a:focus {
-	cursor: pointer;
-	color: #fff !important;
-	text-decoration: underline !important;
-}
-@media (max-width: 1090px) {
-	div.rfvideo480p {
-		margin: 0;
-	}
-	div.rfvideoplaylist480p {
-		height: 240px;
-		width: 640px;
-		display: inline-block;
-	}
-}
-@media (max-width: 930px) {
-	div.rfvideo360p {
-		margin: 0;
-	}
-	div.rfvideoplaylist360p {
-		height: 180px;
-		width: 480px;
-		display: inline-block;
-	}
-}
-@media (max-width: 699px) {
-	div.rfvideo480p {
-		height: auto;
-		width: 100%;
-		margin: 0;
-	}
-	div.rfvideo480p video {
-		height: auto;
-		width: 100%;
-	}
-	div.rfvideoplaylist480p {
-		height: 180px;
-		width: 100%;
-		display: inline-block;
-	}
-}
-@media (max-width: 539px) {
-	div.rfvideo360p {
-		height: auto;
-		width: 100%;
-		margin: 0;
-	}
-	div.rfvideo360p video {
-		height: auto;
-		width: 100%;
-	}
-	div.rfvideoplaylist360p {
-		height: 180px;
-		width: 100%;
-		display: inline-block;
-	}
-}
-@media (max-width: 419px) {
-	div.rfvideoplaylist ul {
-		margin: 8px 0 0 12px;
-		padding: 0;
-	}
-	div.rfvideoplaylist li {
-		height: 24px;
-	}
-	div.rfvideoplaylist li a {
-		font-size: 10px;
-	}
+  padding: 0.5rem;
+  overflow-y: scroll;
+  color: #bbb !important;
+  background-color: #222;
+}
+
+ol.rfvideoplaylist-list {
+  display: block;
+  padding-left: 2rem;
+  margin: 0;
+}
+
+li.rfvideoplaylist-item {
+  min-height: 2.5rem;
+  padding: 0;
+  list-style: decimal outside none;
+}
+
+li.rfvideoplaylist-start {
+  list-style: none;
+}
+
+li.rfvideoplaylist-item button {
+  padding: 0;
+  overflow: hidden;
+  color: #bbb !important;
+  text-align: left;
+  text-decoration: none;
+  -o-text-overflow: ellipsis;
+     text-overflow: ellipsis;
+  vertical-align: top;
+  -webkit-user-select: none;
+     -moz-user-select: none;
+      -ms-user-select: none;
+          user-select: none;
+  background: none;
+  border: none;
+  -webkit-box-shadow: none;
+          box-shadow: none;
+}
+
+li.rfvideoplaylist-item button:hover,
+li.rfvideoplaylist-item button:focus {
+  color: #fff !important;
+  text-decoration: underline !important;
+  cursor: pointer;
 }