@vidispine/vdt-videojs 23.1.0 → 23.2.0-pre.2

package/src/player.scss

@@ -1,604 +0,0 @@
-@import '~video.js/dist/video-js.css';
-
-$red: #f00;
-$dark-translucent: rgba(28,28,28,0.9);
-$dark-gray: #333;
-$light-translucent: rgba(255,255,255,.2);
-$large-icon-size: 90px;
-$controls-height: 50px;
-$mid-opacity: 0.6;
-$mid-radius: 7px;
-
-//remove safari's and other webkit browser's blue glow on tab selection
-textarea, select, input, button, video { outline: none; }
-button:focus, .video-js .vjs-menu-item{
-	outline: initial;
-}
-
-.video-js{
-	max-width: 100%;
-	overflow: hidden;
-
-	&.init{
-		height: 0px !important;
-		display: none;;
-	}
-
-	video{		
-		transform: translate3d(0px, 0px, 0px);
-		-webkit-transform: translate3d(0px, 0px, 0px);
-		display: block;
-	}
-
-	.vjs-poster{
-		background-size: cover;
-	}
-
-	.vjs-control-bar{
-		height: $controls-height;
-		padding-top: 6px;
-		display: flex;
-		/* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#000000+0,000000+100&0+15,0.3+100 */
-		background: -moz-linear-gradient(top,  rgba(0,0,0,0) 0%, rgba(0,0,0,0) 15%, rgba(0,0,0,0.3) 100%); /* FF3.6-15 */
-		background: -webkit-linear-gradient(top,  rgba(0,0,0,0) 0%,rgba(0,0,0,0) 15%,rgba(0,0,0,0.3) 100%); /* Chrome10-25,Safari5.1-6 */
-		background: linear-gradient(to bottom,  rgba(0,0,0,0) 0%,rgba(0,0,0,0) 15%,rgba(0,0,0,0.3) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
-		filter: progid:DXImageTransform.Microsoft.gradient( startColorstr="#00000000", endColorstr="#4d000000",GradientType=0 ); /* IE6-9 */
-	
-		transform: translate3d(0px, 0px, 0px);
-		-webkit-transform: translate3d(0px, 0px, 0px);
-		z-index: 2;
-
-		.vdt-seekbar-wrapper{
-			top: 0px;
-			left: 0px;
-			height: 10px;
-			width: 100%;
-			position: absolute;
-			margin: 0 auto;
-		}
-	}
-
-	.vjs-big-play-button{
-		font-size: $large-icon-size;
-		border: 0px;
-		background-color: transparent;
-		text-shadow: 1px 2px 40px rgba(0,0,0,.4);
-		z-index: 2;
-
-		.vjs-icon-placeholder:before{
-			padding-top: 5px; // play  button offset correction
-		}
-	}
-
-	&:hover{
-		.vjs-big-play-button,
-		.vjs-big-play-button:focus{
-			background-color: transparent;
-		}
-	}
-
-
-	//control bar
-	.vjs-progress-control {
-		top: 0px;
-		left: 0px;
-		position: absolute;
-		display: block;
-		width: 100%;
-		height: 10px;
-
-		.vjs-load-progress{
-			background: $light-translucent;
-		}
-
-		&:hover .vjs-play-progress .vjs-time-tooltip,
-		.vjs-play-progress .vjs-time-tooltip{
-			display: none;
-		}
-	} 
-
-	// push everything after time display to the right side
-	.vjs-time-control{
-		&.duration, &.vjs-duration{
-			margin-right: auto;
-		}
-	}
-
-	.vjs-subs-caps-button, .vdt-screenshot-button{
-		.vjs-icon-placeholder{
-			opacity: .6;
-		}
-	}
-
-	&.has-vdt-menu .vjs-subs-caps-button{
-		display: none;
-	}
-
-	&.subtitles-active{
-		.vjs-subs-caps-button .vjs-icon-placeholder{
-			opacity: 1;
-		}
-	}
-
-	.vjs-control{
-		font-size: 14px;
-	}
-
-	.vjs-play-progress.vjs-slider-bar{
-		background-color: $red;
-	}
-
-	.vjs-current-time,
-	.vjs-time-control,
-	.vjs-no-flex .vjs-current-time{
-	  display: block;
-	}
-
-	.vjs-time-control{
-		font-size: 14px;
-		padding: 0px;
-		min-width: 14px;
-		text-align: center;
-	}
-
-	.vjs-volume-panel{
-		// margin-right: 20px;
-		width: 3em;
-		.vjs-mute-control{
-			width: 3em;
-		}
-	}
-
-	.vjs-menu-button-popup .vjs-menu{
-		bottom: 20px;
-		.vjs-menu-content{
-			background-color: $dark-translucent;
-			border-radius: $mid-radius;
-		}
-
-		li.vjs-menu-item:focus:not(.vjs-selected){
-			background-color: transparent;
-		}
-
-		li.vjs-menu-item:hover:not(.vjs-selected){
-			background-color: $light-translucent
-		}
-
-		.vjs-menu-item-text{
-			color: white;
-		}
-
-		.vjs-menu-item.vjs-selected .vjs-menu-item-text{
-			color: #333;
-		}
-	}
-
-	//our special osd (hosts custom play button and other features in the future, has css vertical centering)
-	.vdt-player-osd{
-		pointer-events: none;
-		position: absolute;
-		top: 0px; left: 0px;
-		height: 100%;
-		width: 100%;
-		opacity: 0;
-		z-index: 4;
-		-webkit-transform: translate3d(0px,0px,0px) scale3d(0.5,0.5,.5);
-		-webkit-backface-visibility: hidden;
-		backface-visibility: hidden;
-		transform: translate3d(0px,0px,0px) scale3d(0.5,0.5,.5);
-		transition: 200ms ease-out all;
-		// animation-fill-mode: backwards;
-
-		&.active{
-			opacity: 1;
-			-webkit-transform: scale3d(1,1,1);
-			transform: scale3d(1,1,1);
-		}
-
-		table{
-			width: 100%; height: 100%;
-			td{
-				vertical-align: middle;
-				text-align: center;
-				.osd-feedback-icon{
-					&:before{
-						font-family: VideoJS;
-						content: "\f101";
-						font-size: 50px;
-						padding: 15px;
-						display: inline-block;
-						height: 80px; //20 + 20 + 60
-						width: 80px;
-						text-align: center;
-						background: rgba(0,0,0,.2);
-						border-radius: 100%;
-					}
-				}
-				.pause:before{
-					content: "\f103";
-				}
-
-				.volchange.high:before{
-					content: "\f107";
-				}
-
-				.volchange.mid:before{
-					content: "\f106";
-				}
-
-				.volchange.low:before{
-					content: "\f105";
-				}
-
-				.mute:before, .volchange.null:before{
-					content: "\f104";
-				}
-
-				.unmute:before{
-					content: "\f107";
-				}
-
-				.forward-jump:before, .backward-jump:before{
-					content: "\f101\f101";
-					letter-spacing: -38px;
-					padding-left: 0px;
-					padding-right: 34px;
-				}
-
-				.backward-jump:before{
-					-webkit-transform: scaleX(-1);
-					transform: scaleX(-1);
-				}
-			}
-		}
-	}
-
-
-	//spinner / loader customizations
-	@keyframes vjs-spinner-fade {
-	  0% {
-	    border-top-color: rgba(255, 255, 255, 0.6);
-	  }
-	  35% {
-	    border-top-color: white;
-	  }
-	  100% {
-	    border-top-color: rgba(255, 255, 255, 0.6);
-	  }
-	}
-
-	.vjs-loading-spinner {
-		&:after, &:before{
-			margin: -5px;
-		}
-
-		margin: -40px 0 0 -40px;
-		opacity: 0.85;
-		border: 5px solid rgba(255, 255, 255, 0.7);
-		width: 80px;
-		height: 80px;
-		border-radius: 100px;
-		z-index: 5;
-	}
-
-
-	//css relating to subtitles
-	.vjs-text-track-display,  &.vjs-user-inactive.vjs-playing .vjs-text-track-display{
-		bottom: 0px;
-		transition: transform 300ms ease-out;
-		-webkit-transform: translate3d(0px, 0px, 0px);
-		-webkit-backface-visibility: hidden;
-		backface-visibility: hidden;
-		> div{
-			display: table;
-			width: 100%;
-			height: 100%;
-			margin: 0px !important; 
-		}
-
-		.vjs-text-track-cue{ //needs !important to override video.js inline styles
-			width: 100% !important;
-			bottom: 0px !important;
-			top: initial !important;
-			left: initial !important;
-			right: initial !important;
-			font-size: 18px !important;
-			height: auto !important;
-			padding-bottom: 1.5%;
-			display: table-cell;
-			
-			> div{
-				padding: 2px 4px 2px 4px;
-				line-height: 1.25;
-				border-radius: 2px;
-			}
-		}
-	}
-
-	 // applies to fullscreen
-	&.vjs-fullscreen,
-	&.vjs-user-inactive.vjs-playing.vjs-fullscreen{
-		.vjs-text-track-display .vjs-text-track-cue{
-			-webkit-backface-visibility: hidden;
-			backface-visibility: hidden;
-			font-size: 24px !important;
-		}
-	}
-
-	// control bar animation
-	&.vjs-has-started.vjs-user-inactive.vjs-playing:not(.vjs-fullscreen), // prevent controls staying shown in fs
-	&div,
-	&.vjs-controls-enabled.vjs-user-active,
-	&.vjs-has-started.vjs-user-inactive.vjs-paused{
-		.vjs-control-bar {
-			opacity: 1;
-		}
-	}
-
-	&.vjs-has-started.vjs-user-inactive.vjs-playing:not(.controls-below-player) .vjs-control-bar,
-	&:not(.controls-below-player) .vjs-control-bar{
-		-webkit-backface-visibility: hidden;
-		backface-visibility: hidden;
-		transform: translate3d(0px, $controls-height, 0px);
-		transition: transform 300ms ease-in-out;
-	}
-
-	&.vjs-controls-enabled.vjs-user-active:not(.controls-below-player),
-	&.vjs-has-started.vjs-user-inactive.vjs-paused:not(.controls-below-player){
-		.vjs-control-bar{
-			transform: translate3d(0px, 0px, 0px);
-			-webkit-transform: translate3d(0px, 0px, 0px);
-		}
-
-		&:not(.vjs-controls-disabled) .vjs-text-track-display{
-			transform: translate3d(0px, -$controls-height, 0px);
-		}
-	}
-
-	//timecode
-	.vdt-timecode{
-		display: inline;
-		font-family: "monospace", sans-serif;
-		margin-left: 20px;
-
-		input, span{
-			font-size: 16px;
-		}
-
-		span{
-			text-align: center;
-			display: inline-block;
-		}
-
-		input{
-			display: inline-block;
-			width: auto;
-			border: 0px;
-			background: transparent;
-			color: inherit;
-			width: 21px;
-		}
-
-		@media all and (max-width: 640px){
-			flex-grow: 3;
-		}
-	}
-
-		
-	.vdt-timecode.duration{ // read-only duration display timecode
-		margin-left: 0px;
-		margin-right: auto;
-		span{ cursor: default; }
-		&:before{
-			content: "/";
-			display: inline-block;
-			margin: 0px 5px;
-			font-size: 16px;
-		}
-
-		@media all and (max-width: 640px){ // gets too cramped on mobile devices
-			display: none;
-		}
-	}
-
-	// buttons
-	.vdt-cinema-button,
-	.vdt-settings-menu-button,
-	.vdt-screenshot-button{
-		cursor: pointer;
-		&:after{
-			content: "\f10b";
-			font-family: VideoJS;
-			font-size: 22px;
-		}
-
-		&:active, &:focus{
-			opacity: $mid-opacity;
-		}
-	}
-
-	.vdt-cinema-button:after{
-		content: "\f10a";
-	}
-
-	.vdt-settings-menu-button:after{
-		content: "\f110";
-	}
-
-	// waveform visualisation
-	.vdt-waveform-visual, .vdt-help-overlay{
-		position: absolute;
-		top: 0px;
-		left: 0px;
-		background: #888;
-		height: 100%;
-		width: 100%;
-		display: none;
-
-		/* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#88bfe8+0,71a1c4+100 */
-		background: rgb(136,191,232); /* Old browsers */
-		background: -moz-linear-gradient(top,  rgba(136,191,232,1) 0%, rgba(113,161,196,1) 100%); /* FF3.6-15 */
-		background: -webkit-linear-gradient(top,  rgba(136,191,232,1) 0%,rgba(113,161,196,1) 100%); /* Chrome10-25,Safari5.1-6 */
-		background: linear-gradient(to bottom,  rgba(136,191,232,1) 0%,rgba(113,161,196,1) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
-		filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#88bfe8', endColorstr='#71a1c4',GradientType=0 ); /* IE6-9 */
-
-
-		canvas{
-			height: 100%;
-			width: 100%;
-		}
-	}
-
-	&.vjs-has-started .vdt-waveform-visual{
-		display: block;
-	}
-
-	// help overlay
-	.vdt-help-overlay{ // cascade unwanted css
-		font-size: 15px;
-		background: transparent;
-		z-index: 2;
-		transition: opacity 1s ease-in-out;
-		opacity: 0;
-		padding-bottom: 12px;
-		> table{
-			height: 100%;
-			margin: 0 auto;
-
-			td.vdt-help-contents{
-				table {
-					border-radius: $mid-radius;
-					max-height: 400px;
-					-webkit-backdrop-filter: blur(10px);
-					background: rgba(0,0,0,$mid-opacity);
-
-					td { padding: 6px 6px; } // inside table
-
-					td:nth-child(2), td td:nth-child(4){
-						padding: 4px 9px;
-					}
-
-					td:nth-child(2){
-						padding-right: 32px;
-					}
-
-					td:first-child, td:nth-child(3){
-						div{ // key icon
-							text-align: center;
-							padding: 3px;
-							border: 1px solid white;
-							border-radius: 2px;
-							background: rgba(255,255,255,.1);
-							font-size: 13px;
-							min-width: 21px;
-						}
-					}
-
-					// a way to do padding for table sides
-					td:first-child{	padding-left: 16px;	}
-					td:last-child{ padding-right: 16px;	}
-					tr:first-child td{ padding-top: 16px; }
-					tr:last-child td{ padding-bottom: 16px;	}
-				}
-			}
-
-			td{
-				vertical-align: middle;
-			}
-		}
-
-		&.active{
-			display: block;
-			opacity: 1;
-		}
-	}
-
-	&.controls-below-player:not(.vjs-controls-disabled).vjs-fullscreen{
-		&.vjs-user-inactive.vjs-playing .vjs-text-track-display, .vjs-text-track-display{
-			bottom: $controls-height + 10px;
-		}
-	}
-	
-	&.controls-below-player:not(.vjs-fullscreen):not(.vjs-controls-disabled){
-		overflow: visible;
-		// position: relative;
-		width: auto;
-		height: auto;
-		background-color: transparent;
-		margin-bottom: $controls-height + 20px;
-
-		video{ position: relative;}
-
-		// .vjs-big-play-button, .vdt-help-overlay{
-		// 	transform: translateY(- $controls-height / 2);
-		// }
-
-		// .vjs-loading-spinner{
-		// 	transform: translateY(-$controls-height / 2);
-		// }
-
-		// .vjs-menu-button-popup .vjs-menu{
-		// 	bottom: 30px;
-		// }
-
-		.vjs-control-bar{
-			transform: translate3d(0px, $controls-height + 10px, 0px);
-			transition: all 300ms ease-in-out;
-			background: transparent;
-
-			.vjs-button, .vdt-timecode{
-				&:not(.vjs-menu-item-text){
-					color: #333;
-				}
-			}
-		}
-
-		// when on dark bg
-		&.on-dark .vjs-control-bar{
-			.vjs-button, .vdt-timecode{
-				&:not(.vjs-menu-item-text){
-					color: #efefef;
-				}
-			}
-		}
-
-		.vjs-progress-holder{
-			margin: 0 auto;
-		}
-
-		.vjs-menu{
-			bottom: 35px;
-		}
-
-		.vjs-poster{
-			height: initial;
-		}
-		// .vjs-poster{
-		// 	bottom: $controls-height + 10px;
-		// }
-
-		// .vdt-player-osd{
-		// 	top: initial;
-		// 	bottom: ($controls-height + 10px) / 2;
-		// }
-
-		// .vjs-text-track-display{
-		// 	bottom: $controls-height + 10px;
-		// }
-
-		// &.vjs-user-inactive.vjs-playing .vjs-text-track-display{
-		// 	bottom: $controls-height + 10px;
-		// }
-	}
-
-	
-	//remove these from display, best to find options that prevent inserting them in them first place
-	.vjs-play-progress:before,
-	.vjs-remaining-time,
-	.vjs-picture-in-picture-control,
-	.vjs-progress-control:hover .vjs-time-tooltips,
-	.vjs-play-progress .vjs-time-tooltip,
-	.vjs-progress-control:hover .vjs-progress-holder:focus .vjs-time-tooltip{
-		display: none;
-	}
-}

package/src/player.usage.stories.mdx

@@ -1,62 +0,0 @@
-import { Meta } from '@storybook/addon-docs';
-
-import { docsParameters } from '@vidispine/vdt-storybook';
-
-<Meta title="vdt-videojs/Player/Example usage" parameters={docsParameters} />
-
-## Example Usage
-
-Here's an example how to use the Player class in a pure js way in your project:
-
-```js
-import { Player } from '@vidispine/vdt-videojs';
-
-const playerReference = new Player({
-  target: document.getElementById('player-node'), // HTML mount point
-
-  sources: [
-    { src: 'https://some.domain/video-file.mp4', type: 'video/mp4' },
-    { src: 'https://some.domain/video-file.webm', type: 'video/webm' },
-  ],
-
-  posterUrl: 'https://some.domain/poster-image.jpg', // optional
-  color: '#e84393', // optional - replaces primary color
-
-  subtitles: [
-    // optional
-    {
-      src: 'https://some.domain/video-subtitles.vvt',
-      lang: 'en',
-      label: 'English',
-    },
-    {
-      src: 'https://some.domain/video-subtitles-es.vvt',
-      lang: 'es',
-      label: 'Spanish',
-    },
-    {
-      // or use the Blob constructor with file string contents
-      src: new Blob(['WEBVTT\n\n\n00:00:00.500(...)'], 'text/plain'),
-      lang: 'dk',
-      label: 'Danish',
-    },
-  ],
-
-  timecode: false, // optional - replaces time display with SMPTE timecode
-  frameRate: 24000 / 1001, // optional - use together with timecode option
-
-  onReady: () => {
-    // optional
-    // invoke methods after player has done initializing
-  },
-
-  /*
-	optional - will add a screenshot button to player
-	control bar and invoke method callback on click with player's
-	current time in seconds as an argument (from start)
-	*/
-  onScreenshot: (currentTime) => {
-    console.log(currentTime); // -> 0.1280 (current position in s)
-  },
-});
-```