Dev

README.md

@@ -28,3 +28,5 @@ $ npm run i18n-compile
 
 ## License
 See the [LICENSE](./LICENSE) file for licensing information.
+
+docker build --no-cache --build-arg FFMPEG_IMAGE=datarhei/base:alpine-ffmpeg-latest --build-arg CORE_IMAGE=datarhei/base:alpine-core-latest --build-arg RESTREAMER_UI_IMAGE=myrsui -t myrestreamer:latest .

public/_player/videojs/dist/videojs-overlay.js

@@ -403,7 +403,7 @@
           }
         }
         const playerChild = this.player.addChild('overlay', mergeOptions);
-        this.player.el().insertBefore(playerChild.el(), this.player.controlBar.el());
+        this.player.el().insertAfter(playerChild.el(), this.player.controlBar.el());
         return playerChild;
       });
     }

public/_player/videojs/player.html

@@ -113,6 +113,8 @@
 
 	var player = videojs('player', config);
 
+	var overlays = [];
+
 	if(playerConfig.logo.image.length != 0) {
 		const imgTag = new Image();
         imgTag.src = playerConfig.logo.image;
@@ -121,18 +123,43 @@
           	const logoHeight = imgTag.height;
           	const overlayPosition = playerConfig.logo.position || 'top-left';
           	const overlayLink = playerConfig.logo.link || '#';
-          	player.overlay({
-            	overlays: [{
-					content: `<a href="${overlayLink}" target="_blank"><img src="${playerConfig.logo.image + '?' + Math.random()}" alt="Logo" width="${logoWidth}" height="${logoHeight}"></a>`,
-              		start: 'play',
-              		end: 'pause',
-              		align: overlayPosition,
-              		showBackground: false
-           		}]
-          	});
+          	overlays.push({
+				content: `<a href="${overlayLink}" target="_blank"><img src="${playerConfig.logo.image + '?' + Math.random()}" alt="Logo" width="${logoWidth}" height="${logoHeight}"></a>`,
+              	start: 'play',
+              	end: 'pause',
+              	align: overlayPosition,
+              	showBackground: false
+           	});
 		};
 	}
 
+	if(playerConfig.logo2.image.length != 0) {
+		const imgTag2 = new Image();
+        imgTag2.src = playerConfig.logo2.image;
+        imgTag2.onload = function () {
+          	const logo2Width = imgTag2.width;
+          	const logo2Height = imgTag2.height;
+          	const overlayPosition2 = playerConfig.logo2.position || 'top-right';
+          	const overlayLink2 = playerConfig.logo2.link || '#';
+          	overlays.push({
+				content: `<a href="${overlayLink2}" target="_blank"><img src="${playerConfig.logo2.image + '?' + Math.random()}" alt="Logo 2" width="${logo2Width}" height="${logo2Height}"></a>`,
+              	start: 'play',
+              	end: 'pause',
+              	align: overlayPosition2,
+              	showBackground: false
+           	});
+		};
+	}
+
+	// Apply overlays after both logos are loaded
+	setTimeout(function() {
+		if(overlays.length > 0) {
+			player.overlay({
+				overlays: overlays
+			});
+		}
+	}, 100);
+
 	player.ready(function() {
 		player.license(playerConfig.license);
 

public/_playersite/videojs.js

@@ -32,6 +32,8 @@ player.ready(function () {
 
 	player.license(playerConfig.license);
 
+	var overlays = [];
+
 	if (playerConfig.logo.image.length != 0) {
 		var overlay = null;
 
@@ -52,19 +54,53 @@ player.ready(function () {
 			overlay = imgTag.outerHTML;
 		}
 
-		player.overlay({
+		overlays.push({
+			showBackground: false,
+			content: overlay,
+			start: 'playing',
+			end: 'pause',
 			align: playerConfig.logo.position,
-			overlays: [
-				{
-					showBackground: false,
-					content: overlay,
-					start: 'playing',
-					end: 'pause',
-				},
-			],
 		});
 	}
 
+	if (playerConfig.logo2.image.length != 0) {
+		var overlay2 = null;
+
+		var imgTag2 = new Image();
+		imgTag2.onLoad = function () {
+			imgTag2.setAttribute('width', this.width);
+			imgTag2.setAttribute('height'.this.height);
+		};
+		imgTag2.src = playerConfig.logo2.image + '?' + Math.random();
+
+		if (playerConfig.logo2.link.length !== 0) {
+			var aTag2 = document.createElement('a');
+			aTag2.setAttribute('href', playerConfig.logo2.link);
+			aTag2.setAttribute('target', '_blank');
+			aTag2.appendChild(imgTag2);
+			overlay2 = aTag2.outerHTML;
+		} else {
+			overlay2 = imgTag2.outerHTML;
+		}
+
+		overlays.push({
+			showBackground: false,
+			content: overlay2,
+			start: 'playing',
+			end: 'pause',
+			align: playerConfig.logo2.position,
+		});
+	}
+
+	// Apply overlays after setup
+	setTimeout(function() {
+		if (overlays.length > 0) {
+			player.overlay({
+				overlays: overlays,
+			});
+		}
+	}, 100);
+
 	if (autoplay === true) {
 		// https://videojs.com/blog/autoplay-best-practices-with-video-js/
 		player.play();