Commit 83379f12 authored by eh2321's avatar eh2321
Browse files

Added Svg files for two streams;

Based on defined number of streams change between two or three streams functionality
parent 557d8b67
...@@ -141,13 +141,19 @@ ...@@ -141,13 +141,19 @@
<time class="m-left" id="time-duration"></time> <time class="m-left" id="time-duration"></time>
</div><!--END DIV CONTROLS-SEEKBAR-TIME --> </div><!--END DIV CONTROLS-SEEKBAR-TIME -->
<div class="flex flex-auto"> <div class="flex flex-auto">
<div id="video-stream-icon"> <div id="video-stream-icon-three-streams">
<div class="flex flex-auto" id="monitor"> <div class="flex flex-auto monitor">
<button onclick="changeVideo(1)"></button> <button onclick="changeVideo(1)"></button>
<button onclick="changeVideo(2)"></button> <button onclick="changeVideo(2)"></button>
<button onclick="changeVideo(3)"></button> <button onclick="changeVideo(3)"></button>
</div> </div>
</div> </div>
<div id="video-stream-icon-two-streams">
<div class="flex flex-auto monitor" >
<button onclick="changeVideo(1)"></button>
<button onclick="changeVideo(2)"></button>
</div>
</div>
</div> </div>
......
...@@ -10,7 +10,7 @@ addEventListener('message', ({data}) => { ...@@ -10,7 +10,7 @@ addEventListener('message', ({data}) => {
postMessage({ postMessage({
action: 'timeupdate', action: 'timeupdate',
needed: true needed: true
}) });
} }
break; break;
case 'play': case 'play':
...@@ -20,7 +20,7 @@ addEventListener('message', ({data}) => { ...@@ -20,7 +20,7 @@ addEventListener('message', ({data}) => {
postMessage({ postMessage({
action: 'timeupdate', action: 'timeupdate',
needed: true needed: true
}) });
} }
break; break;
} }
......
...@@ -34,9 +34,8 @@ const ic_sd = "url('svg/sd.svg')"; ...@@ -34,9 +34,8 @@ const ic_sd = "url('svg/sd.svg')";
const ic_hd = "url('svg/hd.svg')"; const ic_hd = "url('svg/hd.svg')";
const ic_fullscreen_exit = "url('svg/fullscreen_exit.svg')"; const ic_fullscreen_exit = "url('svg/fullscreen_exit.svg')";
const ic_fullscreen = "url('svg/fullscreen.svg')"; const ic_fullscreen = "url('svg/fullscreen.svg')";
const ic_stream_1 = "url('svg/stream_1.svg')"; let ic_stream;
const ic_stream_2 = "url('svg/stream_2.svg')";
const ic_stream_3 = "url('svg/stream_3.svg')";
//================================================================================ //================================================================================
// Helper variables // Helper variables
...@@ -138,6 +137,27 @@ function loadConfig() { ...@@ -138,6 +137,27 @@ function loadConfig() {
}).fail(function () { }).fail(function () {
console.log("JSON error wile loading"); console.log("JSON error wile loading");
}).then(() => { }).then(() => {
switch (config.streams) {
case 2:
ic_stream = {
"stream_1": "url('svg/stream_2_1.svg')",
"stream_2": "url('svg/stream_2_2.svg')"
};
stream_indicator = document.getElementById("video-stream-icon-two-streams");
stream_indicator.style.display = "block";
break;
case 3:
ic_stream = {
"stream_1": "url('svg/stream_1.svg')",
"stream_2": "url('svg/stream_2.svg')",
"stream_3": "url('svg/stream_3.svg')"
};
stream_indicator = document.getElementById("video-stream-icon-three-streams");
stream_indicator.style.display = "block";
break;
}
initParams(); initParams();
Audioplayer.init(); Audioplayer.init();
checkMobile(); checkMobile();
...@@ -172,9 +192,9 @@ function initParams() { ...@@ -172,9 +192,9 @@ function initParams() {
container_controls = document.getElementById("container-controls"); container_controls = document.getElementById("container-controls");
container_navigation = document.getElementById("container-navigation"); container_navigation = document.getElementById("container-navigation");
loader = document.getElementById("container-loader"); loader = document.getElementById("container-loader");
stream_indicator = document.getElementById("video-stream-icon");
share_modal = document.getElementById("share-modal"); share_modal = document.getElementById("share-modal");
player = document.getElementById("player"); player = document.getElementById("player");
//Prevent double click //Prevent double click
document.addEventListener('dblclick', function (event) { document.addEventListener('dblclick', function (event) {
event.preventDefault(); event.preventDefault();
...@@ -582,12 +602,24 @@ function changePosition(direction) { ...@@ -582,12 +602,24 @@ function changePosition(direction) {
*/ */
function checkDirection(direction) { function checkDirection(direction) {
let position = video_position + direction; let position = video_position + direction;
if (position < 1) {
position = 3; switch (config.streams) {
} else if (position > 3) { case 2:
position = 1 if (position < 1) {
position = 2;
} else if (position > 2) {
position = 1
}
return position;
case 3:
if (position < 1) {
position = 3;
} else if (position > 3) {
position = 1
}
return position;
} }
return position;
} }
/** /**
...@@ -600,27 +632,77 @@ function checkDirection(direction) { ...@@ -600,27 +632,77 @@ function checkDirection(direction) {
* @param id * @param id
*/ */
function changeVideo(id) { function changeVideo(id) {
switch (config.streams) {
case 2:
changeVideoTwoStreams(id);
break;
case 3:
changeVideoThreeStreams(id);
break;
}
}
/**
* Change video and audio stream: top, middle
* @param id
*/
function changeVideoTwoStreams(id) {
let height = videoContainer.offsetHeight; let height = videoContainer.offsetHeight;
switch (id) { switch (id) {
case 1: case 1:
Audioplayer.playing = 0; Audioplayer.playing = 0;
changeAudioPlayer(); changeAudioPlayer();
changeVideoStyle("0px", ""); changeVideoStyle("0px", "");
stream_indicator.style.backgroundImage = ic_stream_1; stream_indicator.style.backgroundImage = ic_stream.stream_1;
//console.log("Video 1"); //console.log("Video 1");
break; break;
case 2: case 2:
Audioplayer.playing = 1; Audioplayer.playing = 1;
changeAudioPlayer(); changeAudioPlayer();
changeVideoStyle("-" + height + "px", ""); changeVideoStyle("-" + height + "px", "");
stream_indicator.style.backgroundImage = ic_stream_2; stream_indicator.style.backgroundImage = ic_stream.stream_2;
//console.log("Video 2");
break;
default:
Audioplayer.playing = 0;
changeAudioPlayer();
changeVideoStyle("0px", "");
stream_indicator.style.backgroundImage = ic_stream.stream_1;
}
}
/**
* Change video and audio stream: top, middle, bottom
* @param id
*/
function changeVideoThreeStreams(id) {
let height = videoContainer.offsetHeight;
switch (id) {
case 1:
Audioplayer.playing = 0;
changeAudioPlayer();
changeVideoStyle("0px", "");
stream_indicator.style.backgroundImage = ic_stream.stream_1;
//console.log("Video 1");
break;
case 2:
Audioplayer.playing = 1;
changeAudioPlayer();
changeVideoStyle("-" + height + "px", "");
stream_indicator.style.backgroundImage = ic_stream.stream_2;
//console.log("Video 2"); //console.log("Video 2");
break; break;
case 3: case 3:
Audioplayer.playing = 2; Audioplayer.playing = 2;
changeVideoStyle("-" + (height * 2) + "px", ""); changeVideoStyle("-" + (height * 2) + "px", "");
changeAudioPlayer(); changeAudioPlayer();
stream_indicator.style.backgroundImage = ic_stream_3; stream_indicator.style.backgroundImage = ic_stream.stream_3;
//console.log("Video 3"); //console.log("Video 3");
break; break;
default: default:
...@@ -628,10 +710,9 @@ function changeVideo(id) { ...@@ -628,10 +710,9 @@ function changeVideo(id) {
changeAudioPlayer(); changeAudioPlayer();
changeVideoStyle("0px", ""); changeVideoStyle("0px", "");
stream_indicator.style.backgroundImage = ic_stream_1; stream_indicator.style.backgroundImage = ic_stream.stream_1;
} }
} }
/** /**
......
...@@ -145,22 +145,30 @@ button { ...@@ -145,22 +145,30 @@ button {
margin-left: 0.8rem; margin-left: 0.8rem;
} }
#monitor button { .monitor button {
height: $monitor_height_width; height: $monitor_height_width;
width: $monitor_height_width; width: $monitor_height_width;
cursor: pointer; cursor: pointer;
} }
#monitor button:hover { .monitor button:hover {
background: url($monitor) no-repeat center; background: url($monitor) no-repeat center;
background-size: cover; background-size: cover;
opacity: 1; opacity: 1;
} }
#video-stream-icon { #video-stream-icon-three-streams {
background: url($video_stream_1) no-repeat center; background: url($video_stream_1) no-repeat center;
background-size: cover; background-size: cover;
width: $monitor_container; width: $monitor_container;
display: none;
}
#video-stream-icon-two-streams {
background: url($video_stream_2_1) no-repeat center;
background-size: cover;
width: $monitor_container_two_streams;
display: none;
} }
#video-controls button { #video-controls button {
......
...@@ -11,11 +11,15 @@ $container_controls_height_mobile: 3.6rem; ...@@ -11,11 +11,15 @@ $container_controls_height_mobile: 3.6rem;
$video_slider_height_mobile: 0.6rem; $video_slider_height_mobile: 0.6rem;
$video_controls_height_mobile: ($container_controls_height_mobile - $video_slider_height_mobile); $video_controls_height_mobile: ($container_controls_height_mobile - $video_slider_height_mobile);
//Monitor segment //Monitor segment 3 Streams
$monitor_height_width: 2.8rem; $monitor_height_width: 2.8rem;
$monitor_height_width_mobile: 2rem; $monitor_height_width_mobile: 2rem;
$monitor_container: $monitor_height_width * 3; $monitor_container: $monitor_height_width * 3;
$monitor_container_mobile: $monitor_height_width_mobile * 3; $monitor_container_mobile: $monitor_height_width_mobile * 3;
$monitor_container_two_streams: $monitor_height_width * 2;
$monitor_container_mobile_two_streams: $monitor_height_width_mobile * 2;
$kit_logo_width: 5.6rem; $kit_logo_width: 5.6rem;
......
...@@ -102,13 +102,16 @@ ...@@ -102,13 +102,16 @@
display: none; display: none;
} }
#monitor button { .monitor button {
height: $monitor_height_width_mobile; height: $monitor_height_width_mobile;
width: $monitor_height_width_mobile; width: $monitor_height_width_mobile;
cursor: pointer; cursor: pointer;
} }
#video-stream-icon { #video-stream-icon-three-streams {
width: $monitor_container_mobile; width: $monitor_container_mobile;
} }
#video-stream-icon-two-streams {
width: $monitor_container_mobile_two_streams;
}
} }
...@@ -14,7 +14,11 @@ $zml_logo : "../svg/zml_logo.svg"; ...@@ -14,7 +14,11 @@ $zml_logo : "../svg/zml_logo.svg";
$zml_logo_color : "../svg/zml_logo_color.svg"; $zml_logo_color : "../svg/zml_logo_color.svg";
$kit_logo : "../svg/kit_logo.svg"; $kit_logo : "../svg/kit_logo.svg";
$video_stream : "../svg/video_stream.svg"; $video_stream : "../svg/video_stream.svg";
// Three video streams
$video_stream_1 : "../svg/stream_1.svg"; $video_stream_1 : "../svg/stream_1.svg";
$video_stream_2 : "../svg/stream_2.svg"; $video_stream_2 : "../svg/stream_2.svg";
$video_stream_3 : "../svg/stream_3.svg"; $video_stream_3 : "../svg/stream_3.svg";
//Two video streams
$video_stream_2_1 : "../svg/stream_2_1.svg";
$video_stream_2_2 : "../svg/stream_2_2.svg";
$monitor : "../svg/monitor.svg"; $monitor : "../svg/monitor.svg";
<?xml version="1.0" encoding="UTF-8" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg width="100%" height="100%" viewBox="0 0 48 25" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xml:space="preserve" xmlns:serif="http://www.serif.com/" style="fill-rule:evenodd;clip-rule:evenodd;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:1.5;"><rect id="_2-Streams" serif:id="2 Streams" x="0" y="0.439" width="48.003" height="24.011" style="fill:none;"/><clipPath id="_clip1"><rect x="0" y="0.439" width="48.003" height="24.011"/></clipPath><g clip-path="url(#_clip1)"><g><rect x="0" y="0.439" width="72" height="24" style="fill:none;fill-rule:nonzero;"/><g id="Ebene2"><path d="M47,6.439l0,10l-46,0l0,-10l46,0Zm-1.022,1l-44.321,0l0,8l44.321,0l0,-8Z" style="fill:#fff;stroke:#000;stroke-width:0.04px;"/></g><path d="M20,7.439l0,8l-16,0l0,-8l16,0Zm-6.642,7.261l0,-6.451l-0.066,0l-2.65,0.979l0,0.93l1.648,-0.602l0,5.144l1.068,0Z" style="fill:#fff;"/><path d="M44,7.439l0,8l-16,0l0,-8l16,0Zm-8.786,6.415l1.462,-1.569c0.186,-0.198 0.359,-0.391 0.518,-0.578c0.16,-0.188 0.297,-0.374 0.412,-0.561c0.115,-0.186 0.205,-0.373 0.27,-0.56c0.065,-0.188 0.098,-0.382 0.098,-0.583c0,-0.269 -0.044,-0.515 -0.133,-0.74c-0.089,-0.224 -0.219,-0.418 -0.39,-0.582c-0.171,-0.164 -0.381,-0.292 -0.629,-0.384c-0.248,-0.091 -0.532,-0.137 -0.851,-0.137c-0.339,0 -0.645,0.054 -0.917,0.162c-0.272,0.108 -0.503,0.255 -0.693,0.441c-0.191,0.186 -0.337,0.404 -0.439,0.653c-0.102,0.25 -0.153,0.515 -0.153,0.796l1.063,0c0,-0.37 0.091,-0.659 0.273,-0.869c0.182,-0.21 0.464,-0.315 0.848,-0.315c0.148,0 0.282,0.026 0.401,0.076c0.12,0.05 0.222,0.12 0.306,0.21c0.084,0.09 0.149,0.198 0.195,0.324c0.046,0.125 0.069,0.262 0.069,0.41c0,0.112 -0.015,0.223 -0.044,0.332c-0.03,0.109 -0.08,0.227 -0.151,0.354c-0.071,0.127 -0.166,0.267 -0.286,0.419c-0.12,0.152 -0.268,0.327 -0.445,0.525l-2.1,2.291l0,0.731l4.333,0l0,-0.846l-3.017,0Z" style="fill:#fff;"/><path d="M21,3.439l-18,0c-1.11,0 -2,0.89 -2,2l0,12c0,1.1 0.89,2 2,2l5,0l0,2l8,0l0,-2l5,0c1.1,0 1.99,-0.9 1.99,-2l0.01,-12c0,-1.11 -0.9,-2 -2,-2Zm0,14l-18,0l0,-12l18,0l0,12Z" style="fill:#fff;fill-rule:nonzero;"/></g></g></svg>
\ No newline at end of file
<?xml version="1.0" encoding="UTF-8" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg width="100%" height="100%" viewBox="0 0 48 25" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xml:space="preserve" xmlns:serif="http://www.serif.com/" style="fill-rule:evenodd;clip-rule:evenodd;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:1.5;"><rect id="_2-Streams" serif:id="2 Streams" x="0" y="0.439" width="48.003" height="24.011" style="fill:none;"/><clipPath id="_clip1"><rect x="0" y="0.439" width="48.003" height="24.011"/></clipPath><g clip-path="url(#_clip1)"><g><rect x="0" y="0.439" width="72" height="24" style="fill:none;fill-rule:nonzero;"/><g id="Ebene2"><path d="M47,6.439l0,10l-46,0l0,-10l46,0Zm-1.022,1l-44.321,0l0,8l44.321,0l0,-8Z" style="fill:#fff;stroke:#000;stroke-width:0.04px;"/></g><path d="M20,7.439l0,8l-16,0l0,-8l16,0Zm-6.642,7.261l0,-6.451l-0.066,0l-2.65,0.979l0,0.93l1.648,-0.602l0,5.144l1.068,0Z" style="fill:#fff;"/><path d="M44,7.439l0,8l-16,0l0,-8l16,0Zm-8.786,6.415l1.462,-1.569c0.186,-0.198 0.359,-0.391 0.518,-0.578c0.16,-0.188 0.297,-0.374 0.412,-0.561c0.115,-0.186 0.205,-0.373 0.27,-0.56c0.065,-0.188 0.098,-0.382 0.098,-0.583c0,-0.269 -0.044,-0.515 -0.133,-0.74c-0.089,-0.224 -0.219,-0.418 -0.39,-0.582c-0.171,-0.164 -0.381,-0.292 -0.629,-0.384c-0.248,-0.091 -0.532,-0.137 -0.851,-0.137c-0.339,0 -0.645,0.054 -0.917,0.162c-0.272,0.108 -0.503,0.255 -0.693,0.441c-0.191,0.186 -0.337,0.404 -0.439,0.653c-0.102,0.25 -0.153,0.515 -0.153,0.796l1.063,0c0,-0.37 0.091,-0.659 0.273,-0.869c0.182,-0.21 0.464,-0.315 0.848,-0.315c0.148,0 0.282,0.026 0.401,0.076c0.12,0.05 0.222,0.12 0.306,0.21c0.084,0.09 0.149,0.198 0.195,0.324c0.046,0.125 0.069,0.262 0.069,0.41c0,0.112 -0.015,0.223 -0.044,0.332c-0.03,0.109 -0.08,0.227 -0.151,0.354c-0.071,0.127 -0.166,0.267 -0.286,0.419c-0.12,0.152 -0.268,0.327 -0.445,0.525l-2.1,2.291l0,0.731l4.333,0l0,-0.846l-3.017,0Z" style="fill:#fff;"/><path d="M45,3.439l-18,0c-1.11,0 -2,0.89 -2,2l0,12c0,1.1 0.89,2 2,2l5,0l0,2l8,0l0,-2l5,0c1.1,0 1.99,-0.9 1.99,-2l0.01,-12c0,-1.11 -0.9,-2 -2,-2Zm0,14l-18,0l0,-12l18,0l0,12Z" style="fill:#fff;fill-rule:nonzero;"/></g></g></svg>
\ No newline at end of file
Markdown is supported
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment