vlitejs · yoriiis · Aug 11, 2022 · Aug 2, 2022 · Aug 5, 2022 · Aug 5, 2022
diff --git a/README.md b/README.md
@@ -319,8 +319,6 @@ The player exposes some custom CSS properties, locally scopped under the `.v-vli
 | `--vlite-controlBarBackground`        | `linear-gradient(to top, #000 -50%, transparent)` | Control bar background         |
 | `--vlite-controlsColor`               | `#fff\|#000`                                      | Controls color (video\|audio)  |
 | `--vlite-controlsOpacity`             | `0.9`                                             | Controls opacity               |
-| `--vlite-controlsIconWidth`           | `28px`                                            | Controls icon width            |
-| `--vlite-controlsIconHeight`          | `28px`                                            | Controls icon height           |
 | `--vlite-progressBarHeight`           | `5px`                                             | Progress bar height            |
 | `--vlite-progressBarBackground`       | `rgba(0 0 0 / 25%)`                               | Progress bar background        |
 

diff --git a/config/.eslintrc.js b/config/.eslintrc.js
@@ -20,7 +20,7 @@ module.exports = {
 	plugins: ['prettier'],
 
 	rules: {
-		indent: ['error', 'tab', { ignoredNodes: ['TemplateLiteral *'] }],
+		indent: ['error', 'tab', { ignoredNodes: ['TemplateLiteral *'], SwitchCase: 1 }],
 		'no-tabs': 0,
 		'space-before-function-paren': [
 			'error',
@@ -31,6 +31,8 @@ module.exports = {
 	globals: {
 		document: false,
 		navigator: false,
-		window: false
+		window: false,
+		chrome: false,
+		cast: false
 	}
 }
diff --git a/config/webpack.config.js b/config/webpack.config.js
@@ -46,6 +46,11 @@ const plugins = [
 		entrykey: 'plugins/pip',
 		library: `${libraryName}Pip`,
 		path: './src/plugins/pip/config'
+	},
+	{
+		entrykey: 'plugins/cast',
+		library: `${libraryName}Cast`,
+		path: './src/plugins/cast/config'
 	}
 ]
 
@@ -69,7 +74,8 @@ const generator = ({ entry, library = false, isProduction }) => {
 			export: 'default'
 		}
 	}
-	return {
+
+	const config = {
 		watch: !isProduction,
 		entry,
 		watchOptions: {
@@ -136,7 +142,6 @@ const generator = ({ entry, library = false, isProduction }) => {
 		},
 		context: appDirectory,
 		plugins: [
-			new webpack.ProgressPlugin(),
 			new MiniCssExtractPlugin({
 				filename: '[name].css',
 				chunkFilename: '[name].css'
@@ -180,6 +185,12 @@ const generator = ({ entry, library = false, isProduction }) => {
 			splitChunks: false
 		}
 	}
+
+	if (!isProduction) {
+		config.plugins.push(new webpack.ProgressPlugin())
+	}
+
+	return config
 }
 
 module.exports = (env, argv) => {

diff --git a/examples/html5/config.js b/examples/html5/config.js
@@ -1,11 +1,22 @@
 import '../../dist/vlite.css'
 import '../../dist/plugins/subtitle.css'
+import '../../dist/plugins/cast.css'
 import Vlitejs from '../../dist/vlite.js'
 import VlitejsSubtitle from '../../dist/plugins/subtitle.js'
 import VlitejsPip from '../../dist/plugins/pip.js'
+import VlitejsCast from '../../dist/plugins/cast.js'
 
 Vlitejs.registerPlugin('subtitle', VlitejsSubtitle)
 Vlitejs.registerPlugin('pip', VlitejsPip)
+Vlitejs.registerPlugin('cast', VlitejsCast, {
+	textTrackStyle: {
+		backgroundColor: '#21212190'
+	},
+	metadata: {
+		title: 'The Jungle Book',
+		subtitle: 'Walt Disney Animation Studios'
+	}
+})
 
 /* eslint-disable no-unused-vars */
 const vlite = new Vlitejs('#player', {
@@ -24,7 +35,7 @@ const vlite = new Vlitejs('#player', {
 		muted: false,
 		autoHide: true
 	},
-	plugins: ['subtitle', 'pip'],
+	plugins: ['subtitle', 'pip', 'cast'],
 	onReady: function (player) {
 		console.log(player)
 

diff --git a/examples/html5/index.html b/examples/html5/index.html
@@ -8,6 +8,7 @@
 	<body>
 		<video crossorigin id="player" class="vlite-js" src="https://yoriiis.github.io/cdn/static/vlitejs/demo-video-html5.mp4">
 			<track label="English" kind="subtitles" srclang="en" src="https://yoriiis.github.io/cdn/static/vlitejs/demo-video-html5-subtitle-en.vtt" default />
+			<track label="French" kind="subtitles" srclang="fr" src="https://yoriiis.github.io/cdn/static/vlitejs/demo-video-html5-subtitle-fr.vtt" />
 		</video>
 	</body>
 </html>
diff --git a/examples/webpack.config.js b/examples/webpack.config.js
@@ -11,7 +11,7 @@ const resolveApp = (relativePath) => path.resolve(appDirectory, relativePath)
 module.exports = (env, argv) => {
 	const isProduction = argv.mode === 'production'
 
-	return {
+	const config = {
 		entry: {
 			html5: `${resolveApp('examples/html5/config.js')}`,
 			audio: `${resolveApp('examples/audio/config.js')}`,
@@ -69,11 +69,13 @@ module.exports = (env, argv) => {
 			historyApiFallback: true,
 			port: 3000,
 			compress: true,
-			hot: true
+			hot: true,
+			host: '0.0.0.0',
+			https: true,
+			open: ['/html5']
 		},
 		context: appDirectory,
 		plugins: [
-			new webpack.ProgressPlugin(),
 			new MiniCssExtractPlugin({
 				filename: 'styles/[name].css',
 				chunkFilename: 'styles/[name].css'
@@ -152,4 +154,10 @@ module.exports = (env, argv) => {
 			splitChunks: false
 		}
 	}
+
+	if (!isProduction) {
+		config.plugins.push(new webpack.ProgressPlugin())
+	}
+
+	return config
 }
diff --git a/src/plugins/cast/README.md b/src/plugins/cast/README.md
@@ -0,0 +1,77 @@
+# Plugin: Cast
+
+Supports for Google Cast API.
+
+## Overview
+
+| <!-- -->          | <!-- -->                            |
+| ----------------- | ----------------------------------- |
+| Name              | `cast`                              |
+| Global name&sup1; | `window.VlitejsCast`                |
+| Path              | `vlitejs/dist/plugins/cast`         |
+| Entry point       | `vlitejs/dist/plugins/cast/cast.js` |
+| Stylesheet        | -                                   |
+| Provider&sup2;    | `'html5'`                           |
+| Media type&sup3;  | `'video'`                           |
+
+- _&sup1; Useful only if `vLitejs` is included with a `<script>` tag (see [CDN](../../../README.md#CDN) section)._
+- _&sup2;Providers: `html5|youtube|vimeo`_
+- _&sup3;Media type: `video|audio`_
+
+## Usage
+
+### HTML
+
+```html
+<video id="player" class="vlite-js" src="<path_to_video_mp4>"></video>
+```
+
+### JavaScript
+
+```js
+import 'vlitejs/dist/vlite.css';
+import 'vlitejs/dist/plugins/cast.css';
+import Vlitejs from 'vlitejs';
+import VlitejsCast from 'vlitejs/dist/plugins/cast';
+
+Vlitejs.registerPlugin('cast', VlitejsCast);
+
+new Vlitejs('#player', {
+  plugins: ['cast']
+});
+```
+
+### Configuration
+
+The plugin allows customization with an optional object as the third parameter of the `registerPlugin` function.
+
+#### Subtitle
+
+Describes style information for a text subtitle.
+
+```js
+Vlitejs.registerPlugin('cast', VlitejsCast, {
+  textTrackStyle: {
+    backgroundColor: '#21212190'
+  }
+});
+```
+
+See the [TextTrackStyle](https://developers.google.com/cast/docs/reference/web_sender/chrome.cast.media.TextTrackStyle) reference for available fields.
+
+#### Metadata
+
+Describes media metadata description.
+
+```js
+Vlitejs.registerPlugin('cast', VlitejsCast, {
+  metadata: {
+    title: 'The Jungle Book',
+    subtitle: 'Walt Disney Animation Studios'
+  }
+});
+```
+
+> The `images` field automatically displays the poster available in the [Vlitejs options](../../../README.md#Options).
+
+See the [Metadata](https://developers.google.com/cast/docs/reference/web_sender/chrome.cast.media.GenericMediaMetadata) reference for available fields.
diff --git a/src/plugins/cast/config.js b/src/plugins/cast/config.js
@@ -0,0 +1,7 @@
+// import CSS
+import './css/cast.css'
+
+// import JS
+import cast from './js/cast'
+
+export default cast
diff --git a/src/plugins/cast/css/cast.css b/src/plugins/cast/css/cast.css
@@ -0,0 +1,36 @@
+.v {
+	&-castButton {
+		&.v-active svg {
+			fill: var(--vlite-colorPrimary);
+		}
+	}
+
+	&-deviceName {
+		display: none;
+		position: absolute;
+		top: 0;
+		right: 0;
+		color: #fff;
+		width: auto;
+		padding: 10px;
+		font-size: 12px;
+		line-height: 12px;
+		pointer-events: none;
+	}
+
+	&-remote {
+		.v-pipButton,
+		.v-fullscreenButton {
+			display: none;
+		}
+
+		.vlite-js,
+		.v-captions {
+			display: none;
+		}
+
+		.v-deviceName {
+			display: block;
+		}
+	}
+}