Generating zip file...
', status);
try {
const zipOptions = {
type: 'blob',
compression: compression ? 'DEFLATE' : 'STORE',
compressionOptions: {
level: compression
}
};
Player.tools.threadDownloadBlob = await zip.generateAsync(zipOptions, metadata => {
status && (zipProgress.textContent = `Generating zip file (${metadata.percent.toFixed(2)}%)...`);
});
// Update the display and prompt to download.
status && _.element('Complete!', status);
Player.tools.saveThreadDownload();
} catch (err) {
console.error('[4chan sounds player] Failed to generate zip', err);
status && (zipProgress.textContent = 'Failed to generate zip file!');
}
Player.tools._downloading = null;
Player.tools.resetDownloadButtons();
},
saveThreadDownload() {
const threadNum = Thread || '-';
const a = _.element(``);
a.click();
URL.revokeObjectURL(a.href);
},
clearDownloadBlob() {
delete Player.tools.threadDownloadBlob;
Player.tools.resetDownloadButtons();
}
};
/***/ }),
/***/ "./src/components/tools/index.js":
/*!***************************************!*\
!*** ./src/components/tools/index.js ***!
\***************************************/
/***/ ((module, __unused_webpack_exports, __webpack_require__) => {
/* provided dependency */ var _ = __webpack_require__(/*! ./src/_ */ "./src/_.js");
const createTool = __webpack_require__(/*! ./create */ "./src/components/tools/create.js");
const downloadTool = __webpack_require__(/*! ./download */ "./src/components/tools/download.js");
module.exports = {
template: __webpack_require__(/*! ./templates/tools.tpl */ "./src/components/tools/templates/tools.tpl"),
...createTool,
...downloadTool,
initialize() {
createTool.initialize();
downloadTool.initialize();
},
render() {
_.elementHTML(Player.$(`.${ns}-tools`).innerHTML, Player.tools.template());
createTool.afterRender();
downloadTool.afterRender();
},
toggle() {
if (Player.config.viewStyle === 'tools') {
Player.playlist.restore();
} else {
Player.display.setViewStyle('tools');
}
},
/**
* Encode the decoded input.
*/
handleDecoded(e) {
Player.$(`.${ns}-encoded-input`).value = encodeURIComponent(e.currentTarget.value);
},
/**
* Decode the encoded input.
*/
handleEncoded(e) {
Player.$(`.${ns}-decoded-input`).value = decodeURIComponent(e.currentTarget.value);
}
};
/***/ }),
/***/ "./src/components/user-template/buttons.js":
/*!*************************************************!*\
!*** ./src/components/user-template/buttons.js ***!
\*************************************************/
/***/ ((module, __unused_webpack_exports, __webpack_require__) => {
/* provided dependency */ var Icons = __webpack_require__(/*! ./src/icons */ "./src/icons.js");
/* provided dependency */ var _ = __webpack_require__(/*! ./src/_ */ "./src/_.js");
const { postIdPrefix } = __webpack_require__(/*! ../../selectors */ "./src/selectors.js");
module.exports = [
{
property: 'repeat',
tplName: 'repeat',
action: 'playlist.toggleRepeat',
actionMods: '.prevent',
values: {
all: { attrs: [ 'title="Repeat All"' ], icon: Icons.arrowRepeat },
one: { attrs: [ 'title="Repeat One"' ], icon: Icons.arrowClockwise },
none: { attrs: [ 'title="No Repeat"' ], class: 'muted', icon: Icons.arrowRepeat }
}
},
{
property: 'shuffle',
tplName: 'shuffle',
action: 'playlist.toggleShuffle',
actionMods: '.prevent',
values: {
true: { attrs: [ 'title="Shuffled"' ], icon: Icons.shuffle },
false: { attrs: [ 'title="Ordered"' ], class: 'muted', icon: Icons.shuffle }
}
},
{
property: 'viewStyle',
tplName: 'playlist',
action: 'playlist.toggleView',
values: {
default: { attrs: [ 'title="Player"' ], class: 'muted', icon: () => (Player.playlist._lastView === 'playlist' ? Icons.arrowsExpand : Icons.arrowsCollapse) },
playlist: { attrs: [ 'title="Hide Playlist"' ], icon: Icons.arrowsExpand },
image: { attrs: [ 'title="Show Playlist"' ], icon: Icons.arrowsCollapse }
}
},
{
property: 'hoverImages',
tplName: 'hover-images',
action: 'playlist.toggleHoverImages',
values: {
true: { attrs: [ 'title="Hover Images Enabled"' ], icon: Icons.image },
false: { attrs: [ 'title="Hover Images Disabled"' ], class: 'muted', icon: Icons.image }
}
},
{
tplName: 'add',
action: 'playlist.selectLocalFiles',
actionMods: '.prevent',
icon: Icons.plus,
attrs: [ 'title="Add local files"' ]
},
{
tplName: 'reload',
action: 'posts.refresh',
actionMods: '.prevent',
icon: Icons.reboot,
attrs: [ 'title="Reload the playlist"' ]
},
{
property: 'viewStyle',
tplName: 'settings',
action: 'settings.toggle()',
actionMods: '.prevent',
icon: Icons.gear,
attrs: [ 'title="Settings"' ],
values: {
default: { class: 'muted' },
settings: { }
}
},
{
property: 'viewStyle',
tplName: 'threads',
action: 'threads.toggle',
actionMods: '.prevent',
icon: Icons.search,
attrs: [ 'title="Threads"' ],
values: {
default: { class: 'muted' },
threads: { }
}
},
{
property: 'viewStyle',
tplName: 'tools',
action: 'tools.toggle',
actionMods: '.prevent',
icon: Icons.tools,
attrs: [ 'title="Tools"' ],
values: {
default: { class: 'muted' },
tools: { }
}
},
{
tplName: 'close',
action: 'hide',
actionMods: '.prevent',
icon: Icons.close,
attrs: [ 'title="Hide the player"' ]
},
{
tplName: 'playing',
requireSound: true,
action: 'playlist.scrollToPlaying("center")',
actionMods: '.prevent',
icon: Icons.musicNoteList,
attrs: [ 'title="Scroll the playlist to the currently playing sound."' ]
},
{
tplName: 'post',
requireSound: true,
icon: Icons.chatRightQuote,
showIf: data => data.sound.post,
attrs: data => [
`href=${'#' + postIdPrefix + data.sound.post}`,
'title="Jump to the post for the current sound"'
]
},
{
tplName: 'image',
requireSound: true,
icon: Icons.image,
attrs: data => [
`href=${data.sound.image}`,
'title="Open the image in a new tab"',
'target="_blank"'
]
},
{
tplName: 'sound',
requireSound: true,
icon: Icons.soundwave,
attrs: data => [
`href=${data.sound.src}`,
'title="Open the sound in a new tab"',
'target="_blank"'
]
},
{
tplName: /dl-(image|sound)/,
requireSound: true,
action: data => {
const src = data.sound[data.tplNameMatch[1] === 'image' ? 'image' : 'src'];
const name = data.sound[data.tplNameMatch[1] === 'image' ? 'filename' : 'name'] || '';
return `tools.download("${_.escAttr(src, true)}", "${_.escAttr(name, true)}")`;
},
actionMods: '.prevent',
icon: data => data.tplNameMatch[1] === 'image'
? Icons.fileEarmarkImage
: Icons.fileEarmarkMusic,
attrs: data => [
`title="${data.tplNameMatch[1] === 'image' ? 'Download the image with the original filename' : 'Download the sound'}"`
]
},
{
tplName: /filter-(image|sound)/,
requireSound: true,
action: data => `playlist.addFilter("${data.tplNameMatch[1] === 'image' ? data.sound.imageMD5 : data.sound.src.replace(/^(https?:)?\/\//, '')}")`,
actionMods: '.prevent',
icon: Icons.filter,
showIf: data => data.tplNameMatch[1] === 'sound' || data.sound.imageMD5,
attrs: data => [
`title="Add the ${data.tplNameMatch[1] === 'image' ? 'image MD5' : 'sound URL'} to the filters."`,
]
},
{
tplName: 'remove',
requireSound: true,
action: data => `remove("${data.sound.id}")`,
icon: Icons.trash,
attrs: data => [
'title="Filter the image."',
`data-id="${data.sound.id}"`
]
},
{
tplName: 'menu',
requireSound: true,
class: `${ns}-item-menu-button`,
action: data => `playlist.handleItemMenu($event, "${data.sound.id}")`,
actionMods: '.prevent.stop',
icon: Icons.chevronDown
},
{
tplName: 'view-menu',
action: 'display.showMenu($event.currentTarget, "views")',
actionMods: '.prevent.stop',
icon: Icons.chevronDown,
attrs: [ 'title="Switch View"' ]
},
{
tplName: 'theme-menu',
action: 'display.showMenu($event.currentTarget, "themes")',
actionMods: '.prevent.stop',
icon: Icons.layoutTextWindow,
attrs: [ 'title="Switch Theme"' ]
},
{
tplName: 'untz',
action: 'display.untz',
icon: Icons.speaker,
attrs: [ 'title="UNTZ"' ]
}
];
/***/ }),
/***/ "./src/components/user-template/index.js":
/*!***********************************************!*\
!*** ./src/components/user-template/index.js ***!
\***********************************************/
/***/ ((module, __unused_webpack_exports, __webpack_require__) => {
/* provided dependency */ var _ = __webpack_require__(/*! ./src/_ */ "./src/_.js");
const buttons = __webpack_require__(/*! ./buttons */ "./src/components/user-template/buttons.js");
// Regex for replacements
const playingRE = /p: ?{([^}]*)}/g;
const hoverRE = /h: ?{([^}]*)}/g;
// Create a regex to find buttons/links, ignore matches if the button/link name is itself a regex.
const tplNames = buttons.map(conf => `${conf.tplName.source && conf.tplName.source.replace(/\(/g, '(?:') || conf.tplName}`);
const buttonRE = new RegExp(`(${tplNames.join('|')})-(?:button|link)(?:\\:"([^"]+?)")?`, 'g');
const soundTitleRE = /sound-title/g;
const soundTitleMarqueeRE = /sound-title-marquee/g;
const soundIndexRE = /sound-index/g;
const soundCountRE = /sound-count/g;
const soundPropRE = /sound-(src|id|name|post|imageOrThumb|image|thumb|filename|imageMD5)(-esc)?/g;
const soundFilterCountRE = /filtered-count/g;
const configRE = /\$config\[([^\]]+)\]/g;
// Hold information on which config values components templates depend on.
const componentDeps = [ ];
module.exports = {
buttons,
initialize() {
Player.on('config', Player.userTemplate._handleConfig);
Player.on('playsound', () => Player.userTemplate._handleEvent('playsound'));
[ 'add', 'remove', 'order', 'show', 'hide', 'stop' ].forEach(evt => {
Player.on(evt, Player.userTemplate._handleEvent.bind(null, evt));
});
},
/**
* Build a user template.
*/
build(data) {
const outerClass = data.outerClass || '';
const name = data.sound && data.sound.title || data.defaultName;
let _data = { ...data };
const _confFuncOrText = v => (typeof v === 'function' ? v(_data) : v);
// Apply common template replacements, unless they are opted out.
let html = data.template.replace(configRE, (...args) => _.get(Player.config, args[1]));
!data.ignoreDisplayBlocks && (html = html
.replace(playingRE, Player.playing && Player.playing === data.sound ? '$1' : '')
.replace(hoverRE, `$1`));
!data.ignoreButtons && (html = html.replace(buttonRE, function (full, type, text) {
let buttonConf = Player.userTemplate._findButtonConf(type);
_data.tplNameMatch = buttonConf.tplNameMatch;
if (buttonConf.requireSound && !data.sound || buttonConf.showIf && !buttonConf.showIf(_data)) {
return '';
}
// If the button config has sub values then extend the base config with the selected sub value.
// Which value to use is taken from the `property` in the base config of the player config.
// This gives us different state displays.
if (buttonConf.values) {
let topConf = buttonConf;
const valConf = buttonConf.values[_.get(Player.config, buttonConf.property)] || buttonConf.values[Object.keys(buttonConf.values)[0]];
buttonConf = { ...topConf, ...valConf };
}
const attrs = [ ...(_confFuncOrText(buttonConf.attrs) || []) ];
attrs.some(attr => attr.startsWith('href')) || attrs.push('href="javascript:;"');
(buttonConf.class || outerClass) && attrs.push(`class="${buttonConf.class || ''} ${outerClass || ''}"`);
buttonConf.action && attrs.push(`@click${buttonConf.actionMods || ''}='${_confFuncOrText(buttonConf.action)}'`);
// Replace spaces with non breaking spaces in user text to prevent collapsing.
return `${text && text.replace(/ /g, 'Â ') || _confFuncOrText(buttonConf.icon) || _confFuncOrText(buttonConf.text)}`;
}));
!data.ignoreSoundName && (html = html
.replace(soundTitleMarqueeRE, name ? `${name}
` : '')
.replace(soundTitleRE, name ? `${name}
` : ''));
!data.ignoreSoundProperties && (html = html
.replace(soundPropRE, (...args) => data.sound ? (args[2] ? _.escAttr(data.sound[args[1]], true) : data.sound[args[1]]) : '')
.replace(soundIndexRE, data.sound ? Player.sounds.indexOf(data.sound) + 1 : 0)
.replace(soundCountRE, Player.sounds.length)
.replace(soundFilterCountRE, Player.filteredSounds.length));
!data.ignoreVersion && (html = html.replace(/%v/g, "3.5.0"));
// Apply any specific replacements
if (data.replacements) {
for (let k of Object.keys(data.replacements)) {
html = html.replace(new RegExp(k, 'g'), data.replacements[k]);
}
}
return html;
},
/**
* Sets up a components to render when the template or values within it are changed.
*/
maintain(component, property, alwaysRenderConfigs = [], alwaysRenderEvents = []) {
componentDeps.push({
component,
property,
...Player.userTemplate.findDependencies(property, null),
alwaysRenderConfigs,
alwaysRenderEvents
});
},
/**
* Find all the config dependent values in a template.
*/
findDependencies(property, template) {
template || (template = _.get(Player.config, property));
// Figure out what events should trigger a render.
const events = [];
// add/remove should render templates showing the count.
// playsound/stop should render templates either showing properties of the playing sound or dependent on something playing.
// order should render templates showing a sounds index.
const hasCount = soundCountRE.test(template);
const hasSoundProp = soundTitleRE.test(template) || soundPropRE.test(template);
const hasIndex = soundIndexRE.test(template);
const hasPlaying = playingRE.test(template);
const hasFilterCount = soundFilterCountRE.test(template);
hasCount && events.push('add', 'remove');
// The row template handles this itself to avoid a full playlist render.
property !== 'rowTemplate' && (hasSoundProp || hasIndex || hasPlaying) && events.push('playsound', 'stop');
hasIndex && events.push('order');
hasFilterCount && events.push('filters-applied');
// Find which buttons the template includes that are dependent on config values.
const config = [];
let match;
while ((match = buttonRE.exec(template)) !== null) {
// If user text is given then the display doesn't change.
if (!match[2]) {
let buttonConf = Player.userTemplate._findButtonConf(match[1]);
if (buttonConf.property) {
config.push(buttonConf.property);
}
}
}
// Find config references.
while ((match = configRE.exec(template)) !== null) {
config.push(match[1]);
}
return { events, config };
},
/**
* When a config value is changed check if any component dependencies are affected.
*/
_handleConfig(property, value) {
// Check if a template for a components was updated.
componentDeps.forEach(depInfo => {
if (depInfo.property === property) {
Object.assign(depInfo, Player.userTemplate.findDependencies(property, value));
depInfo.component.render();
}
});
// Check if any components are dependent on the updated property.
componentDeps.forEach(depInfo => {
if (depInfo.alwaysRenderConfigs.includes(property) || depInfo.config.includes(property)) {
depInfo.component.render();
}
});
},
/**
* When a player event is triggered check if any component dependencies are affected.
*/
_handleEvent(type) {
// Check if any components are dependent on the updated property.
componentDeps.forEach(depInfo => {
if (depInfo.alwaysRenderEvents.includes(type) || depInfo.events.includes(type)) {
depInfo.component.render();
}
});
},
_findButtonConf: type => {
let tplNameMatch;
let buttonConf = buttons.find(conf => {
if (conf.tplName === type) {
return tplNameMatch = [ type ];
}
return tplNameMatch = conf.tplName.test && type.match(conf.tplName);
});
return buttonConf && { ...buttonConf, tplNameMatch };
}
};
/***/ }),
/***/ "./src/config/display.js":
/*!*******************************!*\
!*** ./src/config/display.js ***!
\*******************************/
/***/ ((module) => {
module.exports = [
{
property: 'autoshow',
default: true,
title: 'Autoshow',
description: 'Automatically show the player when the thread contains sounds.',
displayGroup: 'Display'
},
{
property: 'pauseOnHide',
default: true,
title: 'Pause On Hide',
description: 'Pause the player when it\'s hidden.',
displayGroup: 'Display',
allowInTheme: true
},
{
property: 'showUpdatedNotification',
default: true,
title: 'Show Update Notifications',
description: 'Show notifications when the player is successfully updated.',
displayGroup: 'Display'
},
{
property: 'hoverImages',
title: 'Hover Images',
default: false,
allowInTheme: true
},
{
title: 'Controls',
displayGroup: 'Display',
allowInTheme: true,
settings: [
{
property: 'preventControlWrapping',
title: 'Prevent Wrapping',
description: 'Hide controls to prevent wrapping when the player is too small',
default: true
},
{
property: 'controlsHideOrder',
title: 'Hide Order',
description: 'Order controls are hidden in to prevent wrapping. '
+ 'Available controls are '
+ 'previous' + '
next' + '
seek-bar' + '
time' + '
duration' + '
volume' + '
volume-button' + '
volume-bar' + 'and
fullscreen.', default: [ 'fullscreen', 'duration', 'volume-bar', 'seek-bar', 'time', 'previous' ], displayMethod: 'textarea', inlineTextarea: true, format: v => v.join('\n'), parse: v => v.split(/\s+/) } ] }, { title: 'Minimised Display', description: 'Optional displays for when the player is minimised.', displayGroup: 'Display', allowInTheme: true, settings: [ { property: 'pip', title: 'Thumbnail', description: 'Display a fixed thumbnail of the playing sound in the bottom right of the thread.', default: true }, { property: 'maxPIPWidth', title: 'Max Width', description: 'Maximum width for the thumbnail.', default: '150px', updateCSSVars: true }, { property: 'chanXControls', title: '4chan X Header Controls', description: 'Show playback controls in the 4chan X header. The display can be customised in Settings>Theme.', displayMethod: isChanX || null, default: 'closed', options: { always: 'Always', closed: 'Only with the player closed', never: 'Never' } } ] }, { title: 'Thread', displayGroup: 'Display', allowInTheme: true, settings: [ { property: 'autoScrollThread', description: 'Automatically scroll the thread to posts as sounds play.', title: 'Auto Scroll', default: false }, { property: 'limitPostWidths', description: 'Limit the width of posts so they aren\'t hidden under the player.', title: 'Limit Post Widths', default: true }, { property: 'minPostWidth', title: 'Minimum Width', default: '50%' } ] }, { property: 'threadsViewStyle', title: 'Threads View', description: 'How threads in the threads view are listed.', settings: [ { title: 'Display', default: 'table', options: { table: 'Table', board: 'Board' } } ] }, { title: 'Colors', displayGroup: 'Display', property: 'colors', updateCSSVars: true, allowInTheme: true, class: `${ns}-colorpicker-input`, attrs: '@focusout.stop.prevent="colorpicker._updatePreview" @click="colorpicker.create"', displayMethod: ({ value, attrs }) => `
The form data is a JSON representation of the data sent with the upload, with the file being indicated as "$file". ' + 'The form data and headers allow for any other information to be sent, such as a user token.' + '
A response path or match can optionally be provided to get a link to the uploaded file from the response. ' + 'Use "Response Path" for JSON responses to set where a link or filename can be found in the response. ' + 'For all other responses "Response Match" takes a regular expression (without slashes) that is applied to the result, with the first capture group being the link or filename. ' + 'File URL format can be set if you only have part of the link, such as the filename. The response, or response path/match result, will be inserted in place of %s.', mix: true, default: { catbox: { default: true, url: 'https://catbox.moe/user/api.php', data: { reqtype: 'fileupload', fileToUpload: '$file', userhash: null }, filenameLength: 29 }, pomf: { url: 'https://pomf.cat/upload.php', data: { 'files[]': '$file' }, responsePath: 'files.0.url', soundUrl: 'a.pomf.cat/%s', filenameLength: 23 }, zz: { url: 'https://zz.ht/api/upload', responsePath: 'files.0.url', data: { 'files[]': '$file' }, headers: { token: null }, filenameLength: 19 }, lewd: { url: 'https://lewd.se/upload', data: { file: '$file' }, headers: { token: null, shortUrl: true }, responsePath: 'data.link', filenameLength: 30 } } } ]; /***/ }), /***/ "./src/config/index.js": /*!*****************************!*\ !*** ./src/config/index.js ***! \*****************************/ /***/ ((module, __unused_webpack_exports, __webpack_require__) => { module.exports = [ // Order the groups appear in. ...__webpack_require__(/*! ./display */ "./src/config/display.js"), ...__webpack_require__(/*! ./playback */ "./src/config/playback.js"), ...__webpack_require__(/*! ./filter */ "./src/config/filter.js"), ...__webpack_require__(/*! ./keybinds */ "./src/config/keybinds.js"), ...__webpack_require__(/*! ./theme */ "./src/config/theme.js"), ...__webpack_require__(/*! ./hosts */ "./src/config/hosts.js"), { property: 'viewStyle', default: 'playlist' }, { property: 'showPlaylistSearch', default: true }, { property: 'imageHeight', default: 125 }, // These are for availability in templates { property: 'offsetTop', default: '0' }, { property: 'offsetBottom', default: '0' } ]; /***/ }), /***/ "./src/config/keybinds.js": /*!********************************!*\ !*** ./src/config/keybinds.js ***! \********************************/ /***/ ((module) => { const hasMediaSession = 'mediaSession' in navigator; const keybindOpts = { displayGroup: 'Keybinds', format: 'hotkeys.stringifyKey', parse: 'hotkeys.parseKey', attrs: '@keydown="settings.handleKeyChange"', property: 'hotkey_bindings', allowInTheme: true }; module.exports = [ { title: 'Keybinds', displayGroup: 'Keybinds', settings: [ { property: 'hotkeys', default: 'open', title: 'Enabled', options: { always: 'Always', open: 'Only with the player open', never: 'Never' } }, { property: 'hardwareMediaKeys', title: 'Hardware Media Keys', displayGroup: 'Keybinds', description: 'Enable playback control via hardware media keys.' + (!hasMediaSession ? ' Your browser does not support this feature.' : ''), default: hasMediaSession, attrs: !hasMediaSession && 'disabled' } ] }, { title: 'Playback', themeFieldTitle: 'Playback Keybinds', ...keybindOpts, settings: [ { property: 'hotkey_bindings.playPause', title: 'Play/Pause', keyHandler: 'togglePlay', ignoreRepeat: true, default: { key: ' ' } }, { property: 'hotkey_bindings.previous', title: 'Previous', keyHandler: () => Player.previous({ force: true }), ignoreRepeat: true, default: { key: 'arrowleft' } }, { property: 'hotkey_bindings.next', title: 'Next', keyHandler: () => Player.next({ force: true }), ignoreRepeat: true, default: { key: 'arrowright' } }, { property: 'hotkey_bindings.previousGroup', title: 'Previous Group', keyHandler: () => Player.previous({ force: true, group: true }), ignoreRepeat: true, default: { shiftKey: true, key: 'arrowleft' } }, { property: 'hotkey_bindings.nextGroup', title: 'Next Group', keyHandler: () => Player.next({ force: true, group: true }), ignoreRepeat: true, default: { shiftKey: true, key: 'arrowright' } }, { property: 'hotkey_bindings.volumeUp', title: 'Volume Up', keyHandler: 'actions.volumeUp', default: { shiftKey: true, key: 'arrowup' } }, { property: 'hotkey_bindings.volumeDown', title: 'Volume Down', keyHandler: 'actions.volumeDown', default: { shiftKey: true, key: 'arrowdown' } }, { property: 'hotkey_bindings.shuffle', title: 'Shuffle', keyHandler: 'playlist.toggleShuffle', default: { key: '' } }, { property: 'hotkey_bindings.repeat', title: 'Toggle Repeat', keyHandler: 'playlist.toggleRepeat', default: { key: '' } } ] }, { title: 'Display', themeFieldTitle: 'Display Keybinds', ...keybindOpts, settings: [ { property: 'hotkey_bindings.closePlayer', title: 'Close', keyHandler: 'display.close', default: { key: '' } }, { property: 'hotkey_bindings.togglePlayer', title: 'Show/Hide', keyHandler: 'display.toggle', default: { key: 'h' } }, { property: 'hotkey_bindings.toggleFullscreen', title: 'Toggle Fullscreen', keyHandler: 'display.toggleFullScreen', default: { key: '' }, allowFocusedInput: true }, { property: 'hotkey_bindings.togglePlaylist', title: 'Toggle Playlist', keyHandler: 'playlist.toggleView', default: { key: '' } }, { property: 'hotkey_bindings.toggleSearch', title: 'Toggle Playlist Search', keyHandler: () => Player.set('showPlaylistSearch', !Player.config.showPlaylistSearch), default: { key: '' }, allowFocusedInput: true }, { property: 'hotkey_bindings.scrollToPlaying', title: 'Jump To Playing', keyHandler: () => Player.playlist.scrollToPlaying(), default: { key: '' } }, { property: 'hotkey_bindings.toggleHoverImages', title: 'Toggle Hover Images', keyHandler: 'playlist.toggleHoverImages', default: { key: '' } }, { property: 'hotkey_bindings.toggleAutoScroll', title: 'Toggle Thread Scroll', keyHandler: () => Player.set('autoScrollThread', !Player.config.autoScrollThread), default: { key: '' } } ] }, { title: 'Theme', themeFieldTitle: 'Theme Keybinds', ...keybindOpts, settings: [ { property: 'hotkey_bindings.nextTheme', title: 'Next Theme', keyHandler: 'theme.next', default: { key: '' } }, { property: 'hotkey_bindings.previousTheme', title: 'Previous Theme', keyHandler: 'theme.previous', default: { key: '' } }, { property: 'hotkey_bindings.switchTheme', title: 'Select Theme', keyHandler: 'theme.handleSwitch', default: [ ], displayMethod: 'theme.themeKeybindsTemplate', parse: 'theme.parseSwitch', format: null } ] } ]; /***/ }), /***/ "./src/config/playback.js": /*!********************************!*\ !*** ./src/config/playback.js ***! \********************************/ /***/ ((module) => { module.exports = [ { property: 'shuffle', title: 'Shuffle', displayGroup: 'Playback', default: false }, { property: 'repeat', title: 'Repeat', displayGroup: 'Playback', default: 'all', options: { all: 'All', one: 'One', none: 'None' } }, { property: 'preventSleep', title: 'Prevent Sleep', displayGroup: 'Playback', description: 'Prevent sleeping while audio is playing. This only works when the browser and tab are in the foreground.', default: true }, { property: 'autoplayNext', title: 'Autoplay Next', displayGroup: 'Playback', description: 'Automatically play the next sound when the current one finishes.', default: true }, { property: 'restartSeconds', title: 'Restart After', displayGroup: 'Playback', description: 'How long into a track until selecting previous restarts the track instead. Set to 0 to disable.', default: 3, parse: v => +v >= 0 && +v < Infinity ? +v : 0 }, { title: 'Inline Player', displayGroup: 'Playback', settings: [ { property: 'playExpandedImages', title: 'Expanded Image', description: 'Play audio when sound images are expanded.', default: true, dependentRender: [ 'expandedControls' ] }, { property: 'expandedControls', title: 'Expanded Controls', description: 'Show playback controls for expanded images.', default: true, attrs: () => !Player.config.playExpandedImages ? 'disabled' : '' }, { property: 'expandedLoopMaster', title: 'Master Source', default: 'sound', description: 'Which media source to play in full for audio and video of different durations.', options: { sound: 'Audio', video: 'Video', // longest: 'Longest' } }, { property: 'expandedAllowFiltered', title: 'Allow Filtered', default: true, description: 'Allow sounds that have been filtered to be played inline. ' + 'Sounds from unknown hosts will not be played regardless of this setting.', }, { property: 'expandedRepeat', title: 'Repeat', default: 'all', description: 'How to repeat expanded images with multiple sounds.', options: { all: 'All', one: 'One', none: 'None' } }, { property: 'playHoveredImages', title: 'Hover Image', description: 'Play audio when sound hover images are shown. This applies to hover images displayed by the native extention or 4chan X.', default: true } ] } ]; /***/ }), /***/ "./src/config/theme.js": /*!*****************************!*\ !*** ./src/config/theme.js ***! \*****************************/ /***/ ((module, __unused_webpack_exports, __webpack_require__) => { module.exports = [ { property: 'savedThemes', title: 'Saved Themes', actions: [ { title: 'Restore Defaults', handler: 'theme.restoreDefaults', mods: '.prevent' }, { title: 'Save Current', handler: 'theme.showSaveOptions', mods: '.prevent.stop' } ], displayGroup: 'Theme', displayMethod: 'theme.savedThemesTemplate', mix: true, default: __webpack_require__(/*! ../components/theme/themes.js */ "./src/components/theme/themes.js") }, { property: 'savedThemesOrder', default: [ ], }, { property: 'selectedTheme', default: 'Default' }, { property: 'headerTemplate', title: 'Header', actions: [ { title: 'Reset', handler: 'settings.reset("headerTemplate")', mods: '.prevent' } ], default: 'repeat-button shuffle-button hover-images-button playlist-button\nsound-title-marquee\nview-menu-button add-button theme-menu-button close-button', displayGroup: 'Theme', displayMethod: 'textarea', themeField: true }, { property: 'rowTemplate', title: 'Row', actions: [ { title: 'Reset', handler: 'settings.reset("rowTemplate")', mods: '.prevent' } ], default: 'sound-title h:{menu-button}', displayGroup: 'Theme', displayMethod: 'textarea', themeField: true }, { property: 'footerTemplate', title: 'Footer', actions: [ { title: 'Reset', handler: 'settings.reset("footerTemplate")', mods: '.prevent' } ], default: 'playing-button:"sound-index / " sound-count sounds\n' + '\n' + 'p:{\n' + ' post-link\n' + ' Open [ image-link sound-link ]\n' + ' Download [ dl-image-button dl-sound-button ]\n' + '}\n' + `\n`, displayGroup: 'Theme', displayMethod: 'textarea', attrs: 'rows="10"', themeField: true }, { property: 'chanXTemplate', title: '4chan X Header', default: 'p:{\n\tpost-link:"sound-title"\n\tprev-button\n\tplay-button\n\tnext-button\n\tsound-current-time / sound-duration\n}', actions: [ { title: 'Reset', handler: 'settings.reset("chanXTemplate")', mods: '.prevent' } ], displayGroup: 'Theme', displayMethod: 'textarea', attrs: 'rows="10"', themeField: true }, { property: 'customCSS', title: 'Custom CSS', default: '', displayGroup: 'Theme', displayMethod: 'textarea', attrs: 'rows="10"', themeField: true } ]; /***/ }), /***/ "./src/globals.js": /*!************************!*\ !*** ./src/globals.js ***! \************************/ /***/ (() => { /** * Global variables and helpers. */ window.ns = 'fcsp'; window.is4chan = location.hostname.includes('4chan.org') || location.hostname.includes('4channel.org'); window.isChanX = document.documentElement && document.documentElement.classList.contains('fourchan-x'); window.Board = location.pathname.split('/')[1]; window.Thread = (location.href.match(/\/thread\/(\d+)/) || [])[1]; // Determine what type of site this is. Default to FoolFuuka as the most common archiver. window.Site = is4chan ? '4chan' : ((document.head.querySelector('meta[name="generator"]') || {}).content || '').includes('FoolFuuka') ? 'FoolFuuka' : ((document.head.querySelector('meta[name="description"]') || {}).content || '').includes('Fuuka') ? 'Fuuka' : 'FoolFuuka'; class PlayerError extends Error { constructor(msg, type, err) { super(msg); this.reason = msg; this.type = type; this.error = err; } } window.PlayerError = PlayerError; /***/ }), /***/ "./src/icons.js": /*!**********************!*\ !*** ./src/icons.js ***! \**********************/ /***/ ((module, __unused_webpack_exports, __webpack_require__) => { module.exports = { fcSounds: '', arrowClockwise: __webpack_require__(/*! ../node_modules/bootstrap-icons/icons/arrow-clockwise.svg */ "./node_modules/bootstrap-icons/icons/arrow-clockwise.svg").default, arrowsCollapse: __webpack_require__(/*! ../node_modules/bootstrap-icons/icons/arrows-collapse.svg */ "./node_modules/bootstrap-icons/icons/arrows-collapse.svg").default, arrowDown: __webpack_require__(/*! ../node_modules/bootstrap-icons/icons/arrow-down.svg */ "./node_modules/bootstrap-icons/icons/arrow-down.svg").default, arrowsExpand: __webpack_require__(/*! ../node_modules/bootstrap-icons/icons/arrows-expand.svg */ "./node_modules/bootstrap-icons/icons/arrows-expand.svg").default, arrowRepeat: __webpack_require__(/*! ../node_modules/bootstrap-icons/icons/arrow-repeat.svg */ "./node_modules/bootstrap-icons/icons/arrow-repeat.svg").default, arrowUp: __webpack_require__(/*! ../node_modules/bootstrap-icons/icons/arrow-up.svg */ "./node_modules/bootstrap-icons/icons/arrow-up.svg").default, boxArrowInLeft: __webpack_require__(/*! ../node_modules/bootstrap-icons/icons/box-arrow-in-left.svg */ "./node_modules/bootstrap-icons/icons/box-arrow-in-left.svg").default, boxArrowRight: __webpack_require__(/*! ../node_modules/bootstrap-icons/icons/box-arrow-right.svg */ "./node_modules/bootstrap-icons/icons/box-arrow-right.svg").default, chatRightQuote: __webpack_require__(/*! ../node_modules/bootstrap-icons/icons/chat-right-quote.svg */ "./node_modules/bootstrap-icons/icons/chat-right-quote.svg").default, checkSquare: __webpack_require__(/*! ../node_modules/bootstrap-icons/icons/check-square.svg */ "./node_modules/bootstrap-icons/icons/check-square.svg").default, chevronDown: __webpack_require__(/*! ../node_modules/bootstrap-icons/icons/chevron-down.svg */ "./node_modules/bootstrap-icons/icons/chevron-down.svg").default, chevronUp: __webpack_require__(/*! ../node_modules/bootstrap-icons/icons/chevron-up.svg */ "./node_modules/bootstrap-icons/icons/chevron-up.svg").default, close: __webpack_require__(/*! ../node_modules/bootstrap-icons/icons/x.svg */ "./node_modules/bootstrap-icons/icons/x.svg").default.replace(/viewBox="[^"]+"/, 'viewBox="2 2 12 12"'), gear: __webpack_require__(/*! ../node_modules/bootstrap-icons/icons/gear.svg */ "./node_modules/bootstrap-icons/icons/gear.svg").default, fileEarmarkImage: __webpack_require__(/*! ../node_modules/bootstrap-icons/icons/file-earmark-image.svg */ "./node_modules/bootstrap-icons/icons/file-earmark-image.svg").default, fileEarmarkMusic: __webpack_require__(/*! ../node_modules/bootstrap-icons/icons/file-earmark-music.svg */ "./node_modules/bootstrap-icons/icons/file-earmark-music.svg").default, filter: __webpack_require__(/*! ../node_modules/bootstrap-icons/icons/filter.svg */ "./node_modules/bootstrap-icons/icons/filter.svg").default, fullscreen: __webpack_require__(/*! ../node_modules/bootstrap-icons/icons/fullscreen.svg */ "./node_modules/bootstrap-icons/icons/fullscreen.svg").default, fullscreenExit: __webpack_require__(/*! ../node_modules/bootstrap-icons/icons/fullscreen-exit.svg */ "./node_modules/bootstrap-icons/icons/fullscreen-exit.svg").default, github: __webpack_require__(/*! ../node_modules/bootstrap-icons/icons/github.svg */ "./node_modules/bootstrap-icons/icons/github.svg").default, image: __webpack_require__(/*! ../node_modules/bootstrap-icons/icons/image.svg */ "./node_modules/bootstrap-icons/icons/image.svg").default, infoCircle: __webpack_require__(/*! ../node_modules/bootstrap-icons/icons/info-circle.svg */ "./node_modules/bootstrap-icons/icons/info-circle.svg").default, layoutTextWindow: __webpack_require__(/*! ../node_modules/bootstrap-icons/icons/layout-text-window.svg */ "./node_modules/bootstrap-icons/icons/layout-text-window.svg").default, link: __webpack_require__(/*! ../node_modules/bootstrap-icons/icons/link-45deg.svg */ "./node_modules/bootstrap-icons/icons/link-45deg.svg").default, musicNoteList: __webpack_require__(/*! ../node_modules/bootstrap-icons/icons/music-note-list.svg */ "./node_modules/bootstrap-icons/icons/music-note-list.svg").default, play: __webpack_require__(/*! ../node_modules/bootstrap-icons/icons/play.svg */ "./node_modules/bootstrap-icons/icons/play.svg").default.replace(/viewBox="[^"]+"/, 'viewBox="2 2 12 12"'), playFill: __webpack_require__(/*! ../node_modules/bootstrap-icons/icons/play-fill.svg */ "./node_modules/bootstrap-icons/icons/play-fill.svg").default.replace(/viewBox="[^"]+"/, 'viewBox="2 2 12 12"'), pause: __webpack_require__(/*! ../node_modules/bootstrap-icons/icons/pause.svg */ "./node_modules/bootstrap-icons/icons/pause.svg").default.replace(/viewBox="[^"]+"/, 'viewBox="2 2 12 12"'), pauseFill: __webpack_require__(/*! ../node_modules/bootstrap-icons/icons/pause-fill.svg */ "./node_modules/bootstrap-icons/icons/pause-fill.svg").default.replace(/viewBox="[^"]+"/, 'viewBox="2 2 12 12"'), plus: __webpack_require__(/*! ../node_modules/bootstrap-icons/icons/plus-circle.svg */ "./node_modules/bootstrap-icons/icons/plus-circle.svg").default, reboot: __webpack_require__(/*! ../node_modules/bootstrap-icons/icons/bootstrap-reboot.svg */ "./node_modules/bootstrap-icons/icons/bootstrap-reboot.svg").default, search: __webpack_require__(/*! ../node_modules/bootstrap-icons/icons/search.svg */ "./node_modules/bootstrap-icons/icons/search.svg").default, shuffle: __webpack_require__(/*! ../node_modules/bootstrap-icons/icons/shuffle.svg */ "./node_modules/bootstrap-icons/icons/shuffle.svg").default, skipEnd: __webpack_require__(/*! ../node_modules/bootstrap-icons/icons/skip-end.svg */ "./node_modules/bootstrap-icons/icons/skip-end.svg").default.replace(/viewBox="[^"]+"/, 'viewBox="2 2 12 12"'), skipEndFill: __webpack_require__(/*! ../node_modules/bootstrap-icons/icons/skip-end-fill.svg */ "./node_modules/bootstrap-icons/icons/skip-end-fill.svg").default.replace(/viewBox="[^"]+"/, 'viewBox="2 2 12 12"'), skipStart: __webpack_require__(/*! ../node_modules/bootstrap-icons/icons/skip-start.svg */ "./node_modules/bootstrap-icons/icons/skip-start.svg").default.replace(/viewBox="[^"]+"/, 'viewBox="2 2 12 12"'), skipStartFill: __webpack_require__(/*! ../node_modules/bootstrap-icons/icons/skip-start-fill.svg */ "./node_modules/bootstrap-icons/icons/skip-start-fill.svg").default.replace(/viewBox="[^"]+"/, 'viewBox="2 2 12 12"'), soundwave: __webpack_require__(/*! ../node_modules/bootstrap-icons/icons/soundwave.svg */ "./node_modules/bootstrap-icons/icons/soundwave.svg").default, speaker: __webpack_require__(/*! ../node_modules/bootstrap-icons/icons/speaker.svg */ "./node_modules/bootstrap-icons/icons/speaker.svg").default, square: __webpack_require__(/*! ../node_modules/bootstrap-icons/icons/square.svg */ "./node_modules/bootstrap-icons/icons/square.svg").default, tools: __webpack_require__(/*! ../node_modules/bootstrap-icons/icons/tools.svg */ "./node_modules/bootstrap-icons/icons/tools.svg").default, trash: __webpack_require__(/*! ../node_modules/bootstrap-icons/icons/trash.svg */ "./node_modules/bootstrap-icons/icons/trash.svg").default, volumeMute: __webpack_require__(/*! ../node_modules/bootstrap-icons/icons/volume-mute.svg */ "./node_modules/bootstrap-icons/icons/volume-mute.svg").default.replace(/viewBox="[^"]+"/, 'viewBox="1 1 14 14"'), volumeMuteFill: __webpack_require__(/*! ../node_modules/bootstrap-icons/icons/volume-mute-fill.svg */ "./node_modules/bootstrap-icons/icons/volume-mute-fill.svg").default.replace(/viewBox="[^"]+"/, 'viewBox="1 1 14 14"'), volumeUp: __webpack_require__(/*! ../node_modules/bootstrap-icons/icons/volume-up.svg */ "./node_modules/bootstrap-icons/icons/volume-up.svg").default.replace(/viewBox="[^"]+"/, 'viewBox="1 1 14 14"'), volumeUpFill: __webpack_require__(/*! ../node_modules/bootstrap-icons/icons/volume-up-fill.svg */ "./node_modules/bootstrap-icons/icons/volume-up-fill.svg").default.replace(/viewBox="[^"]+"/, 'viewBox="1 1 14 14"') }; /***/ }), /***/ "./src/components/controls/templates/controls.tpl": /*!********************************************************!*\ !*** ./src/components/controls/templates/controls.tpl ***! \********************************************************/ /***/ ((module, __unused_webpack_exports, __webpack_require__) => { /* provided dependency */ var Icons = __webpack_require__(/*! ./src/icons */ "./src/icons.js"); module.exports = (data = {}) => `
${data.inline && !data.multiple ? '' : `
`}
${data.inline && !data.multiple ? '' : `
`}
0:00
/ 0:00
})
${Player.controls.template({
audio: Player.audio,
audioId: Player.audio.dataset.id,
actions: Player.controls.actions
})}
${Player.playlist.listTemplate()}
Loading
';
}
const tagsArr = Object.entries(data.tags);
if (!tagsArr.length) {
return 'No data
';
}
return tagsArr.map(([ name, value ]) => `
${name[0].toUpperCase() + name.slice(1)}:
${value}
`).join('');
}
/***/ }),
/***/ "./src/components/settings/templates/colorpicker.tpl":
/*!***********************************************************!*\
!*** ./src/components/settings/templates/colorpicker.tpl ***!
\***********************************************************/
/***/ ((module, __unused_webpack_exports, __webpack_require__) => {
/* provided dependency */ var Icons = __webpack_require__(/*! ./src/icons */ "./src/icons.js");
module.exports = (data = {}) => ``
/***/ }),
/***/ "./src/components/settings/templates/host_input.tpl":
/*!**********************************************************!*\
!*** ./src/components/settings/templates/host_input.tpl ***!
\**********************************************************/
/***/ ((module) => {
module.exports = (data = {}) => Object.entries(Player.config.uploadHosts).map(([ name, host ]) => `
`).join('')
/***/ }),
/***/ "./src/components/settings/templates/inputs/checkbox.tpl":
/*!***************************************************************!*\
!*** ./src/components/settings/templates/inputs/checkbox.tpl ***!
\***************************************************************/
/***/ ((module) => {
module.exports = (data = {}) => `
${data.title}
${data.description ? `${Icons.infoCircle}` : ''}
${!data.actions || !data.actions.length ? '' : `
${data.dismissTextId
? `
${(data.actions || []).map(action => `
${action.title}
`).join(' ')}
`}
${Player.display.ifNotDismissed(
data.dismissTextId,
data.dismissRestoreText,
`
`
: data.text
? data.text
: ''}
${(() => {
// Recusively call for sub settings.
if (data.settings) {
return data.settings.map(subSetting => Player.settings.settingTemplate({
...data,
actions: null,
settings: null,
description: null,
...subSetting,
isSubSetting: true
})).join('')
}
value = _.get(Player.config, data.property, data.default);
attrs = (typeof data.attrs === 'function' ? data.attrs() : data.attrs || '')
+ (data.class ? ` class="${data.class}"` : '')
+ ` data-property="${data.property}"`;
if (data.format) {
value = Player.getHandler(data.format)(value);
}
let type = typeof value;
if (type === 'object') {
value = JSON.stringify(value, null, 4)
}
inputTemplate = typeof data.displayMethod === 'function' && data.displayMethod
|| _.get(Player, data.displayMethod)
|| data.displayMethod && Player.settings.inputTemplates[data.displayMethod]
|| type === 'boolean' && Player.settings.inputTemplates.checkbox
|| type === 'object' && Player.settings.inputTemplates.textarea
|| data.options && Player.settings.inputTemplates.select
|| Player.settings.inputTemplates.input;
return inputTemplate({ value, attrs, setting: data });
})()}
${data.text}
Dismiss
`
)}
${Object.keys(Player.settings.groups).map(name =>
`
${name}
`
).join(' | ')}
${settings.map(Player.settings.settingTemplate).join('')}
`).join('')}`
/***/ }),
/***/ "./src/components/theme/templates/save_theme_menu.tpl":
/*!************************************************************!*\
!*** ./src/components/theme/templates/save_theme_menu.tpl ***!
\************************************************************/
/***/ ((module, __unused_webpack_exports, __webpack_require__) => {
/* provided dependency */ var Icons = __webpack_require__(/*! ./src/icons */ "./src/icons.js");
module.exports = (data = {}) => ``
/***/ }),
/***/ "./src/components/theme/templates/saved_themes.tpl":
/*!*********************************************************!*\
!*** ./src/components/theme/templates/saved_themes.tpl ***!
\*********************************************************/
/***/ ((module, __unused_webpack_exports, __webpack_require__) => {
/* provided dependency */ var Icons = __webpack_require__(/*! ./src/icons */ "./src/icons.js");
module.exports = (data = {}) => `
${Player.config.savedThemesOrder.map((name, i) => `
`).join('')}
`
/***/ }),
/***/ "./src/components/theme/templates/theme_keybinds.tpl":
/*!***********************************************************!*\
!*** ./src/components/theme/templates/theme_keybinds.tpl ***!
\***********************************************************/
/***/ ((module) => {
module.exports = (data = {}) => [ 'Default' ].concat(Player.config.savedThemesOrder).map(name => `
- ${name}
Active Threads
${!Player.threads.loading ? `- Update` : ''}
Loading
Filter
${Player.threads.boardsTemplate(data)}
${!Player.threads.hasParser
? ''
: `
${Player.config.threadsViewStyle !== 'table'
? `Table`
: `Table`}
|
${Player.config.threadsViewStyle !== 'board'
? `Board`
: `Board`}
`
}
${
!Player.threads.hasParser || Player.config.threadsViewStyle === 'table'
? `| Thread | Subject | Replies/Images | Started | Updated |
|---|---|---|---|---|
Complete!
${is4chan ? 'Post - ' : ''} Add - Download ` /***/ }), /***/ "./src/components/tools/templates/create.tpl": /*!***************************************************!*\ !*** ./src/components/tools/templates/create.tpl ***! \***************************************************/ /***/ ((module, __unused_webpack_exports, __webpack_require__) => { /* provided dependency */ var Icons = __webpack_require__(/*! ./src/icons */ "./src/icons.js"); module.exports = (data = {}) => `
Create Sound Image
${Player.display.ifNotDismissed('createSoundDetails', 'Show Help',
`
Select an image and sound to combine as a sound image.
The sound will be uploaded to the selected file host and the url will be added to the image filename.
Multiple sound files, or a comma-separated list of sound URLs, can be given for a single image. If you do have multiple sounds the name will also be a considered comma-separated list.
Dismiss
`)}
Multiple sound files, or a comma-separated list of sound URLs, can be given for a single image. If you do have multiple sounds the name will also be a considered comma-separated list.
Dismiss
Host - Config
${Player.tools.createHostsTemplate()}
Data
${Player.tools._createdImage ? Player.tools.createCompleteTemplate() : ''}
Download All
Download Concurrency
Compression Level
${Icons.infoCircle}
Max Sounds
${Icons.infoCircle}
Clear${Icons.infoCircle}
Encode / Decode URL