From fc3d6b0bf16133a67c2824cba1a38ffb77531040 Mon Sep 17 00:00:00 2001 From: DHMike57 <14224881+DHMike57@users.noreply.github.com> Date: Thu, 26 Aug 2021 12:31:53 +0100 Subject: [PATCH] fix for linux web interface --- Cargo.toml | 4 +- build.rs | 12 ++- web/index-linux.html | 55 +++++++++++++ web/script-linux.js | 179 +++++++++++++++++++++++++++++++++++++++++++ 4 files changed, 247 insertions(+), 3 deletions(-) create mode 100644 web/index-linux.html create mode 100644 web/script-linux.js diff --git a/Cargo.toml b/Cargo.toml index 1074e6d..c14b218 100644 --- a/Cargo.toml +++ b/Cargo.toml @@ -19,7 +19,7 @@ quick-xml = "0.17" rand = "0.7" lazy_static = "1.4" crossbeam = "0.7.3" -web-view = "0.6" +web-view = "0.7" tinyfiledialogs = "3.3.9" getopts = "0.2" webbrowser = "0.5.2" @@ -45,4 +45,4 @@ panic = "abort" opt-level = 0 [package.metadata.winres] -LegalCopyright = "© 2019-2020 prixt" \ No newline at end of file +LegalCopyright = "© 2019-2020 prixt" diff --git a/build.rs b/build.rs index 3a77902..7cf57b3 100644 --- a/build.rs +++ b/build.rs @@ -15,12 +15,22 @@ fn main() -> Result<(), Box> { #[cfg(all(target_os="windows", feature = "edge"))] let range_css = include_str!("web/range-windows-edge.css"); + #[cfg(target_os="linux")] + let index_html = include_str!("web/index-linux.html") + .replace("{comment_start}" , "") + .replace("{range}" , range_css) + .replace("{w3}" , include_str!("web/w3.css")) + .replace("{js}" , include_str!("web/script-linux.js")); + + #[cfg(not(target_os="linux"))] let index_html = include_str!("web/index.html") .replace("{comment_start}" , "") .replace("{range}" , range_css) .replace("{w3}" , include_str!("web/w3.css")) .replace("{js}" , include_str!("web/script.js")); + let index_html = html_minifier::minify(index_html)?; File::create(dest_dir)? @@ -32,4 +42,4 @@ fn main() -> Result<(), Box> { .compile()?; Ok(()) -} \ No newline at end of file +} diff --git a/web/index-linux.html b/web/index-linux.html new file mode 100644 index 0000000..a219257 --- /dev/null +++ b/web/index-linux.html @@ -0,0 +1,55 @@ + + + + + + +
+
+ +
+ + + +
+
+
+ +
+ + + + +
+
+
+ +
+ + + + +
+
+
+
+ +
+
+ + diff --git a/web/script-linux.js b/web/script-linux.js new file mode 100644 index 0000000..a60cc1c --- /dev/null +++ b/web/script-linux.js @@ -0,0 +1,179 @@ +"use strict"; + +let is_windows = null; +let channels = null; + +function addSlider(channel_name) { + channels.insertAdjacentElement( + 'beforeend', + createSlider(channel_name) + ); + document.getElementById(channel_name+"_slider") + .addEventListener(is_windows?'change':'input',function(){ + window.webkit.messageHandlers.external.postMessage("change_volume:"+channel_name+":"+this.value); + }, + false + ); + document.getElementById(channel_name+"_skip_button") + .addEventListener('click',function(){ + window.webkit.messageHandlers.external.postMessage("skip_current_sound:"+channel_name); + }, + false + ); + document.getElementById(channel_name+"_play_pause_button") + .addEventListener('click',function(){ + window.webkit.messageHandlers.external.postMessage("play_pause:"+channel_name); + }, + false + ); +} +function createSlider(channel_name) { + let slider = document.createElement("div"); + slider.className="w3-cell-row w3-border-bottom"; + slider.insertAdjacentHTML( + 'afterbegin', + "
"+ + "
"+ + "Threshold
"+ + ""+ + "
"+ + "

"+channel_name+"

"+ + "
"+ + "
"+ + ""+ + "
"+ + "
"+ + "
"+ + "⏭"+ + "
"+ + "
"+ + "⏯"+ + "
"+ + "
" + ); + return slider; +} +function setSliderValue(channel_name, value) { + let slider = document.getElementById(channel_name+"_slider"); + if (slider != null) slider.value = value; +} +function clearSliders() { + while (channels.firstChild) + channels.removeChild(channels.firstChild); +} +function setSliderHead(channel_name, is_paused) { + let slider_head = document.getElementById(channel_name+"_head"); + let slider = document.getElementById(channel_name+"_slider"); + if (is_paused) { + slider_head.classList.add("w3-opacity-max"); + slider.classList.add("w3-opacity-max"); + } + else { + slider_head.classList.remove("w3-opacity-max"); + slider.classList.remove("w3-opacity-max"); + } +} + +let alerts_footer = null; +let alerts = null; +function addAlert(name, color, text) { + removeAlert(name); + let new_alert = createAlert(name, color, text); + alerts[name] = new_alert; + alerts_footer.insertAdjacentElement('beforeend', new_alert); + if (alerts_footer.childElementCount > 10) + removeAlert(alerts_footer.firstChild.name); +} +function removeAlert(name) { + let alert = document.getElementById("alert_"+name); + if (alert != null) { + alerts_footer.removeChild(alert); + alerts.delete(name); + } +} +function createAlert(name, color, text) { + let alert=document.createElement("div"); + alert.name = name; + alert.id="alert_"+name; + alert.className="w3-bar w3-animate-bottom w3-"+color; + alert.style.cssText="padding: 2px 15px 2px 15px;"; + alert.innerHTML=text; + alert.timer = 4.0; + + let cross = document.createElement("span"); + cross.className="w3-closebtn"; + cross.setAttribute("onclick", "removeAlert('"+name+"')"); + cross.innerHTML="×"; + + alert.insertAdjacentElement('afterbegin',cross); + + return alert; +} + +let error_footer = null; +function addError(name, text) { + let new_error = createError(name, text); + error_footer.insertAdjacentElement('afterbegin', new_error); +} +function removeError(id) { + let error = document.getElementById(id); + if (error != null) { + error_footer.removeChild(error); + } +} +function createError(name, text) { + let error=document.createElement("div"); + error.name=name; + error.id="error_"+name+toString(Math.floor(Math.random()*100000)); + error.className="w3-bar w3-animate-bottom w3-red"; + error.style.cssText="padding: 10px 15px 10px 15px;"; + error.innerHTML="

"+name+"

"+text+"

"; + + let cross = document.createElement("span"); + cross.className="w3-closebtn"; + cross.setAttribute("onclick", "removeError('"+error.id+"')"); + cross.innerHTML="×"; + + error.insertAdjacentElement('afterbegin',cross); + + return error; +} + +function thresholdSelect(channel_name, value) { + window.webkit.messageHandlers.external.postMessage("change_threshold:"+channel_name+":"+value); + +} + +function main() { + channels = document.getElementById('channels'); + is_windows = /MSIE|Trident|Edge/.test(window.navigator.userAgent); + alerts_footer = document.getElementById('alerts'); + error_footer = document.getElementById('errors'); + alerts = new Map(); + + let prev = null; + function step(now) { + let dt = (prev!=null) ? (now-prev)*0.001 : 0.0; + prev = now; + for (let key in alerts) { + let alert = alerts[key]; + alert.timer -= dt; + if (alert.timer <= 1.0) alert.style.opacity = alert.timer; + if (alert.timer <= 0.0) removeAlert(alert.name); + } + window.requestAnimationFrame(step); + } + window.requestAnimationFrame(step); +}