diff --git a/JukeboxPlus/1.0.3/JukeboxPlus.js b/JukeboxPlus/1.0.3/JukeboxPlus.js
new file mode 100644
index 000000000..ad915c270
--- /dev/null
+++ b/JukeboxPlus/1.0.3/JukeboxPlus.js
@@ -0,0 +1,2591 @@
+var API_Meta = API_Meta || {};
+API_Meta.JukeboxPlus = {
+ offset: Number.MAX_SAFE_INTEGER,
+ lineCount: -1
+}; {
+ try {
+ throw new Error('');
+ } catch (e) {
+ API_Meta.JukeboxPlus.offset = (parseInt(e.stack.split(/\n/)[1].replace(/^.*:(\d+):.*$/, '$1'), 10) - (4));
+ }
+}
+
+
+// Jukebox Plus Plus (Fully Enhanced UI with Album/Playlist Toggle, Track Tagging, and Layout Fixes)
+// Changelong
+// 1.0.0 Original
+// 1.0.1 Added min/Max intervals, bug fixes, and simple Director integration.
+// 1.0.2 Internal css restructuring for easier updates, Find function now accepts Regex
+// 1.0.3 Added Shuffle and Shuffle loop modes.
+
+on('ready', () =>
+{
+
+ const version = '1.0.3'; //version number set here
+ log('-=> Jukebox Plus v' + version + ' is loaded. Command !jb creates control handout and provides link. Click that to open.');
+
+ const HANDOUT_NAME = 'Jukebox Plus';
+ const STATE_KEY = 'GraphicJukebox';
+
+ if(!state[STATE_KEY])
+ {
+ state[STATE_KEY] = {
+ tracks:
+ {},
+ albumSortOrder:
+ {},
+ albums:
+ {},
+ playlists:
+ {},
+ rollbacks: [],
+ settings:
+ {
+ notifyOnPlay: 'on',
+ selectedAlbum: '',
+ selectedPlaylist: '',
+ viewMode: 'albums',
+ settingsExpanded: false,
+ nowPlayingOnly: false,
+ mode: 'dark',
+ helpVisible: false
+ }
+ };
+ }
+
+
+
+// Ensure mixSession is present (without disrupting existing state)
+// Is separate from initial state declaration to protect users from breaking changes.
+if (!state[STATE_KEY].mixSession) {
+ state[STATE_KEY].mixSession = {
+ active: false,
+ loopIds: [],
+ randomIds: [],
+ timeoutId: null
+ };
+}
+
+ // Declare once, top level within ready
+ const data = state[STATE_KEY];
+
+ // Define icon sets for each theme
+ const iconSetDark = {
+ play: 'https://files.d20.io/images/446752945/1lxeyU7yN1vPWXcrc3lFng/original.png?1751143927',
+ playActive: 'https://files.d20.io/images/446801469/hLU0ilPulBMcR2xBMFCYEQ/original.png?1751166667',
+ loop: 'https://files.d20.io/images/446752941/AJY4BveyKRfOvPPHGsY7jw/original.png?1751143926',
+ loopActive: 'https://files.d20.io/images/446801468/hJcBoRBqDlXqrJ5sSs69gA/original.png?1751166667',
+ isolate: 'https://files.d20.io/images/446752943/0YxEtYa40ld2L2qbLua07w/original.png?1751143927',
+ stop: 'https://files.d20.io/images/446752946/Jei3DhJjtd7AcQEMLoT2JQ/original.png?1751143927'
+ };
+
+ const iconSetLight = {
+ play: 'https://files.d20.io/images/446909842/EKV5MVZ4yWtPPahgW-yyxQ/original.png?1751231236',
+ playActive: 'https://files.d20.io/images/446801469/hLU0ilPulBMcR2xBMFCYEQ/original.png?1751166667',
+ loop: 'https://files.d20.io/images/446909844/RcZX7CnmpX_-_qeKrfr3ZQ/original.png?1751231236',
+ loopActive: 'https://files.d20.io/images/446909844/RcZX7CnmpX_-_qeKrfr3ZQ/original.png?1751231236',
+ isolate: 'https://files.d20.io/images/446909843/6IxkbARljNyoN78s26mLQg/original.png?1751231236',
+ stop: 'https://files.d20.io/images/446909850/AseQXEd16Xa77lPI2Hdeaw/original.png?1751231238'
+ };
+
+ // Define both style sets
+
+
+
+
+
+const cssDark = {
+ // Layout Containers
+ sidebar: 'background:#222; border-right:1px solid #444; width:200px; padding:6px; vertical-align:top; font-family: Nunito, Arial, sans-serif;',
+ tracklist: 'background:#1e1e1e; width:100%; padding:8px; vertical-align:top; font-family: Nunito, Arial, sans-serif;',
+ toggleWrap: 'margin-bottom:8px;width:160px; display:block;',
+
+ // Header and Title
+ header: 'color:#ddd; background:#542d2d; border-bottom:1px solid #444; padding:4px; text-align:left; font-size:20px; font-weight:bold; font-family: Nunito, Arial, sans-serif;',
+ gear: 'color:#aaa; float:right; cursor:pointer;',
+ trackCount: 'color:#888; margin-right:15px; margin-top:5px; font-size:12px; float:right; display: inline-block;',
+
+ // Buttons & Controls
+ button: 'background:#333; color:#ccc; border:1px solid #555; width:100%; margin-bottom:4px; display:block; font-size:11px;',
+ utilityContainer: 'background:#555; color:#ddd; border:1px solid #444; border-radius:4px; width:90%; padding:4px 6px; margin-top:6px; position:relative; font-size:12px;',
+ utilitySubButton: 'background:#444; color:#ccc; border:1px solid #444; border-radius:3px; padding:1px 5px; margin:-1px -1px 0px 3px; float:right; font-size:11px; text-decoration:none;',
+ utilityButton: 'background:#555; color:#ddd; border:1px solid #444; border-radius:4px; width:90%; margin-top:6px; display:inline-block; padding:4px 6px; font-size:12px; text-align:center; text-decoration:none;',
+ settingsButton: 'background:transparent; color:#ddd; width:90%; margin-top:6px; display:inline-block; padding:4px 6px; font-size:12px; text-align:center; text-decoration:none;',
+ headerButtonContainer: 'background:#1a2833; color:#ddd; border:1px solid #888; border-radius:4px; margin-top:-2px; margin-right:6px; position:relative; top:3px; float:right; display:inline-block; padding:4px 6px; font-size:12px; text-decoration:none;',
+ headerButton: 'color:#ddd!important; background:#1a2833; border:1px solid #888; border-radius:4px; margin-top:-2px; margin-right:6px; padding:4px 6px; font-size:12px; float:right; text-decoration:none; position:relative; top:3px;',
+ headerSubButton: 'background:#0e161c; color:#ddd; border:1px solid #444; border-radius:2px; margin-left:2px; margin-top:-2px; padding:1px 6px; font-size:11px; text-decoration:none;',
+ headerSubButtonActive: 'background:#C27575; color:#333; border:1px solid #333; border-radius:3px; margin-top:-2px; padding:1px 6px; font-size:11px; text-decoration:none;',
+ nowPlayingButton: 'background:#444; color:#ccc; border-radius:4px; margin-top:6px; padding:2px 4px; display:block; text-decoration:none;',
+ refreshButton: 'color:#66aaff; margin-top:8px; display:block; font-size:10px; text-decoration:underline; cursor:pointer;',
+ forceTextColor: 'color:#ddd',
+
+ //announce styles
+ announceButton: 'color:#888; padding:0px 4px; margin-top:4px; font-size:10px; display:inline-block; text-decoration:none;',
+ announceTitle: 'color:#ccc; margin-top:4px; font-size:16px; font-weight:bold; display:inline-block;',
+ announceDesc: 'color:#aaa; margin-top:4px; font-size:11px; line-height:15px;',
+
+ // Sidebar Links & Rules
+ sidebarRule: 'border:0; border-top:1px solid #444; margin:20px 0 3px 0;',
+ sidebarLink: 'color:#ccc; padding:2px 4px; display:block; text-decoration:none;',
+ albumSelectedLink: 'background:#993333; color:#eee; border-radius:4px; padding:2px 4px; display:block; text-decoration:none;',
+ playlistSelectedLink: 'background:#334477; color:#eee; border-radius:4px; padding:2px 4px; display:block; text-decoration:none;',
+
+ // Album/Playlist Tags
+ tags: 'margin-top:4px; margin-left:38px; display:block;',
+ albumTag: 'background:#993333; color:#eee; border-radius:4px; padding:2px 6px; margin-right:2px; font-size:10px; display:inline-block; vertical-align:middle;',
+ playlistTag: 'background:#334477; color:#eee; border-radius:4px; padding:2px 6px; margin-right:2px; font-size:10px; display:inline-block; vertical-align:middle;',
+ tagRemove: 'color:#eee; margin-left:2px; cursor:pointer;',
+
+ // Toggle Buttons
+ toggleButton: 'border:1px solid #555; border-radius:4px; width:45%; margin-right:4px; padding:6px 0; font-weight:bold; display:inline-block; text-align:center;',
+ toggleActiveAlbums: 'background:#993333; color:#eee;',
+ toggleActivePlaylists: 'background:#334477; color:#eee;',
+ toggleInactive: 'background:#444; color:#aaa;',
+
+ //Chat message Styles
+ messageContainer: 'background-color:#222; color:#ccc; Border: solid 1px #444; border-radius:5px; padding:10px; position:relative; top:-15px; left:-5px; font-family: Nunito, Arial, sans-serif;',
+ messageTitle: 'color:#ddd; margin-bottom:13px; font-size:16px; text-transform: capitalize; text-align:center;',
+ messageButton: 'background:#444; color:#ccc; border-radius:4px; padding:2px 6px; margin-right:2px; display:inline-block; vertical-align:middle',
+ descHelp: 'color:#eee; margin-top:4px; font-size:15px;',
+
+ // Track Item Styles
+ track: 'color:#ccc; border-bottom:1px solid #444; padding:6px 0; display:table; width:100%;',
+ trackTitle: 'color:#ccc;margin-top:2px; font-size:18px; font-weight:bold; display:inline-block;',
+ controls: 'float:right; margin-top:-2px;',
+ controlButtonImg: 'width:16px; height:16px; margin: 4px 2px; vertical-align:middle; cursor:pointer;',
+ desc: 'color:#aaa; margin-top:4px; margin-left:38px; font-size:13px;',
+ vol: 'color:#999; margin-top:4px; margin-left:108px; font-size:11px;',
+ albumEditLink: 'color:#aaa; margin-left:4px; font-size:10px; vertical-align:middle;',
+ descEditLink: 'color:#888; margin-left:6px; font-size:10px; font-style:italic; cursor:pointer;',
+ code: 'color:eee; background-color:#444; border-radius:3px; padding:1px 4px 0px 4px; margin-left:4px; display:inline-block; font-size:0.75em; font-family:monospace; font-weight:bold; user-select:none;',
+ volumeControl: 'color:#888; margin: 0px 6px; font-size:10px; text-decoration:none; cursor:pointer;',
+
+ // Images
+ image: 'background:#444; color:#999; border:1px solid #666; width:100px; height:100px; margin-right:8px; text-align:center; font-size:11px; float:left; object-fit:cover; object-position:center center; display:block;',
+ imageDiv: 'border:1px solid #666; width:100px; height:100px; margin-right:8px; background-size:cover; background-position:center; float:left; display:block;',
+ imagePlaceholder: 'background:#444; color:#999; border:1px solid #666; width:100px; margin-right:8px; text-align:center; font-size:11px; float:left; padding-top:35px; height:65px; line-height:18px; display:block;',
+
+ // Album specific
+ albumImage: 'border:1px solid #666; width:80px; height:80px; margin-right:8px; object-fit:cover;',
+ albumHeaderDesc: 'color:#bbb; font-size:12px;',
+ addAlbum: 'color:#ccc; margin-top:8px; display:block; font-size:10px;'
+};
+
+
+const lightModeOverrides = {
+ // Layout Containers
+ sidebar: { background: '#f5f5f5', "border-right": '1px solid #ccc' },
+ tracklist: { background: '#ffffff' },
+
+ // Header and Title
+ header: { color: '#222', background: '#cc9393', "border-bottom": '1px solid #ccc' },
+ gear: { color: '#666' },
+ trackCount: { color: '#333' },
+
+ // Buttons & Controls
+ button: { background: '#e0e0e0', color: '#333', border: '1px solid #bbb' },
+ utilityContainer: { background: '#ddd', color: '#333', border: '1px solid #bbb' },
+ utilitySubButton: { background: '#aaa', color: '#333', border: '1px solid #999' },
+ utilityButton: { background: '#ddd', color: '#222', border: '1px solid #bbb' },
+ settingsButton: { color: '#333' },
+ forceTextColor: { color: '#222' },
+
+ // *** Updated header buttons to match cssDark measurements but cssLight colors from utility buttons ***
+ headerButtonContainer: { border: '1px solid #666', background: '#ddd', color: '#333' },
+ headerButton: { border: '1px solid #666', background: '#ddd', color: '#222' },
+ headerSubButton: { border: '1px solid #999', background: '#aaa', color: '#333' },
+ headerSubButtonActive: { border: '1px solid #333', background: '#C27575', color: '#333' },
+
+ nowPlayingButton: { color: '#444', background: '#eee' },
+ refreshButton: { color: '#0066cc' },
+
+ //announce styles
+ announceButton: { color: '#888' },
+ announceTitle: { color: '#333' },
+ announceDesc: { color: '#555' },
+
+ // Sidebar Links & Rules
+ sidebarRule: { border: '0', "border-top": '1px solid #ccc' },
+ sidebarLink: { color: '#444' },
+ albumSelectedLink: { background: '#c22929', color: '#fff' },
+ playlistSelectedLink: { background: '#2d5da6', color: '#fff' },
+
+ // Album/Playlist Tags
+ albumTag: { background: '#c22929', color: '#fff' },
+ playlistTag: { background: '#2d5da6', color: '#fff' },
+ tagRemove: { color: '#fff' },
+
+ // Toggle Buttons
+ toggleActiveAlbums: { background: '#c22929', color: '#fff' },
+ toggleActivePlaylists: { background: '#2d5da6', color: '#fff' },
+ toggleInactive: { background: '#bbb', color: '#666' },
+
+ // Message styles
+ messageContainer: { backgroundColor: '#ccc', color: '#111', border: 'solid 1px #555' },
+ messageTitle: { backgroundColor: '#444', color: '#ddd' },
+ messageButton: { background: '#aaa', color: '#111', border: 'solid 1px #666' },
+
+ // Track Item Styles
+ track: { "border-bottom": '1px solid #ccc', color: '#333' },
+ trackTitle: { color: '#333' },
+ desc: { color: '#666' },
+ vol: { color: '#999' },
+ albumEditLink: { color: '#666' },
+ descEditLink: { color: '#888' },
+ code: { color: '222', backgroundColor: '#ddd' },
+ volumeControl: { color: '#888' },
+
+ // Images
+ image: { background: '#eee', color: '#999', border: '1px solid #bbb' },
+ imageDiv: { border: '1px solid #bbb' },
+ imagePlaceholder: { background: '#eee', color: '#999', border: '1px solid #bbb' },
+
+ // Album specific
+ albumImage: { border: '1px solid #bbb' },
+ albumHeaderDesc: { color: '#666' },
+ addAlbum: { color: '#666' }
+};
+
+
+
+
+const generateCssLightFromDark = (cssDark, overrides) => {
+ const result = {};
+
+ const replaceColors = (styleStr, override) => {
+ const props = styleStr.split(';').map(p => p.trim()).filter(Boolean);
+ const mapped = {};
+
+ // Convert dark mode CSS string into key-value pairs
+ props.forEach(p => {
+ const [key, value] = p.split(':').map(s => s.trim());
+ mapped[key] = value;
+ });
+
+ // Apply color/background/border overrides
+ if (override) {
+ if (override.color) mapped.color = override.color;
+ if (override.background) mapped.background = override.background;
+ if (override.border) {
+ // Override just the relevant border (most are single sides)
+ const sides = ['border', 'border-top', 'border-right', 'border-bottom', 'border-left'];
+ const borderKey = sides.find(k => Object.keys(mapped).includes(k)) || 'border';
+ mapped[borderKey] = override.border;
+ }
+ }
+
+ // Rebuild into CSS string
+ return Object.entries(mapped).map(([k, v]) => `${k}:${v}`).join('; ') + ';';
+ };
+
+ // Handle all style keys (excluding badgeColors)
+ for (const key in cssDark) {
+ if (key === 'badgeColors') continue;
+ const override = overrides[key];
+ result[key] = replaceColors(cssDark[key], override);
+ }
+
+ // Copy and override badgeColors
+ result.badgeColors = {
+ ...(cssDark.badgeColors || {}),
+ ...(overrides.badgeColors || {})
+ };
+
+ return result;
+};
+
+const cssLight = generateCssLightFromDark(cssDark, lightModeOverrides);
+
+
+
+
+
+
+ // Set active theme styles and icons based on saved mode
+ let css = data.settings.mode === 'light' ? cssLight : cssDark;
+ let icons = data.settings.mode === 'light' ? iconSetLight : iconSetDark;
+
+
+// Initiatlizes the ID of the currently scheduled timeout used for managing the Mix playback mode.
+let mixTimeoutId = null;
+
+const getDirectorHandoutLink = () => {
+ if (typeof API_Meta !== 'undefined' &&
+ API_Meta.Director &&
+ typeof API_Meta.Director.offset === 'number') {
+
+ const handout = findObjs({ type: 'handout', name: 'Director' })[0];
+ if (handout) {
+ const url = `http://journal.roll20.net/handout/${handout.id}`;
+ return `Direct`;
+ }
+ }
+ return '';
+};
+
+
+
+// Renders the help documentation view in the Jukebox Plus handout, styled according to current theme mode.
+ const renderHelpView = () =>
+ {
+ const handout = findObjs(
+ {
+ _type: 'handout',
+ name: HANDOUT_NAME
+ })[0];
+ if(!handout) return;
+
+ const css = data.settings.mode === 'light' ? cssLight : cssDark;
+
+//HTML that displays the help documentation
+const helpHTML = `
+
+
+
+
Getting Started
+
+ Jukebox Plus lets you organize and control music tracks by albums or playlists.
+ Use the toggle buttons in the sidebar to switch between views. Tracks are displayed on the right, and control
+ buttons appear for each one.
+
+
+
+
Header Buttons
+
+ At the top right of the interface:
+
+
10 tracks
+
+
+
Stop All
+
Find
+
Help
+
+
+
+
+
Play All
+
+ Together — Plays all visible tracks simultaneously. Limited to the first five visible.
+ Sequential — Plays all visible tracks one after the other.
+ ↻ — Plays all visible tracks one after the other, then starts over.
+ Shuffle — Plays all visible tracks in a random order, once through.
+ ↻ — Plays all visible tracks in a random order, reshuffling and looping after each full playthrough.
+ Mix — Plays all looping tracks continuously, and all other tracks at random intervals. Use to create a custom soundscape. Stopped by StopAll
+
+
+
Loop
+
+ Off — Disables loop mode for all visible tracks
+ On — Enables loop mode for all visible tracks
+
+
+
Stop All — Stops all currently playing tracks. Also use to stop a Mix.
+
Find — Search all track names and descriptions for the keyword. All matching tracks will be assigned to a temporary album called
Found. You can then switch to the Found album to quickly view the results. To clear the results, simply delete the Found album using the Utility panel.
If you input "d" as the search term, it will create a temporary album of any duplicate tracks, grouped by name.
+
Help — Displays this help page. Click
Return to Player to return.
+
+
+
+
+
Sidebar: Navigation & Now Playing
+
+
+
View Mode Toggle
+ The left sidebar lists all albums or playlists, depending on the current view mode. Clicking a name switches the view.
+
+
+
+ These buttons let you switch between organizing by:
+
+ Album tags or by manual Playlists. Albums are groupings of tracks that you define through Jukebox Plus. You can make as many of these as you like, and any track may belong to multiple albums.
+ Playlists are managed by the Roll20 Jukebox interface. You can view and play them here, but you cannot move them about.
+
+
+ At the bottom of the list is:
+
Now Playing Choosing this filters the list to show only tracks currently playing.
+
+
+
+
Track Controls
+
+ Each track shows these control buttons:
+
+
+
Play: Start the track.
+
Loop: Toggle loop mode for the track.
+
Isolate: Stops all others and plays only this one.
+
Stop: Stops this track.
+
➤ Announce: Sends the track name and description to the chat window.
+
+
+
+
Track Info and Management
+
+
Edit — Click the track description "edit" link to create a description.
+
+ Description special characters:
+ "---" to insert a line break.
+ "*italic*" surround a word in single asterisks to have it display in italic
+ "**bold**" surround a word in double asterisks to have it display in bold
+ "!d" or "!desc" to include the description of the track when you announce it. Default is title only.
+ "!a" or "!announce" to have a track announce itself automatically whenever you play it. Default is manual announcement only.
+
+
+
Tags — Each track has a Playlist tag, and the ability to add album tags.
Playlist tags are in blue, and
album tags are in red. Click
+ Add to add a track to an Album. Click a Playlist or Album tag to jump immediately to that Playlist or Album. Click the "x" in an Album tag to remove the track from that Album:
Album name | x
+
Image Area — Click the image area to submit a valid image URL or a hexadecimal color code, such as "#00ff00". You can also enter a common CSS color name such as "red".
+ If you submit an image URL, the image will display here next to the title, or in the chat tab while Announcing a track. The URL can come from your Roll20 image library or any valid image host.
+ If you submit a valid color code or name, the square will turn that color, and that color will be used when Announcing a track.
+
+
+
+
+
Utility Panel
+
+ Click
to expand the utility tools. Includes:
+
+
+
+
Edit Albums:
+
–
+
+
+
✎
+
+
+
+ These buttons change the name of an album, add a new album, or remove the currently selected album. There is no verification, so use with care.
+
+
+
+ These buttons alphabetize Albums, or Tracks within an Album.
+
+
+
+ These buttons switch between light and dark mode.
+
+
Rebuilds the interface if something breaks.
+
+
+These buttons adjust how often tracks are played when using the
Mix function in
Play All.
+
+ - Maximum — the longest delay allowed between playing non-looping tracks.
+ - Minimum — the shortest delay allowed between playing non-looping tracks.
+ - Reset — restores the default 10–60 second interval.
+
+These values only apply when using
Mix mode. Looping tracks are not affected.
+
+
+
+ These buttons create a backup handout of the custom data you have entered: playlists, descriptions, and images. Higher numbered handouts are later backups. You can restore from a backup if your data gets screwed up, or you can transmogrify or copy the handout to a new game and restore from there. This is a useful way to move your customizations from game to game. Use with caution — Roll20 stores tracks by ID number which are different in every game, and the script tries hard to match title to ID. If you have multiple tracks with the same name or have renamed a track, this may not perform as expected.
+
+
+
+
Find
+
+ Use the !jb find keyword command to search all track names and descriptions for the keyword.
+ All matching tracks will be assigned to a temporary album called Found. You can then switch to the Found album to quickly view the results. To clear the results, simply delete the Found album using the utility panel.
+
+
+
+
Useful Macros
+
+ Here are some chat commands that can be used in macros:
+
+ !jb — Puts a link to this handout in chat
+ !jb play TrackName — play the named track
+ !jb stopall — stops all audio
+ !jb loopall — sets loop mode on all visible tracks
+ !jb unloopall — disables loop mode on all tracks
+ !jb jump album AlbumName — switch to a specific album
+ !jb help — open this help screen
+ !jb find keyword search for tracks by keyword in name or description
+
+ You can also discover commands by pressing a button, clicking in the chat window, and pressing the up arrow to see what was sent.
+
+
+
+
+
+
') // replace --- with
+ .replace(/\*\*(.+?)\*\*/g, '$1') // **bold**
+ .replace(/\*(.+?)\*/g, `$1`)
+ .replace(/`(.+?)`/g, '$1') // `code`
+ .replace(/!a/gi, `announce`) // announce codes
+ .replace(/!d/gi, `desc`);
+};
+
+
+// Escapes special characters for safe use in Roll20 query prompts (e.g. `?{}` and pipe-delimited lists).
+const escapeForRoll20Query = (str) => {
+ if (!str) return '';
+ return str
+ .replace(/\\/g, '\\\\')
+ .replace(/\|/g, '\\|')
+ .replace(/\?/g, '\\?')
+ .replace(/\{/g, '\\{')
+ .replace(/\}/g, '\\}');
+};
+
+
+
+
+
+
+// Escapes HTML special characters and replaces double slashes with
for safe HTML rendering.
+ const esc = (s) => s.replace(/[&<>"']/g, c => (
+ {
+ '&': '&',
+ '<': '<',
+ '>': '>',
+ '"': '"',
+ "'": '''
+ } [c]))
+ .replace(/\/{2}/g, '
');
+
+const cssNamedColors = new Set([
+ 'aliceblue', 'antiquewhite', 'aqua', 'aquamarine', 'azure',
+ 'beige', 'bisque', 'black', 'blanchedalmond', 'blue', 'blueviolet',
+ 'brown', 'burlywood', 'cadetblue', 'chartreuse', 'chocolate',
+ 'coral', 'cornflowerblue', 'cornsilk', 'crimson', 'cyan',
+ 'darkblue', 'darkcyan', 'darkgoldenrod', 'darkgray', 'darkgreen',
+ 'darkgrey', 'darkkhaki', 'darkmagenta', 'darkolivegreen', 'darkorange',
+ 'darkorchid', 'darkred', 'darksalmon', 'darkseagreen', 'darkslateblue',
+ 'darkslategray', 'darkslategrey', 'darkturquoise', 'darkviolet',
+ 'deeppink', 'deepskyblue', 'dimgray', 'dimgrey', 'dodgerblue',
+ 'firebrick', 'floralwhite', 'forestgreen', 'fuchsia', 'gainsboro',
+ 'ghostwhite', 'gold', 'goldenrod', 'gray', 'green', 'greenyellow',
+ 'grey', 'honeydew', 'hotpink', 'indianred', 'indigo', 'ivory', 'khaki',
+ 'lavender', 'lavenderblush', 'lawngreen', 'lemonchiffon', 'lightblue',
+ 'lightcoral', 'lightcyan', 'lightgoldenrodyellow', 'lightgray',
+ 'lightgreen', 'lightgrey', 'lightpink', 'lightsalmon', 'lightseagreen',
+ 'lightskyblue', 'lightslategray', 'lightslategrey', 'lightsteelblue',
+ 'lightyellow', 'lime', 'limegreen', 'linen', 'magenta', 'maroon',
+ 'mediumaquamarine', 'mediumblue', 'mediumorchid', 'mediumpurple',
+ 'mediumseagreen', 'mediumslateblue', 'mediumspringgreen', 'mediumturquoise',
+ 'mediumvioletred', 'midnightblue', 'mintcream', 'mistyrose', 'moccasin',
+ 'navajowhite', 'navy', 'oldlace', 'olive', 'olivedrab', 'orange',
+ 'orangered', 'orchid', 'palegoldenrod', 'palegreen', 'paleturquoise',
+ 'palevioletred', 'papayawhip', 'peachpuff', 'peru', 'pink', 'plum',
+ 'powderblue', 'purple', 'rebeccapurple', 'red', 'rosybrown', 'royalblue',
+ 'saddlebrown', 'salmon', 'sandybrown', 'seagreen', 'seashell', 'sienna',
+ 'silver', 'skyblue', 'slateblue', 'slategray', 'slategrey', 'snow',
+ 'springgreen', 'steelblue', 'tan', 'teal', 'thistle', 'tomato',
+ 'turquoise', 'violet', 'wheat', 'white', 'whitesmoke', 'yellow', 'yellowgreen'
+]);
+
+
+
+// Holds the state for sequential track playback, including track order, current position, active status, and loop mode.
+let sequentialPlayState = {
+ trackIds: [],
+ currentIndex: -1,
+ active: false,
+ loop: false // <--- New!
+};
+
+// Returns your internal metadata object from `data.tracks`
+const findInternalTrack = (idOrName) => {
+ return data.tracks[idOrName] || Object.values(data.tracks)
+ .find(t => t.title === idOrName);
+};
+
+// Returns the actual live Roll20 jukeboxtrack object
+const findLiveTrack = (trackId) => {
+ return findObjs({ _type: 'jukeboxtrack', _id: trackId })[0];
+};
+
+data.settings.playAllMode = data.settings.playAllMode || null;
+
+
+// Convert linear slider percentage (0–100) to Roll20 volume curve (0–100)
+const sliderPercentToStoredVolume = (p) => {
+ return Math.round((Math.pow(p / 100, 2)) * 100);
+};
+
+// Convert stored volume value (0–100) to slider percent (0–100)
+const storedVolumeToSliderPercent = (v) => {
+ return Math.round(Math.sqrt((v || 0) / 100) * 100);
+};
+
+
+// Non-state variable for timer handlers
+let mixAccentTimerHandles = [];
+
+
+// Returns the list of tracks currently visible based on view mode (albums, playlists, now playing) and sorting preferences.
+const getVisibleTrackList = () => {
+ const getPlaylistTracks = () =>
+ {
+ const plist = data.playlists[data.settings.selectedPlaylist];
+ return Array.isArray(plist) ? plist : [];
+ };
+
+ if (data.settings.nowPlayingOnly) {
+ return Object.values(data.tracks).filter(t => {
+ const actual = getAllTracks().find(j => j.id === t.id);
+ return actual && actual.get('playing');
+ });
+ }
+
+ if (data.settings.viewMode === 'albums') {
+ const selected = data.settings.selectedAlbum;
+ let tracks = Object.values(data.tracks).filter(t => t.albums.includes(selected));
+
+ if (selected === 'Duplicates') {
+ tracks.sort((a, b) => a.title.toLowerCase().localeCompare(b.title.toLowerCase()));
+ } else if (data.trackSortOrder?.length) {
+ const ordered = data.trackSortOrder
+ .map(title => tracks.find(t => t.title === title))
+ .filter(Boolean);
+ const leftovers = tracks.filter(t => !data.trackSortOrder.includes(t.title));
+ tracks = [...ordered, ...leftovers];
+ }
+
+ return tracks;
+ }
+
+ if (data.settings.viewMode === 'playlists') {
+ const selected = data.settings.selectedPlaylist;
+ const trackIds = data.playlists[selected] || [];
+ return trackIds.map(id => data.tracks[id]).filter(Boolean);
+ }
+
+ return [];
+};
+
+
+ const getAllTracks = () => findObjs(
+ {
+ _type: 'jukeboxtrack'
+ }) || [];
+
+ // Sync playlists by walking the jukebox folder structure and building playlists object
+ const syncPlaylists = () =>
+ {
+ let folderJSON = Campaign()
+ .get('jukeboxfolder');
+ if(!folderJSON)
+ {
+ log('Jukebox Plus: No jukebox folder found.');
+ data.playlists = {
+ 'Unassigned': []
+ };
+ return;
+ }
+
+ let folder;
+ try
+ {
+ folder = JSON.parse(folderJSON);
+ }
+ catch (e)
+ {
+ log('Jukebox Plus: Failed to parse jukeboxfolder JSON:', e);
+ data.playlists = {
+ 'Unassigned': []
+ };
+ return;
+ }
+
+ log('Jukebox Plus: jukeboxfolder parsed:', JSON.stringify(folder));
+
+ // Clear previous playlists before repopulating
+ data.playlists = {};
+
+ // Flatten walk through the folder structure
+ // Each element is an object: { n: playlist name, i: array of track IDs }
+ folder.forEach(playlist =>
+ {
+ if(!playlist.n || !Array.isArray(playlist.i)) return;
+
+ const playlistName = playlist.n;
+ if(!data.playlists[playlistName])
+ {
+ data.playlists[playlistName] = [];
+ }
+
+ playlist.i.forEach(trackId =>
+ {
+ const track = data.tracks[trackId];
+ if(track)
+ {
+ // Add track ID to playlist if not already present
+ if(!data.playlists[playlistName].includes(trackId))
+ {
+ data.playlists[playlistName].push(trackId);
+ }
+ // Also ensure this playlist is tracked in track.albums or track.playlists if you want
+ }
+ else
+ {
+ log(`Jukebox Plus: Track ID [${trackId}] not found in jukebox tracks.`);
+ }
+ });
+ });
+
+ // If no playlists found, fallback to Unassigned
+ if(Object.keys(data.playlists)
+ .length === 0)
+ {
+ log('Jukebox Plus: No playlists created, adding Unassigned fallback.');
+ data.playlists = {
+ 'Unassigned': []
+ };
+ }
+ };
+
+ // Sync tracks and playlists
+ const syncTracks = () =>
+ {
+ getAllTracks()
+ .forEach(track =>
+ {
+ const id = track.get('_id');
+ const title = track.get('title');
+ const volume = track.get('volume');
+ if(!data.tracks[id])
+ {
+ data.tracks[id] = {
+ id,
+ title,
+ volume,
+ albums: [],
+ description: '',
+ image: '',
+ sortOrder:
+ {}
+ };
+ }
+ else
+ {
+ data.tracks[id].title = title;
+ data.tracks[id].volume = volume;
+ }
+ });
+ syncPlaylists();
+ };
+
+
+// Builds the full HTML row for a single track, including controls, tags, and image display.
+const buildTrackRow = (track) =>
+{
+ const isHexColor = /^#(?:[0-9a-fA-F]{3}){1,2}$/.test(track.image || '');
+ const isNamedColor = cssNamedColors.has((track.image || '').toLowerCase());
+ const isURL = /^https?:\/\/.+/.test(track.image || '');
+
+ const img = track.image
+ ? `
+
+
+ `
+ : `
+ click to add image or color code
+ `;
+
+ // Build album options respecting albumSortOrder, exclude albums already assigned to track
+ const albumOptions = (data.albumSortOrder && data.albumSortOrder.length
+ ? data.albumSortOrder.filter(a => data.albums.hasOwnProperty(a))
+ : Object.keys(data.albums || {}))
+ .filter(a => !track.albums.includes(a))
+ .concat('New Album');
+
+ // Escape and join for prompt
+ const addAlbumQuery = albumOptions.map(a => esc(a)).join('|');
+
+ const desc = track.description ?
+ `${renderFormattedText(track.description)}
[edit]
+ ${img}
+
+
+ ${desc}
+
+
+ ${
+ (track.albums || []).map(name =>
+ `
+ ${esc(name)}
+ |
+x
+ `
+ ).join(' ')
+ }
+ ${addAlbumButton}
+ ${playlistTagHTML}
+
+
+
This track is listed in your saved data, but no matching Roll20 jukebox track exists.
This can happen if the track was deleted, if it was imported from another game, or if its ID changed. If you are sure this track no longer exists or is needed, you can remove it from your saved data.
Remove this broken track
`,
+ false
+ );
+ return updateInterface();
+ }
+
+ if (command === "play") {
+ actual.set("playing", true);
+ const flags = getTrackFlags(internal);
+ if (flags.announce) {
+ const descHtml = flags.includeDesc ? `${esc(internal.description || '')}
` : '';
+ const imageHtml = internal.image
+ ? `
`
+ : '';
+ const messageHtml = `${imageHtml}${esc(internal.title)}
${descHtml}`;
+ sendStyledMessage('Now Playing', messageHtml, true);
+ }
+ }
+
+ if (command === "stop") actual.set("playing", false);
+ if (command === "loop") actual.set("loop", !actual.get("loop"));
+
+ if (command === "isolate") {
+ getAllTracks().forEach(t => t.set("playing", t.id === internal.id));
+ }
+
+ updateInterface();
+}
+
+
+
+
+ // Sends a link to the Jukebox Plus handout when no specific command is given
+ if(command === '')
+ {
+ sendHandoutLink();
+ return;
+ }
+
+ // Shows or hides the help view depending on argument ('help' or 'help close')
+ if(command === 'help')
+ {
+ const sub = args[0]?.toLowerCase();
+ data.settings.helpVisible = (sub !== 'close');
+ if(data.settings.helpVisible)
+ {
+ renderHelpView();
+ }
+ else
+ {
+ updateInterface();
+ }
+ return;
+ }
+
+
+ // Plays all tracks currently visible in the view, up to a maximum of 5 simultaneously
+if(command === 'playall')
+{
+ const trackList = (() =>
+ {
+ if(data.settings.viewMode === 'albums')
+ {
+ const albumName = data.settings.selectedAlbum;
+ return Object.values(data.tracks)
+ .filter(t => t.albums.includes(albumName));
+ }
+ else if(data.settings.viewMode === 'playlists')
+ {
+ const trackIds = data.playlists[data.settings.selectedPlaylist] || [];
+ return trackIds.map(id => data.tracks[id])
+ .filter(Boolean);
+ }
+ return [];
+ })();
+
+ const actualTracks = trackList
+ .map(t => getAllTracks()
+ .find(j => j.id === t.id))
+ .filter(t => t);
+
+ const max = 5;
+
+ actualTracks.slice(0, max)
+ .forEach(t => {
+ t.set('playing', true);
+
+ const flags = getTrackFlags(data.tracks[t.id]);
+ if (flags.announce) {
+ const descHtml = flags.includeDesc ? `${esc(data.tracks[t.id].description || '')}
` : '';
+ const imageHtml = data.tracks[t.id].image ?
+ `
` :
+ '';
+ const messageHtml = `${imageHtml}${esc(data.tracks[t.id].title)}
${descHtml}`;
+ sendStyledMessage('Now Playing', messageHtml, true);
+ }
+ });
+
+ if(actualTracks.length > max)
+ {
+ sendStyledMessage('Notice', 'Only the first 5 tracks were played to avoid clutter.');
+ }
+data.settings.playAllMode = 'together'; // ✅ Add this line
+
+ updateInterface();
+}
+
+
+
+
+
+
+
+
+
+// Play all visible tracks once, in a random order (no repeats)
+if (command === 'playall-rand') {
+ const visibleTracks = getVisibleTrackList();
+ const max = 20;
+
+ const actualTracks = visibleTracks
+ .map(t => findLiveTrack(t.id))
+ .filter(Boolean)
+ .slice(0, max);
+
+ if (actualTracks.length === 0) {
+ sendStyledMessage('No tracks', 'No tracks found to play.');
+ return;
+ }
+
+ // Fisher–Yates shuffle for random order
+ const shuffledTracks = [...actualTracks];
+ for (let i = shuffledTracks.length - 1; i > 0; i--) {
+ const j = Math.floor(Math.random() * (i + 1));
+ [shuffledTracks[i], shuffledTracks[j]] = [shuffledTracks[j], shuffledTracks[i]];
+ }
+
+ // Store track IDs for sequential handler to process
+ sequentialPlayState.trackIds = shuffledTracks.map(t => t.id);
+ sequentialPlayState.currentIndex = 0;
+ sequentialPlayState.active = true;
+ sequentialPlayState.loop = false;
+
+ // Stop any currently playing tracks
+ getAllTracks().forEach(t => t.set('playing', false));
+
+ // Start first randomized track
+ const firstTrack = shuffledTracks[0];
+ firstTrack.set('softstop', false);
+ firstTrack.set('playing', true);
+
+ data.settings.playAllMode = 'random'; // ✅ distinct mode label
+ updateInterface();
+}
+
+
+// Play all visible tracks in random order, then reshuffle and loop forever
+if (command === 'playall-rand-loop') {
+ const visibleTracks = getVisibleTrackList();
+ const max = 20;
+
+ const actualTracks = visibleTracks
+ .map(t => findLiveTrack(t.id))
+ .filter(Boolean)
+ .slice(0, max);
+
+ if (actualTracks.length === 0) {
+ sendStyledMessage('No tracks', 'No tracks found to play.');
+ return;
+ }
+
+ // Helper: Fisher–Yates shuffle
+ const shuffleTracks = (tracks) => {
+ const shuffled = [...tracks];
+ for (let i = shuffled.length - 1; i > 0; i--) {
+ const j = Math.floor(Math.random() * (i + 1));
+ [shuffled[i], shuffled[j]] = [shuffled[j], shuffled[i]];
+ }
+ return shuffled;
+ };
+
+ // Shuffle for first play
+ const shuffledTracks = shuffleTracks(actualTracks);
+
+ // Store state and reshuffle behavior for future loops
+ sequentialPlayState.trackIds = shuffledTracks.map(t => t.id);
+ sequentialPlayState.currentIndex = 0;
+ sequentialPlayState.active = true;
+ sequentialPlayState.loop = true;
+ sequentialPlayState.reshuffleOnLoop = true; // 👈 new flag
+ sequentialPlayState.shuffleFn = () => {
+ const refreshedVisible = getVisibleTrackList()
+ .map(t => findLiveTrack(t.id))
+ .filter(Boolean)
+ .slice(0, max);
+ const reshuffled = shuffleTracks(refreshedVisible);
+ sequentialPlayState.trackIds = reshuffled.map(t => t.id);
+ };
+
+ // Stop any currently playing tracks
+ getAllTracks().forEach(t => t.set('playing', false));
+
+ // Start first randomized track
+ const firstTrack = shuffledTracks[0];
+ firstTrack.set('softstop', false);
+ firstTrack.set('playing', true);
+
+ data.settings.playAllMode = 'random-loop';
+ updateInterface();
+}
+
+
+
+
+
+
+
+ // Plays all visible tracks sequentially, starting from the first one
+if (command === 'playall-seq') {
+ const visibleTracks = getVisibleTrackList();
+ const max = 20;
+
+ const actualTracks = visibleTracks
+ .map(t => findLiveTrack(t.id))
+
+ .filter(Boolean)
+ .slice(0, max);
+
+ if (actualTracks.length === 0) {
+ sendStyledMessage('No tracks', 'No tracks found to play.');
+ return;
+ }
+
+ // Store track IDs for sequential playing
+ sequentialPlayState.trackIds = actualTracks.map(t => t.id);
+ sequentialPlayState.currentIndex = 0;
+ sequentialPlayState.active = true;
+
+ // Start first track
+ const firstTrack = actualTracks[0];
+ firstTrack.set('softstop', false);
+ firstTrack.set('playing', true);
+
+data.settings.playAllMode = 'sequential'; // ✅ Add this line
+
+ updateInterface();
+}
+
+
+ // Plays all visible tracks sequentially in a loop, restarting after last track ends
+if(command === 'playall-seq-loop') {
+ const visibleTracks = getVisibleTrackList(); // Same display order used by updateInterface
+
+ const max = 20;
+ const actualTracks = visibleTracks
+ .map(t => findLiveTrack(t.id))
+ .filter(Boolean)
+ .slice(0, max);
+
+ if (actualTracks.length === 0) {
+ sendStyledMessage('No tracks', 'No tracks found to play.');
+ return;
+ }
+
+ sequentialPlayState.trackIds = actualTracks.map(t => t.id);
+ sequentialPlayState.currentIndex = 0;
+ sequentialPlayState.active = true;
+ sequentialPlayState.loop = true; // 👈 enables looping after the last track
+
+ // Stop all currently playing tracks
+ getAllTracks().forEach(t => t.set('playing', false));
+
+ const firstTrack = actualTracks[0];
+ firstTrack.set('softstop', false); // ensure it will start
+ firstTrack.set('playing', true);
+
+data.settings.playAllMode = 'loop'; // ✅ Add this line
+
+ updateInterface();
+}
+
+// Global timer variable, declared once outside the command handler
+let mixAccentTimer = null;
+
+//Sets minimum interval between accent tracks during mix play
+if (command === 'set-mix-min') {
+ const sec = parseInt(args[0], 10);
+ if (!isNaN(sec) && sec >= 1 && sec <= 3600) {
+ data.settings.mixMinInterval = sec;
+ updateInterface();
+ } else {
+ sendStyledMessage('Error', 'Invalid minimum interval (1–3600 seconds only).');
+ }
+}
+
+//Sets maximum interval between accent tracks during mix play
+if (command === 'set-mix-max') {
+ const sec = parseInt(args[0], 10);
+ if (!isNaN(sec) && sec >= 1 && sec <= 3600) {
+ data.settings.mixMaxInterval = sec;
+ updateInterface();
+ } else {
+ sendStyledMessage('Error', 'Invalid maximum interval (1–3600 seconds only).');
+ }
+}
+
+//Re-sets interval between accent tracks during mix play to defaults
+if (command === 'reset-mix-interval') {
+ data.settings.mixMinInterval = 10;
+ data.settings.mixMaxInterval = 60;
+ updateInterface();
+}
+
+
+
+ // Starts a "mix" mode: plays looping tracks continuously and plays non-looping tracks randomly at intervals
+if (command === 'mix') {
+ if (args[0] === 'stop') {
+ sendStyledMessage('Info', 'Use !jb stopall to stop all playback including mix mode.');
+ return;
+ }
+
+ // Clear any legacy or active mix timers
+ mixAccentTimerHandles.forEach(id => clearTimeout(id));
+ mixAccentTimerHandles = [];
+
+ if (mixAccentTimer) {
+ clearTimeout(mixAccentTimer);
+ mixAccentTimer = null;
+ }
+
+ // Stop all playing tracks
+ getAllTracks().forEach(t => t.set('playing', false));
+
+ const visibleTracks = getVisibleTrackList();
+ const max = 20;
+ const actualTracks = visibleTracks
+ .map(t => getAllTracks().find(j => j.id === t.id))
+ .filter(Boolean)
+ .slice(0, max);
+
+ if (actualTracks.length === 0) {
+ sendStyledMessage('No tracks', 'No tracks found to play.');
+ return;
+ }
+
+ const loopingTracks = actualTracks.filter(t => t.get('loop'));
+ const nonLoopingTracks = actualTracks.filter(t => !t.get('loop'));
+
+ // Start looping tracks immediately
+ loopingTracks.forEach(t => {
+ t.set('softstop', false);
+ t.set('playing', true);
+ });
+
+ // Store mode flag (safe)
+ data.settings.playAllMode = 'mix';
+
+ // Use configured or default mix intervals
+ const minDelay = (data.settings.mixMinInterval || 10) * 1000;
+ const maxDelay = (data.settings.mixMaxInterval || 60) * 1000;
+
+ // Set up individual repeating accent timers
+ nonLoopingTracks.forEach(track => {
+ const playAccent = () => {
+ const liveTrack = findLiveTrack(track.id);
+ if (liveTrack) {
+ liveTrack.set('softstop', false);
+ liveTrack.set('playing', true);
+ }
+
+ const nextDelay = minDelay + Math.floor(Math.random() * (maxDelay - minDelay));
+ const timerId = setTimeout(playAccent, nextDelay);
+ mixAccentTimerHandles.push(timerId);
+ };
+
+ const initialDelay = 3000 + Math.floor(Math.random() * 5000);
+ const timerId = setTimeout(playAccent, initialDelay);
+ mixAccentTimerHandles.push(timerId);
+ });
+
+ updateInterface();
+}
+
+
+ // Stops all playing tracks and cancels any active mix timer
+if (command === 'stopall') {
+ // Stop all tracks
+ getAllTracks().forEach(t => t.set('playing', false));
+
+ // Cancel legacy single mix timer if active
+ if (mixAccentTimer) {
+ clearTimeout(mixAccentTimer);
+ mixAccentTimer = null;
+ }
+
+ // Cancel all individual mix timers if present
+ if (Array.isArray(mixAccentTimerHandles)) {
+ mixAccentTimerHandles.forEach(id => clearTimeout(id));
+ mixAccentTimerHandles = [];
+ }
+
+ // Clear session state and mode flag
+ state.GraphicJukebox.mixSession = null;
+ data.settings.playAllMode = null;
+
+ updateInterface();
+}
+
+
+
+
+
+ // Toggles loop state for all tracks in current album or playlist view
+ else if(command === 'loopall' || command === 'unloopall')
+ {
+ const trackList = (() =>
+ {
+ if(data.settings.viewMode === 'albums')
+ {
+ const albumName = data.settings.selectedAlbum;
+ return Object.values(data.tracks)
+ .filter(t => t.albums.includes(albumName));
+ }
+ else if(data.settings.viewMode === 'playlists')
+ {
+ const trackIds = data.playlists[data.settings.selectedPlaylist] || [];
+ return trackIds.map(id => data.tracks[id])
+ .filter(Boolean);
+ }
+ return [];
+ })();
+ const shouldLoop = (command === 'loopall');
+
+ const actualTracks = trackList
+ .map(t => getAllTracks()
+ .find(j => j.id === t.id))
+ .filter(t => t);
+
+ actualTracks.forEach(t => t.set('loop', shouldLoop));
+
+ updateInterface();
+ }
+
+ // Forces a refresh of track data from Roll20's jukebox and updates the interface
+ if(command === 'refresh')
+ {
+ syncTracks();
+ updateInterface();
+ sendStyledMessage('Track data refreshed.');
+ }
+
+ // Creates a backup of all track, album, and playlist data into a new archived handout
+ if(command === 'backup')
+ {
+ const backupData = {
+ tracks:
+ {},
+ albums:
+ {
+ ...data.albums
+ },
+ playlists:
+ {},
+ albumSortOrder:
+ {
+ ...data.albumSortOrder
+ }
+ };
+
+ // Store track data keyed by title
+ Object.values(data.tracks)
+ .forEach(t =>
+ {
+ backupData.tracks[t.title] = {
+ title: t.title,
+ description: t.description,
+ image: t.image,
+ albums: t.albums.slice(),
+ volume: t.volume
+ };
+ });
+
+ // Store playlist data using track titles
+ Object.entries(data.playlists)
+ .forEach(([playlistName, trackIds]) =>
+ {
+ const titles = trackIds.map(id => data.tracks[id]?.title)
+ .filter(Boolean);
+ backupData.playlists[playlistName] = titles;
+ });
+
+ // Generate sequential backup handout name
+ let index = 1;
+ let name = `Jukebox Backup 001`;
+ while(findObjs(
+ {
+ _type: 'handout',
+ name
+ })
+ .length > 0)
+ {
+ index++;
+ name = `Jukebox Backup ${String(index).padStart(3, '0')}`;
+ }
+
+ const handout = createObj('handout',
+ {
+ name,
+archived: true
+ });
+
+ handout.set('notes', `${JSON.stringify(backupData, null, 2)}`);
+ sendStyledMessage('Backup created', `[${name}](http://journal.roll20.net/handout/${handout.id})`);
+ }
+
+
+ // Restores track, album, and playlist data from a named backup handout
+ if(command === 'restore')
+ {
+ const backupName = args.join(' ')
+ .trim();
+ const handout = findObjs(
+ {
+ _type: 'handout',
+ name: backupName
+ })[0];
+
+ if(!handout)
+ {
+ sendStyledMessage(`Backup handout not found: ${backupName}`);
+ return;
+ }
+
+ handout.get('notes', notes =>
+ {
+ const raw = notes.replace(/^|<\/pre>$/g, '')
+ .trim();
+ let backup;
+
+ try
+ {
+ backup = JSON.parse(raw);
+ }
+ catch (e)
+ {
+ sendStyledMessage('Backup', `Failed to parse backup JSON in "${backupName}".`);
+ return;
+ }
+
+ const titleToId = {};
+ getAllTracks()
+ .forEach(track =>
+ {
+ titleToId[track.get('title')] = track.get('_id');
+ });
+
+ const restoredTracks = {};
+ Object.values(backup.tracks ||
+ {})
+ .forEach(bt =>
+ {
+ const id = titleToId[bt.title];
+ if(id)
+ {
+ restoredTracks[id] = {
+ id,
+ title: bt.title,
+ description: bt.description || '',
+ image: bt.image || '',
+ albums: bt.albums || [],
+ volume: bt.volume ?? 0.5,
+ sortOrder:
+ {}
+ };
+ }
+ else
+ {
+ sendStyledMessage('Restore', `Track not found in current game: "${bt.title}"`);
+ }
+ });
+
+ const restoredPlaylists = {};
+ Object.entries(backup.playlists ||
+ {})
+ .forEach(([plistName, titles]) =>
+ {
+ restoredPlaylists[plistName] = titles
+ .map(t => titleToId[t])
+ .filter(Boolean);
+ });
+
+ // Apply restored data
+ data.tracks = restoredTracks;
+ data.albums = {
+ ...backup.albums
+ };
+ data.albumSortOrder = {
+ ...backup.albumSortOrder
+ };
+ data.playlists = restoredPlaylists;
+
+ updateInterface();
+ sendStyledMessage('Restore', `Backup "${backupName}" restored successfully.`);
+ });
+ }
+
+ // Removes a track from saved data by ID
+if(command === 'delete-track') {
+ const id = args.join(' ').trim();
+ const track = data.tracks[id];
+ if(track) {
+ delete data.tracks[id];
+ sendStyledMessage('Track Removed', `Track "${esc(track.title)}" has been removed from your saved data.`, false);
+ updateInterface();
+ } else {
+ sendStyledMessage('Error', 'Track not found in saved data.', false);
+ }
+}
+
+ // Announces a track with formatted message including image/color/description based on flags
+if (command === 'announce') {
+ const idOrName = args.join(' ').trim();
+ const track = findInternalTrack(idOrName);
+
+ if (!track) {
+ sendStyledMessage('Warning', 'Track not found.');
+ return;
+ }
+
+ const actual = findLiveTrack(track.id);
+ if (!actual) {
+ sendStyledMessage('Warning', 'Track ID found but not playable: ' + track.title);
+ return;
+ }
+
+ const flags = getTrackFlags(track);
+
+ const value = (track.image || '').trim();
+ const isHexColor = /^#(?:[0-9a-fA-F]{3}){1,2}$/.test(value);
+ const isNamedColor = /^[a-zA-Z]+$/.test(value);
+ const isImageURL = /^https?:\/\/.+/.test(value);
+
+ // Convert hex to luminance to determine brightness
+ const isDarkHex = (hex) => {
+ let r, g, b;
+ hex = hex.replace('#', '');
+ if (hex.length === 3) {
+ r = parseInt(hex[0] + hex[0], 16);
+ g = parseInt(hex[1] + hex[1], 16);
+ b = parseInt(hex[2] + hex[2], 16);
+ } else {
+ r = parseInt(hex.substr(0, 2), 16);
+ g = parseInt(hex.substr(2, 2), 16);
+ b = parseInt(hex.substr(4, 2), 16);
+ }
+ const luminance = 0.2126*r + 0.7152*g + 0.0722*b;
+ return luminance < 128;
+ };
+
+ // Guess named color brightness (simple hardcoded list for safety)
+ const darkNamedColors = ['black', 'navy', 'purple', 'maroon', 'darkgreen', 'teal', 'indigo', 'midnightblue', 'darkblue', 'darkslategray'];
+ const isDarkNamed = darkNamedColors.includes(value.toLowerCase());
+
+ let imageHtml = '';
+ let titleHtml = `${esc(track.title)}
`;
+
+ if (value && (isHexColor || isNamedColor)) {
+ const isDark = isHexColor ? isDarkHex(value) : isDarkNamed;
+ const textColor = isDark ? '#fff' : '#111';
+ imageHtml = `${esc(track.title)}
`;
+ titleHtml = ''; // Suppress normal title line
+ } else if (isImageURL) {
+ imageHtml = `
`;
+ }
+
+ let cleanDesc = track.description || '';
+ if (flags.includeDesc) {
+ cleanDesc = cleanDesc.replace(/\s*!a(nnounce)?\b/gi, '');
+ cleanDesc = cleanDesc.replace(/\s*!d(esc)?\b/gi, '');
+ }
+
+ const descHtml = flags.includeDesc
+ ? `${renderFormattedText(cleanDesc.trim())}
`
+ : '';
+
+ const messageHtml = `${imageHtml}${titleHtml}${descHtml}`;
+ sendStyledMessage('Now Playing', messageHtml, true);
+}
+
+
+
+
+
+ // Switches view mode between albums and playlists
+ if(command === 'view')
+ {
+ const mode = args[0];
+ if(['albums', 'playlists'].includes(mode))
+ {
+ data.settings.viewMode = mode;
+ updateInterface();
+ }
+ }
+
+
+
+if (command === 'volume' && args.length === 2) {
+ const trackId = args[0];
+ const sliderPercent = parseInt(args[1], 10);
+ const t = findLiveTrack(trackId);
+
+ if (t && !isNaN(sliderPercent) && sliderPercent >= 0 && sliderPercent <= 100) {
+ const volume = sliderPercentToStoredVolume(sliderPercent);
+ t.set('volume', volume);
+ updateInterface();
+ }
+ return;
+}
+
+
+
+
+ // Sets view to show only currently playing tracks
+ if(command === 'view' && args[0] === 'nowplaying')
+ {
+ data.settings.nowPlayingOnly = true;
+ updateInterface();
+ }
+
+
+ // Resets view to show all tracks
+ if(command === 'view' && args[0] === 'all')
+ {
+ data.settings.nowPlayingOnly = false;
+ updateInterface();
+ }
+
+ // Changes selected album in album view, given URL encoded album name
+if(command === 'jump' && args[0] === 'album')
+{
+ const encodedName = args.slice(1).join(' ').trim();
+ const name = decodeURIComponent(encodedName);
+
+ if(name in data.albums)
+ {
+ data.settings.viewMode = 'albums';
+ data.settings.selectedAlbum = name;
+ updateInterface();
+ }
+ else
+ {
+ sendStyledMessage(`Album not found: ${name}`);
+ }
+}
+
+ // Changes selected playlist in playlist view, given URL encoded playlist name
+ if(command === 'jump-playlist')
+ {
+ const name = decodeURIComponent(args.join(' ')
+ .trim());
+
+ if(!(name in data.playlists))
+ {
+ sendStyledMessage(`Playlist not found: ${name}`);
+ return;
+ }
+
+ data.settings.viewMode = 'playlists';
+ data.settings.selectedPlaylist = name;
+ data.settings.nowPlayingOnly = false;
+ updateInterface();
+ }
+
+ // Sorts albums alphabetically and updates the album order
+if (command === 'sort-albums') {
+ const sorted = Object.keys(data.albums).sort((a, b) => a.toLowerCase().localeCompare(b.toLowerCase()));
+ data.albumSortOrder = sorted;
+ sendStyledMessage('Albums Sorted', 'Album list has been sorted alphabetically.');
+ updateInterface();
+}
+
+ // Sorts tracks alphabetically and updates track order
+if (command === 'sort-tracks') {
+ const sorted = Object.values(data.tracks)
+ .map(t => t.title)
+ .sort((a, b) => a.toLowerCase().localeCompare(b.toLowerCase()));
+ data.trackSortOrder = sorted;
+ sendStyledMessage('Tracks Sorted', 'Track database has been sorted alphabetically.');
+ updateInterface();
+}
+
+
+ // Edits a field (image, description, albums) of a specified track
+if(command === 'edit')
+{
+ const idOrName = args.shift();
+ const field = args.shift();
+ const value = args.join(' ').trim();
+ const track = findTrackByIdOrName(idOrName);
+ if(!track)
+ {
+ sendStyledMessage(`Track not found: ${idOrName}`);
+ return;
+ }
+
+ if(field === 'image')
+ {
+ const isHexColor = /^#(?:[0-9a-fA-F]{3}){1,2}$/.test(value);
+ const isNamedColor = cssNamedColors.has(value.toLowerCase());
+
+ if(value === '') {
+ track.image = ''; // Clear image
+ }
+ else if(isHexColor || isNamedColor || value.length)
+ {
+ track.image = value;
+ }
+ else
+ {
+ sendStyledMessage(`Invalid input: must be a valid image URL or color code (hex or named).`);
+ return;
+ }
+ }
+ else if(field === 'description')
+ {
+ track.description = value;
+ }
+ else if(field === 'albums')
+ {
+ const [action, ...rest] = value.split(' ');
+ let target = decodeURIComponent(rest.join(' ').trim());
+
+ if(action === 'add')
+ {
+ if(target === 'New Album')
+ {
+ const player = getObj('player', msg.playerid);
+ const playerName = player ? player.get('displayname') : 'GM';
+ const safeTrackId = track.id.replace(/[^A-Za-z0-9\-_]/g, '');
+
+ sendStyledMessage(`[Click here to create a new album and assign this track](!jb add-album-and-assign ${safeTrackId} ?{Enter new album name})`, false);
+ return;
+ }
+
+ if(!track.albums.includes(target))
+ {
+ track.albums.push(target);
+ }
+ }
+ else if(action === 'remove')
+ {
+ track.albums = track.albums.filter(a => a !== target);
+ }
+ }
+
+ updateInterface();
+}
+
+
+
+ // Adds a new album to the album list and selects it
+ if(command === 'add' && args[0] === 'album')
+ {
+ const albumName = args.slice(1)
+ .join(' ')
+ .trim();
+ if(albumName)
+ {
+data.albums[albumName] = true;
+if (!Array.isArray(data.albumSortOrder)) data.albumSortOrder = [];
+if (!data.albumSortOrder.includes(albumName)) data.albumSortOrder.push(albumName);
+data.settings.selectedAlbum = albumName;
+updateInterface();
+ }
+ }
+
+ // Adds a new album and assigns the specified track to it
+ if(command === 'add-album-and-assign')
+ {
+ const trackId = args.shift();
+ const albumName = args.join(' ')
+ .trim();
+
+ if(!trackId || !albumName)
+ {
+ sendStyledMessage('Missing track ID or album name.', false);
+
+
+
+
+ return;
+ }
+
+
+ const track = data.tracks[trackId];
+ if(!track)
+ {
+ sendStyledMessage('Track not found.', false);
+ return;
+ }
+
+ // If "New Album" is selected, create it only if it doesn't already exist
+if (!data.albums[albumName]) {
+ data.albums[albumName] = true;
+ if (!Array.isArray(data.albumSortOrder)) data.albumSortOrder = [];
+ if (!data.albumSortOrder.includes(albumName)) data.albumSortOrder.push(albumName);
+}
+
+
+ if(!track.albums.includes(albumName))
+ {
+ track.albums.push(albumName);
+ }
+
+ updateInterface();
+ }
+
+ // Removes an album and cleans up all tracks that reference it
+ if(command === 'remove-album')
+ {
+ const name = args.join(' ')
+ .trim();
+ if(name in data.albums)
+ {
+ delete data.albums[name];
+ if (Array.isArray(data.albumSortOrder)) {
+ data.albumSortOrder = data.albumSortOrder.filter(n => n !== name);
+}
+
+
+ // Remove the album from any tracks that had it
+ Object.values(data.tracks)
+ .forEach(track =>
+ {
+ if(track.albums.includes(name))
+ {
+ track.albums = track.albums.filter(a => a !== name);
+ }
+ });
+
+ // Reset selection if the deleted album was selected
+ if(data.settings.selectedAlbum === name)
+ {
+ const remaining = Object.keys(data.albums);
+ data.settings.selectedAlbum = remaining.length ? remaining[0] : '';
+ }
+
+ updateInterface();
+ sendStyledMessage(`Album "${name}" has been removed.`, false);
+ }
+ else
+ {
+ sendStyledMessage(`Album "${name}" not found.`, false);
+ }
+ }
+
+ // Renames an album and updates all references to it in tracks and sorting
+ if(command === 'rename-album')
+ {
+ const knownAlbums = Object.keys(data.albums)
+ .sort((a, b) => b.length - a.length); // Longest match first
+ const joinedArgs = args.join(' ')
+ .trim();
+
+ // Try to find which known album name this starts with
+ let oldName = null;
+ let newName = null;
+
+ for(let album of knownAlbums)
+ {
+ if(joinedArgs.startsWith(album))
+ {
+ oldName = album;
+ newName = joinedArgs.slice(album.length)
+ .trim();
+ break;
+ }
+ }
+
+ if(!oldName || !newName)
+ {
+ sendStyledMessage(`Could not determine album names. Got: ${joinedArgs}`, false);
+ return;
+ }
+
+ if(!data.albums[oldName])
+ {
+ sendStyledMessage(`Album "${oldName}" not found.`, false);
+ return;
+ }
+
+ if(data.albums[newName])
+ {
+ sendStyledMessage('Rename Failed', `An album named "${newName}" already exists.`, false);
+ return;
+ }
+
+ // Rename in album list
+ data.albums[newName] = true;
+ delete data.albums[oldName];
+ if (!Array.isArray(data.albumSortOrder)) data.albumSortOrder = [];
+data.albumSortOrder = data.albumSortOrder.map(n => n === oldName ? newName : n);
+
+
+ // Update all tracks that had the old album name
+ Object.values(data.tracks)
+ .forEach(track =>
+ {
+ if(track.albums?.includes(oldName))
+ {
+ track.albums = track.albums.map(name => name === oldName ? newName : name);
+ }
+ });
+
+ // Switch view to the renamed album
+ data.view = {
+ mode: 'album',
+ name: newName
+ };
+
+ updateInterface();
+ }
+
+ // Finds tracks by a search term, marking matches into a special 'Found' or 'Duplicates' album
+if (command === 'find') {
+ const rawSearchTerm = args.join(' ').trim();
+
+ if (!rawSearchTerm) {
+ sendStyledMessage('Find Tracks', 'You must provide a search term.', false);
+ return;
+ }
+
+ // Remove previous "Found" or "Duplicates" albums
+ ['Found', 'Duplicates'].forEach(name => {
+ if (name in data.albums) {
+ delete data.albums[name];
+ Object.values(data.tracks).forEach(track => {
+ if (track.albums && track.albums.includes(name)) {
+ track.albums = track.albums.filter(a => a !== name);
+ }
+ });
+ }
+ });
+
+ if (rawSearchTerm.toLowerCase() === 'd') {
+ // Special case: Find tracks with duplicate names
+ const nameMap = {};
+ Object.values(data.tracks).forEach(track => {
+ const title = track.title?.toLowerCase().trim();
+ if (!title) return;
+ if (!nameMap[title]) nameMap[title] = [];
+ nameMap[title].push(track);
+ });
+
+ const duplicates = Object.values(nameMap)
+ .filter(list => list.length > 1)
+ .flat();
+
+ if (duplicates.length === 0) {
+ sendStyledMessage('Find Duplicates', 'No duplicate track titles found.', false);
+ return;
+ }
+
+ data.albums['Duplicates'] = true;
+
+ duplicates.forEach(track => {
+ if (!track.albums.includes('Duplicates')) {
+ track.albums.push('Duplicates');
+ }
+ });
+
+ data.settings.viewMode = 'albums';
+ data.settings.selectedAlbum = 'Duplicates';
+
+ // Sort tracklist by title (case-insensitive)
+ data.trackOrder = duplicates
+ .slice()
+ .sort((a, b) => a.title.toLowerCase().localeCompare(b.title.toLowerCase()))
+ .map(track => track.id);
+
+ updateInterface();
+ sendStyledMessage('Find Duplicates', `Found ${duplicates.length} duplicate track${duplicates.length !== 1 ? 's' : ''}.`, false);
+ return;
+ }
+
+ // Normal search mode
+ data.albums['Found'] = true;
+
+ let matches;
+ let isRegex = rawSearchTerm.startsWith('/') && rawSearchTerm.lastIndexOf('/') > 0;
+
+ if (isRegex) {
+ try {
+ const lastSlash = rawSearchTerm.lastIndexOf('/');
+ const pattern = rawSearchTerm.slice(1, lastSlash);
+ const flags = rawSearchTerm.slice(lastSlash + 1);
+ const regex = new RegExp(pattern, flags);
+
+ matches = Object.values(data.tracks).filter(track => {
+ const title = track.title || '';
+ const desc = track.description || '';
+ return regex.test(title) || regex.test(desc);
+ });
+ } catch (e) {
+ sendStyledMessage('Find Tracks', `Invalid regular expression: ${esc(rawSearchTerm)}`, false);
+ return;
+ }
+ } else {
+ const term = rawSearchTerm.toLowerCase();
+ matches = Object.values(data.tracks).filter(track => {
+ const title = track.title?.toLowerCase() || '';
+ const desc = track.description?.toLowerCase() || '';
+ return title.includes(term) || desc.includes(term);
+ });
+ }
+
+ matches.forEach(track => {
+ if (!track.albums.includes('Found')) {
+ track.albums.push('Found');
+ }
+ });
+
+ if (matches.length === 0) {
+ sendStyledMessage('Find Tracks', `No tracks matched the search: "${esc(rawSearchTerm)}"`, false);
+ return;
+ }
+
+ data.settings.viewMode = 'albums';
+ data.settings.selectedAlbum = 'Found';
+
+ updateInterface();
+}
+
+
+ // Toggles the visibility of the settings pane
+ if(command === 'toggle-settings')
+ {
+ data.settings.settingsExpanded = !data.settings.settingsExpanded;
+ updateInterface();
+ }
+
+
+ // Changes the interface mode between 'light' and 'dark'
+ if(command === 'mode')
+ {
+ const theme = args[0]?.toLowerCase();
+ if(theme === 'light' || theme === 'dark')
+ {
+ data.settings.mode = theme;
+ updateInterface();
+ }
+ else
+ {
+ sendStyledMessage('Unknown Mode', `Mode "${theme}" is not recognized. Must be *light* or *dark*`, false);
+ }
+ }
+
+
+ // Selects an album or playlist, updating the current view
+ if(command === 'select')
+ {
+ const type = args.shift();
+ let name = args.join(' ')
+ .trim();
+ name = decodeURIComponent(name);
+
+ // Reset the "Now Playing Only" view
+ data.settings.nowPlayingOnly = false;
+
+ if(type === 'album' && (name in data.albums))
+ {
+ data.settings.selectedAlbum = name;
+ }
+ if(type === 'playlist')
+ {
+ if(!(name in data.playlists))
+ {
+ data.playlists[name] = [];
+ }
+ data.settings.selectedPlaylist = name;
+ }
+
+ updateInterface();
+ }
+ });
+
+ syncTracks();
+ updateInterface();
+});
+
+{ try { throw new Error(''); } catch (e) { API_Meta.JukeboxPlus.lineCount = (parseInt(e.stack.split(/\n/)[1].replace(/^.*:(\d+):.*$/, '$1'), 10) - API_Meta.JukeboxPlus.offset); } }
diff --git a/JukeboxPlus/JukeboxPlus.js b/JukeboxPlus/JukeboxPlus.js
index 4e94afb8d..ad915c270 100644
--- a/JukeboxPlus/JukeboxPlus.js
+++ b/JukeboxPlus/JukeboxPlus.js
@@ -14,12 +14,14 @@ API_Meta.JukeboxPlus = {
// Jukebox Plus Plus (Fully Enhanced UI with Album/Playlist Toggle, Track Tagging, and Layout Fixes)
// Changelong
// 1.0.0 Original
-// 1.0.1 Added Min/Max intervals, bug fixes, and simple Director integration.
+// 1.0.1 Added min/Max intervals, bug fixes, and simple Director integration.
// 1.0.2 Internal css restructuring for easier updates, Find function now accepts Regex
+// 1.0.3 Added Shuffle and Shuffle loop modes.
+
on('ready', () =>
{
- const version = '1.0.2'; //version number set here
+ const version = '1.0.3'; //version number set here
log('-=> Jukebox Plus v' + version + ' is loaded. Command !jb creates control handout and provides link. Click that to open.');
const HANDOUT_NAME = 'Jukebox Plus';
@@ -357,10 +359,12 @@ const helpHTML = `
10 tracks
@@ -378,8 +382,10 @@ const helpHTML = `
Play All
Together — Plays all visible tracks simultaneously. Limited to the first five visible.
- In order — Plays all visible tracks one after the other.
- Loop — Plays all visible tracks one after the other, then starts over.
+ Sequential — Plays all visible tracks one after the other.
+ ↻ — Plays all visible tracks one after the other, then starts over.
+ Shuffle — Plays all visible tracks in a random order, once through.
+ ↻ — Plays all visible tracks in a random order, reshuffling and looping after each full playthrough.
Mix — Plays all looping tracks continuously, and all other tracks at random intervals. Use to create a custom soundscape. Stopped by StopAll
@@ -1204,28 +1210,45 @@ const trackList = getVisibleTrackList().map(buildTrackRow).join('');