Commit 83379f12 authored by eh2321's avatar eh2321

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 @@
<time class="m-left" id="time-duration"></time>
</div><!--END DIV CONTROLS-SEEKBAR-TIME -->
<div class="flex flex-auto">
<div id="video-stream-icon">
<div class="flex flex-auto" id="monitor">
<div id="video-stream-icon-three-streams">
<div class="flex flex-auto monitor">
<button onclick="changeVideo(1)"></button>
<button onclick="changeVideo(2)"></button>
<button onclick="changeVideo(3)"></button>
</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>
......
......@@ -10,7 +10,7 @@ addEventListener('message', ({data}) => {
postMessage({
action: 'timeupdate',
needed: true
})
});
}
break;
case 'play':
......@@ -20,7 +20,7 @@ addEventListener('message', ({data}) => {
postMessage({
action: 'timeupdate',
needed: true
})
});
}
break;
}
......
......@@ -34,9 +34,8 @@ const ic_sd = "url('svg/sd.svg')";
const ic_hd = "url('svg/hd.svg')";
const ic_fullscreen_exit = "url('svg/fullscreen_exit.svg')";
const ic_fullscreen = "url('svg/fullscreen.svg')";
const ic_stream_1 = "url('svg/stream_1.svg')";
const ic_stream_2 = "url('svg/stream_2.svg')";
const ic_stream_3 = "url('svg/stream_3.svg')";
let ic_stream;
//================================================================================
// Helper variables
......@@ -138,6 +137,27 @@ function loadConfig() {
}).fail(function () {
console.log("JSON error wile loading");
}).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();
Audioplayer.init();
checkMobile();
......@@ -172,9 +192,9 @@ function initParams() {
container_controls = document.getElementById("container-controls");
container_navigation = document.getElementById("container-navigation");
loader = document.getElementById("container-loader");
stream_indicator = document.getElementById("video-stream-icon");
share_modal = document.getElementById("share-modal");
player = document.getElementById("player");
//Prevent double click
document.addEventListener('dblclick', function (event) {
event.preventDefault();
......@@ -582,12 +602,24 @@ function changePosition(direction) {
*/
function checkDirection(direction) {
let position = video_position + direction;
if (position < 1) {
position = 3;
} else if (position > 3) {
position = 1
switch (config.streams) {
case 2:
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) {
* @param 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;
switch (id) {
case 1:
Audioplayer.playing = 0;
changeAudioPlayer();
changeVideoStyle("0px", "");
stream_indicator.style.backgroundImage = ic_stream_1;
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_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");
break;
case 3:
Audioplayer.playing = 2;
changeVideoStyle("-" + (height * 2) + "px", "");
changeAudioPlayer();
stream_indicator.style.backgroundImage = ic_stream_3;
stream_indicator.style.backgroundImage = ic_stream.stream_3;
//console.log("Video 3");
break;
default:
......@@ -628,10 +710,9 @@ function changeVideo(id) {
changeAudioPlayer();
changeVideoStyle("0px", "");
stream_indicator.style.backgroundImage = ic_stream_1;
stream_indicator.style.backgroundImage = ic_stream.stream_1;
}
}
/**
......
......@@ -145,22 +145,30 @@ button {
margin-left: 0.8rem;
}
#monitor button {
.monitor button {
height: $monitor_height_width;
width: $monitor_height_width;
cursor: pointer;
}
#monitor button:hover {
.monitor button:hover {
background: url($monitor) no-repeat center;
background-size: cover;
opacity: 1;
}
#video-stream-icon {
#video-stream-icon-three-streams {
background: url($video_stream_1) no-repeat center;
background-size: cover;
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 {
......
......@@ -11,11 +11,15 @@ $container_controls_height_mobile: 3.6rem;
$video_slider_height_mobile: 0.6rem;
$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_mobile: 2rem;
$monitor_container: $monitor_height_width * 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;
......
......@@ -102,13 +102,16 @@
display: none;
}
#monitor button {
.monitor button {
height: $monitor_height_width_mobile;
width: $monitor_height_width_mobile;
cursor: pointer;
}
#video-stream-icon {
#video-stream-icon-three-streams {
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";
$zml_logo_color : "../svg/zml_logo_color.svg";
$kit_logo : "../svg/kit_logo.svg";
$video_stream : "../svg/video_stream.svg";
// Three video streams
$video_stream_1 : "../svg/stream_1.svg";
$video_stream_2 : "../svg/stream_2.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";
<?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