aboutsummaryrefslogtreecommitdiffstats
path: root/src/client/Buttons.hx
diff options
context:
space:
mode:
Diffstat (limited to 'src/client/Buttons.hx')
-rw-r--r--src/client/Buttons.hx235
1 files changed, 88 insertions, 147 deletions
diff --git a/src/client/Buttons.hx b/src/client/Buttons.hx
index 769cb25..7d673b7 100644
--- a/src/client/Buttons.hx
+++ b/src/client/Buttons.hx
@@ -17,18 +17,23 @@ class Buttons {
public static function init(main:Main):Void {
settings = main.settings;
- window.onresize = onVideoResize;
+ if (settings.isSwapped) document.body.classList.add("swap");
initSplit();
+ setSplitSize(settings.playerSize, settings.chatSize);
initChatInput(main);
- initNavBar(main);
final passIcon = ge("#guestpass_icon");
passIcon.onclick = e -> {
- final isOpen = passIcon.classList.toggle("glyphicon-eye-open");
- passIcon.classList.toggle("glyphicon-eye-close");
+ final icon = passIcon.firstElementChild;
+ final isOpen = icon.getAttribute("name") == "eye-off";
final pass:InputElement = cast ge("#guestpass");
- if (isOpen) pass.type = "password";
- else pass.type = "text";
+ if (isOpen) {
+ pass.type = "password";
+ icon.setAttribute("name", "eye");
+ } else {
+ pass.type = "text";
+ icon.setAttribute("name", "eye-off");
+ }
}
final smilesBtn = ge("#smilesbtn");
@@ -36,7 +41,7 @@ class Buttons {
final smilesWrap = ge("#smileswrap");
if (smilesWrap.children.length == 0) return;
final isActive = smilesBtn.classList.toggle("active");
- if (isActive) smilesWrap.style.display = "block";
+ if (isActive) smilesWrap.style.display = "grid";
else smilesWrap.style.display = "none";
if (smilesWrap.firstElementChild.dataset.src == null) return;
for (child in smilesWrap.children) {
@@ -69,31 +74,24 @@ class Buttons {
final userlistToggle = ge("#userlisttoggle");
userlistToggle.onclick = e -> {
- final isHidden = userlistToggle.classList.toggle("glyphicon-chevron-right");
- userlistToggle.classList.toggle("glyphicon-chevron-down");
+ final icon = userlistToggle.firstElementChild;
+ final isHidden = userlistToggle.classList.toggle("chevron-right");
+ userlistToggle.classList.toggle("chevron-down");
final style = ge("#userlist").style;
- if (isHidden) style.display = "none";
- else style.display = "block";
+ if (isHidden) {
+ style.display = "none";
+ icon.setAttribute("name", "chevron-forward");
+ }
+ else {
+ style.display = "block";
+ icon.setAttribute("name", "chevron-down");
+ }
settings.isUserListHidden = isHidden;
Settings.write(settings);
}
ge("#usercount").onclick = userlistToggle.onclick;
if (settings.isUserListHidden) userlistToggle.onclick();
- final extendPlayer = ge("#extendplayer");
- extendPlayer.onclick = e -> {
- final isExtended = extendPlayer.classList.toggle("active");
- final sizes = isExtended ? [20, 80] : [40, 60];
- ge("#userlist").style.width = isExtended ? "80px" : "90px";
- if (settings.isSwapped) sizes.reverse();
- split.setSizes(sizes);
- settings.isExtendedPlayer = isExtended;
- writeSplitSize();
- window.dispatchEvent(new Event("resize"));
- main.scrollChatToEnd();
- }
- if (settings.isExtendedPlayer) extendPlayer.onclick();
-
final toggleSynch = ge("#togglesynch");
toggleSynch.onclick = e -> {
final icon = toggleSynch.firstElementChild;
@@ -101,13 +99,11 @@ class Buttons {
if (!window.confirm(Lang.get("toggleSynchConfirm"))) return;
main.isSyncActive = false;
icon.style.color = "rgba(238, 72, 67, 0.75)";
- icon.classList.add("glyphicon-pause");
- icon.classList.remove("glyphicon-play");
+ icon.setAttribute("name", "pause");
} else {
main.isSyncActive = true;
icon.style.color = "";
- icon.classList.add("glyphicon-play");
- icon.classList.remove("glyphicon-pause");
+ icon.setAttribute("name", "play");
main.send({type: UpdatePlaylist});
}
}
@@ -125,11 +121,9 @@ class Buttons {
final text = main.getPlaylistLinks().join(",");
Utils.copyToClipboard(text);
final icon = getPlaylist.firstElementChild;
- icon.classList.remove("glyphicon-link");
- icon.classList.add("glyphicon-ok");
+ icon.setAttribute("name", "checkmark");
Timer.delay(() -> {
- icon.classList.add("glyphicon-link");
- icon.classList.remove("glyphicon-ok");
+ icon.setAttribute("name", "link");
}, 2000);
}
final clearPlaylist = ge("#clearplaylist");
@@ -142,6 +136,7 @@ class Buttons {
if (!window.confirm(Lang.get("shufflePlaylistConfirm"))) return;
main.send({type: ShufflePlaylist});
}
+
final lockPlaylist = ge("#lockplaylist");
lockPlaylist.onclick = e -> {
if (main.isAdmin()) main.send({type: TogglePlaylistLock});
@@ -158,131 +153,77 @@ class Buttons {
input.value = main.getTemplateUrl();
input.focus();
}
+
+ final showOptions = ge("#showoptions");
+ showOptions.onclick = e -> {
+ final isActive = toggleGroup(showOptions);
+ ge("#messagebuffer").style.display = isActive ? "none" : "block";
+ ge("#chatbox").style.display = isActive ? "none" : "flex";
+ ge("#userlisttoggle").style.display = isActive ? "none" : "inline-flex";
+ ge("#optionsTitle").style.display = isActive ? "inline-flex" : "none";
+ }
+
+ final exitBtn = ge("#exitBtn");
+ exitBtn.onclick = e -> {
+ if (main.isUser()) main.send({type: Logout});
+ else ge("#guestname").focus();
+ toggleGroup(showOptions);
+ }
+
+ final swapLayoutBtn = ge("#swapLayoutBtn");
+ swapLayoutBtn.onclick = e -> {
+ settings.isSwapped = ge("body").classList.toggle("swap");
+ final sizes = document.body.style.gridTemplateColumns.split(" ");
+ sizes.reverse();
+ document.body.style.gridTemplateColumns = sizes.join(" ");
+ Settings.write(settings);
+ }
}
static function showPlayerGroup(el:Element):Void {
final groups:Array<Element> = cast document.querySelectorAll('[data-target]');
for (group in groups) {
if (el == group) continue;
- group.classList.add("collapsed");
- group.classList.remove("active");
- ge(group.dataset.target).classList.add("collapse");
+ if (group.classList.contains("collapsed")) continue;
+ toggleGroup(group);
}
+ toggleGroup(el);
+ }
+
+ static function toggleGroup(el:Element):Bool {
el.classList.toggle("collapsed");
- el.classList.toggle("active");
ge(el.dataset.target).classList.toggle("collapse");
+ return el.classList.toggle("active");
}
static function initSplit():Void {
if (split != null) split.destroy();
- final divs = ["#chatwrap", "#videowrap"];
- final sizes = [settings.chatSize, settings.playerSize];
- if (settings.isSwapped) {
- divs.reverse();
- sizes.reverse();
- }
- split = new Split(divs, {
- sizes: sizes,
- onDragEnd: () -> {
- window.dispatchEvent(new Event("resize"));
- writeSplitSize();
- },
- minSize: 185,
- snapOffset: 0
+ split = new Split({
+ columnGutters: [{
+ element: ge(".gutter"),
+ track: 1,
+ }],
+ minSize: 200,
+ snapOffset: 0,
+ onDragEnd: saveSplitSize
});
- window.dispatchEvent(new Event("resize"));
}
- static function writeSplitSize():Void {
- final sizes = split.getSizes();
- if (settings.isSwapped) sizes.reverse();
- settings.chatSize = sizes[0];
- settings.playerSize = sizes[1];
- Settings.write(settings);
- }
-
- static function onVideoResize():Void {
- final player = ge("#ytapiplayer");
- final height = player.offsetHeight - ge("#chatline").offsetHeight;
- ge("#messagebuffer").style.height = '${height}px';
- ge("#userlist").style.height = '${height}px';
- }
-
- static function onClick(el:Element, func:Any->Void):Void {
- if (!Utils.isTouch()) el.onclick = func;
- else el.ontouchend = func;
+ static function setSplitSize(playerSize:Float, chatSize:Float):Void {
+ final sizes = document.body.style.gridTemplateColumns.split(" ");
+ final playerId = settings.isSwapped ? sizes.length - 1 : 0;
+ final chatId = settings.isSwapped ? 0 : sizes.length - 1;
+ sizes[playerId] = '${playerSize}fr';
+ sizes[chatId] = '${chatSize}fr';
+ document.body.style.gridTemplateColumns = sizes.join(" ");
}
- static function initNavBar(main:Main):Void {
- final toggleMenu = ge("#toggleMenu");
- final onclick = e -> {
- ge("#nav-collapsible").classList.toggle("in");
- }
- onClick(toggleMenu, onclick);
-
- final classes:Array<Element> = cast document.querySelectorAll(".dropdown-toggle");
- for (klass in classes) {
- klass.onclick = e -> {
- final isActive = klass.classList.toggle("focus");
- hideMenus();
- final menu = klass.parentElement.querySelector(".dropdown-menu");
- if (isActive) menu.style.display = "block";
- else menu.style.display = "none";
- }
- klass.onmouseover = klass.onclick;
- }
- final classes:Array<Element> = cast document.querySelectorAll(".dropdown");
- for (klass in classes) {
- klass.onmouseleave = e -> {
- final toggle:Element = cast klass.querySelector(".dropdown-toggle");
- toggle.classList.remove("focus");
- toggle.blur();
- final menu = klass.querySelector(".dropdown-menu");
- menu.style.display = "";
- }
- }
-
- final exitBtn = ge("#exitBtn");
- exitBtn.onclick = e -> {
- if (main.isUser()) main.send({type: Logout});
- else ge("#guestname").focus();
- exitBtn.blur();
- hideMenus();
- }
-
- final swapLayoutBtn = ge("#swapLayoutBtn");
- swapLayoutBtn.onclick = e -> {
- final p = ge("#main");
- if (ge("#main").firstElementChild == ge("#chatwrap")) {
- // do not remove videowrap with insertBefore
- // because this will recreate iframe-based players
- p.appendChild(p.removeChild(p.children[1])); // gutter
- p.appendChild(p.removeChild(p.children[0])); // chat
- p.appendChild(p.removeChild(p.children[1])); // clear
- } else {
- p.insertBefore(p.children[2], p.children[0]);
- p.insertBefore(p.children[2], p.children[1]);
- }
- final p = ge("#controlsrow");
- p.insertBefore(p.children[1], p.children[0]);
- final p = ge("#playlistrow");
- p.insertBefore(p.children[1], p.children[0]);
- settings.isSwapped = ge("#main").firstElementChild == ge("#videowrap");
- Settings.write(settings);
- initSplit();
- swapLayoutBtn.blur();
- hideMenus();
- main.scrollChatToEnd();
- }
- if (settings.isSwapped) swapLayoutBtn.onclick();
- final removeBtn = ge("#removeVideoBtn");
- removeBtn.onclick = e -> {
- final has = main.toggleVideoElement();
- if (has || main.isListEmpty()) removeBtn.innerText = Lang.get("removeVideo");
- else removeBtn.innerText = Lang.get("addVideo");
- removeBtn.blur();
- hideMenus();
- }
+ static function saveSplitSize():Void {
+ final sizes = document.body.style.gridTemplateColumns.split(" ");
+ if (settings.isSwapped) sizes.reverse();
+ settings.playerSize = Std.parseFloat(sizes[0]);
+ settings.chatSize = Std.parseFloat(sizes[sizes.length - 1]);
+ Settings.write(settings);
}
public static function initTextButtons(main:Main):Void {
@@ -292,7 +233,6 @@ class Buttons {
if (secs > 5) secs = 1;
main.setSynchThreshold(secs);
updateSynchThresholdBtn();
- synchThresholdBtn.blur();
}
updateSynchThresholdBtn();
@@ -301,9 +241,15 @@ class Buttons {
settings.hotkeysEnabled = !settings.hotkeysEnabled;
Settings.write(settings);
updateHotkeysBtn();
- hotkeysBtn.blur();
}
updateHotkeysBtn();
+
+ final removeBtn = ge("#removeVideoBtn");
+ removeBtn.onclick = e -> {
+ final has = main.toggleVideoElement();
+ if (has || main.isListEmpty()) removeBtn.innerText = Lang.get("removeVideo");
+ else removeBtn.innerText = Lang.get("addVideo");
+ }
}
public static function initHotkeys(main:Main, player:Player):Void {
@@ -338,11 +284,6 @@ class Buttons {
}
}
- static function hideMenus():Void {
- final menus:Array<Element> = cast document.querySelectorAll(".dropdown-menu");
- for (menu in menus) menu.style.display = "";
- }
-
static function updateSynchThresholdBtn():Void {
final text = Lang.get("synchThreshold");
final secs = settings.synchThreshold;
send patches to the email below
yukais@pinapelz.com
include the subject [PATCH repo_name]
pinapelz.com
homepage