Add volume bar plugin

config/webpack.config.js

@@ -61,6 +61,11 @@ const plugins = [
 		entrykey: 'plugins/ima',
 		library: `${libraryName}Ima`,
 		path: './src/plugins/ima/config'
+	},
+	{
+		entrykey: 'plugins/volume-bar',
+		library: `${libraryName}VolumeBar`,
+		path: './src/plugins/volume-bar/config'
 	}
 ]
 

examples/audio/config.js

@@ -1,5 +1,9 @@
 import '../../dist/vlite.css'
+import '../../dist/plugins/volume-bar.css'
 import Vlitejs from '../../dist/vlite.js'
+import VlitejsVolumeBar from '../../dist/plugins/volume-bar'
+
+Vlitejs.registerPlugin('volume-bar', VlitejsVolumeBar)
 
 const vlite = new Vlitejs('#player', {
 	options: {
@@ -11,6 +15,7 @@ const vlite = new Vlitejs('#player', {
 		volume: true,
 		loop: false
 	},
+	plugins: ['volume-bar'],
 	onReady: (player) => {
 		console.log(player)
 

examples/dailymotion/config.js

@@ -1,10 +1,14 @@
 import '../../dist/vlite.css'
+import '../../dist/plugins/volume-bar.css'
 import Vlitejs from '../../dist/vlite.js'
 import VlitejsDailymotion from '../../dist/providers/dailymotion.js'
+import VlitejsVolumeBar from '../../dist/plugins/volume-bar'
 
 Vlitejs.registerProvider('dailymotion', VlitejsDailymotion, {
 	playerId: 'x9scg'
 })
+Vlitejs.registerPlugin('volume-bar', VlitejsVolumeBar)
+
 const vlite = new Vlitejs('#player', {
 	options: {
 		controls: true,
@@ -22,6 +26,7 @@ const vlite = new Vlitejs('#player', {
 		autoHide: true
 	},
 	provider: 'dailymotion',
+	plugins: ['volume-bar'],
 	onReady: (player) => {
 		console.log(player)
 

examples/html5/config.js

@@ -1,12 +1,15 @@
 import '../../dist/vlite.css'
 import '../../dist/plugins/subtitle.css'
+import '../../dist/plugins/pip.css'
 import '../../dist/plugins/cast.css'
 import '../../dist/plugins/airplay.css'
+import '../../dist/plugins/volume-bar.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'
 import VlitejsAirplay from '../../dist/plugins/airplay.js'
+import VlitejsVolumeBar from '../../dist/plugins/volume-bar'
 
 Vlitejs.registerPlugin('subtitle', VlitejsSubtitle)
 Vlitejs.registerPlugin('pip', VlitejsPip)
@@ -20,6 +23,7 @@ Vlitejs.registerPlugin('cast', VlitejsCast, {
 	}
 })
 Vlitejs.registerPlugin('airplay', VlitejsAirplay)
+Vlitejs.registerPlugin('volume-bar', VlitejsVolumeBar)
 
 /* eslint-disable no-unused-vars */
 const vlite = new Vlitejs('#player', {
@@ -38,7 +42,7 @@ const vlite = new Vlitejs('#player', {
 		muted: false,
 		autoHide: true
 	},
-	plugins: ['subtitle', 'pip', 'cast', 'airplay'],
+	plugins: ['subtitle', 'pip', 'cast', 'airplay', 'volume-bar'],
 	onReady: function (player) {
 		console.log(player)
 

examples/vimeo/config.js

@@ -1,8 +1,12 @@
 import '../../dist/vlite.css'
+import '../../dist/plugins/volume-bar.css'
 import Vlitejs from '../../dist/vlite.js'
 import VlitejsVimeo from '../../dist/providers/vimeo.js'
+import VlitejsVolumeBar from '../../dist/plugins/volume-bar'
 
 Vlitejs.registerProvider('vimeo', VlitejsVimeo)
+Vlitejs.registerPlugin('volume-bar', VlitejsVolumeBar)
+
 const vlite = new Vlitejs('#player', {
 	options: {
 		controls: true,
@@ -21,6 +25,7 @@ const vlite = new Vlitejs('#player', {
 		providerParams: {}
 	},
 	provider: 'vimeo',
+	plugins: ['volume-bar'],
 	onReady: (player) => {
 		console.log(player)
 

examples/youtube/config.js

@@ -1,8 +1,11 @@
 import '../../dist/vlite.css'
+import '../../dist/plugins/volume-bar.css'
 import Vlitejs from '../../dist/vlite.js'
 import VlitejsYoutube from '../../dist/providers/youtube.js'
+import VlitejsVolumeBar from '../../dist/plugins/volume-bar'
 
 Vlitejs.registerProvider('youtube', VlitejsYoutube)
+Vlitejs.registerPlugin('volume-bar', VlitejsVolumeBar)
 
 /* eslint-disable no-unused-vars */
 const vlite = new Vlitejs('#player', {
@@ -23,6 +26,7 @@ const vlite = new Vlitejs('#player', {
 		providerParams: {}
 	},
 	provider: 'youtube',
+	plugins: ['volume-bar'],
 	onReady: function (player) {
 		console.log(player)
 

src/plugins/README.md

@@ -10,6 +10,7 @@ Each plugin can be loaded on demand with the API.
 | ------------------------------------- | ------------------------------------------ |
 | [Subtitle](./subtitle/README.md)      | Supports for multiple caption tracks (VTT) |
 | [Picture-in-Picture](./pip/README.md) | Supports for picture-in-picture mode       |
+| [Volume bar](./volume-bar/README.md)  | Supports for volume bar                    |
 | [Cast](./cast/README.md)              | Supports for Google Cast API               |
 | [AirPlay](./airplay/README.md)        | Supports for Apple AirPlay API             |
 | [Ima](./ima/README.md)                | Supports for Google IMA SDK                |

src/plugins/airplay/css/airplay.css

@@ -1,5 +1,10 @@
 .v {
 	&-airPlayButton {
+		svg {
+			width: 28px;
+			height: 28px;
+		}
+
 		&.v-active svg {
 			fill: var(--vlite-colorPrimary);
 		}

src/plugins/cast/css/cast.css

@@ -1,5 +1,10 @@
 .v {
 	&-castButton {
+		svg {
+			width: 26px;
+			height: 22px;
+		}
+
 		&.v-active svg {
 			fill: var(--vlite-colorPrimary);
 		}

src/plugins/pip/README.md

@@ -4,15 +4,15 @@ Supports for Picture-in-Picture mode.
 
 ## Overview
 
-| <!-- -->          | <!-- -->                          |
-| ----------------- | --------------------------------- |
-| Name              | `pip`                             |
-| Global name&sup1; | `window.VlitejsPip`               |
-| Path              | `vlitejs/dist/plugins/pip`        |
-| Entry point       | `vlitejs/dist/plugins/pip/pip.js` |
-| Stylesheet        | -                                 |
-| Provider&sup2;    | `'html5'`                         |
-| Media type&sup3;  | `'video'`                         |
+| <!-- -->          | <!-- -->                           |
+| ----------------- | ---------------------------------- |
+| Name              | `pip`                              |
+| Global name&sup1; | `window.VlitejsPip`                |
+| Path              | `vlitejs/dist/plugins/pip`         |
+| Entry point       | `vlitejs/dist/plugins/pip/pip.js`  |
+| Stylesheet        | `vlitejs/dist/plugins/pip/pip.css` |
+| Provider&sup2;    | `'html5'`                          |
+| Media type&sup3;  | `'video'`                          |
 
 - _&sup1; Useful only if `vLitejs` is included with a `<script>` tag (see [CDN](../../../README.md#CDN) section)._
 

src/plugins/pip/config.js

@@ -1,3 +1,6 @@
+// import CSS
+import './css/pip.css'
+
 // import JS
 import pictureInPicture from './js/pip'
 

src/plugins/pip/css/pip.css

@@ -0,0 +1,8 @@
+.v {
+	&-pipButton {
+		svg {
+			width: 26px;
+			height: 22px;
+		}
+	}
+}

src/plugins/subtitle/css/subtitle.css

@@ -1,4 +1,11 @@
 .v {
+	&-subtitleButton {
+		svg {
+			width: 26px;
+			height: 22px;
+		}
+	}
+
 	&-captions {
 		position: absolute;
 		left: 50%;

src/plugins/subtitle/js/subtitle.ts

@@ -97,10 +97,16 @@ export default class Subtitle {
 		)
 
 		const controlBar = this.player.elements.container.querySelector('.v-controlBar')
-		const insertPosition = this.getInsertPosition()
-		const targetElement = this.player.elements.container.querySelector(insertPosition.selector)
-		if (controlBar && targetElement) {
-			targetElement.insertAdjacentHTML(insertPosition.position as string, this.getTemplate())
+		const fullscreenButton = this.player.elements.container.querySelector(
+			'.v-fullscreenButton'
+		) as HTMLElement
+
+		if (controlBar) {
+			if (fullscreenButton) {
+				fullscreenButton.insertAdjacentHTML('beforebegin', this.getTemplate())
+			} else {
+				controlBar.insertAdjacentHTML('beforeend', this.getTemplate())
+			}
 		}
 	}
 
@@ -154,39 +160,6 @@ export default class Subtitle {
 			`
 	}
 
-	/**
-	 * Get the insertion position according to the available controls
-	 * @returns {Object} Selector and position for the subtitle button
-	 */
-	getInsertPosition(): InsertPosition {
-		if (this.player.options.progressBar) {
-			return {
-				selector: '.v-progressBar',
-				position: 'afterend'
-			}
-		} else if (this.player.options.volume) {
-			return {
-				selector: '.v-volumeButton',
-				position: 'beforebegin'
-			}
-		} else if (this.player.elements.container.querySelector('.v-pipButton')) {
-			return {
-				selector: '.v-pipButton',
-				position: 'beforebegin'
-			}
-		} else if (this.player.options.fullscreen) {
-			return {
-				selector: '.v-fullscreenButton',
-				position: 'beforebegin'
-			}
-		} else {
-			return {
-				selector: '.v-controlBar',
-				position: 'beforeend'
-			}
-		}
-	}
-
 	/**
 	 * Add event listeners
 	 */

src/plugins/volume-bar/README.md

@@ -0,0 +1,41 @@
+# Plugin: Volume bar
+
+Supports for volume bar to adjust the media volume.
+
+> **Note** Available on screen more than `500px`.
+
+## Overview
+
+| <!-- -->          | <!-- -->                                         |
+| ----------------- | ------------------------------------------------ |
+| Name              | `pip`                                            |
+| Global name&sup1; | `window.VlitejsVolumeBar`                        |
+| Path              | `vlitejs/dist/plugins/volume-bar`                |
+| Entry point       | `vlitejs/dist/plugins/volume-bar/volume-bar.js`  |
+| Stylesheet        | `vlitejs/dist/plugins/volume-bar/volume-bar.css` |
+| Provider&sup2;    | `'html5', 'youtube', 'vimeo', 'dailymotion'`     |
+| Media type&sup3;  | `'video', 'audio'`                               |
+
+- _&sup1; Useful only if `vLitejs` is included with a `<script>` tag (see [CDN](../../../README.md#CDN) section)._
+
+## Usage
+
+### HTML
+
+```html
+<video id="player" class="vlite-js" src="<path_to_video_mp4>"></video>
+```
+
+### JavaScript
+
+```js
+import 'vlitejs/dist/vlite.css';
+import Vlitejs from 'vlitejs';
+import VlitejsVolumeBar from 'vlitejs/dist/plugins/volume-bar';
+
+Vlitejs.registerPlugin('volume-bar', VlitejsVolumeBar);
+
+new Vlitejs('#player', {
+  plugins: ['volume-bar']
+});
+```

src/plugins/volume-bar/config.js

@@ -0,0 +1,7 @@
+// import CSS
+import './css/volume-bar.css'
+
+// import JS
+import volumeBar from './js/volume-bar'
+
+export default volumeBar

src/plugins/volume-bar/css/volume-bar.css

@@ -0,0 +1,36 @@
+.v {
+	&-volumeArea {
+		display: flex;
+		align-items: center;
+		height: 100%;
+	}
+
+	&-volumeBar {
+		transition: width var(--vlite-transition), margin var(--vlite-transition);
+		overflow: hidden;
+		width: 0;
+		height: 25px;
+
+		&:focus-visible {
+			width: 52px;
+			margin-right: 10px;
+		}
+	}
+}
+
+@media only screen and (max-width: 500px) {
+	.v {
+		&-volumeBar {
+			display: none;
+		}
+	}
+}
+
+@media (hover: hover) {
+	.v {
+		&-volumeArea:hover &-volumeBar {
+			width: 52px;
+			margin-right: 10px;
+		}
+	}
+}