From 90520b4b3854293a793e4dcef628fee18d26b7ea Mon Sep 17 00:00:00 2001 From: Andrew Tibbetts Date: Wed, 5 Jan 2022 07:32:19 -0600 Subject: [PATCH 01/12] prettier formatted --- css/looks.css | 2604 +++++++++-------- index.html | 34 +- js/main.js | 7602 ++++++++++++++++++++++++++----------------------- 3 files changed, 5420 insertions(+), 4820 deletions(-) diff --git a/css/looks.css b/css/looks.css index 4211a6a..55165e1 100644 --- a/css/looks.css +++ b/css/looks.css @@ -1,116 +1,116 @@ @-moz-keyframes spin { - from { - -moz-transform: rotate(0deg); - } + from { + -moz-transform: rotate(0deg); + } - to { - -moz-transform: rotate(359deg); - } + to { + -moz-transform: rotate(359deg); + } } @-webkit-keyframes spin { - from { - -webkit-transform: rotate(0deg); - } + from { + -webkit-transform: rotate(0deg); + } - to { - -webkit-transform: rotate(359deg); - } + to { + -webkit-transform: rotate(359deg); + } } @keyframes spin { - from { - transform: rotate(0deg); - } + from { + transform: rotate(0deg); + } - to { - transform: rotate(359deg); - } + to { + transform: rotate(359deg); + } } @keyframes MoveUpDown { - 50% { - -webkit-transform: translateY(5px); - transform: translateY(5px); - will-change: transform; - } + 50% { + -webkit-transform: translateY(5px); + transform: translateY(5px); + will-change: transform; + } } @keyframes MoveSideSide { - 5% { - transform: rotate(0deg) translateY(0.1rem); - } + 5% { + transform: rotate(0deg) translateY(0.1rem); + } - 25% { - transform: rotate(-3deg) translateY(0.1rem); - } + 25% { + transform: rotate(-3deg) translateY(0.1rem); + } - 45% { - transform: rotate(0deg) translateY(0.1rem); - } + 45% { + transform: rotate(0deg) translateY(0.1rem); + } - 55% { - transform: rotate(0deg) translateY(0.1rem); - } + 55% { + transform: rotate(0deg) translateY(0.1rem); + } - 75% { - transform: rotate(3deg) translateY(0.1rem); - } + 75% { + transform: rotate(3deg) translateY(0.1rem); + } - 95% { - transform: rotate(0deg) translateY(0.1rem); - } + 95% { + transform: rotate(0deg) translateY(0.1rem); + } } @keyframes pulse { - from { - opacity: 1; - } + from { + opacity: 1; + } - to { - opacity: 0.5; - } + to { + opacity: 0.5; + } } :root { - --orange: #F4810B; - --orangelite: #F6993C; - --orange66: #F4810B66; - --orange33: #F4810B33; - --pad1: 0.25rem; - --pad2: 0.5rem; - --pad3: 1rem; - --pad4: 1.5rem; - --pad5: 4rem; - --pad6: 8rem; + --orange: #f4810b; + --orangelite: #f6993c; + --orange66: #f4810b66; + --orange33: #f4810b33; + --pad1: 0.25rem; + --pad2: 0.5rem; + --pad3: 1rem; + --pad4: 1.5rem; + --pad5: 4rem; + --pad6: 8rem; } *, *:before, *:after { - -webkit-box-sizing: border-box; - -moz-box-sizing: border-box; - -ms-box-sizing: border-box; - box-sizing: border-box; + -webkit-box-sizing: border-box; + -moz-box-sizing: border-box; + -ms-box-sizing: border-box; + box-sizing: border-box; } html { - font-size: 14px; + font-size: 14px; } html, body { - height: 100%; + height: 100%; } body { - display: flex; - flex-direction: column; - margin: 0; - font-size: 1rem; - color: #bbbbbb; - background-color: #000; - overflow: hidden; + display: flex; + flex-direction: column; + margin: 0; + font-size: 1rem; + color: #bbbbbb; + background-color: #000; + overflow: hidden; } body, @@ -118,338 +118,338 @@ input, select, textarea, button { - font-family: "Open Sans", helvetica, arial, sans-serif; + font-family: "Open Sans", helvetica, arial, sans-serif; } h2 { - font-size: 1.2rem; - font-weight: 700; - color: white; + font-size: 1.2rem; + font-weight: 700; + color: white; } a { - color: var(--orange); - text-decoration: none; + color: var(--orange); + text-decoration: none; } [role="button"] { - cursor: pointer; + cursor: pointer; } :focus { - outline: none; - box-shadow: 0 0 0.5rem var(--orange); + outline: none; + box-shadow: 0 0 0.5rem var(--orange); } input:not([type="checkbox"]):not([type="radio"]), select, button { - height: 2rem; - padding: 0.25rem 0.5rem; - font-size: 0.9rem; - font-family: "Open Sans", helvetica, arial, sans-serif; - color: #eee; - background-color: rgba(123, 123, 123, 0.15); - border: 1px solid transparent; - border-bottom-color: rgba(0, 0, 0, 0.85); - border-top-color: rgba(255, 255, 255, 0.15); - border-radius: 0.25rem; - box-shadow: 0 0.25rem 0.5rem -0.25rem black; + height: 2rem; + padding: 0.25rem 0.5rem; + font-size: 0.9rem; + font-family: "Open Sans", helvetica, arial, sans-serif; + color: #eee; + background-color: rgba(123, 123, 123, 0.15); + border: 1px solid transparent; + border-bottom-color: rgba(0, 0, 0, 0.85); + border-top-color: rgba(255, 255, 255, 0.15); + border-radius: 0.25rem; + box-shadow: 0 0.25rem 0.5rem -0.25rem black; } input:not([type="checkbox"]):not([type="radio"]) { - border-top-color: rgba(0, 0, 0, 0.85); - border-bottom-color: rgba(255, 255, 255, 0.15); - transform: translateY(-1px); - box-shadow: none; + border-top-color: rgba(0, 0, 0, 0.85); + border-bottom-color: rgba(255, 255, 255, 0.15); + transform: translateY(-1px); + box-shadow: none; } input[type="checkbox"], input[type="radio"] { - margin-right: var(--pad1); + margin-right: var(--pad1); } -input[type="checkbox"]+label, -input[type="radio"]+label { - display: inline-block; - margin-right: var(--pad3); +input[type="checkbox"] + label, +input[type="radio"] + label { + display: inline-block; + margin-right: var(--pad3); } option { - background-color: #333; + background-color: #333; } input:focus, select:focus, textarea:focus, button:focus { - outline: none; + outline: none; } code { - display: inline-block; - padding: 0.1em 0.2em; - font: 12px Monaco, Consolas, "Andale Mono", "DejaVu Sans Mono", monospace; - color: #bbb; - background-color: rgba(123, 123, 123, 0.5); + display: inline-block; + padding: 0.1em 0.2em; + font: 12px Monaco, Consolas, "Andale Mono", "DejaVu Sans Mono", monospace; + color: #bbb; + background-color: rgba(123, 123, 123, 0.5); } .simplebar-scrollbar:before { - background: var(--orange); + background: var(--orange); } .previewicon { - display: flex; - align-items: center; - justify-content: center; - width: 1.5rem; - height: 1.5rem; - text-align: center; - font-size: 1rem; - color: white; - background-color: black; - border-radius: 999px; - opacity: 0.66; + display: flex; + align-items: center; + justify-content: center; + width: 1.5rem; + height: 1.5rem; + text-align: center; + font-size: 1rem; + color: white; + background-color: black; + border-radius: 999px; + opacity: 0.66; } .track-warning { - color: var(--orange); - cursor: pointer; + color: var(--orange); + cursor: pointer; } .track-warning:empty { - display: none; + display: none; } -.utitle, .prsnJoined { - color: rgba(255, 255, 255, 0.4); - font-size: 0.66rem; - font-weight: 700; - text-transform: uppercase; - letter-spacing: 0.1em; +.utitle, +.prsnJoined { + color: rgba(255, 255, 255, 0.4); + font-size: 0.66rem; + font-weight: 700; + text-transform: uppercase; + letter-spacing: 0.1em; } .herecon { - color: #43b581; - background-color: #282828; - height: calc(0.75rem + 4px); - width: calc(0.75rem + 4px); - padding: 2px; - font-size: 0.75em; - display: block; - position: absolute; - bottom: 0; - border-radius: 999px; - right: -0.25rem; + color: #43b581; + background-color: #282828; + height: calc(0.75rem + 4px); + width: calc(0.75rem + 4px); + padding: 2px; + font-size: 0.75em; + display: block; + position: absolute; + bottom: 0; + border-radius: 999px; + right: -0.25rem; } .herecon.idle { - color: #faa61a; + color: #faa61a; } .notice { - margin: 0; - background-color: #222; - overflow: hidden; - height: 100%; - padding: var(--pad4); + margin: 0; + background-color: #222; + overflow: hidden; + height: 100%; + padding: var(--pad4); } .notice#notice { - display: block; + display: block; } .notice p { - margin-bottom: 15px; - margin-top: 15px; + margin-bottom: 15px; + margin-top: 15px; } .flexpacer { - flex: 1; + flex: 1; } .tabs { - display: flex; - background-color: black; + display: flex; + background-color: black; } .tab { - flex: 1; - margin: 5px 0 0 0; - padding: 0.5em; - font-size: 0.85rem; - color: #999; - text-align: center; - background-color: #222; - border: 0; - border-top: 1px solid rgba(255, 255, 255, 0.1); - border-radius: 0; - box-shadow: 0 -0.2rem 0.5rem -0.1rem black, inset 0 -0.2rem 0.4rem -0.2rem black; - clip-path: - polygon(0% 0%, - 0% 0%, - calc(100% - var(--pad3)) 0%, - 100% var(--pad3), - 100% 100%, - 100% 100%, - 0% 100%, - 0% 0%); + flex: 1; + margin: 5px 0 0 0; + padding: 0.5em; + font-size: 0.85rem; + color: #999; + text-align: center; + background-color: #222; + border: 0; + border-top: 1px solid rgba(255, 255, 255, 0.1); + border-radius: 0; + box-shadow: 0 -0.2rem 0.5rem -0.1rem black, inset 0 -0.2rem 0.4rem -0.2rem black; + clip-path: polygon( + 0% 0%, + 0% 0%, + calc(100% - var(--pad3)) 0%, + 100% var(--pad3), + 100% 100%, + 100% 100%, + 0% 100%, + 0% 0% + ); } .tab.on { - color: #ffffff; - background-color: #282828; - box-shadow: 0 -0.2rem 0.5rem -0.2rem black; + color: #ffffff; + background-color: #282828; + box-shadow: 0 -0.2rem 0.5rem -0.2rem black; } .tab:not(:first-child) { - margin-left: 5px; - ; + margin-left: 5px; } span.removemeIcon.material-icons { - font-size: 1rem; - vertical-align: middle; + font-size: 1rem; + vertical-align: middle; } .butt { - display: flex; - justify-content: center; - align-items: center; - margin: 0; - color: white; - font-size: 0.75rem; - font-weight: 700; - text-transform: uppercase; - letter-spacing: 0.1em; - text-decoration: none; - background-color: var(--orange); - border-top: 1px solid rgba(255, 255, 255, 0.3); - border-bottom: 1px solid black; - transition: all 100ms ease-in-out; - user-select: none; + display: flex; + justify-content: center; + align-items: center; + margin: 0; + color: white; + font-size: 0.75rem; + font-weight: 700; + text-transform: uppercase; + letter-spacing: 0.1em; + text-decoration: none; + background-color: var(--orange); + border-top: 1px solid rgba(255, 255, 255, 0.3); + border-bottom: 1px solid black; + transition: all 100ms ease-in-out; + user-select: none; } .butt:hover { - background-color: var(--orangelite); + background-color: var(--orangelite); } .graybutt { - color: #888; - background: rgba(255, 255, 255, 0.066); + color: #888; + background: rgba(255, 255, 255, 0.066); } .graybutt:hover { - background: #444; + background: #444; } .graybutt:focus { - background: rgba(255, 255, 255, 0.1); + background: rgba(255, 255, 255, 0.1); } .redbutt { - background: #c43; + background: #c43; } .redbutt:hover { - background: #b54; + background: #b54; } .iconbutt { - width: 2rem; - padding: 0; - font-size: 0.5rem; + width: 2rem; + padding: 0; + font-size: 0.5rem; } .iconbutt.on { - color: var(--orange); - background: rgba(255, 255, 255, 0.033); - border-top: 1px solid black; - border-bottom: 1px solid var(--orange66); - box-shadow: inset 0 0 1rem var(--orange33); + color: var(--orange); + background: rgba(255, 255, 255, 0.033); + border-top: 1px solid black; + border-bottom: 1px solid var(--orange66); + box-shadow: inset 0 0 1rem var(--orange33); } .iconbutt .material-icons { - font-size: 1.43rem; + font-size: 1.43rem; } .scrollWrap { - height: 100%; - overflow: auto; + height: 100%; + overflow: auto; } .pvbarWrap { - display: flex; + display: flex; } .working .material-icons { - animation: spin 3s infinite linear; + animation: spin 3s infinite linear; } .ps { - position: relative; + position: relative; } .ps__rail-x { - display: none !important; + display: none !important; } .ps__rail-y { - z-index: 2; + z-index: 2; } .ps .ps__rail-y:focus, .ps .ps__rail-y:hover, .ps .ps__rail-y.ps--clicking { - background-color: transparent; - outline: none; + background-color: transparent; + outline: none; } .ps__thumb-y, -.ps__rail-y:hover>.ps__thumb-y, -.ps__rail-y:focus>.ps__thumb-y, +.ps__rail-y:hover > .ps__thumb-y, +.ps__rail-y:focus > .ps__thumb-y, .ps__rail-y.ps--clicking .ps__thumb-y { - width: 0.5rem; - background-color: rgba(123, 123, 123, 0.5); - border-radius: 0.2rem; + width: 0.5rem; + background-color: rgba(123, 123, 123, 0.5); + border-radius: 0.2rem; } /* Top Bar / Site Header */ #topbar { - display: flex; - align-items: center; - padding: var(--pad1) var(--pad3); - color: #fff; - background-color: black; + display: flex; + align-items: center; + padding: var(--pad1) var(--pad3); + color: #fff; + background-color: black; } .ftlogo { - margin-right: 0.5rem; - color: var(--orange); - font-size: 1.25rem; - font-weight: 700; + margin-right: 0.5rem; + color: var(--orange); + font-size: 1.25rem; + font-weight: 700; } #idtitle { - display: none; - font-size: 1rem; - color: #fff; - font-weight: 700; - margin-right:1rem; + display: none; + font-size: 1rem; + color: #fff; + font-weight: 700; + margin-right: 1rem; } -#socialthings{ +#socialthings { } -a.sociallogo{ - text-decoration:none; - display:none; - margin: 0.2rem 0.2rem 0 0.2rem; - +a.sociallogo { + text-decoration: none; + display: none; + margin: 0.2rem 0.2rem 0 0.2rem; } -.sociallogo svg:hover{ - fill: #fff; +.sociallogo svg:hover { + fill: #fff; } .sociallogo svg { width: 1.2rem; @@ -462,109 +462,104 @@ div#sociallthings { } div#roomlogo { - background-image: url(../img/idlogo2.png); - background-size: contain; - width: 3rem; - height: 3rem; - margin-right: 1.5rem; - background-repeat: no-repeat; - background-position: center; + background-image: url(../img/idlogo2.png); + background-size: contain; + width: 3rem; + height: 3rem; + margin-right: 1.5rem; + background-repeat: no-repeat; + background-position: center; } #loggedInName { - margin: 0 var(--pad2); - cursor: pointer; - text-decoration: none; + margin: 0 var(--pad2); + cursor: pointer; + text-decoration: none; } #loggedInName:hover { - text-decoration: underline; + text-decoration: underline; } .header_icon { - margin: 0.2rem 0.2rem 0 0.2rem; - padding: 0; - font-size: 0; - line-height: 0; - background: none; - border: 0; + margin: 0.2rem 0.2rem 0 0.2rem; + padding: 0; + font-size: 0; + line-height: 0; + background: none; + border: 0; } .header_icon .material-icons { - font-size: 1.2rem; - color: #888; + font-size: 1.2rem; + color: #888; } /*------------------------------------ MAIN BODY THINGS */ #mainGrid { - grid-area: main; - flex: 1; - display: grid; - grid-template-rows: auto auto auto 1fr; - grid-template-columns: 1fr; - grid-template-areas: - "stage" - "main" - "main" - "main" - ; - overflow: hidden; + grid-area: main; + flex: 1; + display: grid; + grid-template-rows: auto auto auto 1fr; + grid-template-columns: 1fr; + grid-template-areas: + "stage" + "main" + "main" + "main"; + overflow: hidden; } #mainGrid.mmusrs { - grid-template-areas: - "stage" - "theme" - "mmopts" - "users" - ; + grid-template-areas: + "stage" + "theme" + "mmopts" + "users"; } #mainGrid.mmusrs #queuebox, #mainGrid.mmusrs #thehistoryWrap, #mainGrid.mmusrs #actualChat, #mainGrid.mmusrs #login { - display: none; + display: none; } #mainGrid.mmqueue { - grid-template-areas: - "stage" - "theme" - "mmopts" - "queues" - ; + grid-template-areas: + "stage" + "theme" + "mmopts" + "queues"; } #mainGrid.mmqueue #usersbox, #mainGrid.mmqueue #thehistoryWrap, #mainGrid.mmqueue #actualChat, #mainGrid.mmqueue #login { - display: none; + display: none; } #mainGrid.mmchat { - grid-template-areas: - "stage" - "theme" - "mmopts" - "chat" - ; + grid-template-areas: + "stage" + "theme" + "mmopts" + "chat"; } #mainGrid.mmchat #usersbox, #mainGrid.mmchat #queuebox, #mainGrid.mmchat #thehistoryWrap, #mainGrid.mmchat #login { - display: none; + display: none; } #mainGrid.login { - grid-template-rows: auto 1fr; - grid-template-areas: - "stage" - "login" - ; + grid-template-rows: auto 1fr; + grid-template-areas: + "stage" + "login"; } #mainGrid.login #usersbox, @@ -575,1444 +570,1455 @@ div#roomlogo { #mainGrid.login #actualChat, #mainGrid.login #voteActions, #mainGrid.login #minimodeoptions { - display: none; + display: none; } /* MiniMode Nav */ #minimodeoptions { - grid-area: mmopts; + grid-area: mmopts; } #minimodeoptions .tab { - background-color: #1b1b1b; + background-color: #1b1b1b; } #minimodeoptions .tab.on { - background-color: #222; + background-color: #222; } /* Users Lists */ #usersbox { - grid-area: users; - display: flex; - flex-direction: column; - overflow: hidden; + grid-area: users; + display: flex; + flex-direction: column; + overflow: hidden; } #userslist { - flex: 1; - background-color: #282828; - overflow: hidden; + flex: 1; + background-color: #282828; + overflow: hidden; } #usertabs { - padding-top: 0.5rem; - background-color: #222; + padding-top: 0.5rem; + background-color: #222; } .usersWrap { - overflow: auto; + overflow: auto; } #allusers, #justwaitlist { - padding-top: 1rem; + padding-top: 1rem; } #allusersWrap, #justwaitWrap { - height: 100%; + height: 100%; } .prson { - display: flex; - align-items: center; - min-width: 0; - padding: var(--pad1) var(--pad4); + display: flex; + align-items: center; + min-width: 0; + padding: var(--pad1) var(--pad4); } #allusersWrap .prson { - cursor: pointer; - -webkit-touch-callout: none; - -webkit-user-select: none; - -khtml-user-select: none; - -moz-user-select: none; - -ms-user-select: none; - user-select: none; + cursor: pointer; + -webkit-touch-callout: none; + -webkit-user-select: none; + -khtml-user-select: none; + -moz-user-select: none; + -ms-user-select: none; + user-select: none; } .prsnName { - flex: 1; - font-size: 0.9rem; - font-weight: 700; - line-height: 1.5; - white-space: nowrap; - overflow-x: hidden; - text-overflow: ellipsis; + flex: 1; + font-size: 0.9rem; + font-weight: 700; + line-height: 1.5; + white-space: nowrap; + overflow-x: hidden; + text-overflow: ellipsis; } #userslist .utitle { - margin-left: auto; + margin-left: auto; } #userslist .prson .prsnJoined { - display: none; + display: none; } #userslist .prson:hover .prsnJoined { - display: block; + display: block; } #userslist .prson:hover .utitle { - display: none; + display: none; } -#userslist .prson.blockd .prsnName, #userslist .prson.blockd .prsnJoined, #userslist .prson.blockd .utitle { - opacity: 0.5; +#userslist .prson.blockd .prsnName, +#userslist .prson.blockd .prsnJoined, +#userslist .prson.blockd .utitle { + opacity: 0.5; } .botson { - background-color: #000; - background-size: auto 100%; - border-radius: 999px; - background-position: center 55%; - background-repeat: no-repeat; - border-bottom: 1px solid #888; + background-color: #000; + background-size: auto 100%; + border-radius: 999px; + background-position: center 55%; + background-repeat: no-repeat; + border-bottom: 1px solid #888; } #userslist .botson { - margin-right: 0.75rem; - width: 2rem; - height: 2rem; - position: relative; + margin-right: 0.75rem; + width: 2rem; + height: 2rem; + position: relative; } span.block { - width: 2rem; - height: 2rem; - font-size: 2rem; - background-color: rgba(0, 0, 0, 0.50); - color: var(--orange); - border-radius: 999px; + width: 2rem; + height: 2rem; + font-size: 2rem; + background-color: rgba(0, 0, 0, 0.5); + color: var(--orange); + border-radius: 999px; } span.block:empty { - display: none; + display: none; } /* The Stage */ #stage { - grid-area: stage; - display: flex; - flex-direction: column; - position: relative; - overflow: hidden; + grid-area: stage; + display: flex; + flex-direction: column; + position: relative; + overflow: hidden; } #stage::before { - content: ""; - position: absolute; - z-index: 1; - top: 0; - right: 0; - bottom: 0; - left: 0; - background: linear-gradient(rgba(0, 0, 0, 0.75), rgba(0, 0, 0, 0.55)); + content: ""; + position: absolute; + z-index: 1; + top: 0; + right: 0; + bottom: 0; + left: 0; + background: linear-gradient(rgba(0, 0, 0, 0.75), rgba(0, 0, 0, 0.55)); } -#stage>div:not(#screenBox) { - position: relative; - z-index: 2; +#stage > div:not(#screenBox) { + position: relative; + z-index: 2; } #djStage { - display: flex; - flex-direction: column; - justify-content: space-between; + display: flex; + flex-direction: column; + justify-content: space-between; } #nowplaying { - position: relative; - display: grid; - grid-template-columns: auto 1fr auto; - grid-template-rows: auto auto 1fr; - grid-template-areas: - "art track timr" - "art artist artist" - "art plays plays" - ; - margin-bottom: auto; - padding: var(--pad4); + position: relative; + display: grid; + grid-template-columns: auto 1fr auto; + grid-template-rows: auto auto 1fr; + grid-template-areas: + "art track timr" + "art artist artist" + "art plays plays"; + margin-bottom: auto; + padding: var(--pad4); } #nowplaying::before { - content: ''; - position: absolute; - top: 3rem; - left: 3rem; - width: 15rem; - height: 5rem; - background-color: rgba(0, 0, 0, 0.25); - box-shadow: 0 0 10rem 10rem rgba(0, 0, 0, 0.25); + content: ""; + position: absolute; + top: 3rem; + left: 3rem; + width: 15rem; + height: 5rem; + background-color: rgba(0, 0, 0, 0.25); + box-shadow: 0 0 10rem 10rem rgba(0, 0, 0, 0.25); } #albumArt { - grid-area: art; - margin: var(--pad1) var(--pad3) 0 var(--pad1); - width: 4rem; - height: 4rem; - background-size: cover; - background-position: center center; + grid-area: art; + margin: var(--pad1) var(--pad3) 0 var(--pad1); + width: 4rem; + height: 4rem; + background-size: cover; + background-position: center center; } #track { - grid-area: track; - font-size: 1.25rem; - color: white; + grid-area: track; + font-size: 1.25rem; + color: white; } #timr { - grid-area: timr; - padding-top: 0.15em; - font-size: 0.85rem; - font-weight: 700; - letter-spacing: 0.05em; - text-align: right; + grid-area: timr; + padding-top: 0.15em; + font-size: 0.85rem; + font-weight: 700; + letter-spacing: 0.05em; + text-align: right; } #artist { - grid-area: artist; - margin-bottom: var(--pad2); - font-size: 1rem; - font-weight: 400; - overflow: hidden; - color: white; - white-space: nowrap; - text-overflow: ellipsis; + grid-area: artist; + margin-bottom: var(--pad2); + font-size: 1rem; + font-weight: 400; + overflow: hidden; + color: white; + white-space: nowrap; + text-overflow: ellipsis; } #source, #plays { - font-size: 0.75rem; - font-weight: 700; - color: rgba(255, 255, 255, 0.8); + font-size: 0.75rem; + font-weight: 700; + color: rgba(255, 255, 255, 0.8); } #plays { - grid-area: plays; + grid-area: plays; } #playCount, #firstPlay { - margin-right: var(--pad2); + margin-right: var(--pad2); } #playCount:empty, #firstPlay:empty, #lastPlay:empty { - display: none; + display: none; } #deck { - grid-area: deck; - display: flex; - max-width: 100vw; + grid-area: deck; + display: flex; + max-width: 100vw; } #deck.dance .avtr:not(.animate) { - transform-origin: bottom; - animation: MoveSideSide 2s linear infinite; + transform-origin: bottom; + animation: MoveSideSide 2s linear infinite; } .spot { - flex: 1; - position: relative; - display: flex; - flex-direction: column; - justify-content: flex-end; - margin-right: var(--pad2); - margin-left: var(--pad2); - min-width: 0; - height: 1.5rem; + flex: 1; + position: relative; + display: flex; + flex-direction: column; + justify-content: flex-end; + margin-right: var(--pad2); + margin-left: var(--pad2); + min-width: 0; + height: 1.5rem; } .spot.empty .djplaque { - flex-direction: column; - color: rgba(255, 2556, 255, 0.5); + flex-direction: column; + color: rgba(255, 2556, 255, 0.5); } .avtr { - display: none; - position: absolute; - z-index: 0; - bottom: 1.4rem; - width: 100%; - height: 8rem; - background-size: contain; - background-repeat: no-repeat; - background-position: center bottom; + display: none; + position: absolute; + z-index: 0; + bottom: 1.4rem; + width: 100%; + height: 8rem; + background-size: contain; + background-repeat: no-repeat; + background-position: center bottom; } .avtr.animate { - animation: MoveUpDown 1s linear infinite; + animation: MoveUpDown 1s linear infinite; } .djplaque { - position: relative; - z-index: 1; - display: flex; - justify-content: space-between; - min-width: 0; - padding: 0 var(--pad3); - font-size: 0.75rem; - line-height: 1.5rem; - text-align: center; - background-color: #151515; - border-top-left-radius: 0.5rem; - border-top-right-radius: 0.5rem; + position: relative; + z-index: 1; + display: flex; + justify-content: space-between; + min-width: 0; + padding: 0 var(--pad3); + font-size: 0.75rem; + line-height: 1.5rem; + text-align: center; + background-color: #151515; + border-top-left-radius: 0.5rem; + border-top-right-radius: 0.5rem; } .djname { - text-overflow: ellipsis; - overflow: hidden; - white-space: nowrap; - padding-right: 5px; + text-overflow: ellipsis; + overflow: hidden; + white-space: nowrap; + padding-right: 5px; } .playcount { - white-space: nowrap; + white-space: nowrap; } #prgbar { - width: 100%; - height: 0.5rem; - border-bottom: 1px solid #333; - margin-bottom: 0; + width: 100%; + height: 0.5rem; + border-bottom: 1px solid #333; + margin-bottom: 0; } #volandthings, #queueControls { - display: flex; - align-items: center; - justify-content: space-between; - padding: 0.4rem 0.5rem; - white-space: nowrap; + display: flex; + align-items: center; + justify-content: space-between; + padding: 0.4rem 0.5rem; + white-space: nowrap; } #volandthings { - position: relative; - background-color: #151515; - border-bottom: 1px solid #333; + position: relative; + background-color: #151515; + border-bottom: 1px solid #333; } #songthings, #voteActions, #songActions, #playerControls { - display: flex; - white-space: nowrap; + display: flex; + white-space: nowrap; } #songthings, #playerControls { - flex: 1; + flex: 1; } #songthings .iconbutt { - margin-right: 0.25rem; + margin-right: 0.25rem; } #voteActions { - margin-right: 1rem; + margin-right: 1rem; } #playerControls { - margin-left: 1rem; + margin-left: 1rem; } #volplace { - flex: 1; - display: flex; - align-items: center; - padding-left: 0.25rem; - padding-right: 0.25rem; - white-space: nowrap; + flex: 1; + display: flex; + align-items: center; + padding-left: 0.25rem; + padding-right: 0.25rem; + white-space: nowrap; } #volstatus { - cursor: pointer; + cursor: pointer; } #volplace .material-icons { - font-size: 16px !important; + font-size: 16px !important; } #shareinfo { - text-align: right; + text-align: right; } #stealContain { - display: none; - position: fixed; - z-index: 59; - top: 50%; - left: 50%; - box-shadow: 0 0.25rem 1rem -0.25rem black; + display: none; + position: fixed; + z-index: 59; + top: 50%; + left: 50%; + box-shadow: 0 0.25rem 1rem -0.25rem black; } #stealBox { - width: 16rem; - padding: var(--pad3); - background-color: #333; - border-radius: 5px; + width: 16rem; + padding: var(--pad3); + background-color: #333; + border-radius: 5px; } #stealArrow { - margin-top: -0.5rem; - margin-left: 1.15rem; - width: 0; - height: 0; - border-left: 1rem solid transparent; - border-right: 1rem solid transparent; - border-bottom: 1rem solid #333; + margin-top: -0.5rem; + margin-left: 1.15rem; + width: 0; + height: 0; + border-left: 1rem solid transparent; + border-right: 1rem solid transparent; + border-bottom: 1rem solid #333; } select#stealpicker { - width: 100%; - font-size: 1rem; - border: none; - font-family: "Open Sans", helvetica, arial, sans-serif; - background-color: #222; - padding-left: var(--pad1); - color: #eee; - white-space: nowrap; + width: 100%; + font-size: 1rem; + border: none; + font-family: "Open Sans", helvetica, arial, sans-serif; + background-color: #222; + padding-left: var(--pad1); + color: #eee; + white-space: nowrap; } #addToQueueBttn { - margin-left: 1em; - color: white; - background-color: var(--orange); - border-right: 1px solid black; - border-left: 1px solid black; - border-radius: 5px; + margin-left: 1em; + color: white; + background-color: var(--orange); + border-right: 1px solid black; + border-left: 1px solid black; + border-radius: 5px; } #slider { - margin-right: var(--pad2); - width: 100%; - max-width: 10rem; + margin-right: var(--pad2); + width: 100%; + max-width: 10rem; } .ui-slider { - position: relative; - text-align: left; + position: relative; + text-align: left; } .ui-slider .ui-slider-handle { - position: absolute; - z-index: 2; - width: 1.25rem; - height: 1.25rem; - cursor: grab; - background-color: #bbb; - border: 0.2rem solid #666; - border-radius: 999px; - -ms-touch-action: none; - touch-action: none; + position: absolute; + z-index: 2; + width: 1.25rem; + height: 1.25rem; + cursor: grab; + background-color: #bbb; + border: 0.2rem solid #666; + border-radius: 999px; + -ms-touch-action: none; + touch-action: none; } .ui-slider .ui-slider-range { - position: absolute; - z-index: 1; - font-size: .7em; - display: block; - border: 0; - background-position: 0 0; + position: absolute; + z-index: 1; + font-size: 0.7em; + display: block; + border: 0; + background-position: 0 0; } .ui-slider-horizontal .ui-slider-range-min { - left: 0; - background-color: var(--orange); + left: 0; + background-color: var(--orange); } .ui-slider-horizontal { - height: 3px; + height: 3px; } .ui-slider-horizontal .ui-slider-handle { - top: -0.6rem; - margin-left: -.6em; + top: -0.6rem; + margin-left: -0.6em; } .ui-slider-horizontal .ui-slider-range { - top: 0; - height: 100%; + top: 0; + height: 100%; } .ui-slider-horizontal .ui-slider-range-min { - left: 0; + left: 0; } .ui-slider-horizontal .ui-slider-range-max { - right: 0; + right: 0; } -.ui-state-default, .ui-widget-content .ui-state-default, .ui-widget-header .ui-state-default, .ui-button, html .ui-button.ui-state-disabled:hover, html .ui-button.ui-state-disabled:active { - font-weight: normal; +.ui-state-default, +.ui-widget-content .ui-state-default, +.ui-widget-header .ui-state-default, +.ui-button, +html .ui-button.ui-state-disabled:hover, +html .ui-button.ui-state-disabled:active { + font-weight: normal; } .ui-widget.ui-widget-content { - border: none; - background-color: rgba(204, 204, 204, 0.43137254901960786); + border: none; + background-color: rgba(204, 204, 204, 0.43137254901960786); } .ui-widget-content { - border: 1px solid #dddddd; - background: #ffffff; - color: #333333; + border: 1px solid #dddddd; + background: #ffffff; + color: #333333; } #screenBox { - position: absolute; - top: -100%; - width: 100%; - height: 100%; - z-index: 0; - transition: top 2s ease-in-out; - pointer-events: none; + position: absolute; + top: -100%; + width: 100%; + height: 100%; + z-index: 0; + transition: top 2s ease-in-out; + pointer-events: none; } #scScreen, #playerArea { - position: absolute; - top: 0; - left: 0; - height: 100%; - width: 100% + position: absolute; + top: 0; + left: 0; + height: 100%; + width: 100%; } #screenover { - position: absolute; - top: 0; - width: 100%; - height: 100%; - background: linear-gradient(rgba(0, 0, 0, 0.5), rgba(255, 255, 255, 0.1)); + position: absolute; + top: 0; + width: 100%; + height: 100%; + background: linear-gradient(rgba(0, 0, 0, 0.5), rgba(255, 255, 255, 0.1)); } /* Queues / Playlists */ #queuebox { - grid-area: queues; - display: flex; - flex-direction: column; - position: relative; - overflow: hidden; + grid-area: queues; + display: flex; + flex-direction: column; + position: relative; + overflow: hidden; } input#queueFilter { - width: 100%; + width: 100%; } div#filterMachine { - padding: var(--pad2); + padding: var(--pad2); } #mainqueue .material-icons { - margin: 0 var(--pad1); - font-size: 1.2rem; + margin: 0 var(--pad1); + font-size: 1.2rem; } #queuelist .pvbar { - padding: var(--pad2) var(--pad2); - background-color: #222; - border-bottom: 1px solid black; - cursor: move; - /* fallback if grab cursor is unsupported */ - cursor: grab; - cursor: -moz-grab; - cursor: -webkit-grab; + padding: var(--pad2) var(--pad2); + background-color: #222; + border-bottom: 1px solid black; + cursor: move; + /* fallback if grab cursor is unsupported */ + cursor: grab; + cursor: -moz-grab; + cursor: -webkit-grab; } #queuelist .pvbarWrap { - align-items: center; + align-items: center; } #queuelist .pvbar.editing .edittags { - display: none; + display: none; } #queuelist .pvbar.editing .closeeditor { - display: block; + display: block; } #queuelist .listwords { - flex: 1; - margin-left: var(--pad2); + flex: 1; + margin-left: var(--pad2); } #listpickerWrap { - flex: 1; + flex: 1; } select#listpicker { - width: 100%; - background-color: #333; - padding-left: var(--pad2); + width: 100%; + background-color: #333; + padding-left: var(--pad2); } #queueControls, #filterMachine { - background-color: #222; + background-color: #222; } #qControlButtons { - display: flex; + display: flex; } button#cancelqsearch { - display: none; - margin-left: var(--pad2); + display: none; + margin-left: var(--pad2); } #addbox, #plmanager { - display: none; - flex-direction: column; - height: 100%; - background-color: #222; - overflow: hidden; + display: none; + flex-direction: column; + height: 100%; + background-color: #222; + overflow: hidden; } #plmanager { - padding: var(--pad2); + padding: var(--pad2); } .ortxt { - padding: var(--pad1); - text-align: center; + padding: var(--pad1); + text-align: center; } input#qsearch { - margin: var(--pad2); + margin: var(--pad2); } #queuelist { - flex: 1; - height: 100%; - background-color: #181818; - overflow: auto; + flex: 1; + height: 100%; + background-color: #181818; + overflow: auto; } #searchResults { - flex: 1; - background-color: #282828; + flex: 1; + background-color: #282828; } #mergeContain { - display: none; - position: absolute; - z-index: 15; - width: calc(100% - 30px); - margin: 0.5rem 15px 0 15px; - box-shadow: 0 0.25rem 0.5rem -0.125rem black; + display: none; + position: absolute; + z-index: 15; + width: calc(100% - 30px); + margin: 0.5rem 15px 0 15px; + box-shadow: 0 0.25rem 0.5rem -0.125rem black; } #mergeArrow { - position: absolute; - bottom: 100%; - right: 1.85rem; - width: 0; - height: 0; - border-left: 1rem solid transparent; - border-right: 1rem solid transparent; - border-bottom: 1rem solid #333; + position: absolute; + bottom: 100%; + right: 1.85rem; + width: 0; + height: 0; + border-left: 1rem solid transparent; + border-right: 1rem solid transparent; + border-bottom: 1rem solid #333; } #mergeBox { - background-color: #333; - padding: 15px; - border-radius: 5px; + background-color: #333; + padding: 15px; + border-radius: 5px; } #mergeSetup { - display: flex; - align-items: center; - justify-content: space-between; + display: flex; + align-items: center; + justify-content: space-between; } #mergeHappening { - display: none; + display: none; } -select#mergepicker, #mergepicker2 { - width: calc(50% - 50px); - font-size: 14px; - border: none; - font-family: "Open Sans", helvetica, arial, sans-serif; - background-color: #222; - padding-left: 5px; - color: #eee; - height: 24px; - white-space: nowrap; +select#mergepicker, +#mergepicker2 { + width: calc(50% - 50px); + font-size: 14px; + border: none; + font-family: "Open Sans", helvetica, arial, sans-serif; + background-color: #222; + padding-left: 5px; + color: #eee; + height: 24px; + white-space: nowrap; } #mergeBox i.material-icons { - font-size: 17px !important; - font-weight: 700; - cursor: default; - vertical-align: middle; + font-size: 17px !important; + font-weight: 700; + cursor: default; + vertical-align: middle; } #mergeCompleted { - display: none; + display: none; } .importResult { - display: flex; - align-items: center; - padding: var(--pad1) 0; - border-bottom: 1px solid #111; + display: flex; + align-items: center; + padding: var(--pad1) 0; + border-bottom: 1px solid #111; } .importResult .material-icons { - margin-left: var(--pad2); - font-size: 1rem; + margin-left: var(--pad2); + font-size: 1rem; } a.importLinkCheck { - color: #eee; - line-height: 0; + color: #eee; + line-height: 0; } .imtxt { - flex: 1; - padding-right: var(--pad2); + flex: 1; + padding-right: var(--pad2); } .tagPromptBox { - padding: var(--pad3) 0 var(--pad1) var(--pad2); - font-size: .875rem; + padding: var(--pad3) 0 var(--pad1) var(--pad2); + font-size: 0.875rem; } .tagPromptBox .closebutt { - float: right; + float: right; } .closeeditor { - display: none; + display: none; } .tagsNlink { - display: flex; + display: flex; } .tagsNlink input.tagMachine { - flex: 1; - margin: 0; + flex: 1; + margin: 0; } .tagSongLink { - padding: var(--pad1) var(--pad1) var(--pad1) var(--pad2); + padding: var(--pad1) var(--pad1) var(--pad1) var(--pad2); } #mainqueue .material-icons.tracklink { - font-size: 1.5rem; + font-size: 1.5rem; } /* Theme */ #themebox { - grid-area: theme; - z-index: 15; - padding: var(--pad2); - font-size: 1rem; - text-align: center; - white-space: nowrap; - text-overflow: ellipsis; - background-color: #333; - border-bottom: 1px solid #111; - overflow: hidden; + grid-area: theme; + z-index: 15; + padding: var(--pad2); + font-size: 1rem; + text-align: center; + white-space: nowrap; + text-overflow: ellipsis; + background-color: #333; + border-bottom: 1px solid #111; + overflow: hidden; } #currentTheme { - text-overflow: ellipsis; - white-space: nowrap; - overflow: hidden; - width: 100%; + text-overflow: ellipsis; + white-space: nowrap; + overflow: hidden; + width: 100%; } /* Chat */ #actualChat { - grid-area: chat; - display: flex; - flex-direction: column; - overflow: hidden; - background-color: #181818; + grid-area: chat; + display: flex; + flex-direction: column; + overflow: hidden; + background-color: #181818; } #chatsWrap { - flex: 1; - height: 100%; - overflow: auto; + flex: 1; + height: 100%; + overflow: auto; } #newchat { - width: 100%; + width: 100%; } #newchatForm { - flex: 1; - margin-right: var(--pad1); + flex: 1; + margin-right: var(--pad1); } .newChat { - position: relative; - display: flex; - justify-content: space-between; - margin: var(--pad3); - color: #ddd; - word-break: break-word; - background-color: #181818; + position: relative; + display: flex; + justify-content: space-between; + margin: var(--pad3); + color: #ddd; + word-break: break-word; + background-color: #181818; } .newChat .botson { - position: relative; - z-index: 2; - margin: 0.15rem var(--pad3) 0 0; - width: 2rem; - height: 2rem; - cursor: pointer; + position: relative; + z-index: 2; + margin: 0.15rem var(--pad3) 0 0; + width: 2rem; + height: 2rem; + cursor: pointer; } #actualChat.avatarsOff .botson { - display: none; + display: none; } .nowplayn { - position: relative; - background-color: transparent; + position: relative; + background-color: transparent; } .newChat.nowplayn, -.nowplayn+.newChat { - border: 0; +.nowplayn + .newChat { + border: 0; } -.npmsg, .lcrsp { - position: relative; - z-index: 2; - width: 100%; - padding: var(--pad1); - color: #888; - font-size: 0.75rem; - text-align: center; - background-color: #282828; - border-radius: var(--pad1); +.npmsg, +.lcrsp { + position: relative; + z-index: 2; + width: 100%; + padding: var(--pad1); + color: #888; + font-size: 0.75rem; + text-align: center; + background-color: #282828; + border-radius: var(--pad1); } .chatContent { - flex: 1; - padding: 0 var(--pad4) 0 0; + flex: 1; + padding: 0 var(--pad4) 0 0; } .chatContent .utitle { - line-height: 1.6; - color: rgba(255, 255, 255, 0.25); + line-height: 1.6; + color: rgba(255, 255, 255, 0.25); } .chatHead { - display: flex; + display: flex; } .chatName { - margin-right: var(--pad2); - font-size: 0.75rem; - font-weight: 700; - color: rgba(255, 255, 255, 0.4); - cursor: pointer; + margin-right: var(--pad2); + font-size: 0.75rem; + font-weight: 700; + color: rgba(255, 255, 255, 0.4); + cursor: pointer; } .modDelete { - position: absolute; - right: 0; - top: 0; - font-size: 1rem; - padding-left: 0.25rem; - font-weight: 400; - padding-right: 0.25rem; - background-color: #333; - cursor: pointer; - display: none; - color: #999; + position: absolute; + right: 0; + top: 0; + font-size: 1rem; + padding-left: 0.25rem; + font-weight: 400; + padding-right: 0.25rem; + background-color: #333; + cursor: pointer; + display: none; + color: #999; } .modDelete:hover { - background-color: #dd2e44; - color: #ddd; + background-color: #dd2e44; + color: #ddd; } .chatText { - position: relative; + position: relative; } .chatText.deleteMe:hover { - background-color: #282828; + background-color: #282828; } .chatText.deleteMe:hover .modDelete { - display: block; + display: block; } .chatText a { - position: relative; - display: block; + position: relative; + display: block; } .chatText .inlineImage { - display: block; - max-width: 100%; + display: block; + max-width: 100%; } .chatText .hideImage { - position: absolute; - z-index: 2; - top: 0.5rem; - right: 0.5rem; - display: flex; - justify-content: center; - align-items: center; - width: 1.5rem; - height: 1.5rem; - font-size: 1.25rem; - color: white; - background-color: rgba(255, 0, 0, 0.5); - border-radius: 999px; + position: absolute; + z-index: 2; + top: 0.5rem; + right: 0.5rem; + display: flex; + justify-content: center; + align-items: center; + width: 1.5rem; + height: 1.5rem; + font-size: 1.25rem; + color: white; + background-color: rgba(255, 0, 0, 0.5); + border-radius: 999px; } .chatText.hideImg .inlineImage { - position: relative; - height: 2.5rem; - opacity: 0; - visibility: hidden; + position: relative; + height: 2.5rem; + opacity: 0; + visibility: hidden; } .chatText.hideImg a.inlineImgLink::after { - content: 'image hidden'; - position: absolute; - z-index: 1; - top: 0; - right: 0; - bottom: 0; - left: 0; - display: flex; - justify-content: center; - align-items: center; - font-size: 0.66rem; - text-transform: uppercase; - letter-spacing: 0.1em; - ; - color: rgba(255, 255, 255, 0.5); - background-color: black; + content: "image hidden"; + position: absolute; + z-index: 1; + top: 0; + right: 0; + bottom: 0; + left: 0; + display: flex; + justify-content: center; + align-items: center; + font-size: 0.66rem; + text-transform: uppercase; + letter-spacing: 0.1em; + color: rgba(255, 255, 255, 0.5); + background-color: black; } .chatText.hideImg .hideImage { - background-color: #444; - transform: rotate(45deg); + background-color: #444; + transform: rotate(45deg); } .badoop::before { - content: ""; - display: flex; - align-items: flex-start; - justify-content: center; - position: absolute; - z-index: 1; - top: calc(var(--pad3) * -1); - left: calc(var(--pad3) * -1); - bottom: calc(var(--pad3) * -1); - width: 0; - padding: 0.2rem; - font-size: 1.2rem; - font-weight: 700; - line-height: 3.2; - color: #777; - background-color: #444; - border-top-right-radius: 999px; - border-bottom-right-radius: 999px; + content: ""; + display: flex; + align-items: flex-start; + justify-content: center; + position: absolute; + z-index: 1; + top: calc(var(--pad3) * -1); + left: calc(var(--pad3) * -1); + bottom: calc(var(--pad3) * -1); + width: 0; + padding: 0.2rem; + font-size: 1.2rem; + font-weight: 700; + line-height: 3.2; + color: #777; + background-color: #444; + border-top-right-radius: 999px; + border-bottom-right-radius: 999px; } .chatTime { - position: relative; - z-index: 2; - font-weight: 400; - font-size: 0.66rem; - color: rgba(255, 255, 255, 0.47); - white-space: nowrap; + position: relative; + z-index: 2; + font-weight: 400; + font-size: 0.66rem; + color: rgba(255, 255, 255, 0.47); + white-space: nowrap; } .chatCard { - display: block; - margin: var(--pad2) 0; + display: block; + margin: var(--pad2) 0; } #chatbottom { - position: relative; - display: flex; - align-items: center; - padding: var(--pad1); - background-color: #282828; + position: relative; + display: flex; + align-items: center; + padding: var(--pad1); + background-color: #282828; } #pickerResults { - overflow-y: auto; - height: 33vh; - overflow-x: hidden; - text-align: center; + overflow-y: auto; + height: 33vh; + overflow-x: hidden; + text-align: center; } .pickerSecSelected { - color: #fff; - border-bottom: 2px solid #fff; + color: #fff; + border-bottom: 2px solid #fff; } #pickerResults span { - margin-right: var(--pad2); - display: inline-block; - margin-bottom: var(--pad2); + margin-right: var(--pad2); + display: inline-block; + margin-bottom: var(--pad2); } #pickerResults h3 { - margin-bottom: var(--pad3); - margin-top: var(--pad2); - text-align: center; + margin-bottom: var(--pad3); + margin-top: var(--pad2); + text-align: center; } #emojiPicker { - position: absolute; - z-index: 99; - left: 0; - bottom: 100%; - width: 100%; - padding: var(--pad3); - background-color: #2d2d2d; - box-shadow: 0 -0.25rem 0.5rem black; + position: absolute; + z-index: 99; + left: 0; + bottom: 100%; + width: 100%; + padding: var(--pad3); + background-color: #2d2d2d; + box-shadow: 0 -0.25rem 0.5rem black; } #pickerNav { - overflow: hidden; - white-space: nowrap; - text-align: center; + overflow: hidden; + white-space: nowrap; + text-align: center; } input#pickerSearch { - width: 100%; - margin: var(--pad2) 0; + width: 100%; + margin: var(--pad2) 0; } #pickerNav span { - margin-right: var(--pad2); - cursor: pointer; - filter: saturate(0); - opacity: .6; + margin-right: var(--pad2); + cursor: pointer; + filter: saturate(0); + opacity: 0.6; } #pickerNav .on { - color: var(--orange); - filter: none; - opacity: 1; + color: var(--orange); + filter: none; + opacity: 1; } img.emoji { - height: 1.25em; - width: 1.25em; - margin: 0 .05em 0 .1em; - vertical-align: -0.1em; + height: 1.25em; + width: 1.25em; + margin: 0 0.05em 0 0.1em; + vertical-align: -0.1em; } .rohnmoji { - height: 1.25em; - width: 1.25em; - margin: 0 .05em 0 .1em; - vertical-align: -0.1em; - background-image: url(../img/rohn.png); - display: inline-block; - background-size: cover; + height: 1.25em; + width: 1.25em; + margin: 0 0.05em 0 0.1em; + vertical-align: -0.1em; + background-image: url(../img/rohn.png); + display: inline-block; + background-size: cover; } #morechats { - position: absolute; - bottom: 100%; - display: none; - justify-content: center; - width: 100%; - pointer-events: none; + position: absolute; + bottom: 100%; + display: none; + justify-content: center; + width: 100%; + pointer-events: none; } #morechats.show { - display: flex; + display: flex; } #morechats .butt { - height: auto; - padding: 0.2em; - font-size: 0.7rem; - background-color: #222; - border-bottom-color: #222; - border-bottom-left-radius: 0; - border-bottom-right-radius: 0; - box-shadow: none; - pointer-events: auto; + height: auto; + padding: 0.2em; + font-size: 0.7rem; + background-color: #222; + border-bottom-color: #222; + border-bottom-left-radius: 0; + border-bottom-right-radius: 0; + box-shadow: none; + pointer-events: auto; } #morechats .butt i { - margin: 0 0.25em; - font-size: 0.85rem; - font-weight: bold; + margin: 0 0.25em; + font-size: 0.85rem; + font-weight: bold; } #atPicker { - display: none; - position: absolute; - z-index: 2; - bottom: 100%; - left: 1.5rem; - padding: 0.25rem; - background: #222; - box-shadow: 0 -0.25rem 0.5rem black; + display: none; + position: absolute; + z-index: 2; + bottom: 100%; + left: 1.5rem; + padding: 0.25rem; + background: #222; + box-shadow: 0 -0.25rem 0.5rem black; } #atPicker.show { - display: block; + display: block; } #atPicker .butt { - margin: 0.25rem; - height: auto; - padding: 0.25em 0.5em; - text-transform: none; - letter-spacing: 0; + margin: 0.25rem; + height: auto; + padding: 0.25em 0.5em; + text-transform: none; + letter-spacing: 0; } #atPicker i { - margin: 0.25rem; - padding: 0.25em 0.5em; - font-size: 0.75rem; - color: #888; + margin: 0.25rem; + padding: 0.25em 0.5em; + font-size: 0.75rem; + color: #888; } /* History */ #thehistoryWrap { - position: absolute; - z-index: 15; - bottom: 0; - left: 0; - width: 100%; - height: 100%; - background: #222; - overflow: auto; + position: absolute; + z-index: 15; + bottom: 0; + left: 0; + width: 100%; + height: 100%; + background: #222; + overflow: auto; } #thehistory .pvbar { - padding: var(--pad2) var(--pad2) var(--pad2) var(--pad2); - border-bottom: 1px solid black; + padding: var(--pad2) var(--pad2) var(--pad2) var(--pad2); + border-bottom: 1px solid black; } .histmoreinfo { - font-size: 0.8rem; - color: #888; + font-size: 0.8rem; + color: #888; } .histart { - display: flex; - align-items: center; - justify-content: center; - margin-right: var(--pad2); - height: 2.5rem; - width: 2.5rem; - background-size: cover; - background-position: center; + display: flex; + align-items: center; + justify-content: center; + margin-right: var(--pad2); + height: 2.5rem; + width: 2.5rem; + background-size: cover; + background-position: center; } .histlink { - color: #bbb; + color: #bbb; } .qtxt { - flex: 1; + flex: 1; } /* Login */ #welcomeInfo { - padding-bottom: var(--pad4); + padding-bottom: var(--pad4); } #login { - grid-area: login; - padding: var(--pad5); - background: #151515; - overflow: auto; - height: 100%; + grid-area: login; + padding: var(--pad5); + background: #151515; + overflow: auto; + height: 100%; } #login h4 { - font-size: 1.25rem; - font-weight: 300; + font-size: 1.25rem; + font-weight: 300; } #login h4 a { - font-size: 1rem; + font-size: 1rem; } #login .butt { - width: auto; + width: auto; } .inputline { - display: flex; - flex-direction: column; - margin-top: 1rem; - max-width: 20rem; + display: flex; + flex-direction: column; + margin-top: 1rem; + max-width: 20rem; } -.inputline>* { - margin: var(--pad1) 0; +.inputline > * { + margin: var(--pad1) 0; } .formlinks { - margin-top: var(--pad3); + margin-top: var(--pad3); } #login .formlinks a { - margin-right: 15px; - cursor: pointer; + margin-right: 15px; + cursor: pointer; } #login .formlinks a:last-child { - margin-right: 0; + margin-right: 0; } #login .formlinks .selected { - display: none; + display: none; } /* Modals */ #overlay { - position: fixed; - top: 0; - left: 0; - z-index: 100; - display: flex; - align-items: center; - justify-content: center; - width: 100%; - height: 100%; - background: rgba(0, 0, 0, 0.85); - overflow: hidden; + position: fixed; + top: 0; + left: 0; + z-index: 100; + display: flex; + align-items: center; + justify-content: center; + width: 100%; + height: 100%; + background: rgba(0, 0, 0, 0.85); + overflow: hidden; } #overlay.show { - display: flex; + display: flex; } .modalThing { - display: none; - flex-direction: column; - max-width: 80vw; - max-height: 80vh; - background-color: #111; - overflow: hidden; + display: none; + flex-direction: column; + max-width: 80vw; + max-height: 80vh; + background-color: #111; + overflow: hidden; } .modalThing.show { - display: flex; + display: flex; } .modalHeader { - display: flex; - align-items: center; - justify-content: space-between; - padding: var(--pad4); - color: #eee; - background-color: #222; + display: flex; + align-items: center; + justify-content: space-between; + padding: var(--pad4); + color: #eee; + background-color: #222; } .closeModal { - margin-left: var(--pad3); + margin-left: var(--pad3); } .modalContent { - flex: 1; - display: flex; - padding: var(--pad4); - overflow: auto; + flex: 1; + display: flex; + padding: var(--pad4); + overflow: auto; } -#settingsBox .modalContent, #accountSettingsBox .modalContent { - min-width: 320px; +#settingsBox .modalContent, +#accountSettingsBox .modalContent { + min-width: 320px; } #cardsBox .modalContent { - width: 80vw; - height: 80vh; + width: 80vw; + height: 80vh; } .settingline { - margin-bottom: var(--pad2); + margin-bottom: var(--pad2); } #cardsMain { - display: grid; - grid-gap: 10px; - grid-template-columns: repeat(auto-fill, minmax(225px, 1fr)); + display: grid; + grid-gap: 10px; + grid-template-columns: repeat(auto-fill, minmax(225px, 1fr)); } .caseCard { - margin: var(--pad2); + margin: var(--pad2); } .caseCardSpot { - position: relative; + position: relative; } .caseCardSpot canvas { - border: 1px solid #333; + border: 1px solid #333; } span.cardShareChat { - position: absolute; - right: 85px; - bottom: 160px; - font-size: 14px; - background-color: #000; - padding: 5px; - border-radius: 5px; - display: none; + position: absolute; + right: 85px; + bottom: 160px; + font-size: 14px; + background-color: #000; + padding: 5px; + border-radius: 5px; + display: none; } span.cardGiftChat { - position: absolute; - right: 100px; - bottom: 200px; - font-size: 14px; - background-color: #000; - padding: 5px; - border-radius: 5px; - display: none; + position: absolute; + right: 100px; + bottom: 200px; + font-size: 14px; + background-color: #000; + padding: 5px; + border-radius: 5px; + display: none; } span.cardGiftChat:hover, span.cardShareChat:hover { - background-color: var(--orange); - color: #000; + background-color: var(--orange); + color: #000; } .caseCardSpot:hover .cardShareChat, .caseCardSpot:hover .cardGiftChat { - display: block; + display: block; } #importDubContent { - display: none; + display: none; } -input.tagMachine, #supercopSearch, #changeUsername { - width: 100%; - padding: 5px; - margin-bottom: 15px; +input.tagMachine, +#supercopSearch, +#changeUsername { + width: 100%; + padding: 5px; + margin-bottom: 15px; } #songlink { - border-radius: 0.25rem; + border-radius: 0.25rem; } #songlink svg { - width: 100%; - height: 100%; - padding: 4px; + width: 100%; + height: 100%; + padding: 4px; } #importSources { - padding: 0; - background: none; + padding: 0; + background: none; } -#importContent, #importDubContent { - padding: var(--pad2) var(--pad3); - background-color: #282828; +#importContent, +#importDubContent { + padding: var(--pad2) var(--pad3); + background-color: #282828; } #dubimportButton { - margin-top: 10px; - display: none; + margin-top: 10px; + display: none; } #byId { - display: flex; - align-items: center; + display: flex; + align-items: center; } #byId .butt:disabled { - opacity: 0.4; + opacity: 0.4; } input#plMachine, input#plMachineById { - line-height: 30px; - width: 100%; - padding: 5px; + line-height: 30px; + width: 100%; + padding: 5px; } input#plMachineById { - padding-right: 40px; + padding-right: 40px; } .responseBox { - background-color: var(--orange); - margin: 10px; - padding: 5px; - color: #000; - border-radius: 0.25rem; + background-color: var(--orange); + margin: 10px; + padding: 5px; + color: #000; + border-radius: 0.25rem; } .responseBox:empty { - display: none; + display: none; } #mergeLists, #shuffleQueue { - margin-left: 1em; + margin-left: 1em; } /* Unauthenticated state */ #reconnecting { - display: none; - padding: var(--pad1) var(--pad2); - background-color: #bb4433; - animation: pulse 500ms infinite linear alternate; + display: none; + padding: var(--pad1) var(--pad2); + background-color: #bb4433; + animation: pulse 500ms infinite linear alternate; } body.disconnected #queuebox, body.disconnected #newchat { - opacity: 0.5; - pointer-events: none; - user-select: none; + opacity: 0.5; + pointer-events: none; + user-select: none; } body.disconnected #reconnecting { - display: block; + display: block; } body.disconnected #logOutButton { - display: none; + display: none; } /* About page */ body.blog { - overflow: auto; + overflow: auto; } div#blog { - flex: 1; - padding: var(--pad5); - background-color: #282828; + flex: 1; + padding: var(--pad5); + background-color: #282828; } /* Initially hidden stuff */ @@ -2023,268 +2029,260 @@ div#blog { .notice, #emojiPicker, #overlay { - display: none; + display: none; } /*------------------------------------ Media Queries -*/ @media only screen and (max-width: 799px) { - #allusersWrap .prson { - cursor: none; - pointer-events: none; - } + #allusersWrap .prson { + cursor: none; + pointer-events: none; + } } @media only screen and (min-width: 800px) { - body.screen #albumArt { - display: none; - } - - body.screen #screenBox { - top: 0; - } - - #mainGrid { - gap: 0 5px; - } - - #importPromptBox .modalContent { - width: 480px; - } - - #mainGrid, - #mainGrid.mmchat { - grid-template-rows: auto auto auto 1fr; - grid-template-columns: 60vw 40vw; - grid-template-areas: - "stage theme" - "stage chat" - "mmopts chat" - "users chat" - ; - } - - #mainGrid.mmusrs { - grid-template-areas: - "stage theme" - "stage chat" - "mmopts chat" - "users chat" - ; - } - - #mainGrid.mmqueue { - grid-template-areas: - "stage theme" - "stage chat" - "mmopts chat" - "queues chat" - ; - } - - #mainGrid.mmchat #usersbox, - #mainGrid.mmqueue #actualChat, - #mainGrid.mmusrs #actualChat { - display: flex; - } - - #mainGrid.login { - grid-template-areas: - "stage queues" - "login queues" - ; - } - - #mainGrid.login #queuebox, - #mainGrid.login #thehistoryWrap { - display: block; - } - - #mainGrid.login .histeal, - #mmchat { - display: none; - } - - #idtitle { - display: block; - } - - #thehistoryWrap { - grid-area: queues; - display: block; - position: relative; - top: auto !important; - bottom: auto; - } - - #mainGrid.mmqueue #thehistoryWrap { - grid-area: mmopts / queues; - } + body.screen #albumArt { + display: none; + } + + body.screen #screenBox { + top: 0; + } + + #mainGrid { + gap: 0 5px; + } + + #importPromptBox .modalContent { + width: 480px; + } + + #mainGrid, + #mainGrid.mmchat { + grid-template-rows: auto auto auto 1fr; + grid-template-columns: 60vw 40vw; + grid-template-areas: + "stage theme" + "stage chat" + "mmopts chat" + "users chat"; + } + + #mainGrid.mmusrs { + grid-template-areas: + "stage theme" + "stage chat" + "mmopts chat" + "users chat"; + } + + #mainGrid.mmqueue { + grid-template-areas: + "stage theme" + "stage chat" + "mmopts chat" + "queues chat"; + } + + #mainGrid.mmchat #usersbox, + #mainGrid.mmqueue #actualChat, + #mainGrid.mmusrs #actualChat { + display: flex; + } + + #mainGrid.login { + grid-template-areas: + "stage queues" + "login queues"; + } + + #mainGrid.login #queuebox, + #mainGrid.login #thehistoryWrap { + display: block; + } + + #mainGrid.login .histeal, + #mmchat { + display: none; + } + + #idtitle { + display: block; + } + + #thehistoryWrap { + grid-area: queues; + display: block; + position: relative; + top: auto !important; + bottom: auto; + } + + #mainGrid.mmqueue #thehistoryWrap { + grid-area: mmopts / queues; + } } @media only screen and (min-width: 1200px) { - - #mainGrid, - #mainGrid.mmqueue, - #mainGrid.mmchat, - #mainGrid.mmusrs { - grid-template-rows: auto auto 1fr; - grid-template-columns: minmax(16rem, 20rem) minmax(40vw, 100vw) minmax(24rem, 36rem); - grid-template-areas: - "users stage theme" - "users stage chat" - "users queues chat" - ; - } - - #mainGrid.mmusrs #queuebox, - #mainGrid.mmusrs #actualChat, - #mainGrid.mmchat #usersbox, - #mainGrid.mmchat #queuebox, - #mainGrid.mmqueue #usersbox, - #mainGrid.mmqueue #actualChat { - display: flex; - } - - #mainGrid.login { - grid-template-areas: - "stage stage queues" - "login login queues" - ; - } - - #mainGrid #minimodeoptions { - display: none; - } - - #usertabs { - padding-top: 0; - background-color: black; - } - - #djStage { - height: 30vh; - min-height: 15rem; - } - - .avtr { - display: block; - } - - #albumArt { - height: 6.5rem; - width: 6.5rem; - } - - #deck { - margin-left: 5vw !important; - margin-right: 5vw !important; - } - - .djplaque { - justify-content: space-between; - } - - #thehistoryWrap { - grid-area: queues !important; - } + #mainGrid, + #mainGrid.mmqueue, + #mainGrid.mmchat, + #mainGrid.mmusrs { + grid-template-rows: auto auto 1fr; + grid-template-columns: minmax(16rem, 20rem) minmax(40vw, 100vw) minmax(24rem, 36rem); + grid-template-areas: + "users stage theme" + "users stage chat" + "users queues chat"; + } + + #mainGrid.mmusrs #queuebox, + #mainGrid.mmusrs #actualChat, + #mainGrid.mmchat #usersbox, + #mainGrid.mmchat #queuebox, + #mainGrid.mmqueue #usersbox, + #mainGrid.mmqueue #actualChat { + display: flex; + } + + #mainGrid.login { + grid-template-areas: + "stage stage queues" + "login login queues"; + } + + #mainGrid #minimodeoptions { + display: none; + } + + #usertabs { + padding-top: 0; + background-color: black; + } + + #djStage { + height: 30vh; + min-height: 15rem; + } + + .avtr { + display: block; + } + + #albumArt { + height: 6.5rem; + width: 6.5rem; + } + + #deck { + margin-left: 5vw !important; + margin-right: 5vw !important; + } + + .djplaque { + justify-content: space-between; + } + + #thehistoryWrap { + grid-area: queues !important; + } } @media only screen and (min-width: 1680px) { - - #mainGrid, - #mainGrid.mmqueue, - #mainGrid.mmchat, - #mainGrid.mmusrs { - grid-template-columns: minmax(16rem, 20rem) minmax(50vw, 100vw) minmax(24rem, 36rem); - } - - #mainGrid.login { - grid-template-areas: - "stage stage queues" - "login login queues" - ; - } - - #mainGrid.login #queuebox { - display: none; - } - - #mainGrid.login #thehistoryWrap { - width: 100%; - } - - #history { - position: absolute; - left: 60%; - bottom: -1px; - width: auto; - padding: 0 var(--pad2); - border-left: var(--pad1) solid #151515; - border-bottom-color: #222; - border-radius: 0; - clip-path: - polygon(0% 0%, - 0% 0%, - calc(100% - var(--pad2)) 0%, - 100% var(--pad2), - 100% 100%, - 100% 100%, - 0% 100%, - 0% 0%); - pointer-events: none; - } - - #history::after { - content: "Recent Plays"; - margin-left: var(--pad1); - font-size: 0.85rem; - font-weight: 400; - text-transform: none; - letter-spacing: 0; - } - - #queuebox { - width: 60%; - } - - #thehistoryWrap { - display: block !important; - grid-area: queues; - justify-self: flex-end; - z-index: auto; - width: 40%; - border-left: var(--pad1) solid #151515; - } + #mainGrid, + #mainGrid.mmqueue, + #mainGrid.mmchat, + #mainGrid.mmusrs { + grid-template-columns: minmax(16rem, 20rem) minmax(50vw, 100vw) minmax(24rem, 36rem); + } + + #mainGrid.login { + grid-template-areas: + "stage stage queues" + "login login queues"; + } + + #mainGrid.login #queuebox { + display: none; + } + + #mainGrid.login #thehistoryWrap { + width: 100%; + } + + #history { + position: absolute; + left: 60%; + bottom: -1px; + width: auto; + padding: 0 var(--pad2); + border-left: var(--pad1) solid #151515; + border-bottom-color: #222; + border-radius: 0; + clip-path: polygon( + 0% 0%, + 0% 0%, + calc(100% - var(--pad2)) 0%, + 100% var(--pad2), + 100% 100%, + 100% 100%, + 0% 100%, + 0% 0% + ); + pointer-events: none; + } + + #history::after { + content: "Recent Plays"; + margin-left: var(--pad1); + font-size: 0.85rem; + font-weight: 400; + text-transform: none; + letter-spacing: 0; + } + + #queuebox { + width: 60%; + } + + #thehistoryWrap { + display: block !important; + grid-area: queues; + justify-self: flex-end; + z-index: auto; + width: 40%; + border-left: var(--pad1) solid #151515; + } } @media only screen and (min-width: 2100px) { - html { - font-size: calc(0.4em + 0.4vw); - } - - #mainGrid, - #mainGrid.mmqueue, - #mainGrid.mmchat, - #mainGrid.mmusrs { - grid-template-columns: minmax(24rem, 36rem) minmax(40vw, 100vw) minmax(24rem, 36rem); - } - - #usersbox .tab { - color: #ffffff; - background-color: #282828; - box-shadow: 0 -0.2rem 0.5rem -0.2rem black; - } - - #userslist { - display: flex; - } - - .usersWrap { - display: block !important; - flex: 1; - } - - #allusersWrap { - border-right: 5px solid black; - } + html { + font-size: calc(0.4em + 0.4vw); + } + + #mainGrid, + #mainGrid.mmqueue, + #mainGrid.mmchat, + #mainGrid.mmusrs { + grid-template-columns: minmax(24rem, 36rem) minmax(40vw, 100vw) minmax(24rem, 36rem); + } + + #usersbox .tab { + color: #ffffff; + background-color: #282828; + box-shadow: 0 -0.2rem 0.5rem -0.2rem black; + } + + #userslist { + display: flex; + } + + .usersWrap { + display: block !important; + flex: 1; + } + + #allusersWrap { + border-right: 5px solid black; + } } diff --git a/index.html b/index.html index d5a1374..fd60513 100644 --- a/index.html +++ b/index.html @@ -19,30 +19,36 @@
-
diff --git a/js/main.js b/js/main.js index 2c85fb0..d950c69 100644 --- a/js/main.js +++ b/js/main.js @@ -1,60 +1,61 @@ var firetable = { - started: false, - loggedIn: false, - uid: null, - uname: null, - pvCount: 0, - playdex: 0, - users: {}, - queue: false, - preview: false, - movePvBar: null, - moveBar: null, - song: null, - playBadoop: true, - idle: false, - idleChanged: null, - sbhowImages: false, - screenControl: "sync", - lights: false, - screenSyncPos: false, - scSeek: false, - desktopNotifyMentions: false, - orange: "#F4810B", - color: "#F4810B", - countcolor: "#fff", - ytLoaded: null, - scLoaded: null, - listShowing: null, - parser: null, - songToEdit: null, - scwidget: null, - searchSelectsChoice: 1, - importSelectsChoice: 1, - dtImportName: null, - dtImportList: [], - lastChatPerson: false, - lastChatId: false, - tagUpdate: null, - nonpmsg: true, - playlimit: 2, - scImg: "", - superCopBanUpdates: null, - loginForm: null, - emojiMap: null, - pickerInit: false, - atLand: false, - atUsers: [], - atUsersFiltered: [], - atString: "", - debug: false -} + started: false, + loggedIn: false, + uid: null, + uname: null, + pvCount: 0, + playdex: 0, + users: {}, + queue: false, + preview: false, + movePvBar: null, + moveBar: null, + song: null, + playBadoop: true, + idle: false, + idleChanged: null, + sbhowImages: false, + screenControl: "sync", + lights: false, + screenSyncPos: false, + scSeek: false, + desktopNotifyMentions: false, + orange: "#F4810B", + color: "#F4810B", + countcolor: "#fff", + ytLoaded: null, + scLoaded: null, + listShowing: null, + parser: null, + songToEdit: null, + scwidget: null, + searchSelectsChoice: 1, + importSelectsChoice: 1, + dtImportName: null, + dtImportList: [], + lastChatPerson: false, + lastChatId: false, + tagUpdate: null, + nonpmsg: true, + playlimit: 2, + scImg: "", + superCopBanUpdates: null, + loginForm: null, + emojiMap: null, + pickerInit: false, + atLand: false, + atUsers: [], + atUsersFiltered: [], + atString: "", + debug: false, +}; -if (typeof ftconfigs == "undefined") throw "config.js is missing! Copy config.js.example and rename to config.js. Edit this file and add your own app's information."; +if (typeof ftconfigs == "undefined") + throw "config.js is missing! Copy config.js.example and rename to config.js. Edit this file and add your own app's information."; -var chatScroll = new SimpleBar(document.getElementById('chatsWrap')); -chatScroll.getScrollElement().addEventListener('scroll', function() { - if (firetable.utilities.isChatPrettyMuchAtBottom()) $('#morechats').removeClass('show'); +var chatScroll = new SimpleBar(document.getElementById("chatsWrap")); +chatScroll.getScrollElement().addEventListener("scroll", function () { + if (firetable.utilities.isChatPrettyMuchAtBottom()) $("#morechats").removeClass("show"); }); firetable.version = "01.09.04"; @@ -62,113 +63,111 @@ firetable.version = "01.09.04"; var player, $playlistItemTemplate; var idlejs = new IdleJs({ - idle: 5 * 60000, - events: ['mousemove', 'keydown', 'mousedown', 'touchstart'], - onIdle: function() { - ftapi.actions.changeIdleStatus(true, 1); - }, - onActive: function() { - ftapi.actions.changeIdleStatus(false, 1); - }, - onHide: function() { - ftapi.actions.changeIdleStatus(true, 1); - firetable.debug && console.log("hide"); - }, - onShow: function() { - ftapi.actions.changeIdleStatus(false, 1); - }, - keepTracking: true, - startAtIdle: false + idle: 5 * 60000, + events: ["mousemove", "keydown", "mousedown", "touchstart"], + onIdle: function () { + ftapi.actions.changeIdleStatus(true, 1); + }, + onActive: function () { + ftapi.actions.changeIdleStatus(false, 1); + }, + onHide: function () { + ftapi.actions.changeIdleStatus(true, 1); + firetable.debug && console.log("hide"); + }, + onShow: function () { + ftapi.actions.changeIdleStatus(false, 1); + }, + keepTracking: true, + startAtIdle: false, }); idlejs.start(); function onYouTubeIframeAPIReady() { - player = new YT.Player('playerArea', { - width: $('#djStage').outerHeight() * 1.7777, - height: $('#djStage').outerHeight(), - playerVars: { - 'autoplay': 1, - 'controls': 0 - }, - videoId: '0', - events: { - onReady: initialize, - onStateChange: function() { - $('#reloadtrack').removeClass('on working'); - } - } - }); + player = new YT.Player("playerArea", { + width: $("#djStage").outerHeight() * 1.7777, + height: $("#djStage").outerHeight(), + playerVars: { + autoplay: 1, + controls: 0, + }, + videoId: "0", + events: { + onReady: initialize, + onStateChange: function () { + $("#reloadtrack").removeClass("on working"); + }, + }, + }); } function initialize(event) { - firetable.ytLoaded = true; - var vol = localStorage["firetableVol"]; - if (typeof vol == "undefined") { - vol = 80; - localStorage["firetableVol"] = 80; - } - player.setVolume(vol); - - var muted = localStorage["firetableMute"]; - if (typeof muted == "undefined") { - localStorage["firetableMute"] = false; - muted = "false"; - $("#volstatus").removeClass('on'); - } - - if (muted != "false") { - var icon = ""; - $("#volstatus i").html(icon); - $("#volstatus").addClass('on'); - } - - $("#slider").slider({ - orientation: "horizontal", - range: "min", - min: 0, - max: 100, - value: vol, - step: 5, - slide: function(event, ui) { - player.setVolume(ui.value); - firetable.scwidget.setVolume(ui.value); - localStorage["firetableVol"] = ui.value; - var muted = localStorage["firetableMute"]; - if (muted != "false") { + firetable.ytLoaded = true; + var vol = localStorage["firetableVol"]; + if (typeof vol == "undefined") { + vol = 80; + localStorage["firetableVol"] = 80; + } + player.setVolume(vol); + + var muted = localStorage["firetableMute"]; + if (typeof muted == "undefined") { localStorage["firetableMute"] = false; - var icon = ""; - $("#volstatus i").html(icon); - $("#volstatus").removeClass('on'); - } else if (ui.value == 0) { - firetable.actions.muteToggle(true); - $("#volstatus").addClass('on'); - } + muted = "false"; + $("#volstatus").removeClass("on"); } - }); - if (firetable.song) { - var data = firetable.song; - var nownow = Date.now(); - var timeSince = nownow - data.started; - if (timeSince <= 0) timeSince = 0; - - var secSince = Math.floor(timeSince / 1000); - var timeLeft = data.duration - secSince; - if (data.type == 1) { - if (!firetable.preview) { - if (!firetable.disableMediaPlayback) player.loadVideoById(data.cid, secSince, "large") - } + + if (muted != "false") { + var icon = ""; + $("#volstatus i").html(icon); + $("#volstatus").addClass("on"); } - } + $("#slider").slider({ + orientation: "horizontal", + range: "min", + min: 0, + max: 100, + value: vol, + step: 5, + slide: function (event, ui) { + player.setVolume(ui.value); + firetable.scwidget.setVolume(ui.value); + localStorage["firetableVol"] = ui.value; + var muted = localStorage["firetableMute"]; + if (muted != "false") { + localStorage["firetableMute"] = false; + var icon = ""; + $("#volstatus i").html(icon); + $("#volstatus").removeClass("on"); + } else if (ui.value == 0) { + firetable.actions.muteToggle(true); + $("#volstatus").addClass("on"); + } + }, + }); + if (firetable.song) { + var data = firetable.song; + var nownow = Date.now(); + var timeSince = nownow - data.started; + if (timeSince <= 0) timeSince = 0; + var secSince = Math.floor(timeSince / 1000); + var timeLeft = data.duration - secSince; + if (data.type == 1) { + if (!firetable.preview) { + if (!firetable.disableMediaPlayback) player.loadVideoById(data.cid, secSince, "large"); + } + } + } } function onPlayerStateChange(event) { - //state changed thanks + //state changed thanks } -firetable.init = function() { - console.log(` +firetable.init = function () { + console.log(` ( ) ) ( )\\ ) ( ( ( ( /( ) ( /( )\\ ( (()/( )\\ )( ))\\ )\\()) ( /( )\\()) (_)) ))\\ @@ -177,3172 +176,3655 @@ firetable.init = function() { | _| | | | '_| / -_) | _| / _' | | '_ \\ | | / -_) |_| |_| |_| \\___| \\__| \\__,_| |_.__/ |_| \\___| `); - firetable.started = true; - - $("#idtitle").text(ftconfigs.roomName); - $("#welcomeName").text(ftconfigs.roomName); - -if (ftconfigs.facebookURL){ - $(".sociallogo.facebook").attr("href", ftconfigs.facebookURL); - $(".sociallogo.facebook").css("display", "inline-block"); -} - -if (ftconfigs.redditURL){ - $(".sociallogo.reddit").attr("href", ftconfigs.redditURL); - $(".sociallogo.reddit").css("display", "inline-block"); -} - -if (ftconfigs.lastfmURL){ - $(".sociallogo.lastfm").attr("href", ftconfigs.lastfmURL); - $(".sociallogo.lastfm").css("display", "inline-block"); -} - -if (ftconfigs.discordURL){ - $(".sociallogo.discord").attr("href", ftconfigs.discordURL); - $(".sociallogo.discord").css("display", "inline-block"); -} + firetable.started = true; -if (ftconfigs.soundcloudURL){ - $(".sociallogo.soundcloud").attr("href", ftconfigs.soundcloudURL); - $(".sociallogo.soundcloud").css("display", "inline-block"); -} + $("#idtitle").text(ftconfigs.roomName); + $("#welcomeName").text(ftconfigs.roomName); - if (ftconfigs.logoImage) $("#roomlogo").css("background-image", "url("+ftconfigs.logoImage+")") - document.title = ftconfigs.roomName + " | firetable"; - if (ftconfigs.roomInfoUrl.length) $("#roomInfo").attr("href", ftconfigs.roomInfoUrl); - $("#version").text("You're running firetable v" + firetable.version + "."); - firetable.utilities.getEmojiMap(); - firetable.parser = new DOMParser(); - $(window).resize(firetable.utilities.debounce(function() { - // This will execute whenever the window is resized - $("#thehistory").css('top', $('#stage').outerHeight() + $('#topbar').outerHeight()); - $('#playerArea,#scScreen').width($('#djStage').outerWidth()).height($('#djStage').outerHeight()); - $("#stealContain").css({ - 'top': $('#grab').offset().top + $('#grab').height(), - 'left': $('#grab').offset().left - 16 - }); - setup(); - }, 500)); - firetable.utilities.scrollToBottom(); - var widgetIframe = document.getElementById('sc-widget'); - firetable.scwidget = SC.Widget(widgetIframe); - firetable.scwidget.bind(SC.Widget.Events.READY, function() { - firetable.scwidget.bind(SC.Widget.Events.PLAY, function() { - var vol = localStorage["firetableVol"]; - if (!vol) { - vol = 80; - localStorage["firetableVol"] = 80; - } - firetable.scwidget.setVolume(vol); - if (firetable.scSeek) firetable.scwidget.seekTo(firetable.scSeek); - }); - if (firetable.song) { - var data = firetable.song; - var nownow = Date.now(); - var timeSince = nownow - data.started; - if (timeSince <= 0) timeSince = 0; - - var secSince = Math.floor(timeSince / 1000); - var timeLeft = data.duration - secSince; - if (data.type == 2) { - if (!firetable.preview) { - firetable.scSeek = timeSince; - if (!firetable.disableMediaPlayback) firetable.scwidget.load("http://api.soundcloud.com/tracks/" + data.cid, { - auto_play: true - }); - } - } + if (ftconfigs.facebookURL) { + $(".sociallogo.facebook").attr("href", ftconfigs.facebookURL); + $(".sociallogo.facebook").css("display", "inline-block"); } - firetable.scLoaded = true; - }); - - $playlistItemTemplate = $('#mainqueue .pvbar').remove(); - $tagEditorTemplate = $('.tagPromptBox').remove(); - - ftapi.init(ftconfigs.firebase); - - SC.initialize({ - client_id: ftconfigs.soundcloudKey - }); - - ftapi.events.on("loggedIn", function(data) { - firetable.actions.loggedIn(data); - }); - - ftapi.events.on("loggedOut", firetable.actions.showLoginScreen); - - ftapi.events.on("authReconnected", function() { - firetable.debug && console.log('reconnected'); - $('body').removeClass('disconnected'); - $('#newchat').prop('disabled', false).focus(); - }); - - ftapi.events.on("authDisconnected", function() { - firetable.debug && console.log('disconnected'); - $('body').addClass('disconnected'); - $('#newchat').prop('disabled', true).blur(); - }); - - ftapi.events.on("userBanned", function() { - firetable.debug && console.log("ban detected."); - if (document.getElementById("notice") == null) { - var usrname2use = ftapi.uid; - if (ftapi.users[ftapi.uid]) { - if (ftapi.users[ftapi.uid].username) usrname2use = ftapi.users[ftapi.uid].username; - } - $('.notice').attr('id', 'notice'); - $("#troublemaker").text(usrname2use); - } - }); - - ftapi.events.on("userUnbanned", function() { - window.location.reload(); - }); - - firetable.ui.init(); -}; - -firetable.actions = { - dubtrackImport: function() { - $("#importDubResults").html("importing (0/" + firetable.dtImportList.length + ")..."); - $("#dubimportButton").hide(); - var listid = ftapi.actions.createList(firetable.dtImportName); - var name = firetable.dtImportName; - - $("#listpicker").append(""); - var trackarray = firetable.dtImportList; - for (var e = 0; e < trackarray.length; e++) { - var thetype = 1; - if (trackarray[e].type == "soundcloud") thetype = 2; - var numbo = e + 1; - $("#importDubResults").html("importing (" + numbo + "/" + firetable.dtImportList.length + ")..."); - if (numbo == firetable.dtImportList.length) $("#importDubResults").html("Import complete! You can now select another file if you'd like to do another!"); - ftapi.actions.addToList(thetype, trackarray[e].name, trackarray[e].cid, listid); - } - }, - localChatResponse: function(txt) { - if (txt.length) { - $("#chats").append("
" + txt + "
"); - firetable.utilities.scrollToBottom(); - } - }, - logOut: function() { - ftapi.actions.logOut(); - firetable.debug && console.log("logout"); - }, - showLoginScreen: function() { - $("#cardCaseButton").hide(); - $("#loggedInName").hide(); - $("#logOutButton").hide().off(); - $('#mainGrid').removeClass().addClass('login'); - $("#grab").css("display", "none"); - if (firetable.loginForm && !$("#login").html()) { - $("#mainGrid").append("
" + firetable.loginForm + "
"); - - firetable.ui.loginEventsInit(); - } - }, - logIn: function(email, password) { - firetable.debug && console.log("login"); - ftapi.actions.logIn(email, password, function(error) { - var errorCode = error.code; - var errorMessage = error.message; - if (errorCode === 'auth/wrong-password') { - alert('Wrong password.'); - } else { - alert(errorMessage); - } - firetable.debug && console.log("log in error:", error); - }); - }, - loggedIn: function(user) { - firetable.debug && console.log("user signed in!"); - if ($("#login").html()) { - firetable.loginForm = $("#login").html(); - firetable.ui.loginEventsDestroy(); - $("#login").remove(); + if (ftconfigs.redditURL) { + $(".sociallogo.reddit").attr("href", ftconfigs.redditURL); + $(".sociallogo.reddit").css("display", "inline-block"); } - if (ftapi.users[ftapi.uid]) { - if (ftapi.users[ftapi.uid].username) { - $("#loggedInName").text(ftapi.users[ftapi.uid].username); - } else { - $("#loggedInName").text(user.uid); - } - } else { - $("#loggedInName").text(user.uid); + if (ftconfigs.lastfmURL) { + $(".sociallogo.lastfm").attr("href", ftconfigs.lastfmURL); + $(".sociallogo.lastfm").css("display", "inline-block"); } - ftapi.lookup.allLists(function(allPlaylists) { - $("#listpicker").off("change"); - $("#listpicker").html(""); - for (var key in allPlaylists) { - if (allPlaylists.hasOwnProperty(key)) { - $("#listpicker").append(""); - } - } - ftapi.lookup.selectedList(function(selectedList) { - $("#listpicker").val(selectedList).change(); - $("#listpicker").change(function() { - var val = $("#listpicker").val(); - if (val == "1") { - //ADD PLAYLIST SCREEN - $("#mainqueuestuff").css("display", "none"); - $("#filterMachine").css("display", "none"); - $("#addbox").css("display", "none"); - $("#cancelqsearch").hide(); - $("#qControlButtons").hide(); - - $("#plmanager").css("display", "flex"); + if (ftconfigs.discordURL) { + $(".sociallogo.discord").attr("href", ftconfigs.discordURL); + $(".sociallogo.discord").css("display", "inline-block"); + } - } else if (val != ftapi.selectedListThing) { - //LOAD SELECTED LIST - //change selected list in user obj - $("#mainqueuestuff").css("display", "block"); - $("#filterMachine").css("display", "block"); - $("#addbox").css("display", "none"); - $("#cancelqsearch").hide(); - $("#qControlButtons").show(); + if (ftconfigs.soundcloudURL) { + $(".sociallogo.soundcloud").attr("href", ftconfigs.soundcloudURL); + $(".sociallogo.soundcloud").css("display", "inline-block"); + } - $("#plmanager").css("display", "none"); - ftapi.actions.switchList(val); - } else { - //you selected the thing you already had selected. - $("#mainqueuestuff").css("display", "block"); - $("#filterMachine").css("display", "block"); - $("#addbox").css("display", "none"); - $("#cancelqsearch").hide(); - $("#qControlButtons").show(); - $("#plmanager").css("display", "none"); - } + if (ftconfigs.logoImage) $("#roomlogo").css("background-image", "url(" + ftconfigs.logoImage + ")"); + document.title = ftconfigs.roomName + " | firetable"; + if (ftconfigs.roomInfoUrl.length) $("#roomInfo").attr("href", ftconfigs.roomInfoUrl); + $("#version").text("You're running firetable v" + firetable.version + "."); + firetable.utilities.getEmojiMap(); + firetable.parser = new DOMParser(); + $(window).resize( + firetable.utilities.debounce(function () { + // This will execute whenever the window is resized + $("#thehistory").css("top", $("#stage").outerHeight() + $("#topbar").outerHeight()); + $("#playerArea,#scScreen").width($("#djStage").outerWidth()).height($("#djStage").outerHeight()); + $("#stealContain").css({ + top: $("#grab").offset().top + $("#grab").height(), + left: $("#grab").offset().left - 16, + }); + setup(); + }, 500) + ); + firetable.utilities.scrollToBottom(); + var widgetIframe = document.getElementById("sc-widget"); + firetable.scwidget = SC.Widget(widgetIframe); + firetable.scwidget.bind(SC.Widget.Events.READY, function () { + firetable.scwidget.bind(SC.Widget.Events.PLAY, function () { + var vol = localStorage["firetableVol"]; + if (!vol) { + vol = 80; + localStorage["firetableVol"] = 80; + } + firetable.scwidget.setVolume(vol); + if (firetable.scSeek) firetable.scwidget.seekTo(firetable.scSeek); }); - - }); - }); - $("#cardCaseButton").show(); - $("#loggedInName").show(); - $("#logOutButton").show().on('click', firetable.actions.logOut); - firetable.debug && console.log('remove login class from mainGrid'); - $('#mainGrid').removeClass().addClass('mmusrs'); - $("#grab").css("display", "inline-block"); - }, - cardCase: function() { - $("#cardsMain").html(""); - ftapi.lookup.cardCollection(function(data) { - for (var key in data) { - var childData = data[key]; - firetable.debug && console.log('card:', childData); - $("#cardsMain").append("Gift to DJShare In Chat"); - firetable.actions.displayCard(childData, key); - } + if (firetable.song) { + var data = firetable.song; + var nownow = Date.now(); + var timeSince = nownow - data.started; + if (timeSince <= 0) timeSince = 0; + + var secSince = Math.floor(timeSince / 1000); + var timeLeft = data.duration - secSince; + if (data.type == 2) { + if (!firetable.preview) { + firetable.scSeek = timeSince; + if (!firetable.disableMediaPlayback) + firetable.scwidget.load("http://api.soundcloud.com/tracks/" + data.cid, { + auto_play: true, + }); + } + } + } + firetable.scLoaded = true; }); - }, - chatCard: function(cardid) { - ftapi.actions.sendChat("Check out my card...", cardid); - }, - giftCard: function(cardid) { - ftapi.actions.sendChat("!giftcard :gift:", cardid); - $("#caseCardSpot" + cardid).remove(); - }, - displayCard: function(data, chatid) { - firetable.debug && console.log("display card"); - var defaultScheme = false; - if (data.colors) { - if (data.colors.color == "#fff" || data.colors.color == "#7f7f7f") { - data.colors.color = firetable.orange; - data.colors.txt = "#000"; - defaultScheme = true; - } - } - - if (data.image == "img/idlogo.png" && ftconfigs.defaultAlbumArtUrl.length) data.image = ftconfigs.defaultAlbumArtUrl; - var canvas = document.getElementById('cardMaker' + chatid); - - if (canvas.getContext) { - var ctx = canvas.getContext('2d'); - ctx.clearRect(0, 0, canvas.width, canvas.height); - ctx.fillStyle = "#000"; - ctx.fillRect(0, 0, 225, 300); - - ctx.fillStyle = data.colors.color; - if (defaultScheme) ctx.fillStyle = "#fff"; - ctx.fillRect(1, 30, 223, 175); - - var grd = ctx.createLinearGradient(0, 0, 0, 175); - grd.addColorStop(0, "rgba(0, 0, 0, 0.75)"); - grd.addColorStop(1, "rgba(0, 0, 0, 0.55)"); - - // Fill with gradient - ctx.fillStyle = grd; - ctx.fillRect(1, 30, 223, 175); - - ctx.fillStyle = data.colors.color; - ctx.fillRect(1, 205, 223, 10); - - ctx.fillStyle = "#333333"; - //ctx.fillRect(1, 205, 223, 1); - // ctx.fillRect(1, 215, 223, 1); - - ctx.fillStyle = "#151515"; - ctx.fillRect(1, 216, 223, 75); - - //text go - ctx.fillStyle = "#eee"; - ctx.font = "700 11px Helvetica, Arial, sans-serif"; - ctx.fillText(data.djname, 10, 20); - - - ctx.font = "400 8px Helvetica, Arial, sans-serif"; - ctx.textAlign = "center"; - ctx.fillText("Printed " + firetable.utilities.format_date(data.date) + " | " + ftconfigs.roomNameShort, 112.5, 299); - - ctx.font = "700 10px Helvetica, Arial, sans-serif"; - ctx.textAlign = "left"; - var linez = firetable.utilities.wrapText(ctx, data.title, 66, 240, 160, 15); - firetable.debug && console.log('linez:', linez); - ctx.font = "400 8px Helvetica, Arial, sans-serif"; - ctx.textAlign = "left"; - firetable.utilities.wrapText(ctx, data.artist, 66, 253 + (15 * linez), 160, 15); - - ctx.fillStyle = data.colors.txt; - ctx.font = "400 9px Helvetica, Arial, sans-serif"; - ctx.textAlign = "center"; - ctx.fillText("Card No. " + data.cardnum + " | DJ Card | Max Operating Temp " + data.temp + "°", 112.5, 214); - ctx.beginPath(); - ctx.arc(205, 15, 12, 0, 2 * Math.PI, false); - ctx.fillStyle = data.colors.color; - ctx.fill(); - - ctx.fillStyle = data.colors.txt; - ctx.font = "700 15px Helvetica, Arial, sans-serif"; - ctx.textAlign = "left"; - ctx.fillText(data.num, 200.5, 20); - - var doImages = function() { - var picboy = new Image; - picboy.xvalue = 0; - picboy.onload = function() { - ctx.drawImage(this, 20, 30, 175, 175); - var picboy2 = new Image; - picboy2.xvalue = 0; - picboy2.onload = function() { - var heighta = 50; - if (data.image.match(/ytimg.com/g)) heighta = 28; - ctx.drawImage(this, 10, 230, 50, heighta); - ctx = null; - }; - picboy2.src = data.image; - }; - picboy.src = 'https://indiediscotheque.com/robots/' + data.djid + data.djname + '.png?size=175x175'; + $playlistItemTemplate = $("#mainqueue .pvbar").remove(); + $tagEditorTemplate = $(".tagPromptBox").remove(); - }; + ftapi.init(ftconfigs.firebase); - // special styles - - if (data.special) { - if (data.special == "id8") { - ctx.fillStyle = data.colors.color; - ctx.fillRect(1, 30, 223, 10); + SC.initialize({ + client_id: ftconfigs.soundcloudKey, + }); - ctx.fillStyle = "#333333"; - // ctx.fillRect(1, 29, 223, 1); - // ctx.fillRect(1, 40, 223, 1); + ftapi.events.on("loggedIn", function (data) { + firetable.actions.loggedIn(data); + }); - ctx.fillStyle = data.colors.txt; - ctx.font = "400 10px Helvetica, Arial, sans-serif"; - ctx.textAlign = "center"; - ctx.fillText("Celebrating 8 Years of Indie Discotheque", 112.5, 38); + ftapi.events.on("loggedOut", firetable.actions.showLoginScreen); - var cake = new Image; - cake.xvalue = 0; - cake.onload = function() { - ctx.drawImage(this, 10, 50, 35, 35); - var eight = new Image; - eight.xvalue = 0; - eight.onload = function() { - ctx.drawImage(this, 180, 50, 35, 35); - doImages(); - }; - eight.src = 'img/8.png'; - }; - cake.src = 'img/cake.png'; - - } else if (data.special == "id9") { - ctx.fillStyle = data.colors.color; - ctx.fillRect(1, 30, 223, 10); - - ctx.fillStyle = "#333333"; - // ctx.fillRect(1, 29, 223, 1); - // ctx.fillRect(1, 40, 223, 1); - - ctx.fillStyle = data.colors.txt; - ctx.font = "400 10px Helvetica, Arial, sans-serif"; - ctx.textAlign = "center"; - ctx.fillText("Celebrating 9 Years of Indie Discotheque", 112.5, 38); - - var cake = new Image; - cake.xvalue = 0; - cake.onload = function() { - ctx.drawImage(this, 5, 50, 45, 45); - var eight = new Image; - eight.xvalue = 0; - eight.onload = function() { - ctx.save(); - ctx.translate(75 * 0.5, 75 * 0.5); - ctx.rotate(0.959931); - ctx.translate(-75 * 0.5, -75 * 0.5); - - ctx.drawImage(this, 125, -81, 75, 75); - ctx.restore(); - var picboy = new Image; - picboy.xvalue = 0; - picboy.onload = function() { - ctx.drawImage(this, 25, 40, 170, 170); - var picboy2 = new Image; - picboy2.xvalue = 0; - picboy2.onload = function() { - var heighta = 50; - if (data.image.match(/ytimg.com/g)) heighta = 28; - ctx.drawImage(this, 10, 230, 50, heighta); - ctx = null; - }; - picboy2.src = data.image; - }; - picboy.src = 'img/id9.png'; - }; - eight.src = 'https://indiediscotheque.com/robots/' + data.djid + data.djname + '.png?size=110x110'; - }; - cake.src = 'img/arnold.png'; - } - } else { - doImages(); - } - } - }, - showCard: function(cardid, chatid) { - // let's SHOW A CARD - ftapi.lookup.card(cardid, function(data) { - firetable.actions.displayCard(data, chatid); + ftapi.events.on("authReconnected", function () { + firetable.debug && console.log("reconnected"); + $("body").removeClass("disconnected"); + $("#newchat").prop("disabled", false).focus(); }); - }, - filterQueue: function(val) { - if (val.length == 0) { - $("#mainqueue .pvbar").show(); - return - } else { - } - val = val.toLowerCase(); - $("#mainqueue .pvbar").each(function(p, q) { - var txt = $(q).find(".listwords").text(); - var regex = new RegExp(val, 'ig'); - if (txt.match(regex)) { - $(q).show() - } else { - $(q).hide() - } + ftapi.events.on("authDisconnected", function () { + firetable.debug && console.log("disconnected"); + $("body").addClass("disconnected"); + $("#newchat").prop("disabled", true).blur(); }); - }, - muteToggle: function(zeroMute) { - var muted = localStorage["firetableMute"]; - var icon = ""; - firetable.debug && console.log('muted:', muted); - if (zeroMute) { - icon = ""; - muted = 0; - - } else if (typeof muted !== 'undefined') { - if (muted != "false") { - - if (muted == 0) { - $("#slider").slider("value", 80); - player.setVolume(80); - firetable.scwidget.setVolume(80); - localStorage["firetableVol"] = 80; - } else { - muted = parseInt(muted); - $("#slider").slider("value", muted); - player.setVolume(muted); - firetable.scwidget.setVolume(muted); - localStorage["firetableVol"] = muted; + ftapi.events.on("userBanned", function () { + firetable.debug && console.log("ban detected."); + if (document.getElementById("notice") == null) { + var usrname2use = ftapi.uid; + if (ftapi.users[ftapi.uid]) { + if (ftapi.users[ftapi.uid].username) usrname2use = ftapi.users[ftapi.uid].username; + } + $(".notice").attr("id", "notice"); + $("#troublemaker").text(usrname2use); } - muted = false; - } else { - icon = ""; + }); - muted = $("#slider").slider("value"); - $("#slider").slider('value', 0); - player.setVolume(0); - firetable.scwidget.setVolume(0); - localStorage["firetableVol"] = 0; + ftapi.events.on("userUnbanned", function () { + window.location.reload(); + }); - } - } else { - icon = ""; - - muted = $("#slider").slider("value"); - $("#slider").slider('value', 0); - player.setVolume(0); - firetable.scwidget.setVolume(0); - localStorage["firetableVol"] = 0; - } + firetable.ui.init(); +}; - if (muted) $("#volstatus").addClass('on'); - else $("#volstatus").removeClass('on'); - $("#volstatus i").html(icon); - localStorage["firetableMute"] = muted; - }, - pview: function(id, fromSearch, type, fromHist) { - if (firetable.preview == id) { - //already previewing this. stop and resume regular song - clearTimeout(firetable.ptimeout); - firetable.ptimeout = null; - $("#pv" + firetable.preview).html(""); - $("#pvbar" + firetable.preview).css("background-image", "none"); - clearInterval(firetable.movePvBar); - firetable.movePvBar = null; - firetable.preview = false; - //start regular song - var nownow = Date.now(); - var timeSince = nownow - firetable.song.started; - if (timeSince <= 0) timeSince = 0; - - var secSince = Math.floor(timeSince / 1000); - var timeLeft = firetable.song.duration - secSince; - if (firetable.song.type == 1) { - if (!firetable.preview) { - if (firetable.scLoaded) firetable.scwidget.pause(); - if (!firetable.disableMediaPlayback) player.loadVideoById(firetable.song.cid, secSince, "large"); +firetable.actions = { + dubtrackImport: function () { + $("#importDubResults").html("importing (0/" + firetable.dtImportList.length + ")..."); + $("#dubimportButton").hide(); + var listid = ftapi.actions.createList(firetable.dtImportName); + var name = firetable.dtImportName; + + $("#listpicker").append('"); + var trackarray = firetable.dtImportList; + for (var e = 0; e < trackarray.length; e++) { + var thetype = 1; + if (trackarray[e].type == "soundcloud") thetype = 2; + var numbo = e + 1; + $("#importDubResults").html("importing (" + numbo + "/" + firetable.dtImportList.length + ")..."); + if (numbo == firetable.dtImportList.length) + $("#importDubResults").html( + "Import complete! You can now select another file if you'd like to do another!" + ); + ftapi.actions.addToList(thetype, trackarray[e].name, trackarray[e].cid, listid); } - } else if (firetable.song.type == 2) { - if (!firetable.preview) { - if (firetable.ytLoaded) player.stopVideo(); - firetable.scSeek = timeSince; - if (!firetable.disableMediaPlayback) firetable.scwidget.load("http://api.soundcloud.com/tracks/" + firetable.song.cid, { - auto_play: true - }); + }, + localChatResponse: function (txt) { + if (txt.length) { + $("#chats").append('
' + txt + "
"); + firetable.utilities.scrollToBottom(); } - } - } else { - if (firetable.preview) { - $("#pv" + firetable.preview).html(""); - $("#pvbar" + firetable.preview).css("background-image", "none"); - } - - firetable.preview = id; - if (fromSearch) { - var cid = id.slice(5); - } else { - var cid = firetable.queue[id].cid; - } - - if (firetable.ptimeout != null) { - clearTimeout(firetable.ptimeout); - firetable.ptimeout = null; - } - if (firetable.movePvBar != null) { - clearInterval(firetable.movePvBar); - firetable.movePvBar = null; - } - firetable.pvCount = 0; - firetable.ptimeout = setTimeout(function() { - firetable.ptimeout = null; - $("#pv" + firetable.preview).html(""); - $("#pvbar" + firetable.preview).css("background-image", "none"); - clearInterval(firetable.movePvBar); - firetable.movePvBar = null; - firetable.pvCount = 0; - firetable.preview = false; - - //start regular song - var nownow = Date.now(); - var timeSince = nownow - firetable.song.started; - if (timeSince <= 0) timeSince = 0; - - var secSince = Math.floor(timeSince / 1000); - var timeLeft = firetable.song.duration - secSince; - if (firetable.song.type == 1) { - if (!firetable.preview) { - if (firetable.scLoaded) firetable.scwidget.pause(); - if (!firetable.disableMediaPlayback) player.loadVideoById(firetable.song.cid, secSince, "large"); - } - } else if (firetable.song.type == 2) { - if (!firetable.preview) { - if (firetable.ytLoaded) player.stopVideo(); - firetable.scSeek = timeSince; - if (!firetable.disableMediaPlayback) firetable.scwidget.load("http://api.soundcloud.com/tracks/" + firetable.song.cid, { - auto_play: true - }); - } + }, + logOut: function () { + ftapi.actions.logOut(); + firetable.debug && console.log("logout"); + }, + showLoginScreen: function () { + $("#cardCaseButton").hide(); + $("#loggedInName").hide(); + $("#logOutButton").hide().off(); + $("#mainGrid").removeClass().addClass("login"); + $("#grab").css("display", "none"); + if (firetable.loginForm && !$("#login").html()) { + $("#mainGrid").append('
' + firetable.loginForm + "
"); + + firetable.ui.loginEventsInit(); } - }, 30 * 1000); - $("#pv" + id).html(""); - firetable.movePvBar = setInterval(function() { - var pcnt = (firetable.pvCount / 29) * 100; - firetable.pvCount += 0.2; - var pvcolr = "#222"; - if (fromHist) pvcolr = "#222"; - $("#pvbar" + firetable.preview).css("background-image", "linear-gradient(90deg, rgba(244, 129, 11, 0.267) " + pcnt + "%, " + pvcolr + " " + pcnt + "%)"); - }, 200); - if (type == 1) { - if (firetable.scLoaded) firetable.scwidget.pause(); - if (!firetable.disableMediaPlayback) player.loadVideoById(cid, 0, "large") - } else if (type == 2) { - if (firetable.ytLoaded) player.stopVideo(); - firetable.scSeek = 0; - if (!firetable.disableMediaPlayback) firetable.scwidget.load("http://api.soundcloud.com/tracks/" + cid, { - auto_play: true + }, + logIn: function (email, password) { + firetable.debug && console.log("login"); + ftapi.actions.logIn(email, password, function (error) { + var errorCode = error.code; + var errorMessage = error.message; + if (errorCode === "auth/wrong-password") { + alert("Wrong password."); + } else { + alert(errorMessage); + } + firetable.debug && console.log("log in error:", error); }); - } - - - } + }, + loggedIn: function (user) { + firetable.debug && console.log("user signed in!"); + if ($("#login").html()) { + firetable.loginForm = $("#login").html(); + firetable.ui.loginEventsDestroy(); + $("#login").remove(); + } - }, - mergeLists: function(source, dest, sourceName) { - if (source == dest) { - //source and dest are the same, let's remove the duplicates - firetable.actions.removeDupesFromQueue(); - return; - } - if (dest == -1) { - // create new list if needed - var newname = firetable.utilities.format_date(Date.now()) + " Copy of " + sourceName; - var dest = ftapi.actions.createList(newname); - $("#listpicker").append(""); - } - ftapi.actions.mergeLists(source, dest, function() { - $("#mergeCompleted").show(); - $("#mergeHappening").hide(); - }); - }, - queueFromLink: function(link) { - if (link.match(/youtube.com\/watch/)) { - //youtube - firetable.debug && console.log("yt"); - - function getQueryStringValue(str, key) { - return unescape(str.replace(new RegExp("^(?:.*[&\\?]" + escape(key).replace(/[\.\+\*]/g, "\\$&") + "(?:\\=([^&]*))?)?.*$", "i"), "$1")); - } - var therealid = getQueryStringValue(link, "v"); - if (therealid) { - function keyWordsearch() { - gapi.client.setApiKey(ftconfigs.youtubeKey); - gapi.client.load('youtube', 'v3', function() { - makeRequest(); - }); + if (ftapi.users[ftapi.uid]) { + if (ftapi.users[ftapi.uid].username) { + $("#loggedInName").text(ftapi.users[ftapi.uid].username); + } else { + $("#loggedInName").text(user.uid); + } + } else { + $("#loggedInName").text(user.uid); } - function makeRequest() { - var request = gapi.client.youtube.videos.list({ - id: therealid, - part: 'snippet', - maxResults: 1 - }); - request.execute(function(response) { - firetable.debug && console.log('queue from link:', response); - if (response.result) { - if (response.result.items) { - if (response.result.items.length) { - var goodtitle = response.result.items[0].snippet.title; - var yargo = response.result.items[0].snippet.title.split(" - "); - var sartist = yargo[0]; - var stitle = yargo[1]; - if (!stitle) { - // yt title not formatted artist - title. use uploader name instead as artist - stitle = sartist; - sartist = response.result.items[0].snippet.channelTitle.replace(" - Topic", ""); - } - goodtitle = sartist + " - " + stitle; - firetable.actions.queueTrack(response.result.items[0].id, goodtitle, 1); + ftapi.lookup.allLists(function (allPlaylists) { + $("#listpicker").off("change"); + $("#listpicker").html( + '' + ); + for (var key in allPlaylists) { + if (allPlaylists.hasOwnProperty(key)) { + $("#listpicker").append( + '" + ); } - } } - }) - } - keyWordsearch(); - } - } else if (link.match(/soundcloud.com/)) { - //soundcloud - firetable.debug && console.log("sc"); - var getComments = function(track) { - return SC.get("tracks/" + track.id); - }; - - firetable.actions.resolveSCLink(link, function(tracks) { - if (tracks) { - var yargo = tracks.title.split(" - "); - var sartist = yargo[0]; - var stitle = yargo[1]; - if (!stitle) { - stitle = sartist; - sartist = tracks.user.username; - } - var goodTitle = sartist + " - " + stitle; - firetable.actions.queueTrack(tracks.id, goodTitle, 2); + ftapi.lookup.selectedList(function (selectedList) { + $("#listpicker").val(selectedList).change(); + $("#listpicker").change(function () { + var val = $("#listpicker").val(); + if (val == "1") { + //ADD PLAYLIST SCREEN + $("#mainqueuestuff").css("display", "none"); + $("#filterMachine").css("display", "none"); + $("#addbox").css("display", "none"); + $("#cancelqsearch").hide(); + $("#qControlButtons").hide(); + + $("#plmanager").css("display", "flex"); + } else if (val != ftapi.selectedListThing) { + //LOAD SELECTED LIST + //change selected list in user obj + $("#mainqueuestuff").css("display", "block"); + $("#filterMachine").css("display", "block"); + $("#addbox").css("display", "none"); + $("#cancelqsearch").hide(); + $("#qControlButtons").show(); + + $("#plmanager").css("display", "none"); + ftapi.actions.switchList(val); + } else { + //you selected the thing you already had selected. + $("#mainqueuestuff").css("display", "block"); + $("#filterMachine").css("display", "block"); + $("#addbox").css("display", "none"); + $("#cancelqsearch").hide(); + $("#qControlButtons").show(); + $("#plmanager").css("display", "none"); + } + }); + }); + }); + $("#cardCaseButton").show(); + $("#loggedInName").show(); + $("#logOutButton").show().on("click", firetable.actions.logOut); + firetable.debug && console.log("remove login class from mainGrid"); + $("#mainGrid").removeClass().addClass("mmusrs"); + $("#grab").css("display", "inline-block"); + }, + cardCase: function () { + $("#cardsMain").html(""); + ftapi.lookup.cardCollection(function (data) { + for (var key in data) { + var childData = data[key]; + firetable.debug && console.log("card:", childData); + $("#cardsMain").append( + 'Gift to DJShare In Chat' + ); + firetable.actions.displayCard(childData, key); + } + }); + }, + chatCard: function (cardid) { + ftapi.actions.sendChat("Check out my card...", cardid); + }, + giftCard: function (cardid) { + ftapi.actions.sendChat("!giftcard :gift:", cardid); + $("#caseCardSpot" + cardid).remove(); + }, + displayCard: function (data, chatid) { + firetable.debug && console.log("display card"); + var defaultScheme = false; + if (data.colors) { + if (data.colors.color == "#fff" || data.colors.color == "#7f7f7f") { + data.colors.color = firetable.orange; + data.colors.txt = "#000"; + defaultScheme = true; + } } - }); - //SC.resolve(link).then(getComments).then(listComments); - } - }, - resolveSCLink: function(link, callback) { - var importantStuff = link.replace("https://soundcloud.com/", ""); - importantStuff = importantStuff.replace("http://soundcloud.com/", ""); - $.ajax({ - url: "https://thompsn.com/resolvesc/?q=" + importantStuff, - type: 'GET', - dataType: 'json', - success: function(res) { - console.log(res); - callback(res.response); - } - }); - }, - scGet: function(type, q, callback) { - $.ajax({ - url: "https://thompsn.com/soundcloud/?type=" + type + "&q=" + q, - type: 'GET', - dataType: 'json', - success: function(res) { - console.log(res); - callback(res.response); - } - }); - }, - updateQueue: function() { - //this fires when someone drags a song to a new spot in the queue - var arr = $('#mainqueue > div').map(function() { - var theid = this.id; - var idraw = theid.slice(5); - return idraw; - }).get(); - ftapi.actions.reorderList(arr, firetable.preview, function(changePV) { - if (changePV) firetable.preview = changePV; - }); - }, - shuffleQueue: function() { - ftapi.actions.shuffleList(firetable.preview, function(changePV) { - if (changePV) firetable.preview = changePV; - }); - }, - removeDupesFromQueue: function() { - ftapi.actions.removeDuplicatesFromList(); - $("#mergeCompleted").show(); - $("#mergeHappening").hide(); - }, - editTagsPrompt: function(songid) { - var song = firetable.queue[songid]; - var $pvbar = $('#mainqueue .pvbar[data-key="' + songid + '"]'); - $('#mainqueue .pvbar.editing').removeClass('editing'); - $('.tagPromptBox').remove(); - $pvbar.addClass('editing'); - var $tags = $tagEditorTemplate.clone().appendTo($pvbar); - $tags.find(".tagMachine").val(song.name); - if (song.type == 1) { - $tags.find(".tagSongLink").attr("href", "https://youtube.com/watch?v=" + song.cid); - } else if (song.type == 2) { - firetable.actions.scGet('tracks', song.cid, function(tracks) { - if (tracks.permalink_url) { - $tags.find(".tagSongLink").attr("href", tracks.permalink_url); - } else { - $tags.find(".tagSongLink").attr("href", "http://howtojointheindiediscothequewaitlist.com/ThisSongIsBroken?thanks=true"); - } - }); - } + if (data.image == "img/idlogo.png" && ftconfigs.defaultAlbumArtUrl.length) + data.image = ftconfigs.defaultAlbumArtUrl; + var canvas = document.getElementById("cardMaker" + chatid); + + if (canvas.getContext) { + var ctx = canvas.getContext("2d"); + ctx.clearRect(0, 0, canvas.width, canvas.height); + ctx.fillStyle = "#000"; + ctx.fillRect(0, 0, 225, 300); + + ctx.fillStyle = data.colors.color; + if (defaultScheme) ctx.fillStyle = "#fff"; + ctx.fillRect(1, 30, 223, 175); + + var grd = ctx.createLinearGradient(0, 0, 0, 175); + grd.addColorStop(0, "rgba(0, 0, 0, 0.75)"); + grd.addColorStop(1, "rgba(0, 0, 0, 0.55)"); + + // Fill with gradient + ctx.fillStyle = grd; + ctx.fillRect(1, 30, 223, 175); + + ctx.fillStyle = data.colors.color; + ctx.fillRect(1, 205, 223, 10); + + ctx.fillStyle = "#333333"; + //ctx.fillRect(1, 205, 223, 1); + // ctx.fillRect(1, 215, 223, 1); + + ctx.fillStyle = "#151515"; + ctx.fillRect(1, 216, 223, 75); + + //text go + ctx.fillStyle = "#eee"; + ctx.font = "700 11px Helvetica, Arial, sans-serif"; + ctx.fillText(data.djname, 10, 20); + + ctx.font = "400 8px Helvetica, Arial, sans-serif"; + ctx.textAlign = "center"; + ctx.fillText( + "Printed " + firetable.utilities.format_date(data.date) + " | " + ftconfigs.roomNameShort, + 112.5, + 299 + ); + + ctx.font = "700 10px Helvetica, Arial, sans-serif"; + ctx.textAlign = "left"; + var linez = firetable.utilities.wrapText(ctx, data.title, 66, 240, 160, 15); + firetable.debug && console.log("linez:", linez); + ctx.font = "400 8px Helvetica, Arial, sans-serif"; + ctx.textAlign = "left"; + firetable.utilities.wrapText(ctx, data.artist, 66, 253 + 15 * linez, 160, 15); + + ctx.fillStyle = data.colors.txt; + ctx.font = "400 9px Helvetica, Arial, sans-serif"; + ctx.textAlign = "center"; + ctx.fillText("Card No. " + data.cardnum + " | DJ Card | Max Operating Temp " + data.temp + "°", 112.5, 214); + ctx.beginPath(); + ctx.arc(205, 15, 12, 0, 2 * Math.PI, false); + ctx.fillStyle = data.colors.color; + ctx.fill(); + + ctx.fillStyle = data.colors.txt; + ctx.font = "700 15px Helvetica, Arial, sans-serif"; + ctx.textAlign = "left"; + ctx.fillText(data.num, 200.5, 20); + + var doImages = function () { + var picboy = new Image(); + picboy.xvalue = 0; + picboy.onload = function () { + ctx.drawImage(this, 20, 30, 175, 175); + var picboy2 = new Image(); + picboy2.xvalue = 0; + picboy2.onload = function () { + var heighta = 50; + if (data.image.match(/ytimg.com/g)) heighta = 28; + ctx.drawImage(this, 10, 230, 50, heighta); + ctx = null; + }; + picboy2.src = data.image; + }; + picboy.src = "https://indiediscotheque.com/robots/" + data.djid + data.djname + ".png?size=175x175"; + }; - firetable.debug && console.log('edit tags song id:', songid); - firetable.songToEdit = { - song: song, - key: songid - }; - }, - importList(id, name, type) { - //time to IMPORT SOME LISTS! - $("#overlay").removeClass('show'); - $("#importResults").html(""); - $("#plMachine").val(""); - if (type == 1) { - //youtube - var finalList = []; - - function keyWordsearch(pg) { - gapi.client.setApiKey(ftconfigs.youtubeKey); - gapi.client.load('youtube', 'v3', function() { - makeRequest(pg); + // special styles + + if (data.special) { + if (data.special == "id8") { + ctx.fillStyle = data.colors.color; + ctx.fillRect(1, 30, 223, 10); + + ctx.fillStyle = "#333333"; + // ctx.fillRect(1, 29, 223, 1); + // ctx.fillRect(1, 40, 223, 1); + + ctx.fillStyle = data.colors.txt; + ctx.font = "400 10px Helvetica, Arial, sans-serif"; + ctx.textAlign = "center"; + ctx.fillText("Celebrating 8 Years of Indie Discotheque", 112.5, 38); + + var cake = new Image(); + cake.xvalue = 0; + cake.onload = function () { + ctx.drawImage(this, 10, 50, 35, 35); + var eight = new Image(); + eight.xvalue = 0; + eight.onload = function () { + ctx.drawImage(this, 180, 50, 35, 35); + doImages(); + }; + eight.src = "img/8.png"; + }; + cake.src = "img/cake.png"; + } else if (data.special == "id9") { + ctx.fillStyle = data.colors.color; + ctx.fillRect(1, 30, 223, 10); + + ctx.fillStyle = "#333333"; + // ctx.fillRect(1, 29, 223, 1); + // ctx.fillRect(1, 40, 223, 1); + + ctx.fillStyle = data.colors.txt; + ctx.font = "400 10px Helvetica, Arial, sans-serif"; + ctx.textAlign = "center"; + ctx.fillText("Celebrating 9 Years of Indie Discotheque", 112.5, 38); + + var cake = new Image(); + cake.xvalue = 0; + cake.onload = function () { + ctx.drawImage(this, 5, 50, 45, 45); + var eight = new Image(); + eight.xvalue = 0; + eight.onload = function () { + ctx.save(); + ctx.translate(75 * 0.5, 75 * 0.5); + ctx.rotate(0.959931); + ctx.translate(-75 * 0.5, -75 * 0.5); + + ctx.drawImage(this, 125, -81, 75, 75); + ctx.restore(); + var picboy = new Image(); + picboy.xvalue = 0; + picboy.onload = function () { + ctx.drawImage(this, 25, 40, 170, 170); + var picboy2 = new Image(); + picboy2.xvalue = 0; + picboy2.onload = function () { + var heighta = 50; + if (data.image.match(/ytimg.com/g)) heighta = 28; + ctx.drawImage(this, 10, 230, 50, heighta); + ctx = null; + }; + picboy2.src = data.image; + }; + picboy.src = "img/id9.png"; + }; + eight.src = + "https://indiediscotheque.com/robots/" + data.djid + data.djname + ".png?size=110x110"; + }; + cake.src = "img/arnold.png"; + } + } else { + doImages(); + } + } + }, + showCard: function (cardid, chatid) { + // let's SHOW A CARD + ftapi.lookup.card(cardid, function (data) { + firetable.actions.displayCard(data, chatid); }); - } - - function makeRequest(pg) { - if (pg) { - var request = gapi.client.youtube.playlistItems.list({ - playlistId: id, - maxResults: 50, - part: "snippet", - pageToken: pg - }); + }, + filterQueue: function (val) { + if (val.length == 0) { + $("#mainqueue .pvbar").show(); + return; } else { - var request = gapi.client.youtube.playlistItems.list({ - playlistId: id, - maxResults: 50, - part: "snippet" - }); } - request.execute(function(response) { - if (response.items.length) { - for (var idx = 0; idx < response.items.length; idx++) { - finalList.push(response.items[idx]); - } - } - if (response.nextPageToken) { - if (response.nextPageToken != "") keyWordsearch(response.nextPageToken); - } else { - firetable.debug && console.log(finalList); - var listid = ftapi.actions.createList(name); - $("#listpicker").append(""); - for (var i = 0; i < finalList.length; i++) { - var goodTitle = finalList[i].snippet.title; - // can't use youtube uploader name to fix tags here because YOUTUBE DECIDED NOT TO INCLUDE THAT INFORMATION >:o - if (goodTitle !== "Private video" && goodTitle !== "Deleted video") { - ftapi.actions.addToList(1, goodTitle, finalList[i].snippet.resourceId.videoId, listid); - } + val = val.toLowerCase(); + $("#mainqueue .pvbar").each(function (p, q) { + var txt = $(q).find(".listwords").text(); + var regex = new RegExp(val, "ig"); + if (txt.match(regex)) { + $(q).show(); + } else { + $(q).hide(); } - } - }) - } - keyWordsearch(); - - } else if (type == 2) { - firetable.actions.scGet('playlists', id, function(listinfo) { - firetable.debug && console.log('sc tracks:', listinfo.tracks); - var listid = ftapi.actions.createList(name); - $("#listpicker").append(""); - for (var i = 0; i < listinfo.tracks.length; i++) { - if (listinfo.tracks[i].title) { - var yargo = listinfo.tracks[i].title.split(" - "); - var sartist = yargo[0]; - var stitle = yargo[1]; - if (!stitle) { - stitle = sartist; - sartist = listinfo.tracks[i].user.username; - } - var goodTitle = sartist + " - " + stitle; - } else { - var goodTitle = "Unknown"; - } - - ftapi.actions.addToList(2, goodTitle, listinfo.tracks[i].id, listid); - } - }); - } - }, - bumpSongInQueue: function(songid) { - ftapi.actions.moveTrackToTop(songid, firetable.preview, function(changePV) { - if (changePV) firetable.preview = changePV; - }); - }, - signUp: function(email, password, username) { - firetable.debug && console.log("signup"); - ftapi.actions.signUp(email, password, username, function(error) { - alert(error); - }); - }, - deleteSong: function(id) { - ftapi.actions.deleteTrack(id); - }, - uidLookup: function(name) { - var match = false; - var usrs = ftapi.users; - for (var key in usrs) { - if (usrs.hasOwnProperty(key)) { - if (ftapi.users[key].username) { - if (ftapi.users[key].username == name) { - match = key; - } - } - } - } - if (!match && ftapi.users[name]) match = name; - return match; - }, - grab: function() { - if (firetable.song.cid != 0) { - var title = firetable.song.artist + " - " + firetable.song.title; - firetable.actions.queueTrack(firetable.song.cid, title, firetable.song.type, true); - } - }, - unban: function(userid) { - ftapi.actions.unbanUser(userid); - }, - reloadtrack: function() { - $('#reloadtrack').addClass('on working'); - //start regular song - var nownow = Date.now(); - var timeSince = nownow - firetable.song.started; - if (timeSince <= 0) timeSince = 0; - var secSince = Math.floor(timeSince / 1000); - var timeLeft = firetable.song.duration - secSince; - if (firetable.song.type == 1) { - if (!firetable.preview) { - if (firetable.scLoaded) firetable.scwidget.pause(); - if (!firetable.disableMediaPlayback) player.loadVideoById(firetable.song.cid, secSince, "large"); - } - } else if (firetable.song.type == 2) { - if (!firetable.preview) { - if (firetable.ytLoaded) player.stopVideo(); - firetable.scSeek = timeSince; - if (!firetable.disableMediaPlayback) firetable.scwidget.load("http://api.soundcloud.com/tracks/" + firetable.song.cid, { - auto_play: true - }, function() { - $('#reloadtrack').removeClass('on working'); }); - } - } - }, - queueTrack: function(cid, name, type, tobottom) { - var info = { - type: type, - name: name, - cid: cid - }; - $("#apv" + type + cid).find(".material-icons").text("check"); - $("#apv" + type + cid).css("color", firetable.orange); - $("#apv" + type + cid).css("pointer-events", "none"); - setTimeout(function() { - $("#apv" + type + cid).find(".material-icons").text("playlist_add"); - $("#apv" + type + cid).removeAttr("style"); - }, 3000); - - var cuteid = ftapi.actions.addToList(type, name, cid, false, function() { - firetable.debug && console.log('queue track id:', cuteid); - if (!tobottom) firetable.actions.bumpSongInQueue(cuteid); - }); + }, + muteToggle: function (zeroMute) { + var muted = localStorage["firetableMute"]; + var icon = ""; + firetable.debug && console.log("muted:", muted); + if (zeroMute) { + icon = ""; + muted = 0; + } else if (typeof muted !== "undefined") { + if (muted != "false") { + if (muted == 0) { + $("#slider").slider("value", 80); + player.setVolume(80); + firetable.scwidget.setVolume(80); + localStorage["firetableVol"] = 80; + } else { + muted = parseInt(muted); + $("#slider").slider("value", muted); + player.setVolume(muted); + firetable.scwidget.setVolume(muted); + localStorage["firetableVol"] = muted; + } + muted = false; + } else { + icon = ""; - if (firetable.preview) { - if (firetable.preview.slice(0, 5) == "ytcid" || firetable.preview.slice(0, 5) == "sccid") { - $("#pv" + firetable.preview).html(""); - clearTimeout(firetable.ptimeout); - firetable.ptimeout = null; - $("#pvbar" + firetable.preview).css("background-image", "none"); - clearInterval(firetable.movePvBar); - firetable.movePvBar = null; - firetable.preview = false; - //start regular song - var nownow = Date.now(); - var timeSince = nownow - firetable.song.started; - if (timeSince <= 0) timeSince = 0; - var secSince = Math.floor(timeSince / 1000); - var timeLeft = firetable.song.duration - secSince; - if (firetable.song.type == 1) { - if (!firetable.preview) { - if (firetable.scLoaded) firetable.scwidget.pause(); - if (!firetable.disableMediaPlayback) player.loadVideoById(firetable.song.cid, secSince, "large"); - } - } else if (firetable.song.type == 2) { - if (!firetable.preview) { - if (firetable.ytLoaded) player.stopVideo(); - firetable.scSeek = timeSince; - if (!firetable.disableMediaPlayback) firetable.scwidget.load("http://api.soundcloud.com/tracks/" + firetable.song.cid, { - auto_play: true - }); - } + muted = $("#slider").slider("value"); + $("#slider").slider("value", 0); + player.setVolume(0); + firetable.scwidget.setVolume(0); + localStorage["firetableVol"] = 0; + } + } else { + icon = ""; + + muted = $("#slider").slider("value"); + $("#slider").slider("value", 0); + player.setVolume(0); + firetable.scwidget.setVolume(0); + localStorage["firetableVol"] = 0; } - } - } - $("#mainqueuestuff").css("display", "block"); - $("#filterMachine").css("display", "block"); - $("#addbox").css("display", "none"); - $("#cancelqsearch").hide(); - $("#qControlButtons").show(); - } -}; -firetable.emojis = { - h: function() { - $(".pickerResult").show(); - $("#pickerResults h3").show(); - }, - n: function(p, q) { - var e = p.attr("data-alternative-name"); - return ($(p).text().toLowerCase().indexOf(q) >= 0) || (e != null && e.toLowerCase().indexOf(q) >= 0) - }, - sec: function(sec) { - firetable.debug && console.log('emoji sec:', sec); - var selectedSec = $("#pickerNav > .on"); - var thething = sec.substr(1); - console.log(thething); - if (selectedSec.length) { - firetable.debug && console.log("already selected sec"); - if (selectedSec[0].id == sec) { - firetable.debug && console.log("toggle selected... back to FULL LIST"); - $("#" + selectedSec[0].id).removeClass("on"); - $("#pickerContents div").show(); - } else { - //new sec selected - $("#" + selectedSec[0].id).removeClass("on"); - $("#" + selectedSec[0].id.substr(1)).hide(); - $("#" + sec).addClass("on"); - $("#" + thething).show(); - } - } else { - firetable.debug && console.log("first select"); - $("#" + sec).addClass("on"); - $("#pickerContents div").hide(); - $("#" + thething).show(); - } - }, - niceSearch: function(val) { - if (val.length == 0) { - firetable.emojis.h(); - return - } else { - var isvisible = $("#pickerResults h3").is(":visible"); - if (isvisible) $("#pickerResults h3").hide(); - } - val = val.toLowerCase(); - $(".pickerResult").each(function(p, q) { - if (firetable.emojis.n($(q), val)) { - $(q).show() - } else { - $(q).hide() - } - }); - // simplebar scroll update? - } -}; + if (muted) $("#volstatus").addClass("on"); + else $("#volstatus").removeClass("on"); + $("#volstatus i").html(icon); + localStorage["firetableMute"] = muted; + }, + pview: function (id, fromSearch, type, fromHist) { + if (firetable.preview == id) { + //already previewing this. stop and resume regular song + clearTimeout(firetable.ptimeout); + firetable.ptimeout = null; + $("#pv" + firetable.preview).html(""); + $("#pvbar" + firetable.preview).css("background-image", "none"); + clearInterval(firetable.movePvBar); + firetable.movePvBar = null; + firetable.preview = false; + //start regular song + var nownow = Date.now(); + var timeSince = nownow - firetable.song.started; + if (timeSince <= 0) timeSince = 0; + + var secSince = Math.floor(timeSince / 1000); + var timeLeft = firetable.song.duration - secSince; + if (firetable.song.type == 1) { + if (!firetable.preview) { + if (firetable.scLoaded) firetable.scwidget.pause(); + if (!firetable.disableMediaPlayback) player.loadVideoById(firetable.song.cid, secSince, "large"); + } + } else if (firetable.song.type == 2) { + if (!firetable.preview) { + if (firetable.ytLoaded) player.stopVideo(); + firetable.scSeek = timeSince; + if (!firetable.disableMediaPlayback) + firetable.scwidget.load("http://api.soundcloud.com/tracks/" + firetable.song.cid, { + auto_play: true, + }); + } + } + } else { + if (firetable.preview) { + $("#pv" + firetable.preview).html(""); + $("#pvbar" + firetable.preview).css("background-image", "none"); + } -firetable.utilities = { - getEmojiMap: function() { - firetable.emojiMap = {}; - (async function() { - urls = [ - "https://unpkg.com/unicode-emoji-json@0.3.0/data-by-group.json", - "https://unpkg.com/emojilib@3.0.4/dist/emoji-en-US.json" - ]; - duhdoymojis = { - '☕': ['coffee'], - '🚩': ['triangular_flag_on_post'], - '👋': ['wave'], - '🆔': ['id'], - '📈': ['chart_with_upwards_trend'], - '🚨': ['rotating_light'], - '🌧️': ['rain'], - '✅': ['white_check_mark'], - '🛰️': ['artificial_satellite'], - '🍵': ['tea'], - '❤️': ['heart'], - '🌊': ['ocean'], - '💦': ['splash'], - '💩': ['poop'], - '💯': ['100'], - '💨': ['dash'], - '🤡': ['clown'], - '🥱': ['yawn'], - '🙂': ['smile'], - '👌': ['ok'], - '💥': ['boom'], - '🍺': ['beer'], - '🍻': ['beers'], - '🥃': ['whiskey'], - '🌨️': ['snow'], - }; - try { - const requests = urls.map((url) => fetch(url)); - const responses = await Promise.all(requests); - const promises = responses.map((response) => response.json()); - const data = await Promise.all(promises); - for (const [category, emojisArr] of Object.entries(data[0])) { - let catid = category.replace(/[\s&]+/g, '_').toLowerCase(); - $('#pickerNav').append('' + emojisArr[0].emoji + ''); - $('#pickerContents').append('

' + category + '

'); - for (let i in emojisArr) { - firetable.emojiMap[emojisArr[i].slug] = emojisArr[i].emoji; - var words = ""; - words += (data[1][emojisArr[i].emoji] !== undefined) ? data[1][emojisArr[i].emoji].join(',') : ""; - words += (duhdoymojis[emojisArr[i].emoji] !== undefined) ? ','+duhdoymojis[emojisArr[i].emoji].join(',') : ""; - $("#picker" + catid).append('' + emojisArr[i].emoji + ''); - } - for (let i in duhdoymojis) { - for (let j in duhdoymojis[i]) { - firetable.emojiMap[duhdoymojis[i][j]] = i; - } - } - } - twemoji.parse(document.getElementById("pickerNav")); - } catch (err) {}; - })() - }, - hexToRGB: function(hex) { - var shorthandRegex = /^#?([a-f\d])([a-f\d])([a-f\d])$/i; - hex = hex.replace(shorthandRegex, function(m, r, g, b) { - return r + r + g + g + b + b; - }); + firetable.preview = id; + if (fromSearch) { + var cid = id.slice(5); + } else { + var cid = firetable.queue[id].cid; + } - var result = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(hex); - return result ? { - r: parseInt(result[1], 16), - g: parseInt(result[2], 16), - b: parseInt(result[3], 16) - } : null; - }, - wrapText: function(context, text, x, y, maxWidth, lineHeight) { - var words = text.split(' '); - var line = ''; - var lines = 0; - - for (var n = 0; n < words.length; n++) { - var testLine = line + words[n] + ' '; - var metrics = context.measureText(testLine); - var testWidth = metrics.width; - if (testWidth > maxWidth && n > 0) { - context.fillText(line, x, y); - line = words[n] + ' '; - y += lineHeight; - lines++; - } else { - line = testLine; - } - } - context.fillText(line, x, y); - return lines; - }, - emojiShortnamestoUnicode: function(str) { - var res = str.replace(/\:(.*?)\:/g, function(x) { - var response = x; - var shortname = x.replace(/\:/g, ""); - if (firetable.emojiMap[shortname]) { - response = "" + firetable.emojiMap[shortname] + ""; - } else if (shortname == "rohn") { - response = ""; - } - return response; - }); - return res; - }, - playSound: function(filename) { - if (firetable.playBadoop) { - document.getElementById("audilert").setAttribute('src', filename + ".mp3"); - } - }, - desktopNotify: function(chatData, namebo) { - if (Notification) { - if (Notification.permission !== "granted") { - Notification.requestPermission(); - } else { - var notification = new Notification(namebo, { - icon: "https://indiediscotheque.com/robots/" + chatData.id + namebo + ".png?size=110x110", - body: chatData.txt, - }); - } - } - }, - screenUp: function() { - $('body').removeClass('screen'); - }, - screenDown: function() { - $('body').addClass('screen'); - }, - isChatPrettyMuchAtBottom: function() { - var scrollable = chatScroll.contentEl.scrollHeight - chatScroll.el.clientHeight; - var scrolled = chatScroll.contentWrapperEl.scrollTop; - console.log('near bottom?', scrollable, scrolled); - return (Math.abs(scrollable - scrolled) <= 25); - }, - scrollToBottom: function() { - chatScroll.contentWrapperEl.scrollTop = chatScroll.contentEl.scrollHeight; - }, - htmlEscape: function(s, preserveCR) { - preserveCR = preserveCR ? ' ' : '\n'; - return ('' + s) /* Forces the conversion to string. */ - .replace(/&/g, '&') /* This MUST be the 1st replacement. */ - .replace(/'/g, '\\'') /* The 4 other predefined entities, required. */ - .replace(/"/g, '"') - .replace(//g, '>') - /* - You may add other replacements here for HTML only - (but it's not necessary). - Or for XML, only if the named entities are defined in its DTD. - */ - .replace(/\r\n/g, preserveCR) /* Must be before the next replacement. */ - .replace(/[\r\n]/g, preserveCR);; - }, - format_date: function(d) { - - var date = new Date(d); - - var month = date.getMonth() + 1; - var day = date.getDate(); - var year = date.getFullYear(); - - var formatted_date = month + "/" + day + "/" + year; - return formatted_date; - }, - format_time: function(d) { - var date = new Date(d); - - var hours1 = date.getHours(); - var ampm = "am"; - var hours = hours1; - if (hours1 >= 12) { - ampm = "pm"; - if (hours !== 12) hours = hours1 - 12; - } - if (hours == 0) hours = 12; - var minutes = date.getMinutes(); - var min = ""; - if (minutes > 9) { - min += minutes; - } else { - min += "0" + minutes; - } - return hours + ":" + min + "" + ampm; - }, - debounce(func, wait, immediate) { - var timeout; - return function() { - var context = this, - args = arguments; - var later = function() { - timeout = null; - if (!immediate) func.apply(context, args); - }; - var callNow = immediate && !timeout; - clearTimeout(timeout); - timeout = setTimeout(later, wait); - if (callNow) func.apply(context, args); - }; - }, - chatAt: function(element) { - element.bind("click", function() { - console.log(element); - var nameToAt; - if (element[0].className == "prson") { - nameToAt = $(this).find(".prsnName").text(); - } else if (element[0].className == "botson") { - nameToAt = $(this).next(".chatContent").find(".chatName").text(); - } else if (element[0].className == "chatName") { - nameToAt = $(this).text(); - } - $("#newchat").val(function(i, val) { - return val + "@" + nameToAt + " "; - }).focus(); - }) - }, - initAtLand: function() { - firetable.atLand = true; - firetable.atString = ""; - firetable.atUsers = ["everyone"]; - for (var user in ftapi.users) { - firetable.atUsers.push(ftapi.users[user].username); - } - firetable.atUsersFiltered = firetable.atUsers.sort(); - }, - updateAtLand: function() { - firetable.atUsersFiltered = firetable.atUsers.filter(user => user.toLowerCase().startsWith(firetable.atString.toLowerCase())).sort(); - $('#atPicker').html(''); - if (firetable.atUsersFiltered.length) { - for (var user of firetable.atUsersFiltered) { - $('
').appendTo('#atPicker'); - } - } else { - $('
No users match
').appendTo('#atPicker'); - } - }, - chooseAt: function(atPeep) { - var $chatText = $('#newchat'); - if (firetable.atString.length > 0) $chatText.val($chatText.val().slice(0, firetable.atString.length * -1)); - $chatText.val($chatText.val() + atPeep + " "); - firetable.utilities.exitAtLand(); - }, - exitAtLand: function() { - firetable.atLand = false; - firetable.atUsersFiltered = []; - firetable.atString = ""; - $('#atPicker').removeClass('show').html(''); - } -}; + if (firetable.ptimeout != null) { + clearTimeout(firetable.ptimeout); + firetable.ptimeout = null; + } + if (firetable.movePvBar != null) { + clearInterval(firetable.movePvBar); + firetable.movePvBar = null; + } + firetable.pvCount = 0; + firetable.ptimeout = setTimeout(function () { + firetable.ptimeout = null; + $("#pv" + firetable.preview).html(""); + $("#pvbar" + firetable.preview).css("background-image", "none"); + clearInterval(firetable.movePvBar); + firetable.movePvBar = null; + firetable.pvCount = 0; + firetable.preview = false; -firetable.ui = { - textToLinks: function(text, themeBox) { - var re = /(\b(https?|ftp|file):\/\/[-A-Z0-9+&@#\/%?=~_|!:,.;]*[-A-Z0-9+&@#\/%=~_|])/ig; - if (firetable.showImages && !themeBox) re = /(https?:\/\/(?![/|.|\w|\s|-]*(?:jpe?g|png|gif))[^" ]+)/g; - return text.replace(re, "$1"); - - return text; - }, - dubtrackImportFileSelect: function(evt) { - var files = evt.target.files; // FileList object - var file = files[0]; - // read the file contents - var reader = new FileReader(); - reader.readAsText(file); - reader.onload = function(event) { - try { - var allthestuff = event.currentTarget.result; - console.log(allthestuff); - firetable.dtImportName = firetable.ui.strip(allthestuff.split('

')[1].split('

')[0]); - var hams = allthestuff.split('
  • (.*)<\/li>/gm; - var matches = thingsRegex.exec(hams[i]) - var type = matches[2]; - var cid = matches[4]; - var name = firetable.ui.strip(matches[5]); - firetable.dtImportList.push({ - type: type, - cid: cid, - name: name - }); + //start regular song + var nownow = Date.now(); + var timeSince = nownow - firetable.song.started; + if (timeSince <= 0) timeSince = 0; + + var secSince = Math.floor(timeSince / 1000); + var timeLeft = firetable.song.duration - secSince; + if (firetable.song.type == 1) { + if (!firetable.preview) { + if (firetable.scLoaded) firetable.scwidget.pause(); + if (!firetable.disableMediaPlayback) + player.loadVideoById(firetable.song.cid, secSince, "large"); + } + } else if (firetable.song.type == 2) { + if (!firetable.preview) { + if (firetable.ytLoaded) player.stopVideo(); + firetable.scSeek = timeSince; + if (!firetable.disableMediaPlayback) + firetable.scwidget.load("http://api.soundcloud.com/tracks/" + firetable.song.cid, { + auto_play: true, + }); + } + } + }, 30 * 1000); + $("#pv" + id).html(""); + firetable.movePvBar = setInterval(function () { + var pcnt = (firetable.pvCount / 29) * 100; + firetable.pvCount += 0.2; + var pvcolr = "#222"; + if (fromHist) pvcolr = "#222"; + $("#pvbar" + firetable.preview).css( + "background-image", + "linear-gradient(90deg, rgba(244, 129, 11, 0.267) " + pcnt + "%, " + pvcolr + " " + pcnt + "%)" + ); + }, 200); + if (type == 1) { + if (firetable.scLoaded) firetable.scwidget.pause(); + if (!firetable.disableMediaPlayback) player.loadVideoById(cid, 0, "large"); + } else if (type == 2) { + if (firetable.ytLoaded) player.stopVideo(); + firetable.scSeek = 0; + if (!firetable.disableMediaPlayback) + firetable.scwidget.load("http://api.soundcloud.com/tracks/" + cid, { + auto_play: true, + }); + } } - console.log(firetable.dtImportList); - console.log(firetable.dtImportName); - if (firetable.dtImportList.length) { - $("#importDubResults").text("Ok... import " + firetable.dtImportName + " (" + firetable.dtImportList.length + " tracks)?") - $("#dubimportButton").show(); - } else { - $("#importDubResults").text("ERROR... NO TRAX?") - $("#dubimportButton").hide(); + }, + mergeLists: function (source, dest, sourceName) { + if (source == dest) { + //source and dest are the same, let's remove the duplicates + firetable.actions.removeDupesFromQueue(); + return; } - } catch (e) { - console.log(e); - $("#importDubResults").text("ERROR") - $("#dubimportButton").hide(); - } + if (dest == -1) { + // create new list if needed + var newname = firetable.utilities.format_date(Date.now()) + " Copy of " + sourceName; + var dest = ftapi.actions.createList(newname); + $("#listpicker").append('"); + } + ftapi.actions.mergeLists(source, dest, function () { + $("#mergeCompleted").show(); + $("#mergeHappening").hide(); + }); + }, + queueFromLink: function (link) { + if (link.match(/youtube.com\/watch/)) { + //youtube + firetable.debug && console.log("yt"); + function getQueryStringValue(str, key) { + return unescape( + str.replace( + new RegExp( + "^(?:.*[&\\?]" + escape(key).replace(/[\.\+\*]/g, "\\$&") + "(?:\\=([^&]*))?)?.*$", + "i" + ), + "$1" + ) + ); + } + var therealid = getQueryStringValue(link, "v"); + if (therealid) { + function keyWordsearch() { + gapi.client.setApiKey(ftconfigs.youtubeKey); + gapi.client.load("youtube", "v3", function () { + makeRequest(); + }); + } - }; - - }, - strip: function(html) { - var doc = firetable.parser.parseFromString(html, 'text/html'); - return doc.body.textContent || ""; - }, - hidePlayerControls: function() { - $("head").append(""); - }, - showPlayerControls: function() { - $(".playerControlsHider").remove(); - }, - showImages: function(chatTxt) { - if (firetable.showImages) { - var imageUrlRegex = /((http(s?):)([/|.|\w|\s|-])*\.(?:jpe?g|gif|png))/g; - var hasImage = chatTxt.search(imageUrlRegex) >= 0; - if (hasImage) { - chatTxt = chatTxt.replace(imageUrlRegex, function(imageUrl) { - var chatImage = new Image(); - chatImage.onload = function() { - if (firetable.utilities.isChatPrettyMuchAtBottom()) firetable.utilities.scrollToBottom(); - } - chatImage.src = imageUrl; - return '×' - }); + function makeRequest() { + var request = gapi.client.youtube.videos.list({ + id: therealid, + part: "snippet", + maxResults: 1, + }); + request.execute(function (response) { + firetable.debug && console.log("queue from link:", response); + if (response.result) { + if (response.result.items) { + if (response.result.items.length) { + var goodtitle = response.result.items[0].snippet.title; + var yargo = response.result.items[0].snippet.title.split(" - "); + var sartist = yargo[0]; + var stitle = yargo[1]; + if (!stitle) { + // yt title not formatted artist - title. use uploader name instead as artist + stitle = sartist; + sartist = response.result.items[0].snippet.channelTitle.replace(" - Topic", ""); + } + goodtitle = sartist + " - " + stitle; + firetable.actions.queueTrack(response.result.items[0].id, goodtitle, 1); + } + } + } + }); + } + keyWordsearch(); + } + } else if (link.match(/soundcloud.com/)) { + //soundcloud + firetable.debug && console.log("sc"); + var getComments = function (track) { + return SC.get("tracks/" + track.id); + }; - } - } - return chatTxt; - }, - loginLinkToggle: function(id) { - $("#formlinks").find(".selected").removeClass("selected"); - $("#" + id).addClass("selected"); - }, - loginEventsInit: function() { - $("#resetpass").bind("click", function() { - $("#logscreen").css("display", "none"); - $("#createscreen").css("display", "none"); - $("#resetscreen").css("display", "block"); - firetable.ui.loginLinkToggle($(this).attr('id')); - }); - $("#loginlink").bind("click", function() { - $("#logscreen").css("display", "block"); - $("#createscreen").css("display", "none"); - $("#resetscreen").css("display", "none"); - firetable.ui.loginLinkToggle($(this).attr('id')); - }); - $("#signuplink").bind("click", function() { - $("#logscreen").css("display", "none"); - $("#createscreen").css("display", "block"); - $("#resetscreen").css("display", "none"); - firetable.ui.loginLinkToggle($(this).attr('id')); - }); - $("#loginpass").bind("keyup", function(e) { - if (e.which == 13) { - var email = $("#loginemail").val(); - var pass = $("#loginpass").val(); - $("#loginemail").val(""); - $("#loginpass").val(""); - firetable.actions.logIn(email, pass); - } - }); - $("#newpass2").bind("keyup", function(e) { - if (e.which == 13) { - var email = $("#newemail").val(); - var pass = $("#newpass").val(); - var pass2 = $("#newpass2").val(); - var username = $("#newusername").val(); - if (pass == pass2) { - firetable.actions.signUp(email, pass, username); - } else { - alert("Those passwords do not match!"); + firetable.actions.resolveSCLink(link, function (tracks) { + if (tracks) { + var yargo = tracks.title.split(" - "); + var sartist = yargo[0]; + var stitle = yargo[1]; + if (!stitle) { + stitle = sartist; + sartist = tracks.user.username; + } + var goodTitle = sartist + " - " + stitle; + firetable.actions.queueTrack(tracks.id, goodTitle, 2); + } + }); + //SC.resolve(link).then(getComments).then(listComments); } - } - }); - $("#theAddress").bind("keyup", function(e) { - if (e.which == 13) { - var email = $("#theAddress").val(); - firetable.debug && console.log("reset email return"); - ftapi.actions.resetPassword(email, function(error) { - var errorCode = error.code; - var errorMessage = error.message; - if (errorCode === 'auth/wrong-password') { - alert('Wrong password.'); - } else { - alert(errorMessage); - } - firetable.debug && console.log('send pass reset error:', error); - }); - alert("Reset email sent. Click the reset link when it arrives thanks."); - } - }); - $("#createAccountBttn").bind("click", function() { - var email = $("#newemail").val(); - var pass = $("#newpass").val(); - var pass2 = $("#newpass2").val(); - var termsAgreedTo = $("#agreetoterms").is(":checked"); - var username = $("#newusername").val(); - if (!termsAgreedTo) { - alert("You must read and agree to the Terms of Service and Privacy Policy before you can create an account."); - } else if (pass != pass2) { - alert("Those passwords do not match!"); - } else { - firetable.actions.signUp(email, pass, username); - } - }); - $("#resetPassBttn").bind("click", function() { - var email = $("#theAddress").val(); - firetable.debug && console.log("reset email click button"); - ftapi.actions.resetPassword(email, function(error) { - var errorCode = error.code; - var errorMessage = error.message; - if (errorCode === 'auth/wrong-password') { - alert('Wrong password.'); - } else { - alert(errorMessage); + }, + resolveSCLink: function (link, callback) { + var importantStuff = link.replace("https://soundcloud.com/", ""); + importantStuff = importantStuff.replace("http://soundcloud.com/", ""); + $.ajax({ + url: "https://thompsn.com/resolvesc/?q=" + importantStuff, + type: "GET", + dataType: "json", + success: function (res) { + console.log(res); + callback(res.response); + }, + }); + }, + scGet: function (type, q, callback) { + $.ajax({ + url: "https://thompsn.com/soundcloud/?type=" + type + "&q=" + q, + type: "GET", + dataType: "json", + success: function (res) { + console.log(res); + callback(res.response); + }, + }); + }, + updateQueue: function () { + //this fires when someone drags a song to a new spot in the queue + var arr = $("#mainqueue > div") + .map(function () { + var theid = this.id; + var idraw = theid.slice(5); + return idraw; + }) + .get(); + ftapi.actions.reorderList(arr, firetable.preview, function (changePV) { + if (changePV) firetable.preview = changePV; + }); + }, + shuffleQueue: function () { + ftapi.actions.shuffleList(firetable.preview, function (changePV) { + if (changePV) firetable.preview = changePV; + }); + }, + removeDupesFromQueue: function () { + ftapi.actions.removeDuplicatesFromList(); + $("#mergeCompleted").show(); + $("#mergeHappening").hide(); + }, + editTagsPrompt: function (songid) { + var song = firetable.queue[songid]; + var $pvbar = $('#mainqueue .pvbar[data-key="' + songid + '"]'); + $("#mainqueue .pvbar.editing").removeClass("editing"); + $(".tagPromptBox").remove(); + $pvbar.addClass("editing"); + var $tags = $tagEditorTemplate.clone().appendTo($pvbar); + $tags.find(".tagMachine").val(song.name); + if (song.type == 1) { + $tags.find(".tagSongLink").attr("href", "https://youtube.com/watch?v=" + song.cid); + } else if (song.type == 2) { + firetable.actions.scGet("tracks", song.cid, function (tracks) { + if (tracks.permalink_url) { + $tags.find(".tagSongLink").attr("href", tracks.permalink_url); + } else { + $tags + .find(".tagSongLink") + .attr("href", "http://howtojointheindiediscothequewaitlist.com/ThisSongIsBroken?thanks=true"); + } + }); } - firetable.debug && console.log('send pass reset error:', error); - }); - alert("Reset email sent. Click the reset link when it arrives thanks."); - }); - $("#loginBttn").bind("click", function() { - var email = $("#loginemail").val(); - var pass = $("#loginpass").val(); - $("#loginemail").val(""); - $("#loginpass").val(""); - firetable.actions.logIn(email, pass); - }); - }, - loginEventsDestroy: function() { - $("#resetpass").off("click"); - $("#loginlink").off("click"); - $("#signuplink").off("click"); - $("#loginpass").off("keyup"); - $("#newpass2").off("keyup"); - $("#theAddress").off("keyup"); - $("#createAccountBttn").off("click"); - $("#resetPassBttn").off("click"); - $("#loginBttn").off("click"); - }, - init: function() { - - $('#mainqueue').sortable({ - start: function(event, ui) { - var start_pos = ui.item.index(); - ui.item.data('start_pos', start_pos); - }, - change: function(event, ui) { - - }, - update: function(event, ui) { - firetable.debug && console.log("UPDATE"); - firetable.actions.updateQueue(); - } - }); - //GET SETTINGS FROM LOCALSTORAGE - var disableMediaPlayback = localStorage["firetableDisableMedia"]; - if (typeof disableMediaPlayback == "undefined") { - localStorage["disableMediaPlayback"] = false; - firetable.disableMediaPlayback = false; - $("#mediaDisableToggle").prop("checked", false); - } else { - disableMediaPlayback = JSON.parse(disableMediaPlayback); - firetable.disableMediaPlayback = disableMediaPlayback; - $("#mediaDisableToggle").prop("checked", disableMediaPlayback); - if (disableMediaPlayback) { - firetable.ui.hidePlayerControls(); - } - } - var showImages = localStorage["firetableShowImages"]; - if (typeof showImages == "undefined") { - localStorage["firetableShowImages"] = false; - firetable.showImages = false; - $("#showImagesToggle").prop("checked", false); - } else { - showImages = JSON.parse(showImages); - firetable.showImages = showImages; - $("#showImagesToggle").prop("checked", showImages); - } - var showAvatars = localStorage["firetableShowAvatars"]; - if (typeof showAvatars == "undefined") { - localStorage["firetableShowAvatars"] = true; - firetable.showAvatars = true; - $("#showAvatarsToggle").prop("checked", true); - } else { - showAvatars = JSON.parse(showAvatars); - firetable.showAvatars = showAvatars; - $("#showAvatarsToggle").prop("checked", showAvatars); - if (showAvatars == false) { - document.getElementById("actualChat").classList.add("avatarsOff"); - } - } - var playBadoop = localStorage["firetableBadoop"]; - if (typeof playBadoop == "undefined") { - localStorage["firetableBadoop"] = true; - firetable.playBadoop = true; - $("#badoopToggle").prop("checked", true); - } else { - playBadoop = JSON.parse(playBadoop); - firetable.playBadoop = playBadoop; - $("#badoopToggle").prop("checked", playBadoop); - } - var dtnmt = localStorage["firetableDTNM"]; - if (typeof dtnmt == "undefined") { - localStorage["firetableDTNM"] = false; - firetable.desktopNotifyMentions = false; - $("#desktopNotifyMentionsToggle").prop("checked", false); - } else { - dtnmt = JSON.parse(dtnmt); - firetable.desktopNotifyMentions = dtnmt; - $("#desktopNotifyMentionsToggle").prop("checked", dtnmt); - } - var screenControl = localStorage["firetableScreenControl"]; - if (typeof screenControl == "undefined") { - localStorage["firetableScreenControl"] = "sync"; - firetable.screenControl = "sync"; - $("#screenControlTog" + firetable.screenControl).prop("checked", true); - } else { - firetable.screenControl = screenControl; - $("#screenControlTog" + firetable.screenControl).prop("checked", true); - if (screenControl == "on") { - firetable.utilities.screenDown(); - } else if (screenControl == "off") { - firetable.utilities.screenUp(); - } else if (screenControl == "sync") { - if (firetable.screenSyncPos) { - firetable.utilities.screenDown(); - } else { - firetable.utilities.screenUp(); - } - } - } - var $historyItem = $('#thehistory .pvbar').remove(); - ftapi.events.on('newHistory', function(data) { - if (data.img == "img/idlogo.png" && ftconfigs.defaultAlbumArtUrl.length) data.img = ftconfigs.defaultAlbumArtUrl; - var firstpart = "yt"; - if (data.type == 2) firstpart == "sc"; - var pkey = firstpart + "cid" + data.cid; - var $histItem = $historyItem.clone(); - $histItem.attr('id', "pvbar" + pkey); - $histItem.attr("data-key", pkey); - $histItem.attr("data-cid", data.cid); - $histItem.attr("data-type", data.type); - - $histItem.find('.previewicon').attr('id', "pv" + pkey).on('click', function() { - firetable.actions.pview( - $(this).closest('.pvbar').attr('data-key'), - true, - $(this).closest('.pvbar').attr('data-type'), - true - ); - }); - $histItem.find('.histlink').attr({ - 'href': data.url, - 'tabindex': "-1" - }).text(data.artist + " - " + data.title); - $histItem.find('.histdj').text(data.dj); - $histItem.find('.histdate').text(firetable.utilities.format_date(data.when)); - $histItem.find('.histtime').text(firetable.utilities.format_time(data.when)); - $histItem.find('.histeal').attr('id', "apv" + data.type + data.cid).on('click', function() { - firetable.actions.queueTrack( - $(this).closest('.pvbar').attr('data-cid'), - firetable.utilities.htmlEscape($(this).closest('.pvbar').find('.histlink').text()), - $(this).closest('.pvbar').attr('data-type'), - true - ); - }); - $histItem.find('.histart').css('background-image', 'url(' + data.img + ')'); - $histItem.prependTo("#thehistory"); - // simplebar scroll update? - }); - ftapi.events.on("newTheme", function(data) { - if (!data) { - //no theme - $("#currentTheme").text("!suggest a theme"); - } else { - var txtOut = firetable.ui.strip(data); - txtOut = firetable.ui.textToLinks(txtOut, true); - txtOut = firetable.utilities.emojiShortnamestoUnicode(txtOut); - txtOut = txtOut.replace(/\`(.*?)\`/g, function(x) { - return "" + x.replace(/\`/g, "") + ""; - }); - $("#currentTheme").html(txtOut); - twemoji.parse(document.getElementById("currentTheme")); - } - }); - ftapi.events.on("tagUpdate", function(data) { - firetable.debug && console.log("TAG UPDATE", data); - firetable.tagUpdate = data; - if (firetable.song) { - if (firetable.song.cid == data.cid && data.adamData.track_name) { - $("#track").text(firetable.ui.strip(data.adamData.track_name)); - $("#artist").text(firetable.ui.strip(data.adamData.artist)); - var nicename = firetable.song.djname; - var showPlaycount = false; - if (data.adamData.playcount) { - if (data.adamData.playcount > 0) { - showPlaycount = true; - } - } - if (data.adamData.last_play) { - $("#lastPlay").text("last " + firetable.utilities.format_date(data.adamData.last_play) + " by " + data.adamData.last_play_dj); - } else { - $("#lastPlay").text(""); - } - if (data.adamData.first_play) { - $("#firstPlay").text("first " + firetable.utilities.format_date(data.adamData.first_play) + " by " + data.adamData.first_play_dj); - } else { - $("#firstPlay").text(""); - } - var doTheScrollThing = firetable.utilities.isChatPrettyMuchAtBottom(); - if (showPlaycount) { - $("#playCount").text(data.adamData.playcount + " plays"); - $(".npmsg" + data.cid).last().html("
    DJ " + nicename + " started playing " + data.adamData.track_name + " by " + data.adamData.artist + "
    This song has been played " + data.adamData.playcount + " times.
    "); - } else { - $("#playCount").text(""); - $(".npmsg" + data.cid).last().html("
    DJ " + nicename + " started playing " + data.adamData.track_name + " by " + data.adamData.artist + "
    "); - } - if (doTheScrollThing) firetable.utilities.scrollToBottom(); - } - } - }); + firetable.debug && console.log("edit tags song id:", songid); + firetable.songToEdit = { + song: song, + key: songid, + }; + }, + importList(id, name, type) { + //time to IMPORT SOME LISTS! + $("#overlay").removeClass("show"); + $("#importResults").html(""); + $("#plMachine").val(""); + if (type == 1) { + //youtube + var finalList = []; + + function keyWordsearch(pg) { + gapi.client.setApiKey(ftconfigs.youtubeKey); + gapi.client.load("youtube", "v3", function () { + makeRequest(pg); + }); + } + function makeRequest(pg) { + if (pg) { + var request = gapi.client.youtube.playlistItems.list({ + playlistId: id, + maxResults: 50, + part: "snippet", + pageToken: pg, + }); + } else { + var request = gapi.client.youtube.playlistItems.list({ + playlistId: id, + maxResults: 50, + part: "snippet", + }); + } + request.execute(function (response) { + if (response.items.length) { + for (var idx = 0; idx < response.items.length; idx++) { + finalList.push(response.items[idx]); + } + } + if (response.nextPageToken) { + if (response.nextPageToken != "") keyWordsearch(response.nextPageToken); + } else { + firetable.debug && console.log(finalList); + var listid = ftapi.actions.createList(name); + $("#listpicker").append( + '" + ); + for (var i = 0; i < finalList.length; i++) { + var goodTitle = finalList[i].snippet.title; + // can't use youtube uploader name to fix tags here because YOUTUBE DECIDED NOT TO INCLUDE THAT INFORMATION >:o + if (goodTitle !== "Private video" && goodTitle !== "Deleted video") { + ftapi.actions.addToList(1, goodTitle, finalList[i].snippet.resourceId.videoId, listid); + } + } + } + }); + } + keyWordsearch(); + } else if (type == 2) { + firetable.actions.scGet("playlists", id, function (listinfo) { + firetable.debug && console.log("sc tracks:", listinfo.tracks); + var listid = ftapi.actions.createList(name); + $("#listpicker").append( + '" + ); + for (var i = 0; i < listinfo.tracks.length; i++) { + if (listinfo.tracks[i].title) { + var yargo = listinfo.tracks[i].title.split(" - "); + var sartist = yargo[0]; + var stitle = yargo[1]; + if (!stitle) { + stitle = sartist; + sartist = listinfo.tracks[i].user.username; + } + var goodTitle = sartist + " - " + stitle; + } else { + var goodTitle = "Unknown"; + } - ftapi.events.on('newSong', function(data) { - $("#playCount").text(""); - $("#lastPlay").text(""); - $("#firstPlay").text(""); - window.dispatchEvent(new Event('resize')); - $("#cloud_with_rain").removeClass("on"); - $("#fire").removeClass("on"); - $("#timr").countdown("destroy"); - if (firetable.moveBar != null) { - clearInterval(firetable.moveBar); - firetable.moveBar = null; - } - if (data.image == "img/idlogo.png" && ftconfigs.defaultAlbumArtUrl.length) data.image = ftconfigs.defaultAlbumArtUrl; - $("#prgbar").css("background", "#151515"); - var showPlaycount = false; - if (firetable.tagUpdate) { - if (data.cid == firetable.tagUpdate.cid && firetable.tagUpdate.adamData.track_name) { - data.title = firetable.tagUpdate.adamData.track_name; - data.artist = firetable.tagUpdate.adamData.artist; - if (firetable.tagUpdate.adamData.last_play) { - $("#lastPlay").text("last " + firetable.utilities.format_date(firetable.tagUpdate.adamData.last_play) + " by " + firetable.tagUpdate.adamData.last_play_dj); - } - if (firetable.tagUpdate.adamData.first_play) { - $("#firstPlay").text("first " + firetable.utilities.format_date(firetable.tagUpdate.adamData.first_play) + " by " + firetable.tagUpdate.adamData.first_play_dj); - } - if (firetable.tagUpdate.adamData.playcount) { - if (firetable.tagUpdate.adamData.playcount > 0) { - showPlaycount = true; - $("#playCount").text(firetable.tagUpdate.adamData.playcount + " plays"); - } - } + ftapi.actions.addToList(2, goodTitle, listinfo.tracks[i].id, listid); + } + }); } - } - $("#track").text(firetable.ui.strip(data.title)); - $("#artist").text(firetable.ui.strip(data.artist)); - $("#songlink").attr("href", data.url); - $("#albumArt").css("background-image", "url(" + data.image + ")"); - var nownow = Date.now(); - var timeSince = nownow - data.started; - if (timeSince <= 0) timeSince = 0; - var secSince = Math.floor(timeSince / 1000); - var timeLeft = data.duration - secSince; - firetable.song = data; - firetable.debug && console.log("NEW TRACK", data); - firetable.debug && console.log('time since:', timeSince); - if (data.type == 1) { - $("#scScreen").hide(); - $("#songlink").html(''); - } else if (data.type == 2) { - $("#scScreen").show(); - $("#songlink").html(''); - var biggerImg = data.image.replace('-large', '-t500x500'); - firetable.scImg = biggerImg; - $("#albumArt").css("background-image", "url(" + biggerImg + ")") - try { - setup(biggerImg); - } catch (e) { - firetable.debug && console.log('big image error:', e) + }, + bumpSongInQueue: function (songid) { + ftapi.actions.moveTrackToTop(songid, firetable.preview, function (changePV) { + if (changePV) firetable.preview = changePV; + }); + }, + signUp: function (email, password, username) { + firetable.debug && console.log("signup"); + ftapi.actions.signUp(email, password, username, function (error) { + alert(error); + }); + }, + deleteSong: function (id) { + ftapi.actions.deleteTrack(id); + }, + uidLookup: function (name) { + var match = false; + var usrs = ftapi.users; + for (var key in usrs) { + if (usrs.hasOwnProperty(key)) { + if (ftapi.users[key].username) { + if (ftapi.users[key].username == name) { + match = key; + } + } + } } - } - if (data.type == 1 && firetable.ytLoaded) { - if (!firetable.preview) { - if (firetable.scLoaded) firetable.scwidget.pause(); - if (!firetable.disableMediaPlayback) player.loadVideoById(data.cid, secSince, "large"); - var thevolactual = $("#slider").slider("value"); - player.setVolume(thevolactual); - firetable.scwidget.setVolume(thevolactual); + if (!match && ftapi.users[name]) match = name; + return match; + }, + grab: function () { + if (firetable.song.cid != 0) { + var title = firetable.song.artist + " - " + firetable.song.title; + firetable.actions.queueTrack(firetable.song.cid, title, firetable.song.type, true); } - } else if (data.type == 2 && firetable.scLoaded) { - if (!firetable.preview) { - if (firetable.ytLoaded) player.stopVideo(); - firetable.scSeek = timeSince; - if (!firetable.disableMediaPlayback) firetable.scwidget.load("http://api.soundcloud.com/tracks/" + data.cid, { - auto_play: true, - single_active: false, - callback: function() { - var thevolactual = localStorage["firetableVol"]; - player.setVolume(thevolactual); - firetable.scwidget.setVolume(thevolactual); - } - }); + }, + unban: function (userid) { + ftapi.actions.unbanUser(userid); + }, + reloadtrack: function () { + $("#reloadtrack").addClass("on working"); + //start regular song + var nownow = Date.now(); + var timeSince = nownow - firetable.song.started; + if (timeSince <= 0) timeSince = 0; + var secSince = Math.floor(timeSince / 1000); + var timeLeft = firetable.song.duration - secSince; + if (firetable.song.type == 1) { + if (!firetable.preview) { + if (firetable.scLoaded) firetable.scwidget.pause(); + if (!firetable.disableMediaPlayback) player.loadVideoById(firetable.song.cid, secSince, "large"); + } + } else if (firetable.song.type == 2) { + if (!firetable.preview) { + if (firetable.ytLoaded) player.stopVideo(); + firetable.scSeek = timeSince; + if (!firetable.disableMediaPlayback) + firetable.scwidget.load( + "http://api.soundcloud.com/tracks/" + firetable.song.cid, + { + auto_play: true, + }, + function () { + $("#reloadtrack").removeClass("on working"); + } + ); + } } - } - if (data.cid != 0) { - var nicename = data.djid; - if (ftapi.users[data.djid]) { - if (ftapi.users[data.djid].username) nicename = ftapi.users[data.djid].username; + }, + queueTrack: function (cid, name, type, tobottom) { + var info = { + type: type, + name: name, + cid: cid, + }; + $("#apv" + type + cid) + .find(".material-icons") + .text("check"); + $("#apv" + type + cid).css("color", firetable.orange); + $("#apv" + type + cid).css("pointer-events", "none"); + setTimeout(function () { + $("#apv" + type + cid) + .find(".material-icons") + .text("playlist_add"); + $("#apv" + type + cid).removeAttr("style"); + }, 3000); + + var cuteid = ftapi.actions.addToList(type, name, cid, false, function () { + firetable.debug && console.log("queue track id:", cuteid); + if (!tobottom) firetable.actions.bumpSongInQueue(cuteid); + }); + + if (firetable.preview) { + if (firetable.preview.slice(0, 5) == "ytcid" || firetable.preview.slice(0, 5) == "sccid") { + $("#pv" + firetable.preview).html(""); + clearTimeout(firetable.ptimeout); + firetable.ptimeout = null; + $("#pvbar" + firetable.preview).css("background-image", "none"); + clearInterval(firetable.movePvBar); + firetable.movePvBar = null; + firetable.preview = false; + //start regular song + var nownow = Date.now(); + var timeSince = nownow - firetable.song.started; + if (timeSince <= 0) timeSince = 0; + var secSince = Math.floor(timeSince / 1000); + var timeLeft = firetable.song.duration - secSince; + if (firetable.song.type == 1) { + if (!firetable.preview) { + if (firetable.scLoaded) firetable.scwidget.pause(); + if (!firetable.disableMediaPlayback) + player.loadVideoById(firetable.song.cid, secSince, "large"); + } + } else if (firetable.song.type == 2) { + if (!firetable.preview) { + if (firetable.ytLoaded) player.stopVideo(); + firetable.scSeek = timeSince; + if (!firetable.disableMediaPlayback) + firetable.scwidget.load("http://api.soundcloud.com/tracks/" + firetable.song.cid, { + auto_play: true, + }); + } + } + } } - if (firetable.nonpmsg) { - firetable.nonpmsg = false; + $("#mainqueuestuff").css("display", "block"); + $("#filterMachine").css("display", "block"); + $("#addbox").css("display", "none"); + $("#cancelqsearch").hide(); + $("#qControlButtons").show(); + }, +}; + +firetable.emojis = { + h: function () { + $(".pickerResult").show(); + $("#pickerResults h3").show(); + }, + n: function (p, q) { + var e = p.attr("data-alternative-name"); + return $(p).text().toLowerCase().indexOf(q) >= 0 || (e != null && e.toLowerCase().indexOf(q) >= 0); + }, + sec: function (sec) { + firetable.debug && console.log("emoji sec:", sec); + var selectedSec = $("#pickerNav > .on"); + var thething = sec.substr(1); + console.log(thething); + if (selectedSec.length) { + firetable.debug && console.log("already selected sec"); + if (selectedSec[0].id == sec) { + firetable.debug && console.log("toggle selected... back to FULL LIST"); + $("#" + selectedSec[0].id).removeClass("on"); + $("#pickerContents div").show(); + } else { + //new sec selected + $("#" + selectedSec[0].id).removeClass("on"); + $("#" + selectedSec[0].id.substr(1)).hide(); + $("#" + sec).addClass("on"); + $("#" + thething).show(); + } } else { - var doTheScrollThing = firetable.utilities.isChatPrettyMuchAtBottom(); - if (showPlaycount) { - $("#chats").append("
    DJ " + nicename + " started playing " + data.title + " by " + data.artist + "
    This song has been played " + firetable.tagUpdate.adamData.playcount + " times.
    ") - } else { - $("#chats").append("
    DJ " + nicename + " started playing " + data.title + " by " + data.artist + "
    ") - } - if (doTheScrollThing) firetable.utilities.scrollToBottom(); - firetable.lastChatPerson = false; - firetable.lastChatId = false; + firetable.debug && console.log("first select"); + $("#" + sec).addClass("on"); + $("#pickerContents div").hide(); + $("#" + thething).show(); } - - } - $("#timr").countdown({ - until: timeLeft, - compact: true, - description: "", - format: "MS" - }); - firetable.moveBar = setInterval(function() { - var now = Date.now(); - var sofar = now - firetable.song.started; - var pcnt = (sofar / (firetable.song.duration * 1000)) * 100; - $("#prgbar").css("background", "linear-gradient(90deg, " + firetable.color + " " + pcnt + "%, #151515 " + pcnt + "%)"); - }, 500); - }); - ftapi.events.on("screenStateChanged", function(data) { - firetable.debug && console.log('thescreen:', data); - firetable.screenSyncPos = data; - if (firetable.screenControl == "sync") { - if (data) { - firetable.utilities.screenDown(); + }, + niceSearch: function (val) { + if (val.length == 0) { + firetable.emojis.h(); + return; } else { - firetable.utilities.screenUp(); + var isvisible = $("#pickerResults h3").is(":visible"); + if (isvisible) $("#pickerResults h3").hide(); } - } - }); - ftapi.events.on("danceStateChanged", function(data) { - firetable.debug && console.log('dance check:', data); - if (data) { - $("#deck").addClass("dance"); - } else { - $("#deck").removeClass("dance"); - } - }); - ftapi.events.on("lightsChanged", function(data) { - firetable.debug && console.log('lights check:', data); - if (data) { - firetable.lights = true; - $('.festiveLights').remove(); - var colorThing = firetable.utilities.hexToRGB(firetable.color); - var style = ""; - $("head").append(style); - } else { - $('.festiveLights').remove(); - firetable.lights = false; - } - }); - ftapi.events.on("waitlistChanged", function(data) { - var ok1 = ""; - var cnt = "0"; - if (data) { - var countr = 1; - for (var key in data) { - firetable.debug && console.log('waitlist', data); - if (data.hasOwnProperty(key)) { - cnt = countr; - var removeMe = ""; - if (data[key].removeAfter) removeMe = "departure_board" - ok1 += "
    " + countr + ". " + data[key].name + " " + removeMe + "
    "; - countr++; - } + val = val.toLowerCase(); + $(".pickerResult").each(function (p, q) { + if (firetable.emojis.n($(q), val)) { + $(q).show(); + } else { + $(q).hide(); + } + }); + // simplebar scroll update? + }, +}; + +firetable.utilities = { + getEmojiMap: function () { + firetable.emojiMap = {}; + (async function () { + urls = [ + "https://unpkg.com/unicode-emoji-json@0.3.0/data-by-group.json", + "https://unpkg.com/emojilib@3.0.4/dist/emoji-en-US.json", + ]; + duhdoymojis = { + "☕": ["coffee"], + "🚩": ["triangular_flag_on_post"], + "👋": ["wave"], + "🆔": ["id"], + "📈": ["chart_with_upwards_trend"], + "🚨": ["rotating_light"], + "🌧️": ["rain"], + "✅": ["white_check_mark"], + "🛰️": ["artificial_satellite"], + "🍵": ["tea"], + "❤️": ["heart"], + "🌊": ["ocean"], + "💦": ["splash"], + "💩": ["poop"], + "💯": ["100"], + "💨": ["dash"], + "🤡": ["clown"], + "🥱": ["yawn"], + "🙂": ["smile"], + "👌": ["ok"], + "💥": ["boom"], + "🍺": ["beer"], + "🍻": ["beers"], + "🥃": ["whiskey"], + "🌨️": ["snow"], + }; + try { + const requests = urls.map((url) => fetch(url)); + const responses = await Promise.all(requests); + const promises = responses.map((response) => response.json()); + const data = await Promise.all(promises); + for (const [category, emojisArr] of Object.entries(data[0])) { + let catid = category.replace(/[\s&]+/g, "_").toLowerCase(); + $("#pickerNav").append( + '' + emojisArr[0].emoji + "" + ); + $("#pickerContents").append('

    ' + category + "

    "); + for (let i in emojisArr) { + firetable.emojiMap[emojisArr[i].slug] = emojisArr[i].emoji; + var words = ""; + words += data[1][emojisArr[i].emoji] !== undefined ? data[1][emojisArr[i].emoji].join(",") : ""; + words += + duhdoymojis[emojisArr[i].emoji] !== undefined + ? "," + duhdoymojis[emojisArr[i].emoji].join(",") + : ""; + $("#picker" + catid).append( + '' + + emojisArr[i].emoji + + "" + ); + } + for (let i in duhdoymojis) { + for (let j in duhdoymojis[i]) { + firetable.emojiMap[duhdoymojis[i][j]] = i; + } + } + } + twemoji.parse(document.getElementById("pickerNav")); + } catch (err) {} + })(); + }, + hexToRGB: function (hex) { + var shorthandRegex = /^#?([a-f\d])([a-f\d])([a-f\d])$/i; + hex = hex.replace(shorthandRegex, function (m, r, g, b) { + return r + r + g + g + b + b; + }); + + var result = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(hex); + return result + ? { + r: parseInt(result[1], 16), + g: parseInt(result[2], 16), + b: parseInt(result[3], 16), + } + : null; + }, + wrapText: function (context, text, x, y, maxWidth, lineHeight) { + var words = text.split(" "); + var line = ""; + var lines = 0; + + for (var n = 0; n < words.length; n++) { + var testLine = line + words[n] + " "; + var metrics = context.measureText(testLine); + var testWidth = metrics.width; + if (testWidth > maxWidth && n > 0) { + context.fillText(line, x, y); + line = words[n] + " "; + y += lineHeight; + lines++; + } else { + line = testLine; + } } - } - $("#label2 .count").text(" (" + cnt + ")"); - $("#justwaitlist").html(ok1); - }); - ftapi.events.on("tableChanged", function(data) { - var ok1 = ""; - if (data) { - var countr = 0; - for (var key in data) { - if (data.hasOwnProperty(key)) { - var removeMe = ""; - if (data[key].removeAfter) removeMe = "departure_board" - - ok1 += "
    " + removeMe + " " + data[key].name + "
    " + data[key].plays + "/" + firetable.playlimit + "
    "; - countr++; - } + context.fillText(line, x, y); + return lines; + }, + emojiShortnamestoUnicode: function (str) { + var res = str.replace(/\:(.*?)\:/g, function (x) { + var response = x; + var shortname = x.replace(/\:/g, ""); + if (firetable.emojiMap[shortname]) { + response = '' + firetable.emojiMap[shortname] + ""; + } else if (shortname == "rohn") { + response = ''; + } + return response; + }); + return res; + }, + playSound: function (filename) { + if (firetable.playBadoop) { + document.getElementById("audilert").setAttribute("src", filename + ".mp3"); } - if (countr < 4) { - ok1 += "
    !addme
    "; - countr++; - for (var i = countr; i < 4; i++) { - ok1 += "
     
    "; - } + }, + desktopNotify: function (chatData, namebo) { + if (Notification) { + if (Notification.permission !== "granted") { + Notification.requestPermission(); + } else { + var notification = new Notification(namebo, { + icon: "https://indiediscotheque.com/robots/" + chatData.id + namebo + ".png?size=110x110", + body: chatData.txt, + }); + } } + }, + screenUp: function () { + $("body").removeClass("screen"); + }, + screenDown: function () { + $("body").addClass("screen"); + }, + isChatPrettyMuchAtBottom: function () { + var scrollable = chatScroll.contentEl.scrollHeight - chatScroll.el.clientHeight; + var scrolled = chatScroll.contentWrapperEl.scrollTop; + firetable.debug && console.log("near bottom?", scrollable, scrolled); + return Math.abs(scrollable - scrolled) <= 25; + }, + scrollToBottom: function () { + chatScroll.contentWrapperEl.scrollTop = chatScroll.contentEl.scrollHeight; + }, + htmlEscape: function (s, preserveCR) { + preserveCR = preserveCR ? " " : "\n"; + return ( + ("" + s) /* Forces the conversion to string. */ + .replace(/&/g, "&") /* This MUST be the 1st replacement. */ + .replace(/'/g, "\\'") /* The 4 other predefined entities, required. */ + .replace(/"/g, """) + .replace(//g, ">") + /* + You may add other replacements here for HTML only + (but it's not necessary). + Or for XML, only if the named entities are defined in its DTD. + */ + .replace(/\r\n/g, preserveCR) /* Must be before the next replacement. */ + .replace(/[\r\n]/g, preserveCR) + ); + }, + format_date: function (d) { + var date = new Date(d); - } else { - ok1 += "
    !addme
    "; - for (var i = 0; i < 3; i++) { - ok1 += "
     
    "; - } - } - $("#deck").html(ok1); - for (var i = 0; i < 4; i++) { - if (i != firetable.playdex) { - $("#avtr" + i).removeClass("animate"); - $("#djthing" + i).removeClass("djActive"); + var month = date.getMonth() + 1; + var day = date.getDate(); + var year = date.getFullYear(); - } else { - $("#avtr" + i).addClass("animate"); - $("#djthing" + i).addClass("djActive"); + var formatted_date = month + "/" + day + "/" + year; + return formatted_date; + }, + format_time: function (d) { + var date = new Date(d); + + var hours1 = date.getHours(); + var ampm = "am"; + var hours = hours1; + if (hours1 >= 12) { + ampm = "pm"; + if (hours !== 12) hours = hours1 - 12; } - } - }); - ftapi.events.on("spotlightStateChanged", function(data) { - firetable.playdex = data; - for (var i = 0; i < 4; i++) { - if (i != data) { - $("#avtr" + i).removeClass("animate"); - $("#djthing" + i).removeClass("djActive"); - + if (hours == 0) hours = 12; + var minutes = date.getMinutes(); + var min = ""; + if (minutes > 9) { + min += minutes; } else { - $("#avtr" + i).addClass("animate"); - $("#djthing" + i).addClass("djActive"); + min += "0" + minutes; } - } - }); - ftapi.events.on("playLimitChanged", function(data) { - firetable.playlimit = data; - for (var i = 0; i < 4; i++) { - $("#plimit" + i).text(data); - } - }); - ftapi.events.on("banListChanged", function(data) { - $("#activeSuspentions").html(""); - for (key in data) { - if (data[key]) { - ftapi.lookup.userByName(key, function(person) { - $("#activeSuspentions").append("
    " + person.username + "
    "); - }); + return hours + ":" + min + "" + ampm; + }, + debounce(func, wait, immediate) { + var timeout; + return function () { + var context = this, + args = arguments; + var later = function () { + timeout = null; + if (!immediate) func.apply(context, args); + }; + var callNow = immediate && !timeout; + clearTimeout(timeout); + timeout = setTimeout(later, wait); + if (callNow) func.apply(context, args); + }; + }, + chatAt: function (element) { + element.bind("click", function () { + console.log(element); + var nameToAt; + if (element[0].className == "prson") { + nameToAt = $(this).find(".prsnName").text(); + } else if (element[0].className == "botson") { + nameToAt = $(this).next(".chatContent").find(".chatName").text(); + } else if (element[0].className == "chatName") { + nameToAt = $(this).text(); + } + $("#newchat") + .val(function (i, val) { + return val + "@" + nameToAt + " "; + }) + .focus(); + }); + }, + initAtLand: function () { + firetable.atLand = true; + firetable.atString = ""; + firetable.atUsers = ["everyone"]; + for (var user in ftapi.users) { + firetable.atUsers.push(ftapi.users[user].username); } - } - }); - ftapi.events.on("userJoined", function(data) { - console.log(data); - var user = data; - var block = ""; - var blockcon = ""; - var herecon = "lens"; - var isIdle = ""; - if (data.idle) { - if (data.idle.isIdle && !data.hostbot) isIdle = "idle"; - if (data.idle.audio == 2) { - herecon = "label_important"; + firetable.atUsersFiltered = firetable.atUsers.sort(); + }, + updateAtLand: function () { + firetable.atUsersFiltered = firetable.atUsers + .filter((user) => user.toLowerCase().startsWith(firetable.atString.toLowerCase())) + .sort(); + $("#atPicker").html(""); + if (firetable.atUsersFiltered.length) { + for (var user of firetable.atUsersFiltered) { + $( + '
    " + ).appendTo("#atPicker"); + } + } else { + $('
    No users match
    ').appendTo("#atPicker"); } - } - if (data.blocked) { - block = "blockd"; - blockcon = "block"; - } - - if (!data.username) data.username = data.userid; + }, + chooseAt: function (atPeep) { + var $chatText = $("#newchat"); + if (firetable.atString.length > 0) $chatText.val($chatText.val().slice(0, firetable.atString.length * -1)); + $chatText.val($chatText.val() + atPeep + " "); + firetable.utilities.exitAtLand(); + }, + exitAtLand: function () { + firetable.atLand = false; + firetable.atUsersFiltered = []; + firetable.atString = ""; + $("#atPicker").removeClass("show").html(""); + }, +}; - var destination = "#usersRegular"; - var rolename = ""; - if (data.mod) { - rolename = "mod"; - destination = "#usersMod"; - } - if (data.supermod) { - rolename = "supermod"; - destination = "#usersSuper"; - } - if (data.hostbot) { - rolename = "robot"; - destination = "#usersBot"; - } +firetable.ui = { + textToLinks: function (text, themeBox) { + var re = /(\b(https?|ftp|file):\/\/[-A-Z0-9+&@#\/%?=~_|!:,.;]*[-A-Z0-9+&@#\/%=~_|])/gi; + if (firetable.showImages && !themeBox) re = /(https?:\/\/(?![/|.|\w|\s|-]*(?:jpe?g|png|gif))[^" ]+)/g; + return text.replace(re, '$1'); - var newUserToAddX = $("
    "); - newUserToAddX.addClass("prson " + block); - newUserToAddX.attr("id", "user" + data.userid); - newUserToAddX.html("
    " + blockcon + "" + herecon + "
    " + data.username + "" + rolename + "joined " + firetable.utilities.format_date(data.joined) + ""); - firetable.utilities.chatAt(newUserToAddX); // adds the click event to @ the user - $(destination).append(newUserToAddX); - }); - ftapi.events.on("userLeft", function(data) { - $("#user" + data.userid).remove(); - }); - ftapi.events.on("userChanged", function(data) { - var user = data; - var block = ""; - var blockcon = ""; - var herecon = "lens"; - var isIdle = ""; - console.log("CHANGE", data) - if (data.idle) { - if (data.idle.isIdle && !data.hostbot) isIdle = "idle"; - if (data.idle.audio == 2) { - herecon = "label_important"; + return text; + }, + dubtrackImportFileSelect: function (evt) { + var files = evt.target.files; // FileList object + var file = files[0]; + // read the file contents + var reader = new FileReader(); + reader.readAsText(file); + reader.onload = function (event) { + try { + var allthestuff = event.currentTarget.result; + console.log(allthestuff); + firetable.dtImportName = firetable.ui.strip(allthestuff.split("

    ")[1].split("

    ")[0]); + var hams = allthestuff.split('
  • (.*)<\/li>/gm; + var matches = thingsRegex.exec(hams[i]); + var type = matches[2]; + var cid = matches[4]; + var name = firetable.ui.strip(matches[5]); + firetable.dtImportList.push({ + type: type, + cid: cid, + name: name, + }); + } + console.log(firetable.dtImportList); + console.log(firetable.dtImportName); + if (firetable.dtImportList.length) { + $("#importDubResults").text( + "Ok... import " + firetable.dtImportName + " (" + firetable.dtImportList.length + " tracks)?" + ); + $("#dubimportButton").show(); + } else { + $("#importDubResults").text("ERROR... NO TRAX?"); + $("#dubimportButton").hide(); + } + } catch (e) { + console.log(e); + $("#importDubResults").text("ERROR"); + $("#dubimportButton").hide(); + } + }; + }, + strip: function (html) { + var doc = firetable.parser.parseFromString(html, "text/html"); + return doc.body.textContent || ""; + }, + hidePlayerControls: function () { + $("head").append( + "" + ); + }, + showPlayerControls: function () { + $(".playerControlsHider").remove(); + }, + showImages: function (chatTxt) { + if (firetable.showImages) { + var imageUrlRegex = /((http(s?):)([/|.|\w|\s|-])*\.(?:jpe?g|gif|png))/g; + var hasImage = chatTxt.search(imageUrlRegex) >= 0; + if (hasImage) { + chatTxt = chatTxt.replace(imageUrlRegex, function (imageUrl) { + var chatImage = new Image(); + chatImage.onload = function () { + if (firetable.utilities.isChatPrettyMuchAtBottom()) firetable.utilities.scrollToBottom(); + }; + chatImage.src = imageUrl; + return ( + '×' + ); + }); + } + } + return chatTxt; + }, + loginLinkToggle: function (id) { + $("#formlinks").find(".selected").removeClass("selected"); + $("#" + id).addClass("selected"); + }, + loginEventsInit: function () { + $("#resetpass").bind("click", function () { + $("#logscreen").css("display", "none"); + $("#createscreen").css("display", "none"); + $("#resetscreen").css("display", "block"); + firetable.ui.loginLinkToggle($(this).attr("id")); + }); + $("#loginlink").bind("click", function () { + $("#logscreen").css("display", "block"); + $("#createscreen").css("display", "none"); + $("#resetscreen").css("display", "none"); + firetable.ui.loginLinkToggle($(this).attr("id")); + }); + $("#signuplink").bind("click", function () { + $("#logscreen").css("display", "none"); + $("#createscreen").css("display", "block"); + $("#resetscreen").css("display", "none"); + firetable.ui.loginLinkToggle($(this).attr("id")); + }); + $("#loginpass").bind("keyup", function (e) { + if (e.which == 13) { + var email = $("#loginemail").val(); + var pass = $("#loginpass").val(); + $("#loginemail").val(""); + $("#loginpass").val(""); + firetable.actions.logIn(email, pass); + } + }); + $("#newpass2").bind("keyup", function (e) { + if (e.which == 13) { + var email = $("#newemail").val(); + var pass = $("#newpass").val(); + var pass2 = $("#newpass2").val(); + var username = $("#newusername").val(); + if (pass == pass2) { + firetable.actions.signUp(email, pass, username); + } else { + alert("Those passwords do not match!"); + } + } + }); + $("#theAddress").bind("keyup", function (e) { + if (e.which == 13) { + var email = $("#theAddress").val(); + firetable.debug && console.log("reset email return"); + ftapi.actions.resetPassword(email, function (error) { + var errorCode = error.code; + var errorMessage = error.message; + if (errorCode === "auth/wrong-password") { + alert("Wrong password."); + } else { + alert(errorMessage); + } + firetable.debug && console.log("send pass reset error:", error); + }); + alert("Reset email sent. Click the reset link when it arrives thanks."); + } + }); + $("#createAccountBttn").bind("click", function () { + var email = $("#newemail").val(); + var pass = $("#newpass").val(); + var pass2 = $("#newpass2").val(); + var termsAgreedTo = $("#agreetoterms").is(":checked"); + var username = $("#newusername").val(); + if (!termsAgreedTo) { + alert( + "You must read and agree to the Terms of Service and Privacy Policy before you can create an account." + ); + } else if (pass != pass2) { + alert("Those passwords do not match!"); + } else { + firetable.actions.signUp(email, pass, username); + } + }); + $("#resetPassBttn").bind("click", function () { + var email = $("#theAddress").val(); + firetable.debug && console.log("reset email click button"); + ftapi.actions.resetPassword(email, function (error) { + var errorCode = error.code; + var errorMessage = error.message; + if (errorCode === "auth/wrong-password") { + alert("Wrong password."); + } else { + alert(errorMessage); + } + firetable.debug && console.log("send pass reset error:", error); + }); + alert("Reset email sent. Click the reset link when it arrives thanks."); + }); + $("#loginBttn").bind("click", function () { + var email = $("#loginemail").val(); + var pass = $("#loginpass").val(); + $("#loginemail").val(""); + $("#loginpass").val(""); + firetable.actions.logIn(email, pass); + }); + }, + loginEventsDestroy: function () { + $("#resetpass").off("click"); + $("#loginlink").off("click"); + $("#signuplink").off("click"); + $("#loginpass").off("keyup"); + $("#newpass2").off("keyup"); + $("#theAddress").off("keyup"); + $("#createAccountBttn").off("click"); + $("#resetPassBttn").off("click"); + $("#loginBttn").off("click"); + }, + init: function () { + $("#mainqueue").sortable({ + start: function (event, ui) { + var start_pos = ui.item.index(); + ui.item.data("start_pos", start_pos); + }, + change: function (event, ui) {}, + update: function (event, ui) { + firetable.debug && console.log("UPDATE"); + firetable.actions.updateQueue(); + }, + }); + //GET SETTINGS FROM LOCALSTORAGE + var disableMediaPlayback = localStorage["firetableDisableMedia"]; + if (typeof disableMediaPlayback == "undefined") { + localStorage["disableMediaPlayback"] = false; + firetable.disableMediaPlayback = false; + $("#mediaDisableToggle").prop("checked", false); + } else { + disableMediaPlayback = JSON.parse(disableMediaPlayback); + firetable.disableMediaPlayback = disableMediaPlayback; + $("#mediaDisableToggle").prop("checked", disableMediaPlayback); + if (disableMediaPlayback) { + firetable.ui.hidePlayerControls(); + } } - } - if (data.blocked) { - block = "blockd"; - blockcon = "block"; - } - - if (!data.username) data.username = data.userid; - - var destination = "#usersRegular"; - var rolename = ""; - if (data.mod) { - rolename = "mod"; - destination = "#usersMod"; - } - if (data.supermod) { - rolename = "supermod"; - destination = "#usersSuper"; - } - if (data.hostbot) { - rolename = "robot"; - destination = "#usersBot"; - } - $("#user" + data.userid).html("
    " + blockcon + "" + herecon + "
    " + data.username + "" + rolename + "joined " + firetable.utilities.format_date(data.joined) + ""); - }); - ftapi.events.on("usersChanged", function(okdata) { - if ($("#loggedInName").text() == ftapi.uid) { - if (ftapi.users[ftapi.uid]) { - if (ftapi.users[ftapi.uid].username) { - $("#loggedInName").text(ftapi.users[ftapi.uid].username); - } + var showImages = localStorage["firetableShowImages"]; + if (typeof showImages == "undefined") { + localStorage["firetableShowImages"] = false; + firetable.showImages = false; + $("#showImagesToggle").prop("checked", false); + } else { + showImages = JSON.parse(showImages); + firetable.showImages = showImages; + $("#showImagesToggle").prop("checked", showImages); } - } - if (ftapi.uid) { - if (ftapi.users[ftapi.uid]) { - if (ftapi.users[ftapi.uid].supermod) { - if ($("#ftSuperCopButton").is(":hidden")) { - $("#ftSuperCopButton").show(); + var showAvatars = localStorage["firetableShowAvatars"]; + if (typeof showAvatars == "undefined") { + localStorage["firetableShowAvatars"] = true; + firetable.showAvatars = true; + $("#showAvatarsToggle").prop("checked", true); + } else { + showAvatars = JSON.parse(showAvatars); + firetable.showAvatars = showAvatars; + $("#showAvatarsToggle").prop("checked", showAvatars); + if (showAvatars == false) { + document.getElementById("actualChat").classList.add("avatarsOff"); } - } } - } - var count = Object.keys(okdata).length; - $("#label1 .count").text(" (" + count + ")"); - firetable.debug && console.log('users:', okdata); - }); - var $chatTemplate = $('#chatKEY').remove(); - ftapi.events.on("newChat", function(chatData) { - var namebo = chatData.id; - var utitle = ""; - - var atBottom = false; - if (firetable.utilities.isChatPrettyMuchAtBottom()) atBottom = true; - - var you = ftapi.uid; - if (ftapi.users[ftapi.uid]) { - if (ftapi.users[ftapi.uid].username) you = ftapi.users[ftapi.uid].username; - } - - if (ftapi.users[chatData.id]) { - if (ftapi.users[chatData.id].username) namebo = ftapi.users[chatData.id].username; - if (ftapi.users[chatData.id].mod) utitle = "mod"; - if (ftapi.users[chatData.id].supermod) utitle = "supermod"; - if (ftapi.users[chatData.id].hostbot) utitle = "robot"; - } else if (chatData.name) { - namebo = chatData.name; - } + var playBadoop = localStorage["firetableBadoop"]; + if (typeof playBadoop == "undefined") { + localStorage["firetableBadoop"] = true; + firetable.playBadoop = true; + $("#badoopToggle").prop("checked", true); + } else { + playBadoop = JSON.parse(playBadoop); + firetable.playBadoop = playBadoop; + $("#badoopToggle").prop("checked", playBadoop); + } + var dtnmt = localStorage["firetableDTNM"]; + if (typeof dtnmt == "undefined") { + localStorage["firetableDTNM"] = false; + firetable.desktopNotifyMentions = false; + $("#desktopNotifyMentionsToggle").prop("checked", false); + } else { + dtnmt = JSON.parse(dtnmt); + firetable.desktopNotifyMentions = dtnmt; + $("#desktopNotifyMentionsToggle").prop("checked", dtnmt); + } + var screenControl = localStorage["firetableScreenControl"]; + if (typeof screenControl == "undefined") { + localStorage["firetableScreenControl"] = "sync"; + firetable.screenControl = "sync"; + $("#screenControlTog" + firetable.screenControl).prop("checked", true); + } else { + firetable.screenControl = screenControl; + $("#screenControlTog" + firetable.screenControl).prop("checked", true); + if (screenControl == "on") { + firetable.utilities.screenDown(); + } else if (screenControl == "off") { + firetable.utilities.screenUp(); + } else if (screenControl == "sync") { + if (firetable.screenSyncPos) { + firetable.utilities.screenDown(); + } else { + firetable.utilities.screenUp(); + } + } + } + var $historyItem = $("#thehistory .pvbar").remove(); + ftapi.events.on("newHistory", function (data) { + if (data.img == "img/idlogo.png" && ftconfigs.defaultAlbumArtUrl.length) + data.img = ftconfigs.defaultAlbumArtUrl; + var firstpart = "yt"; + if (data.type == 2) firstpart == "sc"; + var pkey = firstpart + "cid" + data.cid; + var $histItem = $historyItem.clone(); + $histItem.attr("id", "pvbar" + pkey); + $histItem.attr("data-key", pkey); + $histItem.attr("data-cid", data.cid); + $histItem.attr("data-type", data.type); + + $histItem + .find(".previewicon") + .attr("id", "pv" + pkey) + .on("click", function () { + firetable.actions.pview( + $(this).closest(".pvbar").attr("data-key"), + true, + $(this).closest(".pvbar").attr("data-type"), + true + ); + }); + $histItem + .find(".histlink") + .attr({ + href: data.url, + tabindex: "-1", + }) + .text(data.artist + " - " + data.title); + $histItem.find(".histdj").text(data.dj); + $histItem.find(".histdate").text(firetable.utilities.format_date(data.when)); + $histItem.find(".histtime").text(firetable.utilities.format_time(data.when)); + $histItem + .find(".histeal") + .attr("id", "apv" + data.type + data.cid) + .on("click", function () { + firetable.actions.queueTrack( + $(this).closest(".pvbar").attr("data-cid"), + firetable.utilities.htmlEscape($(this).closest(".pvbar").find(".histlink").text()), + $(this).closest(".pvbar").attr("data-type"), + true + ); + }); + $histItem.find(".histart").css("background-image", "url(" + data.img + ")"); + $histItem.prependTo("#thehistory"); + // simplebar scroll update? + }); + ftapi.events.on("newTheme", function (data) { + if (!data) { + //no theme + $("#currentTheme").text("!suggest a theme"); + } else { + var txtOut = firetable.ui.strip(data); + txtOut = firetable.ui.textToLinks(txtOut, true); + txtOut = firetable.utilities.emojiShortnamestoUnicode(txtOut); + txtOut = txtOut.replace(/\`(.*?)\`/g, function (x) { + return "" + x.replace(/\`/g, "") + ""; + }); + $("#currentTheme").html(txtOut); + twemoji.parse(document.getElementById("currentTheme")); + } + }); + ftapi.events.on("tagUpdate", function (data) { + firetable.debug && console.log("TAG UPDATE", data); + firetable.tagUpdate = data; + if (firetable.song) { + if (firetable.song.cid == data.cid && data.adamData.track_name) { + $("#track").text(firetable.ui.strip(data.adamData.track_name)); + $("#artist").text(firetable.ui.strip(data.adamData.artist)); + var nicename = firetable.song.djname; + var showPlaycount = false; + if (data.adamData.playcount) { + if (data.adamData.playcount > 0) { + showPlaycount = true; + } + } + if (data.adamData.last_play) { + $("#lastPlay").text( + "last " + + firetable.utilities.format_date(data.adamData.last_play) + + " by " + + data.adamData.last_play_dj + ); + } else { + $("#lastPlay").text(""); + } + if (data.adamData.first_play) { + $("#firstPlay").text( + "first " + + firetable.utilities.format_date(data.adamData.first_play) + + " by " + + data.adamData.first_play_dj + ); + } else { + $("#firstPlay").text(""); + } + var doTheScrollThing = firetable.utilities.isChatPrettyMuchAtBottom(); + if (showPlaycount) { + $("#playCount").text(data.adamData.playcount + " plays"); + $(".npmsg" + data.cid) + .last() + .html( + '
    DJ ' + + nicename + + " started playing " + + data.adamData.track_name + + " by " + + data.adamData.artist + + "
    This song has been played " + + data.adamData.playcount + + " times.
    " + ); + } else { + $("#playCount").text(""); + $(".npmsg" + data.cid) + .last() + .html( + '
    DJ ' + + nicename + + " started playing " + + data.adamData.track_name + + " by " + + data.adamData.artist + + "
    " + ); + } + if (doTheScrollThing) firetable.utilities.scrollToBottom(); + } + } + }); - var badoop = false; - if (chatData.txt.match("@" + you, 'i') || chatData.txt.match(/\@everyone/)) { - var oknow = Date.now(); - if (oknow - chatData.time < (10 * 1000)) { - firetable.utilities.playSound("sound"); - if (firetable.desktopNotifyMentions) firetable.utilities.desktopNotify(chatData, namebo); - badoop = true; - } - } - if (chatData.id == firetable.lastChatPerson && !badoop) { - $("#chat" + firetable.lastChatId + " .chatContent").append("
    "); - $("#chatTime" + firetable.lastChatId).text(firetable.utilities.format_time(chatData.time)); - var txtOut = firetable.ui.strip(chatData.txt); - txtOut = firetable.ui.showImages(txtOut); - txtOut = firetable.ui.textToLinks(txtOut); - txtOut = firetable.utilities.emojiShortnamestoUnicode(txtOut); - txtOut = txtOut.replace(/\`(.*?)\`/g, function(x) { - return "" + x.replace(/\`/g, "") + ""; - }); - if (chatData.hidden) txtOut = "[message removed]"; - $("#chattxt" + chatData.chatID).html(txtOut); - var canBeDeleted = false; - if (ftapi.users[ftapi.uid].mod || ftapi.users[ftapi.uid].supermod) { - if (ftapi.users[chatData.id]) { - if (!ftapi.users[chatData.id].mod && !ftapi.users[chatData.id].supermod) { - canBeDeleted = true; - } - } else { - canBeDeleted = true; - } - if (canBeDeleted && !chatData.hidden) { - // add delete button - $("#chattxt" + chatData.chatID).addClass("deleteMe"); - $("#chattxt" + chatData.chatID).append("
    x
    "); - $("#chattxt" + chatData.chatID).find(".modDelete").on('click', function() { - console.log("DELETE CHAT", chatData); - ftapi.actions.deleteChat(chatData.feedID); + ftapi.events.on("newSong", function (data) { + $("#playCount").text(""); + $("#lastPlay").text(""); + $("#firstPlay").text(""); + window.dispatchEvent(new Event("resize")); + $("#cloud_with_rain").removeClass("on"); + $("#fire").removeClass("on"); + $("#timr").countdown("destroy"); + if (firetable.moveBar != null) { + clearInterval(firetable.moveBar); + firetable.moveBar = null; + } + if (data.image == "img/idlogo.png" && ftconfigs.defaultAlbumArtUrl.length) + data.image = ftconfigs.defaultAlbumArtUrl; + $("#prgbar").css("background", "#151515"); + var showPlaycount = false; + if (firetable.tagUpdate) { + if (data.cid == firetable.tagUpdate.cid && firetable.tagUpdate.adamData.track_name) { + data.title = firetable.tagUpdate.adamData.track_name; + data.artist = firetable.tagUpdate.adamData.artist; + if (firetable.tagUpdate.adamData.last_play) { + $("#lastPlay").text( + "last " + + firetable.utilities.format_date(firetable.tagUpdate.adamData.last_play) + + " by " + + firetable.tagUpdate.adamData.last_play_dj + ); + } + if (firetable.tagUpdate.adamData.first_play) { + $("#firstPlay").text( + "first " + + firetable.utilities.format_date(firetable.tagUpdate.adamData.first_play) + + " by " + + firetable.tagUpdate.adamData.first_play_dj + ); + } + if (firetable.tagUpdate.adamData.playcount) { + if (firetable.tagUpdate.adamData.playcount > 0) { + showPlaycount = true; + $("#playCount").text(firetable.tagUpdate.adamData.playcount + " plays"); + } + } + } + } + $("#track").text(firetable.ui.strip(data.title)); + $("#artist").text(firetable.ui.strip(data.artist)); + $("#songlink").attr("href", data.url); + $("#albumArt").css("background-image", "url(" + data.image + ")"); + var nownow = Date.now(); + var timeSince = nownow - data.started; + if (timeSince <= 0) timeSince = 0; + var secSince = Math.floor(timeSince / 1000); + var timeLeft = data.duration - secSince; + firetable.song = data; + firetable.debug && console.log("NEW TRACK", data); + firetable.debug && console.log("time since:", timeSince); + if (data.type == 1) { + $("#scScreen").hide(); + $("#songlink").html( + '' + ); + } else if (data.type == 2) { + $("#scScreen").show(); + $("#songlink").html( + '' + ); + var biggerImg = data.image.replace("-large", "-t500x500"); + firetable.scImg = biggerImg; + $("#albumArt").css("background-image", "url(" + biggerImg + ")"); + try { + setup(biggerImg); + } catch (e) { + firetable.debug && console.log("big image error:", e); + } + } + if (data.type == 1 && firetable.ytLoaded) { + if (!firetable.preview) { + if (firetable.scLoaded) firetable.scwidget.pause(); + if (!firetable.disableMediaPlayback) player.loadVideoById(data.cid, secSince, "large"); + var thevolactual = $("#slider").slider("value"); + player.setVolume(thevolactual); + firetable.scwidget.setVolume(thevolactual); + } + } else if (data.type == 2 && firetable.scLoaded) { + if (!firetable.preview) { + if (firetable.ytLoaded) player.stopVideo(); + firetable.scSeek = timeSince; + if (!firetable.disableMediaPlayback) + firetable.scwidget.load("http://api.soundcloud.com/tracks/" + data.cid, { + auto_play: true, + single_active: false, + callback: function () { + var thevolactual = localStorage["firetableVol"]; + player.setVolume(thevolactual); + firetable.scwidget.setVolume(thevolactual); + }, + }); + } + } + if (data.cid != 0) { + var nicename = data.djid; + if (ftapi.users[data.djid]) { + if (ftapi.users[data.djid].username) nicename = ftapi.users[data.djid].username; + } + if (firetable.nonpmsg) { + firetable.nonpmsg = false; + } else { + var doTheScrollThing = firetable.utilities.isChatPrettyMuchAtBottom(); + if (showPlaycount) { + $("#chats").append( + '
    DJ ' + + nicename + + " started playing " + + data.title + + " by " + + data.artist + + "
    This song has been played " + + firetable.tagUpdate.adamData.playcount + + " times.
    " + ); + } else { + $("#chats").append( + '
    DJ ' + + nicename + + " started playing " + + data.title + + " by " + + data.artist + + "
    " + ); + } + if (doTheScrollThing) firetable.utilities.scrollToBottom(); + firetable.lastChatPerson = false; + firetable.lastChatId = false; + } + } + $("#timr").countdown({ + until: timeLeft, + compact: true, + description: "", + format: "MS", }); - } - } - twemoji.parse(document.getElementById("chattxt" + chatData.chatID)); - - } else { - var $chatthing = $chatTemplate.clone(); - $chatthing.attr('id', "chat" + chatData.chatID); - $chatthing.find('.botson').css('background-image', "url(https://indiediscotheque.com/robots/" + chatData.id + namebo + ".png?size=110x110"); - $chatthing.find('.utitle').html(utitle); - $chatthing.find('.chatTime').attr('id', "chatTime" + chatData.chatID).html(firetable.utilities.format_time(chatData.time)); - if (badoop) $chatthing.addClass('badoop'); - var txtOut = firetable.ui.strip(chatData.txt); - txtOut = firetable.ui.showImages(txtOut); - txtOut = firetable.ui.textToLinks(txtOut); - txtOut = firetable.utilities.emojiShortnamestoUnicode(txtOut); - txtOut = txtOut.replace(/\`(.*?)\`/g, function(x) { - return "" + x.replace(/\`/g, "") + ""; - }); - if (chatData.hidden) txtOut = "[message removed]"; - $chatthing.find(".chatText").html(txtOut).attr('id', "chattxt" + chatData.chatID); - console.log(chatData); - - $chatthing.find(".chatName").text(namebo); - firetable.utilities.chatAt($chatthing.find('.botson')); // adds the click event to @ the user - firetable.utilities.chatAt($chatthing.find('.chatName')); // adds the click event to @ the user - twemoji.parse($chatthing.find(".chatText")[0]); - $chatthing.appendTo("#chats"); - try { - if (ftapi.users[ftapi.uid].mod || ftapi.users[ftapi.uid].supermod) { - var canBeDeleted = false; - if (ftapi.users[chatData.id]) { - if (!ftapi.users[chatData.id].mod && !ftapi.users[chatData.id].supermod && !chatData.hidden) { - canBeDeleted = true; - } + firetable.moveBar = setInterval(function () { + var now = Date.now(); + var sofar = now - firetable.song.started; + var pcnt = (sofar / (firetable.song.duration * 1000)) * 100; + $("#prgbar").css( + "background", + "linear-gradient(90deg, " + firetable.color + " " + pcnt + "%, #151515 " + pcnt + "%)" + ); + }, 500); + }); + ftapi.events.on("screenStateChanged", function (data) { + firetable.debug && console.log("thescreen:", data); + firetable.screenSyncPos = data; + if (firetable.screenControl == "sync") { + if (data) { + firetable.utilities.screenDown(); + } else { + firetable.utilities.screenUp(); + } + } + }); + ftapi.events.on("danceStateChanged", function (data) { + firetable.debug && console.log("dance check:", data); + if (data) { + $("#deck").addClass("dance"); } else { - canBeDeleted = true; - } - if (canBeDeleted && !chatData.hidden) { - // add delete button - $chatthing.find(".chatText").addClass("deleteMe"); - $chatthing.find(".chatText").append("
    x
    "); - $chatthing.find(".modDelete").on('click', function() { - ftapi.actions.deleteChat(chatData.feedID); - }); - } - } - } catch (e) { - console.log(e) - } - firetable.lastChatPerson = chatData.id; - firetable.lastChatId = chatData.chatID; - } - - if (chatData.card) { - $("#chattxt" + chatData.chatID).append(""); - - firetable.actions.showCard(chatData.card, chatData.chatID); - firetable.debug && console.log("showin card"); - } + $("#deck").removeClass("dance"); + } + }); + ftapi.events.on("lightsChanged", function (data) { + firetable.debug && console.log("lights check:", data); + if (data) { + firetable.lights = true; + $(".festiveLights").remove(); + var colorThing = firetable.utilities.hexToRGB(firetable.color); + var style = + ""; + $("head").append(style); + } else { + $(".festiveLights").remove(); + firetable.lights = false; + } + }); + ftapi.events.on("waitlistChanged", function (data) { + var ok1 = ""; + var cnt = "0"; + if (data) { + var countr = 1; + for (var key in data) { + firetable.debug && console.log("waitlist", data); + if (data.hasOwnProperty(key)) { + cnt = countr; + var removeMe = ""; + if (data[key].removeAfter) removeMe = "departure_board"; + ok1 += + '
    ' + + countr + + ". " + + data[key].name + + ' ' + + removeMe + + "
    "; + countr++; + } + } + } + $("#label2 .count").text(" (" + cnt + ")"); + $("#justwaitlist").html(ok1); + }); + ftapi.events.on("tableChanged", function (data) { + var ok1 = ""; + if (data) { + var countr = 0; + for (var key in data) { + if (data.hasOwnProperty(key)) { + var removeMe = ""; + if (data[key].removeAfter) removeMe = "departure_board"; + + ok1 += + '
    ' + + removeMe + + " " + + data[key].name + + '
    ' + + data[key].plays + + '/' + + firetable.playlimit + + "
    "; + countr++; + } + } + if (countr < 4) { + ok1 += + '
    !addme
    '; + countr++; + for (var i = countr; i < 4; i++) { + ok1 += '
     
    '; + } + } + } else { + ok1 += + '
    !addme
    '; + for (var i = 0; i < 3; i++) { + ok1 += '
     
    '; + } + } + $("#deck").html(ok1); + for (var i = 0; i < 4; i++) { + if (i != firetable.playdex) { + $("#avtr" + i).removeClass("animate"); + $("#djthing" + i).removeClass("djActive"); + } else { + $("#avtr" + i).addClass("animate"); + $("#djthing" + i).addClass("djActive"); + } + } + }); + ftapi.events.on("spotlightStateChanged", function (data) { + firetable.playdex = data; + for (var i = 0; i < 4; i++) { + if (i != data) { + $("#avtr" + i).removeClass("animate"); + $("#djthing" + i).removeClass("djActive"); + } else { + $("#avtr" + i).addClass("animate"); + $("#djthing" + i).addClass("djActive"); + } + } + }); + ftapi.events.on("playLimitChanged", function (data) { + firetable.playlimit = data; + for (var i = 0; i < 4; i++) { + $("#plimit" + i).text(data); + } + }); + ftapi.events.on("banListChanged", function (data) { + $("#activeSuspentions").html(""); + for (key in data) { + if (data[key]) { + ftapi.lookup.userByName(key, function (person) { + $("#activeSuspentions").append( + '
    ' + + person.username + + '
    ' + ); + }); + } + } + }); + ftapi.events.on("userJoined", function (data) { + console.log(data); + var user = data; + var block = ""; + var blockcon = ""; + var herecon = "lens"; + var isIdle = ""; + if (data.idle) { + if (data.idle.isIdle && !data.hostbot) isIdle = "idle"; + if (data.idle.audio == 2) { + herecon = "label_important"; + } + } + if (data.blocked) { + block = "blockd"; + blockcon = "block"; + } - if (atBottom || ftapi.uid == chatData.id) firetable.utilities.scrollToBottom(); - else $('#morechats').addClass('show'); - }); + if (!data.username) data.username = data.userid; - ftapi.events.on("chatRemoved", function(data) { - console.log("CHAT DELETED", data); - $("#chattxt" + data.chatID).text("[message removed]"); - if (ftapi.users[ftapi.uid].mod || ftapi.users[ftapi.uid].supermod) $("#chattxt" + data.chatID).removeClass("deleteMe"); - }); + var destination = "#usersRegular"; + var rolename = ""; + if (data.mod) { + rolename = "mod"; + destination = "#usersMod"; + } + if (data.supermod) { + rolename = "supermod"; + destination = "#usersSuper"; + } + if (data.hostbot) { + rolename = "robot"; + destination = "#usersBot"; + } - ftapi.events.on("playlistChanged", function(okdata, listID) { - firetable.queue = okdata; - $('#mainqueue').html(""); - for (var key in okdata) { - if (okdata.hasOwnProperty(key)) { - var $newli = $playlistItemTemplate.clone(); - var thisone = okdata[key]; - var psign = ""; - if (key == firetable.preview) { - psign = ""; - } - $newli.attr('id', "pvbar" + key); - $newli.attr("data-key", key); - $newli.attr("data-type", thisone.type); - $newli.find('.previewicon').attr('id', "pv" + key).on('click', function() { - firetable.actions.pview($(this).closest('.pvbar').attr('data-key'), false, $(this).closest('.pvbar').attr('data-type')); - }).html(psign); - $newli.find('.listwords').html(thisone.name); - $newli.find('.bumpsongs').on('click', function() { - firetable.actions.bumpSongInQueue($(this).closest('.pvbar').attr('data-key')) - }); - $newli.find('.bottomsongs').on('click', function() { - var oldID = $(this).closest('.pvbar').attr('data-key'); - ftapi.actions.moveTrackToBottom($(this).closest('.pvbar').attr('data-key'), function(newID) { - if (firetable.preview) { - // visually update preview in the new location if applicable - if (firetable.preview == oldID) { - firetable.preview = newID; - $("#pv" + newID).html(""); + var newUserToAddX = $("
    "); + newUserToAddX.addClass("prson " + block); + newUserToAddX.attr("id", "user" + data.userid); + newUserToAddX.html( + '
    ' + + blockcon + + '' + + herecon + + '
    ' + + data.username + + '' + + rolename + + 'joined ' + + firetable.utilities.format_date(data.joined) + + "" + ); + firetable.utilities.chatAt(newUserToAddX); // adds the click event to @ the user + $(destination).append(newUserToAddX); + }); + ftapi.events.on("userLeft", function (data) { + $("#user" + data.userid).remove(); + }); + ftapi.events.on("userChanged", function (data) { + var user = data; + var block = ""; + var blockcon = ""; + var herecon = "lens"; + var isIdle = ""; + console.log("CHANGE", data); + if (data.idle) { + if (data.idle.isIdle && !data.hostbot) isIdle = "idle"; + if (data.idle.audio == 2) { + herecon = "label_important"; } - } - }); - }); - if (thisone.flagged) { - var flagLabel = "broken"; - var flagIcon = "warning"; - if (thisone.flagged.code == 7) { - flagLabel = "age restricted"; - } else if (thisone.flagged.code >= 8) { - if (thisone.flagged.code == 8) { - // manual broken flagged by mod - flagLabel = "broken (manual)"; - } else if (thisone.flagged.code == 9) { - // low quality - flagLabel = "low audio quality"; - flagIcon = "disc_full"; - } else if (thisone.flagged.code == 10) { - // offtheme - flagLabel = "offtheme"; - flagIcon = "flag"; - } } - $newli.find('.track-warning').html(" " + flagIcon + " "); - $newli.find('.track-warning').prop('title', 'Flagged as ' + flagLabel + ' on ' + firetable.utilities.format_date(thisone.flagged.date) + '. Click to remove flag.'); - $newli.find('.track-warning').on('click', function() { - ftapi.actions.unflagTrack($(this).closest('.pvbar').attr('data-key')); - $(this).html(""); - }); + if (data.blocked) { + block = "blockd"; + blockcon = "block"; + } - } - $newli.find('.edittags').on('click', function() { - firetable.actions.editTagsPrompt($(this).closest('.pvbar').attr('data-key')) - }); - $newli.find('.deletesong').on('click', function() { - firetable.actions.deleteSong($(this).closest('.pvbar').attr('data-key')) - }); - $('#mainqueue').append($newli); - } - } - }); + if (!data.username) data.username = data.userid; - firetable.ui.LinkGrabber.start(); + var destination = "#usersRegular"; + var rolename = ""; + if (data.mod) { + rolename = "mod"; + destination = "#usersMod"; + } + if (data.supermod) { + rolename = "supermod"; + destination = "#usersSuper"; + } + if (data.hostbot) { + rolename = "robot"; + destination = "#usersBot"; + } + + $("#user" + data.userid).html( + '
    ' + + blockcon + + '' + + herecon + + '
    ' + + data.username + + '' + + rolename + + 'joined ' + + firetable.utilities.format_date(data.joined) + + "" + ); + }); + ftapi.events.on("usersChanged", function (okdata) { + if ($("#loggedInName").text() == ftapi.uid) { + if (ftapi.users[ftapi.uid]) { + if (ftapi.users[ftapi.uid].username) { + $("#loggedInName").text(ftapi.users[ftapi.uid].username); + } + } + } + if (ftapi.uid) { + if (ftapi.users[ftapi.uid]) { + if (ftapi.users[ftapi.uid].supermod) { + if ($("#ftSuperCopButton").is(":hidden")) { + $("#ftSuperCopButton").show(); + } + } + } + } + var count = Object.keys(okdata).length; + $("#label1 .count").text(" (" + count + ")"); + firetable.debug && console.log("users:", okdata); + }); + var $chatTemplate = $("#chatKEY").remove(); + ftapi.events.on("newChat", function (chatData) { + var namebo = chatData.id; + var utitle = ""; - $("#label1").bind("click.lb1tab", firetable.ui.usertab1); - $("#label2").bind("click.lb2tab", firetable.ui.usertab2); - $("#addToQueueBttn").bind("click", function() { - $("#mainqueuestuff").css("display", "none"); - $("#filterMachine").css("display", "none"); - $("#addbox").css("display", "flex"); - $("#cancelqsearch").show(); - $("#qControlButtons").hide(); + var atBottom = false; + if (firetable.utilities.isChatPrettyMuchAtBottom()) atBottom = true; - $("#plmanager").css("display", "none"); - }); + var you = ftapi.uid; + if (ftapi.users[ftapi.uid]) { + if (ftapi.users[ftapi.uid].username) you = ftapi.users[ftapi.uid].username; + } - $("#minimodeoptions .tab").bind("click", function(event) { - $("#mainGrid").removeClass().addClass($(this).attr('id')); - $("#minimodeoptions .tab").removeClass('on'); - $(this).addClass('on'); - }); + if (ftapi.users[chatData.id]) { + if (ftapi.users[chatData.id].username) namebo = ftapi.users[chatData.id].username; + if (ftapi.users[chatData.id].mod) utitle = "mod"; + if (ftapi.users[chatData.id].supermod) utitle = "supermod"; + if (ftapi.users[chatData.id].hostbot) utitle = "robot"; + } else if (chatData.name) { + namebo = chatData.name; + } - $("#plmaker").bind("keyup", function(e) { - if (e.which == 13) { - var val = $("#plmaker").val(); - if (val != "") { - var listid = ftapi.actions.createList(val); - $("#listpicker").append(""); - $("#listpicker").val(listid).change(); - ftapi.actions.switchList(listid); - } - } - }); - $("#cancelqsearch").bind("click", function() { - $("#mainqueuestuff").css("display", "block"); - $("#filterMachine").css("display", "block"); - $("#cancelqsearch").hide(); - $("#qControlButtons").show(); - - $("#addbox").css("display", "none"); - if (firetable.preview) { - if (firetable.preview.slice(0, 5) == "ytcid" || firetable.preview.slice(0, 5) == "sccid") { - $("#pv" + firetable.preview).html(""); - clearTimeout(firetable.ptimeout); - firetable.ptimeout = null; - $("#pvbar" + firetable.preview).css("background-image", "none"); - clearInterval(firetable.movePvBar); - firetable.movePvBar = null; - firetable.preview = false; - //start regular song - var nownow = Date.now(); - var timeSince = nownow - firetable.song.started; - if (timeSince <= 0) timeSince = 0; - - var secSince = Math.floor(timeSince / 1000); - var timeLeft = firetable.song.duration - secSince; - if (firetable.song.type == 1) { - if (!firetable.preview) { - if (firetable.scLoaded) firetable.scwidget.pause(); - if (!firetable.disableMediaPlayback) player.loadVideoById(firetable.song.cid, secSince, "large"); + var badoop = false; + if (chatData.txt.match("@" + you, "i") || chatData.txt.match(/\@everyone/)) { + var oknow = Date.now(); + if (oknow - chatData.time < 10 * 1000) { + firetable.utilities.playSound("sound"); + if (firetable.desktopNotifyMentions) firetable.utilities.desktopNotify(chatData, namebo); + badoop = true; + } } - } else if (firetable.song.type == 2) { - if (!firetable.preview) { - if (firetable.ytLoaded) player.stopVideo(); - firetable.scSeek = timeSince; - if (!firetable.disableMediaPlayback) firetable.scwidget.load("http://api.soundcloud.com/tracks/" + firetable.song.cid, { - auto_play: true - }); + if (chatData.id == firetable.lastChatPerson && !badoop) { + $("#chat" + firetable.lastChatId + " .chatContent").append( + '
    ' + ); + $("#chatTime" + firetable.lastChatId).text(firetable.utilities.format_time(chatData.time)); + var txtOut = firetable.ui.strip(chatData.txt); + txtOut = firetable.ui.showImages(txtOut); + txtOut = firetable.ui.textToLinks(txtOut); + txtOut = firetable.utilities.emojiShortnamestoUnicode(txtOut); + txtOut = txtOut.replace(/\`(.*?)\`/g, function (x) { + return "" + x.replace(/\`/g, "") + ""; + }); + if (chatData.hidden) txtOut = "[message removed]"; + $("#chattxt" + chatData.chatID).html(txtOut); + var canBeDeleted = false; + if (ftapi.users[ftapi.uid].mod || ftapi.users[ftapi.uid].supermod) { + if (ftapi.users[chatData.id]) { + if (!ftapi.users[chatData.id].mod && !ftapi.users[chatData.id].supermod) { + canBeDeleted = true; + } + } else { + canBeDeleted = true; + } + if (canBeDeleted && !chatData.hidden) { + // add delete button + $("#chattxt" + chatData.chatID).addClass("deleteMe"); + $("#chattxt" + chatData.chatID).append('
    x
    '); + $("#chattxt" + chatData.chatID) + .find(".modDelete") + .on("click", function () { + console.log("DELETE CHAT", chatData); + ftapi.actions.deleteChat(chatData.feedID); + }); + } + } + twemoji.parse(document.getElementById("chattxt" + chatData.chatID)); + } else { + var $chatthing = $chatTemplate.clone(); + $chatthing.attr("id", "chat" + chatData.chatID); + $chatthing + .find(".botson") + .css( + "background-image", + "url(https://indiediscotheque.com/robots/" + chatData.id + namebo + ".png?size=110x110" + ); + $chatthing.find(".utitle").html(utitle); + $chatthing + .find(".chatTime") + .attr("id", "chatTime" + chatData.chatID) + .html(firetable.utilities.format_time(chatData.time)); + if (badoop) $chatthing.addClass("badoop"); + var txtOut = firetable.ui.strip(chatData.txt); + txtOut = firetable.ui.showImages(txtOut); + txtOut = firetable.ui.textToLinks(txtOut); + txtOut = firetable.utilities.emojiShortnamestoUnicode(txtOut); + txtOut = txtOut.replace(/\`(.*?)\`/g, function (x) { + return "" + x.replace(/\`/g, "") + ""; + }); + if (chatData.hidden) txtOut = "[message removed]"; + $chatthing + .find(".chatText") + .html(txtOut) + .attr("id", "chattxt" + chatData.chatID); + console.log(chatData); + + $chatthing.find(".chatName").text(namebo); + firetable.utilities.chatAt($chatthing.find(".botson")); // adds the click event to @ the user + firetable.utilities.chatAt($chatthing.find(".chatName")); // adds the click event to @ the user + twemoji.parse($chatthing.find(".chatText")[0]); + $chatthing.appendTo("#chats"); + try { + if (ftapi.users[ftapi.uid].mod || ftapi.users[ftapi.uid].supermod) { + var canBeDeleted = false; + if (ftapi.users[chatData.id]) { + if ( + !ftapi.users[chatData.id].mod && + !ftapi.users[chatData.id].supermod && + !chatData.hidden + ) { + canBeDeleted = true; + } + } else { + canBeDeleted = true; + } + if (canBeDeleted && !chatData.hidden) { + // add delete button + $chatthing.find(".chatText").addClass("deleteMe"); + $chatthing.find(".chatText").append('
    x
    '); + $chatthing.find(".modDelete").on("click", function () { + ftapi.actions.deleteChat(chatData.feedID); + }); + } + } + } catch (e) { + console.log(e); + } + firetable.lastChatPerson = chatData.id; + firetable.lastChatId = chatData.chatID; } - } - } - } - }); - $("#grab").bind("click", function() { - var isHidden = $("#stealContain").is(":hidden"); - if (isHidden) { - ftapi.lookup.allLists(function(allPlaylists) { - $("#stealpicker").html(""); - for (var key in allPlaylists) { - if (allPlaylists.hasOwnProperty(key)) { - $("#stealpicker").append(""); - } - } - $('#grab').addClass('on'); - $("#stealContain").css({ - 'top': $('#grab').offset().top + $('#grab').height(), - 'left': $('#grab').offset().left - 16 - }).show(); - }); - - } else { - $('#grab').removeClass('on'); - $("#stealContain").hide(); - } - }); - $("#shuffleQueue").bind("click", firetable.actions.shuffleQueue); - $("#history").bind("click", function() { - $("#thehistoryWrap").slideToggle().css('top', $('#stage').outerHeight() + $('#topbar').outerHeight()); - $(this).toggleClass('on'); - }); - $("#startMerge").bind("click", function() { - var source = $("#mergepicker").val(); - var sourceName = $("#mergepicker option:selected").text(); - var dest = $("#mergepicker2").val(); - var destName = $("#mergepicker2 option:selected").text(); - $("#mergeSetup").hide(); - $("#mergeHappening").show(); - firetable.debug && console.log(sourceName + " -> " + destName); - firetable.actions.mergeLists(source, dest, sourceName); - }); - $("#mergeOK").bind("click", function() { - $("#mergeSetup").show(); - $("#mergeCompleted").hide(); - $("#mergeHappening").hide(); - $("#mergeContain").hide(); - }); - $("#mergeLists").bind("click", function() { - var $this = $(this); - var isHidden = $("#mergeContain").is(":hidden"); - if (isHidden) { - ftapi.lookup.allLists(function(allPlaylists) { - $("#mergepicker").html(""); - $("#mergepicker2").html(""); - for (var key in allPlaylists) { - if (allPlaylists.hasOwnProperty(key)) { - $("#mergepicker").append(""); - $("#mergepicker2").append(""); - } - } - if (ftapi.users[ftapi.uid]) { - if (ftapi.users[ftapi.uid].selectedList) { - $("#mergepicker").val(ftapi.users[ftapi.uid].selectedList).change(); - $("#mergepicker2").val(-1).change(); - } - } - $("#mergeContain").show(); - $this.addClass('on'); - }); - - } else { - $("#mergeContain").hide(); - $this.removeClass('on'); - } - }); - $("#reloadtrack").bind("click", firetable.actions.reloadtrack); + if (chatData.card) { + $("#chattxt" + chatData.chatID).append( + '' + ); - $("#importDubGo").bind("click", firetable.actions.dubtrackImport); + firetable.actions.showCard(chatData.card, chatData.chatID); + firetable.debug && console.log("showin card"); + } - $("#volstatus").bind("click", function() { - firetable.actions.muteToggle(); - }); - $(".openModal").bind("click", function() { - var modalContentID = $(this).attr('data-modal'); - $(".modalThing").removeClass('show'); - $("#overlay").addClass('show'); - $("#" + modalContentID).addClass('show'); - }); - $(".closeModal").bind("click", function() { - $("#overlay").removeClass('show'); - $("#deletepicker").html(""); - firetable.actions.cardCase(); - $("#plMachine").val(""); - }); - $(document).on("click", ".closeeditor", function() { - $(this).closest('.pvbar').removeClass('editing').find('.tagPromptBox').remove(); - firetable.songToEdit = null; - }); - $("#cardCaseButton").bind("click", function() { - firetable.actions.cardCase(); - $("#cardsOverlay").show(); - }); - $("#pickerNav").on("click", "span", function() { - try { - var sec = $(this)[0].id; - firetable.emojis.sec(sec); - } catch (s) {} - }); - $("#pickEmoji").bind("click", function() { - //toggle emoji picker - if ($("#emojiPicker").is(":hidden")) { - $(this).addClass('on'); - $("#emojiPicker").slideDown(function() { - $('#pickerSearch').focus(); + if (atBottom || ftapi.uid == chatData.id) firetable.utilities.scrollToBottom(); + else $("#morechats").addClass("show"); }); - if (!firetable.pickerInit) { - const makeRequest = async () => { - twemoji.parse(document.getElementById("pickerResults")); - return true; - } + ftapi.events.on("chatRemoved", function (data) { + console.log("CHAT DELETED", data); + $("#chattxt" + data.chatID).text("[message removed]"); + if (ftapi.users[ftapi.uid].mod || ftapi.users[ftapi.uid].supermod) + $("#chattxt" + data.chatID).removeClass("deleteMe"); + }); - makeRequest() - } - } else { - $(this).removeClass('on'); - $("#emojiPicker").slideUp(function() { - $('#pickerSearch').val('').trigger('change'); - $('#newchat').focus(); + ftapi.events.on("playlistChanged", function (okdata, listID) { + firetable.queue = okdata; + $("#mainqueue").html(""); + for (var key in okdata) { + if (okdata.hasOwnProperty(key)) { + var $newli = $playlistItemTemplate.clone(); + var thisone = okdata[key]; + var psign = ""; + if (key == firetable.preview) { + psign = ""; + } + $newli.attr("id", "pvbar" + key); + $newli.attr("data-key", key); + $newli.attr("data-type", thisone.type); + $newli + .find(".previewicon") + .attr("id", "pv" + key) + .on("click", function () { + firetable.actions.pview( + $(this).closest(".pvbar").attr("data-key"), + false, + $(this).closest(".pvbar").attr("data-type") + ); + }) + .html(psign); + $newli.find(".listwords").html(thisone.name); + $newli.find(".bumpsongs").on("click", function () { + firetable.actions.bumpSongInQueue($(this).closest(".pvbar").attr("data-key")); + }); + $newli.find(".bottomsongs").on("click", function () { + var oldID = $(this).closest(".pvbar").attr("data-key"); + ftapi.actions.moveTrackToBottom($(this).closest(".pvbar").attr("data-key"), function (newID) { + if (firetable.preview) { + // visually update preview in the new location if applicable + if (firetable.preview == oldID) { + firetable.preview = newID; + $("#pv" + newID).html(""); + } + } + }); + }); + if (thisone.flagged) { + var flagLabel = "broken"; + var flagIcon = "warning"; + if (thisone.flagged.code == 7) { + flagLabel = "age restricted"; + } else if (thisone.flagged.code >= 8) { + if (thisone.flagged.code == 8) { + // manual broken flagged by mod + flagLabel = "broken (manual)"; + } else if (thisone.flagged.code == 9) { + // low quality + flagLabel = "low audio quality"; + flagIcon = "disc_full"; + } else if (thisone.flagged.code == 10) { + // offtheme + flagLabel = "offtheme"; + flagIcon = "flag"; + } + } + $newli.find(".track-warning").html(' ' + flagIcon + " "); + $newli + .find(".track-warning") + .prop( + "title", + "Flagged as " + + flagLabel + + " on " + + firetable.utilities.format_date(thisone.flagged.date) + + ". Click to remove flag." + ); + $newli.find(".track-warning").on("click", function () { + ftapi.actions.unflagTrack($(this).closest(".pvbar").attr("data-key")); + $(this).html(""); + }); + } + $newli.find(".edittags").on("click", function () { + firetable.actions.editTagsPrompt($(this).closest(".pvbar").attr("data-key")); + }); + $newli.find(".deletesong").on("click", function () { + firetable.actions.deleteSong($(this).closest(".pvbar").attr("data-key")); + }); + $("#mainqueue").append($newli); + } + } }); - } - }); - $("#morechats .butt").bind("click", function() { - firetable.utilities.scrollToBottom(); - }); + firetable.ui.LinkGrabber.start(); - $("#fire").bind("click", function() { - ftapi.actions.sendChat(":fire:"); - $("#cloud_with_rain").removeClass("on"); - $("#fire").addClass("on"); - }); + $("#label1").bind("click.lb1tab", firetable.ui.usertab1); + $("#label2").bind("click.lb2tab", firetable.ui.usertab2); + $("#addToQueueBttn").bind("click", function () { + $("#mainqueuestuff").css("display", "none"); + $("#filterMachine").css("display", "none"); + $("#addbox").css("display", "flex"); + $("#cancelqsearch").show(); + $("#qControlButtons").hide(); - $("#cloud_with_rain").bind("click", function() { - ftapi.actions.sendChat(":cloud_with_rain:"); - $("#cloud_with_rain").addClass("on"); - $("#fire").removeClass("on"); - }); + $("#plmanager").css("display", "none"); + }); + $("#minimodeoptions .tab").bind("click", function (event) { + $("#mainGrid").removeClass().addClass($(this).attr("id")); + $("#minimodeoptions .tab").removeClass("on"); + $(this).addClass("on"); + }); - //SETTINGS TOGGLES - $('#badoopToggle').change(function() { - if (this.checked) { - firetable.debug && console.log("badoop on"); - localStorage["firetableBadoop"] = true; - firetable.playBadoop = true; - } else { - firetable.debug && console.log("badoop off"); - localStorage["firetableBadoop"] = false; - firetable.playBadoop = false; + $("#plmaker").bind("keyup", function (e) { + if (e.which == 13) { + var val = $("#plmaker").val(); + if (val != "") { + var listid = ftapi.actions.createList(val); + $("#listpicker").append( + '" + ); + $("#listpicker").val(listid).change(); + ftapi.actions.switchList(listid); + } + } + }); + $("#cancelqsearch").bind("click", function () { + $("#mainqueuestuff").css("display", "block"); + $("#filterMachine").css("display", "block"); + $("#cancelqsearch").hide(); + $("#qControlButtons").show(); - } - }); - $('#showImagesToggle').change(function() { - if (this.checked) { - firetable.debug && console.log("show images on"); - localStorage["firetableShowImages"] = true; - firetable.showImages = true; - } else { - firetable.debug && console.log("show images off"); - localStorage["firetableShowImages"] = false; - firetable.showImages = false; + $("#addbox").css("display", "none"); + if (firetable.preview) { + if (firetable.preview.slice(0, 5) == "ytcid" || firetable.preview.slice(0, 5) == "sccid") { + $("#pv" + firetable.preview).html(""); + clearTimeout(firetable.ptimeout); + firetable.ptimeout = null; + $("#pvbar" + firetable.preview).css("background-image", "none"); + clearInterval(firetable.movePvBar); + firetable.movePvBar = null; + firetable.preview = false; + //start regular song + var nownow = Date.now(); + var timeSince = nownow - firetable.song.started; + if (timeSince <= 0) timeSince = 0; + + var secSince = Math.floor(timeSince / 1000); + var timeLeft = firetable.song.duration - secSince; + if (firetable.song.type == 1) { + if (!firetable.preview) { + if (firetable.scLoaded) firetable.scwidget.pause(); + if (!firetable.disableMediaPlayback) + player.loadVideoById(firetable.song.cid, secSince, "large"); + } + } else if (firetable.song.type == 2) { + if (!firetable.preview) { + if (firetable.ytLoaded) player.stopVideo(); + firetable.scSeek = timeSince; + if (!firetable.disableMediaPlayback) + firetable.scwidget.load("http://api.soundcloud.com/tracks/" + firetable.song.cid, { + auto_play: true, + }); + } + } + } + } + }); - } - }); - $('#mediaDisableToggle').change(function() { - if (this.checked) { - firetable.debug && console.log("media disable on"); - localStorage["firetableDisableMedia"] = true; - firetable.disableMediaPlayback = true; - if (firetable.scLoaded) firetable.scwidget.pause(); - if (firetable.ytLoaded) player.stopVideo(); - firetable.ui.hidePlayerControls(); - } else { - firetable.debug && console.log("media disable off"); - localStorage["firetableDisableMedia"] = false; - firetable.disableMediaPlayback = false; - firetable.ui.showPlayerControls(); - firetable.actions.reloadtrack(); - } - }); - $('#showAvatarsToggle').change(function() { - if (this.checked) { - firetable.debug && console.log("show avatars on"); - localStorage["firetableShowAvatars"] = true; - firetable.showAvatars = true; - document.getElementById("actualChat").classList.remove("avatarsOff"); - } else { - firetable.debug && console.log("show avatars off"); - localStorage["firetableShowAvatars"] = false; - firetable.showAvatars = false; - document.getElementById("actualChat").classList.add("avatarsOff"); - } - }); - $(document).on('click', '.hideImage', function(e) { - e.stopPropagation(); - e.preventDefault(); - $(this).closest('.chatText').toggleClass('hideImg'); - }); - $('#desktopNotifyMentionsToggle').change(function() { - if (this.checked) { - firetable.debug && console.log("dtnm on"); - localStorage["firetableDTNM"] = true; - firetable.desktopNotifyMentions = true; - if (Notification) { - if (Notification.permission !== "granted") { - Notification.requestPermission(); - } - } - } else { - firetable.debug && console.log("dtnm off"); - localStorage["firetableDTNM"] = false; - firetable.desktopNotifyMentions = false; + $("#grab").bind("click", function () { + var isHidden = $("#stealContain").is(":hidden"); + if (isHidden) { + ftapi.lookup.allLists(function (allPlaylists) { + $("#stealpicker").html( + '' + ); + for (var key in allPlaylists) { + if (allPlaylists.hasOwnProperty(key)) { + $("#stealpicker").append( + '" + ); + } + } + $("#grab").addClass("on"); + $("#stealContain") + .css({ + top: $("#grab").offset().top + $("#grab").height(), + left: $("#grab").offset().left - 16, + }) + .show(); + }); + } else { + $("#grab").removeClass("on"); + $("#stealContain").hide(); + } + }); + $("#shuffleQueue").bind("click", firetable.actions.shuffleQueue); + $("#history").bind("click", function () { + $("#thehistoryWrap") + .slideToggle() + .css("top", $("#stage").outerHeight() + $("#topbar").outerHeight()); + $(this).toggleClass("on"); + }); + $("#startMerge").bind("click", function () { + var source = $("#mergepicker").val(); + var sourceName = $("#mergepicker option:selected").text(); + var dest = $("#mergepicker2").val(); + var destName = $("#mergepicker2 option:selected").text(); + $("#mergeSetup").hide(); + $("#mergeHappening").show(); + firetable.debug && console.log(sourceName + " -> " + destName); + firetable.actions.mergeLists(source, dest, sourceName); + }); + $("#mergeOK").bind("click", function () { + $("#mergeSetup").show(); + $("#mergeCompleted").hide(); + $("#mergeHappening").hide(); + $("#mergeContain").hide(); + }); + $("#mergeLists").bind("click", function () { + var $this = $(this); + var isHidden = $("#mergeContain").is(":hidden"); + if (isHidden) { + ftapi.lookup.allLists(function (allPlaylists) { + $("#mergepicker").html(''); + $("#mergepicker2").html( + '' + ); + for (var key in allPlaylists) { + if (allPlaylists.hasOwnProperty(key)) { + $("#mergepicker").append( + '" + ); + $("#mergepicker2").append( + '" + ); + } + } + if (ftapi.users[ftapi.uid]) { + if (ftapi.users[ftapi.uid].selectedList) { + $("#mergepicker").val(ftapi.users[ftapi.uid].selectedList).change(); + $("#mergepicker2").val(-1).change(); + } + } + $("#mergeContain").show(); + $this.addClass("on"); + }); + } else { + $("#mergeContain").hide(); + $this.removeClass("on"); + } + }); + $("#reloadtrack").bind("click", firetable.actions.reloadtrack); - } - }); + $("#importDubGo").bind("click", firetable.actions.dubtrackImport); - $('input[type=radio][name=screenControl]').change(function() { - firetable.debug && console.log('screen control:', this.value); - localStorage["firetableScreenControl"] = this.value; - firetable.screenControl = this.value; - if (this.value == "off") { - firetable.utilities.screenUp(); - } else if (this.value == "on") { - firetable.utilities.screenDown(); - } else if (this.value == "sync") { - if (firetable.screenSyncPos) { - firetable.utilities.screenDown(); - } else { - firetable.utilities.screenUp(); - } - } - }); + $("#volstatus").bind("click", function () { + firetable.actions.muteToggle(); + }); + $(".openModal").bind("click", function () { + var modalContentID = $(this).attr("data-modal"); + $(".modalThing").removeClass("show"); + $("#overlay").addClass("show"); + $("#" + modalContentID).addClass("show"); + }); + $(".closeModal").bind("click", function () { + $("#overlay").removeClass("show"); + $("#deletepicker").html(""); + firetable.actions.cardCase(); + $("#plMachine").val(""); + }); + $(document).on("click", ".closeeditor", function () { + $(this).closest(".pvbar").removeClass("editing").find(".tagPromptBox").remove(); + firetable.songToEdit = null; + }); + $("#cardCaseButton").bind("click", function () { + firetable.actions.cardCase(); + $("#cardsOverlay").show(); + }); + $("#pickerNav").on("click", "span", function () { + try { + var sec = $(this)[0].id; + firetable.emojis.sec(sec); + } catch (s) {} + }); + $("#pickEmoji").bind("click", function () { + //toggle emoji picker + if ($("#emojiPicker").is(":hidden")) { + $(this).addClass("on"); + $("#emojiPicker").slideDown(function () { + $("#pickerSearch").focus(); + }); + if (!firetable.pickerInit) { + const makeRequest = async () => { + twemoji.parse(document.getElementById("pickerResults")); + return true; + }; - $("#stealpicker").change(function() { - var dest = $("#stealpicker").val(); - if (dest == "-1") return; - if (firetable.song.cid != 0) { - var title = firetable.song.artist + " - " + firetable.song.title; - $("#grab").removeClass('on'); - ftapi.actions.addToList(firetable.song.type, title, firetable.song.cid, dest); - $("#stealContain").hide(); - } - }); + makeRequest(); + } + } else { + $(this).removeClass("on"); + $("#emojiPicker").slideUp(function () { + $("#pickerSearch").val("").trigger("change"); + $("#newchat").focus(); + }); + } + }); - $("#pldeleteButton").bind("click", function() { - var val = $("#deletepicker").val(); - firetable.debug && console.log('playlist delete:', val); - if (ftapi.users[ftapi.uid]) { - if (ftapi.users[ftapi.uid].selectedList) { - if (ftapi.users[ftapi.uid].selectedList == val) { - $("#listpicker").val("0").change(); - } - } - } - ftapi.actions.deleteList(val); - $("#pdopt" + val).remove(); - $("#overlay").removeClass('show'); - }); - $("#plimportLauncher").bind("click", function() { - $("#overlay").addClass('show'); - $(".modalThing").removeClass('show'); - $('#importPromptBox').addClass('show'); - }); - $("#pldeleteLauncher").bind("click", function() { - ftapi.lookup.allLists(function(allPlaylists) { - $("#deletepicker").html(""); - for (var key in allPlaylists) { - if (allPlaylists.hasOwnProperty(key)) { - $("#deletepicker").append(""); - } - } - $("#overlay").addClass('show'); - $(".modalThing").removeClass('show'); - $('#deletePromptBox').addClass('show'); - }); - }); - $("#pickerSearch").on("change paste keyup", function() { - firetable.emojis.niceSearch($("#pickerSearch").val()); - }); - $("#queueFilter").on("change paste keyup", function() { - firetable.actions.filterQueue($("#queueFilter").val()); - }); - $("#pickerResults").on("click", "span", function() { - try { - var oldval = $("#newchat").val(); - var newval = oldval + ":" + $(this).attr("title").trim() + ":"; - $("#newchat").focus().val(newval); + $("#morechats .butt").bind("click", function () { + firetable.utilities.scrollToBottom(); + }); - } catch (s) {} - }); + $("#fire").bind("click", function () { + ftapi.actions.sendChat(":fire:"); + $("#cloud_with_rain").removeClass("on"); + $("#fire").addClass("on"); + }); - firetable.ui.loginEventsInit(); + $("#cloud_with_rain").bind("click", function () { + ftapi.actions.sendChat(":cloud_with_rain:"); + $("#cloud_with_rain").addClass("on"); + $("#fire").removeClass("on"); + }); - $("#ytsearchSelect").bind("click", function() { - $("#scsearchSelect").removeClass("on"); - $("#ytsearchSelect").addClass("on"); - firetable.searchSelectsChoice = 1; - }); - $("#scsearchSelect").bind("click", function() { - $("#ytsearchSelect").removeClass("on"); - $("#scsearchSelect").addClass("on"); - firetable.searchSelectsChoice = 2; - }); - $("#ytimportchoice").bind("click", function() { - firetable.debug && console.log("yt import"); - firetable.importSelectsChoice = 1; - }); - $("#scimportchoice").bind("click", function() { - firetable.debug && console.log("sc import"); - firetable.importSelectsChoice = 2; - }); - $("#dtimportchoice").bind("click", function() { - firetable.debug && console.log("dt import"); - firetable.importSelectsChoice = 3; - }); - $(document).on("keyup", ".tagMachine", function(e) { - if (e.which == 13) { - var songKey = $(this).closest('.tagPromptBox').prev('.pvbar').attr('data-key'); - if (firetable.songToEdit) { - var val = $(this).val(); - if (val != "") { - var obj = firetable.songToEdit; - ftapi.actions.editTrackTag(obj.key, obj.song.cid, val); - firetable.songToEdit = null; - $(this).closest('.editing').removeClass('editing').next('.tagPromptBox').remove(); - } - } - } - }); - $("#changeUsername").bind("keyup", function(e) { - if (e.which == 13) { - var oldDjName = ftapi.users[ftapi.uid].username; - var newDjName = $("#changeUsername").val(); - $("#usernameResponse").html(""); - if (newDjName != "") { - // try to change name - ftapi.actions.changeName(newDjName, function(error) { - if (error) { - alert(error); - $("#usernameResponse").text(error); + //SETTINGS TOGGLES + $("#badoopToggle").change(function () { + if (this.checked) { + firetable.debug && console.log("badoop on"); + localStorage["firetableBadoop"] = true; + firetable.playBadoop = true; } else { - $("#usernameResponse").text("Great job! Your name is now " + newDjName); - $("#loggedInName").text(newDjName); + firetable.debug && console.log("badoop off"); + localStorage["firetableBadoop"] = false; + firetable.playBadoop = false; } - }); - } - } - }); - $('#dubtrackimportfile').bind('change', firetable.ui.dubtrackImportFileSelect); - $("#supercopSearch").bind("keyup", function(e) { - if (e.which == 13) { - var val = $("#supercopSearch").val(); - $("#supercopResponse").html(""); - if (val != "") { - //begin user search... - ftapi.lookup.userByName(val, function(person) { - //check search results - if (person) { - //found something! - if (!person.supermod) { - ftapi.actions.banUser(person.userid); - $("#supercopResponse").html(person.username + " suspended."); - - } else { - $("#supercopResponse").text("Can not suspend that (or any) supermod."); - } + }); + $("#showImagesToggle").change(function () { + if (this.checked) { + firetable.debug && console.log("show images on"); + localStorage["firetableShowImages"] = true; + firetable.showImages = true; + } else { + firetable.debug && console.log("show images off"); + localStorage["firetableShowImages"] = false; + firetable.showImages = false; + } + }); + $("#mediaDisableToggle").change(function () { + if (this.checked) { + firetable.debug && console.log("media disable on"); + localStorage["firetableDisableMedia"] = true; + firetable.disableMediaPlayback = true; + if (firetable.scLoaded) firetable.scwidget.pause(); + if (firetable.ytLoaded) player.stopVideo(); + firetable.ui.hidePlayerControls(); + } else { + firetable.debug && console.log("media disable off"); + localStorage["firetableDisableMedia"] = false; + firetable.disableMediaPlayback = false; + firetable.ui.showPlayerControls(); + firetable.actions.reloadtrack(); + } + }); + $("#showAvatarsToggle").change(function () { + if (this.checked) { + firetable.debug && console.log("show avatars on"); + localStorage["firetableShowAvatars"] = true; + firetable.showAvatars = true; + document.getElementById("actualChat").classList.remove("avatarsOff"); } else { - $("#supercopResponse").text(val + " not found..."); + firetable.debug && console.log("show avatars off"); + localStorage["firetableShowAvatars"] = false; + firetable.showAvatars = false; + document.getElementById("actualChat").classList.add("avatarsOff"); } - }); - } - } - }); - $("#importSources .tab").bind("click", function(e) { - var searchFrom = firetable.importSelectsChoice; - if (searchFrom == 3) { - $("#importDubContent").show(); - $("#importContent").hide(); - } else { - $("#importDubContent").hide(); - $("#importContent").show(); - } - $(this).siblings().removeClass('on'); - $(this).addClass('on'); - }); - $("#plMachine").bind("keyup", function(e) { - if (e.which == 13) { - var val = $("#plMachine").val(); - if (val != "") { - $("#importResults").html(""); - $("#plMachine").val(""); - var searchFrom = firetable.importSelectsChoice; - if (searchFrom == 1) { - var listID; - var directLink = false; - //see if this is a particular list's url... - if (val.match(/youtube.com\/watch/) || val.match(/youtube.com\/playlist/)) { - function getQueryStringValue(str, key) { - return unescape(str.replace(new RegExp("^(?:.*[&\\?]" + escape(key).replace(/[\.\+\*]/g, "\\$&") + "(?:\\=([^&]*))?)?.*$", "i"), "$1")); - } - listID = getQueryStringValue(val, "list"); - if (listID) directLink = true; - } - - if (directLink) { - function keyWordsearch() { - gapi.client.setApiKey(ftconfigs.youtubeKey); - gapi.client.load('youtube', 'v3', function() { - makeRequest(); - }); - } - - function makeRequest() { - var request = gapi.client.youtube.playlists.list({ - id: listID, - part: 'snippet' - }); - request.execute(function(response) { - if (response.result) { - if (response.result.items) { - if (response.result.items.length === 1) { - var item = response.result.items[0]; - vidTitle = item.snippet.title; - $("#importResults").append("
    " + item.snippet.title + " by " + item.snippet.channelTitle + "
    "); - } else { - // no result - } + }); + $(document).on("click", ".hideImage", function (e) { + e.stopPropagation(); + e.preventDefault(); + $(this).closest(".chatText").toggleClass("hideImg"); + }); + $("#desktopNotifyMentionsToggle").change(function () { + if (this.checked) { + firetable.debug && console.log("dtnm on"); + localStorage["firetableDTNM"] = true; + firetable.desktopNotifyMentions = true; + if (Notification) { + if (Notification.permission !== "granted") { + Notification.requestPermission(); } - } - }) - } - keyWordsearch(); + } } else { - //youtube - function keyWordsearch() { - gapi.client.setApiKey(ftconfigs.youtubeKey); - gapi.client.load('youtube', 'v3', function() { - makeRequest(); - }); - } - - function makeRequest() { - var request = gapi.client.youtube.search.list({ - q: val, - type: 'playlist', - part: 'snippet', - maxResults: 15 - }); - request.execute(function(response) { - var srchItems = response.result.items; - firetable.debug && console.log('import search results:', response); - $.each(srchItems, function(index, item) { - vidTitle = item.snippet.title; - $("#importResults").append("
    " + item.snippet.title + " by " + item.snippet.channelTitle + "
    "); - }) - }) - } - keyWordsearch(); + firetable.debug && console.log("dtnm off"); + localStorage["firetableDTNM"] = false; + firetable.desktopNotifyMentions = false; } + }); - } else if (searchFrom == 2) { - var listData; - var directLink = false; - //see if this is a particular list's url... - console.log(val); - if (val.match(/.*\/\/soundcloud\.com\/.*\/sets\/.*/)) { - firetable.actions.resolveSCLink(val, function(item) { - if (item) { - if (item.sharing == "public" && item.kind == "playlist") { - $("#importResults").append("
    " + item.title + " by " + item.user.username + " (" + item.track_count + " songs)
    "); - } + $("input[type=radio][name=screenControl]").change(function () { + firetable.debug && console.log("screen control:", this.value); + localStorage["firetableScreenControl"] = this.value; + firetable.screenControl = this.value; + if (this.value == "off") { + firetable.utilities.screenUp(); + } else if (this.value == "on") { + firetable.utilities.screenDown(); + } else if (this.value == "sync") { + if (firetable.screenSyncPos) { + firetable.utilities.screenDown(); + } else { + firetable.utilities.screenUp(); } - }); - //var getList = SC.resolve(val).then(finishUp); + } + }); - } else { - //cloud sound world dot com - SC.get('/playlists', { - q: val - }).then(function(lists) { - for (var i = 0; i < lists.length; i++) { - var item = lists[i]; - if (item.sharing == "public") { - $("#importResults").append("
    " + item.title + " by " + item.user.username + " (" + item.track_count + " songs)
    "); - } - } - }); - } - } - } - } - }); - var $searchItemTemplate = $('#searchResults .pvbar').remove(); - $("#qsearch").bind("keyup", function(e) { - if (e.which == 13) { - var txt = $("#qsearch").val(); - if (firetable.searchSelectsChoice == 1) { - var showResults = function(response) { - firetable.debug && console.log('queue search:', response); - // $("#qsearch").val(""); - $('#searchResults').html(""); + $("#stealpicker").change(function () { + var dest = $("#stealpicker").val(); + if (dest == "-1") return; + if (firetable.song.cid != 0) { + var title = firetable.song.artist + " - " + firetable.song.title; + $("#grab").removeClass("on"); + ftapi.actions.addToList(firetable.song.type, title, firetable.song.cid, dest); + $("#stealContain").hide(); + } + }); - if (firetable.preview) { - if (firetable.preview.slice(0, 5) == "ytcid" || firetable.preview.slice(0, 5) == "sccid") { - $("#pv" + firetable.preview).html(""); - clearTimeout(firetable.ptimeout); - firetable.ptimeout = null; - $("#pvbar" + firetable.preview).css("background-image", "none"); - clearInterval(firetable.movePvBar); - firetable.movePvBar = null; - firetable.preview = false; - //start regular song - var nownow = Date.now(); - var timeSince = nownow - firetable.song.started; - if (timeSince <= 0) timeSince = 0; + $("#pldeleteButton").bind("click", function () { + var val = $("#deletepicker").val(); + firetable.debug && console.log("playlist delete:", val); + if (ftapi.users[ftapi.uid]) { + if (ftapi.users[ftapi.uid].selectedList) { + if (ftapi.users[ftapi.uid].selectedList == val) { + $("#listpicker").val("0").change(); + } + } + } + ftapi.actions.deleteList(val); + $("#pdopt" + val).remove(); + $("#overlay").removeClass("show"); + }); + $("#plimportLauncher").bind("click", function () { + $("#overlay").addClass("show"); + $(".modalThing").removeClass("show"); + $("#importPromptBox").addClass("show"); + }); + $("#pldeleteLauncher").bind("click", function () { + ftapi.lookup.allLists(function (allPlaylists) { + $("#deletepicker").html(""); + for (var key in allPlaylists) { + if (allPlaylists.hasOwnProperty(key)) { + $("#deletepicker").append( + '" + ); + } + } + $("#overlay").addClass("show"); + $(".modalThing").removeClass("show"); + $("#deletePromptBox").addClass("show"); + }); + }); + $("#pickerSearch").on("change paste keyup", function () { + firetable.emojis.niceSearch($("#pickerSearch").val()); + }); + $("#queueFilter").on("change paste keyup", function () { + firetable.actions.filterQueue($("#queueFilter").val()); + }); + $("#pickerResults").on("click", "span", function () { + try { + var oldval = $("#newchat").val(); + var newval = oldval + ":" + $(this).attr("title").trim() + ":"; + $("#newchat").focus().val(newval); + } catch (s) {} + }); - var secSince = Math.floor(timeSince / 1000); - var timeLeft = firetable.song.duration - secSince; - if (firetable.song.type == 1) { - if (!firetable.preview) { - if (firetable.scLoaded) firetable.scwidget.pause(); - if (!firetable.disableMediaPlayback) player.loadVideoById(firetable.song.cid, secSince, "large"); - } - } else if (firetable.song.type == 2) { - if (!firetable.preview) { - if (firetable.ytLoaded) player.stopVideo(); - firetable.scSeek = timeSince; - if (!firetable.disableMediaPlayback) firetable.scwidget.load("http://api.soundcloud.com/tracks/" + firetable.song.cid, { - auto_play: true + firetable.ui.loginEventsInit(); + + $("#ytsearchSelect").bind("click", function () { + $("#scsearchSelect").removeClass("on"); + $("#ytsearchSelect").addClass("on"); + firetable.searchSelectsChoice = 1; + }); + $("#scsearchSelect").bind("click", function () { + $("#ytsearchSelect").removeClass("on"); + $("#scsearchSelect").addClass("on"); + firetable.searchSelectsChoice = 2; + }); + $("#ytimportchoice").bind("click", function () { + firetable.debug && console.log("yt import"); + firetable.importSelectsChoice = 1; + }); + $("#scimportchoice").bind("click", function () { + firetable.debug && console.log("sc import"); + firetable.importSelectsChoice = 2; + }); + $("#dtimportchoice").bind("click", function () { + firetable.debug && console.log("dt import"); + firetable.importSelectsChoice = 3; + }); + $(document).on("keyup", ".tagMachine", function (e) { + if (e.which == 13) { + var songKey = $(this).closest(".tagPromptBox").prev(".pvbar").attr("data-key"); + if (firetable.songToEdit) { + var val = $(this).val(); + if (val != "") { + var obj = firetable.songToEdit; + ftapi.actions.editTrackTag(obj.key, obj.song.cid, val); + firetable.songToEdit = null; + $(this).closest(".editing").removeClass("editing").next(".tagPromptBox").remove(); + } + } + } + }); + $("#changeUsername").bind("keyup", function (e) { + if (e.which == 13) { + var oldDjName = ftapi.users[ftapi.uid].username; + var newDjName = $("#changeUsername").val(); + $("#usernameResponse").html(""); + if (newDjName != "") { + // try to change name + ftapi.actions.changeName(newDjName, function (error) { + if (error) { + alert(error); + $("#usernameResponse").text(error); + } else { + $("#usernameResponse").text("Great job! Your name is now " + newDjName); + $("#loggedInName").text(newDjName); + } }); - } } - } } - var srchItems = response.result.items; - $.each(srchItems, function(index, item) { - console.log(item); - var thecid; - if (item.kind == "youtube#searchResult") { - thecid = item.id.videoId; - } else if (item.kind == "youtube#video") { - thecid = item.id; - } - vidtitle = item.snippet.title; - var yargo = item.snippet.title.split(" - "); - var sartist = yargo[0]; - var stitle = yargo[1]; - if (!stitle) { - // yt title not formatted artist - title. use uploader name instead as artist - stitle = sartist; - sartist = item.snippet.channelTitle.replace(" - Topic", ""); - } - vidTitle = sartist + " - " + stitle; - var pkey = "ytcid" + thecid; - var $srli = $searchItemTemplate.clone(); - $srli.attr('id', "pvbar" + pkey); - $srli.attr("data-key", pkey); - $srli.attr("data-cid", thecid); - $srli.find('.previewicon').attr('id', "pv" + pkey).on('click', function() { - firetable.actions.pview($(this).closest('.pvbar').attr('data-key'), true, 1); - }); - $srli.find('.listwords').html(vidTitle); - $srli.find('.queuetrack').on('click', function() { - firetable.actions.queueTrack( - $(this).closest('.pvbar').attr('data-cid'), - firetable.utilities.htmlEscape($(this).closest('.pvbar').find('.listwords').text()), - 1 - ); - }); - $("#searchResults").append($srli); - }) - }; - var directLink = false; - var thecid = false; - //see if this is a particular track's url... - if (txt.match(/youtube.com\/watch/)) { - function getQueryStringValue(str, key) { - return unescape(str.replace(new RegExp("^(?:.*[&\\?]" + escape(key).replace(/[\.\+\*]/g, "\\$&") + "(?:\\=([^&]*))?)?.*$", "i"), "$1")); - } - thecid = getQueryStringValue(txt, "v"); - if (thecid) directLink = true; - } - if (directLink) { - firetable.debug && console.log("direct yt link found"); - - function keyWordsearch() { - gapi.client.setApiKey(ftconfigs.youtubeKey); - gapi.client.load('youtube', 'v3', function() { - makeRequest(); - }); - } - - function makeRequest() { - var request = gapi.client.youtube.videos.list({ - id: thecid, - part: 'snippet', - maxResults: 1 - }); - request.execute(function(response) { - console.log(response); - showResults(response); - }) + }); + $("#dubtrackimportfile").bind("change", firetable.ui.dubtrackImportFileSelect); + $("#supercopSearch").bind("keyup", function (e) { + if (e.which == 13) { + var val = $("#supercopSearch").val(); + $("#supercopResponse").html(""); + if (val != "") { + //begin user search... + ftapi.lookup.userByName(val, function (person) { + //check search results + if (person) { + //found something! + if (!person.supermod) { + ftapi.actions.banUser(person.userid); + $("#supercopResponse").html(person.username + " suspended."); + } else { + $("#supercopResponse").text("Can not suspend that (or any) supermod."); + } + } else { + $("#supercopResponse").text(val + " not found..."); + } + }); + } } - keyWordsearch(); - } else { - function keyWordsearch() { - gapi.client.setApiKey(ftconfigs.youtubeKey); - gapi.client.load('youtube', 'v3', function() { - makeRequest(); - }); - } - - function makeRequest() { - var q = $('#qsearch').val(); - $('#searchResults').html("Searching..."); - - var request = gapi.client.youtube.search.list({ - q: q, - type: 'video', - part: 'snippet', - maxResults: 15 - }); - request.execute(function(response) { - showResults(response); - }) + }); + $("#importSources .tab").bind("click", function (e) { + var searchFrom = firetable.importSelectsChoice; + if (searchFrom == 3) { + $("#importDubContent").show(); + $("#importContent").hide(); + } else { + $("#importDubContent").hide(); + $("#importContent").show(); } - keyWordsearch(); - } - } else if (firetable.searchSelectsChoice == 2) { - var q = $('#qsearch').val(); - var showResults = function(tracks) { - firetable.debug && console.log('sc tracks:', tracks); - // $("#qsearch").val(""); - $('#searchResults').html(""); - - if (firetable.preview) { - if (firetable.preview.slice(0, 5) == "ytcid" || firetable.preview.slice(0, 5) == "sccid") { - $("#pv" + firetable.preview).html(""); - clearTimeout(firetable.ptimeout); - firetable.ptimeout = null - $("#pvbar" + firetable.preview).css("background-image", "none"); - clearInterval(firetable.movePvBar); - firetable.movePvBar = null; - firetable.preview = false; - //start regular song - var nownow = Date.now(); - var timeSince = nownow - firetable.song.started; - if (timeSince <= 0) timeSince = 0; - - var secSince = Math.floor(timeSince / 1000); - var timeLeft = firetable.song.duration - secSince; - if (firetable.song.type == 1) { - if (!firetable.preview) { - firetable.scwidget.pause(); - if (!firetable.disableMediaPlayback) player.loadVideoById(firetable.song.cid, secSince, "large"); - } - } else if (firetable.song.type == 2) { - if (!firetable.preview) { - if (firetable.ytLoaded) player.stopVideo(); - firetable.scSeek = timeSince; - if (!firetable.disableMediaPlayback) firetable.scwidget.load("http://api.soundcloud.com/tracks/" + firetable.song.cid, { - auto_play: true + $(this).siblings().removeClass("on"); + $(this).addClass("on"); + }); + $("#plMachine").bind("keyup", function (e) { + if (e.which == 13) { + var val = $("#plMachine").val(); + if (val != "") { + $("#importResults").html(""); + $("#plMachine").val(""); + var searchFrom = firetable.importSelectsChoice; + if (searchFrom == 1) { + var listID; + var directLink = false; + //see if this is a particular list's url... + if (val.match(/youtube.com\/watch/) || val.match(/youtube.com\/playlist/)) { + function getQueryStringValue(str, key) { + return unescape( + str.replace( + new RegExp( + "^(?:.*[&\\?]" + + escape(key).replace(/[\.\+\*]/g, "\\$&") + + "(?:\\=([^&]*))?)?.*$", + "i" + ), + "$1" + ) + ); + } + listID = getQueryStringValue(val, "list"); + if (listID) directLink = true; + } + + if (directLink) { + function keyWordsearch() { + gapi.client.setApiKey(ftconfigs.youtubeKey); + gapi.client.load("youtube", "v3", function () { + makeRequest(); + }); + } + + function makeRequest() { + var request = gapi.client.youtube.playlists.list({ + id: listID, + part: "snippet", + }); + request.execute(function (response) { + if (response.result) { + if (response.result.items) { + if (response.result.items.length === 1) { + var item = response.result.items[0]; + vidTitle = item.snippet.title; + $("#importResults").append( + '
    ' + + item.snippet.title + + " by " + + item.snippet.channelTitle + + '
    ' + ); + } else { + // no result + } + } + } + }); + } + keyWordsearch(); + } else { + //youtube + function keyWordsearch() { + gapi.client.setApiKey(ftconfigs.youtubeKey); + gapi.client.load("youtube", "v3", function () { + makeRequest(); + }); + } + + function makeRequest() { + var request = gapi.client.youtube.search.list({ + q: val, + type: "playlist", + part: "snippet", + maxResults: 15, + }); + request.execute(function (response) { + var srchItems = response.result.items; + firetable.debug && console.log("import search results:", response); + $.each(srchItems, function (index, item) { + vidTitle = item.snippet.title; + $("#importResults").append( + '
    ' + + item.snippet.title + + " by " + + item.snippet.channelTitle + + '
    ' + ); + }); + }); + } + keyWordsearch(); + } + } else if (searchFrom == 2) { + var listData; + var directLink = false; + //see if this is a particular list's url... + console.log(val); + if (val.match(/.*\/\/soundcloud\.com\/.*\/sets\/.*/)) { + firetable.actions.resolveSCLink(val, function (item) { + if (item) { + if (item.sharing == "public" && item.kind == "playlist") { + $("#importResults").append( + '
    ' + + item.title + + " by " + + item.user.username + + " (" + + item.track_count + + ' songs)
    ' + ); + } + } + }); + //var getList = SC.resolve(val).then(finishUp); + } else { + //cloud sound world dot com + SC.get("/playlists", { + q: val, + }).then(function (lists) { + for (var i = 0; i < lists.length; i++) { + var item = lists[i]; + if (item.sharing == "public") { + $("#importResults").append( + '
    ' + + item.title + + " by " + + item.user.username + + " (" + + item.track_count + + ' songs)
    ' + ); + } + } + }); + } + } + } + } + }); + var $searchItemTemplate = $("#searchResults .pvbar").remove(); + $("#qsearch").bind("keyup", function (e) { + if (e.which == 13) { + var txt = $("#qsearch").val(); + if (firetable.searchSelectsChoice == 1) { + var showResults = function (response) { + firetable.debug && console.log("queue search:", response); + // $("#qsearch").val(""); + $("#searchResults").html(""); + + if (firetable.preview) { + if (firetable.preview.slice(0, 5) == "ytcid" || firetable.preview.slice(0, 5) == "sccid") { + $("#pv" + firetable.preview).html(""); + clearTimeout(firetable.ptimeout); + firetable.ptimeout = null; + $("#pvbar" + firetable.preview).css("background-image", "none"); + clearInterval(firetable.movePvBar); + firetable.movePvBar = null; + firetable.preview = false; + //start regular song + var nownow = Date.now(); + var timeSince = nownow - firetable.song.started; + if (timeSince <= 0) timeSince = 0; + + var secSince = Math.floor(timeSince / 1000); + var timeLeft = firetable.song.duration - secSince; + if (firetable.song.type == 1) { + if (!firetable.preview) { + if (firetable.scLoaded) firetable.scwidget.pause(); + if (!firetable.disableMediaPlayback) + player.loadVideoById(firetable.song.cid, secSince, "large"); + } + } else if (firetable.song.type == 2) { + if (!firetable.preview) { + if (firetable.ytLoaded) player.stopVideo(); + firetable.scSeek = timeSince; + if (!firetable.disableMediaPlayback) + firetable.scwidget.load( + "http://api.soundcloud.com/tracks/" + firetable.song.cid, + { + auto_play: true, + } + ); + } + } + } + } + var srchItems = response.result.items; + $.each(srchItems, function (index, item) { + console.log(item); + var thecid; + if (item.kind == "youtube#searchResult") { + thecid = item.id.videoId; + } else if (item.kind == "youtube#video") { + thecid = item.id; + } + vidtitle = item.snippet.title; + var yargo = item.snippet.title.split(" - "); + var sartist = yargo[0]; + var stitle = yargo[1]; + if (!stitle) { + // yt title not formatted artist - title. use uploader name instead as artist + stitle = sartist; + sartist = item.snippet.channelTitle.replace(" - Topic", ""); + } + vidTitle = sartist + " - " + stitle; + var pkey = "ytcid" + thecid; + var $srli = $searchItemTemplate.clone(); + $srli.attr("id", "pvbar" + pkey); + $srli.attr("data-key", pkey); + $srli.attr("data-cid", thecid); + $srli + .find(".previewicon") + .attr("id", "pv" + pkey) + .on("click", function () { + firetable.actions.pview($(this).closest(".pvbar").attr("data-key"), true, 1); + }); + $srli.find(".listwords").html(vidTitle); + $srli.find(".queuetrack").on("click", function () { + firetable.actions.queueTrack( + $(this).closest(".pvbar").attr("data-cid"), + firetable.utilities.htmlEscape($(this).closest(".pvbar").find(".listwords").text()), + 1 + ); + }); + $("#searchResults").append($srli); + }); + }; + var directLink = false; + var thecid = false; + //see if this is a particular track's url... + if (txt.match(/youtube.com\/watch/)) { + function getQueryStringValue(str, key) { + return unescape( + str.replace( + new RegExp( + "^(?:.*[&\\?]" + + escape(key).replace(/[\.\+\*]/g, "\\$&") + + "(?:\\=([^&]*))?)?.*$", + "i" + ), + "$1" + ) + ); + } + thecid = getQueryStringValue(txt, "v"); + if (thecid) directLink = true; + } + if (directLink) { + firetable.debug && console.log("direct yt link found"); + + function keyWordsearch() { + gapi.client.setApiKey(ftconfigs.youtubeKey); + gapi.client.load("youtube", "v3", function () { + makeRequest(); + }); + } + + function makeRequest() { + var request = gapi.client.youtube.videos.list({ + id: thecid, + part: "snippet", + maxResults: 1, + }); + request.execute(function (response) { + console.log(response); + showResults(response); + }); + } + keyWordsearch(); + } else { + function keyWordsearch() { + gapi.client.setApiKey(ftconfigs.youtubeKey); + gapi.client.load("youtube", "v3", function () { + makeRequest(); + }); + } + + function makeRequest() { + var q = $("#qsearch").val(); + $("#searchResults").html("Searching..."); + + var request = gapi.client.youtube.search.list({ + q: q, + type: "video", + part: "snippet", + maxResults: 15, + }); + request.execute(function (response) { + showResults(response); + }); + } + keyWordsearch(); + } + } else if (firetable.searchSelectsChoice == 2) { + var q = $("#qsearch").val(); + var showResults = function (tracks) { + firetable.debug && console.log("sc tracks:", tracks); + // $("#qsearch").val(""); + $("#searchResults").html(""); + + if (firetable.preview) { + if (firetable.preview.slice(0, 5) == "ytcid" || firetable.preview.slice(0, 5) == "sccid") { + $("#pv" + firetable.preview).html(""); + clearTimeout(firetable.ptimeout); + firetable.ptimeout = null; + $("#pvbar" + firetable.preview).css("background-image", "none"); + clearInterval(firetable.movePvBar); + firetable.movePvBar = null; + firetable.preview = false; + //start regular song + var nownow = Date.now(); + var timeSince = nownow - firetable.song.started; + if (timeSince <= 0) timeSince = 0; + + var secSince = Math.floor(timeSince / 1000); + var timeLeft = firetable.song.duration - secSince; + if (firetable.song.type == 1) { + if (!firetable.preview) { + firetable.scwidget.pause(); + if (!firetable.disableMediaPlayback) + player.loadVideoById(firetable.song.cid, secSince, "large"); + } + } else if (firetable.song.type == 2) { + if (!firetable.preview) { + if (firetable.ytLoaded) player.stopVideo(); + firetable.scSeek = timeSince; + if (!firetable.disableMediaPlayback) + firetable.scwidget.load( + "http://api.soundcloud.com/tracks/" + firetable.song.cid, + { + auto_play: true, + } + ); + } + } + } + } + var srchItems = tracks; + $.each(srchItems, function (index, item) { + vidTitle = item.title; + var yargo = item.title.split(" - "); + var sartist = yargo[0]; + var stitle = yargo[1]; + if (!stitle) { + stitle = sartist; + sartist = item.user.username; + } + vidTitle = sartist + " - " + stitle; + var pkey = "sccid" + item.id; + var $srli = $searchItemTemplate.clone(); + $srli.attr("id", "pvbar" + pkey); + $srli.attr("data-key", pkey); + $srli.attr("data-cid", item.id); + $srli + .find(".previewicon") + .attr("id", "pv" + pkey) + .on("click", function () { + firetable.actions.pview($(this).closest(".pvbar").attr("data-key"), true, 2); + }); + $srli.find(".listwords").html(vidTitle); + $srli.find(".queuetrack").on("click", function () { + firetable.actions.queueTrack( + $(this).closest(".pvbar").attr("data-cid"), + firetable.utilities.htmlEscape($(this).closest(".pvbar").find(".listwords").text()), + 2 + ); + }); + $("#searchResults").append($srli); + }); + }; + var directLink = false; + if (q.match(/:\/\/soundcloud\.com\//)) { + directLink = true; + } + $("#searchResults").html("Searching..."); + if (directLink) { + firetable.debug && console.log("sc direct link found"); + firetable.actions.resolveSCLink(q, function (item) { + var items = []; + if (item.kind == "track") items.push(item); + showResults(items); + }); + //var getList = SC.resolve(q).then(finishUp); + } else { + SC.get("/tracks", { + q: q, + }).then(function (tracks) { + showResults(tracks); + }); + } + } + } + }); + $("#newchat").bind("keypress", function (e) { + firetable.debug && console.log("chat key", e.key); + if (e.key == "Enter") { + var txt = $("#newchat").val(); + if (txt == "") return; + var matches = txt.match(/^(?:[\/])(\w+)\s*(.*)/i); + if (txt == ":fire:" || txt == "🔥") { + $("#cloud_with_rain").removeClass("on"); + $("#fire").addClass("on"); + } else if (txt == ":cloud_with_rain:" || txt == "🌧") { + $("#cloud_with_rain").addClass("on"); + $("#fire").removeClass("on"); + } + if (matches) { + var command = matches[1].toLowerCase(); + var args = matches[2]; + if (command == "mod") { + var personToMod = firetable.actions.uidLookup(args); + if (personToMod) { + ftapi.actions.modUser(personToMod); + } + } else if (command == "unmod") { + var personToMod = firetable.actions.uidLookup(args); + if (personToMod) { + ftapi.actions.unmodUser(personToMod); + } + } else if (command == "block") { + if (args) { + ftapi.actions.blockUser(args, function (response) { + console.log(response); + firetable.actions.localChatResponse(response); + }); + } + } else if (command == "unblock") { + if (args) { + ftapi.actions.unblockUser(args, function (response) { + console.log(response); + + firetable.actions.localChatResponse(response); + }); + } + } else if (command == "hot") { + ftapi.actions.sendChat(":fire:"); + $("#cloud_with_rain").removeClass("on"); + $("#fire").addClass("on"); + } else if (command == "storm") { + ftapi.actions.sendChat(":cloud_with_rain:"); + $("#cloud_with_rain").addClass("on"); + $("#fire").removeClass("on"); + } else if (command == "shrug") { + var thingtosay = "¯\\_(ツ)_/¯"; + if (args) thingtosay = args + " ¯\\_(ツ)_/¯"; + ftapi.actions.sendChat(thingtosay); + } else if (command == "tableflip") { + var thingtosay = "(╯°□°）╯︵ ┻━┻"; + if (args) thingtosay = args + " (╯°□°）╯︵ ┻━┻"; + ftapi.actions.sendChat(thingtosay); + } else if (command == "unflip") { + var thingtosay = "┬─┬ ノ( ゜-゜ノ)"; + if (args) thingtosay = args + " ┬─┬ ノ( ゜-゜ノ)"; + ftapi.actions.sendChat(thingtosay); + } + } else { + ftapi.actions.sendChat(txt); + } + $("#newchat").val(""); + $("#emojiPicker").slideUp(); + $("#pickEmoji").removeClass("on"); + firetable.utilities.exitAtLand(); + } else if (e.key == "@") { + // open the door to @ land + if (firetable.atLand) { + // double @@ + firetable.utilities.exitAtLand(); + } else { + // first step into @ land + firetable.utilities.initAtLand(); + for (var user of firetable.atUsersFiltered) { + $("#atPicker").addClass("show"); + $( + '
    " + ).appendTo("#atPicker"); + } + } + } else if (firetable.atLand) { + // we're in @ land + if (e.key == " " || e.key == "Spacebar") { + // we've got what we want + firetable.utilities.exitAtLand(); + } else if (!e.key.match(/[0-9a-zA-Z_]/)) { + // not possibly a characer from a name + firetable.atString += e.key; + $("#atPicker").html(""); + $('
    Usernames cannot contain "' + e.key + '"
    ').appendTo( + "#atPicker" + ); + } else { + // we're still in @ land + firetable.atString += e.key; + firetable.utilities.updateAtLand(); + } + } + }); + $("#newchat").bind("keyup", function (e) { + if (firetable.atLand) { + // we're in @ land + if (e.key == "Backspace") { + if (!firetable.atString) { + // deleting the @, exit @ land + firetable.utilities.exitAtLand(); + } else { + // still got someone we're lookin for + firetable.atString = firetable.atString.slice(0, -1); + firetable.utilities.updateAtLand(); + } + } else if (e.key == "ArrowUp") { + // i see my @, go up! + $("#atPicker .butt:last").focus(); + } else if (e.key == "ArrowDown") { + // i see my @, go down! + $("#atPicker .butt:first").focus(); + } + } + }); + $("#newchat").bind("keydown", function (e) { + if (e.key == "Tab") { + if (firetable.atUsersFiltered.length === 1) { + $("#newchat").one("blur", function (e) { + $("#newchat").focus().val($("#newchat").val()); }); - } + firetable.utilities.chooseAt(firetable.atUsersFiltered[0]); + } else { + firetable.utilities.exitAtLand(); } - } } - var srchItems = tracks; - $.each(srchItems, function(index, item) { - vidTitle = item.title; - var yargo = item.title.split(" - "); - var sartist = yargo[0]; - var stitle = yargo[1]; - if (!stitle) { - stitle = sartist; - sartist = item.user.username; - } - vidTitle = sartist + " - " + stitle; - var pkey = "sccid" + item.id; - var $srli = $searchItemTemplate.clone(); - $srli.attr('id', "pvbar" + pkey); - $srli.attr("data-key", pkey); - $srli.attr("data-cid", item.id); - $srli.find('.previewicon').attr('id', "pv" + pkey).on('click', function() { - firetable.actions.pview( - $(this).closest('.pvbar').attr('data-key'), - true, - 2 - ); - }); - $srli.find('.listwords').html(vidTitle); - $srli.find('.queuetrack').on('click', function() { - firetable.actions.queueTrack( - $(this).closest('.pvbar').attr('data-cid'), - firetable.utilities.htmlEscape($(this).closest('.pvbar').find('.listwords').text()), - 2 - ); - }); - $("#searchResults").append($srli); - }) - } - var directLink = false; - if (q.match(/:\/\/soundcloud\.com\//)) { - directLink = true; - } - $('#searchResults').html("Searching..."); - if (directLink) { - firetable.debug && console.log("sc direct link found"); - firetable.actions.resolveSCLink(q, function(item) { - var items = []; - if (item.kind == "track") items.push(item); - showResults(items); - }); - //var getList = SC.resolve(q).then(finishUp); - } else { - SC.get('/tracks', { - q: q - }).then(function(tracks) { - showResults(tracks); - }); - } - } - } - }); - $("#newchat").bind("keypress", function(e) { - firetable.debug && console.log('chat key', e.key); - if (e.key == "Enter") { - var txt = $("#newchat").val(); - if (txt == "") return; - var matches = txt.match(/^(?:[\/])(\w+)\s*(.*)/i); - if (txt == ":fire:" || txt == "🔥") { - $("#cloud_with_rain").removeClass("on"); - $("#fire").addClass("on"); - } else if (txt == ":cloud_with_rain:" || txt == "🌧") { - $("#cloud_with_rain").addClass("on"); - $("#fire").removeClass("on"); - } - if (matches) { - var command = matches[1].toLowerCase(); - var args = matches[2]; - if (command == "mod") { - var personToMod = firetable.actions.uidLookup(args); - if (personToMod) { - ftapi.actions.modUser(personToMod); - } - } else if (command == "unmod") { - var personToMod = firetable.actions.uidLookup(args); - if (personToMod) { - ftapi.actions.unmodUser(personToMod); - } - } else if (command == "block") { - if (args) { - ftapi.actions.blockUser(args, function(response) { - console.log(response); - firetable.actions.localChatResponse(response); - }); - } - } else if (command == "unblock") { - if (args) { - ftapi.actions.unblockUser(args, function(response) { - console.log(response); - - firetable.actions.localChatResponse(response); - }); - } - } else if (command == "hot") { - ftapi.actions.sendChat(":fire:"); - $("#cloud_with_rain").removeClass("on"); - $("#fire").addClass("on"); - } else if (command == "storm") { - ftapi.actions.sendChat(":cloud_with_rain:"); - $("#cloud_with_rain").addClass("on"); - $("#fire").removeClass("on"); - } else if (command == "shrug") { - var thingtosay = "¯\\_(ツ)_/¯"; - if (args) thingtosay = args + " ¯\\_(ツ)_/¯"; - ftapi.actions.sendChat(thingtosay); - } else if (command == "tableflip") { - var thingtosay = "(╯°□°）╯︵ ┻━┻"; - if (args) thingtosay = args + " (╯°□°）╯︵ ┻━┻"; - ftapi.actions.sendChat(thingtosay); - } else if (command == "unflip") { - var thingtosay = "┬─┬ ノ( ゜-゜ノ)"; - if (args) thingtosay = args + " ┬─┬ ノ( ゜-゜ノ)"; - ftapi.actions.sendChat(thingtosay); - } - } else { - ftapi.actions.sendChat(txt); - } - $("#newchat").val(""); - $("#emojiPicker").slideUp(); - $("#pickEmoji").removeClass("on"); - firetable.utilities.exitAtLand(); - } else if (e.key == "@") { // open the door to @ land - if (firetable.atLand) { // double @@ - firetable.utilities.exitAtLand(); - } else { // first step into @ land - firetable.utilities.initAtLand(); - for (var user of firetable.atUsersFiltered) { - $('#atPicker').addClass('show'); - $('
    ').appendTo('#atPicker'); - } - } - } else if (firetable.atLand) { // we're in @ land - if (e.key == " " || e.key == "Spacebar") { // we've got what we want - firetable.utilities.exitAtLand(); - } else if (!e.key.match(/[0-9a-zA-Z_]/)) { // not possibly a characer from a name - firetable.atString += e.key; - $('#atPicker').html(''); - $('
    Usernames cannot contain "' + e.key + '"
    ').appendTo('#atPicker'); - } else { // we're still in @ land - firetable.atString += e.key; - firetable.utilities.updateAtLand(); - } - } - }); - $("#newchat").bind("keyup", function(e) { - if (firetable.atLand) { // we're in @ land - if (e.key == "Backspace") { - if (!firetable.atString) { // deleting the @, exit @ land - firetable.utilities.exitAtLand(); - } else { // still got someone we're lookin for - firetable.atString = firetable.atString.slice(0, -1); - firetable.utilities.updateAtLand(); - } - } else if (e.key == "ArrowUp") { // i see my @, go up! - $('#atPicker .butt:last').focus(); - } else if (e.key == "ArrowDown") { // i see my @, go down! - $('#atPicker .butt:first').focus(); - } - } - }); - $("#newchat").bind("keydown", function(e) { - if (e.key == "Tab") { - if (firetable.atUsersFiltered.length === 1) { - $("#newchat").one("blur", function(e) { - $("#newchat").focus().val($("#newchat").val()); - }); - firetable.utilities.chooseAt(firetable.atUsersFiltered[0]); - } else { - firetable.utilities.exitAtLand(); - } - } - }); - $(document).on('click', '#atPicker .butt', function(e) { - e.preventDefault(); - firetable.utilities.chooseAt($(this).text().replace("@", "")); - setTimeout(() => { - var tempText = $("#newchat").val(); - $('#newchat').focus().val(''); - $('#newchat').val(tempText); - }, 250); - }); - $(document).on('keyup', '#atPicker .butt:focus', function(e) { - if (e.key == "ArrowUp") { - if ($('#atPicker .butt:focus').parent().prev().length) { - $('#atPicker .butt:focus').parent().prev().find('.butt').focus(); - } else { - $('#atPicker .butt:last').focus(); - } - } else if (e.key == "ArrowDown") { - if ($('#atPicker .butt:focus').parent().next().length) { - $('#atPicker .butt:focus').parent().next().find('.butt').focus(); - } else { - $('#atPicker .butt:first').focus(); - } - } - }); + }); + $(document).on("click", "#atPicker .butt", function (e) { + e.preventDefault(); + firetable.utilities.chooseAt($(this).text().replace("@", "")); + setTimeout(() => { + var tempText = $("#newchat").val(); + $("#newchat").focus().val(""); + $("#newchat").val(tempText); + }, 250); + }); + $(document).on("keyup", "#atPicker .butt:focus", function (e) { + if (e.key == "ArrowUp") { + if ($("#atPicker .butt:focus").parent().prev().length) { + $("#atPicker .butt:focus").parent().prev().find(".butt").focus(); + } else { + $("#atPicker .butt:last").focus(); + } + } else if (e.key == "ArrowDown") { + if ($("#atPicker .butt:focus").parent().next().length) { + $("#atPicker .butt:focus").parent().next().find(".butt").focus(); + } else { + $("#atPicker .butt:first").focus(); + } + } + }); - ftapi.events.on("colorsChanged", function(data) { - firetable.debug && console.log("COLOR CHANGE!", data); - - firetable.color = data.color; - firetable.countcolor = data.txt; - if (data.color == "#fff" || data.color == "#7f7f7f") { - firetable.color = firetable.orange; - firetable.countcolor = "#fff"; - $("#stage").css("background-color", "#fff"); - } else { - $("#stage").css("background-color", data.color); - } - /* + ftapi.events.on("colorsChanged", function (data) { + firetable.debug && console.log("COLOR CHANGE!", data); + + firetable.color = data.color; + firetable.countcolor = data.txt; + if (data.color == "#fff" || data.color == "#7f7f7f") { + firetable.color = firetable.orange; + firetable.countcolor = "#fff"; + $("#stage").css("background-color", "#fff"); + } else { + $("#stage").css("background-color", data.color); + } + /* if (firetable.countcolor == "#fff"){ firetable.countcolor = "#ffffffc9"; } else if (firetable.countcolor == "#000"){ @@ -3351,393 +3833,507 @@ firetable.ui = { } $("#stage").css("color", firetable.countcolor); */ - $('.customColorStyles').remove(); - - $('.festiveLights').remove(); - - var colorThing = firetable.utilities.hexToRGB(firetable.color); - $("head").append(""); + $(".customColorStyles").remove(); + + $(".festiveLights").remove(); + + var colorThing = firetable.utilities.hexToRGB(firetable.color); + $("head").append( + "" + ); + + if (firetable.lights) { + var style = + ""; + $("head").append(style); + } + }); + }, + usertab1: function () { + $("#allusersWrap").css("display", "block"); + $("#justwaitWrap").css("display", "none"); + $("#usertabs").find(".on").removeClass("on"); + $("#label1").addClass("on"); + }, + usertab2: function () { + $("#usertabs").find(".on").removeClass("on"); + $("#label2").addClass("on"); + $("#allusersWrap").css("display", "none"); + $("#justwaitWrap").css("display", "block"); + }, + LinkGrabber: { + textarea: null, - if (firetable.lights) { - var style = ""; - $("head").append(style); - } + /* Textarea Management */ - }); - }, - usertab1: function() { - $("#allusersWrap").css("display", "block"); - $("#justwaitWrap").css("display", "none"); - $("#usertabs").find(".on").removeClass("on"); - $("#label1").addClass("on"); - }, - usertab2: function() { - $("#usertabs").find(".on").removeClass("on"); - $("#label2").addClass("on"); - $("#allusersWrap").css("display", "none"); - $("#justwaitWrap").css("display", "block"); + attach_ta: function (event) { + if (!$.contains(document.getElementById("queuelist"), event.target)) return; + if (firetable.ui.LinkGrabber.textarea != null) return; - }, - LinkGrabber: { - textarea: null, + var textarea = (firetable.ui.LinkGrabber.textarea = document.createElement("textarea")); + textarea.setAttribute( + "style", + "position: fixed; width: 100%; margin: 0; top: 0; bottom: 0; right: 0; left: 0; z-index: 99999999" + ); + textarea.style.opacity = "0.000000000000000001"; - /* Textarea Management */ + var body = document.getElementsByTagName("body")[0]; + body.appendChild(textarea); - attach_ta: function(event) { - if (!$.contains(document.getElementById("queuelist"), event.target)) return; - if (firetable.ui.LinkGrabber.textarea != null) return; + textarea.oninput = firetable.ui.LinkGrabber.evt_got_link; + }, - var textarea = firetable.ui.LinkGrabber.textarea = document.createElement("textarea"); - textarea.setAttribute("style", "position: fixed; width: 100%; margin: 0; top: 0; bottom: 0; right: 0; left: 0; z-index: 99999999"); - textarea.style.opacity = "0.000000000000000001"; + detach_ta: function () { + if (firetable.ui.LinkGrabber.textarea == null) return; + var textarea = firetable.ui.LinkGrabber.textarea; - var body = document.getElementsByTagName("body")[0]; - body.appendChild(textarea); + textarea.parentNode.removeChild(textarea); + firetable.ui.LinkGrabber.textarea = null; + }, - textarea.oninput = firetable.ui.LinkGrabber.evt_got_link; - }, + /* Event Handlers */ - detach_ta: function() { - if (firetable.ui.LinkGrabber.textarea == null) return; - var textarea = firetable.ui.LinkGrabber.textarea; + evt_drag_over: function (event) { + firetable.ui.LinkGrabber.attach_ta(event); //Create TA overlay + }, - textarea.parentNode.removeChild(textarea); - firetable.ui.LinkGrabber.textarea = null; - }, + evt_got_link: function () { + /* THIS IS WHERE WE HANDLE THE RECEIVED LINK */ - /* Event Handlers */ + var link = firetable.ui.LinkGrabber.textarea.value; + firetable.debug && console.log("NEW LINK RECEIVED VIA THE DRAGON'S DROP. " + link); + firetable.actions.queueFromLink(link); - evt_drag_over: function(event) { - firetable.ui.LinkGrabber.attach_ta(event); //Create TA overlay - }, + firetable.ui.LinkGrabber.detach_ta(); + }, - evt_got_link: function() { - /* THIS IS WHERE WE HANDLE THE RECEIVED LINK */ + evt_drag_out: function (e) { + if (e.target == firetable.ui.LinkGrabber.textarea) firetable.ui.LinkGrabber.detach_ta(); + }, - var link = firetable.ui.LinkGrabber.textarea.value; - firetable.debug && console.log("NEW LINK RECEIVED VIA THE DRAGON'S DROP. " + link); - firetable.actions.queueFromLink(link); + /* Start/Stop */ - firetable.ui.LinkGrabber.detach_ta(); - }, + start: function () { + document.addEventListener("dragover", firetable.ui.LinkGrabber.evt_drag_over, false); + document.addEventListener("dragenter", firetable.ui.LinkGrabber.evt_drag_over, false); - evt_drag_out: function(e) { - if (e.target == firetable.ui.LinkGrabber.textarea) firetable.ui.LinkGrabber.detach_ta(); - }, + document.addEventListener("mouseup", firetable.ui.LinkGrabber.evt_drag_out, false); + document.addEventListener("dragleave", firetable.ui.LinkGrabber.evt_drag_out, false); + }, - /* Start/Stop */ + stop: function () { + document.removeEventListener("dragover", firetable.ui.LinkGrabber.evt_drag_over); + document.removeEventListener("dragenter", firetable.ui.LinkGrabber.evt_drag_over); - start: function() { - document.addEventListener("dragover", firetable.ui.LinkGrabber.evt_drag_over, false); - document.addEventListener("dragenter", firetable.ui.LinkGrabber.evt_drag_over, false); + document.removeEventListener("mouseup", firetable.ui.LinkGrabber.evt_drag_out); + document.removeEventListener("dragleave", firetable.ui.LinkGrabber.evt_drag_out); - document.addEventListener("mouseup", firetable.ui.LinkGrabber.evt_drag_out, false); - document.addEventListener("dragleave", firetable.ui.LinkGrabber.evt_drag_out, false); + firetable.ui.LinkGrabber.detach_ta(); + }, }, - - stop: function() { - document.removeEventListener("dragover", firetable.ui.LinkGrabber.evt_drag_over); - document.removeEventListener("dragenter", firetable.ui.LinkGrabber.evt_drag_over); - - document.removeEventListener("mouseup", firetable.ui.LinkGrabber.evt_drag_out); - document.removeEventListener("dragleave", firetable.ui.LinkGrabber.evt_drag_out); - - firetable.ui.LinkGrabber.detach_ta(); - } - } - - -} - - +}; let isLoaded = false; let glitch; -let imgSrc = ''; +let imgSrc = ""; function setup(useThis) { - if (!useThis) useThis = firetable.scImg; - background(0); - let cnv = createCanvas($('#djStage').outerWidth(), $('#djStage').outerHeight()); - cnv.parent('scScreen'); - loadImage(useThis, function(img) { - glitch = new Glitch(img); - isLoaded = true; - var $can = $('#scScreen canvas'); - var canrat = $can.width() / $can.height(); - $can.data('ratio', canrat); - }); + if (!useThis) useThis = firetable.scImg; + background(0); + let cnv = createCanvas($("#djStage").outerWidth(), $("#djStage").outerHeight()); + cnv.parent("scScreen"); + loadImage(useThis, function (img) { + glitch = new Glitch(img); + isLoaded = true; + var $can = $("#scScreen canvas"); + var canrat = $can.width() / $can.height(); + $can.data("ratio", canrat); + }); } function draw() { - clear(); - background(0); + clear(); + background(0); - if (isLoaded) { - glitch.show(); - } - - // fill(255, 255, 255); - // textSize(14); - // text('FPS: ' + floor(frameRate()), 20, 30); + if (isLoaded) { + glitch.show(); + } + // fill(255, 255, 255); + // textSize(14); + // text('FPS: ' + floor(frameRate()), 20, 30); } class Glitch { - constructor(img) { - this.channelLen = 4; - this.imgOrigin = img; - this.imgOrigin.loadPixels(); - this.copyData = []; - this.flowLineImgs = []; - this.shiftLineImgs = []; - this.shiftRGBs = []; - this.scatImgs = []; - this.throughFlag = true; - this.copyData = new Uint8ClampedArray(this.imgOrigin.pixels); - - // flow line - for (let i = 0; i < 1; i++) { - let o = { - pixels: null, - t1: floor(random(0, 1000)), - speed: floor(random(4, 24)), - randX: floor(random(24, 80)) - }; - this.flowLineImgs.push(o); - } + constructor(img) { + this.channelLen = 4; + this.imgOrigin = img; + this.imgOrigin.loadPixels(); + this.copyData = []; + this.flowLineImgs = []; + this.shiftLineImgs = []; + this.shiftRGBs = []; + this.scatImgs = []; + this.throughFlag = true; + this.copyData = new Uint8ClampedArray(this.imgOrigin.pixels); + + // flow line + for (let i = 0; i < 1; i++) { + let o = { + pixels: null, + t1: floor(random(0, 1000)), + speed: floor(random(4, 24)), + randX: floor(random(24, 80)), + }; + this.flowLineImgs.push(o); + } - // shift line - for (let i = 0; i < 6; i++) { - let o = null; - this.shiftLineImgs.push(o); - } + // shift line + for (let i = 0; i < 6; i++) { + let o = null; + this.shiftLineImgs.push(o); + } - // shift RGB - for (let i = 0; i < 1; i++) { - let o = null; - this.shiftRGBs.push(o); - } + // shift RGB + for (let i = 0; i < 1; i++) { + let o = null; + this.shiftRGBs.push(o); + } - // scat imgs - for (let i = 0; i < 3; i++) { - let scatImg = { - img: null, - x: 0, - y: 0 - }; - this.scatImgs.push(scatImg); - } - } - - replaceData(destImg, srcPixels) { - for (let y = 0; y < destImg.height; y++) { - for (let x = 0; x < destImg.width; x++) { - let r, g, b, a; - let index; - index = (y * destImg.width + x) * this.channelLen; - r = index; - g = index + 1; - b = index + 2; - a = index + 3; - destImg.pixels[r] = srcPixels[r]; - destImg.pixels[g] = srcPixels[g]; - destImg.pixels[b] = srcPixels[b]; - destImg.pixels[a] = srcPixels[a]; - } + // scat imgs + for (let i = 0; i < 3; i++) { + let scatImg = { + img: null, + x: 0, + y: 0, + }; + this.scatImgs.push(scatImg); + } } - destImg.updatePixels(); - } - - flowLine(srcImg, obj) { - - let destPixels, - tempY; - destPixels = new Uint8ClampedArray(srcImg.pixels); - obj.t1 %= srcImg.height; - obj.t1 += obj.speed; - //tempY = floor(noise(obj.t1) * srcImg.height); - tempY = floor(obj.t1); - for (let y = 0; y < srcImg.height; y++) { - if (tempY === y) { - for (let x = 0; x < srcImg.width; x++) { - let r, g, b, a; - let index; - index = (y * srcImg.width + x) * this.channelLen; - r = index; - g = index + 1; - b = index + 2; - a = index + 3; - destPixels[r] = srcImg.pixels[r] + obj.randX; - destPixels[g] = srcImg.pixels[g] + obj.randX; - destPixels[b] = srcImg.pixels[b] + obj.randX; - destPixels[a] = srcImg.pixels[a]; + + replaceData(destImg, srcPixels) { + for (let y = 0; y < destImg.height; y++) { + for (let x = 0; x < destImg.width; x++) { + let r, g, b, a; + let index; + index = (y * destImg.width + x) * this.channelLen; + r = index; + g = index + 1; + b = index + 2; + a = index + 3; + destImg.pixels[r] = srcPixels[r]; + destImg.pixels[g] = srcPixels[g]; + destImg.pixels[b] = srcPixels[b]; + destImg.pixels[a] = srcPixels[a]; + } } - } + destImg.updatePixels(); } - return destPixels; - } - - shiftLine(srcImg) { - - let offsetX; - let rangeMin, rangeMax; - let destPixels; - let rangeH; - - destPixels = new Uint8ClampedArray(srcImg.pixels); - rangeH = srcImg.height; - rangeMin = floor(random(0, rangeH)); - rangeMax = rangeMin + floor(random(1, rangeH - rangeMin)); - offsetX = this.channelLen * floor(random(-40, 40)); - - for (let y = 0; y < srcImg.height; y++) { - if (y > rangeMin && y < rangeMax) { - for (let x = 0; x < srcImg.width; x++) { - let r, g, b, a; - let r2, g2, b2, a2; - let index; - - index = (y * srcImg.width + x) * this.channelLen; - r = index; - g = index + 1; - b = index + 2; - a = index + 3; - r2 = r + offsetX; - g2 = g + offsetX; - b2 = b + offsetX; - destPixels[r] = srcImg.pixels[r2]; - destPixels[g] = srcImg.pixels[g2]; - destPixels[b] = srcImg.pixels[b2]; - destPixels[a] = srcImg.pixels[a]; + + flowLine(srcImg, obj) { + let destPixels, tempY; + destPixels = new Uint8ClampedArray(srcImg.pixels); + obj.t1 %= srcImg.height; + obj.t1 += obj.speed; + //tempY = floor(noise(obj.t1) * srcImg.height); + tempY = floor(obj.t1); + for (let y = 0; y < srcImg.height; y++) { + if (tempY === y) { + for (let x = 0; x < srcImg.width; x++) { + let r, g, b, a; + let index; + index = (y * srcImg.width + x) * this.channelLen; + r = index; + g = index + 1; + b = index + 2; + a = index + 3; + destPixels[r] = srcImg.pixels[r] + obj.randX; + destPixels[g] = srcImg.pixels[g] + obj.randX; + destPixels[b] = srcImg.pixels[b] + obj.randX; + destPixels[a] = srcImg.pixels[a]; + } + } } - } + return destPixels; } - return destPixels; - } - - shiftRGB(srcImg) { - - let randR, randG, randB; - let destPixels; - let range; - - range = 16; - destPixels = new Uint8ClampedArray(srcImg.pixels); - randR = (floor(random(-range, range)) * srcImg.width + floor(random(-range, range))) * this.channelLen; - randG = (floor(random(-range, range)) * srcImg.width + floor(random(-range, range))) * this.channelLen; - randB = (floor(random(-range, range)) * srcImg.width + floor(random(-range, range))) * this.channelLen; - - for (let y = 0; y < srcImg.height; y++) { - for (let x = 0; x < srcImg.width; x++) { - let r, g, b, a; - let r2, g2, b2, a2; - let index; - - index = (y * srcImg.width + x) * this.channelLen; - r = index; - g = index + 1; - b = index + 2; - a = index + 3; - r2 = (r + randR) % srcImg.pixels.length; - g2 = (g + randG) % srcImg.pixels.length; - b2 = (b + randB) % srcImg.pixels.length; - destPixels[r] = srcImg.pixels[r2]; - destPixels[g] = srcImg.pixels[g2]; - destPixels[b] = srcImg.pixels[b2]; - destPixels[a] = srcImg.pixels[a]; - } + + shiftLine(srcImg) { + let offsetX; + let rangeMin, rangeMax; + let destPixels; + let rangeH; + + destPixels = new Uint8ClampedArray(srcImg.pixels); + rangeH = srcImg.height; + rangeMin = floor(random(0, rangeH)); + rangeMax = rangeMin + floor(random(1, rangeH - rangeMin)); + offsetX = this.channelLen * floor(random(-40, 40)); + + for (let y = 0; y < srcImg.height; y++) { + if (y > rangeMin && y < rangeMax) { + for (let x = 0; x < srcImg.width; x++) { + let r, g, b, a; + let r2, g2, b2, a2; + let index; + + index = (y * srcImg.width + x) * this.channelLen; + r = index; + g = index + 1; + b = index + 2; + a = index + 3; + r2 = r + offsetX; + g2 = g + offsetX; + b2 = b + offsetX; + destPixels[r] = srcImg.pixels[r2]; + destPixels[g] = srcImg.pixels[g2]; + destPixels[b] = srcImg.pixels[b2]; + destPixels[a] = srcImg.pixels[a]; + } + } + } + return destPixels; } - return destPixels; - } - - getRandomRectImg(srcImg) { - let startX; - let startY; - let rectW; - let rectH; - let destImg; - startX = floor(random(0, srcImg.width - 30)); - startY = floor(random(0, srcImg.height - 50)); - rectW = floor(random(30, srcImg.width - startX)); - rectH = floor(random(1, 50)); - destImg = srcImg.get(startX, startY, rectW, rectH); - destImg.loadPixels(); - return destImg; - } - - show() { - - // restore the original state - this.replaceData(this.imgOrigin, this.copyData); - - // sometimes pass without effect processing - let n = floor(random(100)); - if (n > 75 && this.throughFlag) { - this.throughFlag = false; - setTimeout(() => { - this.throughFlag = true; - }, floor(random(200, 1500))); + shiftRGB(srcImg) { + let randR, randG, randB; + let destPixels; + let range; + + range = 16; + destPixels = new Uint8ClampedArray(srcImg.pixels); + randR = (floor(random(-range, range)) * srcImg.width + floor(random(-range, range))) * this.channelLen; + randG = (floor(random(-range, range)) * srcImg.width + floor(random(-range, range))) * this.channelLen; + randB = (floor(random(-range, range)) * srcImg.width + floor(random(-range, range))) * this.channelLen; + + for (let y = 0; y < srcImg.height; y++) { + for (let x = 0; x < srcImg.width; x++) { + let r, g, b, a; + let r2, g2, b2, a2; + let index; + + index = (y * srcImg.width + x) * this.channelLen; + r = index; + g = index + 1; + b = index + 2; + a = index + 3; + r2 = (r + randR) % srcImg.pixels.length; + g2 = (g + randG) % srcImg.pixels.length; + b2 = (b + randB) % srcImg.pixels.length; + destPixels[r] = srcImg.pixels[r2]; + destPixels[g] = srcImg.pixels[g2]; + destPixels[b] = srcImg.pixels[b2]; + destPixels[a] = srcImg.pixels[a]; + } + } + + return destPixels; } - if (!this.throughFlag) { - push(); - translate((width - this.imgOrigin.width) / 2, (height - this.imgOrigin.height) / 2); - image(this.imgOrigin, 0, 0); - pop(); - return; + + getRandomRectImg(srcImg) { + let startX; + let startY; + let rectW; + let rectH; + let destImg; + startX = floor(random(0, srcImg.width - 30)); + startY = floor(random(0, srcImg.height - 50)); + rectW = floor(random(30, srcImg.width - startX)); + rectH = floor(random(1, 50)); + destImg = srcImg.get(startX, startY, rectW, rectH); + destImg.loadPixels(); + return destImg; } - // flow line - this.flowLineImgs.forEach((v, i, arr) => { - arr[i].pixels = this.flowLine(this.imgOrigin, v); - if (arr[i].pixels) { - this.replaceData(this.imgOrigin, arr[i].pixels); - } - }) - - // shift line - this.shiftLineImgs.forEach((v, i, arr) => { - if (floor(random(100)) > 50) { - arr[i] = this.shiftLine(this.imgOrigin); - this.replaceData(this.imgOrigin, arr[i]); - } else { - if (arr[i]) { - this.replaceData(this.imgOrigin, arr[i]); + show() { + // restore the original state + this.replaceData(this.imgOrigin, this.copyData); + + // sometimes pass without effect processing + let n = floor(random(100)); + if (n > 75 && this.throughFlag) { + this.throughFlag = false; + setTimeout(() => { + this.throughFlag = true; + }, floor(random(200, 1500))); + } + if (!this.throughFlag) { + push(); + translate((width - this.imgOrigin.width) / 2, (height - this.imgOrigin.height) / 2); + image(this.imgOrigin, 0, 0); + pop(); + return; } - } - }) - // shift rgb - this.shiftRGBs.forEach((v, i, arr) => { - if (floor(random(100)) > 65) { - arr[i] = this.shiftRGB(this.imgOrigin); - this.replaceData(this.imgOrigin, arr[i]); - } - }) - - push(); - translate((width - this.imgOrigin.width) / 2, (height - this.imgOrigin.height) / 2); - image(this.imgOrigin, 0, 0); - pop(); - - // scat image - this.scatImgs.forEach((obj) => { - push(); - translate((width - this.imgOrigin.width) / 2, (height - this.imgOrigin.height) / 2); - if (floor(random(100)) > 80) { - obj.x = floor(random(-this.imgOrigin.width * 0.3, this.imgOrigin.width * 0.7)); - obj.y = floor(random(-this.imgOrigin.height * 0.1, this.imgOrigin.height)); - obj.img = this.getRandomRectImg(this.imgOrigin); - } - if (obj.img) { - image(obj.img, obj.x, obj.y); - } - pop(); - }) + // flow line + this.flowLineImgs.forEach((v, i, arr) => { + arr[i].pixels = this.flowLine(this.imgOrigin, v); + if (arr[i].pixels) { + this.replaceData(this.imgOrigin, arr[i].pixels); + } + }); + + // shift line + this.shiftLineImgs.forEach((v, i, arr) => { + if (floor(random(100)) > 50) { + arr[i] = this.shiftLine(this.imgOrigin); + this.replaceData(this.imgOrigin, arr[i]); + } else { + if (arr[i]) { + this.replaceData(this.imgOrigin, arr[i]); + } + } + }); - } + // shift rgb + this.shiftRGBs.forEach((v, i, arr) => { + if (floor(random(100)) > 65) { + arr[i] = this.shiftRGB(this.imgOrigin); + this.replaceData(this.imgOrigin, arr[i]); + } + }); + push(); + translate((width - this.imgOrigin.width) / 2, (height - this.imgOrigin.height) / 2); + image(this.imgOrigin, 0, 0); + pop(); + + // scat image + this.scatImgs.forEach((obj) => { + push(); + translate((width - this.imgOrigin.width) / 2, (height - this.imgOrigin.height) / 2); + if (floor(random(100)) > 80) { + obj.x = floor(random(-this.imgOrigin.width * 0.3, this.imgOrigin.width * 0.7)); + obj.y = floor(random(-this.imgOrigin.height * 0.1, this.imgOrigin.height)); + obj.img = this.getRandomRectImg(this.imgOrigin); + } + if (obj.img) { + image(obj.img, obj.x, obj.y); + } + pop(); + }); + } } if (!firetable.started) firetable.init(); From 0e2bcdedeb5d257837081bede5b5701d67060522 Mon Sep 17 00:00:00 2001 From: Andrew Tibbetts Date: Thu, 6 Jan 2022 01:15:42 -0600 Subject: [PATCH 02/12] robot account avatar, tuck away logout --- css/looks.css | 26 +- index.html | 1169 ++++++++++++++++++++++++++----------------------- js/main.js | 75 ++-- 3 files changed, 698 insertions(+), 572 deletions(-) diff --git a/css/looks.css b/css/looks.css index 55165e1..b5278f4 100644 --- a/css/looks.css +++ b/css/looks.css @@ -440,6 +440,7 @@ span.removemeIcon.material-icons { } #socialthings { + display: flex; } a.sociallogo { @@ -448,6 +449,10 @@ a.sociallogo { margin: 0.2rem 0.2rem 0 0.2rem; } +a.sociallogo[href] { + display: block; +} + .sociallogo svg:hover { fill: #fff; } @@ -457,11 +462,7 @@ a.sociallogo { fill: #888; } -div#sociallthings { - margin-top: 0.25rem; -} - -div#roomlogo { +#roomlogo { background-image: url(../img/idlogo2.png); background-size: contain; width: 3rem; @@ -471,13 +472,18 @@ div#roomlogo { background-position: center; } -#loggedInName { - margin: 0 var(--pad2); +#loggedInUser { + margin-left: var(--pad2); cursor: pointer; text-decoration: none; } -#loggedInName:hover { +#loggedInUser .botson { + width: 2rem; + height: 2rem; +} + +#loggedInUser:hover { text-decoration: underline; } @@ -1836,6 +1842,10 @@ img.emoji { background-color: #222; } +.modalHeader h2 { + margin-right: auto; +} + .closeModal { margin-left: var(--pad3); } diff --git a/index.html b/index.html index d29cd48..694ef1f 100644 --- a/index.html +++ b/index.html @@ -1,561 +1,656 @@ + + + firetable + + + + + + + + + - - - firetable - - - - - - - - - + +
    + +
    + +
    + + + + +
    +
    +
    +
    Reconnecting...
    +
    - -
    - -
    - -
    - - - - -
    -
    Reconnecting...
    - -
    +
    +
    +
    +
    +
    +
    +
    +
      +
      • +
      • +
      • +
      • +
      • +
      • +
      • +
      • +
      • +
      • +
      • +
      • +
      • +
      • +
      • +
      • +
      • +
      • +
      • +
      • +
      • +
      • +
      • +
      • +
      • +
      • +
      • +
      • +
      • +
      • +
      • +
      • +
      • +
      • +
      • +
      • +
      • +
      • +
      • +
      • +
      • +
      • +
    +
    +
    +
    +
    Loading firetable...
    +
    +
    +
    +
    +
    +
    +
    +
    +
    +
    +
    +
    +
    +
    + + +
    +
    + + + link + +
    +
    + + +
    +
    +
    +
    +
    + +
    +
    -
    +
    +
    +
    -
    -
    -
    -
    -
    -
    -
      -
      • -
      • -
      • -
      • -
      • -
      • -
      • -
      • -
      • -
      • -
      • -
      • -
      • -
      • -
      • -
      • -
      • -
      • -
      • -
      • -
      • -
      • -
      • -
      • -
      • -
      • -
      • -
      • -
      • -
      • -
      • -
      • -
      • -
      • -
      • -
      • -
      • -
      • -
      • -
      • -
      • -
      • -
    -
    -
    -
    -
    Loading firetable...
    -
    -
    -
    -
    -
    -
    -
    -
    -
    -
    -
    -
    -
    -
    - - -
    -
    - - - link - -
    -
    - - -
    -
    -
    -
    -
    - -
    -
    +
    + + + +
    -
    -
    -
    +
    +
    +
    +
    + +
    +
    +
    +
    +
    +
    +
    +
    +
    +
    +
    +
    +
    +
    + +
    + +
    +
    + +
    +
    +
    +
    +
    + +
    +
    +
    +
    -
    - - - -
    +
    +
    + + +
    +
    +
    +
    +
    +
    +
    +
    +
    +
    +
    +
    Loading waitlist...
    +
    +
    +
    -
    -
    -
    -
    - -
    -
    -
    -
    -
    -
    -
    -
    -
    -
    -
    -
    -
    -
    - -
    - -
    -
    - -
    -
    -
    -
    -
    - -
    -
    -
    -
    +
    +
    +
    +
    + +
    +
    + + + +
    + +
    +
    +
    +
    +
    + + arrow_right_alt + + +
    +
    Merge in progress... Please stand by...
    +
    + Congratulations! Merge completed. + +
    +
    +
    +
    +
    + +
    +
    +
    +
    +
    +
    +
    + +
    + + +
    + vertical_align_top + vertical_align_bottom + edit + close + delete +
    +
    +
    + +
    + + link +
    + Edit the song tag + hit enter to save
    +
    + Rohn Standard Notation
    + Standard: Artist - Song Title
    + Remix: Artist - Song Title (Remixartist Remix)
    + Featuring: Artist - Song Title feat. Subartist
    + Featuring + Remix: Artist - Song Title feat. Subartist (Remixartist Remix) +
    +
    +
    +
    + +
    or...
    + + +
    +
    + +
    + YoutubeSoundcloud +
    +
    +
    + +
    + +
    + +
    +
    +
    +
    +
    +
    -
    -
    - - -
    -
    -
    -
    -
    -
    -
    -
    -
    -
    -
    -
    - Loading waitlist... -
    -
    -
    -
    +
    +
    +
    +
    +
    + +
    +
    +
    +
    + played by on at + +
    +
    +
    +
    +
    +
    +
    -
    -
    -
    -
    - -
    -
    - - - -
    - -
    -
    -
    -
    -
    - arrow_right_alt -
    -
    Merge in progress... Please stand by...
    -
    Congratulations! Merge completed.
    -
    -
    -
    -
    - -
    -
    -
    -
    -
    -
    -
    - -
    - - -
    - vertical_align_top - vertical_align_bottom - edit - close - delete -
    -
    -
    - -
    - - link -
    - Edit the song tag + hit enter to save
    -
    - Rohn Standard Notation
    - Standard: Artist - Song Title
    - Remix: Artist - Song Title (Remixartist Remix)
    - Featuring: Artist - Song Title feat. Subartist
    - Featuring + Remix: Artist - Song Title feat. Subartist (Remixartist Remix) -
    -
    -
    -
    - -
    or...
    - - -
    -
    - -
    - YoutubeSoundcloud -
    -
    -
    - -
    - -
    - -
    -
    -
    -
    -
    -
    +
    +
    +

    Welcome To Firetable!

    +

    + Want to jump on the DJ table and pick some h0t tunes to play? Just want to join the + conversation? +

    +
    + +
    +

    Create an Account

    +
    Email:
    +
    Username:
    +
    Password:
    +
    Repeat Password:
    +
    + I have read, understand, and agree to the + Terms of Service and + Privacy Policy. +
    +
    + +
    +
    + + +
    +
    -
    -
    -

    Welcome To Firetable!

    -

    Want to jump on the DJ table and pick some h0t tunes to play? Just want to join the conversation?

    -
    - -
    -

    Create an Account

    -
    - Email: -
    -
    - Username: -
    -
    - Password: -
    -
    - Repeat Password: -
    -
    - I have read, understand, and agree to the Terms of Service and Privacy Policy. -
    -
    - -
    -
    - +
    +
    +

    Your Card Case

    + +
    +
    +
    loading your cards...
    +
    +
    -
    +
    +
    +

    Your Account

    + + +
    +
    +
    + Change your username to some other thing...

    + +
    +
    +
    -
    +
    +
    +

    Supermod Control Panel

    + +
    +
    + Suspend a user's account, or manage active suspentions.

    + +
    +

    Active Suspentions

    +
    +
    +
    -
    -
    -

    Playlist Deletion Zone

    - -
    -
    - So you want to delete a playlist huh? This action is irreversible.
    If you're super sure you want to do this, pick a playlist to delete below. -

    -
    - - -
    -
    -
    +
    +
    +

    Playlist Import Machine

    + +
    +
    +
    + +
    +
    + +
    +
    +
    +
    + Select an "interactive webpage" .html file from + Dubtrack. +
    + +
    +
    +
    +
    +
    +
    -
    -
    -

    Setthings

    - -
    -
    - Set all of the things here on the table. -

    -
    - - -
    -
    - - -
    -
    - -
    - - -
    -
    - -
    -
    -
    - -
    - -
    - - -
    -
    -
    -
    +
    +
    +
    + +
    +
    -
    -
    -

    Your Card Case

    - -
    -
    -
    loading your cards...
    -
    -
    + -
    -
    -

    Your Account

    - -
    -
    -
    - Change your username to some other thing...

    - -
    -
    -
    + -
    -
    -

    Supermod Control Panel

    - -
    -
    - Suspend a user's account, or manage active suspentions.

    - -
    -

    Active Suspentions

    -
    -
    -
    - -
    -
    -

    Playlist Import Machine

    - -
    -
    -
    - -
    -
    - -
    -
    -
    -
    - Select an "interactive webpage" .html file from Dubtrack. -
    - -
    -
    -
    -
    -
    - -
    - -
    -
    -
    - -
    -
    - - - - - - - - - - - - - - - - - - - - - - - - - -
    -

    Your account has been suspended due to a perceived violation of our Terms of Service.

    -

    We reserve the right to modify, suspend, or terminate the Service for any reason, without notice, at any time.

    -
    + + + + + + + + + + + + + + + + + + +
    +

    Your account has been suspended due to a perceived violation of our Terms of Service.

    +

    + We reserve the right to modify, suspend, or terminate the Service for any reason, without notice, at any + time. +

    +
    diff --git a/js/main.js b/js/main.js index db8eabc..bbfb426 100644 --- a/js/main.js +++ b/js/main.js @@ -47,7 +47,7 @@ var firetable = { atUsers: [], atUsersFiltered: [], atString: "", - debug: false, + debug: true, }; if (typeof ftconfigs == "undefined") @@ -183,27 +183,22 @@ firetable.init = function () { if (ftconfigs.facebookURL) { $(".sociallogo.facebook").attr("href", ftconfigs.facebookURL); - $(".sociallogo.facebook").css("display", "inline-block"); } if (ftconfigs.redditURL) { $(".sociallogo.reddit").attr("href", ftconfigs.redditURL); - $(".sociallogo.reddit").css("display", "inline-block"); } if (ftconfigs.lastfmURL) { $(".sociallogo.lastfm").attr("href", ftconfigs.lastfmURL); - $(".sociallogo.lastfm").css("display", "inline-block"); } if (ftconfigs.discordURL) { $(".sociallogo.discord").attr("href", ftconfigs.discordURL); - $(".sociallogo.discord").css("display", "inline-block"); } if (ftconfigs.soundcloudURL) { $(".sociallogo.soundcloud").attr("href", ftconfigs.soundcloudURL); - $(".sociallogo.soundcloud").css("display", "inline-block"); } if (ftconfigs.logoImage) $("#roomlogo").css("background-image", "url(" + ftconfigs.logoImage + ")"); @@ -337,7 +332,7 @@ firetable.actions = { }, showLoginScreen: function () { $("#cardCaseButton").hide(); - $("#loggedInName").hide(); + $("#loggedInUser").hide(); $("#logOutButton").hide().off(); $("#mainGrid").removeClass().addClass("login"); $("#grab").css("display", "none"); @@ -361,7 +356,7 @@ firetable.actions = { }); }, loggedIn: function (user) { - firetable.debug && console.log("user signed in!"); + firetable.debug && console.log("user signed in!", user.uid, ftapi.uid, ftapi.users); if ($("#login").html()) { firetable.loginForm = $("#login").html(); firetable.ui.loginEventsDestroy(); @@ -370,12 +365,26 @@ firetable.actions = { if (ftapi.users[ftapi.uid]) { if (ftapi.users[ftapi.uid].username) { - $("#loggedInName").text(ftapi.users[ftapi.uid].username); + $("#loggedInUser .botson").css( + "background-image", + "url(https://indiediscotheque.com/robots/" + + ftapi.uid + + ftapi.users[ftapi.uid].username + + ".png?size=175x175)" + ); } else { - $("#loggedInName").text(user.uid); + $("#loggedInUser .botson").data("uid", user.uid); + $("#loggedInUser .botson").css( + "background-image", + "url(https://indiediscotheque.com/robots/" + user.uid + ".png?size=175x175)" + ); } } else { - $("#loggedInName").text(user.uid); + $("#loggedInUser .botson").data("uid", user.uid); + $("#loggedInUser .botson").css( + "background-image", + "url(https://indiediscotheque.com/robots/" + user.uid + ".png?size=175x175)" + ); } ftapi.lookup.allLists(function (allPlaylists) { @@ -427,7 +436,7 @@ firetable.actions = { }); }); $("#cardCaseButton").show(); - $("#loggedInName").show(); + $("#loggedInUser").show(); $("#logOutButton").show().on("click", firetable.actions.logOut); firetable.debug && console.log("remove login class from mainGrid"); $("#mainGrid").removeClass().addClass("mmusrs"); @@ -1394,10 +1403,10 @@ firetable.utilities = { .replace(//g, ">") /* - You may add other replacements here for HTML only - (but it's not necessary). - Or for XML, only if the named entities are defined in its DTD. - */ + You may add other replacements here for HTML only + (but it's not necessary). + Or for XML, only if the named entities are defined in its DTD. + */ .replace(/\r\n/g, preserveCR) /* Must be before the next replacement. */ .replace(/[\r\n]/g, preserveCR) ); @@ -2467,10 +2476,16 @@ firetable.ui = { ); }); ftapi.events.on("usersChanged", function (okdata) { - if ($("#loggedInName").text() == ftapi.uid) { + if ($("#loggedInUser .botson").data("uid") == ftapi.uid) { if (ftapi.users[ftapi.uid]) { if (ftapi.users[ftapi.uid].username) { - $("#loggedInName").text(ftapi.users[ftapi.uid].username); + $("#loggedInUser .botson").css( + "background-image", + "url(https://indiediscotheque.com/robots/" + + ftapi.uid + + ftapi.users[ftapi.uid].username + + ".png?size=175x175)" + ); } } } @@ -3159,7 +3174,13 @@ firetable.ui = { $("#usernameResponse").text(error); } else { $("#usernameResponse").text("Great job! Your name is now " + newDjName); - $("#loggedInName").text(newDjName); + $("#loggedInUser .botson").css( + "background-image", + "url(https://indiediscotheque.com/robots/" + + ftapi.uid + + newDjName + + ".png?size=175x175)" + ); } }); } @@ -3798,14 +3819,14 @@ firetable.ui = { $("#stage").css("background-color", data.color); } /* - if (firetable.countcolor == "#fff"){ - firetable.countcolor = "#ffffffc9"; - } else if (firetable.countcolor == "#000"){ - firetable.debug && console.log("a") - firetable.countcolor = "#000000c9"; - } - $("#stage").css("color", firetable.countcolor); - */ + if (firetable.countcolor == "#fff"){ + firetable.countcolor = "#ffffffc9"; + } else if (firetable.countcolor == "#000"){ + firetable.debug && console.log("a") + firetable.countcolor = "#000000c9"; + } + $("#stage").css("color", firetable.countcolor); + */ $(".customColorStyles").remove(); $(".festiveLights").remove(); From 753846983f95e8f89f05395939718cf9c5944144 Mon Sep 17 00:00:00 2001 From: Andrew Tibbetts Date: Sun, 9 Jan 2022 15:15:50 -0600 Subject: [PATCH 03/12] combined all users and waitlist --- css/looks.css | 144 ++++++++++++++++++++++------------------- index.html | 37 +++++++---- js/main.js | 175 +++++++++++++++++++------------------------------- 3 files changed, 167 insertions(+), 189 deletions(-) diff --git a/css/looks.css b/css/looks.css index b5278f4..1ac49a8 100644 --- a/css/looks.css +++ b/css/looks.css @@ -221,31 +221,38 @@ code { display: none; } -.utitle, -.prsnJoined { - color: rgba(255, 255, 255, 0.4); +.prsnRole { + font-size: 1.125rem; + color: #43b581; +} + +.utitle { font-size: 0.66rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.1em; + color: rgba(255, 255, 255, 0.4); } -.herecon { - color: #43b581; - background-color: #282828; +.imptcon { + display: none; + position: absolute; + right: -0.25rem; height: calc(0.75rem + 4px); width: calc(0.75rem + 4px); padding: 2px; font-size: 0.75em; - display: block; - position: absolute; - bottom: 0; + color: var(--orange); + background-color: #282828; border-radius: 999px; - right: -0.25rem; } -.herecon.idle { - color: #faa61a; +.prson.idle .prsnRole { + color: var(--orange); +} + +.prson.idlething .imptcon { + display: block; } .notice { @@ -597,31 +604,47 @@ a.sociallogo[href] { grid-area: users; display: flex; flex-direction: column; + background-color: #181818; overflow: hidden; } -#userslist { - flex: 1; +.usersWrap { + overflow: auto; +} + +#usersHeader { + display: flex; + align-items: center; + gap: 0.5rem; + padding: var(--pad2) var(--pad3); + color: #888; background-color: #282828; - overflow: hidden; } -#usertabs { - padding-top: 0.5rem; - background-color: #222; +#usersHeader h2 { + margin-right: auto; + font-size: 1rem; + color: inherit; } -.usersWrap { - overflow: auto; +#usersHeader .listenerType { + /* display: flex;*/ + display: none; + align-items: center; + font-size: 0.875rem; + font-weight: 700; +} + +#usersHeader .material-icons { + font-size: 1rem; + color: #888; } -#allusers, -#justwaitlist { +#allUsers { padding-top: 1rem; } -#allusersWrap, -#justwaitWrap { +#allUsersWrap { height: 100%; } @@ -632,8 +655,7 @@ a.sociallogo[href] { padding: var(--pad1) var(--pad4); } -#allusersWrap .prson { - cursor: pointer; +#allUsersWrap .prson { -webkit-touch-callout: none; -webkit-user-select: none; -khtml-user-select: none; @@ -646,33 +668,39 @@ a.sociallogo[href] { flex: 1; font-size: 0.9rem; font-weight: 700; - line-height: 1.5; + line-height: 2; white-space: nowrap; overflow-x: hidden; text-overflow: ellipsis; } -#userslist .utitle { - margin-left: auto; -} - -#userslist .prson .prsnJoined { - display: none; +.djOrder { + display: flex; + align-items: center; + margin-right: 0.75rem; + font-size: 0.85rem; + font-weight: 700; + line-height: 1; + color: #888; } -#userslist .prson:hover .prsnJoined { - display: block; +.djOrder .material-icons-outlined { + margin-right: 0.15rem; + font-size: 1.25rem; + color: #888; } -#userslist .prson:hover .utitle { - display: none; +#usersbox .prsnRole { + margin-left: auto; } -#userslist .prson.blockd .prsnName, -#userslist .prson.blockd .prsnJoined, -#userslist .prson.blockd .utitle { +#usersbox .prson.blockd .prsnName, +#usersbox .prson.blockd .prsnRole { opacity: 0.5; } +#usersbox .prson.blockd .blockon { + display: block; +} .botson { background-color: #000; @@ -683,14 +711,17 @@ a.sociallogo[href] { border-bottom: 1px solid #888; } -#userslist .botson { +#usersbox .botson { + display: flex; + align-items: center; margin-right: 0.75rem; width: 2rem; height: 2rem; position: relative; } -span.block { +span.blockon { + display: none; width: 2rem; height: 2rem; font-size: 2rem; @@ -699,7 +730,7 @@ span.block { border-radius: 999px; } -span.block:empty { +span.blockon:empty { display: none; } @@ -747,17 +778,6 @@ span.block:empty { padding: var(--pad4); } -#nowplaying::before { - content: ""; - position: absolute; - top: 3rem; - left: 3rem; - width: 15rem; - height: 5rem; - background-color: rgba(0, 0, 0, 0.25); - box-shadow: 0 0 10rem 10rem rgba(0, 0, 0, 0.25); -} - #albumArt { grid-area: art; margin: var(--pad1) var(--pad3) 0 var(--pad1); @@ -1335,7 +1355,7 @@ a.importLinkCheck { text-align: center; white-space: nowrap; text-overflow: ellipsis; - background-color: #333; + background-color: #282828; border-bottom: 1px solid #111; overflow: hidden; } @@ -2035,7 +2055,6 @@ div#blog { #ftSuperCopButton, #audilert, #sc-widget, -#justwaitWrap, .notice, #emojiPicker, #overlay { @@ -2044,7 +2063,7 @@ div#blog { /*------------------------------------ Media Queries -*/ @media only screen and (max-width: 799px) { - #allusersWrap .prson { + #allUsersWrap .prson { cursor: none; pointer-events: none; } @@ -2165,11 +2184,6 @@ div#blog { display: none; } - #usertabs { - padding-top: 0; - background-color: black; - } - #djStage { height: 30vh; min-height: 15rem; @@ -2283,16 +2297,12 @@ div#blog { box-shadow: 0 -0.2rem 0.5rem -0.2rem black; } - #userslist { - display: flex; - } - .usersWrap { display: block !important; flex: 1; } - #allusersWrap { + #allUsersWrap { border-right: 5px solid black; } } diff --git a/index.html b/index.html index 694ef1f..2365fb8 100644 --- a/index.html +++ b/index.html @@ -10,6 +10,7 @@ + @@ -245,21 +246,31 @@
    -
    - - +
    +

    Users

    +
    + room +
    +
    + radio +
    -
    -
    -
    -
    -
    -
    -
    +
    +
    +
    + +
    + block + label_important +
    + + +
    -
    -
    -
    Loading waitlist...
    +
    +
    +
    +
    diff --git a/js/main.js b/js/main.js index bbfb426..2937041 100644 --- a/js/main.js +++ b/js/main.js @@ -2234,39 +2234,34 @@ firetable.ui = { } }); ftapi.events.on("waitlistChanged", function (data) { - var ok1 = ""; - var cnt = "0"; + /* + { + id: [string], // user id + name: [string], // user name + plays: [int], // number of songs played as dj + removeAfter: [bool] // has the user requested the bot to remove them after? + } + */ if (data) { - var countr = 1; + $("#allUsers .djOrder.waitlist").html("").removeClass("waitlist"); for (var key in data) { - firetable.debug && console.log("waitlist", data); + var position = parseInt(key + 1); + firetable.debug && console.log("waitlist", position, data); if (data.hasOwnProperty(key)) { - cnt = countr; - var removeMe = ""; - if (data[key].removeAfter) removeMe = "departure_board"; - ok1 += - '
    ' + - countr + - ". " + - data[key].name + - ' ' + - removeMe + - "
    "; - countr++; + $("#user" + data[key].id + " .djOrder") + .html('pending ' + position) + .removeClass("ondeck") + .addClass("waitlist"); } } } - $("#label2 .count").text(" (" + cnt + ")"); - $("#justwaitlist").html(ok1); }); ftapi.events.on("tableChanged", function (data) { var ok1 = ""; if (data) { + console.log("table changed", data); var countr = 0; + $("#allUsers .djOrder.ondeck").html("").removeClass("ondeck"); for (var key in data) { if (data.hasOwnProperty(key)) { var removeMe = ""; @@ -2295,6 +2290,10 @@ firetable.ui = { firetable.playlimit + "
    "; countr++; + $("#user" + data[key].id + " .djOrder") + .html('album ' + countr) + .removeClass("waitlist") + .addClass("ondeck"); } } if (countr < 4) { @@ -2357,123 +2356,95 @@ firetable.ui = { } } }); + var $userTemplate = $("#userKEY").remove(); ftapi.events.on("userJoined", function (data) { - console.log(data); - var user = data; - var block = ""; - var blockcon = ""; - var herecon = "lens"; - var isIdle = ""; + console.log("user joined", data); + var $newUser = $userTemplate.clone(); + if (!data.username) data.username = data.userid; if (data.idle) { - if (data.idle.isIdle && !data.hostbot) isIdle = "idle"; - if (data.idle.audio == 2) { - herecon = "label_important"; - } + if (data.idle.isIdle && !data.hostbot) $newUser.addClass("idle"); + if (data.idle.audio == 2) $newUser.addClass("idlething"); } if (data.blocked) { - block = "blockd"; - blockcon = "block"; + $newUser.addClass("blockd"); } - if (!data.username) data.username = data.userid; - var destination = "#usersRegular"; var rolename = ""; + var rolecon = ""; if (data.mod) { rolename = "mod"; + rolecon = "shield"; destination = "#usersMod"; } if (data.supermod) { rolename = "supermod"; + rolecon = "local_police"; destination = "#usersSuper"; } if (data.hostbot) { rolename = "robot"; + rolecon = "smart_toy"; destination = "#usersBot"; } - var newUserToAddX = $("
    "); - newUserToAddX.addClass("prson " + block); - newUserToAddX.attr("id", "user" + data.userid); - newUserToAddX.html( - '
    ' + - blockcon + - '' + - herecon + - '
    ' + - data.username + - '' + - rolename + - 'joined ' + - firetable.utilities.format_date(data.joined) + - "" - ); - firetable.utilities.chatAt(newUserToAddX); // adds the click event to @ the user - $(destination).append(newUserToAddX); + $newUser.attr("id", "user" + data.userid); + $newUser + .find(".botson") + .css( + "background-image", + "url(https://indiediscotheque.com/robots/" + data.userid + data.username + ".png?size=110x110)" + ); + $newUser.find(".prsnName").text(data.username); + $newUser.find(".prsnRole").text(rolecon).prop("title", rolename); + $newUser.prop("title", "joined " + firetable.utilities.format_date(data.joined)); + firetable.utilities.chatAt($newUser); // adds the click event to @ the user + $(destination).append($newUser); }); ftapi.events.on("userLeft", function (data) { $("#user" + data.userid).remove(); }); ftapi.events.on("userChanged", function (data) { - var user = data; - var block = ""; - var blockcon = ""; - var herecon = "lens"; - var isIdle = ""; - console.log("CHANGE", data); + console.log("user changed", data); + $thisUser = $("#user" + data.userid); + $thisUser.removeClass("idle"); + $thisUser.removeClass("blockd"); + if (!data.username) data.username = data.userid; if (data.idle) { - if (data.idle.isIdle && !data.hostbot) isIdle = "idle"; - if (data.idle.audio == 2) { - herecon = "label_important"; - } + if (data.idle.isIdle && !data.hostbot) $thisUser.addClass("idle"); + if (data.idle.audio == 2) $thisUser.addClass("idlething"); } if (data.blocked) { - block = "blockd"; - blockcon = "block"; + $thisUser.addClass("blockd"); } - if (!data.username) data.username = data.userid; - var destination = "#usersRegular"; var rolename = ""; + var rolecon = ""; if (data.mod) { rolename = "mod"; + rolecon = "shield"; destination = "#usersMod"; } if (data.supermod) { rolename = "supermod"; + rolecon = "local_police"; destination = "#usersSuper"; } if (data.hostbot) { rolename = "robot"; + rolecon = "smart_toy"; destination = "#usersBot"; } - $("#user" + data.userid).html( - '
    ' + - blockcon + - '' + - herecon + - '
    ' + - data.username + - '' + - rolename + - 'joined ' + - firetable.utilities.format_date(data.joined) + - "" - ); + $thisUser + .find(".botson") + .css( + "background-image", + "url(https://indiediscotheque.com/robots/" + data.userid + data.username + ".png?size=110x110)" + ); + $thisUser.find(".prsnName").text(data.username); + $thisUser.find(".prsnRole").text(rolecon).prop("title", rolename); }); ftapi.events.on("usersChanged", function (okdata) { if ($("#loggedInUser .botson").data("uid") == ftapi.uid) { @@ -2499,8 +2470,8 @@ firetable.ui = { } } var count = Object.keys(okdata).length; - $("#label1 .count").text(" (" + count + ")"); - firetable.debug && console.log("users:", okdata); + $("#numListeners, #numRoomListeners").text(count); + firetable.debug && console.log("users changed:", okdata); }); var $chatTemplate = $("#chatKEY").remove(); ftapi.events.on("newChat", function (chatData) { @@ -2742,8 +2713,6 @@ firetable.ui = { firetable.ui.LinkGrabber.start(); - $("#label1").bind("click.lb1tab", firetable.ui.usertab1); - $("#label2").bind("click.lb2tab", firetable.ui.usertab2); $("#addToQueueBttn").bind("click", function () { $("#mainqueuestuff").css("display", "none"); $("#filterMachine").css("display", "none"); @@ -3965,18 +3934,6 @@ firetable.ui = { } }); }, - usertab1: function () { - $("#allusersWrap").css("display", "block"); - $("#justwaitWrap").css("display", "none"); - $("#usertabs").find(".on").removeClass("on"); - $("#label1").addClass("on"); - }, - usertab2: function () { - $("#usertabs").find(".on").removeClass("on"); - $("#label2").addClass("on"); - $("#allusersWrap").css("display", "none"); - $("#justwaitWrap").css("display", "block"); - }, LinkGrabber: { textarea: null, From a2e4d9fb6fd10ecf609391248676b7248e80f13b Mon Sep 17 00:00:00 2001 From: Andrew Tibbetts Date: Mon, 10 Jan 2022 22:59:09 -0600 Subject: [PATCH 04/12] dot for non-mods to show idle, new waitlist icon --- css/looks.css | 11 ++++--- index.html | 4 +-- js/main.js | 88 +++++++++++++++++++++++++++++++-------------------- 3 files changed, 61 insertions(+), 42 deletions(-) diff --git a/css/looks.css b/css/looks.css index 1ac49a8..5e1059b 100644 --- a/css/looks.css +++ b/css/looks.css @@ -225,6 +225,11 @@ code { font-size: 1.125rem; color: #43b581; } +.smallIcon .prsnRole { + margin-right: 0.15rem; + margin-left: 0.15rem; + font-size: 0.75rem; +} .utitle { font-size: 0.66rem; @@ -684,16 +689,12 @@ a.sociallogo[href] { color: #888; } -.djOrder .material-icons-outlined { +.djOrder .material-icons { margin-right: 0.15rem; font-size: 1.25rem; color: #888; } -#usersbox .prsnRole { - margin-left: auto; -} - #usersbox .prson.blockd .prsnName, #usersbox .prson.blockd .prsnRole { opacity: 0.5; diff --git a/index.html b/index.html index 2365fb8..0406f2b 100644 --- a/index.html +++ b/index.html @@ -555,7 +555,7 @@

    Your Card Case

    -

    Your Account

    +

    Account

    @@ -565,7 +565,7 @@

    Your Account

    - Change your username to some other thing...

    + Change your username, , to some other thing...

    diff --git a/js/main.js b/js/main.js index 2937041..c6dc50b 100644 --- a/js/main.js +++ b/js/main.js @@ -365,13 +365,16 @@ firetable.actions = { if (ftapi.users[ftapi.uid]) { if (ftapi.users[ftapi.uid].username) { - $("#loggedInUser .botson").css( - "background-image", - "url(https://indiediscotheque.com/robots/" + - ftapi.uid + - ftapi.users[ftapi.uid].username + - ".png?size=175x175)" - ); + $("#loggedInUser .botson") + .css( + "background-image", + "url(https://indiediscotheque.com/robots/" + + ftapi.uid + + ftapi.users[ftapi.uid].username + + ".png?size=175x175)" + ) + .prop("title", "You're logged in as " + ftapi.users[ftapi.uid].username); + $("#loggedInUsername").text(ftapi.users[ftapi.uid].username); } else { $("#loggedInUser .botson").data("uid", user.uid); $("#loggedInUser .botson").css( @@ -2234,14 +2237,6 @@ firetable.ui = { } }); ftapi.events.on("waitlistChanged", function (data) { - /* - { - id: [string], // user id - name: [string], // user name - plays: [int], // number of songs played as dj - removeAfter: [bool] // has the user requested the bot to remove them after? - } - */ if (data) { $("#allUsers .djOrder.waitlist").html("").removeClass("waitlist"); for (var key in data) { @@ -2249,7 +2244,12 @@ firetable.ui = { firetable.debug && console.log("waitlist", position, data); if (data.hasOwnProperty(key)) { $("#user" + data[key].id + " .djOrder") - .html('pending ' + position) + .html( + 'pending_actions ' + + position + ) .removeClass("ondeck") .addClass("waitlist"); } @@ -2291,7 +2291,7 @@ firetable.ui = { "
    "; countr++; $("#user" + data[key].id + " .djOrder") - .html('album ' + countr) + .html('album ' + countr) .removeClass("waitlist") .addClass("ondeck"); } @@ -2371,20 +2371,24 @@ firetable.ui = { var destination = "#usersRegular"; var rolename = ""; - var rolecon = ""; + var rolecon = "lens"; + var smallcon = true; if (data.mod) { rolename = "mod"; rolecon = "shield"; + smallcon = false; destination = "#usersMod"; } if (data.supermod) { rolename = "supermod"; rolecon = "local_police"; + smallcon = false; destination = "#usersSuper"; } if (data.hostbot) { rolename = "robot"; rolecon = "smart_toy"; + smallcon = false; destination = "#usersBot"; } @@ -2396,7 +2400,9 @@ firetable.ui = { "url(https://indiediscotheque.com/robots/" + data.userid + data.username + ".png?size=110x110)" ); $newUser.find(".prsnName").text(data.username); - $newUser.find(".prsnRole").text(rolecon).prop("title", rolename); + $newUser.find(".prsnRole").text(rolecon); + if (rolename) $newUser.find(".prsnRole").prop("title", rolename); + if (smallcon) $newUser.addClass("smallIcon"); $newUser.prop("title", "joined " + firetable.utilities.format_date(data.joined)); firetable.utilities.chatAt($newUser); // adds the click event to @ the user $(destination).append($newUser); @@ -2420,20 +2426,24 @@ firetable.ui = { var destination = "#usersRegular"; var rolename = ""; - var rolecon = ""; + var rolecon = "lens"; + var smallcon = true; if (data.mod) { rolename = "mod"; rolecon = "shield"; + smallcon = false; destination = "#usersMod"; } if (data.supermod) { rolename = "supermod"; rolecon = "local_police"; + smallcon = false; destination = "#usersSuper"; } if (data.hostbot) { rolename = "robot"; rolecon = "smart_toy"; + smallcon = false; destination = "#usersBot"; } @@ -2444,19 +2454,24 @@ firetable.ui = { "url(https://indiediscotheque.com/robots/" + data.userid + data.username + ".png?size=110x110)" ); $thisUser.find(".prsnName").text(data.username); - $thisUser.find(".prsnRole").text(rolecon).prop("title", rolename); + $thisUser.find(".prsnRole").text(rolecon); + if (rolename) $thisUser.find(".prsnRole").prop("title", rolename); + if (smallcon) $thisUser.addClass("smallIcon"); }); ftapi.events.on("usersChanged", function (okdata) { if ($("#loggedInUser .botson").data("uid") == ftapi.uid) { if (ftapi.users[ftapi.uid]) { if (ftapi.users[ftapi.uid].username) { - $("#loggedInUser .botson").css( - "background-image", - "url(https://indiediscotheque.com/robots/" + - ftapi.uid + - ftapi.users[ftapi.uid].username + - ".png?size=175x175)" - ); + $("#loggedInUser .botson") + .css( + "background-image", + "url(https://indiediscotheque.com/robots/" + + ftapi.uid + + ftapi.users[ftapi.uid].username + + ".png?size=175x175)" + ) + .prop("title", "You're logged in as " + ftapi.users[ftapi.uid].username); + $("#loggedInUsername").text(ftapi.users[ftapi.uid].username); } } } @@ -3143,13 +3158,16 @@ firetable.ui = { $("#usernameResponse").text(error); } else { $("#usernameResponse").text("Great job! Your name is now " + newDjName); - $("#loggedInUser .botson").css( - "background-image", - "url(https://indiediscotheque.com/robots/" + - ftapi.uid + - newDjName + - ".png?size=175x175)" - ); + $("#loggedInUser .botson") + .css( + "background-image", + "url(https://indiediscotheque.com/robots/" + + ftapi.uid + + newDjName + + ".png?size=175x175)" + ) + .prop("title", "You're logged in as " + ftapi.users[ftapi.uid].username); + $("#loggedInUsername").text(ftapi.users[ftapi.uid].username); } }); } From fae6b45916f53064258dc4ffc389cfde37b1be45 Mon Sep 17 00:00:00 2001 From: Andrew Tibbetts Date: Tue, 11 Jan 2022 00:52:44 -0600 Subject: [PATCH 05/12] FOOTER --- css/looks.css | 94 ++++++++++++++++++++++++++++++--------------------- index.html | 19 +++++------ 2 files changed, 65 insertions(+), 48 deletions(-) diff --git a/css/looks.css b/css/looks.css index 5e1059b..a3bdcc7 100644 --- a/css/looks.css +++ b/css/looks.css @@ -83,6 +83,7 @@ --pad4: 1.5rem; --pad5: 4rem; --pad6: 8rem; + --height-footer: 3rem; } *, @@ -433,7 +434,7 @@ span.removemeIcon.material-icons { align-items: center; padding: var(--pad1) var(--pad3); color: #fff; - background-color: black; + background-color: #111; } .ftlogo { @@ -518,7 +519,7 @@ a.sociallogo[href] { grid-area: main; flex: 1; display: grid; - grid-template-rows: auto auto auto 1fr; + grid-template-rows: auto auto 1fr auto; grid-template-columns: 1fr; grid-template-areas: "stage" @@ -531,9 +532,9 @@ a.sociallogo[href] { #mainGrid.mmusrs { grid-template-areas: "stage" - "theme" "mmopts" - "users"; + "users" + "theme"; } #mainGrid.mmusrs #queuebox, @@ -546,9 +547,9 @@ a.sociallogo[href] { #mainGrid.mmqueue { grid-template-areas: "stage" - "theme" "mmopts" - "queues"; + "queues" + "theme"; } #mainGrid.mmqueue #usersbox, @@ -561,9 +562,9 @@ a.sociallogo[href] { #mainGrid.mmchat { grid-template-areas: "stage" - "theme" "mmopts" - "chat"; + "chat" + "theme"; } #mainGrid.mmchat #usersbox, @@ -609,7 +610,7 @@ a.sociallogo[href] { grid-area: users; display: flex; flex-direction: column; - background-color: #181818; + background-color: #222; overflow: hidden; } @@ -617,22 +618,23 @@ a.sociallogo[href] { overflow: auto; } -#usersHeader { +#usersFooter { display: flex; align-items: center; + justify-content: center; gap: 0.5rem; - padding: var(--pad2) var(--pad3); + padding: var(--pad2) var(--pad3) 0 var(--pad3); color: #888; - background-color: #282828; + background-color: #111; } -#usersHeader h2 { - margin-right: auto; - font-size: 1rem; +#usersFooter h2 { + padding: 0.2rem 0; + font-size: 0.75rem; color: inherit; } -#usersHeader .listenerType { +#usersFooter .listenerType { /* display: flex;*/ display: none; align-items: center; @@ -640,7 +642,7 @@ a.sociallogo[href] { font-weight: 700; } -#usersHeader .material-icons { +#usersFooter .material-icons { font-size: 1rem; color: #888; } @@ -1351,13 +1353,15 @@ a.importLinkCheck { #themebox { grid-area: theme; z-index: 15; + display: flex; + align-items: center; + height: var(--height-footer); padding: var(--pad2); font-size: 1rem; text-align: center; white-space: nowrap; text-overflow: ellipsis; - background-color: #282828; - border-bottom: 1px solid #111; + background-color: #111; overflow: hidden; } @@ -1374,7 +1378,7 @@ a.importLinkCheck { display: flex; flex-direction: column; overflow: hidden; - background-color: #181818; + background-color: #222; } #chatsWrap { @@ -1399,7 +1403,6 @@ a.importLinkCheck { margin: var(--pad3); color: #ddd; word-break: break-word; - background-color: #181818; } .newChat .botson { @@ -1586,8 +1589,9 @@ a.importLinkCheck { position: relative; display: flex; align-items: center; + height: var(--height-footer); padding: var(--pad1); - background-color: #282828; + background-color: #111; } #pickerResults { @@ -1844,8 +1848,8 @@ img.emoji { .modalThing { display: none; flex-direction: column; - max-width: 80vw; - max-height: 80vh; + max-width: 100vw; + max-height: 100vh; background-color: #111; overflow: hidden; } @@ -2079,39 +2083,35 @@ div#blog { top: 0; } - #mainGrid { - gap: 0 5px; - } - #importPromptBox .modalContent { width: 480px; } #mainGrid, #mainGrid.mmchat { - grid-template-rows: auto auto auto 1fr; + grid-template-rows: auto auto 1fr auto; grid-template-columns: 60vw 40vw; grid-template-areas: - "stage theme" "stage chat" "mmopts chat" - "users chat"; + "users chat" + "theme chat"; } #mainGrid.mmusrs { grid-template-areas: - "stage theme" "stage chat" "mmopts chat" - "users chat"; + "users chat" + "theme chat"; } #mainGrid.mmqueue { grid-template-areas: - "stage theme" "stage chat" "mmopts chat" - "queues chat"; + "queues chat" + "theme chat"; } #mainGrid.mmchat #usersbox, @@ -2151,6 +2151,10 @@ div#blog { #mainGrid.mmqueue #thehistoryWrap { grid-area: mmopts / queues; } + + #actualChat { + background-color: #181818; + } } @media only screen and (min-width: 1200px) { @@ -2158,12 +2162,12 @@ div#blog { #mainGrid.mmqueue, #mainGrid.mmchat, #mainGrid.mmusrs { - grid-template-rows: auto auto 1fr; + grid-template-rows: auto 1fr auto; grid-template-columns: minmax(16rem, 20rem) minmax(40vw, 100vw) minmax(24rem, 36rem); grid-template-areas: - "users stage theme" "users stage chat" - "users queues chat"; + "users queues chat" + "users theme chat"; } #mainGrid.mmusrs #queuebox, @@ -2211,6 +2215,20 @@ div#blog { #thehistoryWrap { grid-area: queues !important; } + + #usersbox { + background-color: #181818; + } + + #themebox { + text-align: right; + } + + #usersFooter { + justify-content: flex-start; + height: var(--height-footer); + padding: var(--pad3); + } } @media only screen and (min-width: 1680px) { diff --git a/index.html b/index.html index 0406f2b..1b50f6e 100644 --- a/index.html +++ b/index.html @@ -10,7 +10,6 @@ - @@ -246,15 +245,6 @@
    -
    -

    Users

    -
    - room -
    -
    - radio -
    -
    @@ -273,6 +263,15 @@

    Users

    +
    +

    Users

    +
    + room +
    +
    + radio +
    +
    From 5534371167da42cddd6a381798abd07054c1cf54 Mon Sep 17 00:00:00 2001 From: Andrew Tibbetts Date: Fri, 14 Jan 2022 00:44:43 -0600 Subject: [PATCH 06/12] too much? --- css/looks.css | 392 ++++++++++++++++++++++++-------------------------- index.html | 145 +++++++++---------- js/main.js | 14 +- 3 files changed, 270 insertions(+), 281 deletions(-) diff --git a/css/looks.css b/css/looks.css index a3bdcc7..bc49053 100644 --- a/css/looks.css +++ b/css/looks.css @@ -73,10 +73,15 @@ } :root { - --orange: #f4810b; - --orangelite: #f6993c; - --orange66: #f4810b66; - --orange33: #f4810b33; + --color-bg: #181818; + --color-bg-s1: #151515; + --color-bg-s2: #111111; + --color-bg-t1: #222222; + --color-bg-t2: #282828; + --color-orange: #f4810b; + --color-orangelite: #f6993c; + --color-orange66: #f4810b66; + --color-orange33: #f4810b33; --pad1: 0.25rem; --pad2: 0.5rem; --pad3: 1rem; @@ -110,7 +115,7 @@ body { margin: 0; font-size: 1rem; color: #bbbbbb; - background-color: #000; + background: var(--color-bg); overflow: hidden; } @@ -129,7 +134,7 @@ h2 { } a { - color: var(--orange); + color: var(--color-orange); text-decoration: none; } @@ -139,7 +144,7 @@ a { :focus { outline: none; - box-shadow: 0 0 0.5rem var(--orange); + box-shadow: 0 0 0.5rem var(--color-orange); } input:not([type="checkbox"]):not([type="radio"]), @@ -150,7 +155,7 @@ button { font-size: 0.9rem; font-family: "Open Sans", helvetica, arial, sans-serif; color: #eee; - background-color: rgba(123, 123, 123, 0.15); + background-color: rgba(255, 255, 255, 0.05); border: 1px solid transparent; border-bottom-color: rgba(0, 0, 0, 0.85); border-top-color: rgba(255, 255, 255, 0.15); @@ -159,6 +164,7 @@ button { } input:not([type="checkbox"]):not([type="radio"]) { + background-color: rgba(0, 0, 0, 0.5); border-top-color: rgba(0, 0, 0, 0.85); border-bottom-color: rgba(255, 255, 255, 0.15); transform: translateY(-1px); @@ -196,7 +202,7 @@ code { } .simplebar-scrollbar:before { - background: var(--orange); + background: var(--color-orange); } .previewicon { @@ -214,7 +220,7 @@ code { } .track-warning { - color: var(--orange); + color: var(--color-orange); cursor: pointer; } @@ -223,7 +229,10 @@ code { } .prsnRole { + z-index: 2; + margin-right: 0.5rem; font-size: 1.125rem; + line-height: 0; color: #43b581; } .smallIcon .prsnRole { @@ -248,13 +257,13 @@ code { width: calc(0.75rem + 4px); padding: 2px; font-size: 0.75em; - color: var(--orange); - background-color: #282828; + color: var(--color-orange); + background-color: var(--color-bg-t2); border-radius: 999px; } .prson.idle .prsnRole { - color: var(--orange); + color: rgba(255, 255, 255, 0.33); } .prson.idlething .imptcon { @@ -263,7 +272,7 @@ code { .notice { margin: 0; - background-color: #222; + background-color: var(--color-bg-t1); overflow: hidden; height: 100%; padding: var(--pad4); @@ -284,7 +293,6 @@ code { .tabs { display: flex; - background-color: black; } .tab { @@ -294,7 +302,7 @@ code { font-size: 0.85rem; color: #999; text-align: center; - background-color: #222; + background-color: var(--color-bg); border: 0; border-top: 1px solid rgba(255, 255, 255, 0.1); border-radius: 0; @@ -313,7 +321,7 @@ code { .tab.on { color: #ffffff; - background-color: #282828; + background: linear-gradient(var(--color-bg-t1), var(--color-bg)); box-shadow: 0 -0.2rem 0.5rem -0.2rem black; } @@ -337,7 +345,7 @@ span.removemeIcon.material-icons { text-transform: uppercase; letter-spacing: 0.1em; text-decoration: none; - background-color: var(--orange); + background-color: var(--color-orange); border-top: 1px solid rgba(255, 255, 255, 0.3); border-bottom: 1px solid black; transition: all 100ms ease-in-out; @@ -345,12 +353,12 @@ span.removemeIcon.material-icons { } .butt:hover { - background-color: var(--orangelite); + background-color: var(--color-orangelite); } .graybutt { color: #888; - background: rgba(255, 255, 255, 0.066); + background: rgba(255, 255, 255, 0.05); } .graybutt:hover { @@ -376,11 +384,11 @@ span.removemeIcon.material-icons { } .iconbutt.on { - color: var(--orange); + color: var(--color-orange); background: rgba(255, 255, 255, 0.033); border-top: 1px solid black; - border-bottom: 1px solid var(--orange66); - box-shadow: inset 0 0 1rem var(--orange33); + border-bottom: 1px solid var(--color-orange66); + box-shadow: inset 0 0 1rem var(--color-orange33); } .iconbutt .material-icons { @@ -430,25 +438,26 @@ span.removemeIcon.material-icons { /* Top Bar / Site Header */ #topbar { + grid-area: head; display: flex; align-items: center; padding: var(--pad1) var(--pad3); color: #fff; - background-color: #111; } .ftlogo { margin-right: 0.5rem; - color: var(--orange); + color: var(--color-orange); font-size: 1.25rem; font-weight: 700; } #idtitle { display: none; + margin-top: 0.5em; font-size: 1rem; color: #fff; - font-weight: 700; + font-weight: 100; margin-right: 1rem; } @@ -459,7 +468,7 @@ span.removemeIcon.material-icons { a.sociallogo { text-decoration: none; display: none; - margin: 0.2rem 0.2rem 0 0.2rem; + margin: 0.5rem 0.2rem 0 0.2rem; } a.sociallogo[href] { @@ -480,7 +489,7 @@ a.sociallogo[href] { background-size: contain; width: 3rem; height: 3rem; - margin-right: 1.5rem; + margin-right: 1rem; background-repeat: no-repeat; background-position: center; } @@ -501,12 +510,13 @@ a.sociallogo[href] { } .header_icon { - margin: 0.2rem 0.2rem 0 0.2rem; + margin: 0.5rem 0.2rem 0 0.2rem; padding: 0; font-size: 0; line-height: 0; background: none; border: 0; + box-shadow: none; } .header_icon .material-icons { @@ -519,22 +529,25 @@ a.sociallogo[href] { grid-area: main; flex: 1; display: grid; - grid-template-rows: auto auto 1fr auto; + grid-template-rows: auto auto auto auto 1fr; grid-template-columns: 1fr; grid-template-areas: + "head" "stage" "main" "main" "main"; + justify-content: center; overflow: hidden; } #mainGrid.mmusrs { grid-template-areas: + "head" + "theme" "stage" "mmopts" - "users" - "theme"; + "users"; } #mainGrid.mmusrs #queuebox, @@ -546,10 +559,11 @@ a.sociallogo[href] { #mainGrid.mmqueue { grid-template-areas: + "head" + "theme" "stage" "mmopts" - "queues" - "theme"; + "queues"; } #mainGrid.mmqueue #usersbox, @@ -561,10 +575,11 @@ a.sociallogo[href] { #mainGrid.mmchat { grid-template-areas: + "head" + "theme" "stage" "mmopts" - "chat" - "theme"; + "chat"; } #mainGrid.mmchat #usersbox, @@ -575,8 +590,9 @@ a.sociallogo[href] { } #mainGrid.login { - grid-template-rows: auto 1fr; + grid-template-rows: auto auto 1fr; grid-template-areas: + "head" "stage" "login"; } @@ -598,11 +614,11 @@ a.sociallogo[href] { } #minimodeoptions .tab { - background-color: #1b1b1b; + background-color: var(--color-bg-s2); } #minimodeoptions .tab.on { - background-color: #222; + background-color: var(--color-bg); } /* Users Lists */ @@ -610,31 +626,32 @@ a.sociallogo[href] { grid-area: users; display: flex; flex-direction: column; - background-color: #222; + width: 100%; overflow: hidden; } .usersWrap { + max-width: 20rem; overflow: auto; } -#usersFooter { - display: flex; +#usersStats { + /* display: flex;*/ + display: none; align-items: center; justify-content: center; gap: 0.5rem; padding: var(--pad2) var(--pad3) 0 var(--pad3); color: #888; - background-color: #111; } -#usersFooter h2 { +#usersStats h2 { padding: 0.2rem 0; font-size: 0.75rem; color: inherit; } -#usersFooter .listenerType { +#usersStats .listenerType { /* display: flex;*/ display: none; align-items: center; @@ -642,17 +659,19 @@ a.sociallogo[href] { font-weight: 700; } -#usersFooter .material-icons { +#usersStats .material-icons { font-size: 1rem; color: #888; } #allUsers { - padding-top: 1rem; + padding-top: var(--height-footer); } #allUsersWrap { height: 100%; + width: 100%; + align-self: center; } .prson { @@ -673,9 +692,10 @@ a.sociallogo[href] { .prsnName { flex: 1; - font-size: 0.9rem; - font-weight: 700; + font-size: 1rem; + font-weight: 400; line-height: 2; + color: #bbb; white-space: nowrap; overflow-x: hidden; text-overflow: ellipsis; @@ -684,16 +704,19 @@ a.sociallogo[href] { .djOrder { display: flex; align-items: center; + justify-content: flex-end; margin-right: 0.75rem; + width: 2.5rem; font-size: 0.85rem; font-weight: 700; - line-height: 1; + line-height: 0; color: #888; } .djOrder .material-icons { - margin-right: 0.15rem; + margin-left: 0.25rem; font-size: 1.25rem; + line-height: 0; color: #888; } @@ -729,7 +752,7 @@ span.blockon { height: 2rem; font-size: 2rem; background-color: rgba(0, 0, 0, 0.5); - color: var(--orange); + color: var(--color-orange); border-radius: 999px; } @@ -746,17 +769,6 @@ span.blockon:empty { overflow: hidden; } -#stage::before { - content: ""; - position: absolute; - z-index: 1; - top: 0; - right: 0; - bottom: 0; - left: 0; - background: linear-gradient(rgba(0, 0, 0, 0.75), rgba(0, 0, 0, 0.55)); -} - #stage > div:not(#screenBox) { position: relative; z-index: 2; @@ -766,6 +778,7 @@ span.blockon:empty { display: flex; flex-direction: column; justify-content: space-between; + box-shadow: inset 0 -4rem 4rem -3rem rgba(0, 0, 0, 0.25), inset 0 4rem 4rem -3rem rgba(0, 0, 0, 0.25); } #nowplaying { @@ -779,6 +792,7 @@ span.blockon:empty { "art plays plays"; margin-bottom: auto; padding: var(--pad4); + text-shadow: 1px 1px 0 rgba(0, 0, 0, 0.15); } #albumArt { @@ -803,13 +817,14 @@ span.blockon:empty { font-weight: 700; letter-spacing: 0.05em; text-align: right; + color: rgba(255, 255, 255, 0.66); } #artist { grid-area: artist; margin-bottom: var(--pad2); - font-size: 1rem; - font-weight: 400; + font-size: 0.875rem; + font-weight: 700; overflow: hidden; color: white; white-space: nowrap; @@ -892,7 +907,7 @@ span.blockon:empty { font-size: 0.75rem; line-height: 1.5rem; text-align: center; - background-color: #151515; + background-color: var(--color-bg-s1); border-top-left-radius: 0.5rem; border-top-right-radius: 0.5rem; } @@ -926,8 +941,10 @@ span.blockon:empty { #volandthings { position: relative; - background-color: #151515; + background-color: var(--color-bg-s1); border-bottom: 1px solid #333; + border-bottom-left-radius: 0.5rem; + border-bottom-right-radius: 0.5rem; } #songthings, @@ -1007,7 +1024,7 @@ select#stealpicker { font-size: 1rem; border: none; font-family: "Open Sans", helvetica, arial, sans-serif; - background-color: #222; + background-color: var(--color-bg-t1); padding-left: var(--pad1); color: #eee; white-space: nowrap; @@ -1016,7 +1033,7 @@ select#stealpicker { #addToQueueBttn { margin-left: 1em; color: white; - background-color: var(--orange); + background-color: var(--color-orange); border-right: 1px solid black; border-left: 1px solid black; border-radius: 5px; @@ -1057,7 +1074,7 @@ select#stealpicker { .ui-slider-horizontal .ui-slider-range-min { left: 0; - background-color: var(--orange); + background-color: var(--color-orange); } .ui-slider-horizontal { @@ -1143,7 +1160,7 @@ input#queueFilter { } div#filterMachine { - padding: var(--pad2); + padding: 0 var(--pad2) var(--pad2) var(--pad2); } #mainqueue .material-icons { @@ -1153,7 +1170,7 @@ div#filterMachine { #queuelist .pvbar { padding: var(--pad2) var(--pad2); - background-color: #222; + background-color: var(--color-bg-t1); border-bottom: 1px solid black; cursor: move; /* fallback if grab cursor is unsupported */ @@ -1185,15 +1202,9 @@ div#filterMachine { select#listpicker { width: 100%; - background-color: #333; padding-left: var(--pad2); } -#queueControls, -#filterMachine { - background-color: #222; -} - #qControlButtons { display: flex; } @@ -1208,7 +1219,6 @@ button#cancelqsearch { display: none; flex-direction: column; height: 100%; - background-color: #222; overflow: hidden; } @@ -1228,13 +1238,12 @@ input#qsearch { #queuelist { flex: 1; height: 100%; - background-color: #181818; overflow: auto; } #searchResults { flex: 1; - background-color: #282828; + background-color: var(--color-bg-t2); } #mergeContain { @@ -1254,11 +1263,11 @@ input#qsearch { height: 0; border-left: 1rem solid transparent; border-right: 1rem solid transparent; - border-bottom: 1rem solid #333; + border-bottom: 1rem solid var(--color-bg-t2); } #mergeBox { - background-color: #333; + background-color: var(--color-bg-t2); padding: 15px; border-radius: 5px; } @@ -1279,10 +1288,8 @@ select#mergepicker, font-size: 14px; border: none; font-family: "Open Sans", helvetica, arial, sans-serif; - background-color: #222; padding-left: 5px; color: #eee; - height: 24px; white-space: nowrap; } @@ -1301,7 +1308,7 @@ select#mergepicker, display: flex; align-items: center; padding: var(--pad1) 0; - border-bottom: 1px solid #111; + border-bottom: 1px solid var(--color-bg-s2); } .importResult .material-icons { @@ -1355,14 +1362,13 @@ a.importLinkCheck { z-index: 15; display: flex; align-items: center; - height: var(--height-footer); padding: var(--pad2); font-size: 1rem; text-align: center; - white-space: nowrap; - text-overflow: ellipsis; - background-color: #111; - overflow: hidden; + background-color: var(--color-bg-s1); + border-top: 2px solid black; + border-top-left-radius: 0.5rem; + border-top-right-radius: 0.5rem; } #currentTheme { @@ -1378,7 +1384,6 @@ a.importLinkCheck { display: flex; flex-direction: column; overflow: hidden; - background-color: #222; } #chatsWrap { @@ -1392,8 +1397,8 @@ a.importLinkCheck { } #newchatForm { - flex: 1; - margin-right: var(--pad1); + grid-column: 2/3; + width: 100%; } .newChat { @@ -1401,14 +1406,15 @@ a.importLinkCheck { display: flex; justify-content: space-between; margin: var(--pad3); - color: #ddd; + font-size: 0.875rem; + color: #bbb; word-break: break-word; } .newChat .botson { position: relative; z-index: 2; - margin: 0.15rem var(--pad3) 0 0; + margin: 0 var(--pad3) 0 0; width: 2rem; height: 2rem; cursor: pointer; @@ -1437,13 +1443,13 @@ a.importLinkCheck { color: #888; font-size: 0.75rem; text-align: center; - background-color: #282828; + background-color: var(--color-bg-t1); border-radius: var(--pad1); } .chatContent { flex: 1; - padding: 0 var(--pad4) 0 0; + padding: 0 var(--pad3) 0 0; } .chatContent .utitle { @@ -1487,7 +1493,7 @@ a.importLinkCheck { } .chatText.deleteMe:hover { - background-color: #282828; + background-color: var(--color-bg-t2); } .chatText.deleteMe:hover .modDelete { @@ -1574,9 +1580,11 @@ a.importLinkCheck { .chatTime { position: relative; z-index: 2; + width: 3rem; font-weight: 400; font-size: 0.66rem; color: rgba(255, 255, 255, 0.47); + text-align: right; white-space: nowrap; } @@ -1587,11 +1595,15 @@ a.importLinkCheck { #chatbottom { position: relative; - display: flex; - align-items: center; + display: grid; + grid-template-columns: 3.5rem 1fr var(--pad3); + justify-items: center; height: var(--height-footer); - padding: var(--pad1); - background-color: #111; +} + +#pickEmoji { + grid-column: 1/2; + margin-left: var(--pad2); } #pickerResults { @@ -1621,12 +1633,13 @@ a.importLinkCheck { #emojiPicker { position: absolute; z-index: 99; - left: 0; - bottom: 100%; - width: 100%; + left: 1.5rem; + right: 1.5rem; + bottom: calc(100% + 0.5rem); padding: var(--pad3); - background-color: #2d2d2d; - box-shadow: 0 -0.25rem 0.5rem black; + background-color: var(--color-bg-t2); + box-shadow: 0 0.25rem 1rem black; + border-radius: 0.5rem; } #pickerNav { @@ -1648,7 +1661,7 @@ input#pickerSearch { } #pickerNav .on { - color: var(--orange); + color: var(--color-orange); filter: none; opacity: 1; } @@ -1687,8 +1700,8 @@ img.emoji { height: auto; padding: 0.2em; font-size: 0.7rem; - background-color: #222; - border-bottom-color: #222; + background-color: var(--color-bg-t1); + border-bottom-color: var(--color-bg-t1); border-bottom-left-radius: 0; border-bottom-right-radius: 0; box-shadow: none; @@ -1708,7 +1721,7 @@ img.emoji { bottom: 100%; left: 1.5rem; padding: 0.25rem; - background: #222; + background: var(--color-bg-t1); box-shadow: 0 -0.25rem 0.5rem black; } @@ -1739,7 +1752,7 @@ img.emoji { left: 0; width: 100%; height: 100%; - background: #222; + background: var(--color-bg-t1); overflow: auto; } @@ -1780,7 +1793,7 @@ img.emoji { #login { grid-area: login; padding: var(--pad5); - background: #151515; + background: var(--color-bg-s1); overflow: auto; height: 100%; } @@ -1850,7 +1863,7 @@ img.emoji { flex-direction: column; max-width: 100vw; max-height: 100vh; - background-color: #111; + background-color: var(--color-bg-s2); overflow: hidden; } @@ -1864,7 +1877,7 @@ img.emoji { justify-content: space-between; padding: var(--pad4); color: #eee; - background-color: #222; + background-color: var(--color-bg-t1); } .modalHeader h2 { @@ -1938,7 +1951,7 @@ span.cardGiftChat { span.cardGiftChat:hover, span.cardShareChat:hover { - background-color: var(--orange); + background-color: var(--color-orange); color: #000; } @@ -1977,7 +1990,7 @@ input.tagMachine, #importContent, #importDubContent { padding: var(--pad2) var(--pad3); - background-color: #282828; + background-color: var(--color-bg-t2); } #dubimportButton { @@ -2006,7 +2019,7 @@ input#plMachineById { } .responseBox { - background-color: var(--orange); + background-color: var(--color-orange); margin: 10px; padding: 5px; color: #000; @@ -2053,7 +2066,7 @@ body.blog { div#blog { flex: 1; padding: var(--pad5); - background-color: #282828; + background-color: var(--color-bg-t2); } /* Initially hidden stuff */ @@ -2089,29 +2102,32 @@ div#blog { #mainGrid, #mainGrid.mmchat { - grid-template-rows: auto auto 1fr auto; + grid-template-rows: auto auto auto auto 1fr; grid-template-columns: 60vw 40vw; grid-template-areas: + "head chat" + "theme chat" "stage chat" "mmopts chat" - "users chat" - "theme chat"; + "users chat"; } #mainGrid.mmusrs { grid-template-areas: + "head chat" + "theme chat" "stage chat" "mmopts chat" - "users chat" - "theme chat"; + "users chat"; } #mainGrid.mmqueue { grid-template-areas: + "head chat" + "theme chat" "stage chat" "mmopts chat" - "queues chat" - "theme chat"; + "queues chat"; } #mainGrid.mmchat #usersbox, @@ -2122,6 +2138,7 @@ div#blog { #mainGrid.login { grid-template-areas: + "head queues" "stage queues" "login queues"; } @@ -2136,10 +2153,36 @@ div#blog { display: none; } + #themebox, + #stage, + #minimodeoptions { + justify-self: center; + width: 100%; + max-width: 48rem; + } + + #topbar, + #queuebox, + #thehistoryWrap { + justify-self: center; + width: 100%; + max-width: 40rem; + } + + #topbar { + padding-right: var(--pad4); + padding-left: var(--pad4); + } + #idtitle { display: block; } + #actualChat { + min-width: 20rem; + max-width: 30rem; + } + #thehistoryWrap { grid-area: queues; display: block; @@ -2151,23 +2194,24 @@ div#blog { #mainGrid.mmqueue #thehistoryWrap { grid-area: mmopts / queues; } - - #actualChat { - background-color: #181818; - } } @media only screen and (min-width: 1200px) { + body { + background: linear-gradient(var(--color-bg-t1), var(--color-bg)); + } + #mainGrid, #mainGrid.mmqueue, #mainGrid.mmchat, #mainGrid.mmusrs { - grid-template-rows: auto 1fr auto; - grid-template-columns: minmax(16rem, 20rem) minmax(40vw, 100vw) minmax(24rem, 36rem); + grid-template-rows: auto auto auto 1fr; + grid-template-columns: minmax(20rem, 20vw) minmax(30rem, 48rem) 30vw; grid-template-areas: + "users head chat" + "users theme chat" "users stage chat" - "users queues chat" - "users theme chat"; + "users queues chat"; } #mainGrid.mmusrs #queuebox, @@ -2189,6 +2233,10 @@ div#blog { display: none; } + #topbar { + padding: 0; + } + #djStage { height: 30vh; min-height: 15rem; @@ -2216,35 +2264,17 @@ div#blog { grid-area: queues !important; } - #usersbox { - background-color: #181818; - } - - #themebox { - text-align: right; + #allUsersWrap { + align-self: flex-end; } - #usersFooter { + #usersStats { justify-content: flex-start; - height: var(--height-footer); - padding: var(--pad3); + padding: var(--pad3) var(--pad4); } } -@media only screen and (min-width: 1680px) { - #mainGrid, - #mainGrid.mmqueue, - #mainGrid.mmchat, - #mainGrid.mmusrs { - grid-template-columns: minmax(16rem, 20rem) minmax(50vw, 100vw) minmax(24rem, 36rem); - } - - #mainGrid.login { - grid-template-areas: - "stage stage queues" - "login login queues"; - } - +@media only screen and (min-width: 1370px) { #mainGrid.login #queuebox { display: none; } @@ -2252,50 +2282,6 @@ div#blog { #mainGrid.login #thehistoryWrap { width: 100%; } - - #history { - position: absolute; - left: 60%; - bottom: -1px; - width: auto; - padding: 0 var(--pad2); - border-left: var(--pad1) solid #151515; - border-bottom-color: #222; - border-radius: 0; - clip-path: polygon( - 0% 0%, - 0% 0%, - calc(100% - var(--pad2)) 0%, - 100% var(--pad2), - 100% 100%, - 100% 100%, - 0% 100%, - 0% 0% - ); - pointer-events: none; - } - - #history::after { - content: "Recent Plays"; - margin-left: var(--pad1); - font-size: 0.85rem; - font-weight: 400; - text-transform: none; - letter-spacing: 0; - } - - #queuebox { - width: 60%; - } - - #thehistoryWrap { - display: block !important; - grid-area: queues; - justify-self: flex-end; - z-index: auto; - width: 40%; - border-left: var(--pad1) solid #151515; - } } @media only screen and (min-width: 2100px) { @@ -2312,7 +2298,7 @@ div#blog { #usersbox .tab { color: #ffffff; - background-color: #282828; + background-color: var(--color-bg-t2); box-shadow: 0 -0.2rem 0.5rem -0.2rem black; } diff --git a/index.html b/index.html index 1b50f6e..8f83ba2 100644 --- a/index.html +++ b/index.html @@ -8,70 +8,71 @@ - + -
    - -
    - -
    - - - - -
    -
    -
    -
    Reconnecting...
    -
    -
    +
    + +
    + +
    + + + + +
    +
    +
    +
    Reconnecting...
    +
    @@ -213,6 +214,9 @@
    +
    -
    @@ -245,17 +246,26 @@
    +
    +

    People

    +
    + room +
    +
    + radio +
    +
    + +
    block label_important
    - -
    @@ -263,15 +273,6 @@
    -
    -

    Users

    -
    - room -
    -
    - radio -
    -
    diff --git a/js/main.js b/js/main.js index c6dc50b..50c9e81 100644 --- a/js/main.js +++ b/js/main.js @@ -2245,10 +2245,10 @@ firetable.ui = { if (data.hasOwnProperty(key)) { $("#user" + data[key].id + " .djOrder") .html( - 'pending_actions ' + - position + ' on the waitlist">pending_actions' ) .removeClass("ondeck") .addClass("waitlist"); @@ -2291,7 +2291,7 @@ firetable.ui = { "
    "; countr++; $("#user" + data[key].id + " .djOrder") - .html('album ' + countr) + .html(countr + ' album') .removeClass("waitlist") .addClass("ondeck"); } @@ -2403,6 +2403,7 @@ firetable.ui = { $newUser.find(".prsnRole").text(rolecon); if (rolename) $newUser.find(".prsnRole").prop("title", rolename); if (smallcon) $newUser.addClass("smallIcon"); + else $newUser.removeClass("smallIcon"); $newUser.prop("title", "joined " + firetable.utilities.format_date(data.joined)); firetable.utilities.chatAt($newUser); // adds the click event to @ the user $(destination).append($newUser); @@ -2457,6 +2458,7 @@ firetable.ui = { $thisUser.find(".prsnRole").text(rolecon); if (rolename) $thisUser.find(".prsnRole").prop("title", rolename); if (smallcon) $thisUser.addClass("smallIcon"); + else $thisUser.removeClass("smallIcon"); }); ftapi.events.on("usersChanged", function (okdata) { if ($("#loggedInUser .botson").data("uid") == ftapi.uid) { @@ -3801,9 +3803,9 @@ firetable.ui = { if (data.color == "#fff" || data.color == "#7f7f7f") { firetable.color = firetable.orange; firetable.countcolor = "#fff"; - $("#stage").css("background-color", "#fff"); + $("#djStage").css("background-color", "#fff"); } else { - $("#stage").css("background-color", data.color); + $("#djStage").css("background-color", data.color); } /* if (firetable.countcolor == "#fff"){ From d5480d83636b2c59f6e9d4ab7fe20fcc086a4848 Mon Sep 17 00:00:00 2001 From: Andrew Tibbetts Date: Fri, 14 Jan 2022 01:02:52 -0600 Subject: [PATCH 07/12] oh ya, login screen --- css/looks.css | 22 ++++++++++++++-------- 1 file changed, 14 insertions(+), 8 deletions(-) diff --git a/css/looks.css b/css/looks.css index bc49053..3b98e88 100644 --- a/css/looks.css +++ b/css/looks.css @@ -590,9 +590,10 @@ a.sociallogo[href] { } #mainGrid.login { - grid-template-rows: auto auto 1fr; + grid-template-rows: auto auto auto 1fr; grid-template-areas: "head" + "theme" "stage" "login"; } @@ -601,7 +602,6 @@ a.sociallogo[href] { #mainGrid.login #queuebox, #mainGrid.login #history, #mainGrid.login #thehistoryWrap, -#mainGrid.login #themebox, #mainGrid.login #actualChat, #mainGrid.login #voteActions, #mainGrid.login #minimodeoptions { @@ -1752,13 +1752,15 @@ img.emoji { left: 0; width: 100%; height: 100%; - background: var(--color-bg-t1); + background-image: linear-gradient(var(--color-bg-t1), var(--color-bg)); overflow: auto; } -#thehistory .pvbar { - padding: var(--pad2) var(--pad2) var(--pad2) var(--pad2); - border-bottom: 1px solid black; +#thehistory { + display: flex; + flex-direction: column; + gap: 1rem; + padding: 1rem; } .histmoreinfo { @@ -1793,8 +1795,8 @@ img.emoji { #login { grid-area: login; padding: var(--pad5); - background: var(--color-bg-s1); overflow: auto; + max-width: 40rem; height: 100%; } @@ -2139,6 +2141,7 @@ div#blog { #mainGrid.login { grid-template-areas: "head queues" + "theme queues" "stage queues" "login queues"; } @@ -2155,7 +2158,8 @@ div#blog { #themebox, #stage, - #minimodeoptions { + #minimodeoptions, + #login { justify-self: center; width: 100%; max-width: 48rem; @@ -2225,6 +2229,8 @@ div#blog { #mainGrid.login { grid-template-areas: + "head head queues" + "theme theme queues" "stage stage queues" "login login queues"; } From 1e0aee1f36fc7b9c00f7c96440192ecf9ea54d69 Mon Sep 17 00:00:00 2001 From: Matt Thompson Date: Wed, 26 Jan 2022 06:00:11 -0600 Subject: [PATCH 08/12] continue seperation of song and room elements in player --- css/looks.css | 39 +++++++++++------------ index.html | 87 +++++++++++++++++++++++---------------------------- js/main.js | 6 ++-- 3 files changed, 63 insertions(+), 69 deletions(-) diff --git a/css/looks.css b/css/looks.css index 3b98e88..6e5cf68 100644 --- a/css/looks.css +++ b/css/looks.css @@ -236,7 +236,6 @@ code { color: #43b581; } .smallIcon .prsnRole { - margin-right: 0.15rem; margin-left: 0.15rem; font-size: 0.75rem; } @@ -263,7 +262,7 @@ code { } .prson.idle .prsnRole { - color: rgba(255, 255, 255, 0.33); + color: #faa61a; } .prson.idlething .imptcon { @@ -544,8 +543,8 @@ a.sociallogo[href] { #mainGrid.mmusrs { grid-template-areas: "head" - "theme" "stage" + "theme" "mmopts" "users"; } @@ -560,8 +559,8 @@ a.sociallogo[href] { #mainGrid.mmqueue { grid-template-areas: "head" - "theme" "stage" + "theme" "mmopts" "queues"; } @@ -576,8 +575,8 @@ a.sociallogo[href] { #mainGrid.mmchat { grid-template-areas: "head" - "theme" "stage" + "theme" "mmopts" "chat"; } @@ -593,8 +592,8 @@ a.sociallogo[href] { grid-template-rows: auto auto auto 1fr; grid-template-areas: "head" - "theme" "stage" + "theme" "login"; } @@ -767,6 +766,9 @@ span.blockon:empty { flex-direction: column; position: relative; overflow: hidden; + border-top: 2px solid black; +border-top-left-radius: 0.5rem; +border-top-right-radius: 0.5rem; } #stage > div:not(#screenBox) { @@ -792,7 +794,6 @@ span.blockon:empty { "art plays plays"; margin-bottom: auto; padding: var(--pad4); - text-shadow: 1px 1px 0 rgba(0, 0, 0, 0.15); } #albumArt { @@ -873,7 +874,7 @@ span.blockon:empty { margin-right: var(--pad2); margin-left: var(--pad2); min-width: 0; - height: 1.5rem; + height: 1rem; } .spot.empty .djplaque { @@ -942,9 +943,7 @@ span.blockon:empty { #volandthings { position: relative; background-color: var(--color-bg-s1); - border-bottom: 1px solid #333; - border-bottom-left-radius: 0.5rem; - border-bottom-right-radius: 0.5rem; + border-bottom: 1px solid #333 } #songthings, @@ -1366,9 +1365,9 @@ a.importLinkCheck { font-size: 1rem; text-align: center; background-color: var(--color-bg-s1); - border-top: 2px solid black; - border-top-left-radius: 0.5rem; - border-top-right-radius: 0.5rem; + border-bottom: 2px solid black; + border-bottom-left-radius: 0.5rem; + border-bottom-right-radius: 0.5rem; } #currentTheme { @@ -2108,8 +2107,8 @@ div#blog { grid-template-columns: 60vw 40vw; grid-template-areas: "head chat" - "theme chat" "stage chat" + "theme chat" "mmopts chat" "users chat"; } @@ -2117,8 +2116,8 @@ div#blog { #mainGrid.mmusrs { grid-template-areas: "head chat" - "theme chat" "stage chat" + "theme chat" "mmopts chat" "users chat"; } @@ -2126,8 +2125,8 @@ div#blog { #mainGrid.mmqueue { grid-template-areas: "head chat" - "theme chat" "stage chat" + "theme chat" "mmopts chat" "queues chat"; } @@ -2141,8 +2140,8 @@ div#blog { #mainGrid.login { grid-template-areas: "head queues" - "theme queues" "stage queues" + "theme queues" "login queues"; } @@ -2213,8 +2212,8 @@ div#blog { grid-template-columns: minmax(20rem, 20vw) minmax(30rem, 48rem) 30vw; grid-template-areas: "users head chat" - "users theme chat" "users stage chat" + "users theme chat" "users queues chat"; } @@ -2230,8 +2229,8 @@ div#blog { #mainGrid.login { grid-template-areas: "head head queues" - "theme theme queues" "stage stage queues" + "theme theme queues" "login login queues"; } diff --git a/index.html b/index.html index 8f83ba2..e27c7c6 100644 --- a/index.html +++ b/index.html @@ -124,6 +124,42 @@
    • +
    +
    +
    + + + link + +
    +
    + + +
    +
    +
    +
    +
    + +
    Loading firetable...
    @@ -137,57 +173,14 @@
    -
    -
    -
    -
    - - -
    -
    - - - link - -
    -
    - - -
    -
    -
    -
    -
    - -
    +
    +
    diff --git a/js/main.js b/js/main.js index 50c9e81..1fdba39 100644 --- a/js/main.js +++ b/js/main.js @@ -3803,7 +3803,7 @@ firetable.ui = { if (data.color == "#fff" || data.color == "#7f7f7f") { firetable.color = firetable.orange; firetable.countcolor = "#fff"; - $("#djStage").css("background-color", "#fff"); + $("#djStage").css("background-color", "#ccc"); } else { $("#djStage").css("background-color", data.color); } @@ -3828,7 +3828,9 @@ firetable.ui = { firetable.color + "; color: " + firetable.countcolor + - "; } .iconbutt.on { color: " + + "; } #nowplaying #track, #nowplaying #artist, #nowplaying #plays, #nowplaying #timr { color: " + + firetable.countcolor + + "} .iconbutt.on { color: " + firetable.color + "; border-bottom: 1px solid " + firetable.color + From 8f81309ee959c5f0777b414d943fd84a63329072 Mon Sep 17 00:00:00 2001 From: Andrew Tibbetts Date: Thu, 27 Jan 2022 02:38:24 -0600 Subject: [PATCH 09/12] user list tweaks --- css/looks.css | 154 ++++++++++++++++++++++++++------------------------ index.html | 21 ++++--- js/main.js | 121 +++++++++++++++------------------------ 3 files changed, 142 insertions(+), 154 deletions(-) diff --git a/css/looks.css b/css/looks.css index 6e5cf68..be8ab72 100644 --- a/css/looks.css +++ b/css/looks.css @@ -228,18 +228,6 @@ code { display: none; } -.prsnRole { - z-index: 2; - margin-right: 0.5rem; - font-size: 1.125rem; - line-height: 0; - color: #43b581; -} -.smallIcon .prsnRole { - margin-left: 0.15rem; - font-size: 0.75rem; -} - .utitle { font-size: 0.66rem; font-weight: 700; @@ -248,27 +236,6 @@ code { color: rgba(255, 255, 255, 0.4); } -.imptcon { - display: none; - position: absolute; - right: -0.25rem; - height: calc(0.75rem + 4px); - width: calc(0.75rem + 4px); - padding: 2px; - font-size: 0.75em; - color: var(--color-orange); - background-color: var(--color-bg-t2); - border-radius: 999px; -} - -.prson.idle .prsnRole { - color: #faa61a; -} - -.prson.idlething .imptcon { - display: block; -} - .notice { margin: 0; background-color: var(--color-bg-t1); @@ -474,7 +441,7 @@ a.sociallogo[href] { display: block; } -.sociallogo svg:hover { +.sociallogo:hover svg { fill: #fff; } .sociallogo svg { @@ -523,6 +490,10 @@ a.sociallogo[href] { color: #888; } +.header_icon:hover .material-icons { + color: white; +} + /*------------------------------------ MAIN BODY THINGS */ #mainGrid { grid-area: main; @@ -664,7 +635,16 @@ a.sociallogo[href] { } #allUsers { - padding-top: var(--height-footer); + display: grid; + grid-template-columns: auto 1fr auto; + align-items: center; + gap: var(--pad2); + padding: var(--height-footer) var(--pad4) var(--pad5) var(--pad4); +} + +#allUsers > *, +#allUsers .prson { + display: contents; } #allUsersWrap { @@ -673,39 +653,71 @@ a.sociallogo[href] { align-self: center; } -.prson { - display: flex; - align-items: center; - min-width: 0; - padding: var(--pad1) var(--pad4); +.prson.idlething .imptcon { + display: block; } -#allUsersWrap .prson { - -webkit-touch-callout: none; - -webkit-user-select: none; - -khtml-user-select: none; - -moz-user-select: none; - -ms-user-select: none; - user-select: none; +.prsnStatus { + position: absolute; + z-index: 1; + bottom: 0; + right: -0.2rem; + font-size: 0.75rem; + color: #43b581; + transform: rotate(-45deg); +} +.prson.idle .prsnStatus { + color: var(--color-orange); } -.prsnName { - flex: 1; +.prsnNameRole { + display: flex; + align-items: center; font-size: 1rem; font-weight: 400; - line-height: 2; + line-height: 2.2rem; +} +.prson.blockd .prsnNameRole { + opacity: 0.5; +} + +.prsnName { + font-weight: 700; color: #bbb; white-space: nowrap; overflow-x: hidden; text-overflow: ellipsis; } +.prsnRole { + z-index: 2; + margin-left: 0.5rem; + font-size: 1em; + line-height: 1; + color: rgba(255, 255, 255, 0.33); +} +.smallIcon .prsnRole { + margin-left: 0.15rem; + font-size: 0.5em; +} + +.imptcon { + display: none; + position: absolute; + right: -0.25rem; + height: calc(0.75rem + 4px); + width: calc(0.75rem + 4px); + padding: 2px; + font-size: 0.75em; + color: var(--color-orange); + background-color: var(--color-bg-t2); + border-radius: 999px; +} + .djOrder { display: flex; align-items: center; justify-content: flex-end; - margin-right: 0.75rem; - width: 2.5rem; font-size: 0.85rem; font-weight: 700; line-height: 0; @@ -719,14 +731,6 @@ a.sociallogo[href] { color: #888; } -#usersbox .prson.blockd .prsnName, -#usersbox .prson.blockd .prsnRole { - opacity: 0.5; -} -#usersbox .prson.blockd .blockon { - display: block; -} - .botson { background-color: #000; background-size: auto 100%; @@ -734,28 +738,32 @@ a.sociallogo[href] { background-position: center 55%; background-repeat: no-repeat; border-bottom: 1px solid #888; + clip-path: circle(60px at center); } -#usersbox .botson { +#allUsers .botson { display: flex; align-items: center; - margin-right: 0.75rem; - width: 2rem; - height: 2rem; position: relative; + margin-right: 0.5rem; + width: 2.2rem; + height: 2.2rem; + background-position: -33%; } -span.blockon { +.blockon { display: none; - width: 2rem; - height: 2rem; - font-size: 2rem; + width: 2.2rem; + height: 2.2rem; + font-size: 2.2rem; background-color: rgba(0, 0, 0, 0.5); color: var(--color-orange); border-radius: 999px; } - -span.blockon:empty { +.prson.blockd .blockon { + display: block; +} +.blockon:empty { display: none; } @@ -767,8 +775,8 @@ span.blockon:empty { position: relative; overflow: hidden; border-top: 2px solid black; -border-top-left-radius: 0.5rem; -border-top-right-radius: 0.5rem; + border-top-left-radius: 0.5rem; + border-top-right-radius: 0.5rem; } #stage > div:not(#screenBox) { @@ -943,7 +951,7 @@ border-top-right-radius: 0.5rem; #volandthings { position: relative; background-color: var(--color-bg-s1); - border-bottom: 1px solid #333 + border-bottom: 1px solid #333; } #songthings, diff --git a/index.html b/index.html index e27c7c6..0f4f039 100644 --- a/index.html +++ b/index.html @@ -130,7 +130,13 @@ - + link
    @@ -158,7 +164,6 @@ -
    @@ -173,7 +178,6 @@
    -
    @@ -252,13 +256,16 @@

    People

    - -
    block - label_important + radio + lens
    - +
    + + +
    +
    diff --git a/js/main.js b/js/main.js index 1fdba39..f29112f 100644 --- a/js/main.js +++ b/js/main.js @@ -2357,108 +2357,81 @@ firetable.ui = { } }); var $userTemplate = $("#userKEY").remove(); - ftapi.events.on("userJoined", function (data) { - console.log("user joined", data); - var $newUser = $userTemplate.clone(); + function userBits(data) { if (!data.username) data.username = data.userid; if (data.idle) { - if (data.idle.isIdle && !data.hostbot) $newUser.addClass("idle"); - if (data.idle.audio == 2) $newUser.addClass("idlething"); + if (data.idle.isIdle && !data.hostbot) + data.html.addClass("idle").find(".prsnStatus").text("nightlight"); + if (data.idle.audio == 2) data.html.addClass("idlething"); } if (data.blocked) { - $newUser.addClass("blockd"); + data.html.addClass("blockd"); } - var destination = "#usersRegular"; - var rolename = ""; - var rolecon = "lens"; - var smallcon = true; + data.destination = "#usersRegular"; + data.rolename = ""; + data.rolecon = ""; + data.smallcon = true; if (data.mod) { - rolename = "mod"; - rolecon = "shield"; - smallcon = false; - destination = "#usersMod"; + data.rolename = "mod"; + data.rolecon = "star"; + data.smallcon = false; + data.destination = "#usersMod"; } if (data.supermod) { - rolename = "supermod"; - rolecon = "local_police"; - smallcon = false; - destination = "#usersSuper"; + data.rolename = "supermod"; + data.rolecon = "local_police"; + data.smallcon = false; + data.destination = "#usersSuper"; } if (data.hostbot) { - rolename = "robot"; - rolecon = "smart_toy"; - smallcon = false; - destination = "#usersBot"; + data.rolename = "robot"; + data.rolecon = "smart_toy"; + data.smallcon = false; + data.destination = "#usersBot"; } - - $newUser.attr("id", "user" + data.userid); - $newUser + return data; + } + ftapi.events.on("userJoined", function (data) { + console.log("user joined", data); + data.html = $userTemplate.clone(); + data = userBits(data); + data.html.attr("id", "user" + data.userid); + data.html .find(".botson") .css( "background-image", "url(https://indiediscotheque.com/robots/" + data.userid + data.username + ".png?size=110x110)" ); - $newUser.find(".prsnName").text(data.username); - $newUser.find(".prsnRole").text(rolecon); - if (rolename) $newUser.find(".prsnRole").prop("title", rolename); - if (smallcon) $newUser.addClass("smallIcon"); - else $newUser.removeClass("smallIcon"); - $newUser.prop("title", "joined " + firetable.utilities.format_date(data.joined)); - firetable.utilities.chatAt($newUser); // adds the click event to @ the user - $(destination).append($newUser); + data.html.find(".prsnName").text(data.username); + data.html.find(".prsnRole").text(data.rolecon); + if (data.rolename) data.html.find(".prsnRole").prop("title", data.rolename); + if (data.smallcon) data.html.addClass("smallIcon"); + else data.html.removeClass("smallIcon"); + data.html.prop("title", "joined " + firetable.utilities.format_date(data.joined)); + firetable.utilities.chatAt(data.html); // adds the click event to @ the user + $(data.destination).append(data.html); }); ftapi.events.on("userLeft", function (data) { $("#user" + data.userid).remove(); }); ftapi.events.on("userChanged", function (data) { console.log("user changed", data); - $thisUser = $("#user" + data.userid); - $thisUser.removeClass("idle"); - $thisUser.removeClass("blockd"); - if (!data.username) data.username = data.userid; - if (data.idle) { - if (data.idle.isIdle && !data.hostbot) $thisUser.addClass("idle"); - if (data.idle.audio == 2) $thisUser.addClass("idlething"); - } - if (data.blocked) { - $thisUser.addClass("blockd"); - } - - var destination = "#usersRegular"; - var rolename = ""; - var rolecon = "lens"; - var smallcon = true; - if (data.mod) { - rolename = "mod"; - rolecon = "shield"; - smallcon = false; - destination = "#usersMod"; - } - if (data.supermod) { - rolename = "supermod"; - rolecon = "local_police"; - smallcon = false; - destination = "#usersSuper"; - } - if (data.hostbot) { - rolename = "robot"; - rolecon = "smart_toy"; - smallcon = false; - destination = "#usersBot"; - } - - $thisUser + data.html = $("#user" + data.userid); + data.html.removeClass("idle").find(".prsnStatus").text("lens"); + data.html.removeClass("blockd"); + data = userBits(data); + data.html .find(".botson") .css( "background-image", "url(https://indiediscotheque.com/robots/" + data.userid + data.username + ".png?size=110x110)" ); - $thisUser.find(".prsnName").text(data.username); - $thisUser.find(".prsnRole").text(rolecon); - if (rolename) $thisUser.find(".prsnRole").prop("title", rolename); - if (smallcon) $thisUser.addClass("smallIcon"); - else $thisUser.removeClass("smallIcon"); + data.html.find(".prsnName").text(data.username); + data.html.find(".prsnRole").text(data.rolecon); + if (data.rolename) data.html.find(".prsnRole").prop("title", data.rolename); + if (data.smallcon) data.html.addClass("smallIcon"); + else data.html.removeClass("smallIcon"); }); ftapi.events.on("usersChanged", function (okdata) { if ($("#loggedInUser .botson").data("uid") == ftapi.uid) { From 48d4e17c4d70b612f474fe1bf046f23bd441e51c Mon Sep 17 00:00:00 2001 From: Andrew Tibbetts Date: Fri, 28 Jan 2022 00:54:26 -0600 Subject: [PATCH 10/12] better breaks + layout --- css/looks.css | 129 ++++++++++++++++++++------------------------------ js/main.js | 4 +- 2 files changed, 54 insertions(+), 79 deletions(-) diff --git a/css/looks.css b/css/looks.css index be8ab72..b715442 100644 --- a/css/looks.css +++ b/css/looks.css @@ -259,6 +259,7 @@ code { .tabs { display: flex; + align-items: flex-end; } .tab { @@ -788,7 +789,7 @@ a.sociallogo[href] { display: flex; flex-direction: column; justify-content: space-between; - box-shadow: inset 0 -4rem 4rem -3rem rgba(0, 0, 0, 0.25), inset 0 4rem 4rem -3rem rgba(0, 0, 0, 0.25); + box-shadow: inset 0 -4rem 4rem -3rem rgba(0, 0, 0, 0.5), inset 0 4rem 4rem -3rem rgba(0, 0, 0, 0.5); } #nowplaying { @@ -896,7 +897,7 @@ a.sociallogo[href] { z-index: 0; bottom: 1.4rem; width: 100%; - height: 8rem; + height: 6rem; background-size: contain; background-repeat: no-repeat; background-position: center bottom; @@ -912,7 +913,7 @@ a.sociallogo[href] { display: flex; justify-content: space-between; min-width: 0; - padding: 0 var(--pad3); + padding: 0 var(--pad2); font-size: 0.75rem; line-height: 1.5rem; text-align: center; @@ -1373,7 +1374,7 @@ a.importLinkCheck { font-size: 1rem; text-align: center; background-color: var(--color-bg-s1); - border-bottom: 2px solid black; + border-bottom: 2px solid rgba(255, 255, 255, 0.125); border-bottom-left-radius: 0.5rem; border-bottom-right-radius: 0.5rem; } @@ -2089,60 +2090,24 @@ div#blog { } /*------------------------------------ Media Queries -*/ -@media only screen and (max-width: 799px) { - #allUsersWrap .prson { - cursor: none; - pointer-events: none; - } -} - -@media only screen and (min-width: 800px) { - body.screen #albumArt { - display: none; - } - - body.screen #screenBox { - top: 0; - } - - #importPromptBox .modalContent { - width: 480px; - } - +@media only screen and (min-width: 640px) { #mainGrid, #mainGrid.mmchat { - grid-template-rows: auto auto auto auto 1fr; - grid-template-columns: 60vw 40vw; + grid-template-rows: auto auto auto 1fr; + grid-template-columns: minmax(28rem, 1fr) minmax(18rem, 24rem); grid-template-areas: - "head chat" + "head mmopts" "stage chat" "theme chat" - "mmopts chat" - "users chat"; + "queues chat"; } #mainGrid.mmusrs { grid-template-areas: - "head chat" - "stage chat" - "theme chat" - "mmopts chat" - "users chat"; - } - - #mainGrid.mmqueue { - grid-template-areas: - "head chat" - "stage chat" - "theme chat" - "mmopts chat" - "queues chat"; - } - - #mainGrid.mmchat #usersbox, - #mainGrid.mmqueue #actualChat, - #mainGrid.mmusrs #actualChat { - display: flex; + "head mmopts" + "stage users" + "theme users" + "queues users"; } #mainGrid.login { @@ -2154,30 +2119,50 @@ div#blog { } #mainGrid.login #queuebox, - #mainGrid.login #thehistoryWrap { - display: block; + #mainGrid.login #thehistoryWrap, + #mainGrid.mmchat #actualChat, + #mainGrid.mmusrs #usersbox, + #mainGrid.mmchat #queuebox, + #mainGrid.mmusrs #queuebox { + display: flex; } #mainGrid.login .histeal, - #mmchat { + #mmqueue { display: none; } - #themebox, - #stage, - #minimodeoptions, - #login { - justify-self: center; - width: 100%; - max-width: 48rem; + #thehistoryWrap { + grid-area: queues; + display: block; + position: relative; + top: auto !important; + bottom: auto; } - #topbar, - #queuebox, - #thehistoryWrap { - justify-self: center; - width: 100%; - max-width: 40rem; + #mainGrid.mmqueue #thehistoryWrap { + grid-area: queues; + } +} + +@media only screen and (max-width: 799px) { + #allUsersWrap .prson { + cursor: none; + pointer-events: none; + } +} + +@media only screen and (min-width: 800px) { + body.screen #albumArt { + display: none; + } + + body.screen #screenBox { + top: 0; + } + + #importPromptBox .modalContent { + width: 480px; } #topbar { @@ -2193,21 +2178,9 @@ div#blog { min-width: 20rem; max-width: 30rem; } - - #thehistoryWrap { - grid-area: queues; - display: block; - position: relative; - top: auto !important; - bottom: auto; - } - - #mainGrid.mmqueue #thehistoryWrap { - grid-area: mmopts / queues; - } } -@media only screen and (min-width: 1200px) { +@media only screen and (min-width: 1000px) { body { background: linear-gradient(var(--color-bg-t1), var(--color-bg)); } diff --git a/js/main.js b/js/main.js index f29112f..1a83d8e 100644 --- a/js/main.js +++ b/js/main.js @@ -3801,7 +3801,9 @@ firetable.ui = { firetable.color + "; color: " + firetable.countcolor + - "; } #nowplaying #track, #nowplaying #artist, #nowplaying #plays, #nowplaying #timr { color: " + + "; } .djActive { background-image: linear-gradient(to bottom, var(--color-bg-s1) -200%, " + + firetable.color + + "); } #nowplaying #track, #nowplaying #artist, #nowplaying #plays, #nowplaying #timr { color: " + firetable.countcolor + "} .iconbutt.on { color: " + firetable.color + From 8058a945624c724c3809e9fdca3192522f9ad5c7 Mon Sep 17 00:00:00 2001 From: Andrew Tibbetts Date: Sun, 13 Feb 2022 15:09:23 -0600 Subject: [PATCH 11/12] more grid work, header to left side --- css/looks.css | 526 ++++++++++++++++++++++++++++++-------------------- index.html | 271 +++++++++++++------------- js/main.js | 67 ++++--- 3 files changed, 489 insertions(+), 375 deletions(-) diff --git a/css/looks.css b/css/looks.css index b715442..ae181ff 100644 --- a/css/looks.css +++ b/css/looks.css @@ -229,10 +229,8 @@ code { } .utitle { - font-size: 0.66rem; - font-weight: 700; - text-transform: uppercase; - letter-spacing: 0.1em; + font-size: 1rem; + font-weight: 100; color: rgba(255, 255, 255, 0.4); } @@ -315,6 +313,7 @@ span.removemeIcon.material-icons { background-color: var(--color-orange); border-top: 1px solid rgba(255, 255, 255, 0.3); border-bottom: 1px solid black; + box-shadow: 0 0.25rem 0.5rem -0.25rem black; transition: all 100ms ease-in-out; user-select: none; } @@ -428,14 +427,9 @@ span.removemeIcon.material-icons { margin-right: 1rem; } -#socialthings { - display: flex; -} - a.sociallogo { text-decoration: none; display: none; - margin: 0.5rem 0.2rem 0 0.2rem; } a.sociallogo[href] { @@ -479,6 +473,7 @@ a.sociallogo[href] { .header_icon { margin: 0.5rem 0.2rem 0 0.2rem; padding: 0; + height: auto; font-size: 0; line-height: 0; background: none; @@ -500,11 +495,12 @@ a.sociallogo[href] { grid-area: main; flex: 1; display: grid; - grid-template-rows: auto auto auto auto 1fr; + grid-template-rows: auto auto auto auto auto 1fr; grid-template-columns: 1fr; grid-template-areas: "head" - "stage" + "player" + "playingstage" "main" "main" "main"; @@ -515,7 +511,8 @@ a.sociallogo[href] { #mainGrid.mmusrs { grid-template-areas: "head" - "stage" + "player" + "playingstage" "theme" "mmopts" "users"; @@ -531,7 +528,8 @@ a.sociallogo[href] { #mainGrid.mmqueue { grid-template-areas: "head" - "stage" + "player" + "playingstage" "theme" "mmopts" "queues"; @@ -547,7 +545,8 @@ a.sociallogo[href] { #mainGrid.mmchat { grid-template-areas: "head" - "stage" + "player" + "playingstage" "theme" "mmopts" "chat"; @@ -564,7 +563,7 @@ a.sociallogo[href] { grid-template-rows: auto auto auto 1fr; grid-template-areas: "head" - "stage" + "playingstage" "theme" "login"; } @@ -602,7 +601,7 @@ a.sociallogo[href] { } .usersWrap { - max-width: 20rem; + max-width: 18rem; overflow: auto; } @@ -640,7 +639,7 @@ a.sociallogo[href] { grid-template-columns: auto 1fr auto; align-items: center; gap: var(--pad2); - padding: var(--height-footer) var(--pad4) var(--pad5) var(--pad4); + padding: var(--pad4); } #allUsers > *, @@ -651,7 +650,6 @@ a.sociallogo[href] { #allUsersWrap { height: 100%; width: 100%; - align-self: center; } .prson.idlething .imptcon { @@ -674,9 +672,10 @@ a.sociallogo[href] { .prsnNameRole { display: flex; align-items: center; - font-size: 1rem; + justify-content: flex-start; + margin-left: 0.25rem; + font-size: 0.875rem; font-weight: 400; - line-height: 2.2rem; } .prson.blockd .prsnNameRole { opacity: 0.5; @@ -693,7 +692,7 @@ a.sociallogo[href] { .prsnRole { z-index: 2; margin-left: 0.5rem; - font-size: 1em; + font-size: 1.125rem; line-height: 1; color: rgba(255, 255, 255, 0.33); } @@ -724,19 +723,25 @@ a.sociallogo[href] { line-height: 0; color: #888; } - .djOrder .material-icons { - margin-left: 0.25rem; + margin-right: 0.25rem; font-size: 1.25rem; line-height: 0; + color: rgba(123, 123, 123, 0.5); +} +.djOrder.ondeck .material-icons, +.djOrder.waitlist .material-icons { color: #888; } +.djOrder span { + width: 1rem; +} .botson { background-color: #000; - background-size: auto 100%; + background-size: auto 125%; border-radius: 999px; - background-position: center 55%; + background-position: center 66%; background-repeat: no-repeat; border-bottom: 1px solid #888; clip-path: circle(60px at center); @@ -747,9 +752,9 @@ a.sociallogo[href] { align-items: center; position: relative; margin-right: 0.5rem; - width: 2.2rem; - height: 2.2rem; - background-position: -33%; + width: 2rem; + height: 2rem; + background-position: 66% 72%; } .blockon { @@ -768,31 +773,9 @@ a.sociallogo[href] { display: none; } -/* The Stage */ -#stage { - grid-area: stage; - display: flex; - flex-direction: column; - position: relative; - overflow: hidden; - border-top: 2px solid black; - border-top-left-radius: 0.5rem; - border-top-right-radius: 0.5rem; -} - -#stage > div:not(#screenBox) { - position: relative; - z-index: 2; -} - -#djStage { - display: flex; - flex-direction: column; - justify-content: space-between; - box-shadow: inset 0 -4rem 4rem -3rem rgba(0, 0, 0, 0.5), inset 0 4rem 4rem -3rem rgba(0, 0, 0, 0.5); -} - +/* Now Playing */ #nowplaying { + grid-area: playingstage; position: relative; display: grid; grid-template-columns: auto 1fr auto; @@ -802,7 +785,7 @@ a.sociallogo[href] { "art artist artist" "art plays plays"; margin-bottom: auto; - padding: var(--pad4); + padding: var(--pad4) var(--pad4) 2.5rem var(--pad4); } #albumArt { @@ -863,96 +846,21 @@ a.sociallogo[href] { display: none; } -#deck { - grid-area: deck; - display: flex; - max-width: 100vw; -} - -#deck.dance .avtr:not(.animate) { - transform-origin: bottom; - animation: MoveSideSide 2s linear infinite; -} - -.spot { - flex: 1; - position: relative; - display: flex; - flex-direction: column; - justify-content: flex-end; - margin-right: var(--pad2); - margin-left: var(--pad2); - min-width: 0; - height: 1rem; -} - -.spot.empty .djplaque { - flex-direction: column; - color: rgba(255, 2556, 255, 0.5); -} - -.avtr { - display: none; - position: absolute; - z-index: 0; - bottom: 1.4rem; - width: 100%; - height: 6rem; - background-size: contain; - background-repeat: no-repeat; - background-position: center bottom; -} - -.avtr.animate { - animation: MoveUpDown 1s linear infinite; -} - -.djplaque { - position: relative; - z-index: 1; - display: flex; - justify-content: space-between; - min-width: 0; - padding: 0 var(--pad2); - font-size: 0.75rem; - line-height: 1.5rem; - text-align: center; - background-color: var(--color-bg-s1); - border-top-left-radius: 0.5rem; - border-top-right-radius: 0.5rem; -} - -.djname { - text-overflow: ellipsis; - overflow: hidden; - white-space: nowrap; - padding-right: 5px; -} - -.playcount { - white-space: nowrap; -} - -#prgbar { - width: 100%; - height: 0.5rem; - border-bottom: 1px solid #333; - margin-bottom: 0; -} - +/* Player */ #volandthings, #queueControls { display: flex; align-items: center; - justify-content: space-between; + justify-content: center; padding: 0.4rem 0.5rem; white-space: nowrap; } #volandthings { + grid-area: player; position: relative; - background-color: var(--color-bg-s1); - border-bottom: 1px solid #333; + display: flex; + justify-content: space-between; } #songthings, @@ -963,7 +871,6 @@ a.sociallogo[href] { white-space: nowrap; } -#songthings, #playerControls { flex: 1; } @@ -976,10 +883,6 @@ a.sociallogo[href] { margin-right: 1rem; } -#playerControls { - margin-left: 1rem; -} - #volplace { flex: 1; display: flex; @@ -1048,9 +951,10 @@ select#stealpicker { } #slider { - margin-right: var(--pad2); + margin-right: var(--pad1); width: 100%; max-width: 10rem; + min-width: 6rem; } .ui-slider { @@ -1065,8 +969,8 @@ select#stealpicker { height: 1.25rem; cursor: grab; background-color: #bbb; - border: 0.2rem solid #666; - border-radius: 999px; + border-radius: 0.4rem; + box-shadow: 0 0.5rem 0.5rem -0.25rem black; -ms-touch-action: none; touch-action: none; } @@ -1127,6 +1031,106 @@ html .ui-button.ui-state-disabled:active { color: #333333; } +/* The Stage */ +#djStage > div:not(#screenBox) { + position: relative; + z-index: 2; +} + +#djStage { + grid-area: playingstage; + display: flex; + flex-direction: column; + justify-content: flex-end; + position: relative; + overflow: hidden; + border-top-left-radius: 0.5rem; + border-top-right-radius: 0.5rem; + box-shadow: inset 0 -4rem 4rem -3rem rgba(0, 0, 0, 0.5), inset 0 16rem 32rem -3rem rgba(0, 0, 0, 0.75), + inset 0 4rem 2rem -4rem black; +} + +#deck { + grid-area: deck; + display: flex; + max-width: 100vw; +} + +#deck.dance .avtr:not(.animate) { + transform-origin: bottom; + animation: MoveSideSide 2s linear infinite; +} + +.spot { + flex: 1; + position: relative; + display: flex; + flex-direction: column; + justify-content: flex-end; + margin-right: var(--pad2); + margin-left: var(--pad2); + min-width: 0; +} + +.spot.empty .djplaque { + flex-direction: column; + color: rgba(255, 2556, 255, 0.5); +} + +.avtr { + display: none; + position: absolute; + z-index: 0; + bottom: 1.4rem; + width: 100%; + height: 6rem; + background-size: contain; + background-repeat: no-repeat; + background-position: center bottom; +} + +.avtr.animate { + animation: MoveUpDown 1s linear infinite; +} + +.djplaque { + position: relative; + z-index: 1; + display: flex; + justify-content: space-between; + min-width: 0; + padding: 0 var(--pad2); + font-size: 0.75rem; + line-height: 1.5rem; + text-align: center; + color: #fff; + background-color: var(--color-bg-s1); + background-image: linear-gradient(to bottom, rgba(0, 0, 0, 0.125), rgba(0, 0, 0, 0)); + border-top-left-radius: 0.5rem; + border-top-right-radius: 0.5rem; +} +.djActive { + border-top: 1px solid rgba(0, 0, 0, 0.2); + background-color: var(--color-bg-s1) !important; +} + +.djname { + text-overflow: ellipsis; + overflow: hidden; + white-space: nowrap; + padding-right: 5px; +} + +.playcount { + white-space: nowrap; +} + +#prgbar { + width: 100%; + height: 0.5rem; + border-bottom: 1px solid #333; + margin-bottom: 0; +} #screenBox { position: absolute; top: -100%; @@ -1151,7 +1155,7 @@ html .ui-button.ui-state-disabled:active { top: 0; width: 100%; height: 100%; - background: linear-gradient(rgba(0, 0, 0, 0.5), rgba(255, 255, 255, 0.1)); + background: linear-gradient(rgba(0, 0, 0, 0.5), rgba(255, 255, 255, 0.15)); } /* Queues / Playlists */ @@ -1163,12 +1167,45 @@ html .ui-button.ui-state-disabled:active { overflow: hidden; } +.queuetop { + background-color: var(--color-bg-t1); + border-top: 1px solid rgba(255, 255, 255, 0.1); + border-bottom: 1px solid rgba(255, 255, 255, 0.1); + border-bottom-left-radius: 0.5rem; + border-bottom-right-radius: 0.5rem; +} + input#queueFilter { width: 100%; + border-bottom: 0; + border-top-left-radius: 0; + border-top-right-radius: 0; } div#filterMachine { - padding: 0 var(--pad2) var(--pad2) var(--pad2); + padding: 0; +} + +#mainqueue { + padding: var(--pad1) var(--pad2); +} +#mainqueue.emptyList:before, +#mainqueue.loading:before, +#mainqueue.overFiltered:before { + display: flex; + justify-content: center; + padding: var(--pad2); + font-style: italic; + color: rgba(255, 255, 255, 0.4); +} +#mainqueue.emptyList:before { + content: "this playlist is empty"; +} +#mainqueue.loading:before { + content: "loading..."; +} +#mainqueue.overFiltered:before { + content: "no tracks meet your search criteria"; } #mainqueue .material-icons { @@ -1177,9 +1214,12 @@ div#filterMachine { } #queuelist .pvbar { + margin: var(--pad1) 0; padding: var(--pad2) var(--pad2); background-color: var(--color-bg-t1); - border-bottom: 1px solid black; + border-top: 1px solid var(--color-bg-t2); + border-bottom: 1px solid var(--color-bg); + border-radius: 0.5rem; cursor: move; /* fallback if grab cursor is unsupported */ cursor: grab; @@ -1370,13 +1410,12 @@ a.importLinkCheck { z-index: 15; display: flex; align-items: center; + max-width: 100vw; padding: var(--pad2); font-size: 1rem; text-align: center; + color: #fff; background-color: var(--color-bg-s1); - border-bottom: 2px solid rgba(255, 255, 255, 0.125); - border-bottom-left-radius: 0.5rem; - border-bottom-right-radius: 0.5rem; } #currentTheme { @@ -1414,7 +1453,6 @@ a.importLinkCheck { display: flex; justify-content: space-between; margin: var(--pad3); - font-size: 0.875rem; color: #bbb; word-break: break-word; } @@ -1422,7 +1460,7 @@ a.importLinkCheck { .newChat .botson { position: relative; z-index: 2; - margin: 0 var(--pad3) 0 0; + margin: 0.1rem var(--pad3) 0 0; width: 2rem; height: 2rem; cursor: pointer; @@ -1461,18 +1499,23 @@ a.importLinkCheck { } .chatContent .utitle { - line-height: 1.6; - color: rgba(255, 255, 255, 0.25); + position: absolute; + z-index: 2; + left: -1.5rem; + color: #666; } .chatHead { + position: relative; display: flex; + align-items: center; } .chatName { - margin-right: var(--pad2); + margin-right: var(--pad1); font-size: 0.75rem; font-weight: 700; + letter-spacing: 0.05em; color: rgba(255, 255, 255, 0.4); cursor: pointer; } @@ -1498,6 +1541,7 @@ a.importLinkCheck { .chatText { position: relative; + font-size: 1rem; } .chatText.deleteMe:hover { @@ -1599,19 +1643,22 @@ a.importLinkCheck { .chatCard { display: block; margin: var(--pad2) 0; + max-width: 100%; } #chatbottom { position: relative; display: grid; - grid-template-columns: 3.5rem 1fr var(--pad3); + grid-template-columns: auto 1fr; justify-items: center; + gap: 0.5rem; height: var(--height-footer); + padding-right: var(--pad3); } #pickEmoji { grid-column: 1/2; - margin-left: var(--pad2); + margin-left: var(--pad3); } #pickerResults { @@ -2093,11 +2140,12 @@ div#blog { @media only screen and (min-width: 640px) { #mainGrid, #mainGrid.mmchat { - grid-template-rows: auto auto auto 1fr; + grid-template-rows: auto auto auto auto 1fr; grid-template-columns: minmax(28rem, 1fr) minmax(18rem, 24rem); grid-template-areas: "head mmopts" - "stage chat" + "player chat" + "playingstage chat" "theme chat" "queues chat"; } @@ -2105,7 +2153,8 @@ div#blog { #mainGrid.mmusrs { grid-template-areas: "head mmopts" - "stage users" + "player users" + "playingstage users" "theme users" "queues users"; } @@ -2113,7 +2162,8 @@ div#blog { #mainGrid.login { grid-template-areas: "head queues" - "stage queues" + "player queues" + "playingstage queues" "theme queues" "login queues"; } @@ -2143,6 +2193,10 @@ div#blog { #mainGrid.mmqueue #thehistoryWrap { grid-area: queues; } + + #queueControls { + padding: var(--pad3) var(--pad4); + } } @media only screen and (max-width: 799px) { @@ -2161,26 +2215,83 @@ div#blog { top: 0; } + #mainGrid, + #mainGrid.mmchat { + grid-template-rows: auto auto auto 1fr; + grid-template-columns: auto minmax(28rem, 1fr) minmax(18rem, 24rem); + grid-template-areas: + "head player mmopts" + "head playingstage chat" + "head theme chat" + "head queues chat"; + } + + #mainGrid.mmusrs { + grid-template-areas: + "head player mmopts" + "head playingstage users" + "head theme users" + "head queues users"; + } + + #mainGrid.login { + grid-template-areas: + "head player queues" + "head playingstage queues" + "head theme queues" + "head login queues"; + } + #importPromptBox .modalContent { width: 480px; } #topbar { - padding-right: var(--pad4); - padding-left: var(--pad4); + flex-direction: column; + justify-content: center; + padding-top: var(--pad2); + padding-bottom: var(--pad4); } - #idtitle { + .header_icon { + margin-bottom: 0.5rem; + } + + #loggedInUser, + #roomlogo { + margin-right: 0; + margin-left: 0; + } + + #loggedInUser { + margin-top: 0.5rem; + } + + #roomlogo { + margin-bottom: 0.5rem; + } + + /* #idtitle { display: block; + } */ + + #volandthings { + padding-top: var(--pad4); + padding-bottom: var(--pad2); } #actualChat { min-width: 20rem; - max-width: 30rem; + max-width: 28rem; + } + + #deck { + margin-left: 2.5vw; + margin-right: 2.5vw; } } -@media only screen and (min-width: 1000px) { +@media only screen and (min-width: 1024px) { body { background: linear-gradient(var(--color-bg-t1), var(--color-bg)); } @@ -2190,12 +2301,12 @@ div#blog { #mainGrid.mmchat, #mainGrid.mmusrs { grid-template-rows: auto auto auto 1fr; - grid-template-columns: minmax(20rem, 20vw) minmax(30rem, 48rem) 30vw; + grid-template-columns: auto 9fr min-content 12fr; grid-template-areas: - "users head chat" - "users stage chat" - "users theme chat" - "users queues chat"; + "head users player chat" + "head users playingstage chat" + "head users theme chat" + "head users queues chat"; } #mainGrid.mmusrs #queuebox, @@ -2209,18 +2320,22 @@ div#blog { #mainGrid.login { grid-template-areas: - "head head queues" - "stage stage queues" - "theme theme queues" - "login login queues"; + "head player player queues" + "head playingstage playingstage queues" + "head theme theme queues" + "head login login queues"; } #mainGrid #minimodeoptions { display: none; } - #topbar { - padding: 0; + #djStage, + #themebox, + #queuebox { + width: 46vw; + max-width: 56rem; + justify-self: flex-end; } #djStage { @@ -2237,11 +2352,6 @@ div#blog { width: 6.5rem; } - #deck { - margin-left: 5vw !important; - margin-right: 5vw !important; - } - .djplaque { justify-content: space-between; } @@ -2254,6 +2364,36 @@ div#blog { align-self: flex-end; } + #allUsers { + grid-auto-flow: dense; + padding-top: var(--pad5); + } + #allUsers .botson { + grid-column: -2 / -1; + } + #allUsers .djOrder { + grid-column: 1 / 2; + } + #allUsers .prsnNameRole { + grid-column: 2 / 3; + justify-content: flex-end; + } + #allUsers .prsnName { + order: 2; + } + #allUsers .prsnRole { + margin-left: 0; + margin-right: 0.5rem; + } + + .newChat { + margin-left: var(--pad4); + } + + #pickEmoji { + margin-left: var(--pad4); + } + #usersStats { justify-content: flex-start; padding: var(--pad3) var(--pad4); @@ -2269,31 +2409,3 @@ div#blog { width: 100%; } } - -@media only screen and (min-width: 2100px) { - html { - font-size: calc(0.4em + 0.4vw); - } - - #mainGrid, - #mainGrid.mmqueue, - #mainGrid.mmchat, - #mainGrid.mmusrs { - grid-template-columns: minmax(24rem, 36rem) minmax(40vw, 100vw) minmax(24rem, 36rem); - } - - #usersbox .tab { - color: #ffffff; - background-color: var(--color-bg-t2); - box-shadow: 0 -0.2rem 0.5rem -0.2rem black; - } - - .usersWrap { - display: block !important; - flex: 1; - } - - #allUsersWrap { - border-right: 5px solid black; - } -} diff --git a/index.html b/index.html index 0f4f039..74f43cd 100644 --- a/index.html +++ b/index.html @@ -18,43 +18,41 @@
    - + + + + +
    Reconnecting...
    -
    -
    -
    -
    -
    -
    -
      -
      • -
      • -
      • -
      • -
      • -
      • -
      • -
      • -
      • -
      • -
      • -
      • -
      • -
      • -
      • -
      • -
      • -
      • -
      • -
      • -
      • -
      • -
      • -
      • -
      • -
      • -
      • -
      • -
      • -
      • -
      • -
      • -
      • -
      • -
      • -
      • -
      • -
      • -
      • -
      • -
      • -
      • -
    -
    -
    -
    -
    - - - link - -
    -
    - - -
    -
    -
    -
    + +
    +
    +
    + + +
    +
    -
    -
    -
    Loading firetable...
    -
    -
    -
    -
    -
    -
    -
    +
    + + + link +
    -
    +
    + +
    + +
    +
    +
    +
    +
    +
      +
      • +
      • +
      • +
      • +
      • +
      • +
      • +
      • +
      • +
      • +
      • +
      • +
      • +
      • +
      • +
      • +
      • +
      • +
      • +
      • +
      • +
      • +
      • +
      • +
      • +
      • +
      • +
      • +
      • +
      • +
      • +
      • +
      • +
      • +
      • +
      • +
      • +
      • +
      • +
      • +
      • +
      • +
    +
    +
    +
    + +
    +
    +
    Loading firetable...
    +
    +
    +
    +
    +
    +
    -
    @@ -201,8 +188,8 @@
    +
    -
    diff --git a/js/main.js b/js/main.js index 1a83d8e..e6803fe 100644 --- a/js/main.js +++ b/js/main.js @@ -210,7 +210,7 @@ firetable.init = function () { $(window).resize( firetable.utilities.debounce(function () { // This will execute whenever the window is resized - $("#thehistory").css("top", $("#stage").outerHeight() + $("#topbar").outerHeight()); + $("#thehistory").css("top", $("#djStage").outerHeight() + $("#topbar").outerHeight()); $("#playerArea,#scScreen").width($("#djStage").outerWidth()).height($("#djStage").outerHeight()); $("#stealContain").css({ top: $("#grab").offset().top + $("#grab").height(), @@ -660,19 +660,31 @@ firetable.actions = { filterQueue: function (val) { if (val.length == 0) { $("#mainqueue .pvbar").show(); + $("#mainqueue").removeClass("overFiltered"); return; - } else { } val = val.toLowerCase(); - $("#mainqueue .pvbar").each(function (p, q) { - var txt = $(q).find(".listwords").text(); - var regex = new RegExp(val, "ig"); - if (txt.match(regex)) { - $(q).show(); - } else { - $(q).hide(); - } - }); + numresults = 0; + $("#mainqueue .pvbar") + .each(function (p, q) { + var txt = $(q).find(".listwords").text(); + var regex = new RegExp(val, "ig"); + if (txt.match(regex)) { + $(q).show(); + numresults++; + } else { + $(q).hide(); + } + }) + .promise() + .done(function () { + console.log(numresults); + if (!numresults) { + $("#mainqueue").addClass("overFiltered"); + } else { + $("#mainqueue").removeClass("overFiltered"); + } + }); }, muteToggle: function (zeroMute) { var muted = localStorage["firetableMute"]; @@ -1718,6 +1730,7 @@ firetable.ui = { }, init: function () { $("#mainqueue").sortable({ + axis: "y", start: function (event, ui) { var start_pos = ui.item.index(); ui.item.data("start_pos", start_pos); @@ -2245,10 +2258,10 @@ firetable.ui = { if (data.hasOwnProperty(key)) { $("#user" + data[key].id + " .djOrder") .html( - position + - ' pending_actions' + ' on the waitlist">pending_actions ' + + position ) .removeClass("ondeck") .addClass("waitlist"); @@ -2291,7 +2304,7 @@ firetable.ui = { "
    "; countr++; $("#user" + data[key].id + " .djOrder") - .html(countr + ' album') + .html('album ' + countr) .removeClass("waitlist") .addClass("ondeck"); } @@ -2478,9 +2491,9 @@ firetable.ui = { if (ftapi.users[chatData.id]) { if (ftapi.users[chatData.id].username) namebo = ftapi.users[chatData.id].username; - if (ftapi.users[chatData.id].mod) utitle = "mod"; - if (ftapi.users[chatData.id].supermod) utitle = "supermod"; - if (ftapi.users[chatData.id].hostbot) utitle = "robot"; + if (ftapi.users[chatData.id].mod) utitle = "stars"; + if (ftapi.users[chatData.id].supermod) utitle = "local_police"; + if (ftapi.users[chatData.id].hostbot) utitle = "smart_toy"; } else if (chatData.name) { namebo = chatData.name; } @@ -2615,8 +2628,11 @@ firetable.ui = { }); ftapi.events.on("playlistChanged", function (okdata, listID) { + firetable.debug && console.log(okdata.length); firetable.queue = okdata; - $("#mainqueue").html(""); + $("#mainqueue").html("").removeClass("emptyList overFiltered").addClass("loading"); + $("#queueFilterForm")[0].reset(); + if ($.isEmptyObject(okdata)) $("#mainqueue").addClass("emptyList"); for (var key in okdata) { if (okdata.hasOwnProperty(key)) { var $newli = $playlistItemTemplate.clone(); @@ -2699,6 +2715,7 @@ firetable.ui = { $("#mainqueue").append($newli); } } + $("#mainqueue").removeClass("loading"); }); firetable.ui.LinkGrabber.start(); @@ -2806,7 +2823,7 @@ firetable.ui = { $("#history").bind("click", function () { $("#thehistoryWrap") .slideToggle() - .css("top", $("#stage").outerHeight() + $("#topbar").outerHeight()); + .css("top", $("#djStage").outerHeight() + $("#topbar").outerHeight()); $(this).toggleClass("on"); }); $("#startMerge").bind("click", function () { @@ -3772,7 +3789,7 @@ firetable.ui = { firetable.debug && console.log("COLOR CHANGE!", data); firetable.color = data.color; - firetable.countcolor = data.txt; + //firetable.countcolor = data.txt; if (data.color == "#fff" || data.color == "#7f7f7f") { firetable.color = firetable.orange; firetable.countcolor = "#fff"; @@ -3787,7 +3804,7 @@ firetable.ui = { firetable.debug && console.log("a") firetable.countcolor = "#000000c9"; } - $("#stage").css("color", firetable.countcolor); + $("#djStage").css("color", firetable.countcolor); */ $(".customColorStyles").remove(); @@ -3797,13 +3814,11 @@ firetable.ui = { $("head").append( "` + ); + next(); + }); }); ftapi.events.on("screenStateChanged", function (data) { firetable.debug && console.log("thescreen:", data); @@ -2251,12 +2262,32 @@ firetable.ui = { }); ftapi.events.on("waitlistChanged", function (data) { if (data) { - $("#allUsers .djOrder.waitlist").html("").removeClass("waitlist"); + $("#allUsers .djOrder.waitlist").each(function () { + $(this).html("").removeClass("waitlist"); + var $prson = $(this).closest(".prson"); + switch (true) { + case $prson.hasClass("robot"): + $prson.remove().appendTo("#usersBot"); + break; + case $prson.hasClass("supermod"): + $prson.remove().appendTo("#usersSuper"); + break; + case $prson.hasClass("mod"): + $prson.remove().appendTo("#usersMod"); + break; + default: + $prson.remove().appendTo("#usersRegular"); + break; + } + }); for (var key in data) { var position = parseInt(key + 1); firetable.debug && console.log("waitlist", position, data); if (data.hasOwnProperty(key)) { - $("#user" + data[key].id + " .djOrder") + $("#user" + data[key].id) + .remove() + .appendTo("#usersWaitlist") + .find(".djOrder") .html( '
    "; countr++; - $("#user" + data[key].id + " .djOrder") + $("#user" + data[key].id) + .remove() + .appendTo("#usersDJs") + .find(".djOrder") .html('album ' + countr) .removeClass("waitlist") .addClass("ondeck"); @@ -2332,6 +2383,17 @@ firetable.ui = { } else { $("#avtr" + i).addClass("animate"); $("#djthing" + i).addClass("djActive"); + $(".djactive-style").remove(); + $("head") + .delay(500) + .queue(function (next) { + $(this).append( + `` + ); + next(); + }); } } }); @@ -2344,6 +2406,17 @@ firetable.ui = { } else { $("#avtr" + i).addClass("animate"); $("#djthing" + i).addClass("djActive"); + $(".djactive-style").remove(); + $("head") + .delay(500) + .queue(function (next) { + $(this).append( + `` + ); + next(); + }); } } }); @@ -2406,10 +2479,10 @@ firetable.ui = { return data; } ftapi.events.on("userJoined", function (data) { - console.log("user joined", data); + firetable.debug && console.log("user joined", data); data.html = $userTemplate.clone(); data = userBits(data); - data.html.attr("id", "user" + data.userid); + data.html.attr("id", "user" + data.userid).addClass(data.rolename); data.html .find(".botson") .css(