diff --git a/apple-music-widget-compact/index.html b/apple-music-widget-compact/index.html new file mode 100644 index 0000000..9d511de --- /dev/null +++ b/apple-music-widget-compact/index.html @@ -0,0 +1,47 @@ + + + + + + + + + + + +
Connecting...
+
+ +
+
+
+
Can't get you out of my mind
+
Dreamcatcher
+ +
+
+
+ + +
+
+
+ + + + \ No newline at end of file diff --git a/apple-music-widget-compact/script.js b/apple-music-widget-compact/script.js new file mode 100644 index 0000000..1a0034d --- /dev/null +++ b/apple-music-widget-compact/script.js @@ -0,0 +1,230 @@ +/////////////// +// PARAMETRS // +/////////////// + +const queryString = window.location.search; +const urlParams = new URLSearchParams(queryString); + +const visibilityDuration = urlParams.get("duration") || 0; +// const hideAlbumArt = urlParams.has("hideAlbumArt"); + + +///////////////// +// GLOBAL VARS // +///////////////// + +let animationSpeed = 0.5; + + + +////////////////////// +// WEBSOCKET SERVER // +////////////////////// + +// This is the main function that connects to the Streamer.bot websocket server +function connectws() { + if ("WebSocket" in window) { + //const ws = new WebSocket("ws://" + sbServerAddress + ":" + sbServerPort + "/"); + const CiderApp = io("http://localhost:10767/", { + transports: ['websocket'] + }); + + CiderApp.on("disconnect", (event) => { + SetConnectionStatus(false); + setTimeout(connectws, 5000); + }); + + CiderApp.on("connect", (event) => { + SetConnectionStatus(true); + }); + + // Set up websocket artwork/information handling + CiderApp.on("API:Playback", ({ data, type }) => { + switch (type) { + // Song changes + case ("playbackStatus.nowPlayingItemDidChange"): + UpdateSongInfo(data); + break; + + // Progress bar moves + case ("playbackStatus.playbackTimeDidChange"): + UpdateProgressBar(data); + break; + + // Pause/unpause + case ("playbackStatus.playbackStateDidChange"): + UpdatePlaybackState(data); + break; + } + }); + } +} + + + +//////////////////////// +// NOW PLAYING WIDGET // +//////////////////////// + +function UpdateSongInfo(data) { + // Set the user's info + let albumArtUrl = data.artwork.url; + albumArtUrl = albumArtUrl.replace("{w}", data.artwork.width); + albumArtUrl = albumArtUrl.replace("{h}", data.artwork.height); + + // UpdateAlbumArt(document.getElementById("albumArt"), albumArtUrl); + UpdateAlbumArt(document.getElementById("backgroundImage"), albumArtUrl); + + setTimeout(() => { + UpdateTextLabel(document.getElementById("songLabel"), data.name); + UpdateTextLabel(document.getElementById("artistLabel"), data.artistName); + }, animationSpeed * 500); + + setTimeout(() => { + // document.getElementById("albumArtBack").src = albumArtUrl; + document.getElementById("backgroundImageBack").src = albumArtUrl; + }, 2 * animationSpeed * 500); + + if (visibilityDuration > 0) { + setTimeout(() => { + SetVisibility(false); + }, visibilityDuration * 1000); + } +} + +function UpdateTextLabel(div, text) { + if (div.innerHTML != text) { + div.setAttribute("class", "text-fade"); + setTimeout(() => { + div.innerHTML = text; + div.setAttribute("class", ".text-show"); + }, animationSpeed * 250); + } +} + +function UpdateAlbumArt(div, imgsrc) { + if (div.src != imgsrc) { + div.setAttribute("class", "text-fade"); + setTimeout(() => { + div.src = imgsrc; + div.setAttribute("class", "text-show"); + }, animationSpeed * 500); + } +} + +function UpdateProgressBar(data) { + const progress = ((data.currentPlaybackTime / data.currentPlaybackDuration) * 100); + const progressTime = ConvertSecondsToMinutesSoThatItLooksBetterOnTheOverlay(data.currentPlaybackTime); + const duration = ConvertSecondsToMinutesSoThatItLooksBetterOnTheOverlay(data.currentPlaybackTimeRemaining); + // document.getElementById("progressBar").style.width = `${progress}%`; + // document.getElementById("progressTime").innerHTML = progressTime; + // document.getElementById("duration").innerHTML = `-${duration}`; + document.getElementById("backgroundImage").style.clipPath = `inset(0 ${100 - progress}% 0 0)`; +} + +function UpdatePlaybackState(data) { + console.log(data); + switch (data.state) { + case ("paused"): + case ("stopped"): + SetVisibility(false); + break; + case ("playing"): + UpdateSongInfo(data.attributes); + setTimeout(() => { + SetVisibility(true); + }, animationSpeed * 500); + break; + } +} + + + +////////////////////// +// HELPER FUNCTIONS // +////////////////////// + +function ConvertSecondsToMinutesSoThatItLooksBetterOnTheOverlay(time) { + const minutes = Math.floor(time / 60); + const seconds = Math.trunc(time - minutes * 60); + + return `${minutes}:${('0' + seconds).slice(-2)}`; +} + +function SetVisibility(isVisible) { + widgetVisibility = isVisible; + + const mainContainer = document.getElementById("mainContainer"); + + if (isVisible) { + var tl = new TimelineMax(); + tl + .to(mainContainer, animationSpeed, { bottom: "50%", ease: Power1.easeInOut }, 'label') + .to(mainContainer, animationSpeed, { opacity: 1, ease: Power1.easeInOut }, 'label') + } + else { + var tl = new TimelineMax(); + tl + .to(mainContainer, animationSpeed, { bottom: "45%", ease: Power1.easeInOut }, 'label') + .to(mainContainer, animationSpeed, { opacity: 0, ease: Power1.easeInOut }, 'label') + } +} + + + +/////////////////////////////////// +// STREAMER.BOT WEBSOCKET STATUS // +/////////////////////////////////// + +// This function sets the visibility of the Streamer.bot status label on the overlay +function SetConnectionStatus(connected) { + let statusContainer = document.getElementById("statusContainer"); + if (connected) { + statusContainer.style.background = "#2FB774"; + statusContainer.innerText = "Connected!"; + var tl = new TimelineMax(); + tl + .to(statusContainer, 2, { opacity: 0, ease: Linear.easeNone }); + console.log("Connected to Cider!"); + } + else { + // statusContainer.style.background = "#D12025"; + // statusContainer.innerText = "Connecting..."; + // statusContainer.style.opacity = 1; + console.log("Not connected to Cider..."); + } +} + + + +////////////////////////////////////////////////////////////////////////////////////////// +// RESIZER THING BECAUSE I THINK I KNOW HOW RESPONSIVE DESIGN WORKS EVEN THOUGH I DON'T // +////////////////////////////////////////////////////////////////////////////////////////// + +let outer = document.getElementById('mainContainer'), + maxWidth = outer.clientWidth+100, + maxHeight = outer.clientHeight; + +window.addEventListener("resize", resize); + +resize(); +function resize() { + const scale = window.innerWidth / maxWidth; + outer.style.transform = 'translate(-50%, 50%) scale(' + scale + ')'; +} + + + +///////////////////////////////////////////////////////////////////// +// IF THE USER PUT IN THE HIDEALBUMART PARAMATER, THEN YOU SHOULD // +// HIDE THE ALBUM ART, BECAUSE THAT'S WHAT IT'S SUPPOSED TO DO // +///////////////////////////////////////////////////////////////////// + +// if (hideAlbumArt) +// { +// document.getElementById("albumArtBox").style.display = "none"; +// document.getElementById("songInfoBox").style.width = "calc(100% - 20px)"; +// } + + +connectws(); \ No newline at end of file diff --git a/apple-music-widget-compact/style.css b/apple-music-widget-compact/style.css new file mode 100644 index 0000000..8ed8568 --- /dev/null +++ b/apple-music-widget-compact/style.css @@ -0,0 +1,181 @@ +* { + --corner-radius: 25px; + --album-art-size: 50px; +} + +#statusContainer { + font-family: 'Metropolis'; + font-style: italic; + font-weight: bold; + font-size: 30px; + width: 400px; + max-width: fit-content; + text-align: center; + background-color: #D12025; + color: white; + padding: 10px; + border-radius: 10px; + position: absolute; + top: 50%; + left: 50%; + transform: translate(-50%, -50%); + opacity: 0; +} + +#mainContainer { + font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica, Arial, sans-serif; + display: flex; + position: absolute; + height: var(--album-art-size); + margin: 20px; + filter: drop-shadow(15px 15px 7px rgba(0, 0, 0, 1)); + width: 100%; + max-width: 400px; + bottom: 45%; + left: 50%; + opacity: 0; +} + +#albumArtBox { + background: rgba(0, 0, 0, 0.5); + position: relative; + border-radius: var(--corner-radius); + overflow: hidden; + margin: 0px 8px 0px 0px; + object-fit: cover; + width: var(--album-art-size); +} + +#albumArtBox img { + width: 100%; + height: 100%; + object-fit: cover; +} + +#songInfoBox { + position: relative; + color: white; + /* width: calc(100% - 125px); */ + width: calc(100%); + display: flex; + flex-direction: column; + flex: 0 1 auto; + justify-content: center; + z-index: 1; + text-shadow: 2px 2px 2px rgba(0, 0, 0, 0.5); + overflow: hidden; + z-index: 4; +} + +#songInfo { + background: rgba(0, 0, 0, 0.5); + opacity: 0.9; + position: relative; + border-radius: var(--corner-radius); + padding: 0px 20px; + height: 100%; + overflow: hidden; +} + +#IAmRunningOutOfNamesForTheseBoxes { + position: absolute; + width: calc(100% - 40px); + position: absolute; + top: 50%; + -ms-transform: translateY(-50%); + transform: translateY(-50%); +} + +#backgroundArt { + position: absolute; + height: 100%; + width: 100%; + border-radius: var(--corner-radius); + overflow: hidden; + z-index: -1; + opacity: 0.9; +} + +#backgroundImage { + filter: blur(20px); + position: absolute; + width: 100%; + top: 50%; + left: 50%; + transform: translateX(-50%) translateY(-50%); + transition: all 2s ease; +} + +#backgroundImageBack { + filter: blur(20px); + position: absolute; + width: 100%; + top: 50%; + left: 50%; + transform: translateX(-50%) translateY(-50%); + z-index: -1; +} + +#artistLabel { + font-size: 18px; + font-weight: 400; + line-height: 1; + white-space: nowrap; + transition: all 0.5s ease; + text-align: center; +} + +#songLabel { + font-weight: bold; + font-size: 20px; + width: calc(100%); + overflow: hidden; + text-overflow: ellipsis; + white-space: nowrap; + transition: all 0.5s ease; + text-align: center; +} + +/* #progressBg { + margin-top: 15px; + width: 100%; + height: auto; + border-radius: 5px; + background-color: #1F1F1F; +} */ + +/* #progressBar { + border-radius: 5px; + height: 5px; + width: 20%; + background-color: #ffffff; + margin: 10px 0px; +} */ + +/* #times { + position: relative; + height: 16px; + font-size: 16px; + font-weight: 700; + line-height: 2.2; +} */ + +/* #progressTime { + position: absolute; +} */ + +/* #duration { + position: absolute; + width: 100%; + text-align: right; +} */ + +.text-show { + opacity: 1; + transition: all 0.25s ease; +} + +.text-fade { + opacity: 0; + transition: all 0.25s ease; +} \ No newline at end of file diff --git a/apple-music-widget/index.html b/apple-music-widget/index.html new file mode 100644 index 0000000..104ad7d --- /dev/null +++ b/apple-music-widget/index.html @@ -0,0 +1,47 @@ + + + + + + + + + + + +
Connecting...
+
+
+ + +
+
+
+
+
Can't get you out of my mind
+
Dreamcatcher
+
+
2:29
+
3:43
+
+
+
+
+
+
+
+ + +
+
+
+ + + + \ No newline at end of file diff --git a/apple-music-widget/script.js b/apple-music-widget/script.js new file mode 100644 index 0000000..495c4e4 --- /dev/null +++ b/apple-music-widget/script.js @@ -0,0 +1,229 @@ +/////////////// +// PARAMETRS // +/////////////// + +const queryString = window.location.search; +const urlParams = new URLSearchParams(queryString); + +const visibilityDuration = urlParams.get("duration") || 0; +const hideAlbumArt = urlParams.has("hideAlbumArt"); + + +///////////////// +// GLOBAL VARS // +///////////////// + +let animationSpeed = 0.5; + + + +////////////////////// +// WEBSOCKET SERVER // +////////////////////// + +// This is the main function that connects to the Streamer.bot websocket server +function connectws() { + if ("WebSocket" in window) { + //const ws = new WebSocket("ws://" + sbServerAddress + ":" + sbServerPort + "/"); + const CiderApp = io("http://localhost:10767/", { + transports: ['websocket'] + }); + + CiderApp.on("disconnect", (event) => { + SetConnectionStatus(false); + setTimeout(connectws, 5000); + }); + + CiderApp.on("connect", (event) => { + SetConnectionStatus(true); + }); + + // Set up websocket artwork/information handling + CiderApp.on("API:Playback", ({ data, type }) => { + switch (type) { + // Song changes + case ("playbackStatus.nowPlayingItemDidChange"): + UpdateSongInfo(data); + break; + + // Progress bar moves + case ("playbackStatus.playbackTimeDidChange"): + UpdateProgressBar(data); + break; + + // Pause/unpause + case ("playbackStatus.playbackStateDidChange"): + UpdatePlaybackState(data); + break; + } + }); + } +} + + + +//////////////////////// +// NOW PLAYING WIDGET // +//////////////////////// + +function UpdateSongInfo(data) { + // Set the user's info + let albumArtUrl = data.artwork.url; + albumArtUrl = albumArtUrl.replace("{w}", data.artwork.width); + albumArtUrl = albumArtUrl.replace("{h}", data.artwork.height); + + UpdateAlbumArt(document.getElementById("albumArt"), albumArtUrl); + UpdateAlbumArt(document.getElementById("backgroundImage"), albumArtUrl); + + setTimeout(() => { + UpdateTextLabel(document.getElementById("songLabel"), data.name); + UpdateTextLabel(document.getElementById("artistLabel"), data.artistName); + }, animationSpeed * 500); + + setTimeout(() => { + document.getElementById("albumArtBack").src = albumArtUrl; + document.getElementById("backgroundImageBack").src = albumArtUrl; + }, 2 * animationSpeed * 500); + + if (visibilityDuration > 0) { + setTimeout(() => { + SetVisibility(false); + }, visibilityDuration * 1000); + } +} + +function UpdateTextLabel(div, text) { + if (div.innerHTML != text) { + div.setAttribute("class", "text-fade"); + setTimeout(() => { + div.innerHTML = text; + div.setAttribute("class", ".text-show"); + }, animationSpeed * 250); + } +} + +function UpdateAlbumArt(div, imgsrc) { + if (div.src != imgsrc) { + div.setAttribute("class", "text-fade"); + setTimeout(() => { + div.src = imgsrc; + div.setAttribute("class", "text-show"); + }, animationSpeed * 500); + } +} + +function UpdateProgressBar(data) { + const progress = ((data.currentPlaybackTime / data.currentPlaybackDuration) * 100); + const progressTime = ConvertSecondsToMinutesSoThatItLooksBetterOnTheOverlay(data.currentPlaybackTime); + const duration = ConvertSecondsToMinutesSoThatItLooksBetterOnTheOverlay(data.currentPlaybackTimeRemaining); + document.getElementById("progressBar").style.width = `${progress}%`; + document.getElementById("progressTime").innerHTML = progressTime; + document.getElementById("duration").innerHTML = `-${duration}`; +} + +function UpdatePlaybackState(data) { + console.log(data); + switch (data.state) { + case ("paused"): + case ("stopped"): + SetVisibility(false); + break; + case ("playing"): + UpdateSongInfo(data.attributes); + setTimeout(() => { + SetVisibility(true); + }, animationSpeed * 500); + break; + } +} + + + +////////////////////// +// HELPER FUNCTIONS // +////////////////////// + +function ConvertSecondsToMinutesSoThatItLooksBetterOnTheOverlay(time) { + const minutes = Math.floor(time / 60); + const seconds = Math.trunc(time - minutes * 60); + + return `${minutes}:${('0' + seconds).slice(-2)}`; +} + +function SetVisibility(isVisible) { + widgetVisibility = isVisible; + + const mainContainer = document.getElementById("mainContainer"); + + if (isVisible) { + var tl = new TimelineMax(); + tl + .to(mainContainer, animationSpeed, { bottom: "50%", ease: Power1.easeInOut }, 'label') + .to(mainContainer, animationSpeed, { opacity: 1, ease: Power1.easeInOut }, 'label') + } + else { + var tl = new TimelineMax(); + tl + .to(mainContainer, animationSpeed, { bottom: "45%", ease: Power1.easeInOut }, 'label') + .to(mainContainer, animationSpeed, { opacity: 0, ease: Power1.easeInOut }, 'label') + } +} + + + +/////////////////////////////////// +// STREAMER.BOT WEBSOCKET STATUS // +/////////////////////////////////// + +// This function sets the visibility of the Streamer.bot status label on the overlay +function SetConnectionStatus(connected) { + let statusContainer = document.getElementById("statusContainer"); + if (connected) { + statusContainer.style.background = "#2FB774"; + statusContainer.innerText = "Connected!"; + var tl = new TimelineMax(); + tl + .to(statusContainer, 2, { opacity: 0, ease: Linear.easeNone }); + console.log("Connected to Cider!"); + } + else { + // statusContainer.style.background = "#D12025"; + // statusContainer.innerText = "Connecting..."; + // statusContainer.style.opacity = 1; + console.log("Not connected to Cider..."); + } +} + + + +////////////////////////////////////////////////////////////////////////////////////////// +// RESIZER THING BECAUSE I THINK I KNOW HOW RESPONSIVE DESIGN WORKS EVEN THOUGH I DON'T // +////////////////////////////////////////////////////////////////////////////////////////// + +let outer = document.getElementById('mainContainer'), + maxWidth = outer.clientWidth+50, + maxHeight = outer.clientHeight; + +window.addEventListener("resize", resize); + +resize(); +function resize() { + const scale = window.innerWidth / maxWidth; + outer.style.transform = 'translate(-50%, 50%) scale(' + scale + ')'; +} + + + +///////////////////////////////////////////////////////////////////// +// IF THE USER PUT IN THE HIDEALBUMART PARAMATER, THEN YOU SHOULD // +// HIDE THE ALBUM ART, BECAUSE THAT'S WHAT IT'S SUPPOSED TO DO // +///////////////////////////////////////////////////////////////////// + +if (hideAlbumArt) +{ + document.getElementById("albumArtBox").style.display = "none"; + document.getElementById("songInfoBox").style.width = "calc(100% - 20px)"; +} + + +connectws(); \ No newline at end of file diff --git a/apple-music-widget/style.css b/apple-music-widget/style.css new file mode 100644 index 0000000..22b9054 --- /dev/null +++ b/apple-music-widget/style.css @@ -0,0 +1,177 @@ +* { + --corner-radius: 10px; + --album-art-size: 100px; +} + +#statusContainer { + font-family: 'Metropolis'; + font-style: italic; + font-weight: bold; + font-size: 30px; + width: 400px; + max-width: fit-content; + text-align: center; + background-color: #D12025; + color: white; + padding: 10px; + border-radius: 10px; + position: absolute; + top: 50%; + left: 50%; + transform: translate(-50%, -50%); + opacity: 0; +} + +#mainContainer { + font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica, Arial, sans-serif; + display: flex; + position: absolute; + height: var(--album-art-size); + margin: 20px; + filter: drop-shadow(15px 15px 7px rgba(0, 0, 0, 1)); + width: 100%; + max-width: 500px; + bottom: 45%; + left: 50%; + opacity: 0; +} + +#albumArtBox { + background: rgba(0, 0, 0, 0.5); + position: relative; + border-radius: var(--corner-radius); + overflow: hidden; + margin: 0px 8px 0px 0px; + object-fit: cover; + width: var(--album-art-size); +} + +#albumArtBox img { + width: 100%; + height: 100%; + object-fit: cover; +} + +#songInfoBox { + position: relative; + color: white; + width: calc(100% - 125px); + display: flex; + flex-direction: column; + flex: 0 1 auto; + justify-content: center; + z-index: 1; + text-shadow: 2px 2px 2px rgba(0, 0, 0, 0.5); + overflow: hidden; + z-index: 4; +} + +#songInfo { + background: rgba(0, 0, 0, 0.5); + opacity: 0.9; + position: relative; + border-radius: var(--corner-radius); + padding: 0px 20px; + height: 100%; + overflow: hidden; +} + +#IAmRunningOutOfNamesForTheseBoxes { + position: absolute; + width: calc(100% - 40px); + position: absolute; + top: 50%; + -ms-transform: translateY(-50%); + transform: translateY(-50%); +} + +#backgroundArt { + position: absolute; + height: 100%; + width: 100%; + border-radius: var(--corner-radius); + overflow: hidden; + z-index: -1; + opacity: 0.9; +} + +#backgroundImage { + filter: blur(20px); + position: absolute; + width: 140%; + top: 50%; + left: 50%; + transform: translateX(-50%) translateY(-50%); +} + +#backgroundImageBack { + filter: blur(20px); + position: absolute; + width: 140%; + top: 50%; + left: 50%; + transform: translateX(-50%) translateY(-50%); + z-index: -1; +} + +#artistLabel { + font-size: 16px; + font-weight: 400; + line-height: 1; + white-space: nowrap; + transition: all 0.5s ease; +} + +#songLabel { + font-weight: bold; + font-size: 20px; + width: calc(100%); + overflow: hidden; + text-overflow: ellipsis; + white-space: nowrap; + transition: all 0.5s ease; +} + +#progressBg { + margin-top: 15px; + width: 100%; + height: auto; + border-radius: 5px; + background-color: #1F1F1F; +} + +#progressBar { + border-radius: 5px; + height: 5px; + width: 20%; + background-color: #ffffff; + margin: 10px 0px; +} + +#times { + position: relative; + height: 16px; + font-size: 16px; + font-weight: 700; + line-height: 2.2; +} + +#progressTime { + position: absolute; +} + +#duration { + position: absolute; + width: 100%; + text-align: right; +} + +.text-show { + opacity: 1; + transition: all 0.25s ease; +} + +.text-fade { + opacity: 0; + transition: all 0.25s ease; +} \ No newline at end of file diff --git a/clock-widget/index.html b/clock-widget/index.html new file mode 100644 index 0000000..3e64f3b --- /dev/null +++ b/clock-widget/index.html @@ -0,0 +1,8 @@ + + +
+ +
+ + + \ No newline at end of file diff --git a/clock-widget/moment.js b/clock-widget/moment.js new file mode 100644 index 0000000..480b9fb --- /dev/null +++ b/clock-widget/moment.js @@ -0,0 +1,5688 @@ +//! moment.js +//! version : 2.30.1 +//! authors : Tim Wood, Iskren Chernev, Moment.js contributors +//! license : MIT +//! momentjs.com + +;(function (global, factory) { + typeof exports === 'object' && typeof module !== 'undefined' ? module.exports = factory() : + typeof define === 'function' && define.amd ? define(factory) : + global.moment = factory() +}(this, (function () { 'use strict'; + + var hookCallback; + + function hooks() { + return hookCallback.apply(null, arguments); + } + + // This is done to register the method called with moment() + // without creating circular dependencies. + function setHookCallback(callback) { + hookCallback = callback; + } + + function isArray(input) { + return ( + input instanceof Array || + Object.prototype.toString.call(input) === '[object Array]' + ); + } + + function isObject(input) { + // IE8 will treat undefined and null as object if it wasn't for + // input != null + return ( + input != null && + Object.prototype.toString.call(input) === '[object Object]' + ); + } + + function hasOwnProp(a, b) { + return Object.prototype.hasOwnProperty.call(a, b); + } + + function isObjectEmpty(obj) { + if (Object.getOwnPropertyNames) { + return Object.getOwnPropertyNames(obj).length === 0; + } else { + var k; + for (k in obj) { + if (hasOwnProp(obj, k)) { + return false; + } + } + return true; + } + } + + function isUndefined(input) { + return input === void 0; + } + + function isNumber(input) { + return ( + typeof input === 'number' || + Object.prototype.toString.call(input) === '[object Number]' + ); + } + + function isDate(input) { + return ( + input instanceof Date || + Object.prototype.toString.call(input) === '[object Date]' + ); + } + + function map(arr, fn) { + var res = [], + i, + arrLen = arr.length; + for (i = 0; i < arrLen; ++i) { + res.push(fn(arr[i], i)); + } + return res; + } + + function extend(a, b) { + for (var i in b) { + if (hasOwnProp(b, i)) { + a[i] = b[i]; + } + } + + if (hasOwnProp(b, 'toString')) { + a.toString = b.toString; + } + + if (hasOwnProp(b, 'valueOf')) { + a.valueOf = b.valueOf; + } + + return a; + } + + function createUTC(input, format, locale, strict) { + return createLocalOrUTC(input, format, locale, strict, true).utc(); + } + + function defaultParsingFlags() { + // We need to deep clone this object. + return { + empty: false, + unusedTokens: [], + unusedInput: [], + overflow: -2, + charsLeftOver: 0, + nullInput: false, + invalidEra: null, + invalidMonth: null, + invalidFormat: false, + userInvalidated: false, + iso: false, + parsedDateParts: [], + era: null, + meridiem: null, + rfc2822: false, + weekdayMismatch: false, + }; + } + + function getParsingFlags(m) { + if (m._pf == null) { + m._pf = defaultParsingFlags(); + } + return m._pf; + } + + var some; + if (Array.prototype.some) { + some = Array.prototype.some; + } else { + some = function (fun) { + var t = Object(this), + len = t.length >>> 0, + i; + + for (i = 0; i < len; i++) { + if (i in t && fun.call(this, t[i], i, t)) { + return true; + } + } + + return false; + }; + } + + function isValid(m) { + var flags = null, + parsedParts = false, + isNowValid = m._d && !isNaN(m._d.getTime()); + if (isNowValid) { + flags = getParsingFlags(m); + parsedParts = some.call(flags.parsedDateParts, function (i) { + return i != null; + }); + isNowValid = + flags.overflow < 0 && + !flags.empty && + !flags.invalidEra && + !flags.invalidMonth && + !flags.invalidWeekday && + !flags.weekdayMismatch && + !flags.nullInput && + !flags.invalidFormat && + !flags.userInvalidated && + (!flags.meridiem || (flags.meridiem && parsedParts)); + if (m._strict) { + isNowValid = + isNowValid && + flags.charsLeftOver === 0 && + flags.unusedTokens.length === 0 && + flags.bigHour === undefined; + } + } + if (Object.isFrozen == null || !Object.isFrozen(m)) { + m._isValid = isNowValid; + } else { + return isNowValid; + } + return m._isValid; + } + + function createInvalid(flags) { + var m = createUTC(NaN); + if (flags != null) { + extend(getParsingFlags(m), flags); + } else { + getParsingFlags(m).userInvalidated = true; + } + + return m; + } + + // Plugins that add properties should also add the key here (null value), + // so we can properly clone ourselves. + var momentProperties = (hooks.momentProperties = []), + updateInProgress = false; + + function copyConfig(to, from) { + var i, + prop, + val, + momentPropertiesLen = momentProperties.length; + + if (!isUndefined(from._isAMomentObject)) { + to._isAMomentObject = from._isAMomentObject; + } + if (!isUndefined(from._i)) { + to._i = from._i; + } + if (!isUndefined(from._f)) { + to._f = from._f; + } + if (!isUndefined(from._l)) { + to._l = from._l; + } + if (!isUndefined(from._strict)) { + to._strict = from._strict; + } + if (!isUndefined(from._tzm)) { + to._tzm = from._tzm; + } + if (!isUndefined(from._isUTC)) { + to._isUTC = from._isUTC; + } + if (!isUndefined(from._offset)) { + to._offset = from._offset; + } + if (!isUndefined(from._pf)) { + to._pf = getParsingFlags(from); + } + if (!isUndefined(from._locale)) { + to._locale = from._locale; + } + + if (momentPropertiesLen > 0) { + for (i = 0; i < momentPropertiesLen; i++) { + prop = momentProperties[i]; + val = from[prop]; + if (!isUndefined(val)) { + to[prop] = val; + } + } + } + + return to; + } + + // Moment prototype object + function Moment(config) { + copyConfig(this, config); + this._d = new Date(config._d != null ? config._d.getTime() : NaN); + if (!this.isValid()) { + this._d = new Date(NaN); + } + // Prevent infinite loop in case updateOffset creates new moment + // objects. + if (updateInProgress === false) { + updateInProgress = true; + hooks.updateOffset(this); + updateInProgress = false; + } + } + + function isMoment(obj) { + return ( + obj instanceof Moment || (obj != null && obj._isAMomentObject != null) + ); + } + + function warn(msg) { + if ( + hooks.suppressDeprecationWarnings === false && + typeof console !== 'undefined' && + console.warn + ) { + console.warn('Deprecation warning: ' + msg); + } + } + + function deprecate(msg, fn) { + var firstTime = true; + + return extend(function () { + if (hooks.deprecationHandler != null) { + hooks.deprecationHandler(null, msg); + } + if (firstTime) { + var args = [], + arg, + i, + key, + argLen = arguments.length; + for (i = 0; i < argLen; i++) { + arg = ''; + if (typeof arguments[i] === 'object') { + arg += '\n[' + i + '] '; + for (key in arguments[0]) { + if (hasOwnProp(arguments[0], key)) { + arg += key + ': ' + arguments[0][key] + ', '; + } + } + arg = arg.slice(0, -2); // Remove trailing comma and space + } else { + arg = arguments[i]; + } + args.push(arg); + } + warn( + msg + + '\nArguments: ' + + Array.prototype.slice.call(args).join('') + + '\n' + + new Error().stack + ); + firstTime = false; + } + return fn.apply(this, arguments); + }, fn); + } + + var deprecations = {}; + + function deprecateSimple(name, msg) { + if (hooks.deprecationHandler != null) { + hooks.deprecationHandler(name, msg); + } + if (!deprecations[name]) { + warn(msg); + deprecations[name] = true; + } + } + + hooks.suppressDeprecationWarnings = false; + hooks.deprecationHandler = null; + + function isFunction(input) { + return ( + (typeof Function !== 'undefined' && input instanceof Function) || + Object.prototype.toString.call(input) === '[object Function]' + ); + } + + function set(config) { + var prop, i; + for (i in config) { + if (hasOwnProp(config, i)) { + prop = config[i]; + if (isFunction(prop)) { + this[i] = prop; + } else { + this['_' + i] = prop; + } + } + } + this._config = config; + // Lenient ordinal parsing accepts just a number in addition to + // number + (possibly) stuff coming from _dayOfMonthOrdinalParse. + // TODO: Remove "ordinalParse" fallback in next major release. + this._dayOfMonthOrdinalParseLenient = new RegExp( + (this._dayOfMonthOrdinalParse.source || this._ordinalParse.source) + + '|' + + /\d{1,2}/.source + ); + } + + function mergeConfigs(parentConfig, childConfig) { + var res = extend({}, parentConfig), + prop; + for (prop in childConfig) { + if (hasOwnProp(childConfig, prop)) { + if (isObject(parentConfig[prop]) && isObject(childConfig[prop])) { + res[prop] = {}; + extend(res[prop], parentConfig[prop]); + extend(res[prop], childConfig[prop]); + } else if (childConfig[prop] != null) { + res[prop] = childConfig[prop]; + } else { + delete res[prop]; + } + } + } + for (prop in parentConfig) { + if ( + hasOwnProp(parentConfig, prop) && + !hasOwnProp(childConfig, prop) && + isObject(parentConfig[prop]) + ) { + // make sure changes to properties don't modify parent config + res[prop] = extend({}, res[prop]); + } + } + return res; + } + + function Locale(config) { + if (config != null) { + this.set(config); + } + } + + var keys; + + if (Object.keys) { + keys = Object.keys; + } else { + keys = function (obj) { + var i, + res = []; + for (i in obj) { + if (hasOwnProp(obj, i)) { + res.push(i); + } + } + return res; + }; + } + + var defaultCalendar = { + sameDay: '[Today at] LT', + nextDay: '[Tomorrow at] LT', + nextWeek: 'dddd [at] LT', + lastDay: '[Yesterday at] LT', + lastWeek: '[Last] dddd [at] LT', + sameElse: 'L', + }; + + function calendar(key, mom, now) { + var output = this._calendar[key] || this._calendar['sameElse']; + return isFunction(output) ? output.call(mom, now) : output; + } + + function zeroFill(number, targetLength, forceSign) { + var absNumber = '' + Math.abs(number), + zerosToFill = targetLength - absNumber.length, + sign = number >= 0; + return ( + (sign ? (forceSign ? '+' : '') : '-') + + Math.pow(10, Math.max(0, zerosToFill)).toString().substr(1) + + absNumber + ); + } + + var formattingTokens = + /(\[[^\[]*\])|(\\)?([Hh]mm(ss)?|Mo|MM?M?M?|Do|DDDo|DD?D?D?|ddd?d?|do?|w[o|w]?|W[o|W]?|Qo?|N{1,5}|YYYYYY|YYYYY|YYYY|YY|y{2,4}|yo?|gg(ggg?)?|GG(GGG?)?|e|E|a|A|hh?|HH?|kk?|mm?|ss?|S{1,9}|x|X|zz?|ZZ?|.)/g, + localFormattingTokens = /(\[[^\[]*\])|(\\)?(LTS|LT|LL?L?L?|l{1,4})/g, + formatFunctions = {}, + formatTokenFunctions = {}; + + // token: 'M' + // padded: ['MM', 2] + // ordinal: 'Mo' + // callback: function () { this.month() + 1 } + function addFormatToken(token, padded, ordinal, callback) { + var func = callback; + if (typeof callback === 'string') { + func = function () { + return this[callback](); + }; + } + if (token) { + formatTokenFunctions[token] = func; + } + if (padded) { + formatTokenFunctions[padded[0]] = function () { + return zeroFill(func.apply(this, arguments), padded[1], padded[2]); + }; + } + if (ordinal) { + formatTokenFunctions[ordinal] = function () { + return this.localeData().ordinal( + func.apply(this, arguments), + token + ); + }; + } + } + + function removeFormattingTokens(input) { + if (input.match(/\[[\s\S]/)) { + return input.replace(/^\[|\]$/g, ''); + } + return input.replace(/\\/g, ''); + } + + function makeFormatFunction(format) { + var array = format.match(formattingTokens), + i, + length; + + for (i = 0, length = array.length; i < length; i++) { + if (formatTokenFunctions[array[i]]) { + array[i] = formatTokenFunctions[array[i]]; + } else { + array[i] = removeFormattingTokens(array[i]); + } + } + + return function (mom) { + var output = '', + i; + for (i = 0; i < length; i++) { + output += isFunction(array[i]) + ? array[i].call(mom, format) + : array[i]; + } + return output; + }; + } + + // format date using native date object + function formatMoment(m, format) { + if (!m.isValid()) { + return m.localeData().invalidDate(); + } + + format = expandFormat(format, m.localeData()); + formatFunctions[format] = + formatFunctions[format] || makeFormatFunction(format); + + return formatFunctions[format](m); + } + + function expandFormat(format, locale) { + var i = 5; + + function replaceLongDateFormatTokens(input) { + return locale.longDateFormat(input) || input; + } + + localFormattingTokens.lastIndex = 0; + while (i >= 0 && localFormattingTokens.test(format)) { + format = format.replace( + localFormattingTokens, + replaceLongDateFormatTokens + ); + localFormattingTokens.lastIndex = 0; + i -= 1; + } + + return format; + } + + var defaultLongDateFormat = { + LTS: 'h:mm:ss A', + LT: 'h:mm A', + L: 'MM/DD/YYYY', + LL: 'MMMM D, YYYY', + LLL: 'MMMM D, YYYY h:mm A', + LLLL: 'dddd, MMMM D, YYYY h:mm A', + }; + + function longDateFormat(key) { + var format = this._longDateFormat[key], + formatUpper = this._longDateFormat[key.toUpperCase()]; + + if (format || !formatUpper) { + return format; + } + + this._longDateFormat[key] = formatUpper + .match(formattingTokens) + .map(function (tok) { + if ( + tok === 'MMMM' || + tok === 'MM' || + tok === 'DD' || + tok === 'dddd' + ) { + return tok.slice(1); + } + return tok; + }) + .join(''); + + return this._longDateFormat[key]; + } + + var defaultInvalidDate = 'Invalid date'; + + function invalidDate() { + return this._invalidDate; + } + + var defaultOrdinal = '%d', + defaultDayOfMonthOrdinalParse = /\d{1,2}/; + + function ordinal(number) { + return this._ordinal.replace('%d', number); + } + + var defaultRelativeTime = { + future: 'in %s', + past: '%s ago', + s: 'a few seconds', + ss: '%d seconds', + m: 'a minute', + mm: '%d minutes', + h: 'an hour', + hh: '%d hours', + d: 'a day', + dd: '%d days', + w: 'a week', + ww: '%d weeks', + M: 'a month', + MM: '%d months', + y: 'a year', + yy: '%d years', + }; + + function relativeTime(number, withoutSuffix, string, isFuture) { + var output = this._relativeTime[string]; + return isFunction(output) + ? output(number, withoutSuffix, string, isFuture) + : output.replace(/%d/i, number); + } + + function pastFuture(diff, output) { + var format = this._relativeTime[diff > 0 ? 'future' : 'past']; + return isFunction(format) ? format(output) : format.replace(/%s/i, output); + } + + var aliases = { + D: 'date', + dates: 'date', + date: 'date', + d: 'day', + days: 'day', + day: 'day', + e: 'weekday', + weekdays: 'weekday', + weekday: 'weekday', + E: 'isoWeekday', + isoweekdays: 'isoWeekday', + isoweekday: 'isoWeekday', + DDD: 'dayOfYear', + dayofyears: 'dayOfYear', + dayofyear: 'dayOfYear', + h: 'hour', + hours: 'hour', + hour: 'hour', + ms: 'millisecond', + milliseconds: 'millisecond', + millisecond: 'millisecond', + m: 'minute', + minutes: 'minute', + minute: 'minute', + M: 'month', + months: 'month', + month: 'month', + Q: 'quarter', + quarters: 'quarter', + quarter: 'quarter', + s: 'second', + seconds: 'second', + second: 'second', + gg: 'weekYear', + weekyears: 'weekYear', + weekyear: 'weekYear', + GG: 'isoWeekYear', + isoweekyears: 'isoWeekYear', + isoweekyear: 'isoWeekYear', + w: 'week', + weeks: 'week', + week: 'week', + W: 'isoWeek', + isoweeks: 'isoWeek', + isoweek: 'isoWeek', + y: 'year', + years: 'year', + year: 'year', + }; + + function normalizeUnits(units) { + return typeof units === 'string' + ? aliases[units] || aliases[units.toLowerCase()] + : undefined; + } + + function normalizeObjectUnits(inputObject) { + var normalizedInput = {}, + normalizedProp, + prop; + + for (prop in inputObject) { + if (hasOwnProp(inputObject, prop)) { + normalizedProp = normalizeUnits(prop); + if (normalizedProp) { + normalizedInput[normalizedProp] = inputObject[prop]; + } + } + } + + return normalizedInput; + } + + var priorities = { + date: 9, + day: 11, + weekday: 11, + isoWeekday: 11, + dayOfYear: 4, + hour: 13, + millisecond: 16, + minute: 14, + month: 8, + quarter: 7, + second: 15, + weekYear: 1, + isoWeekYear: 1, + week: 5, + isoWeek: 5, + year: 1, + }; + + function getPrioritizedUnits(unitsObj) { + var units = [], + u; + for (u in unitsObj) { + if (hasOwnProp(unitsObj, u)) { + units.push({ unit: u, priority: priorities[u] }); + } + } + units.sort(function (a, b) { + return a.priority - b.priority; + }); + return units; + } + + var match1 = /\d/, // 0 - 9 + match2 = /\d\d/, // 00 - 99 + match3 = /\d{3}/, // 000 - 999 + match4 = /\d{4}/, // 0000 - 9999 + match6 = /[+-]?\d{6}/, // -999999 - 999999 + match1to2 = /\d\d?/, // 0 - 99 + match3to4 = /\d\d\d\d?/, // 999 - 9999 + match5to6 = /\d\d\d\d\d\d?/, // 99999 - 999999 + match1to3 = /\d{1,3}/, // 0 - 999 + match1to4 = /\d{1,4}/, // 0 - 9999 + match1to6 = /[+-]?\d{1,6}/, // -999999 - 999999 + matchUnsigned = /\d+/, // 0 - inf + matchSigned = /[+-]?\d+/, // -inf - inf + matchOffset = /Z|[+-]\d\d:?\d\d/gi, // +00:00 -00:00 +0000 -0000 or Z + matchShortOffset = /Z|[+-]\d\d(?::?\d\d)?/gi, // +00 -00 +00:00 -00:00 +0000 -0000 or Z + matchTimestamp = /[+-]?\d+(\.\d{1,3})?/, // 123456789 123456789.123 + // any word (or two) characters or numbers including two/three word month in arabic. + // includes scottish gaelic two word and hyphenated months + matchWord = + /[0-9]{0,256}['a-z\u00A0-\u05FF\u0700-\uD7FF\uF900-\uFDCF\uFDF0-\uFF07\uFF10-\uFFEF]{1,256}|[\u0600-\u06FF\/]{1,256}(\s*?[\u0600-\u06FF]{1,256}){1,2}/i, + match1to2NoLeadingZero = /^[1-9]\d?/, // 1-99 + match1to2HasZero = /^([1-9]\d|\d)/, // 0-99 + regexes; + + regexes = {}; + + function addRegexToken(token, regex, strictRegex) { + regexes[token] = isFunction(regex) + ? regex + : function (isStrict, localeData) { + return isStrict && strictRegex ? strictRegex : regex; + }; + } + + function getParseRegexForToken(token, config) { + if (!hasOwnProp(regexes, token)) { + return new RegExp(unescapeFormat(token)); + } + + return regexes[token](config._strict, config._locale); + } + + // Code from http://stackoverflow.com/questions/3561493/is-there-a-regexp-escape-function-in-javascript + function unescapeFormat(s) { + return regexEscape( + s + .replace('\\', '') + .replace( + /\\(\[)|\\(\])|\[([^\]\[]*)\]|\\(.)/g, + function (matched, p1, p2, p3, p4) { + return p1 || p2 || p3 || p4; + } + ) + ); + } + + function regexEscape(s) { + return s.replace(/[-\/\\^$*+?.()|[\]{}]/g, '\\$&'); + } + + function absFloor(number) { + if (number < 0) { + // -0 -> 0 + return Math.ceil(number) || 0; + } else { + return Math.floor(number); + } + } + + function toInt(argumentForCoercion) { + var coercedNumber = +argumentForCoercion, + value = 0; + + if (coercedNumber !== 0 && isFinite(coercedNumber)) { + value = absFloor(coercedNumber); + } + + return value; + } + + var tokens = {}; + + function addParseToken(token, callback) { + var i, + func = callback, + tokenLen; + if (typeof token === 'string') { + token = [token]; + } + if (isNumber(callback)) { + func = function (input, array) { + array[callback] = toInt(input); + }; + } + tokenLen = token.length; + for (i = 0; i < tokenLen; i++) { + tokens[token[i]] = func; + } + } + + function addWeekParseToken(token, callback) { + addParseToken(token, function (input, array, config, token) { + config._w = config._w || {}; + callback(input, config._w, config, token); + }); + } + + function addTimeToArrayFromToken(token, input, config) { + if (input != null && hasOwnProp(tokens, token)) { + tokens[token](input, config._a, config, token); + } + } + + function isLeapYear(year) { + return (year % 4 === 0 && year % 100 !== 0) || year % 400 === 0; + } + + var YEAR = 0, + MONTH = 1, + DATE = 2, + HOUR = 3, + MINUTE = 4, + SECOND = 5, + MILLISECOND = 6, + WEEK = 7, + WEEKDAY = 8; + + // FORMATTING + + addFormatToken('Y', 0, 0, function () { + var y = this.year(); + return y <= 9999 ? zeroFill(y, 4) : '+' + y; + }); + + addFormatToken(0, ['YY', 2], 0, function () { + return this.year() % 100; + }); + + addFormatToken(0, ['YYYY', 4], 0, 'year'); + addFormatToken(0, ['YYYYY', 5], 0, 'year'); + addFormatToken(0, ['YYYYYY', 6, true], 0, 'year'); + + // PARSING + + addRegexToken('Y', matchSigned); + addRegexToken('YY', match1to2, match2); + addRegexToken('YYYY', match1to4, match4); + addRegexToken('YYYYY', match1to6, match6); + addRegexToken('YYYYYY', match1to6, match6); + + addParseToken(['YYYYY', 'YYYYYY'], YEAR); + addParseToken('YYYY', function (input, array) { + array[YEAR] = + input.length === 2 ? hooks.parseTwoDigitYear(input) : toInt(input); + }); + addParseToken('YY', function (input, array) { + array[YEAR] = hooks.parseTwoDigitYear(input); + }); + addParseToken('Y', function (input, array) { + array[YEAR] = parseInt(input, 10); + }); + + // HELPERS + + function daysInYear(year) { + return isLeapYear(year) ? 366 : 365; + } + + // HOOKS + + hooks.parseTwoDigitYear = function (input) { + return toInt(input) + (toInt(input) > 68 ? 1900 : 2000); + }; + + // MOMENTS + + var getSetYear = makeGetSet('FullYear', true); + + function getIsLeapYear() { + return isLeapYear(this.year()); + } + + function makeGetSet(unit, keepTime) { + return function (value) { + if (value != null) { + set$1(this, unit, value); + hooks.updateOffset(this, keepTime); + return this; + } else { + return get(this, unit); + } + }; + } + + function get(mom, unit) { + if (!mom.isValid()) { + return NaN; + } + + var d = mom._d, + isUTC = mom._isUTC; + + switch (unit) { + case 'Milliseconds': + return isUTC ? d.getUTCMilliseconds() : d.getMilliseconds(); + case 'Seconds': + return isUTC ? d.getUTCSeconds() : d.getSeconds(); + case 'Minutes': + return isUTC ? d.getUTCMinutes() : d.getMinutes(); + case 'Hours': + return isUTC ? d.getUTCHours() : d.getHours(); + case 'Date': + return isUTC ? d.getUTCDate() : d.getDate(); + case 'Day': + return isUTC ? d.getUTCDay() : d.getDay(); + case 'Month': + return isUTC ? d.getUTCMonth() : d.getMonth(); + case 'FullYear': + return isUTC ? d.getUTCFullYear() : d.getFullYear(); + default: + return NaN; // Just in case + } + } + + function set$1(mom, unit, value) { + var d, isUTC, year, month, date; + + if (!mom.isValid() || isNaN(value)) { + return; + } + + d = mom._d; + isUTC = mom._isUTC; + + switch (unit) { + case 'Milliseconds': + return void (isUTC + ? d.setUTCMilliseconds(value) + : d.setMilliseconds(value)); + case 'Seconds': + return void (isUTC ? d.setUTCSeconds(value) : d.setSeconds(value)); + case 'Minutes': + return void (isUTC ? d.setUTCMinutes(value) : d.setMinutes(value)); + case 'Hours': + return void (isUTC ? d.setUTCHours(value) : d.setHours(value)); + case 'Date': + return void (isUTC ? d.setUTCDate(value) : d.setDate(value)); + // case 'Day': // Not real + // return void (isUTC ? d.setUTCDay(value) : d.setDay(value)); + // case 'Month': // Not used because we need to pass two variables + // return void (isUTC ? d.setUTCMonth(value) : d.setMonth(value)); + case 'FullYear': + break; // See below ... + default: + return; // Just in case + } + + year = value; + month = mom.month(); + date = mom.date(); + date = date === 29 && month === 1 && !isLeapYear(year) ? 28 : date; + void (isUTC + ? d.setUTCFullYear(year, month, date) + : d.setFullYear(year, month, date)); + } + + // MOMENTS + + function stringGet(units) { + units = normalizeUnits(units); + if (isFunction(this[units])) { + return this[units](); + } + return this; + } + + function stringSet(units, value) { + if (typeof units === 'object') { + units = normalizeObjectUnits(units); + var prioritized = getPrioritizedUnits(units), + i, + prioritizedLen = prioritized.length; + for (i = 0; i < prioritizedLen; i++) { + this[prioritized[i].unit](units[prioritized[i].unit]); + } + } else { + units = normalizeUnits(units); + if (isFunction(this[units])) { + return this[units](value); + } + } + return this; + } + + function mod(n, x) { + return ((n % x) + x) % x; + } + + var indexOf; + + if (Array.prototype.indexOf) { + indexOf = Array.prototype.indexOf; + } else { + indexOf = function (o) { + // I know + var i; + for (i = 0; i < this.length; ++i) { + if (this[i] === o) { + return i; + } + } + return -1; + }; + } + + function daysInMonth(year, month) { + if (isNaN(year) || isNaN(month)) { + return NaN; + } + var modMonth = mod(month, 12); + year += (month - modMonth) / 12; + return modMonth === 1 + ? isLeapYear(year) + ? 29 + : 28 + : 31 - ((modMonth % 7) % 2); + } + + // FORMATTING + + addFormatToken('M', ['MM', 2], 'Mo', function () { + return this.month() + 1; + }); + + addFormatToken('MMM', 0, 0, function (format) { + return this.localeData().monthsShort(this, format); + }); + + addFormatToken('MMMM', 0, 0, function (format) { + return this.localeData().months(this, format); + }); + + // PARSING + + addRegexToken('M', match1to2, match1to2NoLeadingZero); + addRegexToken('MM', match1to2, match2); + addRegexToken('MMM', function (isStrict, locale) { + return locale.monthsShortRegex(isStrict); + }); + addRegexToken('MMMM', function (isStrict, locale) { + return locale.monthsRegex(isStrict); + }); + + addParseToken(['M', 'MM'], function (input, array) { + array[MONTH] = toInt(input) - 1; + }); + + addParseToken(['MMM', 'MMMM'], function (input, array, config, token) { + var month = config._locale.monthsParse(input, token, config._strict); + // if we didn't find a month name, mark the date as invalid. + if (month != null) { + array[MONTH] = month; + } else { + getParsingFlags(config).invalidMonth = input; + } + }); + + // LOCALES + + var defaultLocaleMonths = + 'January_February_March_April_May_June_July_August_September_October_November_December'.split( + '_' + ), + defaultLocaleMonthsShort = + 'Jan_Feb_Mar_Apr_May_Jun_Jul_Aug_Sep_Oct_Nov_Dec'.split('_'), + MONTHS_IN_FORMAT = /D[oD]?(\[[^\[\]]*\]|\s)+MMMM?/, + defaultMonthsShortRegex = matchWord, + defaultMonthsRegex = matchWord; + + function localeMonths(m, format) { + if (!m) { + return isArray(this._months) + ? this._months + : this._months['standalone']; + } + return isArray(this._months) + ? this._months[m.month()] + : this._months[ + (this._months.isFormat || MONTHS_IN_FORMAT).test(format) + ? 'format' + : 'standalone' + ][m.month()]; + } + + function localeMonthsShort(m, format) { + if (!m) { + return isArray(this._monthsShort) + ? this._monthsShort + : this._monthsShort['standalone']; + } + return isArray(this._monthsShort) + ? this._monthsShort[m.month()] + : this._monthsShort[ + MONTHS_IN_FORMAT.test(format) ? 'format' : 'standalone' + ][m.month()]; + } + + function handleStrictParse(monthName, format, strict) { + var i, + ii, + mom, + llc = monthName.toLocaleLowerCase(); + if (!this._monthsParse) { + // this is not used + this._monthsParse = []; + this._longMonthsParse = []; + this._shortMonthsParse = []; + for (i = 0; i < 12; ++i) { + mom = createUTC([2000, i]); + this._shortMonthsParse[i] = this.monthsShort( + mom, + '' + ).toLocaleLowerCase(); + this._longMonthsParse[i] = this.months(mom, '').toLocaleLowerCase(); + } + } + + if (strict) { + if (format === 'MMM') { + ii = indexOf.call(this._shortMonthsParse, llc); + return ii !== -1 ? ii : null; + } else { + ii = indexOf.call(this._longMonthsParse, llc); + return ii !== -1 ? ii : null; + } + } else { + if (format === 'MMM') { + ii = indexOf.call(this._shortMonthsParse, llc); + if (ii !== -1) { + return ii; + } + ii = indexOf.call(this._longMonthsParse, llc); + return ii !== -1 ? ii : null; + } else { + ii = indexOf.call(this._longMonthsParse, llc); + if (ii !== -1) { + return ii; + } + ii = indexOf.call(this._shortMonthsParse, llc); + return ii !== -1 ? ii : null; + } + } + } + + function localeMonthsParse(monthName, format, strict) { + var i, mom, regex; + + if (this._monthsParseExact) { + return handleStrictParse.call(this, monthName, format, strict); + } + + if (!this._monthsParse) { + this._monthsParse = []; + this._longMonthsParse = []; + this._shortMonthsParse = []; + } + + // TODO: add sorting + // Sorting makes sure if one month (or abbr) is a prefix of another + // see sorting in computeMonthsParse + for (i = 0; i < 12; i++) { + // make the regex if we don't have it already + mom = createUTC([2000, i]); + if (strict && !this._longMonthsParse[i]) { + this._longMonthsParse[i] = new RegExp( + '^' + this.months(mom, '').replace('.', '') + '$', + 'i' + ); + this._shortMonthsParse[i] = new RegExp( + '^' + this.monthsShort(mom, '').replace('.', '') + '$', + 'i' + ); + } + if (!strict && !this._monthsParse[i]) { + regex = + '^' + this.months(mom, '') + '|^' + this.monthsShort(mom, ''); + this._monthsParse[i] = new RegExp(regex.replace('.', ''), 'i'); + } + // test the regex + if ( + strict && + format === 'MMMM' && + this._longMonthsParse[i].test(monthName) + ) { + return i; + } else if ( + strict && + format === 'MMM' && + this._shortMonthsParse[i].test(monthName) + ) { + return i; + } else if (!strict && this._monthsParse[i].test(monthName)) { + return i; + } + } + } + + // MOMENTS + + function setMonth(mom, value) { + if (!mom.isValid()) { + // No op + return mom; + } + + if (typeof value === 'string') { + if (/^\d+$/.test(value)) { + value = toInt(value); + } else { + value = mom.localeData().monthsParse(value); + // TODO: Another silent failure? + if (!isNumber(value)) { + return mom; + } + } + } + + var month = value, + date = mom.date(); + + date = date < 29 ? date : Math.min(date, daysInMonth(mom.year(), month)); + void (mom._isUTC + ? mom._d.setUTCMonth(month, date) + : mom._d.setMonth(month, date)); + return mom; + } + + function getSetMonth(value) { + if (value != null) { + setMonth(this, value); + hooks.updateOffset(this, true); + return this; + } else { + return get(this, 'Month'); + } + } + + function getDaysInMonth() { + return daysInMonth(this.year(), this.month()); + } + + function monthsShortRegex(isStrict) { + if (this._monthsParseExact) { + if (!hasOwnProp(this, '_monthsRegex')) { + computeMonthsParse.call(this); + } + if (isStrict) { + return this._monthsShortStrictRegex; + } else { + return this._monthsShortRegex; + } + } else { + if (!hasOwnProp(this, '_monthsShortRegex')) { + this._monthsShortRegex = defaultMonthsShortRegex; + } + return this._monthsShortStrictRegex && isStrict + ? this._monthsShortStrictRegex + : this._monthsShortRegex; + } + } + + function monthsRegex(isStrict) { + if (this._monthsParseExact) { + if (!hasOwnProp(this, '_monthsRegex')) { + computeMonthsParse.call(this); + } + if (isStrict) { + return this._monthsStrictRegex; + } else { + return this._monthsRegex; + } + } else { + if (!hasOwnProp(this, '_monthsRegex')) { + this._monthsRegex = defaultMonthsRegex; + } + return this._monthsStrictRegex && isStrict + ? this._monthsStrictRegex + : this._monthsRegex; + } + } + + function computeMonthsParse() { + function cmpLenRev(a, b) { + return b.length - a.length; + } + + var shortPieces = [], + longPieces = [], + mixedPieces = [], + i, + mom, + shortP, + longP; + for (i = 0; i < 12; i++) { + // make the regex if we don't have it already + mom = createUTC([2000, i]); + shortP = regexEscape(this.monthsShort(mom, '')); + longP = regexEscape(this.months(mom, '')); + shortPieces.push(shortP); + longPieces.push(longP); + mixedPieces.push(longP); + mixedPieces.push(shortP); + } + // Sorting makes sure if one month (or abbr) is a prefix of another it + // will match the longer piece. + shortPieces.sort(cmpLenRev); + longPieces.sort(cmpLenRev); + mixedPieces.sort(cmpLenRev); + + this._monthsRegex = new RegExp('^(' + mixedPieces.join('|') + ')', 'i'); + this._monthsShortRegex = this._monthsRegex; + this._monthsStrictRegex = new RegExp( + '^(' + longPieces.join('|') + ')', + 'i' + ); + this._monthsShortStrictRegex = new RegExp( + '^(' + shortPieces.join('|') + ')', + 'i' + ); + } + + function createDate(y, m, d, h, M, s, ms) { + // can't just apply() to create a date: + // https://stackoverflow.com/q/181348 + var date; + // the date constructor remaps years 0-99 to 1900-1999 + if (y < 100 && y >= 0) { + // preserve leap years using a full 400 year cycle, then reset + date = new Date(y + 400, m, d, h, M, s, ms); + if (isFinite(date.getFullYear())) { + date.setFullYear(y); + } + } else { + date = new Date(y, m, d, h, M, s, ms); + } + + return date; + } + + function createUTCDate(y) { + var date, args; + // the Date.UTC function remaps years 0-99 to 1900-1999 + if (y < 100 && y >= 0) { + args = Array.prototype.slice.call(arguments); + // preserve leap years using a full 400 year cycle, then reset + args[0] = y + 400; + date = new Date(Date.UTC.apply(null, args)); + if (isFinite(date.getUTCFullYear())) { + date.setUTCFullYear(y); + } + } else { + date = new Date(Date.UTC.apply(null, arguments)); + } + + return date; + } + + // start-of-first-week - start-of-year + function firstWeekOffset(year, dow, doy) { + var // first-week day -- which january is always in the first week (4 for iso, 1 for other) + fwd = 7 + dow - doy, + // first-week day local weekday -- which local weekday is fwd + fwdlw = (7 + createUTCDate(year, 0, fwd).getUTCDay() - dow) % 7; + + return -fwdlw + fwd - 1; + } + + // https://en.wikipedia.org/wiki/ISO_week_date#Calculating_a_date_given_the_year.2C_week_number_and_weekday + function dayOfYearFromWeeks(year, week, weekday, dow, doy) { + var localWeekday = (7 + weekday - dow) % 7, + weekOffset = firstWeekOffset(year, dow, doy), + dayOfYear = 1 + 7 * (week - 1) + localWeekday + weekOffset, + resYear, + resDayOfYear; + + if (dayOfYear <= 0) { + resYear = year - 1; + resDayOfYear = daysInYear(resYear) + dayOfYear; + } else if (dayOfYear > daysInYear(year)) { + resYear = year + 1; + resDayOfYear = dayOfYear - daysInYear(year); + } else { + resYear = year; + resDayOfYear = dayOfYear; + } + + return { + year: resYear, + dayOfYear: resDayOfYear, + }; + } + + function weekOfYear(mom, dow, doy) { + var weekOffset = firstWeekOffset(mom.year(), dow, doy), + week = Math.floor((mom.dayOfYear() - weekOffset - 1) / 7) + 1, + resWeek, + resYear; + + if (week < 1) { + resYear = mom.year() - 1; + resWeek = week + weeksInYear(resYear, dow, doy); + } else if (week > weeksInYear(mom.year(), dow, doy)) { + resWeek = week - weeksInYear(mom.year(), dow, doy); + resYear = mom.year() + 1; + } else { + resYear = mom.year(); + resWeek = week; + } + + return { + week: resWeek, + year: resYear, + }; + } + + function weeksInYear(year, dow, doy) { + var weekOffset = firstWeekOffset(year, dow, doy), + weekOffsetNext = firstWeekOffset(year + 1, dow, doy); + return (daysInYear(year) - weekOffset + weekOffsetNext) / 7; + } + + // FORMATTING + + addFormatToken('w', ['ww', 2], 'wo', 'week'); + addFormatToken('W', ['WW', 2], 'Wo', 'isoWeek'); + + // PARSING + + addRegexToken('w', match1to2, match1to2NoLeadingZero); + addRegexToken('ww', match1to2, match2); + addRegexToken('W', match1to2, match1to2NoLeadingZero); + addRegexToken('WW', match1to2, match2); + + addWeekParseToken( + ['w', 'ww', 'W', 'WW'], + function (input, week, config, token) { + week[token.substr(0, 1)] = toInt(input); + } + ); + + // HELPERS + + // LOCALES + + function localeWeek(mom) { + return weekOfYear(mom, this._week.dow, this._week.doy).week; + } + + var defaultLocaleWeek = { + dow: 0, // Sunday is the first day of the week. + doy: 6, // The week that contains Jan 6th is the first week of the year. + }; + + function localeFirstDayOfWeek() { + return this._week.dow; + } + + function localeFirstDayOfYear() { + return this._week.doy; + } + + // MOMENTS + + function getSetWeek(input) { + var week = this.localeData().week(this); + return input == null ? week : this.add((input - week) * 7, 'd'); + } + + function getSetISOWeek(input) { + var week = weekOfYear(this, 1, 4).week; + return input == null ? week : this.add((input - week) * 7, 'd'); + } + + // FORMATTING + + addFormatToken('d', 0, 'do', 'day'); + + addFormatToken('dd', 0, 0, function (format) { + return this.localeData().weekdaysMin(this, format); + }); + + addFormatToken('ddd', 0, 0, function (format) { + return this.localeData().weekdaysShort(this, format); + }); + + addFormatToken('dddd', 0, 0, function (format) { + return this.localeData().weekdays(this, format); + }); + + addFormatToken('e', 0, 0, 'weekday'); + addFormatToken('E', 0, 0, 'isoWeekday'); + + // PARSING + + addRegexToken('d', match1to2); + addRegexToken('e', match1to2); + addRegexToken('E', match1to2); + addRegexToken('dd', function (isStrict, locale) { + return locale.weekdaysMinRegex(isStrict); + }); + addRegexToken('ddd', function (isStrict, locale) { + return locale.weekdaysShortRegex(isStrict); + }); + addRegexToken('dddd', function (isStrict, locale) { + return locale.weekdaysRegex(isStrict); + }); + + addWeekParseToken(['dd', 'ddd', 'dddd'], function (input, week, config, token) { + var weekday = config._locale.weekdaysParse(input, token, config._strict); + // if we didn't get a weekday name, mark the date as invalid + if (weekday != null) { + week.d = weekday; + } else { + getParsingFlags(config).invalidWeekday = input; + } + }); + + addWeekParseToken(['d', 'e', 'E'], function (input, week, config, token) { + week[token] = toInt(input); + }); + + // HELPERS + + function parseWeekday(input, locale) { + if (typeof input !== 'string') { + return input; + } + + if (!isNaN(input)) { + return parseInt(input, 10); + } + + input = locale.weekdaysParse(input); + if (typeof input === 'number') { + return input; + } + + return null; + } + + function parseIsoWeekday(input, locale) { + if (typeof input === 'string') { + return locale.weekdaysParse(input) % 7 || 7; + } + return isNaN(input) ? null : input; + } + + // LOCALES + function shiftWeekdays(ws, n) { + return ws.slice(n, 7).concat(ws.slice(0, n)); + } + + var defaultLocaleWeekdays = + 'Sunday_Monday_Tuesday_Wednesday_Thursday_Friday_Saturday'.split('_'), + defaultLocaleWeekdaysShort = 'Sun_Mon_Tue_Wed_Thu_Fri_Sat'.split('_'), + defaultLocaleWeekdaysMin = 'Su_Mo_Tu_We_Th_Fr_Sa'.split('_'), + defaultWeekdaysRegex = matchWord, + defaultWeekdaysShortRegex = matchWord, + defaultWeekdaysMinRegex = matchWord; + + function localeWeekdays(m, format) { + var weekdays = isArray(this._weekdays) + ? this._weekdays + : this._weekdays[ + m && m !== true && this._weekdays.isFormat.test(format) + ? 'format' + : 'standalone' + ]; + return m === true + ? shiftWeekdays(weekdays, this._week.dow) + : m + ? weekdays[m.day()] + : weekdays; + } + + function localeWeekdaysShort(m) { + return m === true + ? shiftWeekdays(this._weekdaysShort, this._week.dow) + : m + ? this._weekdaysShort[m.day()] + : this._weekdaysShort; + } + + function localeWeekdaysMin(m) { + return m === true + ? shiftWeekdays(this._weekdaysMin, this._week.dow) + : m + ? this._weekdaysMin[m.day()] + : this._weekdaysMin; + } + + function handleStrictParse$1(weekdayName, format, strict) { + var i, + ii, + mom, + llc = weekdayName.toLocaleLowerCase(); + if (!this._weekdaysParse) { + this._weekdaysParse = []; + this._shortWeekdaysParse = []; + this._minWeekdaysParse = []; + + for (i = 0; i < 7; ++i) { + mom = createUTC([2000, 1]).day(i); + this._minWeekdaysParse[i] = this.weekdaysMin( + mom, + '' + ).toLocaleLowerCase(); + this._shortWeekdaysParse[i] = this.weekdaysShort( + mom, + '' + ).toLocaleLowerCase(); + this._weekdaysParse[i] = this.weekdays(mom, '').toLocaleLowerCase(); + } + } + + if (strict) { + if (format === 'dddd') { + ii = indexOf.call(this._weekdaysParse, llc); + return ii !== -1 ? ii : null; + } else if (format === 'ddd') { + ii = indexOf.call(this._shortWeekdaysParse, llc); + return ii !== -1 ? ii : null; + } else { + ii = indexOf.call(this._minWeekdaysParse, llc); + return ii !== -1 ? ii : null; + } + } else { + if (format === 'dddd') { + ii = indexOf.call(this._weekdaysParse, llc); + if (ii !== -1) { + return ii; + } + ii = indexOf.call(this._shortWeekdaysParse, llc); + if (ii !== -1) { + return ii; + } + ii = indexOf.call(this._minWeekdaysParse, llc); + return ii !== -1 ? ii : null; + } else if (format === 'ddd') { + ii = indexOf.call(this._shortWeekdaysParse, llc); + if (ii !== -1) { + return ii; + } + ii = indexOf.call(this._weekdaysParse, llc); + if (ii !== -1) { + return ii; + } + ii = indexOf.call(this._minWeekdaysParse, llc); + return ii !== -1 ? ii : null; + } else { + ii = indexOf.call(this._minWeekdaysParse, llc); + if (ii !== -1) { + return ii; + } + ii = indexOf.call(this._weekdaysParse, llc); + if (ii !== -1) { + return ii; + } + ii = indexOf.call(this._shortWeekdaysParse, llc); + return ii !== -1 ? ii : null; + } + } + } + + function localeWeekdaysParse(weekdayName, format, strict) { + var i, mom, regex; + + if (this._weekdaysParseExact) { + return handleStrictParse$1.call(this, weekdayName, format, strict); + } + + if (!this._weekdaysParse) { + this._weekdaysParse = []; + this._minWeekdaysParse = []; + this._shortWeekdaysParse = []; + this._fullWeekdaysParse = []; + } + + for (i = 0; i < 7; i++) { + // make the regex if we don't have it already + + mom = createUTC([2000, 1]).day(i); + if (strict && !this._fullWeekdaysParse[i]) { + this._fullWeekdaysParse[i] = new RegExp( + '^' + this.weekdays(mom, '').replace('.', '\\.?') + '$', + 'i' + ); + this._shortWeekdaysParse[i] = new RegExp( + '^' + this.weekdaysShort(mom, '').replace('.', '\\.?') + '$', + 'i' + ); + this._minWeekdaysParse[i] = new RegExp( + '^' + this.weekdaysMin(mom, '').replace('.', '\\.?') + '$', + 'i' + ); + } + if (!this._weekdaysParse[i]) { + regex = + '^' + + this.weekdays(mom, '') + + '|^' + + this.weekdaysShort(mom, '') + + '|^' + + this.weekdaysMin(mom, ''); + this._weekdaysParse[i] = new RegExp(regex.replace('.', ''), 'i'); + } + // test the regex + if ( + strict && + format === 'dddd' && + this._fullWeekdaysParse[i].test(weekdayName) + ) { + return i; + } else if ( + strict && + format === 'ddd' && + this._shortWeekdaysParse[i].test(weekdayName) + ) { + return i; + } else if ( + strict && + format === 'dd' && + this._minWeekdaysParse[i].test(weekdayName) + ) { + return i; + } else if (!strict && this._weekdaysParse[i].test(weekdayName)) { + return i; + } + } + } + + // MOMENTS + + function getSetDayOfWeek(input) { + if (!this.isValid()) { + return input != null ? this : NaN; + } + + var day = get(this, 'Day'); + if (input != null) { + input = parseWeekday(input, this.localeData()); + return this.add(input - day, 'd'); + } else { + return day; + } + } + + function getSetLocaleDayOfWeek(input) { + if (!this.isValid()) { + return input != null ? this : NaN; + } + var weekday = (this.day() + 7 - this.localeData()._week.dow) % 7; + return input == null ? weekday : this.add(input - weekday, 'd'); + } + + function getSetISODayOfWeek(input) { + if (!this.isValid()) { + return input != null ? this : NaN; + } + + // behaves the same as moment#day except + // as a getter, returns 7 instead of 0 (1-7 range instead of 0-6) + // as a setter, sunday should belong to the previous week. + + if (input != null) { + var weekday = parseIsoWeekday(input, this.localeData()); + return this.day(this.day() % 7 ? weekday : weekday - 7); + } else { + return this.day() || 7; + } + } + + function weekdaysRegex(isStrict) { + if (this._weekdaysParseExact) { + if (!hasOwnProp(this, '_weekdaysRegex')) { + computeWeekdaysParse.call(this); + } + if (isStrict) { + return this._weekdaysStrictRegex; + } else { + return this._weekdaysRegex; + } + } else { + if (!hasOwnProp(this, '_weekdaysRegex')) { + this._weekdaysRegex = defaultWeekdaysRegex; + } + return this._weekdaysStrictRegex && isStrict + ? this._weekdaysStrictRegex + : this._weekdaysRegex; + } + } + + function weekdaysShortRegex(isStrict) { + if (this._weekdaysParseExact) { + if (!hasOwnProp(this, '_weekdaysRegex')) { + computeWeekdaysParse.call(this); + } + if (isStrict) { + return this._weekdaysShortStrictRegex; + } else { + return this._weekdaysShortRegex; + } + } else { + if (!hasOwnProp(this, '_weekdaysShortRegex')) { + this._weekdaysShortRegex = defaultWeekdaysShortRegex; + } + return this._weekdaysShortStrictRegex && isStrict + ? this._weekdaysShortStrictRegex + : this._weekdaysShortRegex; + } + } + + function weekdaysMinRegex(isStrict) { + if (this._weekdaysParseExact) { + if (!hasOwnProp(this, '_weekdaysRegex')) { + computeWeekdaysParse.call(this); + } + if (isStrict) { + return this._weekdaysMinStrictRegex; + } else { + return this._weekdaysMinRegex; + } + } else { + if (!hasOwnProp(this, '_weekdaysMinRegex')) { + this._weekdaysMinRegex = defaultWeekdaysMinRegex; + } + return this._weekdaysMinStrictRegex && isStrict + ? this._weekdaysMinStrictRegex + : this._weekdaysMinRegex; + } + } + + function computeWeekdaysParse() { + function cmpLenRev(a, b) { + return b.length - a.length; + } + + var minPieces = [], + shortPieces = [], + longPieces = [], + mixedPieces = [], + i, + mom, + minp, + shortp, + longp; + for (i = 0; i < 7; i++) { + // make the regex if we don't have it already + mom = createUTC([2000, 1]).day(i); + minp = regexEscape(this.weekdaysMin(mom, '')); + shortp = regexEscape(this.weekdaysShort(mom, '')); + longp = regexEscape(this.weekdays(mom, '')); + minPieces.push(minp); + shortPieces.push(shortp); + longPieces.push(longp); + mixedPieces.push(minp); + mixedPieces.push(shortp); + mixedPieces.push(longp); + } + // Sorting makes sure if one weekday (or abbr) is a prefix of another it + // will match the longer piece. + minPieces.sort(cmpLenRev); + shortPieces.sort(cmpLenRev); + longPieces.sort(cmpLenRev); + mixedPieces.sort(cmpLenRev); + + this._weekdaysRegex = new RegExp('^(' + mixedPieces.join('|') + ')', 'i'); + this._weekdaysShortRegex = this._weekdaysRegex; + this._weekdaysMinRegex = this._weekdaysRegex; + + this._weekdaysStrictRegex = new RegExp( + '^(' + longPieces.join('|') + ')', + 'i' + ); + this._weekdaysShortStrictRegex = new RegExp( + '^(' + shortPieces.join('|') + ')', + 'i' + ); + this._weekdaysMinStrictRegex = new RegExp( + '^(' + minPieces.join('|') + ')', + 'i' + ); + } + + // FORMATTING + + function hFormat() { + return this.hours() % 12 || 12; + } + + function kFormat() { + return this.hours() || 24; + } + + addFormatToken('H', ['HH', 2], 0, 'hour'); + addFormatToken('h', ['hh', 2], 0, hFormat); + addFormatToken('k', ['kk', 2], 0, kFormat); + + addFormatToken('hmm', 0, 0, function () { + return '' + hFormat.apply(this) + zeroFill(this.minutes(), 2); + }); + + addFormatToken('hmmss', 0, 0, function () { + return ( + '' + + hFormat.apply(this) + + zeroFill(this.minutes(), 2) + + zeroFill(this.seconds(), 2) + ); + }); + + addFormatToken('Hmm', 0, 0, function () { + return '' + this.hours() + zeroFill(this.minutes(), 2); + }); + + addFormatToken('Hmmss', 0, 0, function () { + return ( + '' + + this.hours() + + zeroFill(this.minutes(), 2) + + zeroFill(this.seconds(), 2) + ); + }); + + function meridiem(token, lowercase) { + addFormatToken(token, 0, 0, function () { + return this.localeData().meridiem( + this.hours(), + this.minutes(), + lowercase + ); + }); + } + + meridiem('a', true); + meridiem('A', false); + + // PARSING + + function matchMeridiem(isStrict, locale) { + return locale._meridiemParse; + } + + addRegexToken('a', matchMeridiem); + addRegexToken('A', matchMeridiem); + addRegexToken('H', match1to2, match1to2HasZero); + addRegexToken('h', match1to2, match1to2NoLeadingZero); + addRegexToken('k', match1to2, match1to2NoLeadingZero); + addRegexToken('HH', match1to2, match2); + addRegexToken('hh', match1to2, match2); + addRegexToken('kk', match1to2, match2); + + addRegexToken('hmm', match3to4); + addRegexToken('hmmss', match5to6); + addRegexToken('Hmm', match3to4); + addRegexToken('Hmmss', match5to6); + + addParseToken(['H', 'HH'], HOUR); + addParseToken(['k', 'kk'], function (input, array, config) { + var kInput = toInt(input); + array[HOUR] = kInput === 24 ? 0 : kInput; + }); + addParseToken(['a', 'A'], function (input, array, config) { + config._isPm = config._locale.isPM(input); + config._meridiem = input; + }); + addParseToken(['h', 'hh'], function (input, array, config) { + array[HOUR] = toInt(input); + getParsingFlags(config).bigHour = true; + }); + addParseToken('hmm', function (input, array, config) { + var pos = input.length - 2; + array[HOUR] = toInt(input.substr(0, pos)); + array[MINUTE] = toInt(input.substr(pos)); + getParsingFlags(config).bigHour = true; + }); + addParseToken('hmmss', function (input, array, config) { + var pos1 = input.length - 4, + pos2 = input.length - 2; + array[HOUR] = toInt(input.substr(0, pos1)); + array[MINUTE] = toInt(input.substr(pos1, 2)); + array[SECOND] = toInt(input.substr(pos2)); + getParsingFlags(config).bigHour = true; + }); + addParseToken('Hmm', function (input, array, config) { + var pos = input.length - 2; + array[HOUR] = toInt(input.substr(0, pos)); + array[MINUTE] = toInt(input.substr(pos)); + }); + addParseToken('Hmmss', function (input, array, config) { + var pos1 = input.length - 4, + pos2 = input.length - 2; + array[HOUR] = toInt(input.substr(0, pos1)); + array[MINUTE] = toInt(input.substr(pos1, 2)); + array[SECOND] = toInt(input.substr(pos2)); + }); + + // LOCALES + + function localeIsPM(input) { + // IE8 Quirks Mode & IE7 Standards Mode do not allow accessing strings like arrays + // Using charAt should be more compatible. + return (input + '').toLowerCase().charAt(0) === 'p'; + } + + var defaultLocaleMeridiemParse = /[ap]\.?m?\.?/i, + // Setting the hour should keep the time, because the user explicitly + // specified which hour they want. So trying to maintain the same hour (in + // a new timezone) makes sense. Adding/subtracting hours does not follow + // this rule. + getSetHour = makeGetSet('Hours', true); + + function localeMeridiem(hours, minutes, isLower) { + if (hours > 11) { + return isLower ? 'pm' : 'PM'; + } else { + return isLower ? 'am' : 'AM'; + } + } + + var baseConfig = { + calendar: defaultCalendar, + longDateFormat: defaultLongDateFormat, + invalidDate: defaultInvalidDate, + ordinal: defaultOrdinal, + dayOfMonthOrdinalParse: defaultDayOfMonthOrdinalParse, + relativeTime: defaultRelativeTime, + + months: defaultLocaleMonths, + monthsShort: defaultLocaleMonthsShort, + + week: defaultLocaleWeek, + + weekdays: defaultLocaleWeekdays, + weekdaysMin: defaultLocaleWeekdaysMin, + weekdaysShort: defaultLocaleWeekdaysShort, + + meridiemParse: defaultLocaleMeridiemParse, + }; + + // internal storage for locale config files + var locales = {}, + localeFamilies = {}, + globalLocale; + + function commonPrefix(arr1, arr2) { + var i, + minl = Math.min(arr1.length, arr2.length); + for (i = 0; i < minl; i += 1) { + if (arr1[i] !== arr2[i]) { + return i; + } + } + return minl; + } + + function normalizeLocale(key) { + return key ? key.toLowerCase().replace('_', '-') : key; + } + + // pick the locale from the array + // try ['en-au', 'en-gb'] as 'en-au', 'en-gb', 'en', as in move through the list trying each + // substring from most specific to least, but move to the next array item if it's a more specific variant than the current root + function chooseLocale(names) { + var i = 0, + j, + next, + locale, + split; + + while (i < names.length) { + split = normalizeLocale(names[i]).split('-'); + j = split.length; + next = normalizeLocale(names[i + 1]); + next = next ? next.split('-') : null; + while (j > 0) { + locale = loadLocale(split.slice(0, j).join('-')); + if (locale) { + return locale; + } + if ( + next && + next.length >= j && + commonPrefix(split, next) >= j - 1 + ) { + //the next array item is better than a shallower substring of this one + break; + } + j--; + } + i++; + } + return globalLocale; + } + + function isLocaleNameSane(name) { + // Prevent names that look like filesystem paths, i.e contain '/' or '\' + // Ensure name is available and function returns boolean + return !!(name && name.match('^[^/\\\\]*$')); + } + + function loadLocale(name) { + var oldLocale = null, + aliasedRequire; + // TODO: Find a better way to register and load all the locales in Node + if ( + locales[name] === undefined && + typeof module !== 'undefined' && + module && + module.exports && + isLocaleNameSane(name) + ) { + try { + oldLocale = globalLocale._abbr; + aliasedRequire = require; + aliasedRequire('./locale/' + name); + getSetGlobalLocale(oldLocale); + } catch (e) { + // mark as not found to avoid repeating expensive file require call causing high CPU + // when trying to find en-US, en_US, en-us for every format call + locales[name] = null; // null means not found + } + } + return locales[name]; + } + + // This function will load locale and then set the global locale. If + // no arguments are passed in, it will simply return the current global + // locale key. + function getSetGlobalLocale(key, values) { + var data; + if (key) { + if (isUndefined(values)) { + data = getLocale(key); + } else { + data = defineLocale(key, values); + } + + if (data) { + // moment.duration._locale = moment._locale = data; + globalLocale = data; + } else { + if (typeof console !== 'undefined' && console.warn) { + //warn user if arguments are passed but the locale could not be set + console.warn( + 'Locale ' + key + ' not found. Did you forget to load it?' + ); + } + } + } + + return globalLocale._abbr; + } + + function defineLocale(name, config) { + if (config !== null) { + var locale, + parentConfig = baseConfig; + config.abbr = name; + if (locales[name] != null) { + deprecateSimple( + 'defineLocaleOverride', + 'use moment.updateLocale(localeName, config) to change ' + + 'an existing locale. moment.defineLocale(localeName, ' + + 'config) should only be used for creating a new locale ' + + 'See http://momentjs.com/guides/#/warnings/define-locale/ for more info.' + ); + parentConfig = locales[name]._config; + } else if (config.parentLocale != null) { + if (locales[config.parentLocale] != null) { + parentConfig = locales[config.parentLocale]._config; + } else { + locale = loadLocale(config.parentLocale); + if (locale != null) { + parentConfig = locale._config; + } else { + if (!localeFamilies[config.parentLocale]) { + localeFamilies[config.parentLocale] = []; + } + localeFamilies[config.parentLocale].push({ + name: name, + config: config, + }); + return null; + } + } + } + locales[name] = new Locale(mergeConfigs(parentConfig, config)); + + if (localeFamilies[name]) { + localeFamilies[name].forEach(function (x) { + defineLocale(x.name, x.config); + }); + } + + // backwards compat for now: also set the locale + // make sure we set the locale AFTER all child locales have been + // created, so we won't end up with the child locale set. + getSetGlobalLocale(name); + + return locales[name]; + } else { + // useful for testing + delete locales[name]; + return null; + } + } + + function updateLocale(name, config) { + if (config != null) { + var locale, + tmpLocale, + parentConfig = baseConfig; + + if (locales[name] != null && locales[name].parentLocale != null) { + // Update existing child locale in-place to avoid memory-leaks + locales[name].set(mergeConfigs(locales[name]._config, config)); + } else { + // MERGE + tmpLocale = loadLocale(name); + if (tmpLocale != null) { + parentConfig = tmpLocale._config; + } + config = mergeConfigs(parentConfig, config); + if (tmpLocale == null) { + // updateLocale is called for creating a new locale + // Set abbr so it will have a name (getters return + // undefined otherwise). + config.abbr = name; + } + locale = new Locale(config); + locale.parentLocale = locales[name]; + locales[name] = locale; + } + + // backwards compat for now: also set the locale + getSetGlobalLocale(name); + } else { + // pass null for config to unupdate, useful for tests + if (locales[name] != null) { + if (locales[name].parentLocale != null) { + locales[name] = locales[name].parentLocale; + if (name === getSetGlobalLocale()) { + getSetGlobalLocale(name); + } + } else if (locales[name] != null) { + delete locales[name]; + } + } + } + return locales[name]; + } + + // returns locale data + function getLocale(key) { + var locale; + + if (key && key._locale && key._locale._abbr) { + key = key._locale._abbr; + } + + if (!key) { + return globalLocale; + } + + if (!isArray(key)) { + //short-circuit everything else + locale = loadLocale(key); + if (locale) { + return locale; + } + key = [key]; + } + + return chooseLocale(key); + } + + function listLocales() { + return keys(locales); + } + + function checkOverflow(m) { + var overflow, + a = m._a; + + if (a && getParsingFlags(m).overflow === -2) { + overflow = + a[MONTH] < 0 || a[MONTH] > 11 + ? MONTH + : a[DATE] < 1 || a[DATE] > daysInMonth(a[YEAR], a[MONTH]) + ? DATE + : a[HOUR] < 0 || + a[HOUR] > 24 || + (a[HOUR] === 24 && + (a[MINUTE] !== 0 || + a[SECOND] !== 0 || + a[MILLISECOND] !== 0)) + ? HOUR + : a[MINUTE] < 0 || a[MINUTE] > 59 + ? MINUTE + : a[SECOND] < 0 || a[SECOND] > 59 + ? SECOND + : a[MILLISECOND] < 0 || a[MILLISECOND] > 999 + ? MILLISECOND + : -1; + + if ( + getParsingFlags(m)._overflowDayOfYear && + (overflow < YEAR || overflow > DATE) + ) { + overflow = DATE; + } + if (getParsingFlags(m)._overflowWeeks && overflow === -1) { + overflow = WEEK; + } + if (getParsingFlags(m)._overflowWeekday && overflow === -1) { + overflow = WEEKDAY; + } + + getParsingFlags(m).overflow = overflow; + } + + return m; + } + + // iso 8601 regex + // 0000-00-00 0000-W00 or 0000-W00-0 + T + 00 or 00:00 or 00:00:00 or 00:00:00.000 + +00:00 or +0000 or +00) + var extendedIsoRegex = + /^\s*((?:[+-]\d{6}|\d{4})-(?:\d\d-\d\d|W\d\d-\d|W\d\d|\d\d\d|\d\d))(?:(T| )(\d\d(?::\d\d(?::\d\d(?:[.,]\d+)?)?)?)([+-]\d\d(?::?\d\d)?|\s*Z)?)?$/, + basicIsoRegex = + /^\s*((?:[+-]\d{6}|\d{4})(?:\d\d\d\d|W\d\d\d|W\d\d|\d\d\d|\d\d|))(?:(T| )(\d\d(?:\d\d(?:\d\d(?:[.,]\d+)?)?)?)([+-]\d\d(?::?\d\d)?|\s*Z)?)?$/, + tzRegex = /Z|[+-]\d\d(?::?\d\d)?/, + isoDates = [ + ['YYYYYY-MM-DD', /[+-]\d{6}-\d\d-\d\d/], + ['YYYY-MM-DD', /\d{4}-\d\d-\d\d/], + ['GGGG-[W]WW-E', /\d{4}-W\d\d-\d/], + ['GGGG-[W]WW', /\d{4}-W\d\d/, false], + ['YYYY-DDD', /\d{4}-\d{3}/], + ['YYYY-MM', /\d{4}-\d\d/, false], + ['YYYYYYMMDD', /[+-]\d{10}/], + ['YYYYMMDD', /\d{8}/], + ['GGGG[W]WWE', /\d{4}W\d{3}/], + ['GGGG[W]WW', /\d{4}W\d{2}/, false], + ['YYYYDDD', /\d{7}/], + ['YYYYMM', /\d{6}/, false], + ['YYYY', /\d{4}/, false], + ], + // iso time formats and regexes + isoTimes = [ + ['HH:mm:ss.SSSS', /\d\d:\d\d:\d\d\.\d+/], + ['HH:mm:ss,SSSS', /\d\d:\d\d:\d\d,\d+/], + ['HH:mm:ss', /\d\d:\d\d:\d\d/], + ['HH:mm', /\d\d:\d\d/], + ['HHmmss.SSSS', /\d\d\d\d\d\d\.\d+/], + ['HHmmss,SSSS', /\d\d\d\d\d\d,\d+/], + ['HHmmss', /\d\d\d\d\d\d/], + ['HHmm', /\d\d\d\d/], + ['HH', /\d\d/], + ], + aspNetJsonRegex = /^\/?Date\((-?\d+)/i, + // RFC 2822 regex: For details see https://tools.ietf.org/html/rfc2822#section-3.3 + rfc2822 = + /^(?:(Mon|Tue|Wed|Thu|Fri|Sat|Sun),?\s)?(\d{1,2})\s(Jan|Feb|Mar|Apr|May|Jun|Jul|Aug|Sep|Oct|Nov|Dec)\s(\d{2,4})\s(\d\d):(\d\d)(?::(\d\d))?\s(?:(UT|GMT|[ECMP][SD]T)|([Zz])|([+-]\d{4}))$/, + obsOffsets = { + UT: 0, + GMT: 0, + EDT: -4 * 60, + EST: -5 * 60, + CDT: -5 * 60, + CST: -6 * 60, + MDT: -6 * 60, + MST: -7 * 60, + PDT: -7 * 60, + PST: -8 * 60, + }; + + // date from iso format + function configFromISO(config) { + var i, + l, + string = config._i, + match = extendedIsoRegex.exec(string) || basicIsoRegex.exec(string), + allowTime, + dateFormat, + timeFormat, + tzFormat, + isoDatesLen = isoDates.length, + isoTimesLen = isoTimes.length; + + if (match) { + getParsingFlags(config).iso = true; + for (i = 0, l = isoDatesLen; i < l; i++) { + if (isoDates[i][1].exec(match[1])) { + dateFormat = isoDates[i][0]; + allowTime = isoDates[i][2] !== false; + break; + } + } + if (dateFormat == null) { + config._isValid = false; + return; + } + if (match[3]) { + for (i = 0, l = isoTimesLen; i < l; i++) { + if (isoTimes[i][1].exec(match[3])) { + // match[2] should be 'T' or space + timeFormat = (match[2] || ' ') + isoTimes[i][0]; + break; + } + } + if (timeFormat == null) { + config._isValid = false; + return; + } + } + if (!allowTime && timeFormat != null) { + config._isValid = false; + return; + } + if (match[4]) { + if (tzRegex.exec(match[4])) { + tzFormat = 'Z'; + } else { + config._isValid = false; + return; + } + } + config._f = dateFormat + (timeFormat || '') + (tzFormat || ''); + configFromStringAndFormat(config); + } else { + config._isValid = false; + } + } + + function extractFromRFC2822Strings( + yearStr, + monthStr, + dayStr, + hourStr, + minuteStr, + secondStr + ) { + var result = [ + untruncateYear(yearStr), + defaultLocaleMonthsShort.indexOf(monthStr), + parseInt(dayStr, 10), + parseInt(hourStr, 10), + parseInt(minuteStr, 10), + ]; + + if (secondStr) { + result.push(parseInt(secondStr, 10)); + } + + return result; + } + + function untruncateYear(yearStr) { + var year = parseInt(yearStr, 10); + if (year <= 49) { + return 2000 + year; + } else if (year <= 999) { + return 1900 + year; + } + return year; + } + + function preprocessRFC2822(s) { + // Remove comments and folding whitespace and replace multiple-spaces with a single space + return s + .replace(/\([^()]*\)|[\n\t]/g, ' ') + .replace(/(\s\s+)/g, ' ') + .replace(/^\s\s*/, '') + .replace(/\s\s*$/, ''); + } + + function checkWeekday(weekdayStr, parsedInput, config) { + if (weekdayStr) { + // TODO: Replace the vanilla JS Date object with an independent day-of-week check. + var weekdayProvided = defaultLocaleWeekdaysShort.indexOf(weekdayStr), + weekdayActual = new Date( + parsedInput[0], + parsedInput[1], + parsedInput[2] + ).getDay(); + if (weekdayProvided !== weekdayActual) { + getParsingFlags(config).weekdayMismatch = true; + config._isValid = false; + return false; + } + } + return true; + } + + function calculateOffset(obsOffset, militaryOffset, numOffset) { + if (obsOffset) { + return obsOffsets[obsOffset]; + } else if (militaryOffset) { + // the only allowed military tz is Z + return 0; + } else { + var hm = parseInt(numOffset, 10), + m = hm % 100, + h = (hm - m) / 100; + return h * 60 + m; + } + } + + // date and time from ref 2822 format + function configFromRFC2822(config) { + var match = rfc2822.exec(preprocessRFC2822(config._i)), + parsedArray; + if (match) { + parsedArray = extractFromRFC2822Strings( + match[4], + match[3], + match[2], + match[5], + match[6], + match[7] + ); + if (!checkWeekday(match[1], parsedArray, config)) { + return; + } + + config._a = parsedArray; + config._tzm = calculateOffset(match[8], match[9], match[10]); + + config._d = createUTCDate.apply(null, config._a); + config._d.setUTCMinutes(config._d.getUTCMinutes() - config._tzm); + + getParsingFlags(config).rfc2822 = true; + } else { + config._isValid = false; + } + } + + // date from 1) ASP.NET, 2) ISO, 3) RFC 2822 formats, or 4) optional fallback if parsing isn't strict + function configFromString(config) { + var matched = aspNetJsonRegex.exec(config._i); + if (matched !== null) { + config._d = new Date(+matched[1]); + return; + } + + configFromISO(config); + if (config._isValid === false) { + delete config._isValid; + } else { + return; + } + + configFromRFC2822(config); + if (config._isValid === false) { + delete config._isValid; + } else { + return; + } + + if (config._strict) { + config._isValid = false; + } else { + // Final attempt, use Input Fallback + hooks.createFromInputFallback(config); + } + } + + hooks.createFromInputFallback = deprecate( + 'value provided is not in a recognized RFC2822 or ISO format. moment construction falls back to js Date(), ' + + 'which is not reliable across all browsers and versions. Non RFC2822/ISO date formats are ' + + 'discouraged. Please refer to http://momentjs.com/guides/#/warnings/js-date/ for more info.', + function (config) { + config._d = new Date(config._i + (config._useUTC ? ' UTC' : '')); + } + ); + + // Pick the first defined of two or three arguments. + function defaults(a, b, c) { + if (a != null) { + return a; + } + if (b != null) { + return b; + } + return c; + } + + function currentDateArray(config) { + // hooks is actually the exported moment object + var nowValue = new Date(hooks.now()); + if (config._useUTC) { + return [ + nowValue.getUTCFullYear(), + nowValue.getUTCMonth(), + nowValue.getUTCDate(), + ]; + } + return [nowValue.getFullYear(), nowValue.getMonth(), nowValue.getDate()]; + } + + // convert an array to a date. + // the array should mirror the parameters below + // note: all values past the year are optional and will default to the lowest possible value. + // [year, month, day , hour, minute, second, millisecond] + function configFromArray(config) { + var i, + date, + input = [], + currentDate, + expectedWeekday, + yearToUse; + + if (config._d) { + return; + } + + currentDate = currentDateArray(config); + + //compute day of the year from weeks and weekdays + if (config._w && config._a[DATE] == null && config._a[MONTH] == null) { + dayOfYearFromWeekInfo(config); + } + + //if the day of the year is set, figure out what it is + if (config._dayOfYear != null) { + yearToUse = defaults(config._a[YEAR], currentDate[YEAR]); + + if ( + config._dayOfYear > daysInYear(yearToUse) || + config._dayOfYear === 0 + ) { + getParsingFlags(config)._overflowDayOfYear = true; + } + + date = createUTCDate(yearToUse, 0, config._dayOfYear); + config._a[MONTH] = date.getUTCMonth(); + config._a[DATE] = date.getUTCDate(); + } + + // Default to current date. + // * if no year, month, day of month are given, default to today + // * if day of month is given, default month and year + // * if month is given, default only year + // * if year is given, don't default anything + for (i = 0; i < 3 && config._a[i] == null; ++i) { + config._a[i] = input[i] = currentDate[i]; + } + + // Zero out whatever was not defaulted, including time + for (; i < 7; i++) { + config._a[i] = input[i] = + config._a[i] == null ? (i === 2 ? 1 : 0) : config._a[i]; + } + + // Check for 24:00:00.000 + if ( + config._a[HOUR] === 24 && + config._a[MINUTE] === 0 && + config._a[SECOND] === 0 && + config._a[MILLISECOND] === 0 + ) { + config._nextDay = true; + config._a[HOUR] = 0; + } + + config._d = (config._useUTC ? createUTCDate : createDate).apply( + null, + input + ); + expectedWeekday = config._useUTC + ? config._d.getUTCDay() + : config._d.getDay(); + + // Apply timezone offset from input. The actual utcOffset can be changed + // with parseZone. + if (config._tzm != null) { + config._d.setUTCMinutes(config._d.getUTCMinutes() - config._tzm); + } + + if (config._nextDay) { + config._a[HOUR] = 24; + } + + // check for mismatching day of week + if ( + config._w && + typeof config._w.d !== 'undefined' && + config._w.d !== expectedWeekday + ) { + getParsingFlags(config).weekdayMismatch = true; + } + } + + function dayOfYearFromWeekInfo(config) { + var w, weekYear, week, weekday, dow, doy, temp, weekdayOverflow, curWeek; + + w = config._w; + if (w.GG != null || w.W != null || w.E != null) { + dow = 1; + doy = 4; + + // TODO: We need to take the current isoWeekYear, but that depends on + // how we interpret now (local, utc, fixed offset). So create + // a now version of current config (take local/utc/offset flags, and + // create now). + weekYear = defaults( + w.GG, + config._a[YEAR], + weekOfYear(createLocal(), 1, 4).year + ); + week = defaults(w.W, 1); + weekday = defaults(w.E, 1); + if (weekday < 1 || weekday > 7) { + weekdayOverflow = true; + } + } else { + dow = config._locale._week.dow; + doy = config._locale._week.doy; + + curWeek = weekOfYear(createLocal(), dow, doy); + + weekYear = defaults(w.gg, config._a[YEAR], curWeek.year); + + // Default to current week. + week = defaults(w.w, curWeek.week); + + if (w.d != null) { + // weekday -- low day numbers are considered next week + weekday = w.d; + if (weekday < 0 || weekday > 6) { + weekdayOverflow = true; + } + } else if (w.e != null) { + // local weekday -- counting starts from beginning of week + weekday = w.e + dow; + if (w.e < 0 || w.e > 6) { + weekdayOverflow = true; + } + } else { + // default to beginning of week + weekday = dow; + } + } + if (week < 1 || week > weeksInYear(weekYear, dow, doy)) { + getParsingFlags(config)._overflowWeeks = true; + } else if (weekdayOverflow != null) { + getParsingFlags(config)._overflowWeekday = true; + } else { + temp = dayOfYearFromWeeks(weekYear, week, weekday, dow, doy); + config._a[YEAR] = temp.year; + config._dayOfYear = temp.dayOfYear; + } + } + + // constant that refers to the ISO standard + hooks.ISO_8601 = function () {}; + + // constant that refers to the RFC 2822 form + hooks.RFC_2822 = function () {}; + + // date from string and format string + function configFromStringAndFormat(config) { + // TODO: Move this to another part of the creation flow to prevent circular deps + if (config._f === hooks.ISO_8601) { + configFromISO(config); + return; + } + if (config._f === hooks.RFC_2822) { + configFromRFC2822(config); + return; + } + config._a = []; + getParsingFlags(config).empty = true; + + // This array is used to make a Date, either with `new Date` or `Date.UTC` + var string = '' + config._i, + i, + parsedInput, + tokens, + token, + skipped, + stringLength = string.length, + totalParsedInputLength = 0, + era, + tokenLen; + + tokens = + expandFormat(config._f, config._locale).match(formattingTokens) || []; + tokenLen = tokens.length; + for (i = 0; i < tokenLen; i++) { + token = tokens[i]; + parsedInput = (string.match(getParseRegexForToken(token, config)) || + [])[0]; + if (parsedInput) { + skipped = string.substr(0, string.indexOf(parsedInput)); + if (skipped.length > 0) { + getParsingFlags(config).unusedInput.push(skipped); + } + string = string.slice( + string.indexOf(parsedInput) + parsedInput.length + ); + totalParsedInputLength += parsedInput.length; + } + // don't parse if it's not a known token + if (formatTokenFunctions[token]) { + if (parsedInput) { + getParsingFlags(config).empty = false; + } else { + getParsingFlags(config).unusedTokens.push(token); + } + addTimeToArrayFromToken(token, parsedInput, config); + } else if (config._strict && !parsedInput) { + getParsingFlags(config).unusedTokens.push(token); + } + } + + // add remaining unparsed input length to the string + getParsingFlags(config).charsLeftOver = + stringLength - totalParsedInputLength; + if (string.length > 0) { + getParsingFlags(config).unusedInput.push(string); + } + + // clear _12h flag if hour is <= 12 + if ( + config._a[HOUR] <= 12 && + getParsingFlags(config).bigHour === true && + config._a[HOUR] > 0 + ) { + getParsingFlags(config).bigHour = undefined; + } + + getParsingFlags(config).parsedDateParts = config._a.slice(0); + getParsingFlags(config).meridiem = config._meridiem; + // handle meridiem + config._a[HOUR] = meridiemFixWrap( + config._locale, + config._a[HOUR], + config._meridiem + ); + + // handle era + era = getParsingFlags(config).era; + if (era !== null) { + config._a[YEAR] = config._locale.erasConvertYear(era, config._a[YEAR]); + } + + configFromArray(config); + checkOverflow(config); + } + + function meridiemFixWrap(locale, hour, meridiem) { + var isPm; + + if (meridiem == null) { + // nothing to do + return hour; + } + if (locale.meridiemHour != null) { + return locale.meridiemHour(hour, meridiem); + } else if (locale.isPM != null) { + // Fallback + isPm = locale.isPM(meridiem); + if (isPm && hour < 12) { + hour += 12; + } + if (!isPm && hour === 12) { + hour = 0; + } + return hour; + } else { + // this is not supposed to happen + return hour; + } + } + + // date from string and array of format strings + function configFromStringAndArray(config) { + var tempConfig, + bestMoment, + scoreToBeat, + i, + currentScore, + validFormatFound, + bestFormatIsValid = false, + configfLen = config._f.length; + + if (configfLen === 0) { + getParsingFlags(config).invalidFormat = true; + config._d = new Date(NaN); + return; + } + + for (i = 0; i < configfLen; i++) { + currentScore = 0; + validFormatFound = false; + tempConfig = copyConfig({}, config); + if (config._useUTC != null) { + tempConfig._useUTC = config._useUTC; + } + tempConfig._f = config._f[i]; + configFromStringAndFormat(tempConfig); + + if (isValid(tempConfig)) { + validFormatFound = true; + } + + // if there is any input that was not parsed add a penalty for that format + currentScore += getParsingFlags(tempConfig).charsLeftOver; + + //or tokens + currentScore += getParsingFlags(tempConfig).unusedTokens.length * 10; + + getParsingFlags(tempConfig).score = currentScore; + + if (!bestFormatIsValid) { + if ( + scoreToBeat == null || + currentScore < scoreToBeat || + validFormatFound + ) { + scoreToBeat = currentScore; + bestMoment = tempConfig; + if (validFormatFound) { + bestFormatIsValid = true; + } + } + } else { + if (currentScore < scoreToBeat) { + scoreToBeat = currentScore; + bestMoment = tempConfig; + } + } + } + + extend(config, bestMoment || tempConfig); + } + + function configFromObject(config) { + if (config._d) { + return; + } + + var i = normalizeObjectUnits(config._i), + dayOrDate = i.day === undefined ? i.date : i.day; + config._a = map( + [i.year, i.month, dayOrDate, i.hour, i.minute, i.second, i.millisecond], + function (obj) { + return obj && parseInt(obj, 10); + } + ); + + configFromArray(config); + } + + function createFromConfig(config) { + var res = new Moment(checkOverflow(prepareConfig(config))); + if (res._nextDay) { + // Adding is smart enough around DST + res.add(1, 'd'); + res._nextDay = undefined; + } + + return res; + } + + function prepareConfig(config) { + var input = config._i, + format = config._f; + + config._locale = config._locale || getLocale(config._l); + + if (input === null || (format === undefined && input === '')) { + return createInvalid({ nullInput: true }); + } + + if (typeof input === 'string') { + config._i = input = config._locale.preparse(input); + } + + if (isMoment(input)) { + return new Moment(checkOverflow(input)); + } else if (isDate(input)) { + config._d = input; + } else if (isArray(format)) { + configFromStringAndArray(config); + } else if (format) { + configFromStringAndFormat(config); + } else { + configFromInput(config); + } + + if (!isValid(config)) { + config._d = null; + } + + return config; + } + + function configFromInput(config) { + var input = config._i; + if (isUndefined(input)) { + config._d = new Date(hooks.now()); + } else if (isDate(input)) { + config._d = new Date(input.valueOf()); + } else if (typeof input === 'string') { + configFromString(config); + } else if (isArray(input)) { + config._a = map(input.slice(0), function (obj) { + return parseInt(obj, 10); + }); + configFromArray(config); + } else if (isObject(input)) { + configFromObject(config); + } else if (isNumber(input)) { + // from milliseconds + config._d = new Date(input); + } else { + hooks.createFromInputFallback(config); + } + } + + function createLocalOrUTC(input, format, locale, strict, isUTC) { + var c = {}; + + if (format === true || format === false) { + strict = format; + format = undefined; + } + + if (locale === true || locale === false) { + strict = locale; + locale = undefined; + } + + if ( + (isObject(input) && isObjectEmpty(input)) || + (isArray(input) && input.length === 0) + ) { + input = undefined; + } + // object construction must be done this way. + // https://github.com/moment/moment/issues/1423 + c._isAMomentObject = true; + c._useUTC = c._isUTC = isUTC; + c._l = locale; + c._i = input; + c._f = format; + c._strict = strict; + + return createFromConfig(c); + } + + function createLocal(input, format, locale, strict) { + return createLocalOrUTC(input, format, locale, strict, false); + } + + var prototypeMin = deprecate( + 'moment().min is deprecated, use moment.max instead. http://momentjs.com/guides/#/warnings/min-max/', + function () { + var other = createLocal.apply(null, arguments); + if (this.isValid() && other.isValid()) { + return other < this ? this : other; + } else { + return createInvalid(); + } + } + ), + prototypeMax = deprecate( + 'moment().max is deprecated, use moment.min instead. http://momentjs.com/guides/#/warnings/min-max/', + function () { + var other = createLocal.apply(null, arguments); + if (this.isValid() && other.isValid()) { + return other > this ? this : other; + } else { + return createInvalid(); + } + } + ); + + // Pick a moment m from moments so that m[fn](other) is true for all + // other. This relies on the function fn to be transitive. + // + // moments should either be an array of moment objects or an array, whose + // first element is an array of moment objects. + function pickBy(fn, moments) { + var res, i; + if (moments.length === 1 && isArray(moments[0])) { + moments = moments[0]; + } + if (!moments.length) { + return createLocal(); + } + res = moments[0]; + for (i = 1; i < moments.length; ++i) { + if (!moments[i].isValid() || moments[i][fn](res)) { + res = moments[i]; + } + } + return res; + } + + // TODO: Use [].sort instead? + function min() { + var args = [].slice.call(arguments, 0); + + return pickBy('isBefore', args); + } + + function max() { + var args = [].slice.call(arguments, 0); + + return pickBy('isAfter', args); + } + + var now = function () { + return Date.now ? Date.now() : +new Date(); + }; + + var ordering = [ + 'year', + 'quarter', + 'month', + 'week', + 'day', + 'hour', + 'minute', + 'second', + 'millisecond', + ]; + + function isDurationValid(m) { + var key, + unitHasDecimal = false, + i, + orderLen = ordering.length; + for (key in m) { + if ( + hasOwnProp(m, key) && + !( + indexOf.call(ordering, key) !== -1 && + (m[key] == null || !isNaN(m[key])) + ) + ) { + return false; + } + } + + for (i = 0; i < orderLen; ++i) { + if (m[ordering[i]]) { + if (unitHasDecimal) { + return false; // only allow non-integers for smallest unit + } + if (parseFloat(m[ordering[i]]) !== toInt(m[ordering[i]])) { + unitHasDecimal = true; + } + } + } + + return true; + } + + function isValid$1() { + return this._isValid; + } + + function createInvalid$1() { + return createDuration(NaN); + } + + function Duration(duration) { + var normalizedInput = normalizeObjectUnits(duration), + years = normalizedInput.year || 0, + quarters = normalizedInput.quarter || 0, + months = normalizedInput.month || 0, + weeks = normalizedInput.week || normalizedInput.isoWeek || 0, + days = normalizedInput.day || 0, + hours = normalizedInput.hour || 0, + minutes = normalizedInput.minute || 0, + seconds = normalizedInput.second || 0, + milliseconds = normalizedInput.millisecond || 0; + + this._isValid = isDurationValid(normalizedInput); + + // representation for dateAddRemove + this._milliseconds = + +milliseconds + + seconds * 1e3 + // 1000 + minutes * 6e4 + // 1000 * 60 + hours * 1000 * 60 * 60; //using 1000 * 60 * 60 instead of 36e5 to avoid floating point rounding errors https://github.com/moment/moment/issues/2978 + // Because of dateAddRemove treats 24 hours as different from a + // day when working around DST, we need to store them separately + this._days = +days + weeks * 7; + // It is impossible to translate months into days without knowing + // which months you are are talking about, so we have to store + // it separately. + this._months = +months + quarters * 3 + years * 12; + + this._data = {}; + + this._locale = getLocale(); + + this._bubble(); + } + + function isDuration(obj) { + return obj instanceof Duration; + } + + function absRound(number) { + if (number < 0) { + return Math.round(-1 * number) * -1; + } else { + return Math.round(number); + } + } + + // compare two arrays, return the number of differences + function compareArrays(array1, array2, dontConvert) { + var len = Math.min(array1.length, array2.length), + lengthDiff = Math.abs(array1.length - array2.length), + diffs = 0, + i; + for (i = 0; i < len; i++) { + if ( + (dontConvert && array1[i] !== array2[i]) || + (!dontConvert && toInt(array1[i]) !== toInt(array2[i])) + ) { + diffs++; + } + } + return diffs + lengthDiff; + } + + // FORMATTING + + function offset(token, separator) { + addFormatToken(token, 0, 0, function () { + var offset = this.utcOffset(), + sign = '+'; + if (offset < 0) { + offset = -offset; + sign = '-'; + } + return ( + sign + + zeroFill(~~(offset / 60), 2) + + separator + + zeroFill(~~offset % 60, 2) + ); + }); + } + + offset('Z', ':'); + offset('ZZ', ''); + + // PARSING + + addRegexToken('Z', matchShortOffset); + addRegexToken('ZZ', matchShortOffset); + addParseToken(['Z', 'ZZ'], function (input, array, config) { + config._useUTC = true; + config._tzm = offsetFromString(matchShortOffset, input); + }); + + // HELPERS + + // timezone chunker + // '+10:00' > ['10', '00'] + // '-1530' > ['-15', '30'] + var chunkOffset = /([\+\-]|\d\d)/gi; + + function offsetFromString(matcher, string) { + var matches = (string || '').match(matcher), + chunk, + parts, + minutes; + + if (matches === null) { + return null; + } + + chunk = matches[matches.length - 1] || []; + parts = (chunk + '').match(chunkOffset) || ['-', 0, 0]; + minutes = +(parts[1] * 60) + toInt(parts[2]); + + return minutes === 0 ? 0 : parts[0] === '+' ? minutes : -minutes; + } + + // Return a moment from input, that is local/utc/zone equivalent to model. + function cloneWithOffset(input, model) { + var res, diff; + if (model._isUTC) { + res = model.clone(); + diff = + (isMoment(input) || isDate(input) + ? input.valueOf() + : createLocal(input).valueOf()) - res.valueOf(); + // Use low-level api, because this fn is low-level api. + res._d.setTime(res._d.valueOf() + diff); + hooks.updateOffset(res, false); + return res; + } else { + return createLocal(input).local(); + } + } + + function getDateOffset(m) { + // On Firefox.24 Date#getTimezoneOffset returns a floating point. + // https://github.com/moment/moment/pull/1871 + return -Math.round(m._d.getTimezoneOffset()); + } + + // HOOKS + + // This function will be called whenever a moment is mutated. + // It is intended to keep the offset in sync with the timezone. + hooks.updateOffset = function () {}; + + // MOMENTS + + // keepLocalTime = true means only change the timezone, without + // affecting the local hour. So 5:31:26 +0300 --[utcOffset(2, true)]--> + // 5:31:26 +0200 It is possible that 5:31:26 doesn't exist with offset + // +0200, so we adjust the time as needed, to be valid. + // + // Keeping the time actually adds/subtracts (one hour) + // from the actual represented time. That is why we call updateOffset + // a second time. In case it wants us to change the offset again + // _changeInProgress == true case, then we have to adjust, because + // there is no such time in the given timezone. + function getSetOffset(input, keepLocalTime, keepMinutes) { + var offset = this._offset || 0, + localAdjust; + if (!this.isValid()) { + return input != null ? this : NaN; + } + if (input != null) { + if (typeof input === 'string') { + input = offsetFromString(matchShortOffset, input); + if (input === null) { + return this; + } + } else if (Math.abs(input) < 16 && !keepMinutes) { + input = input * 60; + } + if (!this._isUTC && keepLocalTime) { + localAdjust = getDateOffset(this); + } + this._offset = input; + this._isUTC = true; + if (localAdjust != null) { + this.add(localAdjust, 'm'); + } + if (offset !== input) { + if (!keepLocalTime || this._changeInProgress) { + addSubtract( + this, + createDuration(input - offset, 'm'), + 1, + false + ); + } else if (!this._changeInProgress) { + this._changeInProgress = true; + hooks.updateOffset(this, true); + this._changeInProgress = null; + } + } + return this; + } else { + return this._isUTC ? offset : getDateOffset(this); + } + } + + function getSetZone(input, keepLocalTime) { + if (input != null) { + if (typeof input !== 'string') { + input = -input; + } + + this.utcOffset(input, keepLocalTime); + + return this; + } else { + return -this.utcOffset(); + } + } + + function setOffsetToUTC(keepLocalTime) { + return this.utcOffset(0, keepLocalTime); + } + + function setOffsetToLocal(keepLocalTime) { + if (this._isUTC) { + this.utcOffset(0, keepLocalTime); + this._isUTC = false; + + if (keepLocalTime) { + this.subtract(getDateOffset(this), 'm'); + } + } + return this; + } + + function setOffsetToParsedOffset() { + if (this._tzm != null) { + this.utcOffset(this._tzm, false, true); + } else if (typeof this._i === 'string') { + var tZone = offsetFromString(matchOffset, this._i); + if (tZone != null) { + this.utcOffset(tZone); + } else { + this.utcOffset(0, true); + } + } + return this; + } + + function hasAlignedHourOffset(input) { + if (!this.isValid()) { + return false; + } + input = input ? createLocal(input).utcOffset() : 0; + + return (this.utcOffset() - input) % 60 === 0; + } + + function isDaylightSavingTime() { + return ( + this.utcOffset() > this.clone().month(0).utcOffset() || + this.utcOffset() > this.clone().month(5).utcOffset() + ); + } + + function isDaylightSavingTimeShifted() { + if (!isUndefined(this._isDSTShifted)) { + return this._isDSTShifted; + } + + var c = {}, + other; + + copyConfig(c, this); + c = prepareConfig(c); + + if (c._a) { + other = c._isUTC ? createUTC(c._a) : createLocal(c._a); + this._isDSTShifted = + this.isValid() && compareArrays(c._a, other.toArray()) > 0; + } else { + this._isDSTShifted = false; + } + + return this._isDSTShifted; + } + + function isLocal() { + return this.isValid() ? !this._isUTC : false; + } + + function isUtcOffset() { + return this.isValid() ? this._isUTC : false; + } + + function isUtc() { + return this.isValid() ? this._isUTC && this._offset === 0 : false; + } + + // ASP.NET json date format regex + var aspNetRegex = /^(-|\+)?(?:(\d*)[. ])?(\d+):(\d+)(?::(\d+)(\.\d*)?)?$/, + // from http://docs.closure-library.googlecode.com/git/closure_goog_date_date.js.source.html + // somewhat more in line with 4.4.3.2 2004 spec, but allows decimal anywhere + // and further modified to allow for strings containing both week and day + isoRegex = + /^(-|\+)?P(?:([-+]?[0-9,.]*)Y)?(?:([-+]?[0-9,.]*)M)?(?:([-+]?[0-9,.]*)W)?(?:([-+]?[0-9,.]*)D)?(?:T(?:([-+]?[0-9,.]*)H)?(?:([-+]?[0-9,.]*)M)?(?:([-+]?[0-9,.]*)S)?)?$/; + + function createDuration(input, key) { + var duration = input, + // matching against regexp is expensive, do it on demand + match = null, + sign, + ret, + diffRes; + + if (isDuration(input)) { + duration = { + ms: input._milliseconds, + d: input._days, + M: input._months, + }; + } else if (isNumber(input) || !isNaN(+input)) { + duration = {}; + if (key) { + duration[key] = +input; + } else { + duration.milliseconds = +input; + } + } else if ((match = aspNetRegex.exec(input))) { + sign = match[1] === '-' ? -1 : 1; + duration = { + y: 0, + d: toInt(match[DATE]) * sign, + h: toInt(match[HOUR]) * sign, + m: toInt(match[MINUTE]) * sign, + s: toInt(match[SECOND]) * sign, + ms: toInt(absRound(match[MILLISECOND] * 1000)) * sign, // the millisecond decimal point is included in the match + }; + } else if ((match = isoRegex.exec(input))) { + sign = match[1] === '-' ? -1 : 1; + duration = { + y: parseIso(match[2], sign), + M: parseIso(match[3], sign), + w: parseIso(match[4], sign), + d: parseIso(match[5], sign), + h: parseIso(match[6], sign), + m: parseIso(match[7], sign), + s: parseIso(match[8], sign), + }; + } else if (duration == null) { + // checks for null or undefined + duration = {}; + } else if ( + typeof duration === 'object' && + ('from' in duration || 'to' in duration) + ) { + diffRes = momentsDifference( + createLocal(duration.from), + createLocal(duration.to) + ); + + duration = {}; + duration.ms = diffRes.milliseconds; + duration.M = diffRes.months; + } + + ret = new Duration(duration); + + if (isDuration(input) && hasOwnProp(input, '_locale')) { + ret._locale = input._locale; + } + + if (isDuration(input) && hasOwnProp(input, '_isValid')) { + ret._isValid = input._isValid; + } + + return ret; + } + + createDuration.fn = Duration.prototype; + createDuration.invalid = createInvalid$1; + + function parseIso(inp, sign) { + // We'd normally use ~~inp for this, but unfortunately it also + // converts floats to ints. + // inp may be undefined, so careful calling replace on it. + var res = inp && parseFloat(inp.replace(',', '.')); + // apply sign while we're at it + return (isNaN(res) ? 0 : res) * sign; + } + + function positiveMomentsDifference(base, other) { + var res = {}; + + res.months = + other.month() - base.month() + (other.year() - base.year()) * 12; + if (base.clone().add(res.months, 'M').isAfter(other)) { + --res.months; + } + + res.milliseconds = +other - +base.clone().add(res.months, 'M'); + + return res; + } + + function momentsDifference(base, other) { + var res; + if (!(base.isValid() && other.isValid())) { + return { milliseconds: 0, months: 0 }; + } + + other = cloneWithOffset(other, base); + if (base.isBefore(other)) { + res = positiveMomentsDifference(base, other); + } else { + res = positiveMomentsDifference(other, base); + res.milliseconds = -res.milliseconds; + res.months = -res.months; + } + + return res; + } + + // TODO: remove 'name' arg after deprecation is removed + function createAdder(direction, name) { + return function (val, period) { + var dur, tmp; + //invert the arguments, but complain about it + if (period !== null && !isNaN(+period)) { + deprecateSimple( + name, + 'moment().' + + name + + '(period, number) is deprecated. Please use moment().' + + name + + '(number, period). ' + + 'See http://momentjs.com/guides/#/warnings/add-inverted-param/ for more info.' + ); + tmp = val; + val = period; + period = tmp; + } + + dur = createDuration(val, period); + addSubtract(this, dur, direction); + return this; + }; + } + + function addSubtract(mom, duration, isAdding, updateOffset) { + var milliseconds = duration._milliseconds, + days = absRound(duration._days), + months = absRound(duration._months); + + if (!mom.isValid()) { + // No op + return; + } + + updateOffset = updateOffset == null ? true : updateOffset; + + if (months) { + setMonth(mom, get(mom, 'Month') + months * isAdding); + } + if (days) { + set$1(mom, 'Date', get(mom, 'Date') + days * isAdding); + } + if (milliseconds) { + mom._d.setTime(mom._d.valueOf() + milliseconds * isAdding); + } + if (updateOffset) { + hooks.updateOffset(mom, days || months); + } + } + + var add = createAdder(1, 'add'), + subtract = createAdder(-1, 'subtract'); + + function isString(input) { + return typeof input === 'string' || input instanceof String; + } + + // type MomentInput = Moment | Date | string | number | (number | string)[] | MomentInputObject | void; // null | undefined + function isMomentInput(input) { + return ( + isMoment(input) || + isDate(input) || + isString(input) || + isNumber(input) || + isNumberOrStringArray(input) || + isMomentInputObject(input) || + input === null || + input === undefined + ); + } + + function isMomentInputObject(input) { + var objectTest = isObject(input) && !isObjectEmpty(input), + propertyTest = false, + properties = [ + 'years', + 'year', + 'y', + 'months', + 'month', + 'M', + 'days', + 'day', + 'd', + 'dates', + 'date', + 'D', + 'hours', + 'hour', + 'h', + 'minutes', + 'minute', + 'm', + 'seconds', + 'second', + 's', + 'milliseconds', + 'millisecond', + 'ms', + ], + i, + property, + propertyLen = properties.length; + + for (i = 0; i < propertyLen; i += 1) { + property = properties[i]; + propertyTest = propertyTest || hasOwnProp(input, property); + } + + return objectTest && propertyTest; + } + + function isNumberOrStringArray(input) { + var arrayTest = isArray(input), + dataTypeTest = false; + if (arrayTest) { + dataTypeTest = + input.filter(function (item) { + return !isNumber(item) && isString(input); + }).length === 0; + } + return arrayTest && dataTypeTest; + } + + function isCalendarSpec(input) { + var objectTest = isObject(input) && !isObjectEmpty(input), + propertyTest = false, + properties = [ + 'sameDay', + 'nextDay', + 'lastDay', + 'nextWeek', + 'lastWeek', + 'sameElse', + ], + i, + property; + + for (i = 0; i < properties.length; i += 1) { + property = properties[i]; + propertyTest = propertyTest || hasOwnProp(input, property); + } + + return objectTest && propertyTest; + } + + function getCalendarFormat(myMoment, now) { + var diff = myMoment.diff(now, 'days', true); + return diff < -6 + ? 'sameElse' + : diff < -1 + ? 'lastWeek' + : diff < 0 + ? 'lastDay' + : diff < 1 + ? 'sameDay' + : diff < 2 + ? 'nextDay' + : diff < 7 + ? 'nextWeek' + : 'sameElse'; + } + + function calendar$1(time, formats) { + // Support for single parameter, formats only overload to the calendar function + if (arguments.length === 1) { + if (!arguments[0]) { + time = undefined; + formats = undefined; + } else if (isMomentInput(arguments[0])) { + time = arguments[0]; + formats = undefined; + } else if (isCalendarSpec(arguments[0])) { + formats = arguments[0]; + time = undefined; + } + } + // We want to compare the start of today, vs this. + // Getting start-of-today depends on whether we're local/utc/offset or not. + var now = time || createLocal(), + sod = cloneWithOffset(now, this).startOf('day'), + format = hooks.calendarFormat(this, sod) || 'sameElse', + output = + formats && + (isFunction(formats[format]) + ? formats[format].call(this, now) + : formats[format]); + + return this.format( + output || this.localeData().calendar(format, this, createLocal(now)) + ); + } + + function clone() { + return new Moment(this); + } + + function isAfter(input, units) { + var localInput = isMoment(input) ? input : createLocal(input); + if (!(this.isValid() && localInput.isValid())) { + return false; + } + units = normalizeUnits(units) || 'millisecond'; + if (units === 'millisecond') { + return this.valueOf() > localInput.valueOf(); + } else { + return localInput.valueOf() < this.clone().startOf(units).valueOf(); + } + } + + function isBefore(input, units) { + var localInput = isMoment(input) ? input : createLocal(input); + if (!(this.isValid() && localInput.isValid())) { + return false; + } + units = normalizeUnits(units) || 'millisecond'; + if (units === 'millisecond') { + return this.valueOf() < localInput.valueOf(); + } else { + return this.clone().endOf(units).valueOf() < localInput.valueOf(); + } + } + + function isBetween(from, to, units, inclusivity) { + var localFrom = isMoment(from) ? from : createLocal(from), + localTo = isMoment(to) ? to : createLocal(to); + if (!(this.isValid() && localFrom.isValid() && localTo.isValid())) { + return false; + } + inclusivity = inclusivity || '()'; + return ( + (inclusivity[0] === '(' + ? this.isAfter(localFrom, units) + : !this.isBefore(localFrom, units)) && + (inclusivity[1] === ')' + ? this.isBefore(localTo, units) + : !this.isAfter(localTo, units)) + ); + } + + function isSame(input, units) { + var localInput = isMoment(input) ? input : createLocal(input), + inputMs; + if (!(this.isValid() && localInput.isValid())) { + return false; + } + units = normalizeUnits(units) || 'millisecond'; + if (units === 'millisecond') { + return this.valueOf() === localInput.valueOf(); + } else { + inputMs = localInput.valueOf(); + return ( + this.clone().startOf(units).valueOf() <= inputMs && + inputMs <= this.clone().endOf(units).valueOf() + ); + } + } + + function isSameOrAfter(input, units) { + return this.isSame(input, units) || this.isAfter(input, units); + } + + function isSameOrBefore(input, units) { + return this.isSame(input, units) || this.isBefore(input, units); + } + + function diff(input, units, asFloat) { + var that, zoneDelta, output; + + if (!this.isValid()) { + return NaN; + } + + that = cloneWithOffset(input, this); + + if (!that.isValid()) { + return NaN; + } + + zoneDelta = (that.utcOffset() - this.utcOffset()) * 6e4; + + units = normalizeUnits(units); + + switch (units) { + case 'year': + output = monthDiff(this, that) / 12; + break; + case 'month': + output = monthDiff(this, that); + break; + case 'quarter': + output = monthDiff(this, that) / 3; + break; + case 'second': + output = (this - that) / 1e3; + break; // 1000 + case 'minute': + output = (this - that) / 6e4; + break; // 1000 * 60 + case 'hour': + output = (this - that) / 36e5; + break; // 1000 * 60 * 60 + case 'day': + output = (this - that - zoneDelta) / 864e5; + break; // 1000 * 60 * 60 * 24, negate dst + case 'week': + output = (this - that - zoneDelta) / 6048e5; + break; // 1000 * 60 * 60 * 24 * 7, negate dst + default: + output = this - that; + } + + return asFloat ? output : absFloor(output); + } + + function monthDiff(a, b) { + if (a.date() < b.date()) { + // end-of-month calculations work correct when the start month has more + // days than the end month. + return -monthDiff(b, a); + } + // difference in months + var wholeMonthDiff = (b.year() - a.year()) * 12 + (b.month() - a.month()), + // b is in (anchor - 1 month, anchor + 1 month) + anchor = a.clone().add(wholeMonthDiff, 'months'), + anchor2, + adjust; + + if (b - anchor < 0) { + anchor2 = a.clone().add(wholeMonthDiff - 1, 'months'); + // linear across the month + adjust = (b - anchor) / (anchor - anchor2); + } else { + anchor2 = a.clone().add(wholeMonthDiff + 1, 'months'); + // linear across the month + adjust = (b - anchor) / (anchor2 - anchor); + } + + //check for negative zero, return zero if negative zero + return -(wholeMonthDiff + adjust) || 0; + } + + hooks.defaultFormat = 'YYYY-MM-DDTHH:mm:ssZ'; + hooks.defaultFormatUtc = 'YYYY-MM-DDTHH:mm:ss[Z]'; + + function toString() { + return this.clone().locale('en').format('ddd MMM DD YYYY HH:mm:ss [GMT]ZZ'); + } + + function toISOString(keepOffset) { + if (!this.isValid()) { + return null; + } + var utc = keepOffset !== true, + m = utc ? this.clone().utc() : this; + if (m.year() < 0 || m.year() > 9999) { + return formatMoment( + m, + utc + ? 'YYYYYY-MM-DD[T]HH:mm:ss.SSS[Z]' + : 'YYYYYY-MM-DD[T]HH:mm:ss.SSSZ' + ); + } + if (isFunction(Date.prototype.toISOString)) { + // native implementation is ~50x faster, use it when we can + if (utc) { + return this.toDate().toISOString(); + } else { + return new Date(this.valueOf() + this.utcOffset() * 60 * 1000) + .toISOString() + .replace('Z', formatMoment(m, 'Z')); + } + } + return formatMoment( + m, + utc ? 'YYYY-MM-DD[T]HH:mm:ss.SSS[Z]' : 'YYYY-MM-DD[T]HH:mm:ss.SSSZ' + ); + } + + /** + * Return a human readable representation of a moment that can + * also be evaluated to get a new moment which is the same + * + * @link https://nodejs.org/dist/latest/docs/api/util.html#util_custom_inspect_function_on_objects + */ + function inspect() { + if (!this.isValid()) { + return 'moment.invalid(/* ' + this._i + ' */)'; + } + var func = 'moment', + zone = '', + prefix, + year, + datetime, + suffix; + if (!this.isLocal()) { + func = this.utcOffset() === 0 ? 'moment.utc' : 'moment.parseZone'; + zone = 'Z'; + } + prefix = '[' + func + '("]'; + year = 0 <= this.year() && this.year() <= 9999 ? 'YYYY' : 'YYYYYY'; + datetime = '-MM-DD[T]HH:mm:ss.SSS'; + suffix = zone + '[")]'; + + return this.format(prefix + year + datetime + suffix); + } + + function format(inputString) { + if (!inputString) { + inputString = this.isUtc() + ? hooks.defaultFormatUtc + : hooks.defaultFormat; + } + var output = formatMoment(this, inputString); + return this.localeData().postformat(output); + } + + function from(time, withoutSuffix) { + if ( + this.isValid() && + ((isMoment(time) && time.isValid()) || createLocal(time).isValid()) + ) { + return createDuration({ to: this, from: time }) + .locale(this.locale()) + .humanize(!withoutSuffix); + } else { + return this.localeData().invalidDate(); + } + } + + function fromNow(withoutSuffix) { + return this.from(createLocal(), withoutSuffix); + } + + function to(time, withoutSuffix) { + if ( + this.isValid() && + ((isMoment(time) && time.isValid()) || createLocal(time).isValid()) + ) { + return createDuration({ from: this, to: time }) + .locale(this.locale()) + .humanize(!withoutSuffix); + } else { + return this.localeData().invalidDate(); + } + } + + function toNow(withoutSuffix) { + return this.to(createLocal(), withoutSuffix); + } + + // If passed a locale key, it will set the locale for this + // instance. Otherwise, it will return the locale configuration + // variables for this instance. + function locale(key) { + var newLocaleData; + + if (key === undefined) { + return this._locale._abbr; + } else { + newLocaleData = getLocale(key); + if (newLocaleData != null) { + this._locale = newLocaleData; + } + return this; + } + } + + var lang = deprecate( + 'moment().lang() is deprecated. Instead, use moment().localeData() to get the language configuration. Use moment().locale() to change languages.', + function (key) { + if (key === undefined) { + return this.localeData(); + } else { + return this.locale(key); + } + } + ); + + function localeData() { + return this._locale; + } + + var MS_PER_SECOND = 1000, + MS_PER_MINUTE = 60 * MS_PER_SECOND, + MS_PER_HOUR = 60 * MS_PER_MINUTE, + MS_PER_400_YEARS = (365 * 400 + 97) * 24 * MS_PER_HOUR; + + // actual modulo - handles negative numbers (for dates before 1970): + function mod$1(dividend, divisor) { + return ((dividend % divisor) + divisor) % divisor; + } + + function localStartOfDate(y, m, d) { + // the date constructor remaps years 0-99 to 1900-1999 + if (y < 100 && y >= 0) { + // preserve leap years using a full 400 year cycle, then reset + return new Date(y + 400, m, d) - MS_PER_400_YEARS; + } else { + return new Date(y, m, d).valueOf(); + } + } + + function utcStartOfDate(y, m, d) { + // Date.UTC remaps years 0-99 to 1900-1999 + if (y < 100 && y >= 0) { + // preserve leap years using a full 400 year cycle, then reset + return Date.UTC(y + 400, m, d) - MS_PER_400_YEARS; + } else { + return Date.UTC(y, m, d); + } + } + + function startOf(units) { + var time, startOfDate; + units = normalizeUnits(units); + if (units === undefined || units === 'millisecond' || !this.isValid()) { + return this; + } + + startOfDate = this._isUTC ? utcStartOfDate : localStartOfDate; + + switch (units) { + case 'year': + time = startOfDate(this.year(), 0, 1); + break; + case 'quarter': + time = startOfDate( + this.year(), + this.month() - (this.month() % 3), + 1 + ); + break; + case 'month': + time = startOfDate(this.year(), this.month(), 1); + break; + case 'week': + time = startOfDate( + this.year(), + this.month(), + this.date() - this.weekday() + ); + break; + case 'isoWeek': + time = startOfDate( + this.year(), + this.month(), + this.date() - (this.isoWeekday() - 1) + ); + break; + case 'day': + case 'date': + time = startOfDate(this.year(), this.month(), this.date()); + break; + case 'hour': + time = this._d.valueOf(); + time -= mod$1( + time + (this._isUTC ? 0 : this.utcOffset() * MS_PER_MINUTE), + MS_PER_HOUR + ); + break; + case 'minute': + time = this._d.valueOf(); + time -= mod$1(time, MS_PER_MINUTE); + break; + case 'second': + time = this._d.valueOf(); + time -= mod$1(time, MS_PER_SECOND); + break; + } + + this._d.setTime(time); + hooks.updateOffset(this, true); + return this; + } + + function endOf(units) { + var time, startOfDate; + units = normalizeUnits(units); + if (units === undefined || units === 'millisecond' || !this.isValid()) { + return this; + } + + startOfDate = this._isUTC ? utcStartOfDate : localStartOfDate; + + switch (units) { + case 'year': + time = startOfDate(this.year() + 1, 0, 1) - 1; + break; + case 'quarter': + time = + startOfDate( + this.year(), + this.month() - (this.month() % 3) + 3, + 1 + ) - 1; + break; + case 'month': + time = startOfDate(this.year(), this.month() + 1, 1) - 1; + break; + case 'week': + time = + startOfDate( + this.year(), + this.month(), + this.date() - this.weekday() + 7 + ) - 1; + break; + case 'isoWeek': + time = + startOfDate( + this.year(), + this.month(), + this.date() - (this.isoWeekday() - 1) + 7 + ) - 1; + break; + case 'day': + case 'date': + time = startOfDate(this.year(), this.month(), this.date() + 1) - 1; + break; + case 'hour': + time = this._d.valueOf(); + time += + MS_PER_HOUR - + mod$1( + time + (this._isUTC ? 0 : this.utcOffset() * MS_PER_MINUTE), + MS_PER_HOUR + ) - + 1; + break; + case 'minute': + time = this._d.valueOf(); + time += MS_PER_MINUTE - mod$1(time, MS_PER_MINUTE) - 1; + break; + case 'second': + time = this._d.valueOf(); + time += MS_PER_SECOND - mod$1(time, MS_PER_SECOND) - 1; + break; + } + + this._d.setTime(time); + hooks.updateOffset(this, true); + return this; + } + + function valueOf() { + return this._d.valueOf() - (this._offset || 0) * 60000; + } + + function unix() { + return Math.floor(this.valueOf() / 1000); + } + + function toDate() { + return new Date(this.valueOf()); + } + + function toArray() { + var m = this; + return [ + m.year(), + m.month(), + m.date(), + m.hour(), + m.minute(), + m.second(), + m.millisecond(), + ]; + } + + function toObject() { + var m = this; + return { + years: m.year(), + months: m.month(), + date: m.date(), + hours: m.hours(), + minutes: m.minutes(), + seconds: m.seconds(), + milliseconds: m.milliseconds(), + }; + } + + function toJSON() { + // new Date(NaN).toJSON() === null + return this.isValid() ? this.toISOString() : null; + } + + function isValid$2() { + return isValid(this); + } + + function parsingFlags() { + return extend({}, getParsingFlags(this)); + } + + function invalidAt() { + return getParsingFlags(this).overflow; + } + + function creationData() { + return { + input: this._i, + format: this._f, + locale: this._locale, + isUTC: this._isUTC, + strict: this._strict, + }; + } + + addFormatToken('N', 0, 0, 'eraAbbr'); + addFormatToken('NN', 0, 0, 'eraAbbr'); + addFormatToken('NNN', 0, 0, 'eraAbbr'); + addFormatToken('NNNN', 0, 0, 'eraName'); + addFormatToken('NNNNN', 0, 0, 'eraNarrow'); + + addFormatToken('y', ['y', 1], 'yo', 'eraYear'); + addFormatToken('y', ['yy', 2], 0, 'eraYear'); + addFormatToken('y', ['yyy', 3], 0, 'eraYear'); + addFormatToken('y', ['yyyy', 4], 0, 'eraYear'); + + addRegexToken('N', matchEraAbbr); + addRegexToken('NN', matchEraAbbr); + addRegexToken('NNN', matchEraAbbr); + addRegexToken('NNNN', matchEraName); + addRegexToken('NNNNN', matchEraNarrow); + + addParseToken( + ['N', 'NN', 'NNN', 'NNNN', 'NNNNN'], + function (input, array, config, token) { + var era = config._locale.erasParse(input, token, config._strict); + if (era) { + getParsingFlags(config).era = era; + } else { + getParsingFlags(config).invalidEra = input; + } + } + ); + + addRegexToken('y', matchUnsigned); + addRegexToken('yy', matchUnsigned); + addRegexToken('yyy', matchUnsigned); + addRegexToken('yyyy', matchUnsigned); + addRegexToken('yo', matchEraYearOrdinal); + + addParseToken(['y', 'yy', 'yyy', 'yyyy'], YEAR); + addParseToken(['yo'], function (input, array, config, token) { + var match; + if (config._locale._eraYearOrdinalRegex) { + match = input.match(config._locale._eraYearOrdinalRegex); + } + + if (config._locale.eraYearOrdinalParse) { + array[YEAR] = config._locale.eraYearOrdinalParse(input, match); + } else { + array[YEAR] = parseInt(input, 10); + } + }); + + function localeEras(m, format) { + var i, + l, + date, + eras = this._eras || getLocale('en')._eras; + for (i = 0, l = eras.length; i < l; ++i) { + switch (typeof eras[i].since) { + case 'string': + // truncate time + date = hooks(eras[i].since).startOf('day'); + eras[i].since = date.valueOf(); + break; + } + + switch (typeof eras[i].until) { + case 'undefined': + eras[i].until = +Infinity; + break; + case 'string': + // truncate time + date = hooks(eras[i].until).startOf('day').valueOf(); + eras[i].until = date.valueOf(); + break; + } + } + return eras; + } + + function localeErasParse(eraName, format, strict) { + var i, + l, + eras = this.eras(), + name, + abbr, + narrow; + eraName = eraName.toUpperCase(); + + for (i = 0, l = eras.length; i < l; ++i) { + name = eras[i].name.toUpperCase(); + abbr = eras[i].abbr.toUpperCase(); + narrow = eras[i].narrow.toUpperCase(); + + if (strict) { + switch (format) { + case 'N': + case 'NN': + case 'NNN': + if (abbr === eraName) { + return eras[i]; + } + break; + + case 'NNNN': + if (name === eraName) { + return eras[i]; + } + break; + + case 'NNNNN': + if (narrow === eraName) { + return eras[i]; + } + break; + } + } else if ([name, abbr, narrow].indexOf(eraName) >= 0) { + return eras[i]; + } + } + } + + function localeErasConvertYear(era, year) { + var dir = era.since <= era.until ? +1 : -1; + if (year === undefined) { + return hooks(era.since).year(); + } else { + return hooks(era.since).year() + (year - era.offset) * dir; + } + } + + function getEraName() { + var i, + l, + val, + eras = this.localeData().eras(); + for (i = 0, l = eras.length; i < l; ++i) { + // truncate time + val = this.clone().startOf('day').valueOf(); + + if (eras[i].since <= val && val <= eras[i].until) { + return eras[i].name; + } + if (eras[i].until <= val && val <= eras[i].since) { + return eras[i].name; + } + } + + return ''; + } + + function getEraNarrow() { + var i, + l, + val, + eras = this.localeData().eras(); + for (i = 0, l = eras.length; i < l; ++i) { + // truncate time + val = this.clone().startOf('day').valueOf(); + + if (eras[i].since <= val && val <= eras[i].until) { + return eras[i].narrow; + } + if (eras[i].until <= val && val <= eras[i].since) { + return eras[i].narrow; + } + } + + return ''; + } + + function getEraAbbr() { + var i, + l, + val, + eras = this.localeData().eras(); + for (i = 0, l = eras.length; i < l; ++i) { + // truncate time + val = this.clone().startOf('day').valueOf(); + + if (eras[i].since <= val && val <= eras[i].until) { + return eras[i].abbr; + } + if (eras[i].until <= val && val <= eras[i].since) { + return eras[i].abbr; + } + } + + return ''; + } + + function getEraYear() { + var i, + l, + dir, + val, + eras = this.localeData().eras(); + for (i = 0, l = eras.length; i < l; ++i) { + dir = eras[i].since <= eras[i].until ? +1 : -1; + + // truncate time + val = this.clone().startOf('day').valueOf(); + + if ( + (eras[i].since <= val && val <= eras[i].until) || + (eras[i].until <= val && val <= eras[i].since) + ) { + return ( + (this.year() - hooks(eras[i].since).year()) * dir + + eras[i].offset + ); + } + } + + return this.year(); + } + + function erasNameRegex(isStrict) { + if (!hasOwnProp(this, '_erasNameRegex')) { + computeErasParse.call(this); + } + return isStrict ? this._erasNameRegex : this._erasRegex; + } + + function erasAbbrRegex(isStrict) { + if (!hasOwnProp(this, '_erasAbbrRegex')) { + computeErasParse.call(this); + } + return isStrict ? this._erasAbbrRegex : this._erasRegex; + } + + function erasNarrowRegex(isStrict) { + if (!hasOwnProp(this, '_erasNarrowRegex')) { + computeErasParse.call(this); + } + return isStrict ? this._erasNarrowRegex : this._erasRegex; + } + + function matchEraAbbr(isStrict, locale) { + return locale.erasAbbrRegex(isStrict); + } + + function matchEraName(isStrict, locale) { + return locale.erasNameRegex(isStrict); + } + + function matchEraNarrow(isStrict, locale) { + return locale.erasNarrowRegex(isStrict); + } + + function matchEraYearOrdinal(isStrict, locale) { + return locale._eraYearOrdinalRegex || matchUnsigned; + } + + function computeErasParse() { + var abbrPieces = [], + namePieces = [], + narrowPieces = [], + mixedPieces = [], + i, + l, + erasName, + erasAbbr, + erasNarrow, + eras = this.eras(); + + for (i = 0, l = eras.length; i < l; ++i) { + erasName = regexEscape(eras[i].name); + erasAbbr = regexEscape(eras[i].abbr); + erasNarrow = regexEscape(eras[i].narrow); + + namePieces.push(erasName); + abbrPieces.push(erasAbbr); + narrowPieces.push(erasNarrow); + mixedPieces.push(erasName); + mixedPieces.push(erasAbbr); + mixedPieces.push(erasNarrow); + } + + this._erasRegex = new RegExp('^(' + mixedPieces.join('|') + ')', 'i'); + this._erasNameRegex = new RegExp('^(' + namePieces.join('|') + ')', 'i'); + this._erasAbbrRegex = new RegExp('^(' + abbrPieces.join('|') + ')', 'i'); + this._erasNarrowRegex = new RegExp( + '^(' + narrowPieces.join('|') + ')', + 'i' + ); + } + + // FORMATTING + + addFormatToken(0, ['gg', 2], 0, function () { + return this.weekYear() % 100; + }); + + addFormatToken(0, ['GG', 2], 0, function () { + return this.isoWeekYear() % 100; + }); + + function addWeekYearFormatToken(token, getter) { + addFormatToken(0, [token, token.length], 0, getter); + } + + addWeekYearFormatToken('gggg', 'weekYear'); + addWeekYearFormatToken('ggggg', 'weekYear'); + addWeekYearFormatToken('GGGG', 'isoWeekYear'); + addWeekYearFormatToken('GGGGG', 'isoWeekYear'); + + // ALIASES + + // PARSING + + addRegexToken('G', matchSigned); + addRegexToken('g', matchSigned); + addRegexToken('GG', match1to2, match2); + addRegexToken('gg', match1to2, match2); + addRegexToken('GGGG', match1to4, match4); + addRegexToken('gggg', match1to4, match4); + addRegexToken('GGGGG', match1to6, match6); + addRegexToken('ggggg', match1to6, match6); + + addWeekParseToken( + ['gggg', 'ggggg', 'GGGG', 'GGGGG'], + function (input, week, config, token) { + week[token.substr(0, 2)] = toInt(input); + } + ); + + addWeekParseToken(['gg', 'GG'], function (input, week, config, token) { + week[token] = hooks.parseTwoDigitYear(input); + }); + + // MOMENTS + + function getSetWeekYear(input) { + return getSetWeekYearHelper.call( + this, + input, + this.week(), + this.weekday() + this.localeData()._week.dow, + this.localeData()._week.dow, + this.localeData()._week.doy + ); + } + + function getSetISOWeekYear(input) { + return getSetWeekYearHelper.call( + this, + input, + this.isoWeek(), + this.isoWeekday(), + 1, + 4 + ); + } + + function getISOWeeksInYear() { + return weeksInYear(this.year(), 1, 4); + } + + function getISOWeeksInISOWeekYear() { + return weeksInYear(this.isoWeekYear(), 1, 4); + } + + function getWeeksInYear() { + var weekInfo = this.localeData()._week; + return weeksInYear(this.year(), weekInfo.dow, weekInfo.doy); + } + + function getWeeksInWeekYear() { + var weekInfo = this.localeData()._week; + return weeksInYear(this.weekYear(), weekInfo.dow, weekInfo.doy); + } + + function getSetWeekYearHelper(input, week, weekday, dow, doy) { + var weeksTarget; + if (input == null) { + return weekOfYear(this, dow, doy).year; + } else { + weeksTarget = weeksInYear(input, dow, doy); + if (week > weeksTarget) { + week = weeksTarget; + } + return setWeekAll.call(this, input, week, weekday, dow, doy); + } + } + + function setWeekAll(weekYear, week, weekday, dow, doy) { + var dayOfYearData = dayOfYearFromWeeks(weekYear, week, weekday, dow, doy), + date = createUTCDate(dayOfYearData.year, 0, dayOfYearData.dayOfYear); + + this.year(date.getUTCFullYear()); + this.month(date.getUTCMonth()); + this.date(date.getUTCDate()); + return this; + } + + // FORMATTING + + addFormatToken('Q', 0, 'Qo', 'quarter'); + + // PARSING + + addRegexToken('Q', match1); + addParseToken('Q', function (input, array) { + array[MONTH] = (toInt(input) - 1) * 3; + }); + + // MOMENTS + + function getSetQuarter(input) { + return input == null + ? Math.ceil((this.month() + 1) / 3) + : this.month((input - 1) * 3 + (this.month() % 3)); + } + + // FORMATTING + + addFormatToken('D', ['DD', 2], 'Do', 'date'); + + // PARSING + + addRegexToken('D', match1to2, match1to2NoLeadingZero); + addRegexToken('DD', match1to2, match2); + addRegexToken('Do', function (isStrict, locale) { + // TODO: Remove "ordinalParse" fallback in next major release. + return isStrict + ? locale._dayOfMonthOrdinalParse || locale._ordinalParse + : locale._dayOfMonthOrdinalParseLenient; + }); + + addParseToken(['D', 'DD'], DATE); + addParseToken('Do', function (input, array) { + array[DATE] = toInt(input.match(match1to2)[0]); + }); + + // MOMENTS + + var getSetDayOfMonth = makeGetSet('Date', true); + + // FORMATTING + + addFormatToken('DDD', ['DDDD', 3], 'DDDo', 'dayOfYear'); + + // PARSING + + addRegexToken('DDD', match1to3); + addRegexToken('DDDD', match3); + addParseToken(['DDD', 'DDDD'], function (input, array, config) { + config._dayOfYear = toInt(input); + }); + + // HELPERS + + // MOMENTS + + function getSetDayOfYear(input) { + var dayOfYear = + Math.round( + (this.clone().startOf('day') - this.clone().startOf('year')) / 864e5 + ) + 1; + return input == null ? dayOfYear : this.add(input - dayOfYear, 'd'); + } + + // FORMATTING + + addFormatToken('m', ['mm', 2], 0, 'minute'); + + // PARSING + + addRegexToken('m', match1to2, match1to2HasZero); + addRegexToken('mm', match1to2, match2); + addParseToken(['m', 'mm'], MINUTE); + + // MOMENTS + + var getSetMinute = makeGetSet('Minutes', false); + + // FORMATTING + + addFormatToken('s', ['ss', 2], 0, 'second'); + + // PARSING + + addRegexToken('s', match1to2, match1to2HasZero); + addRegexToken('ss', match1to2, match2); + addParseToken(['s', 'ss'], SECOND); + + // MOMENTS + + var getSetSecond = makeGetSet('Seconds', false); + + // FORMATTING + + addFormatToken('S', 0, 0, function () { + return ~~(this.millisecond() / 100); + }); + + addFormatToken(0, ['SS', 2], 0, function () { + return ~~(this.millisecond() / 10); + }); + + addFormatToken(0, ['SSS', 3], 0, 'millisecond'); + addFormatToken(0, ['SSSS', 4], 0, function () { + return this.millisecond() * 10; + }); + addFormatToken(0, ['SSSSS', 5], 0, function () { + return this.millisecond() * 100; + }); + addFormatToken(0, ['SSSSSS', 6], 0, function () { + return this.millisecond() * 1000; + }); + addFormatToken(0, ['SSSSSSS', 7], 0, function () { + return this.millisecond() * 10000; + }); + addFormatToken(0, ['SSSSSSSS', 8], 0, function () { + return this.millisecond() * 100000; + }); + addFormatToken(0, ['SSSSSSSSS', 9], 0, function () { + return this.millisecond() * 1000000; + }); + + // PARSING + + addRegexToken('S', match1to3, match1); + addRegexToken('SS', match1to3, match2); + addRegexToken('SSS', match1to3, match3); + + var token, getSetMillisecond; + for (token = 'SSSS'; token.length <= 9; token += 'S') { + addRegexToken(token, matchUnsigned); + } + + function parseMs(input, array) { + array[MILLISECOND] = toInt(('0.' + input) * 1000); + } + + for (token = 'S'; token.length <= 9; token += 'S') { + addParseToken(token, parseMs); + } + + getSetMillisecond = makeGetSet('Milliseconds', false); + + // FORMATTING + + addFormatToken('z', 0, 0, 'zoneAbbr'); + addFormatToken('zz', 0, 0, 'zoneName'); + + // MOMENTS + + function getZoneAbbr() { + return this._isUTC ? 'UTC' : ''; + } + + function getZoneName() { + return this._isUTC ? 'Coordinated Universal Time' : ''; + } + + var proto = Moment.prototype; + + proto.add = add; + proto.calendar = calendar$1; + proto.clone = clone; + proto.diff = diff; + proto.endOf = endOf; + proto.format = format; + proto.from = from; + proto.fromNow = fromNow; + proto.to = to; + proto.toNow = toNow; + proto.get = stringGet; + proto.invalidAt = invalidAt; + proto.isAfter = isAfter; + proto.isBefore = isBefore; + proto.isBetween = isBetween; + proto.isSame = isSame; + proto.isSameOrAfter = isSameOrAfter; + proto.isSameOrBefore = isSameOrBefore; + proto.isValid = isValid$2; + proto.lang = lang; + proto.locale = locale; + proto.localeData = localeData; + proto.max = prototypeMax; + proto.min = prototypeMin; + proto.parsingFlags = parsingFlags; + proto.set = stringSet; + proto.startOf = startOf; + proto.subtract = subtract; + proto.toArray = toArray; + proto.toObject = toObject; + proto.toDate = toDate; + proto.toISOString = toISOString; + proto.inspect = inspect; + if (typeof Symbol !== 'undefined' && Symbol.for != null) { + proto[Symbol.for('nodejs.util.inspect.custom')] = function () { + return 'Moment<' + this.format() + '>'; + }; + } + proto.toJSON = toJSON; + proto.toString = toString; + proto.unix = unix; + proto.valueOf = valueOf; + proto.creationData = creationData; + proto.eraName = getEraName; + proto.eraNarrow = getEraNarrow; + proto.eraAbbr = getEraAbbr; + proto.eraYear = getEraYear; + proto.year = getSetYear; + proto.isLeapYear = getIsLeapYear; + proto.weekYear = getSetWeekYear; + proto.isoWeekYear = getSetISOWeekYear; + proto.quarter = proto.quarters = getSetQuarter; + proto.month = getSetMonth; + proto.daysInMonth = getDaysInMonth; + proto.week = proto.weeks = getSetWeek; + proto.isoWeek = proto.isoWeeks = getSetISOWeek; + proto.weeksInYear = getWeeksInYear; + proto.weeksInWeekYear = getWeeksInWeekYear; + proto.isoWeeksInYear = getISOWeeksInYear; + proto.isoWeeksInISOWeekYear = getISOWeeksInISOWeekYear; + proto.date = getSetDayOfMonth; + proto.day = proto.days = getSetDayOfWeek; + proto.weekday = getSetLocaleDayOfWeek; + proto.isoWeekday = getSetISODayOfWeek; + proto.dayOfYear = getSetDayOfYear; + proto.hour = proto.hours = getSetHour; + proto.minute = proto.minutes = getSetMinute; + proto.second = proto.seconds = getSetSecond; + proto.millisecond = proto.milliseconds = getSetMillisecond; + proto.utcOffset = getSetOffset; + proto.utc = setOffsetToUTC; + proto.local = setOffsetToLocal; + proto.parseZone = setOffsetToParsedOffset; + proto.hasAlignedHourOffset = hasAlignedHourOffset; + proto.isDST = isDaylightSavingTime; + proto.isLocal = isLocal; + proto.isUtcOffset = isUtcOffset; + proto.isUtc = isUtc; + proto.isUTC = isUtc; + proto.zoneAbbr = getZoneAbbr; + proto.zoneName = getZoneName; + proto.dates = deprecate( + 'dates accessor is deprecated. Use date instead.', + getSetDayOfMonth + ); + proto.months = deprecate( + 'months accessor is deprecated. Use month instead', + getSetMonth + ); + proto.years = deprecate( + 'years accessor is deprecated. Use year instead', + getSetYear + ); + proto.zone = deprecate( + 'moment().zone is deprecated, use moment().utcOffset instead. http://momentjs.com/guides/#/warnings/zone/', + getSetZone + ); + proto.isDSTShifted = deprecate( + 'isDSTShifted is deprecated. See http://momentjs.com/guides/#/warnings/dst-shifted/ for more information', + isDaylightSavingTimeShifted + ); + + function createUnix(input) { + return createLocal(input * 1000); + } + + function createInZone() { + return createLocal.apply(null, arguments).parseZone(); + } + + function preParsePostFormat(string) { + return string; + } + + var proto$1 = Locale.prototype; + + proto$1.calendar = calendar; + proto$1.longDateFormat = longDateFormat; + proto$1.invalidDate = invalidDate; + proto$1.ordinal = ordinal; + proto$1.preparse = preParsePostFormat; + proto$1.postformat = preParsePostFormat; + proto$1.relativeTime = relativeTime; + proto$1.pastFuture = pastFuture; + proto$1.set = set; + proto$1.eras = localeEras; + proto$1.erasParse = localeErasParse; + proto$1.erasConvertYear = localeErasConvertYear; + proto$1.erasAbbrRegex = erasAbbrRegex; + proto$1.erasNameRegex = erasNameRegex; + proto$1.erasNarrowRegex = erasNarrowRegex; + + proto$1.months = localeMonths; + proto$1.monthsShort = localeMonthsShort; + proto$1.monthsParse = localeMonthsParse; + proto$1.monthsRegex = monthsRegex; + proto$1.monthsShortRegex = monthsShortRegex; + proto$1.week = localeWeek; + proto$1.firstDayOfYear = localeFirstDayOfYear; + proto$1.firstDayOfWeek = localeFirstDayOfWeek; + + proto$1.weekdays = localeWeekdays; + proto$1.weekdaysMin = localeWeekdaysMin; + proto$1.weekdaysShort = localeWeekdaysShort; + proto$1.weekdaysParse = localeWeekdaysParse; + + proto$1.weekdaysRegex = weekdaysRegex; + proto$1.weekdaysShortRegex = weekdaysShortRegex; + proto$1.weekdaysMinRegex = weekdaysMinRegex; + + proto$1.isPM = localeIsPM; + proto$1.meridiem = localeMeridiem; + + function get$1(format, index, field, setter) { + var locale = getLocale(), + utc = createUTC().set(setter, index); + return locale[field](utc, format); + } + + function listMonthsImpl(format, index, field) { + if (isNumber(format)) { + index = format; + format = undefined; + } + + format = format || ''; + + if (index != null) { + return get$1(format, index, field, 'month'); + } + + var i, + out = []; + for (i = 0; i < 12; i++) { + out[i] = get$1(format, i, field, 'month'); + } + return out; + } + + // () + // (5) + // (fmt, 5) + // (fmt) + // (true) + // (true, 5) + // (true, fmt, 5) + // (true, fmt) + function listWeekdaysImpl(localeSorted, format, index, field) { + if (typeof localeSorted === 'boolean') { + if (isNumber(format)) { + index = format; + format = undefined; + } + + format = format || ''; + } else { + format = localeSorted; + index = format; + localeSorted = false; + + if (isNumber(format)) { + index = format; + format = undefined; + } + + format = format || ''; + } + + var locale = getLocale(), + shift = localeSorted ? locale._week.dow : 0, + i, + out = []; + + if (index != null) { + return get$1(format, (index + shift) % 7, field, 'day'); + } + + for (i = 0; i < 7; i++) { + out[i] = get$1(format, (i + shift) % 7, field, 'day'); + } + return out; + } + + function listMonths(format, index) { + return listMonthsImpl(format, index, 'months'); + } + + function listMonthsShort(format, index) { + return listMonthsImpl(format, index, 'monthsShort'); + } + + function listWeekdays(localeSorted, format, index) { + return listWeekdaysImpl(localeSorted, format, index, 'weekdays'); + } + + function listWeekdaysShort(localeSorted, format, index) { + return listWeekdaysImpl(localeSorted, format, index, 'weekdaysShort'); + } + + function listWeekdaysMin(localeSorted, format, index) { + return listWeekdaysImpl(localeSorted, format, index, 'weekdaysMin'); + } + + getSetGlobalLocale('en', { + eras: [ + { + since: '0001-01-01', + until: +Infinity, + offset: 1, + name: 'Anno Domini', + narrow: 'AD', + abbr: 'AD', + }, + { + since: '0000-12-31', + until: -Infinity, + offset: 1, + name: 'Before Christ', + narrow: 'BC', + abbr: 'BC', + }, + ], + dayOfMonthOrdinalParse: /\d{1,2}(th|st|nd|rd)/, + ordinal: function (number) { + var b = number % 10, + output = + toInt((number % 100) / 10) === 1 + ? 'th' + : b === 1 + ? 'st' + : b === 2 + ? 'nd' + : b === 3 + ? 'rd' + : 'th'; + return number + output; + }, + }); + + // Side effect imports + + hooks.lang = deprecate( + 'moment.lang is deprecated. Use moment.locale instead.', + getSetGlobalLocale + ); + hooks.langData = deprecate( + 'moment.langData is deprecated. Use moment.localeData instead.', + getLocale + ); + + var mathAbs = Math.abs; + + function abs() { + var data = this._data; + + this._milliseconds = mathAbs(this._milliseconds); + this._days = mathAbs(this._days); + this._months = mathAbs(this._months); + + data.milliseconds = mathAbs(data.milliseconds); + data.seconds = mathAbs(data.seconds); + data.minutes = mathAbs(data.minutes); + data.hours = mathAbs(data.hours); + data.months = mathAbs(data.months); + data.years = mathAbs(data.years); + + return this; + } + + function addSubtract$1(duration, input, value, direction) { + var other = createDuration(input, value); + + duration._milliseconds += direction * other._milliseconds; + duration._days += direction * other._days; + duration._months += direction * other._months; + + return duration._bubble(); + } + + // supports only 2.0-style add(1, 's') or add(duration) + function add$1(input, value) { + return addSubtract$1(this, input, value, 1); + } + + // supports only 2.0-style subtract(1, 's') or subtract(duration) + function subtract$1(input, value) { + return addSubtract$1(this, input, value, -1); + } + + function absCeil(number) { + if (number < 0) { + return Math.floor(number); + } else { + return Math.ceil(number); + } + } + + function bubble() { + var milliseconds = this._milliseconds, + days = this._days, + months = this._months, + data = this._data, + seconds, + minutes, + hours, + years, + monthsFromDays; + + // if we have a mix of positive and negative values, bubble down first + // check: https://github.com/moment/moment/issues/2166 + if ( + !( + (milliseconds >= 0 && days >= 0 && months >= 0) || + (milliseconds <= 0 && days <= 0 && months <= 0) + ) + ) { + milliseconds += absCeil(monthsToDays(months) + days) * 864e5; + days = 0; + months = 0; + } + + // The following code bubbles up values, see the tests for + // examples of what that means. + data.milliseconds = milliseconds % 1000; + + seconds = absFloor(milliseconds / 1000); + data.seconds = seconds % 60; + + minutes = absFloor(seconds / 60); + data.minutes = minutes % 60; + + hours = absFloor(minutes / 60); + data.hours = hours % 24; + + days += absFloor(hours / 24); + + // convert days to months + monthsFromDays = absFloor(daysToMonths(days)); + months += monthsFromDays; + days -= absCeil(monthsToDays(monthsFromDays)); + + // 12 months -> 1 year + years = absFloor(months / 12); + months %= 12; + + data.days = days; + data.months = months; + data.years = years; + + return this; + } + + function daysToMonths(days) { + // 400 years have 146097 days (taking into account leap year rules) + // 400 years have 12 months === 4800 + return (days * 4800) / 146097; + } + + function monthsToDays(months) { + // the reverse of daysToMonths + return (months * 146097) / 4800; + } + + function as(units) { + if (!this.isValid()) { + return NaN; + } + var days, + months, + milliseconds = this._milliseconds; + + units = normalizeUnits(units); + + if (units === 'month' || units === 'quarter' || units === 'year') { + days = this._days + milliseconds / 864e5; + months = this._months + daysToMonths(days); + switch (units) { + case 'month': + return months; + case 'quarter': + return months / 3; + case 'year': + return months / 12; + } + } else { + // handle milliseconds separately because of floating point math errors (issue #1867) + days = this._days + Math.round(monthsToDays(this._months)); + switch (units) { + case 'week': + return days / 7 + milliseconds / 6048e5; + case 'day': + return days + milliseconds / 864e5; + case 'hour': + return days * 24 + milliseconds / 36e5; + case 'minute': + return days * 1440 + milliseconds / 6e4; + case 'second': + return days * 86400 + milliseconds / 1000; + // Math.floor prevents floating point math errors here + case 'millisecond': + return Math.floor(days * 864e5) + milliseconds; + default: + throw new Error('Unknown unit ' + units); + } + } + } + + function makeAs(alias) { + return function () { + return this.as(alias); + }; + } + + var asMilliseconds = makeAs('ms'), + asSeconds = makeAs('s'), + asMinutes = makeAs('m'), + asHours = makeAs('h'), + asDays = makeAs('d'), + asWeeks = makeAs('w'), + asMonths = makeAs('M'), + asQuarters = makeAs('Q'), + asYears = makeAs('y'), + valueOf$1 = asMilliseconds; + + function clone$1() { + return createDuration(this); + } + + function get$2(units) { + units = normalizeUnits(units); + return this.isValid() ? this[units + 's']() : NaN; + } + + function makeGetter(name) { + return function () { + return this.isValid() ? this._data[name] : NaN; + }; + } + + var milliseconds = makeGetter('milliseconds'), + seconds = makeGetter('seconds'), + minutes = makeGetter('minutes'), + hours = makeGetter('hours'), + days = makeGetter('days'), + months = makeGetter('months'), + years = makeGetter('years'); + + function weeks() { + return absFloor(this.days() / 7); + } + + var round = Math.round, + thresholds = { + ss: 44, // a few seconds to seconds + s: 45, // seconds to minute + m: 45, // minutes to hour + h: 22, // hours to day + d: 26, // days to month/week + w: null, // weeks to month + M: 11, // months to year + }; + + // helper function for moment.fn.from, moment.fn.fromNow, and moment.duration.fn.humanize + function substituteTimeAgo(string, number, withoutSuffix, isFuture, locale) { + return locale.relativeTime(number || 1, !!withoutSuffix, string, isFuture); + } + + function relativeTime$1(posNegDuration, withoutSuffix, thresholds, locale) { + var duration = createDuration(posNegDuration).abs(), + seconds = round(duration.as('s')), + minutes = round(duration.as('m')), + hours = round(duration.as('h')), + days = round(duration.as('d')), + months = round(duration.as('M')), + weeks = round(duration.as('w')), + years = round(duration.as('y')), + a = + (seconds <= thresholds.ss && ['s', seconds]) || + (seconds < thresholds.s && ['ss', seconds]) || + (minutes <= 1 && ['m']) || + (minutes < thresholds.m && ['mm', minutes]) || + (hours <= 1 && ['h']) || + (hours < thresholds.h && ['hh', hours]) || + (days <= 1 && ['d']) || + (days < thresholds.d && ['dd', days]); + + if (thresholds.w != null) { + a = + a || + (weeks <= 1 && ['w']) || + (weeks < thresholds.w && ['ww', weeks]); + } + a = a || + (months <= 1 && ['M']) || + (months < thresholds.M && ['MM', months]) || + (years <= 1 && ['y']) || ['yy', years]; + + a[2] = withoutSuffix; + a[3] = +posNegDuration > 0; + a[4] = locale; + return substituteTimeAgo.apply(null, a); + } + + // This function allows you to set the rounding function for relative time strings + function getSetRelativeTimeRounding(roundingFunction) { + if (roundingFunction === undefined) { + return round; + } + if (typeof roundingFunction === 'function') { + round = roundingFunction; + return true; + } + return false; + } + + // This function allows you to set a threshold for relative time strings + function getSetRelativeTimeThreshold(threshold, limit) { + if (thresholds[threshold] === undefined) { + return false; + } + if (limit === undefined) { + return thresholds[threshold]; + } + thresholds[threshold] = limit; + if (threshold === 's') { + thresholds.ss = limit - 1; + } + return true; + } + + function humanize(argWithSuffix, argThresholds) { + if (!this.isValid()) { + return this.localeData().invalidDate(); + } + + var withSuffix = false, + th = thresholds, + locale, + output; + + if (typeof argWithSuffix === 'object') { + argThresholds = argWithSuffix; + argWithSuffix = false; + } + if (typeof argWithSuffix === 'boolean') { + withSuffix = argWithSuffix; + } + if (typeof argThresholds === 'object') { + th = Object.assign({}, thresholds, argThresholds); + if (argThresholds.s != null && argThresholds.ss == null) { + th.ss = argThresholds.s - 1; + } + } + + locale = this.localeData(); + output = relativeTime$1(this, !withSuffix, th, locale); + + if (withSuffix) { + output = locale.pastFuture(+this, output); + } + + return locale.postformat(output); + } + + var abs$1 = Math.abs; + + function sign(x) { + return (x > 0) - (x < 0) || +x; + } + + function toISOString$1() { + // for ISO strings we do not use the normal bubbling rules: + // * milliseconds bubble up until they become hours + // * days do not bubble at all + // * months bubble up until they become years + // This is because there is no context-free conversion between hours and days + // (think of clock changes) + // and also not between days and months (28-31 days per month) + if (!this.isValid()) { + return this.localeData().invalidDate(); + } + + var seconds = abs$1(this._milliseconds) / 1000, + days = abs$1(this._days), + months = abs$1(this._months), + minutes, + hours, + years, + s, + total = this.asSeconds(), + totalSign, + ymSign, + daysSign, + hmsSign; + + if (!total) { + // this is the same as C#'s (Noda) and python (isodate)... + // but not other JS (goog.date) + return 'P0D'; + } + + // 3600 seconds -> 60 minutes -> 1 hour + minutes = absFloor(seconds / 60); + hours = absFloor(minutes / 60); + seconds %= 60; + minutes %= 60; + + // 12 months -> 1 year + years = absFloor(months / 12); + months %= 12; + + // inspired by https://github.com/dordille/moment-isoduration/blob/master/moment.isoduration.js + s = seconds ? seconds.toFixed(3).replace(/\.?0+$/, '') : ''; + + totalSign = total < 0 ? '-' : ''; + ymSign = sign(this._months) !== sign(total) ? '-' : ''; + daysSign = sign(this._days) !== sign(total) ? '-' : ''; + hmsSign = sign(this._milliseconds) !== sign(total) ? '-' : ''; + + return ( + totalSign + + 'P' + + (years ? ymSign + years + 'Y' : '') + + (months ? ymSign + months + 'M' : '') + + (days ? daysSign + days + 'D' : '') + + (hours || minutes || seconds ? 'T' : '') + + (hours ? hmsSign + hours + 'H' : '') + + (minutes ? hmsSign + minutes + 'M' : '') + + (seconds ? hmsSign + s + 'S' : '') + ); + } + + var proto$2 = Duration.prototype; + + proto$2.isValid = isValid$1; + proto$2.abs = abs; + proto$2.add = add$1; + proto$2.subtract = subtract$1; + proto$2.as = as; + proto$2.asMilliseconds = asMilliseconds; + proto$2.asSeconds = asSeconds; + proto$2.asMinutes = asMinutes; + proto$2.asHours = asHours; + proto$2.asDays = asDays; + proto$2.asWeeks = asWeeks; + proto$2.asMonths = asMonths; + proto$2.asQuarters = asQuarters; + proto$2.asYears = asYears; + proto$2.valueOf = valueOf$1; + proto$2._bubble = bubble; + proto$2.clone = clone$1; + proto$2.get = get$2; + proto$2.milliseconds = milliseconds; + proto$2.seconds = seconds; + proto$2.minutes = minutes; + proto$2.hours = hours; + proto$2.days = days; + proto$2.weeks = weeks; + proto$2.months = months; + proto$2.years = years; + proto$2.humanize = humanize; + proto$2.toISOString = toISOString$1; + proto$2.toString = toISOString$1; + proto$2.toJSON = toISOString$1; + proto$2.locale = locale; + proto$2.localeData = localeData; + + proto$2.toIsoString = deprecate( + 'toIsoString() is deprecated. Please use toISOString() instead (notice the capitals)', + toISOString$1 + ); + proto$2.lang = lang; + + // FORMATTING + + addFormatToken('X', 0, 0, 'unix'); + addFormatToken('x', 0, 0, 'valueOf'); + + // PARSING + + addRegexToken('x', matchSigned); + addRegexToken('X', matchTimestamp); + addParseToken('X', function (input, array, config) { + config._d = new Date(parseFloat(input) * 1000); + }); + addParseToken('x', function (input, array, config) { + config._d = new Date(toInt(input)); + }); + + //! moment.js + + hooks.version = '2.30.1'; + + setHookCallback(createLocal); + + hooks.fn = proto; + hooks.min = min; + hooks.max = max; + hooks.now = now; + hooks.utc = createUTC; + hooks.unix = createUnix; + hooks.months = listMonths; + hooks.isDate = isDate; + hooks.locale = getSetGlobalLocale; + hooks.invalid = createInvalid; + hooks.duration = createDuration; + hooks.isMoment = isMoment; + hooks.weekdays = listWeekdays; + hooks.parseZone = createInZone; + hooks.localeData = getLocale; + hooks.isDuration = isDuration; + hooks.monthsShort = listMonthsShort; + hooks.weekdaysMin = listWeekdaysMin; + hooks.defineLocale = defineLocale; + hooks.updateLocale = updateLocale; + hooks.locales = listLocales; + hooks.weekdaysShort = listWeekdaysShort; + hooks.normalizeUnits = normalizeUnits; + hooks.relativeTimeRounding = getSetRelativeTimeRounding; + hooks.relativeTimeThreshold = getSetRelativeTimeThreshold; + hooks.calendarFormat = getCalendarFormat; + hooks.prototype = proto; + + // currently HTML5 input type only supports 24-hour formats + hooks.HTML5_FMT = { + DATETIME_LOCAL: 'YYYY-MM-DDTHH:mm', // + DATETIME_LOCAL_SECONDS: 'YYYY-MM-DDTHH:mm:ss', // + DATETIME_LOCAL_MS: 'YYYY-MM-DDTHH:mm:ss.SSS', // + DATE: 'YYYY-MM-DD', // + TIME: 'HH:mm', // + TIME_SECONDS: 'HH:mm:ss', // + TIME_MS: 'HH:mm:ss.SSS', // + WEEK: 'GGGG-[W]WW', // + MONTH: 'YYYY-MM', // + }; + + return hooks; + +}))); diff --git a/clock-widget/script.js b/clock-widget/script.js new file mode 100644 index 0000000..691a8a5 --- /dev/null +++ b/clock-widget/script.js @@ -0,0 +1,19 @@ +//////////////////// +// URL PARAMETERS // +//////////////////// + +const queryString = window.location.search; +const urlParams = new URLSearchParams(queryString); +const dateFormat = urlParams.get("dateFormat") || 'ddd DD MMM yyyy hh:mm:ss A'; + +/////////////// +// FUNCTIONS // +/////////////// + +function setTime() +{ + document.getElementById("timeLabel").innerHTML = moment().format(dateFormat); + setTimeout(setTime, 1000); +} + +setTime(); \ No newline at end of file diff --git a/clock-widget/style.css b/clock-widget/style.css new file mode 100644 index 0000000..16ce01e --- /dev/null +++ b/clock-widget/style.css @@ -0,0 +1,19 @@ +* { + margin: 0; + padding: 0; +} + +#timeLabel { + font-size: 40px; + text-transform: uppercase; + font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica, Arial, sans-serif; + + font-weight: 700; + font-size: 36px; + text-shadow: rgb(0, 0, 0) 2px 2px 2px; + color: white; +} + +#mainContainer { + text-align: center; +} \ No newline at end of file diff --git a/horizontal-chat/icons/badges/youtube-broadcaster.svg b/horizontal-chat/icons/badges/youtube-broadcaster.svg new file mode 100644 index 0000000..655ca1c --- /dev/null +++ b/horizontal-chat/icons/badges/youtube-broadcaster.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/horizontal-chat/icons/badges/youtube-member.svg b/horizontal-chat/icons/badges/youtube-member.svg new file mode 100644 index 0000000..12720b9 --- /dev/null +++ b/horizontal-chat/icons/badges/youtube-member.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/horizontal-chat/icons/badges/youtube-moderator.svg b/horizontal-chat/icons/badges/youtube-moderator.svg new file mode 100644 index 0000000..45b2718 --- /dev/null +++ b/horizontal-chat/icons/badges/youtube-moderator.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/horizontal-chat/icons/badges/youtube-verified.svg b/horizontal-chat/icons/badges/youtube-verified.svg new file mode 100644 index 0000000..5e85909 --- /dev/null +++ b/horizontal-chat/icons/badges/youtube-verified.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/horizontal-chat/icons/platforms/twitch.png b/horizontal-chat/icons/platforms/twitch.png new file mode 100644 index 0000000..dcbd6c8 Binary files /dev/null and b/horizontal-chat/icons/platforms/twitch.png differ diff --git a/horizontal-chat/icons/platforms/youtube.png b/horizontal-chat/icons/platforms/youtube.png new file mode 100644 index 0000000..5abdb7b Binary files /dev/null and b/horizontal-chat/icons/platforms/youtube.png differ diff --git a/horizontal-chat/index.html b/horizontal-chat/index.html new file mode 100644 index 0000000..3dcfc33 --- /dev/null +++ b/horizontal-chat/index.html @@ -0,0 +1,38 @@ + + + + + + + + + + +
Connecting...
+
+ +
+
+
+
+ + + + + + + \ No newline at end of file diff --git a/horizontal-chat/script.js b/horizontal-chat/script.js new file mode 100644 index 0000000..51b3869 --- /dev/null +++ b/horizontal-chat/script.js @@ -0,0 +1,881 @@ +//////////////// +// PARAMETERS // +//////////////// + +const queryString = window.location.search; +const urlParams = new URLSearchParams(queryString); + +const sbServerAddress = urlParams.get("address") || "127.0.0.1"; +const sbServerPort = urlParams.get("port") || "8080"; +const minimumRole = 2; // 1 - Viewer, 2 - VIP, 3 - Moderator, 4 - Broadcaster +const avatarMap = new Map(); +const animationDuration = 8000; +let widgetLocked = false; // Needed to lock animation from overlapping +let alertQueue = []; + +///////////// +// OPTIONS // +///////////// + +const showPlatform = GetBooleanParam("showPlatform", true); +const showAvatar = GetBooleanParam("showAvatar", true); +const showTimestamps = GetBooleanParam("showTimestamps", false); +const showBadges = GetBooleanParam("showBadges", true); +const showPronouns = GetBooleanParam("showPronouns", false); +const showUsername = GetBooleanParam("showUsername", true); +const showMessage = GetBooleanParam("showMessage", true); +const font = urlParams.get("font") || ""; +const fontSize = urlParams.get("fontSize") || "18"; + +const hideAfter = GetIntParam("hideAfter") || 0; +const excludeCommands = GetBooleanParam("excludeCommands", true); +const ignoreChatters = urlParams.get("ignoreChatters") || ""; + +const showTwitchMessages = GetBooleanParam("showTwitchMessages", true); +const showTwitchAnnouncements = GetBooleanParam("showTwitchAnnouncements", true); +const showTwitchSubs = GetBooleanParam("showTwitchSubs", true); +const showTwitchRaids = GetBooleanParam("showTwitchRaids", true); + +const showYouTubeMessages = GetBooleanParam("showYouTubeMessages", true); +const showYouTubeSuperChats = GetBooleanParam("showYouTubeSuperChats", true); +const showYouTubeSuperStickers = GetBooleanParam("showYouTubeSuperStickers", true); +const showYouTubeMemberships = GetBooleanParam("showYouTubeMemberships", true); + +const showStreamlabsDonations = GetBooleanParam("showStreamlabsDonations", true) +const showStreamElementsTips = GetBooleanParam("showStreamElementsTips", true); + +// Set fonts for the widget +document.body.style.fontFamily = font; +document.body.style.fontSize = `${fontSize}px`; + +// Get a list of chatters to ignore +const ignoreUserList = ignoreChatters.split(',').map(item => item.trim().toLowerCase()) || []; + + + +///////////////////////// +// STREAMER.BOT CLIENT // +///////////////////////// + +const client = new StreamerbotClient({ + host: sbServerAddress, + port: sbServerPort, + + onConnect: (data) => { + console.log(`Streamer.bot successfully connected to ${sbServerAddress}:${sbServerPort}`) + console.debug(data); + SetConnectionStatus(true); + }, + + onDisconnect: () => { + console.error(`Streamer.bot disconnected from ${sbServerAddress}:${sbServerPort}`) + SetConnectionStatus(false); + } +}); + +client.on('Twitch.ChatMessage', (response) => { + console.debug(response.data); + TwitchChatMessage(response.data); +}) + +client.on('Twitch.Cheer', (response) => { + console.debug(response.data); + TwitchChatMessage(response.data); +}) + +client.on('Twitch.Announcement', (response) => { + console.debug(response.data); + TwitchAnnouncement(response.data); +}) + +client.on('Twitch.Sub', (response) => { + console.debug(response.data); + TwitchSub(response.data); +}) + +client.on('Twitch.ReSub', (response) => { + console.debug(response.data); + TwitchResub(response.data); +}) + +client.on('Twitch.GiftSub', (response) => { + console.debug(response.data); + TwitchGiftSub(response.data); +}) + +client.on('Twitch.GiftBomb', (response) => { + console.debug(response.data); + TwitchGiftBomb(response.data); +}) + +client.on('Twitch.Raid', (response) => { + console.debug(response.data); + TwitchRaid(response.data); +}) + +client.on('Twitch.ChatMessageDeleted', (response) => { + console.debug(response.data); + TwitchChatMessageDeleted(response.data); +}) + +client.on('Twitch.UserBanned', (response) => { + console.debug(response.data); + TwitchUserBanned(response.data); +}) + +client.on('Twitch.UserTimedOut', (response) => { + console.debug(response.data); + TwitchUserBanned(response.data); +}) + +client.on('Twitch.ChatCleared', (response) => { + console.debug(response.data); + TwitchChatCleared(response.data); +}) + +client.on('YouTube.Message', (response) => { + console.debug(response.data); + YouTubeMessage(response.data) +}) + +client.on('YouTube.SuperChat', (response) => { + console.debug(response.data); + YouTubeSuperChat(response.data); +}) + +client.on('YouTube.SuperSticker', (response) => { + console.debug(response.data); + YouTubeSuperSticker(response.data); +}) + +client.on('YouTube.NewSponsor', (response) => { + console.debug(response.data); + YouTubeNewSponsor(response.data); +}) + +client.on('YouTube.GiftMembershipReceived', (response) => { + console.debug(response.data); + YouTubeGiftMembershipReceived(); +}) + +client.on('Streamlabs.Donation', (response) => { + console.debug(response.data); + StreamlabsDonation(response.data); +}) + +client.on('StreamElements.Tip', (response) => { + console.debug(response.data); + StreamElementsTip(response.data); +}) + + + +///////////////////// +// HORIZONTAL CHAT // +///////////////////// + +async function TwitchChatMessage(data) { + if (!showTwitchMessages) + return; + + // Don't post messages starting with "!" + if (data.message.message.startsWith("!") && excludeCommands) + return; + + // Don't post messages from users from the ignore list + if (ignoreUserList.includes(data.message.username)) + return; + + // Get a reference to the template + const template = document.getElementById('messageTemplate'); + + // Create a new instance of the template + const instance = template.content.cloneNode(true); + + // Get divs + const messageContainer = instance.querySelector(".messageContainer"); + const userInfoDiv = instance.querySelector("#userInfo"); + const avatarDiv = instance.querySelector("#avatar"); + const timestampDiv = instance.querySelector("#timestamp"); + const platformDiv = instance.querySelector("#platform"); + const badgeListDiv = instance.querySelector("#badgeList"); + const pronounsDiv = instance.querySelector("#pronouns"); + const usernameDiv = instance.querySelector("#username"); + const messageDiv = instance.querySelector("#message"); + + // Set timestamp + if (showTimestamps) { + timestampDiv.classList.add("timestamp"); + timestampDiv.innerText = GetCurrentTimeFormatted(); + } + + // Set the username info + if (showUsername) { + usernameDiv.innerText = data.message.displayName; + usernameDiv.style.color = data.message.color; + } + + // Set pronouns + const pronouns = await GetPronouns('twitch', 'caffeinedaydream'); + if (pronouns && showPronouns) { + pronounsDiv.classList.add("pronouns"); + pronounsDiv.innerText = pronouns; + } + + // Set the message data + const message = data.message.message; + const messageColor = data.message.color; + + // Set message text + if (showMessage) { + messageDiv.innerText = message; + } + + // Set the "action" color + if (data.message.isMe) + messageDiv.style.color = messageColor; + + // Render platform + if (showPlatform) { + const platformElements = ``; + platformDiv.innerHTML = platformElements; + } + + + // Render badges + if (showBadges) { + badgeListDiv.innerHTML = ""; + for (i in data.message.badges) { + const badge = new Image(); + badge.src = data.message.badges[i].imageUrl; + badge.classList.add("badge"); + badgeListDiv.appendChild(badge); + } + } + + // Render emotes + for (i in data.emotes) { + const emoteElement = ``; + messageDiv.innerHTML = messageDiv.innerHTML.replace(new RegExp(`\\b${data.emotes[i].name}\\b`), emoteElement); + } + + // Render cheermotes + for (i in data.cheerEmotes) { + // const cheerEmoteElement = ``; + // messageDiv.innerHTML = messageDiv.innerHTML.replace(new RegExp(`\\b${data.cheerEmotes[i].name}\\b`), cheerEmoteElement); + const bits = data.cheerEmotes[i].bits; + const imageUrl = data.cheerEmotes[i].imageUrl; + const name = data.cheerEmotes[i].name; + const cheerEmoteElement = ``; + const bitsElements = `${bits}` + messageDiv.innerHTML = messageDiv.innerHTML.replace(new RegExp(`\\b${name}${bits}\\b`, 'i'), cheerEmoteElement + bitsElements); + } + + // Render avatars + if (showAvatar) { + const username = data.message.username; + const avatarURL = await GetAvatar(username); + const avatar = new Image(); + avatar.src = avatarURL; + avatar.classList.add("avatar"); + avatarDiv.appendChild(avatar); + } + + // Hide the header if the same username sends a message twice in a row + const messageList = document.getElementById("messageList"); + if (messageList.children.length > 0) { + const lastPlatform = messageList.lastChild.dataset.platform; + const lastUserId = messageList.lastChild.dataset.userId; + if (lastPlatform == "twitch" && lastUserId == data.user.id) + userInfoDiv.style.display = "none"; + } + + AddMessageItem(instance, data.message.msgId, 'twitch', data.user.id); +} + +async function TwitchAnnouncement(data) { + if (!showTwitchAnnouncements) + return; + + let background = null; + + // Set the card background colors + switch (data.announcementColor) { + case "BLUE": + background = 'announcementBlue'; + break; + case "GREEN": + background = 'announcementGreen'; + break; + case "ORANGE": + background = 'announcementOrange'; + break; + case "PURPLE": + background = 'announcementPurple'; + break; + } + + let message = data.text; + + // Render emotes + for (i in data.parts) { + if (data.parts[i].type == `emote`) { + const emoteElement = ``; + message = message.replace(new RegExp(`\\b${data.parts[i].text}\\b`), emoteElement); + } + } + + ShowAlert(message, background); +} + +async function TwitchSub(data) { + if (!showTwitchSubs) + return; + + const username = data.user.name; + const subTier = data.sub_tier; + const isPrime = data.is_prime; + + let message = ''; + + if (!isPrime) + message = `${username} subscribed with Tier ${subTier.charAt(0)}`; + else + message = `${username} used their Prime Sub`, 'twitch'; + + ShowAlert(message, 'twitch'); +} + +async function TwitchResub(data) { + if (!showTwitchSubs) + return; + + const username = data.user.name; + const subTier = data.subTier; + const isPrime = data.isPrime; + const cumulativeMonths = data.cumulativeMonths; + + let message = ''; + + if (!isPrime) + message = `${username} resubscribed with Tier ${subTier.charAt(0)} (${cumulativeMonths} months)`; + else + message = `${username} used their Prime Sub (${cumulativeMonths} months)`; + + ShowAlert(message, 'twitch'); +} + +async function TwitchGiftSub(data) { + if (!showTwitchSubs) + return; + + const username = data.user.name; + const subTier = data.subTier; + const recipient = data.recipient.name; + const fromCommunitySubGift = data.fromCommunitySubGift; + + // Don't post alerts for gift bombs + if (fromCommunitySubGift) + return; + + let message = `🎁 ${username} gifted a Tier ${subTier.charAt(0)} subscription to ${recipient}`; + + ShowAlert(message, 'twitch'); +} + +async function TwitchGiftBomb(data) { + if (!showTwitchSubs) + return; + + const username = data.displayName; + const gifts = data.gifts; + const subTier = data.subTier; + + let message = `🎁 ${username} gifted ${gifts} Tier ${subTier} subs!`; + + ShowAlert(message, 'twitch'); +} + +async function TwitchRaid(data) { + if (!showTwitchRaids) + return; + + const username = data.from_broadcaster_user_login; + const viewers = data.viewers; + + let message = `${username} is raiding with a party of ${viewers}`; + + ShowAlert(message, 'twitch'); +} + +function TwitchChatMessageDeleted(data) { + const messageList = document.getElementById("messageList"); + + // Maintain a list of chat messages to delete + const messagesToRemove = []; + + // ID of the message to remove + const messageId = data.messageId; + + // Find the items to remove + for (let i = 0; i < messageList.children.length; i++) { + if (messageList.children[i].id === messageId) { + messagesToRemove.push(messageList.children[i]); + } + } + + // Remove the items + messagesToRemove.forEach(item => { + messageList.removeChild(item); + }); +} + +function TwitchUserBanned(data) { + const messageList = document.getElementById("messageList"); + + // Maintain a list of chat messages to delete + const messagesToRemove = []; + + // ID of the message to remove + const userId = data.user_id; + + // Find the items to remove + for (let i = 0; i < messageList.children.length; i++) { + if (messageList.children[i].dataset.userId === userId) { + messagesToRemove.push(messageList.children[i]); + } + } + + // Remove the items + messagesToRemove.forEach(item => { + messageList.removeChild(item); + }); +} + +function TwitchChatCleared(data) { + const messageList = document.getElementById("messageList"); + + while (messageList.firstChild) { + messageList.removeChild(messageList.firstChild); + } +} + +function YouTubeMessage(data) { + if (!showYouTubeMessages) + return; + + // Don't post messages starting with "!" + if (data.message.startsWith("!") && excludeCommands) + return; + + // Don't post messages from users from the ignore list + if (ignoreUserList.includes(data.user.name)) + return; + + // Get a reference to the template + const template = document.getElementById('messageTemplate'); + + // Create a new instance of the template + const instance = template.content.cloneNode(true); + + // Get divs + const userInfoDiv = instance.querySelector("#userInfo"); + const avatarDiv = instance.querySelector("#avatar"); + const timestampDiv = instance.querySelector("#timestamp"); + const platformDiv = instance.querySelector("#platform"); + const badgeListDiv = instance.querySelector("#badgeList"); + const usernameDiv = instance.querySelector("#username"); + const messageDiv = instance.querySelector("#message"); + + // Set timestamp + if (showTimestamps) { + timestampDiv.classList.add("timestamp"); + timestampDiv.innerText = GetCurrentTimeFormatted(); + } + + // Set the message data + if (showUsername) { + usernameDiv.innerText = data.user.name; + usernameDiv.style.color = "#f70000"; // YouTube users do not have colors, so just set it to red + } + + if (showMessage) { + messageDiv.innerText = data.message; + } + + // Render platform + if (showPlatform) { + const platformElements = ``; + platformDiv.innerHTML = platformElements; + } + + // Render badges + if (data.user.isOwner && showBadges) { + const badge = new Image(); + badge.src = `icons/badges/youtube-broadcaster.svg`; + badge.style.filter = `invert(100%)`; + badge.style.opacity = 0.8; + badge.classList.add("badge"); + badgeListDiv.appendChild(badge); + } + + if (data.user.isModerator && showBadges) { + const badge = new Image(); + badge.src = `icons/badges/youtube-moderator.svg`; + badge.style.filter = `invert(100%)`; + badge.style.opacity = 0.8; + badge.classList.add("badge"); + badgeListDiv.appendChild(badge); + } + + if (data.user.isSponsor && showBadges) { + const badge = new Image(); + badge.src = `icons/badges/youtube-member.svg`; + badge.style.filter = `invert(100%)`; + badge.style.opacity = 0.8; + badge.classList.add("badge"); + badgeListDiv.appendChild(badge); + } + + if (data.user.isVerified && showBadges) { + const badge = new Image(); + badge.src = `icons/badges/youtube-verified.svg`; + badge.style.filter = `invert(100%)`; + badge.style.opacity = 0.8; + badge.classList.add("badge"); + badgeListDiv.appendChild(badge); + } + + // Render emotes + for (i in data.emotes) { + const emoteElement = ``; + messageDiv.innerHTML = messageDiv.innerHTML.replace(data.emotes[i].name, emoteElement); + } + + // Render avatars + if (showAvatar) { + const avatar = new Image(); + avatar.src = data.user.profileImageUrl; + avatar.classList.add("avatar"); + avatarDiv.appendChild(avatar); + } + + // Hide the header if the same username sends a message twice in a row + const messageList = document.getElementById("messageList"); + if (messageList.children.length > 0) { + const lastPlatform = messageList.lastChild.dataset.platform; + const lastUserId = messageList.lastChild.dataset.userId; + if (lastPlatform == "youtube" && lastUserId == data.user.id) + userInfoDiv.style.display = "none"; + } + + AddMessageItem(instance, data.eventId, 'youtube', data.user.id); +} + +function YouTubeSuperChat(data) { + if (!showYouTubeSuperChats) + return; + + let message = `🪙 ${data.user.name} sent a Super Chat (${data.amount})`; + + ShowAlert(message, 'youtube'); +} + +function YouTubeSuperSticker(data) { + if (!showYouTubeSuperStickers) + return; + + let message = `${data.user.name} sent a Super Sticker (${data.amount})`; + + ShowAlert(message, 'youtube'); +} + +function YouTubeNewSponsor(data) { + if (!showYouTubeMemberships) + return; + + // Set message text + let message = `⭐ New ${data.levelName} • Welcome ${data.user.name}!`; + + ShowAlert(message, 'youtube'); +} + +function YouTubeGiftMembershipReceived(data) { + if (!showYouTubeMemberships) + return; + + let message = `🎁 ${data.gifter.name} gifted a membership to ${data.user.name} (${data.tier})!`; + + ShowAlert(message, 'youtube'); +} + +function StreamlabsDonation(data) { + if (!showStreamlabsDonations) + return; + + const donater = data.from; + const formattedAmount = data.formattedAmount; + const currency = data.currency; + + let message = `🪙 ${donater} donated ${currency}${formattedAmount}`; + + ShowAlert(message, 'streamlabs'); +} + +function StreamElementsTip(data) { + if (!showStreamElementsTips) + return; + + const donater = data.username; + const formattedAmount = `$${data.amount}`; + const currency = data.currency; + + let message = `🪙 ${donater} donated ${currency}${formattedAmount}`; + + ShowAlert(message, 'streamelements'); +} + + + +////////////////////// +// HELPER FUNCTIONS // +////////////////////// + +function GetBooleanParam(paramName, defaultValue) { + const urlParams = new URLSearchParams(window.location.search); + const paramValue = urlParams.get(paramName); + + if (paramValue === null) { + return defaultValue; // Parameter not found + } + + const lowercaseValue = paramValue.toLowerCase(); // Handle case-insensitivity + + if (lowercaseValue === 'true') { + return true; + } else if (lowercaseValue === 'false') { + return false; + } else { + return paramValue; // Return original string if not 'true' or 'false' + } +} + +function GetIntParam(paramName) { + const urlParams = new URLSearchParams(window.location.search); + const paramValue = urlParams.get(paramName); + + if (paramValue === null) { + return null; // or undefined, or a default value, depending on your needs + } + + const intValue = parseInt(paramValue, 10); // Parse as base 10 integer + + if (isNaN(intValue)) { + return null; // or handle the error in another way, e.g., throw an error + } + + return intValue; +} + +function GetCurrentTimeFormatted() { + const now = new Date(); + let hours = now.getHours(); + const minutes = String(now.getMinutes()).padStart(2, '0'); + const ampm = hours >= 12 ? 'PM' : 'AM'; + + hours = hours % 12; + hours = hours ? hours : 12; // the hour '0' should be '12' + + const formattedTime = `${hours}:${minutes} ${ampm}`; + return formattedTime; +} + +async function GetAvatar(username) { + if (avatarMap.has(username)) { + console.debug(`Avatar found for ${username}. Retrieving from hash map.`) + return avatarMap.get(username); + } + else { + console.debug(`No avatar found for ${username}. Retrieving from Decapi.`) + let response = await fetch('https://decapi.me/twitch/avatar/' + username); + let data = await response.text() + avatarMap.set(username, data); + return data; + } +} + +async function GetPronouns(platform, username) { + const response = await client.getUserPronouns(platform, username); + const userFound = response.pronoun.userFound; + const pronouns = `${response.pronoun.pronounSubject}/${response.pronoun.pronounObject}`; + + if (userFound) + return `${response.pronoun.pronounSubject}/${response.pronoun.pronounObject}`; + else + return ''; +} + +function AddMessageItem(element, elementID, platform, userId) { + // Calculate the height of the div before inserting + const tempDiv = document.getElementById('IPutThisHereSoICanCalculateHowBigEachMessageIsSupposedToBeBeforeIAddItToTheMessageList'); + tempDiv.appendChild(element); + + setTimeout(function () { + const calculatedWidth = tempDiv.offsetWidth + "px"; + //console.log(calculatedWidth); + + // Create a new line item to add to the message list later + var lineItem = document.createElement('li'); + lineItem.id = elementID; + lineItem.dataset.platform = platform; + lineItem.dataset.userId = userId; + + // Move the element from the temp div to the new line item + while (tempDiv.firstChild) { + lineItem.appendChild(tempDiv.firstChild); + } + + // Add the line item to the list and animate it + // We need to manually set the height as straight CSS can't animate on "height: auto" + messageList.appendChild(lineItem); + setTimeout(function () { + lineItem.className = lineItem.className + " show"; + lineItem.style.width = calculatedWidth; + }, 10); + + // Remove old messages that have gone off screen to save memory + while (messageList.clientWidth > 10 * window.innerWidth) { + messageList.removeChild(messageList.firstChild); + } + + tempDiv.innerHTML = ''; + + if (hideAfter > 0) + { + setTimeout(function () { + lineItem.style.opacity = 0; + setTimeout(function() { + messageList.removeChild(lineItem); + }, 1000); + }, hideAfter * 1000); + } + + }, 200); +} + +// I used Gemini for this shit so if it doesn't work, blame Google +function FindFirstImageUrl(jsonObject) { + if (typeof jsonObject !== 'object' || jsonObject === null) { + return null; // Handle invalid input + } + + function iterate(obj) { + if (Array.isArray(obj)) { + for (const item of obj) { + const result = iterate(item); + if (result) { + return result; + } + } + return null; + } + + for (const key in obj) { + if (obj.hasOwnProperty(key)) { + if (key === 'imageUrl') { + return obj[key]; // Found it! Return the value. + } + + if (typeof obj[key] === 'object' && obj[key] !== null) { + const result = iterate(obj[key]); // Recursive call for nested objects + if (result) { + return result; // Propagate the found value + } + } + } + } + return null; // Key not found in this level + } + + return iterate(jsonObject); +} + +function ShowAlert(message, background = null, duration = animationDuration) { + + // Check if the widget is in the middle of an animation + // If any alerts are requested while the animation is playing, it should be added to the alert queue + if (widgetLocked) { + console.debug("Animation is progress, added alert to queue"); + let data = { message: message, background: background, duration: duration }; + alertQueue.push(data); + return; + } + + // Get divs + const messageListDiv = document.querySelector("#messageList"); + const alertBoxDiv = document.querySelector("#alertBox"); + + // Set the message text + alertBoxDiv.innerHTML = message; + + // Set the background + alertBoxDiv.classList.add(background); + + // Start the animation + widgetLocked = true; + messageListDiv.style.animation = 'hideAlertBox 0.5s ease-in-out forwards'; + alertBoxDiv.style.animation = 'showAlertBox 0.5s ease-in-out forwards'; + + // To stop the animation (remove the animation property): + setTimeout(() => { + messageListDiv.style.animation = 'showAlertBox 0.5s ease-in-out forwards'; + alertBoxDiv.style.animation = 'hideAlertBox 0.5s ease-in-out forwards'; + setTimeout(() => { + alertBoxDiv.classList = ''; + widgetLocked = false; + if (alertQueue.length > 0) { + console.debug("Pulling next alert from the queue"); + let data = alertQueue.shift(); + ShowAlert(data.message, data.background, data.duration); + } + }, 500); + }, duration); // Remove after 5 seconds +} + + + +/////////////////////////////////// +// STREAMER.BOT WEBSOCKET STATUS // +/////////////////////////////////// + +// This function sets the visibility of the Streamer.bot status label on the overlay +function SetConnectionStatus(connected) { + let statusContainer = document.getElementById("statusContainer"); + if (connected) { + statusContainer.style.background = "#2FB774"; + statusContainer.innerText = "Connected!"; + statusContainer.style.opacity = 1; + setTimeout(() => { + statusContainer.style.transition = "all 2s ease"; + statusContainer.style.opacity = 0; + }, 10); + } + else { + statusContainer.style.background = "#D12025"; + statusContainer.innerText = "Connecting..."; + statusContainer.style.transition = ""; + statusContainer.style.opacity = 1; + } +} + +// let data = { +// "isAnonymous": false, +// "gifts": 10, +// "totalGifts": 0, +// "subTier": 1, /* 0 - Prime, 1 - Tier 1, 2 - Tier 2, 3 - Tier 3 */ +// "userName": "", +// "displayName": "", +// "role": 1 /* 1 - Viewer, 2 - VIP, 3 - Moderator, 4 - Broadcaster */ +// } + +// TwitchGiftBomb(data); \ No newline at end of file diff --git a/horizontal-chat/settings/index.html b/horizontal-chat/settings/index.html new file mode 100644 index 0000000..c4eabbf --- /dev/null +++ b/horizontal-chat/settings/index.html @@ -0,0 +1,64 @@ + + + + + + + Settings + + + + + + + +
+ +
+ + + + + + \ No newline at end of file diff --git a/horizontal-chat/settings/script.js b/horizontal-chat/settings/script.js new file mode 100644 index 0000000..218576d --- /dev/null +++ b/horizontal-chat/settings/script.js @@ -0,0 +1,29 @@ +let settingsContainer = document.getElementById('settings-container'); +settingsContainer.src = `https://nuttylmao.github.io/widget-customizer?settingsJson=${window.location.href}/settings.json` +console.log(settingsContainer.src); + +function reloadWidget(data) { + let widget = document.getElementById("widget"); + widget.src = `${getParentUrl()}?${data}`; +} + +function getParentUrl() { + const currentUrl = window.location.href; + const urlParts = currentUrl.split('/'); + + // Remove the last part of the URL (the current page/file) + urlParts.pop(); + + // Remove the last part again to go one directory up + urlParts.pop(); + + // Reconstruct the URL + const parentUrl = urlParts.join('/'); + + // Ensure there's a trailing slash if necessary (if it was a directory) + if (urlParts.length > 2 && !parentUrl.endsWith('/')) { + return parentUrl + '/'; + } + + return parentUrl; +} \ No newline at end of file diff --git a/horizontal-chat/settings/settings.json b/horizontal-chat/settings/settings.json new file mode 100644 index 0000000..cb27829 --- /dev/null +++ b/horizontal-chat/settings/settings.json @@ -0,0 +1,200 @@ +{ + "settings": [ + { + "id": "showPlatform", + "label": "Show Platform", + "description": "", + "type": "checkbox", + "defaultValue": true, + "group": "Appearance" + }, + { + "id": "showAvatar", + "label": "Show Avatar", + "description": "", + "type": "checkbox", + "defaultValue": true, + "group": "Appearance" + }, + { + "id": "showTimestamps", + "label": "Show Timestamps", + "description": "", + "type": "checkbox", + "defaultValue": false, + "group": "Appearance" + }, + { + "id": "showBadges", + "label": "Show Badges", + "description": "", + "type": "checkbox", + "defaultValue": true, + "group": "Appearance" + }, + { + "id": "showPronouns", + "label": "Show Pronouns", + "description": "", + "type": "checkbox", + "defaultValue": false, + "group": "Appearance" + }, + { + "id": "showUsername", + "label": "Show Username", + "description": "", + "type": "checkbox", + "defaultValue": true, + "group": "Appearance" + }, + { + "id": "showMessage", + "label": "Show Message", + "description": "Honestly, if you turn this off, you're stupid lmao", + "type": "checkbox", + "defaultValue": true, + "group": "Appearance" + }, + { + "id": "font", + "label": "Font", + "description": "", + "type": "text", + "defaultValue": "", + "group": "Appearance" + }, + { + "id": "fontSize", + "label": "Font Size", + "description": "", + "type": "number", + "min": 1, + "max": 120, + "defaultValue": 18, + "group": "Appearance" + }, + { + "id": "hideAfter", + "label": "Hide After", + "description": "Messages fade after X seconds (0 to disable)", + "type": "number", + "min": 0, + "max": 120, + "defaultValue": 0, + "group": "General" + }, + { + "id": "excludeCommands", + "label": "Exclude Commands", + "description": "Hide messages starting with \"!\"", + "type": "checkbox", + "defaultValue": true, + "group": "General" + }, + { + "id": "ignoreChatters", + "label": "Ignore Chatters", + "description": "Ignored chatters will not be shown", + "type": "text", + "defaultValue": "StreamElements,Streamlabs", + "group": "General" + }, + { + "id": "showTwitchMessages", + "label": "Chat Messages", + "description": "", + "type": "checkbox", + "defaultValue": true, + "group": "Which Twitch messages do you want to see?" + }, + { + "id": "showTwitchAnnouncements", + "label": "Announcements", + "description": "", + "type": "checkbox", + "defaultValue": true, + "group": "Which Twitch messages do you want to see?" + }, + { + "id": "showTwitchSubs", + "label": "New Subscribers", + "description": "", + "type": "checkbox", + "defaultValue": true, + "group": "Which Twitch messages do you want to see?" + }, + { + "id": "showTwitchRaids", + "label": "Raids", + "description": "", + "type": "checkbox", + "defaultValue": true, + "group": "Which Twitch messages do you want to see?" + }, + { + "id": "showYouTubeMessages", + "label": "Chat Messages", + "description": "", + "type": "checkbox", + "defaultValue": true, + "group": "Which YouTube messages do you want to see?" + }, + { + "id": "showYouTubeSuperChats", + "label": "Super Chats", + "description": "", + "type": "checkbox", + "defaultValue": true, + "group": "Which YouTube messages do you want to see?" + }, + { + "id": "showYouTubeSuperStickers", + "label": "Super Stickers", + "description": "", + "type": "checkbox", + "defaultValue": true, + "group": "Which YouTube messages do you want to see?" + }, + { + "id": "showYouTubeMemberships", + "label": "Memberships", + "description": "", + "type": "checkbox", + "defaultValue": true, + "group": "Which YouTube messages do you want to see?" + }, + { + "id": "showStreamlabsDonations", + "label": "Streamlabs Tips", + "description": "", + "type": "checkbox", + "defaultValue": true, + "group": "Which donation messages do you want to see?" + }, + { + "id": "showStreamElementsTips", + "label": "StreamElements Tips", + "description": "", + "type": "checkbox", + "defaultValue": true, + "group": "Which donation messages do you want to see?" + }, + { + "id": "address", + "label": "Address", + "description": "Streamer.bot Websocket Server Address", + "type": "text", + "defaultValue": "127.0.0.1", + "group": "Advanced" + }, + { + "id": "port", + "label": "Port", + "description": "Streamer.bot Websocket Server Port", + "type": "text", + "defaultValue": "8080", + "group": "Advanced" + } + ] +} \ No newline at end of file diff --git a/horizontal-chat/style.css b/horizontal-chat/style.css new file mode 100644 index 0000000..8129eb6 --- /dev/null +++ b/horizontal-chat/style.css @@ -0,0 +1,303 @@ +* { + margin: 0; + padding: 0; + --margin: 0px; + --border-radius: 20px; +} + +html { + width: 100vw; + height: 100vh; + scroll-behavior: smooth; + /* background: rgba(0, 0, 0, 0.884); */ + font-size: 18px; + font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica, Arial, sans-serif; + color: white; + text-shadow: 2px 2px 5px rgba(0, 0, 0, 0.5); + overflow-wrap: break-word; +} + +#statusContainer { + font-weight: 500; + font-size: 30px; + text-align: center; + background-color: #D12025; + color: white; + padding: 10px; + border-radius: 10px; + position: absolute; + top: 50%; + left: 50%; + transform: translate(-50%, -50%); +} + +#mainContainer { + position: absolute; + height: calc(100% - 2 * var(--margin)); + width: calc(100% - 2 * var(--margin)); + margin: var(--margin); +} + +#messageList { + position: absolute; + bottom: 0; + right: 0; + display: flex; + flex-direction: row; + flex-wrap: nowrap; + text-justify: right; + overflow: hidden; + white-space: nowrap; +} + +#alertBox { + position: absolute; + bottom: 0; + right: 50%; + transform: translateX(50%); + overflow: hidden; + white-space: nowrap; + + font-weight: 700; + line-height: 1.7em; + width: 100%; + text-align: center; + bottom: calc(-1 * var(--margin) - 2em); +} + +@keyframes showAlertBox { + 0% { + bottom: calc(-1 * var(--margin) - 2em); + } + 100% { + bottom: 0px; + } +} + +@keyframes hideAlertBox { + 0% { + bottom: 0px; + } + 100% { + bottom: calc(-1 * var(--margin) - 2em); + } +} + +li { + list-style: none; + overflow: hidden; + width: 0px; + transition: all 1s ease-in-out; +} + +.slide-fade li { + transition: all 1s ease-out; + opacity: 1; +} + +.slide-fade li.show { + opacity: 1; +} + +#IPutThisHereSoICanCalculateHowBigEachMessageIsSupposedToBeBeforeIAddItToTheMessageList { + /* margin-top: 10px; */ + background: #2FB774; + display: inline; + opacity: 0; + overflow: hidden; + white-space: nowrap; +} + +.avatar { + height: 1em; + margin: 1px; + transform: translate(0px, 0.25em); + border-radius: 50% +} + +.timestamp, +.pronouns { + background: #adadad46; + /* border-radius: var(--border-radius); */ + border-radius: 1em; + font-size: 0.7em; + /* padding: 5px 15px; */ + padding: 0.15em 0.5em; + +} + +.bits { + background: #adadad46; + border-radius: calc(var(--border-radius) / 2); + font-size: 0.7em; + padding: 5px 10px; +} + +.platform, +.badge, +.emote { + height: 1em; + margin: 1px; + transform: translate(0px, 0.25em); +} + +#badgeList { + margin: 0px 5px; +} + +#username, +#title { + font-weight: 700; +} + +.title { + font-weight: 700; +} + +#message { + font-weight: 700; + line-height: 1.7em; + margin: 0px 5px; +} + +/* .firstMessage { + display: none; + font-size: 0.7em; +} */ + +/* .firstMessageHighlight { + background: #adadad46; + padding: 20px 40px; + border-radius: var(--border-radius); +} */ + +/* .reply { + display: none; + overflow: hidden; + white-space: nowrap; + text-overflow: ellipsis; + font-size: 0.7em; + opacity: 0.5; +} */ + +/* .card { + background: #adadad46; + padding: 20px 40px; + border-radius: var(--border-radius); +} */ + +/* .youtube-super-sticker { + display: block; +} */ + +/* .sticker-img { + height: 5em; +} */ + +/*****************/ +/** CARD COLORS **/ +/*****************/ + +.announcementBlue { + background: linear-gradient(#03d3d7BF, #8d49feBF) !important; +} + +.announcementGreen { + background: linear-gradient(#01da86BF, #55bee4BF) !important; +} + +.announcementOrange { + background: linear-gradient(#feb419BF, #e1df00BF) !important; +} + +.announcementPurple { + background: linear-gradient(#9548ffBF, #fc74e6BF) !important; +} + +.twitch { + background: linear-gradient(#6d5ca1bf, #9146ffBF) !important; +} + +.youtube { + background: linear-gradient(#FF6C60BF, #FF0707BF) !important; +} + +.streamlabs { + background: linear-gradient(#73dabbbf, #397765bf) !important; +} + +.streamelements { + background: linear-gradient(#263b8abf, #0a112abf) !important; +} + +/****************/ +/** ANIMATIONS **/ +/****************/ + +.statusConnected { + animation-name: statusConnected; + animation-duration: 2s; + animation-fill-mode: forwards; +} + +.statusDisconnected { + animation-name: statusDisconnected; + animation-duration: 0.5s; + animation-fill-mode: forwards; +} + +@keyframes statusConnected { + 0% { + opacity: 1; + background-color: #2FB774; + } + + 100% { + opacity: 0; + background-color: #2FB774; + } +} + +@keyframes statusDisconnected { + 0% { + background-color: #D12025; + } + + 100% { + background-color: #D12025; + } +} + +/* +#message { + display: none; +} + +#username { + display: none; +} + +#colon-separator { + display: none; +} + +#avatar { + display: none; +} + +#platform { + display: none; +} + +#badgeList { + display: none; +} + +#timestamp { + display: none; +} + +#pronouns { + display: none; +} +*/ \ No newline at end of file diff --git a/multichat-overlay/icons/badges/youtube-broadcaster.svg b/multichat-overlay/icons/badges/youtube-broadcaster.svg new file mode 100644 index 0000000..655ca1c --- /dev/null +++ b/multichat-overlay/icons/badges/youtube-broadcaster.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/multichat-overlay/icons/badges/youtube-member.svg b/multichat-overlay/icons/badges/youtube-member.svg new file mode 100644 index 0000000..12720b9 --- /dev/null +++ b/multichat-overlay/icons/badges/youtube-member.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/multichat-overlay/icons/badges/youtube-moderator.svg b/multichat-overlay/icons/badges/youtube-moderator.svg new file mode 100644 index 0000000..45b2718 --- /dev/null +++ b/multichat-overlay/icons/badges/youtube-moderator.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/multichat-overlay/icons/badges/youtube-verified.svg b/multichat-overlay/icons/badges/youtube-verified.svg new file mode 100644 index 0000000..5e85909 --- /dev/null +++ b/multichat-overlay/icons/badges/youtube-verified.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/multichat-overlay/icons/platforms/twitch.png b/multichat-overlay/icons/platforms/twitch.png new file mode 100644 index 0000000..dcbd6c8 Binary files /dev/null and b/multichat-overlay/icons/platforms/twitch.png differ diff --git a/multichat-overlay/icons/platforms/youtube.png b/multichat-overlay/icons/platforms/youtube.png new file mode 100644 index 0000000..5abdb7b Binary files /dev/null and b/multichat-overlay/icons/platforms/youtube.png differ diff --git a/multichat-overlay/index.html b/multichat-overlay/index.html new file mode 100644 index 0000000..2195660 --- /dev/null +++ b/multichat-overlay/index.html @@ -0,0 +1,70 @@ + + + + + + + + + + +
Connecting...
+
+
    +
+
+
+
+ + + + + + + + + + + \ No newline at end of file diff --git a/multichat-overlay/script.js b/multichat-overlay/script.js new file mode 100644 index 0000000..76199e3 --- /dev/null +++ b/multichat-overlay/script.js @@ -0,0 +1,1406 @@ +//////////////// +// PARAMETERS // +//////////////// + +const queryString = window.location.search; +const urlParams = new URLSearchParams(queryString); + +const sbServerAddress = urlParams.get("address") || "127.0.0.1"; +const sbServerPort = urlParams.get("port") || "8080"; +const avatarMap = new Map(); + +///////////// +// OPTIONS // +///////////// + +const showPlatform = GetBooleanParam("showPlatform", true); +const showAvatar = GetBooleanParam("showAvatar", true); +const showTimestamps = GetBooleanParam("showTimestamps", true); +const showBadges = GetBooleanParam("showBadges", true); +const showPronouns = GetBooleanParam("showPronouns", true); +const showUsername = GetBooleanParam("showUsername", true); +const showMessage = GetBooleanParam("showMessage", true); +const font = urlParams.get("font") || ""; +const fontSize = urlParams.get("fontSize") || "30"; +const background = urlParams.get("background") || "#000000"; +const opacity = urlParams.get("opacity") || "0.85"; + +const hideAfter = GetIntParam("hideAfter") || 0; +const excludeCommands = GetBooleanParam("excludeCommands", true); +const ignoreChatters = urlParams.get("ignoreChatters") || ""; +const scrollDirection = GetIntParam("scrollDirection") || 1; +const imageEmbedPermissionLevel = GetIntParam("imageEmbedPermissionLevel") || 20; + +const showTwitchMessages = GetBooleanParam("showTwitchMessages", true); +const showTwitchAnnouncements = GetBooleanParam("showTwitchAnnouncements", true); +const showTwitchSubs = GetBooleanParam("showTwitchSubs", true); +const showTwitchRaids = GetBooleanParam("showTwitchRaids", true); + +const showYouTubeMessages = GetBooleanParam("showYouTubeMessages", true); +const showYouTubeSuperChats = GetBooleanParam("showYouTubeSuperChats", true); +const showYouTubeSuperStickers = GetBooleanParam("showYouTubeSuperStickers", true); +const showYouTubeMemberships = GetBooleanParam("showYouTubeMemberships", true); + +const showStreamlabsDonations = GetBooleanParam("showStreamlabsDonations", true) +const showStreamElementsTips = GetBooleanParam("showStreamElementsTips", true); + +// Set fonts for the widget +document.body.style.fontFamily = font; +document.body.style.fontSize = `${fontSize}px`; + +// Set the background color +const opacity255 = Math.round(parseFloat(opacity) * 255); +let hexOpacity = opacity255.toString(16); +if (hexOpacity.length < 2) { + hexOpacity = "0" + hexOpacity; +} +document.body.style.background = `${background}${hexOpacity}`; + +// Get a list of chatters to ignore +const ignoreUserList = ignoreChatters.split(',').map(item => item.trim().toLowerCase()) || []; + +// Set the scroll direction + +switch (scrollDirection) +{ + case 1: + document.getElementById('messageList').classList.add('normalScrollDirection'); + break; + case 2: + document.getElementById('messageList').classList.add('reverseScrollDirection'); + break; +} + + + + +///////////////////////// +// STREAMER.BOT CLIENT // +///////////////////////// + +const client = new StreamerbotClient({ + host: sbServerAddress, + port: sbServerPort, + + onConnect: (data) => { + console.log(`Streamer.bot successfully connected to ${sbServerAddress}:${sbServerPort}`) + console.debug(data); + SetConnectionStatus(true); + }, + + onDisconnect: () => { + console.error(`Streamer.bot disconnected from ${sbServerAddress}:${sbServerPort}`) + SetConnectionStatus(false); + } +}); + +client.on('Twitch.ChatMessage', (response) => { + console.debug(response.data); + TwitchChatMessage(response.data); +}) + +client.on('Twitch.Cheer', (response) => { + console.debug(response.data); + TwitchChatMessage(response.data); +}) + +client.on('Twitch.AutomaticRewardRedemption', (response) => { + console.debug(response.data); + TwitchAutomaticRewardRedemption(response.data); +}) + +client.on('Twitch.Announcement', (response) => { + console.debug(response.data); + TwitchAnnouncement(response.data); +}) + +client.on('Twitch.Sub', (response) => { + console.debug(response.data); + TwitchSub(response.data); +}) + +client.on('Twitch.ReSub', (response) => { + console.debug(response.data); + TwitchResub(response.data); +}) + +client.on('Twitch.GiftSub', (response) => { + console.debug(response.data); + TwitchGiftSub(response.data); +}) + +client.on('Twitch.Raid', (response) => { + console.debug(response.data); + TwitchRaid(response.data); +}) + +client.on('Twitch.ChatMessageDeleted', (response) => { + console.debug(response.data); + TwitchChatMessageDeleted(response.data); +}) + +client.on('Twitch.UserBanned', (response) => { + console.debug(response.data); + TwitchUserBanned(response.data); +}) + +client.on('Twitch.UserTimedOut', (response) => { + console.debug(response.data); + TwitchUserBanned(response.data); +}) + +client.on('Twitch.ChatCleared', (response) => { + console.debug(response.data); + TwitchChatCleared(response.data); +}) + +client.on('YouTube.Message', (response) => { + console.debug(response.data); + YouTubeMessage(response.data) +}) + +client.on('YouTube.SuperChat', (response) => { + console.debug(response.data); + YouTubeSuperChat(response.data); +}) + +client.on('YouTube.SuperSticker', (response) => { + console.debug(response.data); + YouTubeSuperSticker(response.data); +}) + +client.on('YouTube.NewSponsor', (response) => { + console.debug(response.data); + YouTubeNewSponsor(response.data); +}) + +client.on('YouTube.GiftMembershipReceived', (response) => { + console.debug(response.data); + YouTubeGiftMembershipReceived(response.data); +}) + +client.on('Streamlabs.Donation', (response) => { + console.debug(response.data); + StreamlabsDonation(response.data); +}) + +client.on('StreamElements.Tip', (response) => { + console.debug(response.data); + StreamElementsTip(response.data); +}) + + + +/////////////////////// +// MULTICHAT OVERLAY // +/////////////////////// + +async function TwitchChatMessage(data) { + if (!showTwitchMessages) + return; + + // Don't post messages starting with "!" + if (data.message.message.startsWith("!") && excludeCommands) + return; + + // Don't post messages from users from the ignore list + if (ignoreUserList.includes(data.message.username)) + return; + + // Get a reference to the template + const template = document.getElementById('messageTemplate'); + + // Create a new instance of the template + const instance = template.content.cloneNode(true); + + // Get divs + const messageContainerDiv = instance.querySelector("#messageContainer"); + const firstMessageDiv = instance.querySelector("#firstMessage"); + const replyDiv = instance.querySelector("#reply"); + const replyUserDiv = instance.querySelector("#replyUser"); + const replyMsgDiv = instance.querySelector("#replyMsg"); + const userInfoDiv = instance.querySelector("#userInfo"); + const avatarDiv = instance.querySelector("#avatar"); + const timestampDiv = instance.querySelector("#timestamp"); + const platformDiv = instance.querySelector("#platform"); + const badgeListDiv = instance.querySelector("#badgeList"); + const pronounsDiv = instance.querySelector("#pronouns"); + const usernameDiv = instance.querySelector("#username"); + const messageDiv = instance.querySelector("#message"); + + // Set First Time Chatter + const firstMessage = data.message.firstMessage; + if (firstMessage && showMessage) { + firstMessageDiv.style.display = 'block'; + messageContainerDiv.classList.add("firstMessageHighlight"); + } + + // Set Reply Message + const isReply = data.message.isReply; + if (isReply && showMessage) { + const replyUser = data.message.reply.userName; + const replyMsg = data.message.reply.msgBody; + + replyDiv.style.display = 'block'; + replyUserDiv.innerText = replyUser; + replyMsgDiv.innerText = replyMsg; + } + + // Set timestamp + if (showTimestamps) { + timestampDiv.classList.add("timestamp"); + timestampDiv.innerText = GetCurrentTimeFormatted(); + } + + // Set the username info + if (showUsername) { + usernameDiv.innerText = data.message.displayName; + usernameDiv.style.color = data.message.color; + } + + // Set pronouns + const pronouns = await GetPronouns('twitch', data.message.username); + if (pronouns && showPronouns) { + pronounsDiv.classList.add("pronouns"); + pronounsDiv.innerText = pronouns; + } + + // Set the message data + const message = data.message.message; + const messageColor = data.message.color; + const role = data.message.role; + + // Set message text + if (showMessage) { + messageDiv.innerText = message; + } + + // Set the "action" color + if (data.message.isMe) + messageDiv.style.color = messageColor; + + // Render platform + if (showPlatform) { + const platformElements = ``; + platformDiv.innerHTML = platformElements; + } + + // Render badges + if (showBadges) { + badgeListDiv.innerHTML = ""; + for (i in data.message.badges) { + const badge = new Image(); + badge.src = data.message.badges[i].imageUrl; + badge.classList.add("badge"); + badgeListDiv.appendChild(badge); + } + } + + // Render emotes + for (i in data.emotes) { + const emoteElement = ``; + messageDiv.innerHTML = messageDiv.innerHTML.replace(new RegExp(`\\b${data.emotes[i].name}\\b`), emoteElement); + } + + // Render cheermotes + for (i in data.cheerEmotes) { + const bits = data.cheerEmotes[i].bits; + const imageUrl = data.cheerEmotes[i].imageUrl; + const name = data.cheerEmotes[i].name; + const cheerEmoteElement = ``; + const bitsElements = `${bits}` + messageDiv.innerHTML = messageDiv.innerHTML.replace(new RegExp(`\\b${name}${bits}\\b`, 'i'), cheerEmoteElement + bitsElements); + } + + // Render avatars + if (showAvatar) { + const username = data.message.username; + const avatarURL = await GetAvatar(username); + const avatar = new Image(); + avatar.src = avatarURL; + avatar.classList.add("avatar"); + avatarDiv.appendChild(avatar); + } + + // Hide the header if the same username sends a message twice in a row + // EXCEPT when the scroll direction is set to reverse (scrollDirection == 2) + const messageList = document.getElementById("messageList"); + if (messageList.children.length > 0 && scrollDirection != 2) { + const lastPlatform = messageList.lastChild.dataset.platform; + const lastUserId = messageList.lastChild.dataset.userId; + if (lastPlatform == "twitch" && lastUserId == data.user.id) + userInfoDiv.style.display = "none"; + } + + // Embed image + if (IsThisUserAllowedToPostImagesOrNotReturnTrueIfTheyCanReturnFalseIfTheyCannot(imageEmbedPermissionLevel, data, 'twitch') && IsImageUrl(message)) { + const image = new Image(); + + image.onload = function () { + image.style.padding = "20px 0px"; + image.style.width = "100%"; + messageDiv.innerHTML = ''; + messageDiv.appendChild(image); + + AddMessageItem(instance, data.message.msgId, 'twitch', data.user.id); + }; + + const urlObj = new URL(message); + urlObj.search = ''; + urlObj.hash = ''; + + image.src = "https://external-content.duckduckgo.com/iu/?u=" + urlObj.toString(); + } + else { + AddMessageItem(instance, data.message.msgId, 'twitch', data.user.id); + } +} + +async function TwitchAutomaticRewardRedemption(data) { + // Get a reference to the template + const template = document.getElementById('messageTemplate'); + + // Create a new instance of the template + const instance = template.content.cloneNode(true); + + // Get divs + const messageContainerDiv = instance.querySelector("#messageContainer"); + const firstMessageDiv = instance.querySelector("#firstMessage"); + const replyDiv = instance.querySelector("#reply"); + const replyUserDiv = instance.querySelector("#replyUser"); + const replyMsgDiv = instance.querySelector("#replyMsg"); + const userInfoDiv = instance.querySelector("#userInfo"); + const avatarDiv = instance.querySelector("#avatar"); + const timestampDiv = instance.querySelector("#timestamp"); + const platformDiv = instance.querySelector("#platform"); + const badgeListDiv = instance.querySelector("#badgeList"); + const usernameDiv = instance.querySelector("#username"); + const messageDiv = instance.querySelector("#message"); + + if (data.reward_type != 'gigantify_an_emote') + return; + + userInfoDiv.style.display = "none"; + + // Show the gigantified emote + const gigaEmote = data.gigantified_emote.imageUrl; + const image = new Image(); + image.src = gigaEmote; + image.style.padding = "20px 0px"; + image.style.width = "50%"; + + image.onload = function () { + messageDiv.innerHTML = ''; + messageDiv.appendChild(image); + } + + AddMessageItem(instance, data.id); +} + +async function TwitchAnnouncement(data) { + if (!showTwitchAnnouncements) + return; + + // Get a reference to the template + const template = document.getElementById('cardTemplate'); + + // Create a new instance of the template + const instance = template.content.cloneNode(true); + + // Get divs + const cardDiv = instance.querySelector("#card"); + const headerDiv = instance.querySelector("#header"); + const avatarDiv = instance.querySelector("#avatar"); + const timestampDiv = instance.querySelector("#timestamp"); + const iconDiv = instance.querySelector("#icon"); + const titleDiv = instance.querySelector("#title"); + const contentDiv = instance.querySelector("#contentDiv"); + + // Set the card background colors + switch (data.announcementColor) { + case "BLUE": + cardDiv.classList.add('announcementBlue'); + break; + case "GREEN": + cardDiv.classList.add('announcementGreen'); + break; + case "ORANGE": + cardDiv.classList.add('announcementOrange'); + break; + case "PURPLE": + cardDiv.classList.add('announcementPurple'); + break; + } + + // Set the card header + iconDiv.innerText = "📢"; + titleDiv.innerText = "Announcement"; + + // Get a reference to the message template + const contentTemplate = document.getElementById('messageTemplate'); + + // Create a new instance of the template + const content = contentTemplate.content.cloneNode(true); + + // Set timestamp + if (showTimestamps) { + content.querySelector("#timestamp").classList.add("timestamp"); + content.querySelector("#timestamp").innerText = GetCurrentTimeFormatted(); + } + content.querySelector("#username").innerText = data.user.name; + content.querySelector("#username").style.color = data.user.color; + content.querySelector("#message").innerText = data.text; + + // Remove the line break + content.querySelector("#colon-separator").style.display = `inline`; + content.querySelector("#line-space").style.display = `none`; + + // Render platform + content.querySelector("#platform").style.display = `none`; + + // Render badges + content.querySelector("#badgeList").innerHTML = ""; + for (i in data.user.badges) { + const badge = new Image(); + badge.src = data.user.badges[i].imageUrl; + badge.classList.add("badge"); + content.querySelector("#badgeList").appendChild(badge); + } + + // Set pronouns + const pronouns = await GetPronouns('twitch', data.user.login); + if (pronouns) { + content.querySelector("#pronouns").classList.add("pronouns"); + content.querySelector("#pronouns").innerText = pronouns; + } + + // Render emotes + for (i in data.parts) { + if (data.parts[i].type == `emote`) { + const emoteElement = ``; + content.querySelector("#message").innerHTML = content.querySelector("#message").innerHTML.replace(new RegExp(`\\b${data.parts[i].text}\\b`), emoteElement); + } + } + + // Insert the modified template instance into the DOM + instance.querySelector("#content").appendChild(content); + + AddMessageItem(instance, data.messageId); +} + +async function TwitchSub(data) { + if (!showTwitchSubs) + return; + + // Get a reference to the template + const template = document.getElementById('cardTemplate'); + + // Create a new instance of the template + const instance = template.content.cloneNode(true); + + // Get divs + const cardDiv = instance.querySelector("#card"); + const headerDiv = instance.querySelector("#header"); + const avatarDiv = instance.querySelector("#avatar"); + const iconDiv = instance.querySelector("#icon"); + const titleDiv = instance.querySelector("#title"); + const contentDiv = instance.querySelector("#contentDiv"); + + // Set the card background colors + cardDiv.classList.add('twitch'); + + // Set the card header + for (i in data.user.badges) { + if (data.user.badges[i].name == "subscriber") { + const badge = new Image(); + badge.src = data.user.badges[i].imageUrl; + badge.classList.add("badge"); + iconDiv.appendChild(badge); + } + } + + // Set the text + const username = data.user.name; + const subTier = data.sub_tier; + const isPrime = data.is_prime; + + if (!isPrime) + titleDiv.innerText = `${username} subscribed with Tier ${subTier.charAt(0)}`; + else + titleDiv.innerText = `${username} used their Prime Sub`; + + AddMessageItem(instance, data.messageId); +} + +async function TwitchResub(data) { + if (!showTwitchSubs) + return; + + // Get a reference to the template + const template = document.getElementById('cardTemplate'); + + // Create a new instance of the template + const instance = template.content.cloneNode(true); + + // Get divs + const cardDiv = instance.querySelector("#card"); + const headerDiv = instance.querySelector("#header"); + const avatarDiv = instance.querySelector("#avatar"); + const iconDiv = instance.querySelector("#icon"); + const titleDiv = instance.querySelector("#title"); + const contentDiv = instance.querySelector("#content"); + + // Set the card background colors + cardDiv.classList.add('twitch'); + + // Set the card header + for (i in data.user.badges) { + if (data.user.badges[i].name == "subscriber") { + const badge = new Image(); + badge.src = data.user.badges[i].imageUrl; + badge.classList.add("badge"); + iconDiv.appendChild(badge); + } + } + + // Set the text + const username = data.user.name; + const subTier = data.subTier; + const isPrime = data.isPrime; + const cumulativeMonths = data.cumulativeMonths; + const message = data.text; + + if (!isPrime) + titleDiv.innerText = `${username} resubscribed with Tier ${subTier.charAt(0)} (${cumulativeMonths} months)`; + else + titleDiv.innerText = `${username} used their Prime Sub (${cumulativeMonths} months)`; + contentDiv.innerText = `${message}`; + + AddMessageItem(instance, data.messageId); +} + +async function TwitchGiftSub(data) { + if (!showTwitchSubs) + return; + + // Get a reference to the template + const template = document.getElementById('cardTemplate'); + + // Create a new instance of the template + const instance = template.content.cloneNode(true); + + // Get divs + const cardDiv = instance.querySelector("#card"); + const headerDiv = instance.querySelector("#header"); + const avatarDiv = instance.querySelector("#avatar"); + const iconDiv = instance.querySelector("#icon"); + const titleDiv = instance.querySelector("#title"); + const contentDiv = instance.querySelector("#content"); + + // Set the card background colors + cardDiv.classList.add('twitch'); + + // Set the card header + for (i in data.user.badges) { + if (data.user.badges[i].name == "subscriber") { + const badge = new Image(); + badge.src = data.user.badges[i].imageUrl; + badge.classList.add("badge"); + iconDiv.appendChild(badge); + } + } + + // Set the text + const username = data.user.name; + const subTier = data.subTier; + const recipient = data.recipient.name; + const cumlativeTotal = data.cumlativeTotal; + + titleDiv.innerText = `${username} gifted a Tier ${subTier.charAt(0)} subscription to ${recipient}`; + if (cumlativeTotal > 0) + contentDiv.innerText = `They've gifted ${cumlativeTotal} subs in total!`; + + AddMessageItem(instance, data.messageId); +} + +async function TwitchRaid(data) { + if (!showTwitchRaids) + return; + + // Get a reference to the template + const template = document.getElementById('cardTemplate'); + + // Create a new instance of the template + const instance = template.content.cloneNode(true); + + // Get divs + const cardDiv = instance.querySelector("#card"); + const headerDiv = instance.querySelector("#header"); + const avatarDiv = instance.querySelector("#avatar"); + const iconDiv = instance.querySelector("#icon"); + const titleDiv = instance.querySelector("#title"); + const contentDiv = instance.querySelector("#content"); + + // Set the card background colors + cardDiv.classList.add('twitch'); + + if (showAvatar) { + // Render avatars + const username = data.from_broadcaster_user_login; + const avatarURL = await GetAvatar(username); + const avatar = new Image(); + avatar.src = avatarURL; + avatar.classList.add("avatar"); + avatarDiv.appendChild(avatar); + } + + + // Set the text + const username = data.from_broadcaster_user_login; + const viewers = data.viewers; + + titleDiv.innerText = `${username} is raiding`; + contentDiv.innerText = `with a party of ${viewers}`; + + AddMessageItem(instance, data.messageId); +} + +function TwitchChatMessageDeleted(data) { + const messageList = document.getElementById("messageList"); + + // Maintain a list of chat messages to delete + const messagesToRemove = []; + + // ID of the message to remove + const messageId = data.messageId; + + // Find the items to remove + for (let i = 0; i < messageList.children.length; i++) { + if (messageList.children[i].id === messageId) { + messagesToRemove.push(messageList.children[i]); + } + } + + // Remove the items + messagesToRemove.forEach(item => { + item.style.opacity = 0; + item.style.height = 0; + setTimeout(function() { + messageList.removeChild(item); + }, 1000); + }); +} + +function TwitchUserBanned(data) { + const messageList = document.getElementById("messageList"); + + // Maintain a list of chat messages to delete + const messagesToRemove = []; + + // ID of the message to remove + const userId = data.user_id; + + // Find the items to remove + for (let i = 0; i < messageList.children.length; i++) { + if (messageList.children[i].dataset.userId === userId) { + messagesToRemove.push(messageList.children[i]); + } + } + + // Remove the items + messagesToRemove.forEach(item => { + messageList.removeChild(item); + }); +} + +function TwitchChatCleared(data) { + const messageList = document.getElementById("messageList"); + + while (messageList.firstChild) { + messageList.removeChild(messageList.firstChild); + } +} + +function YouTubeMessage(data) { + if (!showYouTubeMessages) + return; + + // Don't post messages starting with "!" + if (data.message.startsWith("!") && excludeCommands) + return; + + // Don't post messages from users from the ignore list + if (ignoreUserList.includes(data.user.name)) + return; + + // Get a reference to the template + const template = document.getElementById('messageTemplate'); + + // Create a new instance of the template + const instance = template.content.cloneNode(true); + + // Get divs + const userInfoDiv = instance.querySelector("#userInfo"); + const avatarDiv = instance.querySelector("#avatar"); + const timestampDiv = instance.querySelector("#timestamp"); + const platformDiv = instance.querySelector("#platform"); + const badgeListDiv = instance.querySelector("#badgeList"); + const usernameDiv = instance.querySelector("#username"); + const messageDiv = instance.querySelector("#message"); + + // Set timestamp + if (showTimestamps) { + timestampDiv.classList.add("timestamp"); + timestampDiv.innerText = GetCurrentTimeFormatted(); + } + + // Set the message data + if (showUsername) { + usernameDiv.innerText = data.user.name; + usernameDiv.style.color = "#f70000"; // YouTube users do not have colors, so just set it to red + } + + if (showMessage) { + messageDiv.innerText = data.message; + } + + + // Render platform + if (showPlatform) { + const platformElements = ``; + platformDiv.innerHTML = platformElements; + } + + // Render badges + if (data.user.isOwner && showBadges) { + const badge = new Image(); + badge.src = `icons/badges/youtube-broadcaster.svg`; + badge.style.filter = `invert(100%)`; + badge.style.opacity = 0.8; + badge.classList.add("badge"); + badgeListDiv.appendChild(badge); + } + + if (data.user.isModerator && showBadges) { + const badge = new Image(); + badge.src = `icons/badges/youtube-moderator.svg`; + badge.style.filter = `invert(100%)`; + badge.style.opacity = 0.8; + badge.classList.add("badge"); + badgeListDiv.appendChild(badge); + } + + if (data.user.isSponsor && showBadges) { + const badge = new Image(); + badge.src = `icons/badges/youtube-member.svg`; + badge.style.filter = `invert(100%)`; + badge.style.opacity = 0.8; + badge.classList.add("badge"); + badgeListDiv.appendChild(badge); + } + + if (data.user.isVerified && showBadges) { + const badge = new Image(); + badge.src = `icons/badges/youtube-verified.svg`; + badge.style.filter = `invert(100%)`; + badge.style.opacity = 0.8; + badge.classList.add("badge"); + badgeListDiv.appendChild(badge); + } + + // Render emotes + for (i in data.emotes) { + const emoteElement = ``; + // messageDiv.innerHTML = messageDiv.innerHTML.replace(new RegExp(`\\b${data.emotes[i].name}\\b`), emoteElement); + messageDiv.innerHTML = messageDiv.innerHTML.replace(data.emotes[i].name, emoteElement); + } + + // Render avatars + if (showAvatar) { + const avatar = new Image(); + avatar.src = data.user.profileImageUrl; + avatar.classList.add("avatar"); + avatarDiv.appendChild(avatar); + } + + + // Hide the header if the same username sends a message twice in a row + // EXCEPT when the scroll direction is set to reverse (scrollDirection == 2) + const messageList = document.getElementById("messageList"); + if (messageList.children.length > 0 && scrollDirection != 2) { + const lastPlatform = messageList.lastChild.dataset.platform; + const lastUserId = messageList.lastChild.dataset.userId; + if (lastPlatform == "youtube" && lastUserId == data.user.id) + userInfoDiv.style.display = "none"; + } + + // Embed image + const message = data.message; + if (IsThisUserAllowedToPostImagesOrNotReturnTrueIfTheyCanReturnFalseIfTheyCannot(imageEmbedPermissionLevel, data, 'youtube') && IsImageUrl(message)) { + const image = new Image(); + + image.onload = function () { + image.style.padding = "20px 0px"; + image.style.width = "100%"; + messageDiv.innerHTML = ''; + messageDiv.appendChild(image); + + AddMessageItem(instance, data.message.msgId, 'youtube', data.user.id); + }; + + const urlObj = new URL(message); + urlObj.search = ''; + urlObj.hash = ''; + + image.src = "https://external-content.duckduckgo.com/iu/?u=" + urlObj.toString(); + } + else { + AddMessageItem(instance, data.eventId, 'youtube', data.user.id); + } +} + +function YouTubeSuperChat(data) { + if (!showYouTubeSuperChats) + return; + + // Get a reference to the template + const template = document.getElementById('cardTemplate'); + + // Create a new instance of the template + const instance = template.content.cloneNode(true); + + // Get divs + const cardDiv = instance.querySelector("#card"); + const headerDiv = instance.querySelector("#header"); + const avatarDiv = instance.querySelector("#avatar"); + const iconDiv = instance.querySelector("#icon"); + const titleDiv = instance.querySelector("#title"); + const contentDiv = instance.querySelector("#content"); + + // Set the card background colors + cardDiv.classList.add('youtube'); + + // Set message text + titleDiv.innerText = `🪙 ${data.user.name} sent a Super Chat (${data.amount})`; + contentDiv.innerText = `${data.message}!`; + + AddMessageItem(instance, data.eventId); +} + +function YouTubeSuperSticker(data) { + if (!showYouTubeSuperStickers) + return; + + // Get a reference to the template + const template = document.getElementById('cardTemplate'); + + // Create a new instance of the template + const instance = template.content.cloneNode(true); + + // Get divs + const cardDiv = instance.querySelector("#card"); + const headerDiv = instance.querySelector("#header"); + const avatarDiv = instance.querySelector("#avatar"); + const iconDiv = instance.querySelector("#icon"); + const titleDiv = instance.querySelector("#title"); + const contentDiv = instance.querySelector("#content"); + + // Set the card background colors + cardDiv.classList.add('youtube'); + + const stickerTemplate = document.getElementById('stickerTemplate'); + + // Create a new instance of the template + const stickerInstance = stickerTemplate.content.cloneNode(true); + + // Render sticker + stickerInstance.querySelector("#stickerImg").src = FindFirstImageUrl(data); + stickerInstance.querySelector("#stickerLabel").innerText = `${data.user.name} sent a Super Sticker (${data.amount})`; + + contentDiv.appendChild(stickerInstance); + + AddMessageItem(instance, data.eventId); +} + +function YouTubeNewSponsor(data) { + if (!showYouTubeMemberships) + return; + + // Get a reference to the template + const template = document.getElementById('cardTemplate'); + + // Create a new instance of the template + const instance = template.content.cloneNode(true); + + // Get divs + const cardDiv = instance.querySelector("#card"); + const headerDiv = instance.querySelector("#header"); + const avatarDiv = instance.querySelector("#avatar"); + const iconDiv = instance.querySelector("#icon"); + const titleDiv = instance.querySelector("#title"); + const contentDiv = instance.querySelector("#content"); + + // Set the card background colors + cardDiv.classList.add('youtube'); + + // Set message text + titleDiv.innerText = `⭐ New ${data.levelName}`; + contentDiv.innerText = `Welcome ${data.user.name}!`; + + AddMessageItem(instance, data.eventId); +} + +function YouTubeGiftMembershipReceived(data) { + if (!showYouTubeMemberships) + return; + + // Get a reference to the template + const template = document.getElementById('cardTemplate'); + + // Create a new instance of the template + const instance = template.content.cloneNode(true); + + // Get divs + const cardDiv = instance.querySelector("#card"); + const headerDiv = instance.querySelector("#header"); + const avatarDiv = instance.querySelector("#avatar"); + const iconDiv = instance.querySelector("#icon"); + const titleDiv = instance.querySelector("#title"); + const contentDiv = instance.querySelector("#content"); + + // Set the card background colors + cardDiv.classList.add('youtube'); + + // Set message text + titleDiv.innerText = `🎁 ${data.gifter.name} gifted a membership`; + contentDiv.innerText = `to ${data.user.name} (${data.tier})!`; + + AddMessageItem(instance, data.eventId); +} + +async function StreamlabsDonation(data) { + if (!showStreamlabsDonations) + return; + + // Get a reference to the template + const template = document.getElementById('cardTemplate'); + + // Create a new instance of the template + const instance = template.content.cloneNode(true); + + // Get divs + const cardDiv = instance.querySelector("#card"); + const headerDiv = instance.querySelector("#header"); + const avatarDiv = instance.querySelector("#avatar"); + const iconDiv = instance.querySelector("#icon"); + const titleDiv = instance.querySelector("#title"); + const contentDiv = instance.querySelector("#content"); + + // Set the card background colors + cardDiv.classList.add('streamlabs'); + + // Set the text + const donater = data.from; + const formattedAmount = data.formattedAmount; + const currency = data.currency; + const message = data.message; + + titleDiv.innerText = `🪙 ${donater} donated ${currency}${formattedAmount}`; + contentDiv.innerText = `${message}`; + + AddMessageItem(instance); +} + +async function StreamElementsTip(data) { + if (!showStreamElementsTips) + return; + + // Get a reference to the template + const template = document.getElementById('cardTemplate'); + + // Create a new instance of the template + const instance = template.content.cloneNode(true); + + // Get divs + const cardDiv = instance.querySelector("#card"); + const headerDiv = instance.querySelector("#header"); + const avatarDiv = instance.querySelector("#avatar"); + const iconDiv = instance.querySelector("#icon"); + const titleDiv = instance.querySelector("#title"); + const contentDiv = instance.querySelector("#content"); + + // Set the card background colors + cardDiv.classList.add('streamelements'); + + // Set the text + const donater = data.username; + const formattedAmount = `$${data.amount}`; + const currency = data.currency; + const message = data.message; + + titleDiv.innerText = `🪙 ${donater} donated ${currency}${formattedAmount}`; + contentDiv.innerText = `${message}`; + + AddMessageItem(instance, data.id); +} + + + +////////////////////// +// HELPER FUNCTIONS // +////////////////////// + +function GetBooleanParam(paramName, defaultValue) { + const urlParams = new URLSearchParams(window.location.search); + const paramValue = urlParams.get(paramName); + + if (paramValue === null) { + return defaultValue; // Parameter not found + } + + const lowercaseValue = paramValue.toLowerCase(); // Handle case-insensitivity + + if (lowercaseValue === 'true') { + return true; + } else if (lowercaseValue === 'false') { + return false; + } else { + return paramValue; // Return original string if not 'true' or 'false' + } +} + +function GetIntParam(paramName) { + const urlParams = new URLSearchParams(window.location.search); + const paramValue = urlParams.get(paramName); + + if (paramValue === null) { + return null; // or undefined, or a default value, depending on your needs + } + + const intValue = parseInt(paramValue, 10); // Parse as base 10 integer + + if (isNaN(intValue)) { + return null; // or handle the error in another way, e.g., throw an error + } + + return intValue; +} + +function GetCurrentTimeFormatted() { + const now = new Date(); + let hours = now.getHours(); + const minutes = String(now.getMinutes()).padStart(2, '0'); + const ampm = hours >= 12 ? 'PM' : 'AM'; + + hours = hours % 12; + hours = hours ? hours : 12; // the hour '0' should be '12' + + const formattedTime = `${hours}:${minutes} ${ampm}`; + return formattedTime; +} + +async function GetAvatar(username) { + if (avatarMap.has(username)) { + console.debug(`Avatar found for ${username}. Retrieving from hash map.`) + return avatarMap.get(username); + } + else { + console.debug(`No avatar found for ${username}. Retrieving from Decapi.`) + let response = await fetch('https://decapi.me/twitch/avatar/' + username); + let data = await response.text() + avatarMap.set(username, data); + return data; + } +} + +async function GetPronouns(platform, username) { + const response = await client.getUserPronouns(platform, username); + const userFound = response.pronoun.userFound; + const pronouns = `${response.pronoun.pronounSubject}/${response.pronoun.pronounObject}`; + + if (userFound) + return `${response.pronoun.pronounSubject}/${response.pronoun.pronounObject}`; + else + return ''; +} + +// function IsImageUrl(url) { +// return url.match(/^http.*\.(jpeg|jpg|gif|png)$/) != null; +// } + +function IsImageUrl(url) { + try { + const { pathname } = new URL(url); + // Only check the pathname since query parameters are not included in it. + return /\.(png|jpe?g|webp|gif)$/i.test(pathname); + } catch (error) { + // Return false if the URL is invalid. + return false; + } +} + +function AddMessageItem(element, elementID, platform, userId) { + // Calculate the height of the div before inserting + const tempDiv = document.getElementById('IPutThisHereSoICanCalculateHowBigEachMessageIsSupposedToBeBeforeIAddItToTheMessageList'); + tempDiv.appendChild(element); + + setTimeout(function () { + const calculatedHeight = tempDiv.clientHeight + "px"; + + // Create a new line item to add to the message list later + var lineItem = document.createElement('li'); + lineItem.id = elementID; + lineItem.dataset.platform = platform; + lineItem.dataset.userId = userId; + + // Set scroll direction + if (scrollDirection == 2) + lineItem.classList.add('reverseLineItemDirection'); + + // Move the element from the temp div to the new line item + while (tempDiv.firstChild) { + lineItem.appendChild(tempDiv.firstChild); + } + + // Add the line item to the list and animate it + // We need to manually set the height as straight CSS can't animate on "height: auto" + messageList.appendChild(lineItem); + setTimeout(function () { + lineItem.className = lineItem.className + " show"; + lineItem.style.height = calculatedHeight; + }, 10); + + // Remove old messages that have gone off screen to save memory + while (messageList.clientHeight > 5 * window.innerHeight) { + messageList.removeChild(messageList.firstChild); + } + + tempDiv.innerHTML = ''; + + if (hideAfter > 0) + { + setTimeout(function () { + lineItem.style.opacity = 0; + setTimeout(function() { + messageList.removeChild(lineItem); + }, 1000); + }, hideAfter * 1000); + } + + }, 100); +} + +// I used Gemini for this shit so if it doesn't work, blame Google +function FindFirstImageUrl(jsonObject) { + if (typeof jsonObject !== 'object' || jsonObject === null) { + return null; // Handle invalid input + } + + function iterate(obj) { + if (Array.isArray(obj)) { + for (const item of obj) { + const result = iterate(item); + if (result) { + return result; + } + } + return null; + } + + for (const key in obj) { + if (obj.hasOwnProperty(key)) { + if (key === 'imageUrl') { + return obj[key]; // Found it! Return the value. + } + + if (typeof obj[key] === 'object' && obj[key] !== null) { + const result = iterate(obj[key]); // Recursive call for nested objects + if (result) { + return result; // Propagate the found value + } + } + } + } + return null; // Key not found in this level + } + + return iterate(jsonObject); +} + +function IsThisUserAllowedToPostImagesOrNotReturnTrueIfTheyCanReturnFalseIfTheyCannot(targetPermissions, data, platform) { + return GetPermissionLevel(data, platform) >= targetPermissions; +} + +function GetPermissionLevel(data, platform) { + switch (platform) { + case 'twitch': + if (data.message.role >= 4) + return 40; + else if (data.message.role >= 3) + return 30; + else if (data.message.role >= 2) + return 20; + else if (data.message.role >= 2 || data.message.subscriber) + return 15; + else + return 10; + case 'youtube': + if (data.user.isOwner) + return 40; + else if (data.user.isModerator) + return 30; + else if (data.user.isSponsor) + return 15; + else + return 10; + } +} + + + +/////////////////////////////////// +// STREAMER.BOT WEBSOCKET STATUS // +/////////////////////////////////// + +// This function sets the visibility of the Streamer.bot status label on the overlay +function SetConnectionStatus(connected) { + let statusContainer = document.getElementById("statusContainer"); + if (connected) { + statusContainer.style.background = "#2FB774"; + statusContainer.innerText = "Connected!"; + statusContainer.style.opacity = 1; + setTimeout(() => { + statusContainer.style.transition = "all 2s ease"; + statusContainer.style.opacity = 0; + }, 10); + } + else { + statusContainer.style.background = "#D12025"; + statusContainer.innerText = "Connecting..."; + statusContainer.style.transition = ""; + statusContainer.style.opacity = 1; + } +} + +// let data = `{ +// "bits": 1, +// "cheerEmotes": [ +// { +// "bits": 1, +// "color": "#979797", +// "type": "CheerEmote", +// "name": "Cheer", +// "startIndex": 0, +// "endIndex": 5, +// "imageUrl": "https://d3aqoihi2n8ty8.cloudfront.net/actions/cheer/dark/animated/1/4.gif" +// } +// ], +// "message": { +// "internal": false, +// "msgId": "ac304b97-35fd-4623-9ab3-2e68f24e770a", +// "userId": "24586202", +// "username": "cookievscookie", +// "role": 1, +// "subscriber": true, +// "subscriptionTier": "1000", +// "displayName": "CookieVsCookie", +// "color": "#DEC27A", +// "channel": "nutty", +// "message": "Cheer1 wasting all of my money 1 bit at time", +// "isHighlighted": false, +// "isMe": false, +// "isCustomReward": false, +// "isAnonymous": false, +// "isReply": false, +// "bits": 1, +// "firstMessage": false, +// "returningChatter": false, +// "hasBits": true, +// "emotes": [], +// "cheerEmotes": [ +// { +// "bits": 1, +// "color": "#979797", +// "type": "CheerEmote", +// "name": "Cheer", +// "startIndex": 0, +// "endIndex": 5, +// "imageUrl": "https://d3aqoihi2n8ty8.cloudfront.net/actions/cheer/dark/animated/1/4.gif" +// } +// ], +// "badges": [ +// { +// "name": "subscriber", +// "version": "3", +// "imageUrl": "https://static-cdn.jtvnw.net/badges/v1/c2d0acb4-a706-43a1-9d2b-0458cde2ba93/3", +// "info": "4" +// }, +// { +// "name": "share-the-love", +// "version": "1", +// "imageUrl": "https://static-cdn.jtvnw.net/badges/v1/2de71f4f-b152-4308-a426-127a4cf8003a/3", +// "info": "" +// } +// ], +// "monthsSubscribed": 4, +// "isTest": false, +// "sharedChat": false, +// "sourceBadges": [] +// }, +// "user": { +// "role": 1, +// "badges": [ +// { +// "name": "subscriber", +// "version": "3", +// "imageUrl": "https://static-cdn.jtvnw.net/badges/v1/c2d0acb4-a706-43a1-9d2b-0458cde2ba93/3", +// "info": "4" +// }, +// { +// "name": "share-the-love", +// "version": "1", +// "imageUrl": "https://static-cdn.jtvnw.net/badges/v1/2de71f4f-b152-4308-a426-127a4cf8003a/3", +// "info": "" +// } +// ], +// "color": "#DEC27A", +// "subscribed": true, +// "subscriptionTier": "1000", +// "monthsSubscribed": 4, +// "id": "24586202", +// "login": "cookievscookie", +// "name": "CookieVsCookie", +// "type": "twitch" +// }, +// "messageId": "ac304b97-35fd-4623-9ab3-2e68f24e770a", +// "meta": { +// "internal": false, +// "firstMessage": false, +// "returningChatter": false, +// "isHighlighted": false, +// "isMe": false, +// "isCustomReward": false, +// "isTest": false +// }, +// "anonymous": false, +// "text": "Cheer1 wasting all of my money 1 bit at time", +// "emotes": [], +// "parts": [ +// { +// "bits": 1, +// "color": "#979797", +// "imageUrl": "https://d3aqoihi2n8ty8.cloudfront.net/actions/cheer/dark/animated/1/4.gif", +// "type": "cheer", +// "text": "Cheer" +// }, +// { +// "type": "text", +// "text": " wasting all of my money 1 bit at time" +// } +// ], +// "isReply": false, +// "isSharedChat": false, +// "isTest": false +// }`; + +// TwitchChatMessage(JSON.parse(data)); \ No newline at end of file diff --git a/multichat-overlay/settings/index.html b/multichat-overlay/settings/index.html new file mode 100644 index 0000000..c4eabbf --- /dev/null +++ b/multichat-overlay/settings/index.html @@ -0,0 +1,64 @@ + + + + + + + Settings + + + + + + + +
+ +
+ + + + + + \ No newline at end of file diff --git a/multichat-overlay/settings/script.js b/multichat-overlay/settings/script.js new file mode 100644 index 0000000..218576d --- /dev/null +++ b/multichat-overlay/settings/script.js @@ -0,0 +1,29 @@ +let settingsContainer = document.getElementById('settings-container'); +settingsContainer.src = `https://nuttylmao.github.io/widget-customizer?settingsJson=${window.location.href}/settings.json` +console.log(settingsContainer.src); + +function reloadWidget(data) { + let widget = document.getElementById("widget"); + widget.src = `${getParentUrl()}?${data}`; +} + +function getParentUrl() { + const currentUrl = window.location.href; + const urlParts = currentUrl.split('/'); + + // Remove the last part of the URL (the current page/file) + urlParts.pop(); + + // Remove the last part again to go one directory up + urlParts.pop(); + + // Reconstruct the URL + const parentUrl = urlParts.join('/'); + + // Ensure there's a trailing slash if necessary (if it was a directory) + if (urlParts.length > 2 && !parentUrl.endsWith('/')) { + return parentUrl + '/'; + } + + return parentUrl; +} \ No newline at end of file diff --git a/multichat-overlay/settings/settings.json b/multichat-overlay/settings/settings.json new file mode 100644 index 0000000..86ec891 --- /dev/null +++ b/multichat-overlay/settings/settings.json @@ -0,0 +1,271 @@ +{ + "settings": [ + { + "id": "showPlatform", + "label": "Show Platform", + "description": "", + "type": "checkbox", + "defaultValue": true, + "group": "Appearance" + }, + { + "id": "showAvatar", + "label": "Show Avatar", + "description": "", + "type": "checkbox", + "defaultValue": true, + "group": "Appearance" + }, + { + "id": "showTimestamps", + "label": "Show Timestamps", + "description": "", + "type": "checkbox", + "defaultValue": true, + "group": "Appearance" + }, + { + "id": "showBadges", + "label": "Show Badges", + "description": "", + "type": "checkbox", + "defaultValue": true, + "group": "Appearance" + }, + { + "id": "showPronouns", + "label": "Show Pronouns", + "description": "", + "type": "checkbox", + "defaultValue": true, + "group": "Appearance" + }, + { + "id": "showUsername", + "label": "Show Username", + "description": "", + "type": "checkbox", + "defaultValue": true, + "group": "Appearance" + }, + { + "id": "showMessage", + "label": "Show Message", + "description": "Honestly, if you turn this off, you're stupid lmao", + "type": "checkbox", + "defaultValue": true, + "group": "Appearance" + }, + { + "id": "font", + "label": "Font", + "description": "", + "type": "text", + "defaultValue": "", + "group": "Appearance" + }, + { + "id": "fontSize", + "label": "Font Size", + "description": "", + "type": "number", + "min": 1, + "max": 120, + "defaultValue": 30, + "group": "Appearance" + }, + { + "id": "background", + "label": "Background", + "description": "", + "type": "color", + "defaultValue": "#000000", + "group": "Appearance" + }, + { + "id": "opacity", + "label": "Background Opacity", + "description": "", + "type": "number", + "defaultValue": "0.85", + "min": 0, + "max": 1, + "step": ".01", + "group": "Appearance" + }, + { + "id": "hideAfter", + "label": "Hide After", + "description": "Messages fade after X seconds (0 to disable)", + "type": "number", + "min": 0, + "max": 120, + "defaultValue": 0, + "group": "General" + }, + { + "id": "excludeCommands", + "label": "Exclude Commands", + "description": "Hide messages starting with \"!\"", + "type": "checkbox", + "defaultValue": true, + "group": "General" + }, + { + "id": "ignoreChatters", + "label": "Ignore Chatters", + "description": "Ignored chatters will not be shown", + "type": "text", + "defaultValue": "StreamElements,Streamlabs", + "group": "General" + }, + { + "id": "scrollDirection", + "label": "Scroll Direction", + "description": "", + "type": "select", + "options": [ + { + "value": 1, + "label": "Normal" + }, + { + "value": 2, + "label": "Reversed" + } + ], + "defaultValue": 1, + "group": "General" + }, + { + "id": "imageEmbedPermissionLevel", + "label": "Embed Images", + "description": "Automatically embed images for these users", + "type": "select", + "options": [ + { + "value": 40, + "label": "Broadcaster" + }, + { + "value": 30, + "label": "Mods & Broadcaster" + }, + { + "value": 20, + "label": "VIPs, Mods & Broadcaster" + }, + { + "value": 15, + "label": "Subs, VIPs, Mods & Broadcaster" + }, + { + "value": 10, + "label": "Everyone" + }, + { + "value": 69420, + "label": "Nobody" + } + ], + "defaultValue": 20, + "group": "General" + }, + { + "id": "showTwitchMessages", + "label": "Chat Messages", + "description": "", + "type": "checkbox", + "defaultValue": true, + "group": "Which Twitch messages do you want to see?" + }, + { + "id": "showTwitchAnnouncements", + "label": "Announcements", + "description": "", + "type": "checkbox", + "defaultValue": true, + "group": "Which Twitch messages do you want to see?" + }, + { + "id": "showTwitchSubs", + "label": "New Subscribers", + "description": "", + "type": "checkbox", + "defaultValue": true, + "group": "Which Twitch messages do you want to see?" + }, + { + "id": "showTwitchRaids", + "label": "Raids", + "description": "", + "type": "checkbox", + "defaultValue": true, + "group": "Which Twitch messages do you want to see?" + }, + { + "id": "showYouTubeMessages", + "label": "Chat Messages", + "description": "", + "type": "checkbox", + "defaultValue": true, + "group": "Which YouTube messages do you want to see?" + }, + { + "id": "showYouTubeSuperChats", + "label": "Super Chats", + "description": "", + "type": "checkbox", + "defaultValue": true, + "group": "Which YouTube messages do you want to see?" + }, + { + "id": "showYouTubeSuperStickers", + "label": "Super Stickers", + "description": "", + "type": "checkbox", + "defaultValue": true, + "group": "Which YouTube messages do you want to see?" + }, + { + "id": "showYouTubeMemberships", + "label": "Memberships", + "description": "", + "type": "checkbox", + "defaultValue": true, + "group": "Which YouTube messages do you want to see?" + }, + { + "id": "showStreamlabsDonations", + "label": "Streamlabs Tips", + "description": "", + "type": "checkbox", + "defaultValue": true, + "group": "Which donation messages do you want to see?" + }, + { + "id": "showStreamElementsTips", + "label": "StreamElements Tips", + "description": "", + "type": "checkbox", + "defaultValue": true, + "group": "Which donation messages do you want to see?" + }, + { + "id": "address", + "label": "Address", + "description": "Streamer.bot Websocket Server Address", + "type": "text", + "defaultValue": "127.0.0.1", + "group": "Advanced" + }, + { + "id": "port", + "label": "Port", + "description": "Streamer.bot Websocket Server Port", + "type": "text", + "defaultValue": "8080", + "group": "Advanced" + } + ] +} \ No newline at end of file diff --git a/multichat-overlay/style.css b/multichat-overlay/style.css new file mode 100644 index 0000000..6b3f2f2 --- /dev/null +++ b/multichat-overlay/style.css @@ -0,0 +1,245 @@ +* { + margin: 0; + padding: 0; + --margin: 40px; + --border-radius: 20px; +} + +html { + width: 100vw; + height: 100vh; + scroll-behavior: smooth; + /* background: #000000d9; */ + font-size: 30px; + font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica, Arial, sans-serif; + color: white; + text-shadow: 2px 2px 5px rgba(0, 0, 0, 0.5); + overflow-wrap: break-word; +} + +#statusContainer { + font-weight: 500; + font-size: 30px; + text-align: center; + background-color: #D12025; + color: white; + padding: 10px; + border-radius: 10px; + position: absolute; + top: 50%; + left: 50%; + transform: translate(-50%, -50%); +} + +#mainContainer { + position: absolute; + height: calc(100% - 2 * var(--margin)); + width: calc(100% - 2 * var(--margin)); + margin: var(--margin); +} + +#messageList { + position: absolute; + left: 0; + width: 100%; +} + +.normalScrollDirection { + bottom: 0; +} +.reverseScrollDirection { + display: flex; + top: 0; + flex-direction: column-reverse; +} + +li { + list-style: none; + overflow: hidden; + height: 0; + margin-top: 10px; + transition: all 1s ease-in-out; +} +.reverseLineItemDirection { + display: flex; + flex-direction: column; + justify-content: flex-end; +} + +.slide-fade li { + transition: all 0.5s ease-out; + opacity: 0; +} + +.slide-fade li.show { + opacity: 1; +} + +#IPutThisHereSoICanCalculateHowBigEachMessageIsSupposedToBeBeforeIAddItToTheMessageList { + margin-top: 10px; + opacity: 0; +} + +#firstMessage { + display: none; + font-weight: 500; + font-size: 0.7em; +} + +.firstMessageHighlight { + background: #adadad46; + padding: 20px 40px; + border-radius: var(--border-radius); +} + +.avatar { + height: 2em; + margin: 1px; + transform: translate(0px, 0.25em); + border-radius: 50% +} + +.timestamp, +.pronouns { + background: #adadad46; + /* border-radius: var(--border-radius); */ + border-radius: 1em; + font-size: 0.7em; + /* padding: 5px 15px; */ + padding: 0.15em 0.5em; +} + +.bits { + background: #adadad46; + border-radius: calc(var(--border-radius) / 2); + font-size: 0.7em; + padding: 5px 10px; +} + +.platform, +.badge, +.emote { + height: 1em; + margin: 1px; + transform: translate(0px, 0.25em); +} + +#badgeList { + margin: 0px 5px; +} + +#username, +#title { + font-weight: 700; +} + +.title { + font-weight: 700; +} + +#reply { + display: none; + overflow: hidden; + white-space: nowrap; + text-overflow: ellipsis; + font-size: 0.7em; + opacity: 0.5; +} + +#message { + font-weight: 400; + line-height: 1.7em; +} + +#card { + background: #adadad46; + padding: 20px 40px; + border-radius: var(--border-radius); +} + +#youtubeSuperSticker { + display: block; +} + +#sticker-img { + height: 5em; +} + +#stickerLabel { + text-align: center; + font-weight: 700; +} + +/*****************/ +/** CARD COLORS **/ +/*****************/ + +.announcementBlue { + background: linear-gradient(#03d3d7BF, #8d49feBF) !important; +} + +.announcementGreen { + background: linear-gradient(#01da86BF, #55bee4BF) !important; +} + +.announcementOrange { + background: linear-gradient(#feb419BF, #e1df00BF) !important; +} + +.announcementPurple { + background: linear-gradient(#9548ffBF, #fc74e6BF) !important; +} + +.twitch { + background: linear-gradient(#6d5ca1bf, #9146ffBF) !important; +} + +.youtube { + background: linear-gradient(#FF6C60BF, #FF0707BF) !important; +} + +.streamlabs { + background: linear-gradient(#73dabbbf, #397765bf) !important; +} + +.streamelements { + background: linear-gradient(#263b8abf, #0a112abf) !important; +} + +/****************/ +/** ANIMATIONS **/ +/****************/ + +.statusConnected { + animation-name: statusConnected; + animation-duration: 2s; + animation-fill-mode: forwards; +} + +.statusDisconnected { + animation-name: statusDisconnected; + animation-duration: 0.5s; + animation-fill-mode: forwards; +} + +@keyframes statusConnected { + 0% { + opacity: 1; + background-color: #2FB774; + } + + 100% { + opacity: 0; + background-color: #2FB774; + } +} + +@keyframes statusDisconnected { + 0% { + background-color: #D12025; + } + + 100% { + background-color: #D12025; + } +} \ No newline at end of file diff --git a/multistream-title-updater/connected.svg b/multistream-title-updater/connected.svg new file mode 100644 index 0000000..4e0799a --- /dev/null +++ b/multistream-title-updater/connected.svg @@ -0,0 +1,7 @@ + + + + + + + diff --git a/multistream-title-updater/disconnected.svg b/multistream-title-updater/disconnected.svg new file mode 100644 index 0000000..962f8ef --- /dev/null +++ b/multistream-title-updater/disconnected.svg @@ -0,0 +1,7 @@ + + + + + + + diff --git a/multistream-title-updater/icons.afdesign b/multistream-title-updater/icons.afdesign new file mode 100644 index 0000000..805d0a5 Binary files /dev/null and b/multistream-title-updater/icons.afdesign differ diff --git a/multistream-title-updater/index.html b/multistream-title-updater/index.html new file mode 100644 index 0000000..4c088ec --- /dev/null +++ b/multistream-title-updater/index.html @@ -0,0 +1,81 @@ + + + + + + + + + + +
Refreshed
+ +
+ + +
+ + +
+ +
+
Update Titles
+ + +
+ +
+ +
+
+

+
+ + +
+
+ +
+ +
+
+ + + +
+ + + +
+ + + + \ No newline at end of file diff --git a/multistream-title-updater/info.svg b/multistream-title-updater/info.svg new file mode 100644 index 0000000..c4daf5d --- /dev/null +++ b/multistream-title-updater/info.svg @@ -0,0 +1,5 @@ + + + + + diff --git a/multistream-title-updater/requiredActions.txt b/multistream-title-updater/requiredActions.txt new file mode 100644 index 0000000..503a772 --- /dev/null +++ b/multistream-title-updater/requiredActions.txt @@ -0,0 +1,4 @@ +[NUT] Multistream Title Updater | Fetch Broadcasts +[NUT] Multistream Title Updater | Update All Broadcasts +[NUT] Multistream Title Updater | Update Twitch Title +[NUT] Multistream Title Updater | Update YouTube Title \ No newline at end of file diff --git a/multistream-title-updater/script.js b/multistream-title-updater/script.js new file mode 100644 index 0000000..72ec198 --- /dev/null +++ b/multistream-title-updater/script.js @@ -0,0 +1,444 @@ +//////////// +// FIELDS // +//////////// + +let sbDebugMode = true; + +const queryString = window.location.search; +const urlParams = new URLSearchParams(queryString); + +const sbServerPort = urlParams.get("port") || 8080; +const sbServerAddress = urlParams.get("server") || "127.0.0.1"; + +///////////////// +// GLOBAL VARS // +///////////////// + +let ws; + +/////////////////////////////////// +// SRTEAMER.BOT WEBSOCKET SERVER // +/////////////////////////////////// + +// This is the main function that connects to the Streamer.bot websocke server +function connectws() { + if ("WebSocket" in window) { + ws = new WebSocket("ws://" + sbServerAddress + ":" + sbServerPort + "/"); + + // Reconnect + ws.onclose = function () { + SetConnectionStatus(false); + setTimeout(connectws, 5000); + }; + + // Connect + ws.onopen = async function () { + SetConnectionStatus(true); + + console.log("Subscribe to events"); + ws.send( + JSON.stringify({ + request: "Subscribe", + id: "subscribe-events-id", + // This is the list of Streamer.bot websocket events to subscribe to + // See full list of events here: + // https://docs.streamer.bot/api/servers/websocket/requests + events: { + twitch: [ + "StreamUpdate" + ], + youTube: [ + "BroadcastStarted", + "BroadcastEnded", + "BroadcastUpdated" + ], + general: [ + "Custom" + ] + } + }) + ); + + sbGetActions(ws); + + ws.onmessage = function (event) { + // Grab message and parse JSON + const msg = event.data; + const wsdata = JSON.parse(msg); + + // Check if the user installed all the required Streamer.bot actions + if (wsdata.id == "GetActions") { + + // Check if all the required SB action exist + ReadLinesFromFile('requiredActions.txt') + .then(requiredActions => { + if (sbCheckRequiredActions(wsdata.actions, requiredActions)) { + SetElementVisibility("missingActionsInstructions", false); + sbFetchBroadcasts(ws); + } + else + SetElementVisibility("missingActionsInstructions", true); + }) + } + + if (typeof wsdata.event == "undefined") { + return; + } + + // Print data to log for debugging purposes + if (sbDebugMode) { + console.log(wsdata.data); + console.log(wsdata.event.source); + console.log(wsdata.event.type); + } + + // Check for events to trigger + // See documentation for all events here: + // https://wiki.streamer.bot/en/Servers-Clients/WebSocket-Server/Events + switch (wsdata.event.source) { + // Twitch Events + case 'Twitch': + switch (wsdata.event.type) { + case ('StreamUpdate'): + sbFetchBroadcasts(ws); + break; + } + // Twitch Events + case 'YouTube': + switch (wsdata.event.type) { + case ('BroadcastStarted'): + case ('BroadcastEnded'): + case ('BroadcastUpdated'): + sbFetchBroadcasts(ws); + break; + } + // General Events + case 'General': + switch (wsdata.event.type) { + case ('Custom'): + switch (wsdata.data.action) { + case ('[NUT] Multistream Title Updater | Fetch Broadcasts'): + UpdateBroadcastList(wsdata.data); + break; + } + break; + } + break; + + } + }; + } + } +} + + + +///////////////////////// +// STREAMER.BOT WIDGET // +///////////////////////// + +function sbGetActions(ws) { + + let request = JSON.stringify({ + request: "GetActions", + id: "GetActions" + }); + + ws.send(request); +} + +// Check if all the entries in targetActionNames exist in actionList +function sbCheckRequiredActions(actionList, targetActionNames) { + let foundActions = 0; + for (targetActionName of targetActionNames) { + if (actionList.some(action => action.name === targetActionName)) + foundActions++; + } + + return foundActions == targetActionNames.length +} + +function sbFetchBroadcasts(ws) { + + let request = JSON.stringify({ + request: "DoAction", + id: generateUUID(), + action: { + name: "[NUT] Multistream Title Updater | Fetch Broadcasts" + } + }); + + ws.send(request); +} + +function sbUpdateTitles(ws, title) { + let request = JSON.stringify({ + request: "DoAction", + id: generateUUID(), + action: { + name: "[NUT] Multistream Title Updater | Update All Broadcasts" + }, + args: { + title: title + } + + }); + + ws.send(request); +} + +function sbUpdateTwitchTitle(ws, title) { + let request = JSON.stringify({ + request: "DoAction", + id: generateUUID(), + action: { + name: "[NUT] Multistream Title Updater | Update Twitch Title" + }, + args: { + title: title + } + + }); + + ws.send(request); +} + +function sbUpdateYouTubeTitle(ws, title, broadcastId) { + let request = JSON.stringify({ + request: "DoAction", + id: generateUUID(), + action: { + name: "[NUT] Multistream Title Updater | Update YouTube Title" + }, + args: { + broadcastId: broadcastId, + title: title + } + + }); + + ws.send(request); +} + + +////////////////////// +// HELPER FUNCTIONS // +////////////////////// + +function generateUUID() { // Public Domain/MIT + var d = new Date().getTime();//Timestamp + var d2 = ((typeof performance !== 'undefined') && performance.now && (performance.now() * 1000)) || 0;//Time in microseconds since page-load or 0 if unsupported + return 'xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx'.replace(/[xy]/g, function (c) { + var r = Math.random() * 16;//random number between 0 and 16 + if (d > 0) {//Use timestamp until depleted + r = (d + r) % 16 | 0; + d = Math.floor(d / 16); + } else {//Use microseconds since page-load if supported + r = (d2 + r) % 16 | 0; + d2 = Math.floor(d2 / 16); + } + return (c === 'x' ? r : (r & 0x3 | 0x8)).toString(16); + }); +} + +function IsNullOrWhitespace(str) { + return /^\s*$/.test(str); +} + +function SetElementVisibility(elementID, visibility) { + let element = document.getElementById(elementID); + if (visibility) + element.style.display = 'inline'; + else + element.style.display = 'none'; +} + +function ReadLinesFromFile(filePath) { + return new Promise((resolve, reject) => { + const request = new XMLHttpRequest(); + request.open('GET', filePath, true); + request.onload = function () { + if (request.status === 200) { + resolve(request.responseText.split(/\r?\n/)); + } else { + reject(new Error(`File loading failed with status: ${request.status}`)); + } + }; + request.onerror = function () { + reject(new Error('Network error occurred during file loading.')); + }; + request.send(); + }); +} + + + +/////////////////////////////////// +// STREAMER.BOT WEBSOCKET STATUS // +/////////////////////////////////// + +// This function sets the visibility of the Streamer.bot status label on the overlay +function SetConnectionStatus(connected) { + let connectionStatusIcon = document.getElementById("connectionStatusIcon"); + let ThisIsWhereAllTheCoolStuffHappens = document.getElementById("ThisIsWhereAllTheCoolStuffHappens"); + + if (connected) { + connectionStatusIcon.src = "connected.svg"; + ThisIsWhereAllTheCoolStuffHappens.classList.remove('disabled'); + SetElementVisibility("infoIcon", false); + SetElementVisibility("streamerbotConnectInstructions", false); + } + else { + connectionStatusIcon.src = "disconnected.svg"; + ThisIsWhereAllTheCoolStuffHappens.classList.add('disabled'); + SetElementVisibility("infoIcon", true); + SetElementVisibility("streamerbotConnectInstructions", true); + + // (1) Clear list of broadcasts + const fieldsContainer = document.getElementById('fieldsContainer'); + fieldsContainer.innerHTML = ""; + } +} + +// This function sets the visibility of the Streamer.bot status label on the overlay +function RefreshAnimation() { + let refreshContainer = document.getElementById("refreshContainer"); + refreshContainer.style.opacity = 1; + var tl = new TimelineMax(); + tl + .to(refreshContainer, 2, { opacity: 0, ease: Linear.easeNone }) +} + + + +// Button handling for UPDATE ALL button only +const infoIcon = document.querySelector("#infoIcon"); +infoIcon.addEventListener("click", function () { + window.open("https://www.notion.so/nutty-s-multistream-title-updater-e2fb7b24c7514f9cbd943729f54be1d9"); +}); + +// Button handling for UPDATE ALL button only +const submitButton = document.querySelector("#submitButton"); +submitButton.addEventListener("click", function () { + const titleInput = document.querySelector("#titleInput").value; + sbUpdateTitles(ws, titleInput); +}); + +// Button handling for REFRESH button only +const refreshButton = document.querySelector("#refreshButton"); +refreshButton.addEventListener("click", function () { + sbFetchBroadcasts(ws); +}); + + +function UpdateBroadcastList(data) { + // Iterate through broadcast list + // Find div whose ID matches the broadcast + // If it exists, update the title + // else, it's a new broadcast, so add it to the list + const fieldsContainer = document.getElementById('fieldsContainer'); + for (const broadcast of data.broadcastList) { + const broadcastDiv = fieldsContainer.querySelector(`#${broadcast.id}`); + + if (broadcastDiv == null) + AddBroadcast(broadcast); + else + UpdateBroadcast(broadcastDiv, broadcast); + } + + // Check if any broadcasts have gone offline + // If so, delete them from the list + var parentDiv = document.getElementById('fieldsContainer'); + const childDivs = parentDiv.querySelectorAll("div"); + childDivs.forEach(childDiv => { + var result = data.broadcastList.find(obj => { + return obj.id === childDiv.id + }) + if (result == null) + childDiv.innerHTML = ""; + }); + + //// THIS CODE ALSO WORKS AND IS WAY SIMPLER, I JUST MADE THINGS + //// 10 TIMES HARDER FOR MYSELF BECAUSE I LOVE PAIN POGGERS + // // (1) Clear list of broadcasts + // const fieldsContainer = document.getElementById('fieldsContainer'); + // fieldsContainer.innerHTML = ""; + + // // (2) For each broadcast in list, create new entry + // for (const broadcast of data.broadcastList) + // { + // AddBroadcast(broadcast); + // } + + // Count the number of YouTube broadcasts + // If this is 0, put a message to tell the user that they need to go live on YouTube first + // Else, hide that message + const youtubeBroadcastCount = data.broadcastList.reduce((count, broadcast) => count + (broadcast.platform === "youtube" ? 1 : 0), 0); + if (youtubeBroadcastCount <= 0) + SetElementVisibility("noYouTubeStreamsInstructions", true); + else + SetElementVisibility("noYouTubeStreamsInstructions", false); + + RefreshAnimation(); +} + +function AddBroadcast(broadcast) { + // Get a reference to the template + const template = document.getElementById('platformTemplate'); + + // Create a new instance of the template + const instance = template.content.cloneNode(true); + + // Assign ID to instance + const broadcastBox = instance.querySelector('.broadcastBox'); + broadcastBox.id = broadcast.id; + + // Modify the content of the template instance + const titleElement = instance.querySelector('.platformTitle'); + titleElement.value = broadcast.title; + + // Modify the content of the template instance + const buttonElement = instance.querySelector('.platformSubmitButton'); + buttonElement.classList.add(broadcast.platform); + + // Modify the icon of the template instance + const iconElement = instance.querySelector('#icon'); + + // Add button handling (need separate handling for Twitch/YouTube) + switch (broadcast.platform) { + case 'twitch': + iconElement.src = 'twitch.png'; + + buttonElement.addEventListener("click", function () { + sbUpdateTwitchTitle(ws, titleElement.value); + }); + break; + case 'youtube': + // Modify the icon of the template instance + iconElement.src = 'youtube.png'; + + buttonElement.addEventListener("click", function () { + const youtubeID = broadcast.id.replace('youtube-', ''); + sbUpdateYouTubeTitle(ws, titleElement.value, youtubeID); + }); + break; + } + + // Add click event + const iconButton = instance.querySelector('#platformIconButton'); + iconButton.addEventListener("click", function () { + window.open(broadcast.url); + }); + + // Insert the modified template instance into the DOM + const fieldsContainer = document.getElementById('fieldsContainer'); + fieldsContainer.appendChild(instance); +} + +function UpdateBroadcast(div, broadcast) { + // Modify the content of the template instance + const titleElement = div.querySelector('.platformTitle'); + titleElement.value = broadcast.title; +} + +connectws(); \ No newline at end of file diff --git a/multistream-title-updater/style.css b/multistream-title-updater/style.css new file mode 100644 index 0000000..718846c --- /dev/null +++ b/multistream-title-updater/style.css @@ -0,0 +1,201 @@ +/* @import url('https://fonts.googleapis.com/css?family={{googleFont}}:100,200,300,400,500,600,700,800,900'); */ + +* { + margin: 0; + padding: 0; + font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica, Arial, sans-serif; + color: rgb(235, 235, 235); +} + +body { + background-color: #1f1f1f; +} + +#refreshContainer { + font-family: 'Metropolis'; + font-style: italic; + font-weight: bold; + font-size: 30px; + width: 400px; + max-width: fit-content; + text-align: center; + background-color: #2FB774; + opacity: 0; + color: white; + padding: 10px; + border-radius: 10px; + position: absolute; + top: 50%; + left: 50%; + transform: translate(-50%, -50%); +} + +#instructionsContainer { + background-color: rgb(59, 59, 59); + font-size: 12px; + font-weight: bold; + border-radius: 10px; + position: absolute; + top: 50%; + left: 50%; + transform: translate(-50%, -50%); + text-align: center; + z-index: 2; +} + +.hyperlinks { + color: rgb(79, 92, 212); +} + +#mainContainer +{ + text-transform: uppercase; + max-width: 500px; + margin-left: auto; + margin-right: auto; + padding: 20px; + font-size: 12px; +} + +.disabled +{ + pointer-events: none; + opacity: 0.3; +} + +#title +{ + flex-grow: 1; + font-weight: 600; +} + +#connectionStatusIcon +{ + height: 16px; +} + +#infoIcon +{ + background-color: transparent; + background-repeat: no-repeat; + border: none; + overflow: hidden; + outline: none; + opacity: 0.5; + height: 16px; +} + +#infoIcon:hover +{ + opacity: 1; + cursor: pointer; +} + +.textBox +{ + padding: 5px 15px; + border-radius:20px; + background:rgba(255,255,255,.1); + border-width: 0; + width: 100%; + box-sizing: border-box; +} + +.straightUpIloveCum +{ + display: flex; + margin: 0px 0px; + align-items: center; +} + +.button +{ + border: none; + padding: 5px 15px; + border-radius:25px; +} + +.button:hover +{ + box-shadow: 0 0px 10px 0 rgb(255, 255, 255, 0.3); + cursor: pointer; +} + +.submitButton +{ + background:rgba(17, 97, 238, 0.2); +} + +.submitButton:hover{ + background-color: rgba(17, 97, 238, 1); +} + +#refreshButton +{ + background:rgba(255,255,255,.1); + margin: 0px 0px 0px 10px; +} + +#refreshButton:hover{ + background:rgba(255,255,255,.5); +} + +#fieldsContainer +{ + width: 100%; +} + +.broadcastBox +{ + display: flex; + align-items: center; + margin: 10px 0px; +} + +.platformTitle +{ + flex-grow: 1; +} + +.platformSubmitButton +{ + width: 100px; + margin: 0px 0px 0px 10px; +} + +#platformIconButton +{ + background-color: transparent; + background-repeat: no-repeat; + border: none; + overflow: hidden; + outline: none; + opacity: 0.5; + height: 24px; +} + +#platformIconButton:hover +{ + opacity: 1; + cursor: pointer; +} + +.twitch +{ + background: rgb(110, 85, 171, 0.5); +} + +.twitch:hover +{ + background: rgb(110, 85, 171, 1); +} + +.youtube +{ + background: rgb(255, 3, 3, 0.5); +} + +.youtube:hover +{ + background: rgb(255, 3, 3, 1); +} \ No newline at end of file diff --git a/multistream-title-updater/twitch.png b/multistream-title-updater/twitch.png new file mode 100644 index 0000000..28807fa Binary files /dev/null and b/multistream-title-updater/twitch.png differ diff --git a/multistream-title-updater/youtube.png b/multistream-title-updater/youtube.png new file mode 100644 index 0000000..ebbac2e Binary files /dev/null and b/multistream-title-updater/youtube.png differ diff --git a/obs-info-hud/frames/2x1.png b/obs-info-hud/frames/2x1.png new file mode 100644 index 0000000..5a95568 Binary files /dev/null and b/obs-info-hud/frames/2x1.png differ diff --git a/obs-info-hud/frames/tiktok.png b/obs-info-hud/frames/tiktok.png new file mode 100644 index 0000000..ce1fcef Binary files /dev/null and b/obs-info-hud/frames/tiktok.png differ diff --git a/obs-info-hud/frames/vertical.png b/obs-info-hud/frames/vertical.png new file mode 100644 index 0000000..b1434f0 Binary files /dev/null and b/obs-info-hud/frames/vertical.png differ diff --git a/obs-info-hud/frames/youtube-short-live.png b/obs-info-hud/frames/youtube-short-live.png new file mode 100644 index 0000000..5954c1f Binary files /dev/null and b/obs-info-hud/frames/youtube-short-live.png differ diff --git a/obs-info-hud/frames/youtube-short.png b/obs-info-hud/frames/youtube-short.png new file mode 100644 index 0000000..a665e1a Binary files /dev/null and b/obs-info-hud/frames/youtube-short.png differ diff --git a/obs-info-hud/icons/mic-mute.png b/obs-info-hud/icons/mic-mute.png new file mode 100644 index 0000000..fd1ab28 Binary files /dev/null and b/obs-info-hud/icons/mic-mute.png differ diff --git a/obs-info-hud/index.html b/obs-info-hud/index.html new file mode 100644 index 0000000..afcb382 --- /dev/null +++ b/obs-info-hud/index.html @@ -0,0 +1,80 @@ + + + + + + + + + + +
Connecting...
+
+
+
+ + + + + +
+ +
+
+
+ +
+ + + + + +
+ +
+
+
+
+ +
+
+
+
+
L
+
+ +
+
+
+
R
+
+
+ +
+
+
+ FPS + +
+
+ + + +
+
+
+
+
+
+
+
+
+ +
+
+
+
+ + + + \ No newline at end of file diff --git a/obs-info-hud/script.js b/obs-info-hud/script.js new file mode 100644 index 0000000..0e95aa5 --- /dev/null +++ b/obs-info-hud/script.js @@ -0,0 +1,492 @@ +//////////////// +// PARAMETERS // +//////////////// + +const queryString = window.location.search; +const urlParams = new URLSearchParams(queryString); + +const obsServerAddress = urlParams.get("address") || "127.0.0.1"; +const obsServerPort = urlParams.get("port") || "4455"; +const obsServerPassword = urlParams.get("password") || ""; +const obsMicInput = urlParams.get("audio") || ""; +const background = urlParams.get("background") || ""; + +if (obsMicInput != "") + document.getElementById("theMotherOfAllVolumeContainers").style.visibility = "visible"; + +if (background != "") +{ + document.body.style.backgroundImage = `url("frames/${background}.png")` +} + +let ws = new WebSocket("ws://" + obsServerAddress + ":" + obsServerPort + "/"); + +let previousOutputTimecode = 0; +let previousOutputBytes = 0; +let activeFps; + +function connectws() { + if ("WebSocket" in window) { + + ws = new WebSocket("ws://" + obsServerAddress + ":" + obsServerPort + "/"); + + // Reconnect + ws.onclose = function () { + SetConnectionStatus(false); + setTimeout(connectws, 5000); + }; + + ws.onopen = async function () { + } + + ws.onmessage = async function (event) { + let data = JSON.parse(event.data); + + switch (data.op) { + case 0: // Hello OpCode + case 3: // Reidentify OpCode + let salt = data.d.authentication != null ? data.d.authentication.salt : ""; + let challenge = data.d.authentication != null ? data.d.authentication.challenge : ""; + + let secret = await sha256(obsServerPassword + salt); + let base64_secret = hexToBase64(secret); + + let auth_string = await sha256(base64_secret + challenge); + let base64_auth_string = hexToBase64(auth_string); + + ws.send( + JSON.stringify({ + op: 1, + d: { + rpcVersion: 1, + authentication: base64_auth_string, + eventSubscriptions: 1 << 16 + } + } + )); + break; + case 2: // Identify OpCode + console.log("Connected to OBS!"); + SetConnectionStatus(true); + break; + case 5: // Event OpCode + switch (data.d.eventType) { + case ("InputVolumeMeters"): + let eventData = data.d.eventData; + eventData.inputs.forEach((input) => { + if (input.inputName == obsMicInput) { + if (input.inputLevelsMul.length == 0) { + document.getElementById("theMotherOfAllVolumeContainers").style.visibility = `hidden`; + } + else { + let leftMeter = document.getElementById("theGreenShitThatsInsideTheOtherContainerLeft"); + let rightMeter = document.getElementById("theGreenShitThatsInsideTheOtherContainerRight"); + + var tl = new TimelineMax(); + tl + .to(leftMeter, 0.1, { height: + 100 * input.inputLevelsMul[0][1] + "%", ease: Linear.easeNone }); + + tl = new TimelineMax(); + tl + .to(rightMeter, 0.1, { height: + 100 * input.inputLevelsMul[1][1] + "%", ease: Linear.easeNone }); + + document.getElementById("theMotherOfAllVolumeContainers").style.visibility = `visible`; + } + } + }); + break; + } + break; + case 7: // RequestResponse OpCode + switch (data.d.requestType) { + case "GetStats": + { + let responseData = data.d.responseData; + activeFps = `${responseData.activeFps.toFixed(1)}`; + const cpu = `${responseData.cpuUsage.toFixed(1)}%`; + const memory = `${responseData.memoryUsage.toFixed(1)}MB`; + + const averageFrameRenderTime = `${responseData.averageFrameRenderTime.toFixed(1)}ms`; + const outputSkippedFrames = responseData.outputSkippedFrames; + const outputTotalFrames = responseData.outputTotalFrames; + const outputSkippedFramesPerc = outputTotalFrames > 0 ? `${(100 * outputSkippedFrames / outputTotalFrames).toFixed(1)}%` : `0%`; + const renderSkippedFrames = responseData.renderSkippedFrames; + const renderTotalFrames = responseData.renderTotalFrames; + const renderSkippedFramesPerc = `${(100 * renderSkippedFrames / renderTotalFrames).toFixed(1)}%` + + document.getElementById("statsLabel").innerHTML = `CPU: ${cpu} • MEM: ${memory} • RENDER TIME: ${averageFrameRenderTime}`; + document.getElementById("advancedStatsLabel").innerHTML = `MISSED FRAMES ${outputSkippedFramesPerc} • SKIPPED FRAMES ${renderSkippedFramesPerc}`; + document.getElementById("fps").innerHTML = `${activeFps}`; + + GetVideoSettings(); + } + break; + case "GetVideoSettings": + { + let responseData = data.d.responseData; + const fpsNumerator = responseData.fpsNumerator; + const fpsDenominator = responseData.fpsDenominator; + + const fps = fpsNumerator / fpsDenominator; + const fpsMeterValue = activeFps / fps; + + let fpsMeter = document.getElementById("fpsMeter"); + var tl = new TimelineMax(); + tl + .to(fpsMeter, 0.1, { height: + 100 * fpsMeterValue + "%", ease: Linear.easeNone }); + + if (fpsMeterValue >= 1) + document.getElementById("fpsMeter").style.backgroundColor = `#37d247`; + else if (fpsMeterValue > 0.9) + document.getElementById("fpsMeter").style.backgroundColor = `#e5af24`; + else + document.getElementById("fpsMeter").style.backgroundColor = `#D12025`; + } + break; + case "GetRecordStatus": + { + let responseData = data.d.responseData; + + if (responseData.outputActive === false) { + document.getElementById("recordingLabel").innerHTML = ``; + document.getElementById("recordTimecodeLabel").innerHTML = ``; + document.getElementById("recordOutputFilesize").innerHTML = ``; + document.getElementById("recordingRing").style.visibility = 'hidden'; + document.getElementById("recordInfo").style.visibility = `hidden`; + } + else { + document.getElementById("recordingLabel").innerHTML = `REC 🔴`; + document.getElementById("recordTimecodeLabel").innerHTML = `${RemoveMilliseconds(responseData.outputTimecode)}`; + document.getElementById("recordOutputFilesize").innerHTML = `${ConvertToMegabytes(responseData.outputBytes)}MB`; + document.getElementById("recordingRing").style.visibility = 'visible'; + document.getElementById("recordInfo").style.visibility = `visible`; + } + } + break; + case "GetStreamStatus": + { + let responseData = data.d.responseData; + + if (responseData.outputActive === false) { + document.getElementById("streamingRing").style.visibility = 'hidden'; + document.getElementById("streamInfo").style.visibility = `hidden`; + } + else { + let outputTimecode = TimeToMilliseconds(responseData.outputTimecode); + let outputBytes = responseData.outputBytes; + + let kbps = ((outputBytes - previousOutputBytes) / (outputTimecode - previousOutputTimecode) * 8); + + previousOutputTimecode = outputTimecode; + previousOutputBytes = outputBytes; + + document.getElementById("streamBitrateLabel").innerHTML = `${Math.floor(kbps)} kb/s`; + document.getElementById("streamTimecodeLabel").innerHTML = `${RemoveMilliseconds(responseData.outputTimecode)}`; + GetStreamServiceSettings(); + + document.getElementById("streamingRing").style.visibility = 'visible'; + document.getElementById("streamInfo").style.visibility = `visible`; + } + } + break; + case "GetStreamServiceSettings": + { + let responseData = data.d.responseData; + switch (responseData.streamServiceSettings.service) { + case "Twitch": + document.getElementById("streamPlatformLabel").innerHTML = "🟣 Twitch"; + break; + case "YouTube": + document.getElementById("streamPlatformLabel").innerHTML = "🔴 YouTube"; + break; + case undefined: + document.getElementById("streamPlatformLabel").innerHTML = "🔴 LIVE"; + break; + default: + document.getElementById("streamPlatformLabel").innerHTML = `🔴 ${responseData.streamServiceSettings.service}`; + break; + } + } + break; + case "GetProfileList": + { + let responseData = data.d.responseData; + document.getElementById("profileLabel").innerHTML = `Profile: ${responseData.currentProfileName}`; + } + break; + case "GetInputMute": + { + let responseData = data.d.responseData; + console.log(responseData); + if (responseData.inputMuted) + document.getElementById("micMuteIcon").style.visibility = `visible`; + else + document.getElementById("micMuteIcon").style.visibility = `hidden`; + } + break; + } + break; + + } + } + } +} + + + +////////////////////// +// HELPER FUNCTIONS // +////////////////////// + +function obswsSendRequest(ws, data) { + ws.send( + JSON.stringify({ + "op": 6, + "d": data + } + )); +} + +function TimeToMilliseconds(hms) { + const [hours, minutes, seconds] = hms.split(':'); + const totalSeconds = (+hours) * 60 * 60 + (+minutes) * 60 + (+seconds); + return totalSeconds * 1000; +} + +function RemoveMilliseconds(timecode) { + const parts = timecode.split('.'); + return parts[0]; +} + +function ConvertToMegabytes(bytes) { + return ((bytes / 1024) / 1024).toFixed(2); +} + +function CreateGuid() { + function _p8(s) { + var p = (Math.random().toString(16) + "000000000").substr(2, 8); + return s ? "-" + p.substr(0, 4) + "-" + p.substr(4, 4) : p; + } + return _p8() + _p8(true) + _p8(true) + _p8(); +} + +function sha256(ascii) { + function rightRotate(value, amount) { + return (value >>> amount) | (value << (32 - amount)); + }; + + var mathPow = Math.pow; + var maxWord = mathPow(2, 32); + var lengthProperty = 'length' + var i, j; // Used as a counter across the whole file + var result = '' + + var words = []; + var asciiBitLength = ascii[lengthProperty] * 8; + + //* caching results is optional - remove/add slash from front of this line to toggle + // Initial hash value: first 32 bits of the fractional parts of the square roots of the first 8 primes + // (we actually calculate the first 64, but extra values are just ignored) + var hash = sha256.h = sha256.h || []; + // Round constants: first 32 bits of the fractional parts of the cube roots of the first 64 primes + var k = sha256.k = sha256.k || []; + var primeCounter = k[lengthProperty]; + /*/ + var hash = [], k = []; + var primeCounter = 0; + //*/ + + var isComposite = {}; + for (var candidate = 2; primeCounter < 64; candidate++) { + if (!isComposite[candidate]) { + for (i = 0; i < 313; i += candidate) { + isComposite[i] = candidate; + } + hash[primeCounter] = (mathPow(candidate, .5) * maxWord) | 0; + k[primeCounter++] = (mathPow(candidate, 1 / 3) * maxWord) | 0; + } + } + + ascii += '\x80' // Append Ƈ' bit (plus zero padding) + while (ascii[lengthProperty] % 64 - 56) ascii += '\x00' // More zero padding + for (i = 0; i < ascii[lengthProperty]; i++) { + j = ascii.charCodeAt(i); + if (j >> 8) return; // ASCII check: only accept characters in range 0-255 + words[i >> 2] |= j << ((3 - i) % 4) * 8; + } + words[words[lengthProperty]] = ((asciiBitLength / maxWord) | 0); + words[words[lengthProperty]] = (asciiBitLength) + + // process each chunk + for (j = 0; j < words[lengthProperty];) { + var w = words.slice(j, j += 16); // The message is expanded into 64 words as part of the iteration + var oldHash = hash; + // This is now the undefinedworking hash", often labelled as variables a...g + // (we have to truncate as well, otherwise extra entries at the end accumulate + hash = hash.slice(0, 8); + + for (i = 0; i < 64; i++) { + var i2 = i + j; + // Expand the message into 64 words + // Used below if + var w15 = w[i - 15], w2 = w[i - 2]; + + // Iterate + var a = hash[0], e = hash[4]; + var temp1 = hash[7] + + (rightRotate(e, 6) ^ rightRotate(e, 11) ^ rightRotate(e, 25)) // S1 + + ((e & hash[5]) ^ ((~e) & hash[6])) // ch + + k[i] + // Expand the message schedule if needed + + (w[i] = (i < 16) ? w[i] : ( + w[i - 16] + + (rightRotate(w15, 7) ^ rightRotate(w15, 18) ^ (w15 >>> 3)) // s0 + + w[i - 7] + + (rightRotate(w2, 17) ^ rightRotate(w2, 19) ^ (w2 >>> 10)) // s1 + ) | 0 + ); + // This is only used once, so *could* be moved below, but it only saves 4 bytes and makes things unreadble + var temp2 = (rightRotate(a, 2) ^ rightRotate(a, 13) ^ rightRotate(a, 22)) // S0 + + ((a & hash[1]) ^ (a & hash[2]) ^ (hash[1] & hash[2])); // maj + + hash = [(temp1 + temp2) | 0].concat(hash); // We don't bother trimming off the extra ones, they're harmless as long as we're truncating when we do the slice() + hash[4] = (hash[4] + temp1) | 0; + } + + for (i = 0; i < 8; i++) { + hash[i] = (hash[i] + oldHash[i]) | 0; + } + } + + for (i = 0; i < 8; i++) { + for (j = 3; j + 1; j--) { + var b = (hash[i] >> (j * 8)) & 255; + result += ((b < 16) ? 0 : '') + b.toString(16); + } + } + return result; +}; + +function hexToBase64(hexstring) { + return btoa(hexstring.match(/\w{2}/g).map(function (a) { + return String.fromCharCode(parseInt(a, 16)); + }).join("")); +} + + + +////////////////////// +// WEBSOCKET STATUS // +////////////////////// + +// This function sets the visibility of the Streamer.bot status label on the overlay +function SetConnectionStatus(connected) { + let statusContainer = document.getElementById("statusContainer"); + + if (connected) { + statusContainer.style.background = "#2FB774"; + statusContainer.innerText = "Connected!"; + mainContainer.style.visibility = `visible`; + var tl = new TimelineMax(); + tl + .to(statusContainer, 2, { opacity: 0, ease: Linear.easeNone }); + } + else { + statusContainer.style.background = "#D12025"; + statusContainer.innerText = "Connecting..."; + statusContainer.style.opacity = 1; + mainContainer.style.visibility = `hidden`; + } +} + +connectws(); + +setInterval(GetStreamStatus, 1000); +function GetStreamStatus() { + if (ws.readyState !== WebSocket.CLOSED) { + let data = + { + "requestType": "GetStreamStatus", + "requestId": CreateGuid(), + "requestData": { + } + } + obswsSendRequest(ws, data); + } +} + +function GetStreamServiceSettings() { + let data = + { + "requestType": "GetStreamServiceSettings", + "requestId": CreateGuid(), + "requestData": { + } + } + obswsSendRequest(ws, data); +} + +setInterval(GetProfileList, 200); +function GetProfileList() { + let data = + { + "requestType": "GetProfileList", + "requestId": CreateGuid(), + "requestData": { + } + } + obswsSendRequest(ws, data); +} + +setInterval(GetStats, 1000); +function GetStats() { + let data = + { + "requestType": "GetStats", + "requestId": CreateGuid(), + "requestData": { + } + } + obswsSendRequest(ws, data); +} + +setInterval(GetRecordStatus, 500); +function GetRecordStatus() { + let data = + { + "requestType": "GetRecordStatus", + "requestId": CreateGuid(), + "requestData": { + } + } + obswsSendRequest(ws, data); +} + + +if (obsMicInput != "") +{ + setInterval(GetInputMute, 500); + function GetInputMute() { + let data = + { + "requestType": "GetInputMute", + "requestId": CreateGuid(), + "requestData": { + "inputName": obsMicInput + } + } + obswsSendRequest(ws, data); + } +} + + +function GetVideoSettings() { + let data = + { + "requestType": "GetVideoSettings", + "requestId": CreateGuid(), + "requestData": { + } + } + obswsSendRequest(ws, data); +} \ No newline at end of file diff --git a/obs-info-hud/style.css b/obs-info-hud/style.css new file mode 100644 index 0000000..2effbd0 --- /dev/null +++ b/obs-info-hud/style.css @@ -0,0 +1,257 @@ +* { + --background: RGB(0, 0, 0, 0.75); +} + +body { + background-size: cover; +} + +#statusContainer { + font-family: 'Metropolis'; + font-style: italic; + font-weight: bold; + font-size: 30px; + width: 400px; + max-width: fit-content; + text-align: center; + background-color: #D12025; + color: white; + padding: 10px; + border-radius: 10px; + position: absolute; + top: 50%; + left: 50%; + transform: translate(-50%, -50%); +} + +#top, +#bottom, +#left, +#right { + background: red; + position: fixed; +} + +#left, +#right { + top: 0; + bottom: 0; + width: 1vw; +} + +#left { + left: 0; +} + +#right { + right: 0; +} + +#top, +#bottom { + left: 0; + right: 0; + height: 1vw; +} + +#top { + top: 0; +} + +#bottom { + bottom: 0; +} + +#recordingRing { + visibility: hidden; +} + +#streamingTop, +#streamingBottom, +#streamingLeft, +#streamingRight { + background: #8d65c5; + position: fixed; +} + +#streamingLeft, +#streamingRight { + top: 0; + bottom: 0; + width: 1vw; +} + +#streamingLeft { + left: 0; +} + +#streamingRight { + right: 0; +} + +#streamingTop, +#streamingBottom { + left: 0; + right: 0; + height: 1vw; +} + +#streamingTop { + top: 0; +} + +#streamingBottom { + bottom: 0; +} + + +#streamingRing { + visibility: hidden; +} + +#infoContainer { + font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica, Arial, sans-serif; + font-weight: 600; + font-size: 30px; + text-shadow: 2px 2px 2px #000000; + color: rgb(235, 235, 235); + z-index: 0; + position: absolute; + top: 0; + left: 0; + width: 100%; + height: 100%; +} + +#bottomBar, +#topBar, +#streamInfo, +#recordInfo { + position: absolute; + background-color: var(--background); + white-space: nowrap; + padding: 0px 20px; +} + +#bottomBar { + transform: translate(-50%, 0%); + text-align: center; + left: 50%; + bottom: 4vw; +} + +#topBar { + transform: translate(-50%, 0%); + left: 50%; + top: 4vw; +} + +#streamInfo { + visibility: hidden; + left: 2vw; + top: 4vw; +} + +#recordInfo { + visibility: hidden; + right: 2vw; + top: 4vw; +} + +#theMotherOfAllVolumeContainers +{ + position: relative; + margin-top: 10vw; + margin-bottom: 10vw; + height: calc(100% - 20vw); + width: 4vw; + margin-left: 4vw; + visibility: hidden; +} + +#volumeMeterContainerLeft, #volumeMeterContainerRight { + position: absolute; + height: 100%; + width: 48%; +} + +#volumeMeterContainerLeft { + background-color: var(--background); + position: absolute; + bottom: 0%; +} + +#volumeMeterContainerRight { + background-color: var(--background); + right: 0%; + bottom: 0%; +} + +#theGreenShitThatsInsideTheOtherContainerLeft, +#theGreenShitThatsInsideTheOtherContainerRight { + background-color: #37d247; + position: absolute; + bottom: 0%; + width: 100%; +} + +#theGreenShitThatsInsideTheOtherContainerLeft { + height: 00%; +} + +#theGreenShitThatsInsideTheOtherContainerRight { + height: 00%; +} + +#fpsContainer { + position: absolute; + background-color: var(--background); + width: 2vw; + height: calc(100% - 20vw); + right: 4vw; + top: 10vw; +} + +#fpsMeter { + background-color: #37d247; + position: absolute; + bottom: 0%; + width: 100%; + height: 0%; +} + +#fpsLabel { + font-size: 22px; + position: absolute; + bottom: -10px; + left: 50%; + transform: translate(-50%, 100%); + text-align: center; + background-color: var(--background); +} + +#micMuteIcon { + visibility: hidden; + height: 50%; + position: absolute; + bottom: 50%; + left: 50%; + transform: translate(-50%, 50%); + opacity: 50%; +} + +.barLabel { + font-size: 22px; + position: absolute; + bottom: -10px; + left: 50%; + transform: translate(-50%, 100%); + background-color: var(--background); + width: 100%; +} + +#mainContainer { + visibility: hidden; + width: 100%; + text-align: center; +} \ No newline at end of file diff --git a/scumbag-sub-goal-widget/index.html b/scumbag-sub-goal-widget/index.html new file mode 100644 index 0000000..ce38a98 --- /dev/null +++ b/scumbag-sub-goal-widget/index.html @@ -0,0 +1,8 @@ + + +
+ + +
+ + \ No newline at end of file diff --git a/scumbag-sub-goal-widget/script.js b/scumbag-sub-goal-widget/script.js new file mode 100644 index 0000000..c7c93ce --- /dev/null +++ b/scumbag-sub-goal-widget/script.js @@ -0,0 +1,36 @@ +//////////////////// +// URL PARAMETERS // +//////////////////// + +const queryString = window.location.search; +const urlParams = new URLSearchParams(queryString); +const followMode = urlParams.has("followMode"); +const twitchUsername = urlParams.get("username") || ''; +const defaultGoalLabel = !followMode ? 'SUB GOAL' : 'FOLLOW GOAL' +const goal = urlParams.get("goal") || defaultGoalLabel; + +/////////////// +// FUNCTIONS // +/////////////// + +async function UpdateMetrics() { + document.getElementById("goalLabel").innerHTML = `${goal}: `; + if (!followMode) + document.getElementById("subCountLabel").innerHTML = await GetSubCount(`https://decapi.me/twitch/subcount`); + else + document.getElementById("subCountLabel").innerHTML = await GetSubCount(`https://decapi.me/twitch/followcount`); + + setTimeout(UpdateMetrics, 10000); +} + +UpdateMetrics(); + +async function GetSubCount(url) { + const response = await fetch(`${url}/${twitchUsername}`); + const metric = await response.text(); + + if (metric.includes("decapi.me")) + return "-"; + else + return `${metric}/${parseInt(metric) + 1}`; +} \ No newline at end of file diff --git a/scumbag-sub-goal-widget/style.css b/scumbag-sub-goal-widget/style.css new file mode 100644 index 0000000..f9da020 --- /dev/null +++ b/scumbag-sub-goal-widget/style.css @@ -0,0 +1,16 @@ +* { + margin: 0; + padding: 0; +} + +#mainContainer { + text-align: center; + font-size: 40px; + text-transform: uppercase; + font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica, Arial, sans-serif; + + font-weight: 700; + font-size: 36px; + text-shadow: rgb(0, 0, 0) 2px 2px 2px; + color: white; +} \ No newline at end of file diff --git a/simple-twitch-metrics/index.html b/simple-twitch-metrics/index.html new file mode 100644 index 0000000..b3ad257 --- /dev/null +++ b/simple-twitch-metrics/index.html @@ -0,0 +1,20 @@ + + +
+ + + + + +
+ + \ No newline at end of file diff --git a/simple-twitch-metrics/script.js b/simple-twitch-metrics/script.js new file mode 100644 index 0000000..189f3c3 --- /dev/null +++ b/simple-twitch-metrics/script.js @@ -0,0 +1,38 @@ +//////////////////// +// URL PARAMETERS // +//////////////////// + +const queryString = window.location.search; +const urlParams = new URLSearchParams(queryString); +const twitchUsername = urlParams.get("username") || ''; + +/////////////// +// FUNCTIONS // +/////////////// + +async function UpdateMetrics() { + document.getElementById("subCountLabel").innerHTML = await GetMetric("https://decapi.me/twitch/subcount"); + document.getElementById("followerCountLabel").innerHTML = await GetMetric("https://decapi.me/twitch/followcount"); + document.getElementById("viewCountLabel").innerHTML = await GetViewCount(); + + setTimeout(UpdateMetrics, 15000); +} + +UpdateMetrics(); + +async function GetMetric(url) { + const response = await fetch(`${url}/${twitchUsername}`); + const metric = await response.text(); + + if (metric.includes("decapi.me")) + return "-"; + else + return metric; +} + +async function GetViewCount() { + const response = await fetch(`https://decapi.me/twitch/viewercount/${twitchUsername}`); + const viewcount = await response.text(); + + return isNaN(Number(viewcount)) ? 0 : Number(viewcount); +} \ No newline at end of file diff --git a/simple-twitch-metrics/style.css b/simple-twitch-metrics/style.css new file mode 100644 index 0000000..d925256 --- /dev/null +++ b/simple-twitch-metrics/style.css @@ -0,0 +1,25 @@ +* { + margin: 0; + padding: 0; +} + +#mainContainer { + text-align: center; + font-size: 40px; + text-transform: uppercase; + font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica, Arial, sans-serif; + + font-weight: 700; + font-size: 36px; + text-shadow: rgb(0, 0, 0) 2px 2px 2px; + color: white; +} + +.metricContainer { + padding: 0px 10px; +} + +.icon { + font-size: 44px; + padding: 0px 10px; +} \ No newline at end of file diff --git a/spotify-widget-compact/configure/index.html b/spotify-widget-compact/configure/index.html new file mode 100644 index 0000000..b753c6d --- /dev/null +++ b/spotify-widget-compact/configure/index.html @@ -0,0 +1,49 @@ + + + + Configure + + + + + + +
+
+
+ +
+ +
+
+ + +

+ +
+
+ + + \ No newline at end of file diff --git a/spotify-widget-compact/configure/logo.webp b/spotify-widget-compact/configure/logo.webp new file mode 100644 index 0000000..47fa3c0 Binary files /dev/null and b/spotify-widget-compact/configure/logo.webp differ diff --git a/spotify-widget-compact/configure/script.js b/spotify-widget-compact/configure/script.js new file mode 100644 index 0000000..7152b2a --- /dev/null +++ b/spotify-widget-compact/configure/script.js @@ -0,0 +1,131 @@ +/////////////// +// PARAMETRS // +/////////////// + +const queryString = window.location.search; +const urlParams = new URLSearchParams(queryString); + +const code = urlParams.get("code") || ""; + +const baseURL = "https://nuttylmao.github.io/spotify-widget-compact"; +const redirect_uri = `${baseURL}/configure`; +let refresh_token = ""; +let access_token = ""; +let browserSourceURL = ""; + + + +///////////////////////// +// AUTHORIZATION STUFF // +///////////////////////// + +function RequestAuthorization() { + const client_id = document.getElementById("client_id_box").value; + const client_secret = document.getElementById("client_secret_box").value; + localStorage.setItem("client_id", client_id); + localStorage.setItem("client_secret", client_secret); + + let url = "https://accounts.spotify.com/authorize"; + url += "?client_id=" + client_id; + url += "&response_type=code"; + url += "&redirect_uri=" + encodeURI(redirect_uri); + url += "&show_dialog=true"; + url += "&scope=user-read-private user-read-email user-modify-playback-state user-read-playback-position user-library-read streaming user-read-playback-state user-read-recently-played playlist-read-private"; + window.location.href = url; +} + +// If there is no code in the query string, direct the user to authorize their account +if (code != "") { + FetchAccessToken(code); +} +else { + document.getElementById("connectBox").style.display = 'inline'; +} + +async function FetchAccessToken(code) { + const client_id = localStorage.getItem("client_id"); + const client_secret = localStorage.getItem("client_secret"); + console.debug(`Client ID: ${client_id}`); + console.debug(`Client Secret: ${client_secret}`); + + let body = "grant_type=authorization_code"; + body += "&code=" + code; + body += "&redirect_uri=" + encodeURI(redirect_uri); + body += "&client_id=" + client_id; + body += "&client_secret=" + client_secret; + console.log(body); + + // Get the current player information from Spotify + const response = await fetch("https://accounts.spotify.com/api/token", { + method: "POST", + headers: { + 'Authorization': `Basic ${btoa(client_id + ":" + client_secret)}`, + 'Content-Type': 'application/x-www-form-urlencoded' + }, + body: body + }); + + // If we got a response, save the access token + if (response.ok) + { + const responseData = await response.json(); + console.debug(responseData); + refresh_token = responseData.refresh_token; // Unsure if we need to replace the refresh_token but do it just in case + access_token = responseData.access_token; // Save access token for all future API calls + + browserSourceURL = `${baseURL}?client_id=${client_id}&client_secret=${client_secret}&refresh_token=${refresh_token}`; + document.getElementById("authorizationBox").style.display = 'inline'; + } + else + { + console.error(`${response.status}`); + } +} + + + +/////////////////////////// +// BUTTON CLICK HANDLERS // +/////////////////////////// + +const clientIdBox = document.getElementById('client_id_box'); +const clientSecretBox = document.getElementById('client_secret_box'); +const authorizeButton = document.getElementById('authorizeButton'); + +// Function to check if either input is empty +function checkInputs() { + if (clientIdBox.value.trim() === '' || clientSecretBox.value.trim() === '') { + authorizeButton.disabled = true; // Disable the button + } else { + authorizeButton.disabled = false; // Enable the button + } +} + +// Listen for changes in the input boxes +clientIdBox.addEventListener('input', checkInputs); +clientSecretBox.addEventListener('input', checkInputs); + +// Initial check when the page loads, just in case +checkInputs(); + +function CopyToURL() { + navigator.clipboard.writeText(browserSourceURL); + + document.getElementById("copyURLButton").innerText = "Copied to clipboard"; + document.getElementById("copyURLButton").style.backgroundColor = "#00dd63" + document.getElementById("copyURLButton").style.color = "#ffffff"; + + setTimeout(() => { + document.getElementById("copyURLButton").innerText = "Click to copy URL"; + document.getElementById("copyURLButton").style.backgroundColor = "#ffffff"; + document.getElementById("copyURLButton").style.color = "#181818"; + }, 3000); +} + +function OpenInstructions() { + window.open("https://nuttylmao.notion.site/Spotify-Widget-Compact-Edition-1ac19969b23780ae8c63c4472db0ee6b", '_blank').focus(); +} + +function OpenDonationPage() { + window.open("http://nutty.gg/pages/donate", '_blank').focus(); +} \ No newline at end of file diff --git a/spotify-widget-compact/configure/style.css b/spotify-widget-compact/configure/style.css new file mode 100644 index 0000000..a6dc1c0 --- /dev/null +++ b/spotify-widget-compact/configure/style.css @@ -0,0 +1,104 @@ +* { + --corner-radius: 10px; + --padding: 20px; + font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica, Arial, sans-serif; +} + +body { + margin: 0px; + color: white; + font-size: 24px; +} + +#mainContainer { + position: absolute; + width: 100vw; + height: 100vh; + margin: 0px; + background-color: #282828; +} + +#connectBox{ + background-color: #181818; + border-radius: var(--corner-radius); + padding: calc(var(--padding)*3) calc(var(--padding)*3); + position: absolute; + left: 50%; + top: 50%; + transform: translateX(-50%) translateY(-50%); + display: flex; + filter: drop-shadow(0px 0px 4px rgba(0, 0, 0, 1)); + width: 400px; + display: none; +} + +#authorizationBox { + background-color: #252525; + border-radius: var(--corner-radius); + padding: calc(var(--padding)*3) calc(var(--padding)*3); + position: absolute; + left: 50%; + top: 50%; + transform: translateX(-50%) translateY(-50%); + filter: drop-shadow(0px 0px 4px rgba(0, 0, 0, 1)); + width: 400px; + display: none; +} + +#authorizationComplete { + display: block; + text-align: center; + padding-bottom: 40px; +} + +button { + font-size: 24px; + font-weight: 500; + background-color: #3be477; + color: white; + opacity: 0.8; + border-width: 0; + border-radius: var(--corner-radius); + padding: calc(var(--padding)/2) var(--padding); + width: 100%; +} + +button:hover { + opacity: 1; + cursor: pointer; +} + +button:disabled { + opacity: 0.5; + cursor: inherit; +} + +#instructionsButton, #donateButton { + background-color: #2e2e2e; +} + +#copyURLButton { + background-color: #ffffff; + color: #181818; + width: 100%; + transition: all 0.2s ease; +} + +#copyURLButton:disabled { + background-color: #636363; +} + +input { + border-radius: var(--corner-radius); + width: calc(100% - 20px); + font-size: 20px; + margin: 10px 0px; + padding: 10px 10px; + background-color: #ffffff05; + border-width: 0px; + color: white; +} + +textarea:focus, input:focus { + outline: none; +} \ No newline at end of file diff --git a/spotify-widget-compact/images/placeholder-album-art.afdesign b/spotify-widget-compact/images/placeholder-album-art.afdesign new file mode 100644 index 0000000..690b709 Binary files /dev/null and b/spotify-widget-compact/images/placeholder-album-art.afdesign differ diff --git a/spotify-widget-compact/images/placeholder-album-art.png b/spotify-widget-compact/images/placeholder-album-art.png new file mode 100644 index 0000000..c5c3662 Binary files /dev/null and b/spotify-widget-compact/images/placeholder-album-art.png differ diff --git a/spotify-widget-compact/index.html b/spotify-widget-compact/index.html new file mode 100644 index 0000000..5ab2d7a --- /dev/null +++ b/spotify-widget-compact/index.html @@ -0,0 +1,46 @@ + + + + Spotify Widget + + + + + + + +
Connecting...
+
+ +
+
+
+
Can't get you out of my mind
+
Dreamcatcher
+ +
+
+
+ + +
+
+
+ + + \ No newline at end of file diff --git a/spotify-widget-compact/script.js b/spotify-widget-compact/script.js new file mode 100644 index 0000000..19b81a9 --- /dev/null +++ b/spotify-widget-compact/script.js @@ -0,0 +1,270 @@ +/////////////// +// PARAMETRS // +/////////////// + +const queryString = window.location.search; +const urlParams = new URLSearchParams(queryString); + +const client_id = urlParams.get("client_id") || ""; +const client_secret = urlParams.get("client_secret") || ""; +let refresh_token = urlParams.get("refresh_token") || ""; +let access_token = ""; + +const visibilityDuration = urlParams.get("duration") || 0; +// const hideAlbumArt = urlParams.has("hideAlbumArt"); + +let currentState = false; +let currentSongUri = ""; + + + +///////////////// +// SPOTIFY API // +///////////////// + +// Update the access token - this expires so needs to be refreshed with refresh_token +async function RefreshAccessToken() { + console.debug(`Client ID: ${client_id}`); + console.debug(`Client Secret: ${client_secret}`); + console.debug(`Refresh Token: ${refresh_token}`); + + let body = "grant_type=refresh_token"; + body += "&refresh_token=" + refresh_token; + body += "&client_id=" + client_id; + + const response = await fetch("https://accounts.spotify.com/api/token", { + method: "POST", + headers: { + 'Authorization': `Basic ${btoa(client_id + ":" + client_secret)}`, + 'Content-Type': 'application/x-www-form-urlencoded' + }, + body: body + }); + + // If we got a response, save the access token + if (response.ok) + { + const responseData = await response.json(); + console.debug(responseData); + //refresh_token = responseData.refresh_token; // Unsure if we need to replace the refresh_token but do it just in case + access_token = responseData.access_token; // Save access token for all future API calls + } + else + { + console.error(`${response.status}`); + } +} + +async function GetCurrentlyPlaying(refreshInterval) { + try { + // Get the current player information from Spotify + const response = await fetch("https://api.spotify.com/v1/me/player/currently-playing", { + method: "GET", + headers: { + 'Authorization': `Bearer ${access_token}`, + 'Content-Type': 'application/json' + } + }) + + // If we got a response, save the access token + if (response.ok) + { + const responseData = await response.json(); + console.debug(responseData); + UpdatePlayer(responseData); + } + else + { + switch (response.status) + { + case 401: + console.debug(`${response.status}`) + RefreshAccessToken(); + break; + default: + console.error(`${response.status}`) + } + } + // Refresh + setTimeout(() => { + GetCurrentlyPlaying() + }, 1000); + } + catch (error) + { + console.debug(error); + SetVisibility(false); + + // Try again in 2 seconds + setTimeout(() => { + GetCurrentlyPlaying() + }, 2000); + } +} + +function UpdatePlayer(data) { + const isPlaying = data.is_playing; // The play/pause state of the player + const songUri = data.item.uri; + const albumArt = data.item.album.images.length > 0 ? + `${data.item.album.images[0].url}` + : `images/placeholder-album-art.png`; // The album art URL + const artist = `${data.item.artists[0].name}`; // Name of the artist + const name = `${data.item.name}`; // Name of the song + const duration = `${data.item.duration_ms/1000}`; // The duration of the song in seconds + const progress = `${data.progress_ms/1000}`; // The current position in seconds + + // Set the visibility of the player, but only if the state is different than the last time we checked + if (isPlaying != currentState) { + + // Set player visibility + if (!isPlaying) + { + console.debug("Hiding player..."); + SetVisibility(false); + } + else + { + console.debug("Showing player..."); + setTimeout(() => { + SetVisibility(true); + + if (visibilityDuration > 0) { + setTimeout(() => { + SetVisibility(false, false); + }, visibilityDuration * 1000); + } + }, 500); + } + } + + if (songUri != currentSongUri) { + if (isPlaying) { + console.debug("Showing player..."); + setTimeout(() => { + SetVisibility(true); + + if (visibilityDuration > 0) { + setTimeout(() => { + SetVisibility(false, false); + }, visibilityDuration * 1000); + } + }, 500); + + currentSongUri = songUri; + } + } + + // Set thumbnail + // UpdateAlbumArt(document.getElementById("albumArt"), albumArt); + UpdateAlbumArt(document.getElementById("backgroundImage"), albumArt); + + // Set song info + UpdateTextLabel(document.getElementById("artistLabel"), artist); + UpdateTextLabel(document.getElementById("songLabel"), name); + + // Set progressbar + const progressPerc = ((progress / duration) * 100); // Progress expressed as a percentage + const progressTime = ConvertSecondsToMinutesSoThatItLooksBetterOnTheOverlay(progress); + const timeRemaining = ConvertSecondsToMinutesSoThatItLooksBetterOnTheOverlay(duration - progress); + console.debug(`Progress: ${progressTime}`); + console.debug(`Time Remaining: ${timeRemaining}`); + // document.getElementById("progressBar").style.width = `${progressPerc}%`; + // document.getElementById("progressTime").innerHTML = progressTime; + // document.getElementById("timeRemaining").innerHTML = `-${timeRemaining}`; + document.getElementById("backgroundImage").style.clipPath = `inset(0 ${100 - progressPerc}% 0 0)`; + + setTimeout(() => { + // document.getElementById("albumArtBack").src = albumArt; + document.getElementById("backgroundImageBack").src = albumArt; + }, 1000); +} + +function UpdateTextLabel(div, text) { + if (div.innerText != text) { + div.setAttribute("class", "text-fade"); + setTimeout(() => { + div.innerText = text; + div.setAttribute("class", ".text-show"); + }, 500); + } +} + +function UpdateAlbumArt(div, imgsrc) { + if (div.src != imgsrc) { + div.setAttribute("class", "text-fade"); + setTimeout(() => { + div.src = imgsrc; + div.setAttribute("class", "text-show"); + }, 500); + } +} + + + +////////////////////// +// HELPER FUNCTIONS // +////////////////////// + +function ConvertSecondsToMinutesSoThatItLooksBetterOnTheOverlay(time) { + const minutes = Math.floor(time / 60); + const seconds = Math.trunc(time - minutes * 60); + + return `${minutes}:${('0' + seconds).slice(-2)}`; +} + +function SetVisibility(isVisible, updateCurrentState = true) { + widgetVisibility = isVisible; + + const mainContainer = document.getElementById("mainContainer"); + + if (isVisible) { + mainContainer.style.opacity = 1; + mainContainer.style.bottom = "50%"; + } + else { + mainContainer.style.opacity = 0; + mainContainer.style.bottom = "calc(50% - 20px)"; + } + + if (updateCurrentState) + currentState = isVisible; +} + + + +////////////////////////////////////////////////////////////////////////////////////////// +// RESIZER THING BECAUSE I THINK I KNOW HOW RESPONSIVE DESIGN WORKS EVEN THOUGH I DON'T // +////////////////////////////////////////////////////////////////////////////////////////// + +let outer = document.getElementById('mainContainer'), +maxWidth = outer.clientWidth+100, + maxHeight = outer.clientHeight; + +window.addEventListener("resize", resize); + +resize(); +function resize() { + const scale = window.innerWidth / maxWidth; + outer.style.transform = 'translate(-50%, 50%) scale(' + scale + ')'; +} + + + +///////////////////////////////////////////////////////////////////// +// IF THE USER PUT IN THE HIDEALBUMART PARAMATER, THEN YOU SHOULD // +// HIDE THE ALBUM ART, BECAUSE THAT'S WHAT IT'S SUPPOSED TO DO // +///////////////////////////////////////////////////////////////////// + +// if (hideAlbumArt) { +// document.getElementById("albumArtBox").style.display = "none"; +// document.getElementById("songInfoBox").style.width = "calc(100% - 20px)"; +// } + + + +//////////////////////////////// +// KICK OFF THE WHOLE WIDGET // +//////////////////////////////// + +RefreshAccessToken(); +GetCurrentlyPlaying(); // This is a recursive function, so just run it once \ No newline at end of file diff --git a/spotify-widget-compact/style.css b/spotify-widget-compact/style.css new file mode 100644 index 0000000..d11060c --- /dev/null +++ b/spotify-widget-compact/style.css @@ -0,0 +1,191 @@ +* { + --corner-radius: 25px; + --album-art-size: 50px; +} + +body { + font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica, Arial, sans-serif; +} + +#statusContainer { + font-weight: 500; + font-size: 30px; + text-align: center; + background-color: #D12025; + color: white; + padding: 10px; + border-radius: 10px; + position: absolute; + top: 50%; + left: 50%; + transform: translate(-50%, -50%); + opacity: 0; +} + +#mainContainer { + font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica, Arial, sans-serif; + display: flex; + position: absolute; + height: var(--album-art-size); + margin: 20px; + filter: drop-shadow(15px 15px 7px rgba(0, 0, 0, 1)); + width: 100%; + max-width: 400px; + bottom: calc(50% - 20px); + left: 50%; + opacity: 0; + transition: all 0.5s ease; +} + +/* #albumArtBox { + background: rgba(0, 0, 0, 0.5); + position: relative; + border-radius: var(--corner-radius); + overflow: hidden; + margin: 0px 8px 0px 0px; + object-fit: cover; + width: var(--album-art-size); +} + +#albumArt { + width: 100%; + height: 100%; + position: absolute; + top: 0%; + object-fit: cover; +} +#albumArtBack { + width: 100%; + height: 100%; + object-fit: cover; +} */ + +#songInfoBox { + position: relative; + color: white; + /* width: calc(100% - 125px); */ + width: calc(100%); + display: flex; + flex-direction: column; + flex: 0 1 auto; + justify-content: center; + z-index: 1; + text-shadow: 2px 2px 2px rgba(0, 0, 0, 0.5); + overflow: hidden; + z-index: 4; +} + +#songInfo { + background: rgba(0, 0, 0, 0.5); + opacity: 0.9; + position: relative; + border-radius: var(--corner-radius); + padding: 0px 20px; + height: 100%; + overflow: hidden; +} + +#IAmRunningOutOfNamesForTheseBoxes { + position: absolute; + width: calc(100% - 40px); + position: absolute; + top: 50%; + -ms-transform: translateY(-50%); + transform: translateY(-50%); +} + +#backgroundArt { + position: absolute; + height: 100%; + width: 100%; + border-radius: var(--corner-radius); + overflow: hidden; + z-index: -1; + opacity: 0.9; +} + +#backgroundImage { + filter: blur(20px); + position: absolute; + width: 100%; + top: 50%; + left: 50%; + transform: translateX(-50%) translateY(-50%); + transition: all 2s ease; +} + +#backgroundImageBack { + filter: blur(20px) grayscale(75%); + opacity: 0.5; + position: absolute; + width: 100%; + top: 50%; + left: 50%; + transform: translateX(-50%) translateY(-50%); + z-index: -1; +} + +#artistLabel { + font-size: 16px; + font-weight: 400; + line-height: 1; + white-space: nowrap; + transition: all 0.5s ease; + text-align: center; +} + +#songLabel { + font-weight: bold; + font-size: 20px; + width: calc(100%); + overflow: hidden; + text-overflow: ellipsis; + white-space: nowrap; + transition: all 0.5s ease; + text-align: center; +} + +/* #progressBg { + margin-top: 15px; + width: 100%; + height: auto; + border-radius: 5px; + background-color: #1F1F1F; +} */ + +/* #progressBar { + border-radius: 5px; + height: 5px; + width: 20%; + background-color: #ffffff; + margin: 10px 0px; + transition: all 1s ease; +} */ + +/* #times { + position: relative; + height: 16px; + font-size: 16px; + font-weight: 700; + line-height: 2.2; +} */ + +/* #progressTime { + position: absolute; +} */ + +/* #timeRemaining { + position: absolute; + width: 100%; + text-align: right; +} */ + +.text-show { + opacity: 1; + transition: all 0.25s ease; +} + +.text-fade { + opacity: 0; + transition: all 0.25s ease; +} \ No newline at end of file diff --git a/spotify-widget/configure/index.html b/spotify-widget/configure/index.html new file mode 100644 index 0000000..b753c6d --- /dev/null +++ b/spotify-widget/configure/index.html @@ -0,0 +1,49 @@ + + + + Configure + + + + + + +
+
+
+ +
+ +
+
+ + +

+ +
+
+ + + \ No newline at end of file diff --git a/spotify-widget/configure/logo.webp b/spotify-widget/configure/logo.webp new file mode 100644 index 0000000..47fa3c0 Binary files /dev/null and b/spotify-widget/configure/logo.webp differ diff --git a/spotify-widget/configure/script.js b/spotify-widget/configure/script.js new file mode 100644 index 0000000..5fa18c3 --- /dev/null +++ b/spotify-widget/configure/script.js @@ -0,0 +1,131 @@ +/////////////// +// PARAMETRS // +/////////////// + +const queryString = window.location.search; +const urlParams = new URLSearchParams(queryString); + +const code = urlParams.get("code") || ""; + +const baseURL = "https://nuttylmao.github.io/spotify-widget"; +const redirect_uri = `${baseURL}/configure`; +let refresh_token = ""; +let access_token = ""; +let browserSourceURL = ""; + + + +///////////////////////// +// AUTHORIZATION STUFF // +///////////////////////// + +function RequestAuthorization() { + const client_id = document.getElementById("client_id_box").value; + const client_secret = document.getElementById("client_secret_box").value; + localStorage.setItem("client_id", client_id); + localStorage.setItem("client_secret", client_secret); + + let url = "https://accounts.spotify.com/authorize"; + url += "?client_id=" + client_id; + url += "&response_type=code"; + url += "&redirect_uri=" + encodeURI(redirect_uri); + url += "&show_dialog=true"; + url += "&scope=user-read-private user-read-email user-modify-playback-state user-read-playback-position user-library-read streaming user-read-playback-state user-read-recently-played playlist-read-private"; + window.location.href = url; +} + +// If there is no code in the query string, direct the user to authorize their account +if (code != "") { + FetchAccessToken(code); +} +else { + document.getElementById("connectBox").style.display = 'inline'; +} + +async function FetchAccessToken(code) { + const client_id = localStorage.getItem("client_id"); + const client_secret = localStorage.getItem("client_secret"); + console.debug(`Client ID: ${client_id}`); + console.debug(`Client Secret: ${client_secret}`); + + let body = "grant_type=authorization_code"; + body += "&code=" + code; + body += "&redirect_uri=" + encodeURI(redirect_uri); + body += "&client_id=" + client_id; + body += "&client_secret=" + client_secret; + console.log(body); + + // Get the current player information from Spotify + const response = await fetch("https://accounts.spotify.com/api/token", { + method: "POST", + headers: { + 'Authorization': `Basic ${btoa(client_id + ":" + client_secret)}`, + 'Content-Type': 'application/x-www-form-urlencoded' + }, + body: body + }); + + // If we got a response, save the access token + if (response.ok) + { + const responseData = await response.json(); + console.debug(responseData); + refresh_token = responseData.refresh_token; // Unsure if we need to replace the refresh_token but do it just in case + access_token = responseData.access_token; // Save access token for all future API calls + + browserSourceURL = `${baseURL}?client_id=${client_id}&client_secret=${client_secret}&refresh_token=${refresh_token}`; + document.getElementById("authorizationBox").style.display = 'inline'; + } + else + { + console.error(`${response.status}`); + } +} + + + +/////////////////////////// +// BUTTON CLICK HANDLERS // +/////////////////////////// + +const clientIdBox = document.getElementById('client_id_box'); +const clientSecretBox = document.getElementById('client_secret_box'); +const authorizeButton = document.getElementById('authorizeButton'); + +// Function to check if either input is empty +function checkInputs() { + if (clientIdBox.value.trim() === '' || clientSecretBox.value.trim() === '') { + authorizeButton.disabled = true; // Disable the button + } else { + authorizeButton.disabled = false; // Enable the button + } +} + +// Listen for changes in the input boxes +clientIdBox.addEventListener('input', checkInputs); +clientSecretBox.addEventListener('input', checkInputs); + +// Initial check when the page loads, just in case +checkInputs(); + +function CopyToURL() { + navigator.clipboard.writeText(browserSourceURL); + + document.getElementById("copyURLButton").innerText = "Copied to clipboard"; + document.getElementById("copyURLButton").style.backgroundColor = "#00dd63" + document.getElementById("copyURLButton").style.color = "#ffffff"; + + setTimeout(() => { + document.getElementById("copyURLButton").innerText = "Click to copy URL"; + document.getElementById("copyURLButton").style.backgroundColor = "#ffffff"; + document.getElementById("copyURLButton").style.color = "#181818"; + }, 3000); +} + +function OpenInstructions() { + window.open("https://nuttylmao.notion.site/Spotify-Widget-18e19969b237807ca88cfc9c4159da15", '_blank').focus(); +} + +function OpenDonationPage() { + window.open("http://nutty.gg/pages/donate", '_blank').focus(); +} \ No newline at end of file diff --git a/spotify-widget/configure/style.css b/spotify-widget/configure/style.css new file mode 100644 index 0000000..a6dc1c0 --- /dev/null +++ b/spotify-widget/configure/style.css @@ -0,0 +1,104 @@ +* { + --corner-radius: 10px; + --padding: 20px; + font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica, Arial, sans-serif; +} + +body { + margin: 0px; + color: white; + font-size: 24px; +} + +#mainContainer { + position: absolute; + width: 100vw; + height: 100vh; + margin: 0px; + background-color: #282828; +} + +#connectBox{ + background-color: #181818; + border-radius: var(--corner-radius); + padding: calc(var(--padding)*3) calc(var(--padding)*3); + position: absolute; + left: 50%; + top: 50%; + transform: translateX(-50%) translateY(-50%); + display: flex; + filter: drop-shadow(0px 0px 4px rgba(0, 0, 0, 1)); + width: 400px; + display: none; +} + +#authorizationBox { + background-color: #252525; + border-radius: var(--corner-radius); + padding: calc(var(--padding)*3) calc(var(--padding)*3); + position: absolute; + left: 50%; + top: 50%; + transform: translateX(-50%) translateY(-50%); + filter: drop-shadow(0px 0px 4px rgba(0, 0, 0, 1)); + width: 400px; + display: none; +} + +#authorizationComplete { + display: block; + text-align: center; + padding-bottom: 40px; +} + +button { + font-size: 24px; + font-weight: 500; + background-color: #3be477; + color: white; + opacity: 0.8; + border-width: 0; + border-radius: var(--corner-radius); + padding: calc(var(--padding)/2) var(--padding); + width: 100%; +} + +button:hover { + opacity: 1; + cursor: pointer; +} + +button:disabled { + opacity: 0.5; + cursor: inherit; +} + +#instructionsButton, #donateButton { + background-color: #2e2e2e; +} + +#copyURLButton { + background-color: #ffffff; + color: #181818; + width: 100%; + transition: all 0.2s ease; +} + +#copyURLButton:disabled { + background-color: #636363; +} + +input { + border-radius: var(--corner-radius); + width: calc(100% - 20px); + font-size: 20px; + margin: 10px 0px; + padding: 10px 10px; + background-color: #ffffff05; + border-width: 0px; + color: white; +} + +textarea:focus, input:focus { + outline: none; +} \ No newline at end of file diff --git a/spotify-widget/images/placeholder-album-art.afdesign b/spotify-widget/images/placeholder-album-art.afdesign new file mode 100644 index 0000000..690b709 Binary files /dev/null and b/spotify-widget/images/placeholder-album-art.afdesign differ diff --git a/spotify-widget/images/placeholder-album-art.png b/spotify-widget/images/placeholder-album-art.png new file mode 100644 index 0000000..c5c3662 Binary files /dev/null and b/spotify-widget/images/placeholder-album-art.png differ diff --git a/spotify-widget/index.html b/spotify-widget/index.html new file mode 100644 index 0000000..09210b3 --- /dev/null +++ b/spotify-widget/index.html @@ -0,0 +1,46 @@ + + + + Spotify Widget + + + + + + + +
Connecting...
+
+
+ + +
+
+
+
+
Can't get you out of my mind
+
Dreamcatcher
+
+
2:29
+
3:43
+
+
+
+
+
+
+
+ + +
+
+
+ + + \ No newline at end of file diff --git a/spotify-widget/script.js b/spotify-widget/script.js new file mode 100644 index 0000000..701ef31 --- /dev/null +++ b/spotify-widget/script.js @@ -0,0 +1,269 @@ +/////////////// +// PARAMETRS // +/////////////// + +const queryString = window.location.search; +const urlParams = new URLSearchParams(queryString); + +const client_id = urlParams.get("client_id") || ""; +const client_secret = urlParams.get("client_secret") || ""; +let refresh_token = urlParams.get("refresh_token") || ""; +let access_token = ""; + +const visibilityDuration = urlParams.get("duration") || 0; +const hideAlbumArt = urlParams.has("hideAlbumArt"); + +let currentState = false; +let currentSongUri = ""; + + + +///////////////// +// SPOTIFY API // +///////////////// + +// Update the access token - this expires so needs to be refreshed with refresh_token +async function RefreshAccessToken() { + console.debug(`Client ID: ${client_id}`); + console.debug(`Client Secret: ${client_secret}`); + console.debug(`Refresh Token: ${refresh_token}`); + + let body = "grant_type=refresh_token"; + body += "&refresh_token=" + refresh_token; + body += "&client_id=" + client_id; + + const response = await fetch("https://accounts.spotify.com/api/token", { + method: "POST", + headers: { + 'Authorization': `Basic ${btoa(client_id + ":" + client_secret)}`, + 'Content-Type': 'application/x-www-form-urlencoded' + }, + body: body + }); + + // If we got a response, save the access token + if (response.ok) + { + const responseData = await response.json(); + console.debug(responseData); + //refresh_token = responseData.refresh_token; // Unsure if we need to replace the refresh_token but do it just in case + access_token = responseData.access_token; // Save access token for all future API calls + } + else + { + console.error(`${response.status}`); + } +} + +async function GetCurrentlyPlaying(refreshInterval) { + try { + // Get the current player information from Spotify + const response = await fetch("https://api.spotify.com/v1/me/player/currently-playing", { + method: "GET", + headers: { + 'Authorization': `Bearer ${access_token}`, + 'Content-Type': 'application/json' + } + }) + + // If we got a response, save the access token + if (response.ok) + { + const responseData = await response.json(); + console.debug(responseData); + UpdatePlayer(responseData); + } + else + { + switch (response.status) + { + case 401: + console.debug(`${response.status}`) + RefreshAccessToken(); + break; + default: + console.error(`${response.status}`) + } + } + // Refresh + setTimeout(() => { + GetCurrentlyPlaying() + }, 1000); + } + catch (error) + { + console.debug(error); + SetVisibility(false); + + // Try again in 2 seconds + setTimeout(() => { + GetCurrentlyPlaying() + }, 2000); + } +} + +function UpdatePlayer(data) { + const isPlaying = data.is_playing; // The play/pause state of the player + const songUri = data.item.uri; + const albumArt = data.item.album.images.length > 0 ? + `${data.item.album.images[0].url}` + : `images/placeholder-album-art.png`; // The album art URL + const artist = `${data.item.artists[0].name}`; // Name of the artist + const name = `${data.item.name}`; // Name of the song + const duration = `${data.item.duration_ms/1000}`; // The duration of the song in seconds + const progress = `${data.progress_ms/1000}`; // The current position in seconds + + // Set the visibility of the player, but only if the state is different than the last time we checked + if (isPlaying != currentState) { + + // Set player visibility + if (!isPlaying) + { + console.debug("Hiding player..."); + SetVisibility(false); + } + else + { + console.debug("Showing player..."); + setTimeout(() => { + SetVisibility(true); + + if (visibilityDuration > 0) { + setTimeout(() => { + SetVisibility(false, false); + }, visibilityDuration * 1000); + } + }, 500); + } + } + + if (songUri != currentSongUri) { + if (isPlaying) { + console.debug("Showing player..."); + setTimeout(() => { + SetVisibility(true); + + if (visibilityDuration > 0) { + setTimeout(() => { + SetVisibility(false, false); + }, visibilityDuration * 1000); + } + }, 500); + + currentSongUri = songUri; + } + } + + // Set thumbnail + UpdateAlbumArt(document.getElementById("albumArt"), albumArt); + UpdateAlbumArt(document.getElementById("backgroundImage"), albumArt); + + // Set song info + UpdateTextLabel(document.getElementById("artistLabel"), artist); + UpdateTextLabel(document.getElementById("songLabel"), name); + + // Set progressbar + const progressPerc = ((progress / duration) * 100); // Progress expressed as a percentage + const progressTime = ConvertSecondsToMinutesSoThatItLooksBetterOnTheOverlay(progress); + const timeRemaining = ConvertSecondsToMinutesSoThatItLooksBetterOnTheOverlay(duration - progress); + console.debug(`Progress: ${progressTime}`); + console.debug(`Time Remaining: ${timeRemaining}`); + document.getElementById("progressBar").style.width = `${progressPerc}%`; + document.getElementById("progressTime").innerHTML = progressTime; + document.getElementById("timeRemaining").innerHTML = `-${timeRemaining}`; + + setTimeout(() => { + document.getElementById("albumArtBack").src = albumArt; + document.getElementById("backgroundImageBack").src = albumArt; + }, 1000); +} + +function UpdateTextLabel(div, text) { + if (div.innerText != text) { + div.setAttribute("class", "text-fade"); + setTimeout(() => { + div.innerText = text; + div.setAttribute("class", ".text-show"); + }, 500); + } +} + +function UpdateAlbumArt(div, imgsrc) { + if (div.src != imgsrc) { + div.setAttribute("class", "text-fade"); + setTimeout(() => { + div.src = imgsrc; + div.setAttribute("class", "text-show"); + }, 500); + } +} + + + +////////////////////// +// HELPER FUNCTIONS // +////////////////////// + +function ConvertSecondsToMinutesSoThatItLooksBetterOnTheOverlay(time) { + const minutes = Math.floor(time / 60); + const seconds = Math.trunc(time - minutes * 60); + + return `${minutes}:${('0' + seconds).slice(-2)}`; +} + +function SetVisibility(isVisible, updateCurrentState = true) { + widgetVisibility = isVisible; + + const mainContainer = document.getElementById("mainContainer"); + + if (isVisible) { + mainContainer.style.opacity = 1; + mainContainer.style.bottom = "50%"; + } + else { + mainContainer.style.opacity = 0; + mainContainer.style.bottom = "calc(50% - 20px)"; + } + + if (updateCurrentState) + currentState = isVisible; +} + + + +////////////////////////////////////////////////////////////////////////////////////////// +// RESIZER THING BECAUSE I THINK I KNOW HOW RESPONSIVE DESIGN WORKS EVEN THOUGH I DON'T // +////////////////////////////////////////////////////////////////////////////////////////// + +let outer = document.getElementById('mainContainer'), + maxWidth = outer.clientWidth+50, + maxHeight = outer.clientHeight; + +window.addEventListener("resize", resize); + +resize(); +function resize() { + const scale = window.innerWidth / maxWidth; + outer.style.transform = 'translate(-50%, 50%) scale(' + scale + ')'; +} + + + +///////////////////////////////////////////////////////////////////// +// IF THE USER PUT IN THE HIDEALBUMART PARAMATER, THEN YOU SHOULD // +// HIDE THE ALBUM ART, BECAUSE THAT'S WHAT IT'S SUPPOSED TO DO // +///////////////////////////////////////////////////////////////////// + +if (hideAlbumArt) { + document.getElementById("albumArtBox").style.display = "none"; + document.getElementById("songInfoBox").style.width = "calc(100% - 20px)"; +} + + + +//////////////////////////////// +// KICK OFF THE WHOLE WIDGET // +//////////////////////////////// + +RefreshAccessToken(); +GetCurrentlyPlaying(); // This is a recursive function, so just run it once \ No newline at end of file diff --git a/spotify-widget/style.css b/spotify-widget/style.css new file mode 100644 index 0000000..a503ab0 --- /dev/null +++ b/spotify-widget/style.css @@ -0,0 +1,192 @@ +* { + --corner-radius: 10px; + --album-art-size: 100px; +} + +body { + font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica, Arial, sans-serif; +} + +#statusContainer { + font-weight: 500; + font-size: 30px; + text-align: center; + background-color: #D12025; + color: white; + padding: 10px; + border-radius: 10px; + position: absolute; + top: 50%; + left: 50%; + transform: translate(-50%, -50%); + opacity: 0; +} + +#mainContainer { + font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica, Arial, sans-serif; + display: flex; + position: absolute; + height: var(--album-art-size); + margin: 20px; + filter: drop-shadow(15px 15px 7px rgba(0, 0, 0, 1)); + width: 100%; + max-width: 500px; + bottom: calc(50% - 20px); + left: 50%; + opacity: 0; + transition: all 0.5s ease; +} + +#albumArtBox { + background: rgba(0, 0, 0, 0.5); + position: relative; + border-radius: var(--corner-radius); + overflow: hidden; + margin: 0px 8px 0px 0px; + object-fit: cover; + width: var(--album-art-size); +} + +#albumArt { + width: 100%; + height: 100%; + position: absolute; + top: 0%; + object-fit: cover; +} +#albumArtBack { + width: 100%; + height: 100%; + object-fit: cover; +} + +#albumArtBox img { + /* width: 100%; + height: 100%; + object-fit: cover; */ +} + +#songInfoBox { + position: relative; + color: white; + width: calc(100% - 125px); + display: flex; + flex-direction: column; + flex: 0 1 auto; + justify-content: center; + z-index: 1; + text-shadow: 2px 2px 2px rgba(0, 0, 0, 0.5); + overflow: hidden; + z-index: 4; +} + +#songInfo { + background: rgba(0, 0, 0, 0.5); + opacity: 0.9; + position: relative; + border-radius: var(--corner-radius); + padding: 0px 20px; + height: 100%; + overflow: hidden; +} + +#IAmRunningOutOfNamesForTheseBoxes { + position: absolute; + width: calc(100% - 40px); + position: absolute; + top: 50%; + -ms-transform: translateY(-50%); + transform: translateY(-50%); +} + +#backgroundArt { + position: absolute; + height: 100%; + width: 100%; + border-radius: var(--corner-radius); + overflow: hidden; + z-index: -1; + opacity: 0.9; +} + +#backgroundImage { + filter: blur(20px); + position: absolute; + width: 140%; + top: 50%; + left: 50%; + transform: translateX(-50%) translateY(-50%); +} + +#backgroundImageBack { + filter: blur(20px); + position: absolute; + width: 140%; + top: 50%; + left: 50%; + transform: translateX(-50%) translateY(-50%); + z-index: -1; +} + +#artistLabel { + font-size: 16px; + font-weight: 400; + line-height: 1; + white-space: nowrap; + transition: all 0.5s ease; +} + +#songLabel { + font-weight: bold; + font-size: 20px; + width: calc(100%); + overflow: hidden; + text-overflow: ellipsis; + white-space: nowrap; + transition: all 0.5s ease; +} + +#progressBg { + margin-top: 15px; + width: 100%; + height: auto; + border-radius: 5px; + background-color: #1F1F1F; +} + +#progressBar { + border-radius: 5px; + height: 5px; + width: 20%; + background-color: #ffffff; + margin: 10px 0px; + transition: all 1s ease; +} + +#times { + position: relative; + height: 16px; + font-size: 16px; + font-weight: 700; + line-height: 2.2; +} + +#progressTime { + position: absolute; +} + +#timeRemaining { + position: absolute; + width: 100%; + text-align: right; +} + +.text-show { + opacity: 1; + transition: all 0.25s ease; +} + +.text-fade { + opacity: 0; + transition: all 0.25s ease; +} \ No newline at end of file diff --git a/twitch-uptime-widget/index.html b/twitch-uptime-widget/index.html new file mode 100644 index 0000000..2f251b3 --- /dev/null +++ b/twitch-uptime-widget/index.html @@ -0,0 +1,7 @@ + + +
+ +
+ + \ No newline at end of file diff --git a/twitch-uptime-widget/script.js b/twitch-uptime-widget/script.js new file mode 100644 index 0000000..d1f19d7 --- /dev/null +++ b/twitch-uptime-widget/script.js @@ -0,0 +1,40 @@ +//////////////////// +// URL PARAMETERS // +//////////////////// + +const queryString = window.location.search; +const urlParams = new URLSearchParams(queryString); +const twitchUsername = urlParams.get("username") || ''; + +/////////////// +// FUNCTIONS // +/////////////// + +async function UpdateUptime() { + document.getElementById("uptimeLabel").innerHTML = await GetUptime(); + + setTimeout(UpdateUptime, 30000); +} + +UpdateUptime(); + +async function GetUptime() { + const response = await fetch(`https://decapi.me/twitch/uptime/${twitchUsername}`); + const metric = await response.text(); + + if (metric.includes("second")) + { + return removeTextAfterLastComma(metric); + } + else + return metric; +} + +function removeTextAfterLastComma(str) { + const lastCommaIndex = str.lastIndexOf(','); + if (lastCommaIndex !== -1) { + return str.substring(0, lastCommaIndex); + } else { + return str; // No comma found, return the original string + } + } \ No newline at end of file diff --git a/twitch-uptime-widget/style.css b/twitch-uptime-widget/style.css new file mode 100644 index 0000000..f9da020 --- /dev/null +++ b/twitch-uptime-widget/style.css @@ -0,0 +1,16 @@ +* { + margin: 0; + padding: 0; +} + +#mainContainer { + text-align: center; + font-size: 40px; + text-transform: uppercase; + font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica, Arial, sans-serif; + + font-weight: 700; + font-size: 36px; + text-shadow: rgb(0, 0, 0) 2px 2px 2px; + color: white; +} \ No newline at end of file diff --git a/widget-customizer/index.html b/widget-customizer/index.html new file mode 100644 index 0000000..4775531 --- /dev/null +++ b/widget-customizer/index.html @@ -0,0 +1,40 @@ + + + + + + + Settings + + + + + +
+

Widget URL

+ + + +
+ +
+
+
+ + +
+
+

Load Settings From Widget URL

+ +
+ + + +
+
+ +
+ + + + \ No newline at end of file diff --git a/widget-customizer/script.js b/widget-customizer/script.js new file mode 100644 index 0000000..e174c29 --- /dev/null +++ b/widget-customizer/script.js @@ -0,0 +1,237 @@ +const queryString = window.location.search; +const urlParams = new URLSearchParams(queryString); + +const settingsJson = urlParams.get("settingsJson") || ""; + +document.addEventListener('DOMContentLoaded', () => { + const settingsContent = document.getElementById('settings-content'); + const saveButton = document.getElementById('save-settings'); + + fetch(settingsJson) + //fetch('settings.json') + .then(response => response.json()) + .then(data => { + const groupedSettings = {}; + + // Group settings by their 'group' property + data.settings.forEach(setting => { + if (!groupedSettings[setting.group]) { + groupedSettings[setting.group] = []; + } + groupedSettings[setting.group].push(setting); + }); + + // Render settings for each group + for (const groupName in groupedSettings) { + const groupDiv = document.createElement('div'); + groupDiv.classList.add('setting-group'); + + const groupHeader = document.createElement('h2'); + groupHeader.textContent = groupName; + groupDiv.appendChild(groupHeader); + + groupedSettings[groupName].forEach(setting => { + const settingItem = document.createElement('div'); + settingItem.classList.add('setting-item'); + + const labelDescriptionDiv = document.createElement('div'); + + const label = document.createElement('label'); + label.textContent = setting.label; + labelDescriptionDiv.appendChild(label); + + if (setting.description) { + const description = document.createElement('p'); + description.textContent = setting.description; + labelDescriptionDiv.appendChild(description); + } + + const settingItemContent = document.createElement('div'); + settingItemContent.classList.add('setting-item-content'); + + let inputElement; + switch (setting.type) { + case 'text': + inputElement = document.createElement('input'); + inputElement.type = 'text'; + inputElement.id = setting.id; //Added setting ID + inputElement.value = setting.defaultValue; + break; + case 'checkbox': + const labelDiv = document.createElement('label'); + labelDiv.classList.add('switch'); + checkBoxElement = document.createElement('input'); + checkBoxElement.type = 'checkbox'; + checkBoxElement.id = setting.id; + checkBoxElement.checked = setting.defaultValue; + labelDiv.appendChild(checkBoxElement); + + const slider = document.createElement('span'); + slider.classList.add('slider'); + slider.classList.add('round'); + labelDiv.appendChild(slider); + + // Add event listener to the switchDiv + labelDiv.addEventListener('click', () => { + checkBoxElement.checked = !checkBoxElement.checked; + }); + inputElement = labelDiv; + break; + case 'select': + inputElement = document.createElement('select'); + inputElement.id = setting.id; //Added setting ID + setting.options.forEach(option => { + const optionElement = document.createElement('option'); + optionElement.value = option.value; + optionElement.textContent = option.label; + if (option === setting.defaultValue) { + optionElement.selected = true; + } + inputElement.value = setting.defaultValue; + inputElement.appendChild(optionElement); + }); + break; + case 'color': + inputElement = document.createElement('input'); + inputElement.type = 'color'; + inputElement.id = setting.id; //Added setting ID + inputElement.value = setting.defaultValue; + break; + case 'number': + inputElement = document.createElement('input'); + inputElement.type = 'number'; + inputElement.id = setting.id; //Added setting ID + inputElement.value = setting.defaultValue; + inputElement.min = setting.min; + inputElement.max = setting.max; + inputElement.step = setting.step; + break; + default: + inputElement = document.createElement('input'); + inputElement.type = 'text'; + inputElement.id = setting.id; //Added setting ID + inputElement.value = setting.defaultValue; + } + + inputElement.addEventListener('input', function (event) { + SendDateToParent(data); + }); + + settingItemContent.appendChild(inputElement); + + settingItem.appendChild(labelDescriptionDiv); + settingItem.appendChild(settingItemContent); + groupDiv.appendChild(settingItem); + }); + + settingsContent.appendChild(groupDiv); + } + + // saveButton.addEventListener('click', () => { + // SendDateToParent(data); + // }); + SendDateToParent(data); + }) + .catch(error => console.error('Error loading settings:', error)); +}); + + +// In the iframe's JavaScript: +function SendDateToParent(data) { + const settings = {}; + data.settings.forEach(setting => { + let inputElement = document.getElementById(setting.id); + + if (setting.type === 'checkbox') { + settings[setting.id] = inputElement.checked; + } else { + settings[setting.id] = inputElement.value; + } + }); + + // Generate parameter string + const paramString = Object.entries(settings) + .map(([key, value]) => `${encodeURIComponent(key)}=${encodeURIComponent(value)}`) + .join('&'); + + console.log('Parameter String:', paramString); + + let widgetURLBox = document.getElementById('widget-url'); + widgetURLBox.value = GetWidgetURL() + "?" + paramString; + window.parent.reloadWidget(paramString); +} + + +let saveButton = document.getElementById('save-settings'); +let widgetURLBox = document.getElementById('widget-url'); +let cancelSettingsButton = document.getElementById('cancel-settings'); + +saveButton.addEventListener('click', () => { + navigator.clipboard.writeText(widgetURLBox.value); + + const defaultBackgroundColor = "#2e2e2e"; + const defaultTextColor = "white"; + + saveButton.innerText = "Copied to clipboard"; + saveButton.style.backgroundColor = "#00dd63" + saveButton.style.color = "#ffffff"; + + setTimeout(() => { + saveButton.innerText = "Click to copy URL"; + saveButton.style.backgroundColor = defaultBackgroundColor; + saveButton.style.color = defaultTextColor; + }, 3000); +}); + +widgetURLBox.addEventListener('click', () => { + let loadSettingsBox = document.getElementById('mommy-milkers'); + loadSettingsBox.style.visibility = 'visible'; + loadSettingsBox.style.opacity = 1; +}); + +function CloseSettings() { + let loadSettingsBox = document.getElementById('mommy-milkers'); + loadSettingsBox.style.visibility = 'hidden'; + loadSettingsBox.style.opacity = 0; +}; + +function LoadSettings() { + let loadURLBox = document.getElementById('load-url'); + const url = new URL(loadURLBox.value); + + url.searchParams.forEach((value, key) => { + + const inputElement = document.getElementById(key); + if (inputElement != null) + { + if (inputElement.type == 'checkbox') + inputElement.checked = value.toLocaleLowerCase() == 'true'; + else + inputElement.value = value; + } + }); + + loadURLBox.value = ''; + + let loadSettingsBox = document.getElementById('mommy-milkers'); + loadSettingsBox.style.visibility = 'hidden'; + loadSettingsBox.style.opacity = 0; +} + +function GetWidgetURL() { + const parsedUrl = new URL(settingsJson); + + let result = parsedUrl.origin; // Base domain (protocol + hostname + port) + + const pathSegments = parsedUrl.pathname.split('/').filter(segment => segment); // Split and remove empty segments + + if (pathSegments.length > 0) { + result += '/' + pathSegments[0]; // Add the first path segment + } + + return result; +} + +function OpenMembershipPage() { + window.open("https://nutty.gg/supporters/sign_in", '_blank').focus(); +} \ No newline at end of file diff --git a/widget-customizer/style.css b/widget-customizer/style.css new file mode 100644 index 0000000..6809ef0 --- /dev/null +++ b/widget-customizer/style.css @@ -0,0 +1,269 @@ +* { + font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica, Arial, sans-serif; + font-size: 16px; + color: white; +} + +body { + background-color: #181818; +} + +body::-webkit-scrollbar { + width: 8px; + /* Width of the entire scrollbar */ +} + +body::-webkit-scrollbar-track { + background: #2c2c2c; + /* Color of the tracking area */ +} + +body::-webkit-scrollbar-thumb { + background-color: #9f9f9f; + /* Color of the scroll thumb */ + border-radius: 4px; + /* Roundness of the scroll thumb */ + border: none; +} + +body::-webkit-scrollbar-thumb:hover { + background-color: #d1d1d1; + /* Color of the scroll thumb on hover */ +} + +#pinned-header { + position: sticky; + top: 0; + margin: 40px auto; + padding: 10px 0; + z-index: 100; + background: #181818af; + backdrop-filter: blur(10px); + -webkit-backdrop-filter: blur(10px); +} + +#widget-url { + font-size: 1em; + width: 100%; + margin: 10px 0px; + padding: 10px 10px; +} + +#settings-container { + margin: 0px auto; + /* border: 1px solid #ddd; */ + border-radius: 5px; +} + +#settings-container h1 { + text-align: center; + margin-bottom: 20px; +} + +.setting-group { + margin-bottom: 20px; + /* border: 1px solid #ddd; */ + padding: 15px; + border-radius: 5px; +} + +h2 { + font-size: 0.9em; + font-weight: 500; + color: #93cdfd; +} + +.setting-item { + display: flex; + justify-content: space-between; + align-items: center; + padding: 10px 0; + /* border-bottom: 1px solid #eee; */ +} + +.setting-item:last-child { + border-bottom: none; +} + +.setting-item label { + font-weight: 500; + margin-bottom: 5px; + display: block; +} + +.setting-item p { + font-size: 0.9em; + font-weight: 300; + /* color: #666; */ + opacity: 0.6; + margin-bottom: 0; +} + +.setting-item-content { + display: flex; + align-items: center; +} + +input[type="text"], +select, +input[type="number"] { + width: 250px; + padding: 5px; + + margin: 10px 0px; + padding: 10px 10px; + background-color: #ffffff05; + border-width: 0px; + color: white; + border-radius: 0.5em; + + -webkit-box-sizing: border-box; + -moz-box-sizing: border-box; + box-sizing: border-box; +} +#widget-url:hover { + cursor: pointer; +} + +.setting-item-content option { + color: black; +} + +textarea:focus, +input:focus { + outline: none; +} + +.setting-item-content input[type="color"] { + width: 40px; + height: 40px; + margin-left: 10px; + /* padding: 2px; */ + /* border: 1px solid #ccc; */ + /* border-radius: 4px; */ + + appearance: none; + -moz-appearance: none; + -webkit-appearance: none; + background: none; + border: 0; + cursor: pointer; + padding: 0; +} + +/* Switch styling */ +.switch { + position: relative; + display: inline-block; + width: 60px; + height: 34px; +} + +.switch input { + opacity: 0; + width: 0; + height: 0; +} + +.slider { + position: absolute; + cursor: pointer; + top: 0; + left: 0; + right: 0; + bottom: 0; + background-color: #ccc; + -webkit-transition: .4s; + transition: .4s; +} + +.slider:before { + position: absolute; + content: ""; + height: 26px; + width: 26px; + left: 4px; + bottom: 4px; + background-color: white; + -webkit-transition: .4s; + transition: .4s; +} + +input:checked+.slider { + background-color: #2196F3; +} + +input:focus+.slider { + box-shadow: 0 0 1px #2196F3; +} + +input:checked+.slider:before { + -webkit-transform: translateX(26px); + -ms-transform: translateX(26px); + transform: translateX(26px); +} + +/* Rounded sliders */ +.slider.round { + border-radius: 34px; +} + +.slider.round:before { + border-radius: 50%; +} + +button { + font-weight: 500; + background-color: #2e2e2e; + color: white; + opacity: 0.8; + margin: 5px 0px; + border-width: 0; + border-radius: 0.5em; + padding: 10px 20px; + width: 100%; + transition: all 0.2s ease; +} + +button:hover { + opacity: 1; + cursor: pointer; +} + +#mommy-milkers { + visibility: hidden; + position: fixed; + top: 0; + left: 0; + width: 100%; + height: 100%; + background: #181818af; + backdrop-filter: blur(10px); /* Adjust blur radius as needed */ + z-index: 9999; /* Ensure it's on top */ + /* Add any other styles for the overlay content */ + transition: all 0.2s ease-in-out; + opacity: 0; +} + +#load-url { + width: 100%; +} + +#load-settings-container { + position: fixed; + left: 50%; + top: 50%; + width: calc(100% - 75px); + border-radius: 0.5em; + padding: 1em; + box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.5); + background: #181818af; + /* background: rgba(255, 0, 0, 0.637); */ + backdrop-filter: blur(10px); + -webkit-backdrop-filter: blur(10px); + transform: translate(-50%, -50%); +} + +#load-settings { + background-color: #2196F3; +} \ No newline at end of file diff --git a/youtube-music-widget-compact/configure/index.html b/youtube-music-widget-compact/configure/index.html new file mode 100644 index 0000000..454ff2e --- /dev/null +++ b/youtube-music-widget-compact/configure/index.html @@ -0,0 +1,47 @@ + + + + Configure + + + + + + +
+
+ + +
+
+ + + +

+ +
+
+ +
+ You died lmao. You died lmao. You died lmao. You died lmao. You died lmao. You died lmao.You died lmao. You died lmao. +

+ + +
+
+ + + \ No newline at end of file diff --git a/youtube-music-widget-compact/configure/logo.png b/youtube-music-widget-compact/configure/logo.png new file mode 100644 index 0000000..7100d80 Binary files /dev/null and b/youtube-music-widget-compact/configure/logo.png differ diff --git a/youtube-music-widget-compact/configure/script.js b/youtube-music-widget-compact/configure/script.js new file mode 100644 index 0000000..6a0c897 --- /dev/null +++ b/youtube-music-widget-compact/configure/script.js @@ -0,0 +1,110 @@ +const appId = "nuttys-ytmdesktop-widget"; +const appName = "nuttys YouTube Music Widget"; +const appVersion = "1.0.0"; +const baseURL = "http://nuttylmao.github.io/youtube-music-widget-compact"; + +let browserSourceURL = "" + +// Request a four digit authentication code +async function RequestCode() { + const response = await fetch("http://localhost:9863/api/v1/auth/requestcode", { + method: "POST", + body: JSON.stringify({ + "appId": appId, + "appName": appName, + "appVersion": appVersion + }), + headers: { + "Content-type": "application/json; charset=UTF-8" + } + }) + + const responseData = await response.json(); + console.debug(responseData); + if (responseData.hasOwnProperty("statusCode")) + { + document.getElementById("errorCode").innerText = responseData.statusCode; + document.getElementById("errorMessage").innerText = responseData.message; + document.getElementById("errorBox").style.display = 'inline'; + } + else + return await responseData; +} + +// Wait for the user to accept the code and return them an access token +async function RequestToken() { + const requestCode = await RequestCode(); + const authCode = requestCode.code; + console.debug(`Auth Code: ${authCode}`); + document.getElementById("authorizationCode").innerText = authCode; + + // Show the authorize popup + document.getElementById("authorizationBox").style.display = 'inline'; + + const response = await fetch("http://localhost:9863/api/v1/auth/request", { + method: "POST", + body: JSON.stringify({ + "appId": appId, + "code": authCode + }), + headers: { + "Content-type": "application/json; charset=UTF-8" + } + }) + + const responseData = await response.json(); + if (responseData.hasOwnProperty("statusCode")) + { + document.getElementById("errorCode").innerText = responseData.statusCode; + document.getElementById("errorMessage").innerText = responseData.message; + document.getElementById("errorBox").style.display = 'inline'; + + // Hide the authorize popup + document.getElementById("authorizationBox").style.display = 'none'; + } + else + { + const token = responseData.token; + console.debug(`Token: ${token}`); + browserSourceURL = `${baseURL}?token=${token}`; + + // Enable the Copy URL Button + document.getElementById("copyURLButton").disabled = false; + document.getElementById("copyURLButton").innerText = "Click to copy URL"; + + // Show the donation button + document.getElementById("authorizationCode").style.display = 'none'; + + // Show the donation button and confirmation text + document.getElementById("donateButton").style.display = 'block'; + document.getElementById("authorizationComplete").style.display = 'block'; + } + + return await responseData; +} + +function CopyToURL() { + navigator.clipboard.writeText(browserSourceURL); + + document.getElementById("copyURLButton").innerText = "Copied to clipboard"; + document.getElementById("copyURLButton").style.backgroundColor = "#00dd63" + document.getElementById("copyURLButton").style.color = "#ffffff"; + + setTimeout(() => { + document.getElementById("copyURLButton").innerText = "Click to copy URL"; + document.getElementById("copyURLButton").style.backgroundColor = "#ffffff"; + document.getElementById("copyURLButton").style.color = "#181818"; + }, 3000); +} + +function OpenInstructions() { + window.open("https://nuttylmao.notion.site/YouTube-Music-Widget-Compact-Edition-1ac19969b23780fb938deaeb00d90800", '_blank').focus(); +} + +function OpenDonationPage() { + window.open("http://nutty.gg/pages/donate", '_blank').focus(); +} + +function CloseErrorBox() { + document.getElementById("errorBox").style.display = 'none'; +} \ No newline at end of file diff --git a/youtube-music-widget-compact/configure/style.css b/youtube-music-widget-compact/configure/style.css new file mode 100644 index 0000000..d8603a0 --- /dev/null +++ b/youtube-music-widget-compact/configure/style.css @@ -0,0 +1,115 @@ +* { + --corner-radius: 10px; + --padding: 20px; + font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica, Arial, sans-serif; +} + +body { + margin: 0px; + color: white; + font-size: 24px; +} + +#mainContainer { + position: absolute; + width: 100vw; + height: 100vh; + margin: 0px; + background-color: #282828; +} + +#errorBox { + background-color: #6d0b0b; + border-radius: var(--corner-radius); + padding: calc(var(--padding)) calc(var(--padding)*2); + position: absolute; + left: 50%; + top: 50%; + transform: translateX(-50%) translateY(-50%); + filter: drop-shadow(0px 0px 4px rgba(0, 0, 0, 1)); + display: none; +} + +#connectBox{ + background-color: #181818; + border-radius: var(--corner-radius); + padding: calc(var(--padding)*3) calc(var(--padding)*3); + position: absolute; + left: 50%; + top: 50%; + transform: translateX(-50%) translateY(-50%); + filter: drop-shadow(0px 0px 4px rgba(0, 0, 0, 1)); + width: 400px; + text-align: center; +} + +#authorizationBox { + background-color: #252525; + border-radius: var(--corner-radius); + padding: calc(var(--padding)*3) calc(var(--padding)*3); + position: absolute; + left: 50%; + top: 50%; + transform: translateX(-50%) translateY(-50%); + filter: drop-shadow(0px 0px 4px rgba(0, 0, 0, 1)); + width: 400px; + display: none; +} + +#authorizationCode { + display: block; + text-align: center; + font-size: 80px; + font-weight: 700; + padding-left: 30px; + padding-bottom: 40px; + letter-spacing: 30px; + color: #f44336; +} + +#authorizationComplete { + display: block; + text-align: center; + padding-bottom: 40px; + display: none; +} + +button { + font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica, Arial, sans-serif; + font-size: 24px; + font-weight: 500; + background-color: #f44336; + color: white; + opacity: 0.8; + border-width: 0; + border-radius: var(--corner-radius); + padding: calc(var(--padding)/2) var(--padding); + width: 100%; +} + +button:hover { + opacity: 1; + cursor: pointer; +} + +#instructionsButton, #donateButton { + background-color: #2e2e2e; +} + +#copyURLButton { + background-color: #ffffff; + color: #181818; + width: 100%; + transition: all 0.2s ease; +} + +#copyURLButton:disabled { + background-color: #636363; + opacity: 0.8; + cursor: inherit; +} + +#closeErrorBox { + background-color: #ffffff; + color: #181818; +} \ No newline at end of file diff --git a/youtube-music-widget-compact/index.html b/youtube-music-widget-compact/index.html new file mode 100644 index 0000000..32d9667 --- /dev/null +++ b/youtube-music-widget-compact/index.html @@ -0,0 +1,46 @@ + + + + YouTube Music Widget + + + + + + + +
Connecting...
+
+ +
+
+
+
Can't get you out of my mind
+
Dreamcatcher
+ +
+
+
+ + +
+
+
+ + + \ No newline at end of file diff --git a/youtube-music-widget-compact/script.js b/youtube-music-widget-compact/script.js new file mode 100644 index 0000000..2b2eb6e --- /dev/null +++ b/youtube-music-widget-compact/script.js @@ -0,0 +1,233 @@ +/////////////// +// PARAMETRS // +/////////////// + +const baseURL = "https://nuttylmao.github.io/youtube-music-widget"; +const queryString = window.location.search; +const urlParams = new URLSearchParams(queryString); + +const token = urlParams.get("token") || ""; +const visibilityDuration = urlParams.get("duration") || 0; +// const hideAlbumArt = urlParams.has("hideAlbumArt"); + + +///////////////// +// GLOBAL VARS // +///////////////// + +let animationSpeed = 0.5; +let currentState = 0; + + +//////////// +// SOCKET // +//////////// + +function connectws() { + const socket = io("http://localhost:9863/api/v1/realtime", { + transports: ['websocket'], + auth: { + token: token + } + }); + + socket.on("state-update", (state) => { + console.debug(state); + UpdatePlayer(state); + }); + + socket.on("playlist-created", (playlist) => { + console.debug(playlist); + }); + + socket.on("playlist-delete", (playlistId) => { + console.debug(playlistId); + }); + + socket.on('connect', function () { + SetConnectionStatus(true); + }); + + socket.on('disconnect', function () { + SetConnectionStatus(false); + setTimeout(connectws, 5000); + }); +} + +function UpdatePlayer(state) { + + if (state.player.trackState != currentState) { + // Set thumbnail + const songInfo = state.video; + const thumbnail = songInfo.thumbnails[songInfo.thumbnails.length - 1].url; + console.debug(thumbnail); + // UpdateAlbumArt(document.getElementById("albumArt"), thumbnail); + UpdateAlbumArt(document.getElementById("backgroundImage"), thumbnail); + UpdateAlbumArt(document.getElementById("backgroundImageBack"), thumbnail); + + // Set song info + console.debug(`Artist: ${songInfo.author}`); + console.debug(`Title: ${songInfo.title}`); + UpdateTextLabel(document.getElementById("artistLabel"), songInfo.author); + UpdateTextLabel(document.getElementById("songLabel"), songInfo.title); + + // Set player visibility + switch (state.player.trackState) { + case -1: + console.debug("Player State: Unknown"); + SetVisibility(false); + break; + case 0: + console.debug("Player State: Paused"); + SetVisibility(false); + break; + case 2: + console.debug("Player State: Buffering"); + SetVisibility(false); + break; + case 1: + console.debug("Player State: Playing"); + setTimeout(() => { + SetVisibility(true); + }, animationSpeed * 1000); + break; + } + + if (visibilityDuration > 0) { + setTimeout(() => { + SetVisibility(false); + }, visibilityDuration * 1000); + } + + currentState = state.player.trackState; + } + + // Set progressbar + const songInfo = state.video; + const progress = ((state.player.videoProgress / songInfo.durationSeconds) * 100); + const progressTime = ConvertSecondsToMinutesSoThatItLooksBetterOnTheOverlay(state.player.videoProgress); + const duration = ConvertSecondsToMinutesSoThatItLooksBetterOnTheOverlay(songInfo.durationSeconds - state.player.videoProgress); + console.debug(`Progress: ${progressTime}`); + console.debug(`Duration: ${duration}`); + // document.getElementById("progressBar").style.width = `${progress}%`; + // document.getElementById("progressTime").innerHTML = progressTime; + // document.getElementById("duration").innerHTML = `-${duration}`; + document.getElementById("backgroundImage").style.clipPath = `inset(0 ${100 - progress}% 0 0)`; + +} + +function UpdateTextLabel(div, text) { + if (div.innerHTML != text) { + div.setAttribute("class", "text-fade"); + setTimeout(() => { + div.innerHTML = text; + div.setAttribute("class", ".text-show"); + }, animationSpeed * 250); + } +} + +function UpdateAlbumArt(div, imgsrc) { + if (div.src != imgsrc) { + div.setAttribute("class", "text-fade"); + setTimeout(() => { + div.src = imgsrc; + div.setAttribute("class", "text-show"); + }, animationSpeed * 500); + } +} + +////////////////////// +// HELPER FUNCTIONS // +////////////////////// + +function ConvertSecondsToMinutesSoThatItLooksBetterOnTheOverlay(time) { + const minutes = Math.floor(time / 60); + const seconds = Math.trunc(time - minutes * 60); + + return `${minutes}:${('0' + seconds).slice(-2)}`; +} + +function SetVisibility(isVisible) { + widgetVisibility = isVisible; + + const mainContainer = document.getElementById("mainContainer"); + + if (isVisible) { + mainContainer.style.opacity = 1; + mainContainer.style.bottom = "50%"; + } + else { + mainContainer.style.opacity = 0; + mainContainer.style.bottom = "calc(50% - 20px)"; + } +} + + + +/////////////////////////////////// +// STREAMER.BOT WEBSOCKET STATUS // +/////////////////////////////////// + +// This function sets the visibility of the Streamer.bot status label on the overlay +function SetConnectionStatus(connected) { + let statusContainer = document.getElementById("statusContainer"); + if (connected) { + statusContainer.style.background = "#2FB774"; + statusContainer.innerText = "Connected!"; + statusContainer.style.opacity = 1; + setTimeout(() => { + statusContainer.style.transition = "all 2s ease"; + statusContainer.style.opacity = 0; + }, 10); + + console.log("Connected!"); + } + else { + // statusContainer.style.background = "#D12025"; + // statusContainer.innerText = "Connecting..."; + // statusContainer.style.opacity = 1; + // setTimeout(() => { + // statusContainer.style.transition = "all 2s ease"; + // statusContainer.style.opacity = 0; + // }, 10); + SetVisibility(false); + console.log("Not connected..."); + } +} + + + +////////////////////////////////////////////////////////////////////////////////////////// +// RESIZER THING BECAUSE I THINK I KNOW HOW RESPONSIVE DESIGN WORKS EVEN THOUGH I DON'T // +////////////////////////////////////////////////////////////////////////////////////////// + +let outer = document.getElementById('mainContainer'), + maxWidth = outer.clientWidth+100, + maxHeight = outer.clientHeight; + +window.addEventListener("resize", resize); + +resize(); +function resize() { + const scale = window.innerWidth / maxWidth; + outer.style.transform = 'translate(-50%, 50%) scale(' + scale + ')'; +} + + + +///////////////////////////////////////////////////////////////////// +// IF THE USER PUT IN THE HIDEALBUMART PARAMATER, THEN YOU SHOULD // +// HIDE THE ALBUM ART, BECAUSE THAT'S WHAT IT'S SUPPOSED TO DO // +///////////////////////////////////////////////////////////////////// + +// if (hideAlbumArt) { +// document.getElementById("albumArtBox").style.display = "none"; +// document.getElementById("songInfoBox").style.width = "calc(100% - 20px)"; +// } + +if (token == "") { + console.log("No token detected..."); + window.open(`${baseURL}/configure`); +} +else + connectws(); \ No newline at end of file diff --git a/youtube-music-widget-compact/style.css b/youtube-music-widget-compact/style.css new file mode 100644 index 0000000..4cc66eb --- /dev/null +++ b/youtube-music-widget-compact/style.css @@ -0,0 +1,183 @@ +* { + --corner-radius: 25px; + --album-art-size: 50px; +} + +body { + font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica, Arial, sans-serif; +} + +#statusContainer { + font-weight: 500; + font-size: 30px; + text-align: center; + background-color: #D12025; + color: white; + padding: 10px; + border-radius: 10px; + position: absolute; + top: 50%; + left: 50%; + transform: translate(-50%, -50%); + opacity: 0; +} + +#mainContainer { + font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica, Arial, sans-serif; + display: flex; + position: absolute; + height: var(--album-art-size); + margin: 20px; + filter: drop-shadow(15px 15px 7px rgba(0, 0, 0, 1)); + width: 100%; + max-width: 400px; + bottom: calc(50% - 20px); + left: 50%; + opacity: 0; + transition: all 0.5s ease; +} + +/* #albumArtBox { + background: rgba(0, 0, 0, 0.5); + position: relative; + border-radius: var(--corner-radius); + overflow: hidden; + margin: 0px 8px 0px 0px; + object-fit: cover; + width: var(--album-art-size); +} + +#albumArtBox img { + width: 100%; + height: 100%; + object-fit: cover; +} */ + +#songInfoBox { + position: relative; + color: white; + /* width: calc(100% - 125px); */ + width: calc(100%); + display: flex; + flex-direction: column; + flex: 0 1 auto; + justify-content: center; + z-index: 1; + text-shadow: 2px 2px 2px rgba(0, 0, 0, 0.5); + overflow: hidden; + z-index: 4; +} + +#songInfo { + background: rgba(0, 0, 0, 0.5); + opacity: 0.9; + position: relative; + border-radius: var(--corner-radius); + padding: 0px 20px; + height: 100%; + overflow: hidden; +} + +#IAmRunningOutOfNamesForTheseBoxes { + position: absolute; + width: calc(100% - 40px); + position: absolute; + top: 50%; + -ms-transform: translateY(-50%); + transform: translateY(-50%); +} + +#backgroundArt { + position: absolute; + height: 100%; + width: 100%; + border-radius: var(--corner-radius); + overflow: hidden; + z-index: -1; + opacity: 0.9; +} + +#backgroundImage { + filter: blur(20px); + position: absolute; + width: 100%; + top: 50%; + left: 50%; + transform: translateX(-50%) translateY(-50%); +} + +#backgroundImageBack { + filter: blur(20px) grayscale(75%); + opacity: 0.5; + position: absolute; + width: 100%; + top: 50%; + left: 50%; + transform: translateX(-50%) translateY(-50%); + z-index: -1; +} + +#artistLabel { + font-size: 18px; + font-weight: 400; + line-height: 1; + white-space: nowrap; + text-align: center; +} + +#songLabel { + font-weight: bold; + font-size: 20px; + width: calc(100%); + overflow: hidden; + text-overflow: ellipsis; + white-space: nowrap; + text-align: center; +} + +/* #progressBg { + display: none; + margin-top: 15px; + width: 100%; + height: auto; + border-radius: 5px; + background-color: #1F1F1F; +} */ + +/* #progressBar { + border-radius: 5px; + height: 5px; + width: 20%; + background-color: #ffffff; + margin: 10px 0px; + transition: all 1s ease; +} */ + +/* #times { + display: none; + position: relative; + height: 16px; + font-size: 16px; + font-weight: 700; + line-height: 2.2; +} */ + +/* #progressTime { + position: absolute; +} */ + +/* #duration { + position: absolute; + width: 100%; + text-align: right; +} */ + +.text-show { + opacity: 1; + transition: all 0.25s ease; +} + +.text-fade { + opacity: 0; + transition: all 0.25s ease; +} \ No newline at end of file diff --git a/youtube-music-widget/configure/index.html b/youtube-music-widget/configure/index.html new file mode 100644 index 0000000..454ff2e --- /dev/null +++ b/youtube-music-widget/configure/index.html @@ -0,0 +1,47 @@ + + + + Configure + + + + + + +
+
+ + +
+
+ + + +

+ +
+
+ +
+ You died lmao. You died lmao. You died lmao. You died lmao. You died lmao. You died lmao.You died lmao. You died lmao. +

+ + +
+
+ + + \ No newline at end of file diff --git a/youtube-music-widget/configure/logo.png b/youtube-music-widget/configure/logo.png new file mode 100644 index 0000000..7100d80 Binary files /dev/null and b/youtube-music-widget/configure/logo.png differ diff --git a/youtube-music-widget/configure/script.js b/youtube-music-widget/configure/script.js new file mode 100644 index 0000000..a26ffdc --- /dev/null +++ b/youtube-music-widget/configure/script.js @@ -0,0 +1,110 @@ +const appId = "nuttys-ytmdesktop-widget"; +const appName = "nuttys YouTube Music Widget"; +const appVersion = "1.0.0"; +const baseURL = "http://nuttylmao.github.io/youtube-music-widget"; + +let browserSourceURL = "" + +// Request a four digit authentication code +async function RequestCode() { + const response = await fetch("http://localhost:9863/api/v1/auth/requestcode", { + method: "POST", + body: JSON.stringify({ + "appId": appId, + "appName": appName, + "appVersion": appVersion + }), + headers: { + "Content-type": "application/json; charset=UTF-8" + } + }) + + const responseData = await response.json(); + console.debug(responseData); + if (responseData.hasOwnProperty("statusCode")) + { + document.getElementById("errorCode").innerText = responseData.statusCode; + document.getElementById("errorMessage").innerText = responseData.message; + document.getElementById("errorBox").style.display = 'inline'; + } + else + return await responseData; +} + +// Wait for the user to accept the code and return them an access token +async function RequestToken() { + const requestCode = await RequestCode(); + const authCode = requestCode.code; + console.debug(`Auth Code: ${authCode}`); + document.getElementById("authorizationCode").innerText = authCode; + + // Show the authorize popup + document.getElementById("authorizationBox").style.display = 'inline'; + + const response = await fetch("http://localhost:9863/api/v1/auth/request", { + method: "POST", + body: JSON.stringify({ + "appId": appId, + "code": authCode + }), + headers: { + "Content-type": "application/json; charset=UTF-8" + } + }) + + const responseData = await response.json(); + if (responseData.hasOwnProperty("statusCode")) + { + document.getElementById("errorCode").innerText = responseData.statusCode; + document.getElementById("errorMessage").innerText = responseData.message; + document.getElementById("errorBox").style.display = 'inline'; + + // Hide the authorize popup + document.getElementById("authorizationBox").style.display = 'none'; + } + else + { + const token = responseData.token; + console.debug(`Token: ${token}`); + browserSourceURL = `${baseURL}?token=${token}`; + + // Enable the Copy URL Button + document.getElementById("copyURLButton").disabled = false; + document.getElementById("copyURLButton").innerText = "Click to copy URL"; + + // Show the donation button + document.getElementById("authorizationCode").style.display = 'none'; + + // Show the donation button and confirmation text + document.getElementById("donateButton").style.display = 'block'; + document.getElementById("authorizationComplete").style.display = 'block'; + } + + return await responseData; +} + +function CopyToURL() { + navigator.clipboard.writeText(browserSourceURL); + + document.getElementById("copyURLButton").innerText = "Copied to clipboard"; + document.getElementById("copyURLButton").style.backgroundColor = "#00dd63" + document.getElementById("copyURLButton").style.color = "#ffffff"; + + setTimeout(() => { + document.getElementById("copyURLButton").innerText = "Click to copy URL"; + document.getElementById("copyURLButton").style.backgroundColor = "#ffffff"; + document.getElementById("copyURLButton").style.color = "#181818"; + }, 3000); +} + +function OpenInstructions() { + window.open("https://www.notion.so/nuttylmao/YouTube-Music-Widget-18d19969b23780e2bb56d25eed4d154e", '_blank').focus(); +} + +function OpenDonationPage() { + window.open("http://nutty.gg/pages/donate", '_blank').focus(); +} + +function CloseErrorBox() { + document.getElementById("errorBox").style.display = 'none'; +} \ No newline at end of file diff --git a/youtube-music-widget/configure/style.css b/youtube-music-widget/configure/style.css new file mode 100644 index 0000000..d8603a0 --- /dev/null +++ b/youtube-music-widget/configure/style.css @@ -0,0 +1,115 @@ +* { + --corner-radius: 10px; + --padding: 20px; + font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica, Arial, sans-serif; +} + +body { + margin: 0px; + color: white; + font-size: 24px; +} + +#mainContainer { + position: absolute; + width: 100vw; + height: 100vh; + margin: 0px; + background-color: #282828; +} + +#errorBox { + background-color: #6d0b0b; + border-radius: var(--corner-radius); + padding: calc(var(--padding)) calc(var(--padding)*2); + position: absolute; + left: 50%; + top: 50%; + transform: translateX(-50%) translateY(-50%); + filter: drop-shadow(0px 0px 4px rgba(0, 0, 0, 1)); + display: none; +} + +#connectBox{ + background-color: #181818; + border-radius: var(--corner-radius); + padding: calc(var(--padding)*3) calc(var(--padding)*3); + position: absolute; + left: 50%; + top: 50%; + transform: translateX(-50%) translateY(-50%); + filter: drop-shadow(0px 0px 4px rgba(0, 0, 0, 1)); + width: 400px; + text-align: center; +} + +#authorizationBox { + background-color: #252525; + border-radius: var(--corner-radius); + padding: calc(var(--padding)*3) calc(var(--padding)*3); + position: absolute; + left: 50%; + top: 50%; + transform: translateX(-50%) translateY(-50%); + filter: drop-shadow(0px 0px 4px rgba(0, 0, 0, 1)); + width: 400px; + display: none; +} + +#authorizationCode { + display: block; + text-align: center; + font-size: 80px; + font-weight: 700; + padding-left: 30px; + padding-bottom: 40px; + letter-spacing: 30px; + color: #f44336; +} + +#authorizationComplete { + display: block; + text-align: center; + padding-bottom: 40px; + display: none; +} + +button { + font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica, Arial, sans-serif; + font-size: 24px; + font-weight: 500; + background-color: #f44336; + color: white; + opacity: 0.8; + border-width: 0; + border-radius: var(--corner-radius); + padding: calc(var(--padding)/2) var(--padding); + width: 100%; +} + +button:hover { + opacity: 1; + cursor: pointer; +} + +#instructionsButton, #donateButton { + background-color: #2e2e2e; +} + +#copyURLButton { + background-color: #ffffff; + color: #181818; + width: 100%; + transition: all 0.2s ease; +} + +#copyURLButton:disabled { + background-color: #636363; + opacity: 0.8; + cursor: inherit; +} + +#closeErrorBox { + background-color: #ffffff; + color: #181818; +} \ No newline at end of file diff --git a/youtube-music-widget/index.html b/youtube-music-widget/index.html new file mode 100644 index 0000000..1ffed1e --- /dev/null +++ b/youtube-music-widget/index.html @@ -0,0 +1,46 @@ + + + + YouTube Music Widget + + + + + + + +
Connecting...
+
+
+ + +
+
+
+
+
Can't get you out of my mind
+
Dreamcatcher
+
+
2:29
+
3:43
+
+
+
+
+
+
+
+ + +
+
+
+ + + \ No newline at end of file diff --git a/youtube-music-widget/script.js b/youtube-music-widget/script.js new file mode 100644 index 0000000..f5511fc --- /dev/null +++ b/youtube-music-widget/script.js @@ -0,0 +1,231 @@ +/////////////// +// PARAMETRS // +/////////////// + +const baseURL = "https://nuttylmao.github.io/youtube-music-widget"; +const queryString = window.location.search; +const urlParams = new URLSearchParams(queryString); + +const token = urlParams.get("token") || ""; +const visibilityDuration = urlParams.get("duration") || 0; +const hideAlbumArt = urlParams.has("hideAlbumArt"); + + +///////////////// +// GLOBAL VARS // +///////////////// + +let animationSpeed = 0.5; +let currentState = 0; + + +//////////// +// SOCKET // +//////////// + +function connectws() { + const socket = io("http://localhost:9863/api/v1/realtime", { + transports: ['websocket'], + auth: { + token: token + } + }); + + socket.on("state-update", (state) => { + console.debug(state); + UpdatePlayer(state); + }); + + socket.on("playlist-created", (playlist) => { + console.debug(playlist); + }); + + socket.on("playlist-delete", (playlistId) => { + console.debug(playlistId); + }); + + socket.on('connect', function () { + SetConnectionStatus(true); + }); + + socket.on('disconnect', function () { + SetConnectionStatus(false); + setTimeout(connectws, 5000); + }); +} + +function UpdatePlayer(state) { + + if (state.player.trackState != currentState) { + // Set thumbnail + const songInfo = state.video; + const thumbnail = songInfo.thumbnails[songInfo.thumbnails.length - 1].url; + console.debug(thumbnail); + UpdateAlbumArt(document.getElementById("albumArt"), thumbnail); + UpdateAlbumArt(document.getElementById("backgroundImage"), thumbnail); + + // Set song info + console.debug(`Artist: ${songInfo.author}`); + console.debug(`Title: ${songInfo.title}`); + UpdateTextLabel(document.getElementById("artistLabel"), songInfo.author); + UpdateTextLabel(document.getElementById("songLabel"), songInfo.title); + + // Set player visibility + switch (state.player.trackState) { + case -1: + console.debug("Player State: Unknown"); + SetVisibility(false); + break; + case 0: + console.debug("Player State: Paused"); + SetVisibility(false); + break; + case 2: + console.debug("Player State: Buffering"); + SetVisibility(false); + break; + case 1: + console.debug("Player State: Playing"); + setTimeout(() => { + SetVisibility(true); + }, animationSpeed * 1000); + break; + } + + if (visibilityDuration > 0) { + setTimeout(() => { + SetVisibility(false); + }, visibilityDuration * 1000); + } + + currentState = state.player.trackState; + } + + // Set progressbar + const songInfo = state.video; + const progress = ((state.player.videoProgress / songInfo.durationSeconds) * 100); + const progressTime = ConvertSecondsToMinutesSoThatItLooksBetterOnTheOverlay(state.player.videoProgress); + const duration = ConvertSecondsToMinutesSoThatItLooksBetterOnTheOverlay(songInfo.durationSeconds - state.player.videoProgress); + console.debug(`Progress: ${progressTime}`); + console.debug(`Duration: ${duration}`); + document.getElementById("progressBar").style.width = `${progress}%`; + document.getElementById("progressTime").innerHTML = progressTime; + document.getElementById("duration").innerHTML = `-${duration}`; + +} + +function UpdateTextLabel(div, text) { + if (div.innerHTML != text) { + div.setAttribute("class", "text-fade"); + setTimeout(() => { + div.innerHTML = text; + div.setAttribute("class", ".text-show"); + }, animationSpeed * 250); + } +} + +function UpdateAlbumArt(div, imgsrc) { + if (div.src != imgsrc) { + div.setAttribute("class", "text-fade"); + setTimeout(() => { + div.src = imgsrc; + div.setAttribute("class", "text-show"); + }, animationSpeed * 500); + } +} + +////////////////////// +// HELPER FUNCTIONS // +////////////////////// + +function ConvertSecondsToMinutesSoThatItLooksBetterOnTheOverlay(time) { + const minutes = Math.floor(time / 60); + const seconds = Math.trunc(time - minutes * 60); + + return `${minutes}:${('0' + seconds).slice(-2)}`; +} + +function SetVisibility(isVisible) { + widgetVisibility = isVisible; + + const mainContainer = document.getElementById("mainContainer"); + + if (isVisible) { + mainContainer.style.opacity = 1; + mainContainer.style.bottom = "50%"; + } + else { + mainContainer.style.opacity = 0; + mainContainer.style.bottom = "calc(50% - 20px)"; + } +} + + + +/////////////////////////////////// +// STREAMER.BOT WEBSOCKET STATUS // +/////////////////////////////////// + +// This function sets the visibility of the Streamer.bot status label on the overlay +function SetConnectionStatus(connected) { + let statusContainer = document.getElementById("statusContainer"); + if (connected) { + statusContainer.style.background = "#2FB774"; + statusContainer.innerText = "Connected!"; + statusContainer.style.opacity = 1; + setTimeout(() => { + statusContainer.style.transition = "all 2s ease"; + statusContainer.style.opacity = 0; + }, 10); + + console.log("Connected!"); + } + else { + // statusContainer.style.background = "#D12025"; + // statusContainer.innerText = "Connecting..."; + // statusContainer.style.opacity = 1; + // setTimeout(() => { + // statusContainer.style.transition = "all 2s ease"; + // statusContainer.style.opacity = 0; + // }, 10); + SetVisibility(false); + console.log("Not connected..."); + } +} + + + +////////////////////////////////////////////////////////////////////////////////////////// +// RESIZER THING BECAUSE I THINK I KNOW HOW RESPONSIVE DESIGN WORKS EVEN THOUGH I DON'T // +////////////////////////////////////////////////////////////////////////////////////////// + +let outer = document.getElementById('mainContainer'), + maxWidth = outer.clientWidth+50, + maxHeight = outer.clientHeight; + +window.addEventListener("resize", resize); + +resize(); +function resize() { + const scale = window.innerWidth / maxWidth; + outer.style.transform = 'translate(-50%, 50%) scale(' + scale + ')'; +} + + + +///////////////////////////////////////////////////////////////////// +// IF THE USER PUT IN THE HIDEALBUMART PARAMATER, THEN YOU SHOULD // +// HIDE THE ALBUM ART, BECAUSE THAT'S WHAT IT'S SUPPOSED TO DO // +///////////////////////////////////////////////////////////////////// + +if (hideAlbumArt) { + document.getElementById("albumArtBox").style.display = "none"; + document.getElementById("songInfoBox").style.width = "calc(100% - 20px)"; +} + +if (token == "") { + console.log("No token detected..."); + window.open(`${baseURL}/configure`); +} +else + connectws(); \ No newline at end of file diff --git a/youtube-music-widget/style.css b/youtube-music-widget/style.css new file mode 100644 index 0000000..cd9d3b5 --- /dev/null +++ b/youtube-music-widget/style.css @@ -0,0 +1,177 @@ +* { + --corner-radius: 10px; + --album-art-size: 100px; +} + +body { + font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica, Arial, sans-serif; +} + +#statusContainer { + font-weight: 500; + font-size: 30px; + text-align: center; + background-color: #D12025; + color: white; + padding: 10px; + border-radius: 10px; + position: absolute; + top: 50%; + left: 50%; + transform: translate(-50%, -50%); + opacity: 0; +} + +#mainContainer { + font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica, Arial, sans-serif; + display: flex; + position: absolute; + height: var(--album-art-size); + margin: 20px; + filter: drop-shadow(15px 15px 7px rgba(0, 0, 0, 1)); + width: 100%; + max-width: 500px; + bottom: calc(50% - 20px); + left: 50%; + opacity: 0; + transition: all 0.5s ease; +} + +#albumArtBox { + background: rgba(0, 0, 0, 0.5); + position: relative; + border-radius: var(--corner-radius); + overflow: hidden; + margin: 0px 8px 0px 0px; + object-fit: cover; + width: var(--album-art-size); +} + +#albumArtBox img { + width: 100%; + height: 100%; + object-fit: cover; +} + +#songInfoBox { + position: relative; + color: white; + width: calc(100% - 125px); + display: flex; + flex-direction: column; + flex: 0 1 auto; + justify-content: center; + z-index: 1; + text-shadow: 2px 2px 2px rgba(0, 0, 0, 0.5); + overflow: hidden; + z-index: 4; +} + +#songInfo { + background: rgba(0, 0, 0, 0.5); + opacity: 0.9; + position: relative; + border-radius: var(--corner-radius); + padding: 0px 20px; + height: 100%; + overflow: hidden; +} + +#IAmRunningOutOfNamesForTheseBoxes { + position: absolute; + width: calc(100% - 40px); + position: absolute; + top: 50%; + -ms-transform: translateY(-50%); + transform: translateY(-50%); +} + +#backgroundArt { + position: absolute; + height: 100%; + width: 100%; + border-radius: var(--corner-radius); + overflow: hidden; + z-index: -1; + opacity: 0.9; +} + +#backgroundImage { + filter: blur(20px); + position: absolute; + width: 140%; + top: 50%; + left: 50%; + transform: translateX(-50%) translateY(-50%); +} + +#backgroundImageBack { + filter: blur(20px); + position: absolute; + width: 140%; + top: 50%; + left: 50%; + transform: translateX(-50%) translateY(-50%); + z-index: -1; +} + +#artistLabel { + font-size: 16px; + font-weight: 400; + line-height: 1; + white-space: nowrap; +} + +#songLabel { + font-weight: bold; + font-size: 20px; + width: calc(100%); + overflow: hidden; + text-overflow: ellipsis; + white-space: nowrap; +} + +#progressBg { + margin-top: 15px; + width: 100%; + height: auto; + border-radius: 5px; + background-color: #1F1F1F; +} + +#progressBar { + border-radius: 5px; + height: 5px; + width: 20%; + background-color: #ffffff; + margin: 10px 0px; + transition: all 1s ease; +} + +#times { + position: relative; + height: 16px; + font-size: 16px; + font-weight: 700; + line-height: 2.2; +} + +#progressTime { + position: absolute; +} + +#duration { + position: absolute; + width: 100%; + text-align: right; +} + +.text-show { + opacity: 1; + transition: all 0.25s ease; +} + +.text-fade { + opacity: 0; + transition: all 0.25s ease; +} \ No newline at end of file