Merge branch 'master' of github.com:Wikia/jwplayer-fandom

README.md

@@ -66,6 +66,8 @@ Id of DOM element where the player should be placed
   // set language for captions, must map captions' label, defaults to user browser language
   // set to 'false' to turn them off completely
   selectedCaptionsLanguage: string,
+  // when player is <= 250px, we show only unmute, play/pause and position bar.
+  showSmallPlayerControls: true,
   // if settings is not defined or all show* properties are set to false, settings icon doesn't appear
   settings: {
     // set to true when you want to give user option to enable/disable autoplay

dist/index.html

@@ -35,6 +35,7 @@
 		// set language for captions, must map captions' label, defaults to user browser language
 		// set to 'false' to turn them off completely
 		selectedCaptionsLanguage: 'English',
+		showSmallPlayerControls: false,
 		settings: {
 			// set to true when you want to give user option to enable/disable autoplay
 			// autoplay toggle appears in settings menu which sends event `autoplayToggle` on click

src/index.html

@@ -35,6 +35,7 @@
 		// set language for captions, must map captions' label, defaults to user browser language
 		// set to 'false' to turn them off completely
 		selectedCaptionsLanguage: 'English',
+		showSmallPlayerControls: false,
 		settings: {
 			// set to true when you want to give user option to enable/disable autoplay
 			// autoplay toggle appears in settings menu which sends event `autoplayToggle` on click

src/index.js

@@ -14,6 +14,10 @@ window.wikiaJWPlayer = function (elementId, options, callback) {
 		script.onload = function () {
 			wikiaJWPlayerSettingsPlugin.register();
 
+			if (options.showSmallPlayerControls) {
+				wikiaJWPlayerSmallPlayerControls.register();
+			}
+
 			loadCallbacks.forEach(function (callback) {
 				callback();
 			});
@@ -75,7 +79,8 @@ window.wikiaJWPlayer = function (elementId, options, callback) {
 				mute: options.mute,
 				playlist: options.videoDetails.playlist,
 				title: options.videoDetails.title,
-				localization: i18n
+				localization: i18n,
+				repeat: options.repeat
 			};
 
 		playerSetup.plugins = {};
@@ -104,6 +109,10 @@ window.wikiaJWPlayer = function (elementId, options, callback) {
 			playerSetup.plugins['wikiaWatermark'] = {};
 		}
 
+		if (options.showSmallPlayerControls) {
+			playerSetup.plugins['smallPlayerControls'] = {};
+		}
+
 		logger.info('setupPlayer');
 		playerInstance.setup(playerSetup);
 		logger.info('after setup');

src/small-player-controls.plugin.js

@@ -0,0 +1,60 @@
+function wikiaJWPlayerSmallPlayerControls(player, config, div) {
+	this.player = player;
+	this.container = div;
+	this.config = config;
+	this.muteIcon = createSVG(wikiaJWPlayerIcons.volumeOff);
+	this.playIcon = createSVG(wikiaJWPlayerIcons.play);
+	this.pauseIcon = createSVG(wikiaJWPlayerIcons.pause);
+	this.container.classList.add('wikia-jw-small-player-controls-plugin');
+	this.wikiaControlsElement = document.createElement('div');
+	this.wikiaControlsElement.appendChild(this.muteIcon);
+	this.wikiaControlsElement.appendChild(this.pauseIcon);
+
+	this.unmuteHandler = this.unmuteHandler.bind(this);
+	this.playHandler = this.playHandler.bind(this);
+	this.pauseHandler = this.pauseHandler.bind(this);
+	this.readyHandler = this.readyHandler.bind(this);
+	this.resizeHandler = this.resizeHandler.bind(this);
+
+	this.muteIcon.addEventListener('click', this.unmuteHandler);
+	this.pauseIcon.addEventListener('click', this.pauseHandler);
+	this.playIcon.addEventListener('click', this.playHandler);
+
+	this.player.on('resize', this.resizeHandler);
+	this.player.on('ready', this.readyHandler);
+}
+
+wikiaJWPlayerSmallPlayerControls.prototype.readyHandler = function () {
+	if (this.player.getWidth() <= 250) {
+		this.player.getContainer().classList.add('wikia-jw-small-player-controls');
+		this.container.appendChild(this.wikiaControlsElement);
+	}
+};
+
+wikiaJWPlayerSmallPlayerControls.prototype.unmuteHandler = function () {
+	this.player.setMute(false);
+};
+
+wikiaJWPlayerSmallPlayerControls.prototype.pauseHandler = function () {
+	var icon = this.container.firstChild.childNodes[1];
+
+	icon.parentNode.replaceChild(this.playIcon, icon);
+	this.player.pause();
+};
+
+wikiaJWPlayerSmallPlayerControls.prototype.playHandler = function () {
+	var icon = this.container.firstChild.childNodes[1];
+
+	icon.parentNode.replaceChild(this.pauseIcon, icon);
+	this.player.play();
+};
+
+wikiaJWPlayerSmallPlayerControls.prototype.resizeHandler = function (playerDimensions) {
+	if (playerDimensions.width > 250) {
+		this.player.getContainer().classList.remove('wikia-jw-small-player-controls');
+	}
+};
+
+wikiaJWPlayerSmallPlayerControls.register = function () {
+	jwplayer().registerPlugin('smallPlayerControls', '8.0.0', wikiaJWPlayerSmallPlayerControls);
+};

src/styles/controls.plugin.scss

@@ -0,0 +1,56 @@
+.wikia-jw-small-player-controls {
+	.wikia-jw-small-player-controls-plugin {
+		align-items: center;
+		display: none;
+		fill: white;
+		height: 100%;
+		justify-content: center;
+		left: 0;
+		opacity: 0;
+		position: absolute;
+		top: 0;
+		transition: opacity .1s linear .1s;
+		width: 100%;
+
+		div {
+			display: flex;
+			justify-content: center;
+			width: 100%;
+
+			svg {
+				cursor: pointer;
+				height: 35px;
+				width: 35px;
+
+				&:first-child {
+					margin-right: 35px;
+				}
+			}
+		}
+	}
+
+	.jw-button-container {
+		display: none;
+	}
+
+	.jw-display-icon-container {
+		display: none;
+	}
+
+	.jw-controlbar {
+		margin-bottom: 2px;
+	}
+}
+
+.jwplayer:not(.jw-flag-user-inactive):not(.jw-state-idle), .jw-state-paused  {
+	.wikia-jw-small-player-controls-plugin {
+		opacity: 1;
+		display: flex;
+	}
+}
+
+.jwplayer:not(.wikia-jw-small-player-controls), .jw-state-idle, .jwplayer:not(.jw-flag-user-inactive):not(.wikia-jw-small-player-controls) {
+	.wikia-jw-small-player-controls-plugin {
+		display: none;
+	}
+}

src/styles/index.scss

@@ -1,3 +1,4 @@
 @import 'overrides';
 @import 'settings.plugin';
 @import 'watermark.plugin';
+@import 'controls.plugin';

src/styles/overrides.scss

@@ -17,6 +17,10 @@
 		}
 	}
 
+	.jw-related-shelf-container {
+		display: none;
+	}
+
 	// resets wikia button styling
 	button {
 		background-image: initial;