Greasy Fork is available in English.
A player designed for 4chan sounds threads.
Fra og med
// ==UserScript==
// @name 4chan sounds player
// @version 3.3.1
// @namespace rccom
// @description A player designed for 4chan sounds threads.
// @author RCC
// @match *://boards.4chan.org/*
// @match *://boards.4channel.org/*
// @match *://desuarchive.org/*
// @match *://arch.b4k.co/*
// @match *://archived.moe/*
// @match *://warosu.org/*
// @grant GM.getValue
// @grant GM.setValue
// @grant GM.xmlHttpRequest
// @grant GM_addValueChangeListener
// @connect 4chan.org
// @connect 4channel.org
// @connect a.4cdn.org
// @connect desu-usergeneratedcontent.xyz
// @connect arch-img.b4k.co
// @connect 4cdn.org
// @connect a.pomf.cat
// @connect pomf.cat
// @connect files.catbox.moe
// @connect catbox.moe
// @connect share.dmca.gripe
// @connect z.zz.ht
// @connect zz.ht
// @connect too.lewd.se
// @connect lewd.se
// @connect *
// @run-at document-start
// @require https://gitcdn.xyz/repo/richtr/NoSleep.js/07fcee254724ab1b79076fbc22f3dd447649a2eb/dist/NoSleep.min.js
// ==/UserScript==
/******/ (function(modules) { // webpackBootstrap
/******/ // The module cache
/******/ var installedModules = {};
/******/
/******/ // The require function
/******/ function __webpack_require__(moduleId) {
/******/
/******/ // Check if module is in cache
/******/ if(installedModules[moduleId]) {
/******/ return installedModules[moduleId].exports;
/******/ }
/******/ // Create a new module (and put it into the cache)
/******/ var module = installedModules[moduleId] = {
/******/ i: moduleId,
/******/ l: false,
/******/ exports: {}
/******/ };
/******/
/******/ // Execute the module function
/******/ modules[moduleId].call(module.exports, module, module.exports, __webpack_require__);
/******/
/******/ // Flag the module as loaded
/******/ module.l = true;
/******/
/******/ // Return the exports of the module
/******/ return module.exports;
/******/ }
/******/
/******/
/******/ // expose the modules object (__webpack_modules__)
/******/ __webpack_require__.m = modules;
/******/
/******/ // expose the module cache
/******/ __webpack_require__.c = installedModules;
/******/
/******/ // define getter function for harmony exports
/******/ __webpack_require__.d = function(exports, name, getter) {
/******/ if(!__webpack_require__.o(exports, name)) {
/******/ Object.defineProperty(exports, name, { enumerable: true, get: getter });
/******/ }
/******/ };
/******/
/******/ // define __esModule on exports
/******/ __webpack_require__.r = function(exports) {
/******/ if(typeof Symbol !== 'undefined' && Symbol.toStringTag) {
/******/ Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
/******/ }
/******/ Object.defineProperty(exports, '__esModule', { value: true });
/******/ };
/******/
/******/ // create a fake namespace object
/******/ // mode & 1: value is a module id, require it
/******/ // mode & 2: merge all properties of value into the ns
/******/ // mode & 4: return value when already ns object
/******/ // mode & 8|1: behave like require
/******/ __webpack_require__.t = function(value, mode) {
/******/ if(mode & 1) value = __webpack_require__(value);
/******/ if(mode & 8) return value;
/******/ if((mode & 4) && typeof value === 'object' && value && value.__esModule) return value;
/******/ var ns = Object.create(null);
/******/ __webpack_require__.r(ns);
/******/ Object.defineProperty(ns, 'default', { enumerable: true, value: value });
/******/ if(mode & 2 && typeof value != 'string') for(var key in value) __webpack_require__.d(ns, key, function(key) { return value[key]; }.bind(null, key));
/******/ return ns;
/******/ };
/******/
/******/ // getDefaultExport function for compatibility with non-harmony modules
/******/ __webpack_require__.n = function(module) {
/******/ var getter = module && module.__esModule ?
/******/ function getDefault() { return module['default']; } :
/******/ function getModuleExports() { return module; };
/******/ __webpack_require__.d(getter, 'a', getter);
/******/ return getter;
/******/ };
/******/
/******/ // Object.prototype.hasOwnProperty.call
/******/ __webpack_require__.o = function(object, property) { return Object.prototype.hasOwnProperty.call(object, property); };
/******/
/******/ // __webpack_public_path__
/******/ __webpack_require__.p = "";
/******/
/******/
/******/ // Load entry module and return exports
/******/ return __webpack_require__(__webpack_require__.s = "./src/main.js");
/******/ })
/************************************************************************/
/******/ ({
/***/ "./node_modules/bootstrap-icons/icons/arrow-clockwise.svg":
/*!****************************************************************!*\
!*** ./node_modules/bootstrap-icons/icons/arrow-clockwise.svg ***!
\****************************************************************/
/*! exports provided: default */
/***/ (function(module, __webpack_exports__, __webpack_require__) {
"use strict";
__webpack_require__.r(__webpack_exports__);
/* harmony default export */ __webpack_exports__["default"] = ("<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" fill=\"currentColor\" class=\"bi bi-arrow-clockwise\" viewBox=\"0 0 16 16\">\n <path fill-rule=\"evenodd\" d=\"M8 3a5 5 0 1 0 4.546 2.914.5.5 0 0 1 .908-.417A6 6 0 1 1 8 2v1z\"/>\n <path d=\"M8 4.466V.534a.25.25 0 0 1 .41-.192l2.36 1.966c.12.1.12.284 0 .384L8.41 4.658A.25.25 0 0 1 8 4.466z\"/>\n</svg>");
/***/ }),
/***/ "./node_modules/bootstrap-icons/icons/arrow-down.svg":
/*!***********************************************************!*\
!*** ./node_modules/bootstrap-icons/icons/arrow-down.svg ***!
\***********************************************************/
/*! exports provided: default */
/***/ (function(module, __webpack_exports__, __webpack_require__) {
"use strict";
__webpack_require__.r(__webpack_exports__);
/* harmony default export */ __webpack_exports__["default"] = ("<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" fill=\"currentColor\" class=\"bi bi-arrow-down\" viewBox=\"0 0 16 16\">\n <path fill-rule=\"evenodd\" d=\"M8 1a.5.5 0 0 1 .5.5v11.793l3.146-3.147a.5.5 0 0 1 .708.708l-4 4a.5.5 0 0 1-.708 0l-4-4a.5.5 0 0 1 .708-.708L7.5 13.293V1.5A.5.5 0 0 1 8 1z\"/>\n</svg>");
/***/ }),
/***/ "./node_modules/bootstrap-icons/icons/arrow-repeat.svg":
/*!*************************************************************!*\
!*** ./node_modules/bootstrap-icons/icons/arrow-repeat.svg ***!
\*************************************************************/
/*! exports provided: default */
/***/ (function(module, __webpack_exports__, __webpack_require__) {
"use strict";
__webpack_require__.r(__webpack_exports__);
/* harmony default export */ __webpack_exports__["default"] = ("<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" fill=\"currentColor\" class=\"bi bi-arrow-repeat\" viewBox=\"0 0 16 16\">\n <path d=\"M11.534 7h3.932a.25.25 0 0 1 .192.41l-1.966 2.36a.25.25 0 0 1-.384 0l-1.966-2.36a.25.25 0 0 1 .192-.41zm-11 2h3.932a.25.25 0 0 0 .192-.41L2.692 6.23a.25.25 0 0 0-.384 0L.342 8.59A.25.25 0 0 0 .534 9z\"/>\n <path fill-rule=\"evenodd\" d=\"M8 3c-1.552 0-2.94.707-3.857 1.818a.5.5 0 1 1-.771-.636A6.002 6.002 0 0 1 13.917 7H12.9A5.002 5.002 0 0 0 8 3zM3.1 9a5.002 5.002 0 0 0 8.757 2.182.5.5 0 1 1 .771.636A6.002 6.002 0 0 1 2.083 9H3.1z\"/>\n</svg>");
/***/ }),
/***/ "./node_modules/bootstrap-icons/icons/arrow-up.svg":
/*!*********************************************************!*\
!*** ./node_modules/bootstrap-icons/icons/arrow-up.svg ***!
\*********************************************************/
/*! exports provided: default */
/***/ (function(module, __webpack_exports__, __webpack_require__) {
"use strict";
__webpack_require__.r(__webpack_exports__);
/* harmony default export */ __webpack_exports__["default"] = ("<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" fill=\"currentColor\" class=\"bi bi-arrow-up\" viewBox=\"0 0 16 16\">\n <path fill-rule=\"evenodd\" d=\"M8 15a.5.5 0 0 0 .5-.5V2.707l3.146 3.147a.5.5 0 0 0 .708-.708l-4-4a.5.5 0 0 0-.708 0l-4 4a.5.5 0 1 0 .708.708L7.5 2.707V14.5a.5.5 0 0 0 .5.5z\"/>\n</svg>");
/***/ }),
/***/ "./node_modules/bootstrap-icons/icons/arrows-collapse.svg":
/*!****************************************************************!*\
!*** ./node_modules/bootstrap-icons/icons/arrows-collapse.svg ***!
\****************************************************************/
/*! exports provided: default */
/***/ (function(module, __webpack_exports__, __webpack_require__) {
"use strict";
__webpack_require__.r(__webpack_exports__);
/* harmony default export */ __webpack_exports__["default"] = ("<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" fill=\"currentColor\" class=\"bi bi-arrows-collapse\" viewBox=\"0 0 16 16\">\n <path fill-rule=\"evenodd\" d=\"M1 8a.5.5 0 0 1 .5-.5h13a.5.5 0 0 1 0 1h-13A.5.5 0 0 1 1 8zm7-8a.5.5 0 0 1 .5.5v3.793l1.146-1.147a.5.5 0 0 1 .708.708l-2 2a.5.5 0 0 1-.708 0l-2-2a.5.5 0 1 1 .708-.708L7.5 4.293V.5A.5.5 0 0 1 8 0zm-.5 11.707l-1.146 1.147a.5.5 0 0 1-.708-.708l2-2a.5.5 0 0 1 .708 0l2 2a.5.5 0 0 1-.708.708L8.5 11.707V15.5a.5.5 0 0 1-1 0v-3.793z\"/>\n</svg>");
/***/ }),
/***/ "./node_modules/bootstrap-icons/icons/arrows-expand.svg":
/*!**************************************************************!*\
!*** ./node_modules/bootstrap-icons/icons/arrows-expand.svg ***!
\**************************************************************/
/*! exports provided: default */
/***/ (function(module, __webpack_exports__, __webpack_require__) {
"use strict";
__webpack_require__.r(__webpack_exports__);
/* harmony default export */ __webpack_exports__["default"] = ("<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" fill=\"currentColor\" class=\"bi bi-arrows-expand\" viewBox=\"0 0 16 16\">\n <path fill-rule=\"evenodd\" d=\"M1 8a.5.5 0 0 1 .5-.5h13a.5.5 0 0 1 0 1h-13A.5.5 0 0 1 1 8zM7.646.146a.5.5 0 0 1 .708 0l2 2a.5.5 0 0 1-.708.708L8.5 1.707V5.5a.5.5 0 0 1-1 0V1.707L6.354 2.854a.5.5 0 1 1-.708-.708l2-2zM8 10a.5.5 0 0 1 .5.5v3.793l1.146-1.147a.5.5 0 0 1 .708.708l-2 2a.5.5 0 0 1-.708 0l-2-2a.5.5 0 0 1 .708-.708L7.5 14.293V10.5A.5.5 0 0 1 8 10z\"/>\n</svg>");
/***/ }),
/***/ "./node_modules/bootstrap-icons/icons/bootstrap-reboot.svg":
/*!*****************************************************************!*\
!*** ./node_modules/bootstrap-icons/icons/bootstrap-reboot.svg ***!
\*****************************************************************/
/*! exports provided: default */
/***/ (function(module, __webpack_exports__, __webpack_require__) {
"use strict";
__webpack_require__.r(__webpack_exports__);
/* harmony default export */ __webpack_exports__["default"] = ("<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" fill=\"currentColor\" class=\"bi bi-bootstrap-reboot\" viewBox=\"0 0 16 16\">\n <path d=\"M1.161 8a6.84 6.84 0 1 0 6.842-6.84.58.58 0 0 1 0-1.16 8 8 0 1 1-6.556 3.412l-.663-.577a.58.58 0 0 1 .227-.997l2.52-.69a.58.58 0 0 1 .728.633l-.332 2.592a.58.58 0 0 1-.956.364l-.643-.56A6.812 6.812 0 0 0 1.16 8z\"/>\n <path d=\"M6.641 11.671V8.843h1.57l1.498 2.828h1.314L9.377 8.665c.897-.3 1.427-1.106 1.427-2.1 0-1.37-.943-2.246-2.456-2.246H5.5v7.352h1.141zm0-3.75V5.277h1.57c.881 0 1.416.499 1.416 1.32 0 .84-.504 1.324-1.386 1.324h-1.6z\"/>\n</svg>");
/***/ }),
/***/ "./node_modules/bootstrap-icons/icons/box-arrow-in-left.svg":
/*!******************************************************************!*\
!*** ./node_modules/bootstrap-icons/icons/box-arrow-in-left.svg ***!
\******************************************************************/
/*! exports provided: default */
/***/ (function(module, __webpack_exports__, __webpack_require__) {
"use strict";
__webpack_require__.r(__webpack_exports__);
/* harmony default export */ __webpack_exports__["default"] = ("<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" fill=\"currentColor\" class=\"bi bi-box-arrow-in-left\" viewBox=\"0 0 16 16\">\n <path fill-rule=\"evenodd\" d=\"M10 3.5a.5.5 0 0 0-.5-.5h-8a.5.5 0 0 0-.5.5v9a.5.5 0 0 0 .5.5h8a.5.5 0 0 0 .5-.5v-2a.5.5 0 0 1 1 0v2A1.5 1.5 0 0 1 9.5 14h-8A1.5 1.5 0 0 1 0 12.5v-9A1.5 1.5 0 0 1 1.5 2h8A1.5 1.5 0 0 1 11 3.5v2a.5.5 0 0 1-1 0v-2z\"/>\n <path fill-rule=\"evenodd\" d=\"M4.146 8.354a.5.5 0 0 1 0-.708l3-3a.5.5 0 1 1 .708.708L5.707 7.5H14.5a.5.5 0 0 1 0 1H5.707l2.147 2.146a.5.5 0 0 1-.708.708l-3-3z\"/>\n</svg>");
/***/ }),
/***/ "./node_modules/bootstrap-icons/icons/box-arrow-right.svg":
/*!****************************************************************!*\
!*** ./node_modules/bootstrap-icons/icons/box-arrow-right.svg ***!
\****************************************************************/
/*! exports provided: default */
/***/ (function(module, __webpack_exports__, __webpack_require__) {
"use strict";
__webpack_require__.r(__webpack_exports__);
/* harmony default export */ __webpack_exports__["default"] = ("<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" fill=\"currentColor\" class=\"bi bi-box-arrow-right\" viewBox=\"0 0 16 16\">\n <path fill-rule=\"evenodd\" d=\"M10 12.5a.5.5 0 0 1-.5.5h-8a.5.5 0 0 1-.5-.5v-9a.5.5 0 0 1 .5-.5h8a.5.5 0 0 1 .5.5v2a.5.5 0 0 0 1 0v-2A1.5 1.5 0 0 0 9.5 2h-8A1.5 1.5 0 0 0 0 3.5v9A1.5 1.5 0 0 0 1.5 14h8a1.5 1.5 0 0 0 1.5-1.5v-2a.5.5 0 0 0-1 0v2z\"/>\n <path fill-rule=\"evenodd\" d=\"M15.854 8.354a.5.5 0 0 0 0-.708l-3-3a.5.5 0 0 0-.708.708L14.293 7.5H5.5a.5.5 0 0 0 0 1h8.793l-2.147 2.146a.5.5 0 0 0 .708.708l3-3z\"/>\n</svg>");
/***/ }),
/***/ "./node_modules/bootstrap-icons/icons/chat-right-quote.svg":
/*!*****************************************************************!*\
!*** ./node_modules/bootstrap-icons/icons/chat-right-quote.svg ***!
\*****************************************************************/
/*! exports provided: default */
/***/ (function(module, __webpack_exports__, __webpack_require__) {
"use strict";
__webpack_require__.r(__webpack_exports__);
/* harmony default export */ __webpack_exports__["default"] = ("<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" fill=\"currentColor\" class=\"bi bi-chat-right-quote\" viewBox=\"0 0 16 16\">\n <path d=\"M2 1a1 1 0 0 0-1 1v8a1 1 0 0 0 1 1h9.586a2 2 0 0 1 1.414.586l2 2V2a1 1 0 0 0-1-1H2zm12-1a2 2 0 0 1 2 2v12.793a.5.5 0 0 1-.854.353l-2.853-2.853a1 1 0 0 0-.707-.293H2a2 2 0 0 1-2-2V2a2 2 0 0 1 2-2h12z\"/>\n <path d=\"M7.066 4.76A1.665 1.665 0 0 0 4 5.668a1.667 1.667 0 0 0 2.561 1.406c-.131.389-.375.804-.777 1.22a.417.417 0 1 0 .6.58c1.486-1.54 1.293-3.214.682-4.112zm4 0A1.665 1.665 0 0 0 8 5.668a1.667 1.667 0 0 0 2.561 1.406c-.131.389-.375.804-.777 1.22a.417.417 0 1 0 .6.58c1.486-1.54 1.293-3.214.682-4.112z\"/>\n</svg>");
/***/ }),
/***/ "./node_modules/bootstrap-icons/icons/check-square.svg":
/*!*************************************************************!*\
!*** ./node_modules/bootstrap-icons/icons/check-square.svg ***!
\*************************************************************/
/*! exports provided: default */
/***/ (function(module, __webpack_exports__, __webpack_require__) {
"use strict";
__webpack_require__.r(__webpack_exports__);
/* harmony default export */ __webpack_exports__["default"] = ("<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" fill=\"currentColor\" class=\"bi bi-check-square\" viewBox=\"0 0 16 16\">\n <path d=\"M14 1a1 1 0 0 1 1 1v12a1 1 0 0 1-1 1H2a1 1 0 0 1-1-1V2a1 1 0 0 1 1-1h12zM2 0a2 2 0 0 0-2 2v12a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V2a2 2 0 0 0-2-2H2z\"/>\n <path d=\"M10.97 4.97a.75.75 0 0 1 1.071 1.05l-3.992 4.99a.75.75 0 0 1-1.08.02L4.324 8.384a.75.75 0 1 1 1.06-1.06l2.094 2.093 3.473-4.425a.235.235 0 0 1 .02-.022z\"/>\n</svg>");
/***/ }),
/***/ "./node_modules/bootstrap-icons/icons/chevron-down.svg":
/*!*************************************************************!*\
!*** ./node_modules/bootstrap-icons/icons/chevron-down.svg ***!
\*************************************************************/
/*! exports provided: default */
/***/ (function(module, __webpack_exports__, __webpack_require__) {
"use strict";
__webpack_require__.r(__webpack_exports__);
/* harmony default export */ __webpack_exports__["default"] = ("<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" fill=\"currentColor\" class=\"bi bi-chevron-down\" viewBox=\"0 0 16 16\">\n <path fill-rule=\"evenodd\" d=\"M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z\"/>\n</svg>");
/***/ }),
/***/ "./node_modules/bootstrap-icons/icons/chevron-up.svg":
/*!***********************************************************!*\
!*** ./node_modules/bootstrap-icons/icons/chevron-up.svg ***!
\***********************************************************/
/*! exports provided: default */
/***/ (function(module, __webpack_exports__, __webpack_require__) {
"use strict";
__webpack_require__.r(__webpack_exports__);
/* harmony default export */ __webpack_exports__["default"] = ("<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" fill=\"currentColor\" class=\"bi bi-chevron-up\" viewBox=\"0 0 16 16\">\n <path fill-rule=\"evenodd\" d=\"M7.646 4.646a.5.5 0 0 1 .708 0l6 6a.5.5 0 0 1-.708.708L8 5.707l-5.646 5.647a.5.5 0 0 1-.708-.708l6-6z\"/>\n</svg>");
/***/ }),
/***/ "./node_modules/bootstrap-icons/icons/file-earmark-image.svg":
/*!*******************************************************************!*\
!*** ./node_modules/bootstrap-icons/icons/file-earmark-image.svg ***!
\*******************************************************************/
/*! exports provided: default */
/***/ (function(module, __webpack_exports__, __webpack_require__) {
"use strict";
__webpack_require__.r(__webpack_exports__);
/* harmony default export */ __webpack_exports__["default"] = ("<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" fill=\"currentColor\" class=\"bi bi-file-earmark-image\" viewBox=\"0 0 16 16\">\n <path d=\"M6.502 7a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3z\"/>\n <path d=\"M14 14a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2V2a2 2 0 0 1 2-2h5.5L14 4.5V14zM4 1a1 1 0 0 0-1 1v10l2.224-2.224a.5.5 0 0 1 .61-.075L8 11l2.157-3.02a.5.5 0 0 1 .76-.063L13 10V4.5h-2A1.5 1.5 0 0 1 9.5 3V1H4z\"/>\n</svg>");
/***/ }),
/***/ "./node_modules/bootstrap-icons/icons/file-earmark-music.svg":
/*!*******************************************************************!*\
!*** ./node_modules/bootstrap-icons/icons/file-earmark-music.svg ***!
\*******************************************************************/
/*! exports provided: default */
/***/ (function(module, __webpack_exports__, __webpack_require__) {
"use strict";
__webpack_require__.r(__webpack_exports__);
/* harmony default export */ __webpack_exports__["default"] = ("<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" fill=\"currentColor\" class=\"bi bi-file-earmark-music\" viewBox=\"0 0 16 16\">\n <path d=\"M11 6.64a1 1 0 0 0-1.243-.97l-1 .25A1 1 0 0 0 8 6.89v4.306A2.572 2.572 0 0 0 7 11c-.5 0-.974.134-1.338.377-.36.24-.662.628-.662 1.123s.301.883.662 1.123c.364.243.839.377 1.338.377.5 0 .974-.134 1.338-.377.36-.24.662-.628.662-1.123V8.89l2-.5V6.64z\"/>\n <path d=\"M14 14V4.5L9.5 0H4a2 2 0 0 0-2 2v12a2 2 0 0 0 2 2h8a2 2 0 0 0 2-2zM9.5 3A1.5 1.5 0 0 0 11 4.5h2V14a1 1 0 0 1-1 1H4a1 1 0 0 1-1-1V2a1 1 0 0 1 1-1h5.5v2z\"/>\n</svg>");
/***/ }),
/***/ "./node_modules/bootstrap-icons/icons/filter.svg":
/*!*******************************************************!*\
!*** ./node_modules/bootstrap-icons/icons/filter.svg ***!
\*******************************************************/
/*! exports provided: default */
/***/ (function(module, __webpack_exports__, __webpack_require__) {
"use strict";
__webpack_require__.r(__webpack_exports__);
/* harmony default export */ __webpack_exports__["default"] = ("<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" fill=\"currentColor\" class=\"bi bi-filter\" viewBox=\"0 0 16 16\">\n <path d=\"M6 10.5a.5.5 0 0 1 .5-.5h3a.5.5 0 0 1 0 1h-3a.5.5 0 0 1-.5-.5zm-2-3a.5.5 0 0 1 .5-.5h7a.5.5 0 0 1 0 1h-7a.5.5 0 0 1-.5-.5zm-2-3a.5.5 0 0 1 .5-.5h11a.5.5 0 0 1 0 1h-11a.5.5 0 0 1-.5-.5z\"/>\n</svg>");
/***/ }),
/***/ "./node_modules/bootstrap-icons/icons/fullscreen-exit.svg":
/*!****************************************************************!*\
!*** ./node_modules/bootstrap-icons/icons/fullscreen-exit.svg ***!
\****************************************************************/
/*! exports provided: default */
/***/ (function(module, __webpack_exports__, __webpack_require__) {
"use strict";
__webpack_require__.r(__webpack_exports__);
/* harmony default export */ __webpack_exports__["default"] = ("<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" fill=\"currentColor\" class=\"bi bi-fullscreen-exit\" viewBox=\"0 0 16 16\">\n <path d=\"M5.5 0a.5.5 0 0 1 .5.5v4A1.5 1.5 0 0 1 4.5 6h-4a.5.5 0 0 1 0-1h4a.5.5 0 0 0 .5-.5v-4a.5.5 0 0 1 .5-.5zm5 0a.5.5 0 0 1 .5.5v4a.5.5 0 0 0 .5.5h4a.5.5 0 0 1 0 1h-4A1.5 1.5 0 0 1 10 4.5v-4a.5.5 0 0 1 .5-.5zM0 10.5a.5.5 0 0 1 .5-.5h4A1.5 1.5 0 0 1 6 11.5v4a.5.5 0 0 1-1 0v-4a.5.5 0 0 0-.5-.5h-4a.5.5 0 0 1-.5-.5zm10 1a1.5 1.5 0 0 1 1.5-1.5h4a.5.5 0 0 1 0 1h-4a.5.5 0 0 0-.5.5v4a.5.5 0 0 1-1 0v-4z\"/>\n</svg>");
/***/ }),
/***/ "./node_modules/bootstrap-icons/icons/fullscreen.svg":
/*!***********************************************************!*\
!*** ./node_modules/bootstrap-icons/icons/fullscreen.svg ***!
\***********************************************************/
/*! exports provided: default */
/***/ (function(module, __webpack_exports__, __webpack_require__) {
"use strict";
__webpack_require__.r(__webpack_exports__);
/* harmony default export */ __webpack_exports__["default"] = ("<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" fill=\"currentColor\" class=\"bi bi-fullscreen\" viewBox=\"0 0 16 16\">\n <path d=\"M1.5 1a.5.5 0 0 0-.5.5v4a.5.5 0 0 1-1 0v-4A1.5 1.5 0 0 1 1.5 0h4a.5.5 0 0 1 0 1h-4zM10 .5a.5.5 0 0 1 .5-.5h4A1.5 1.5 0 0 1 16 1.5v4a.5.5 0 0 1-1 0v-4a.5.5 0 0 0-.5-.5h-4a.5.5 0 0 1-.5-.5zM.5 10a.5.5 0 0 1 .5.5v4a.5.5 0 0 0 .5.5h4a.5.5 0 0 1 0 1h-4A1.5 1.5 0 0 1 0 14.5v-4a.5.5 0 0 1 .5-.5zm15 0a.5.5 0 0 1 .5.5v4a1.5 1.5 0 0 1-1.5 1.5h-4a.5.5 0 0 1 0-1h4a.5.5 0 0 0 .5-.5v-4a.5.5 0 0 1 .5-.5z\"/>\n</svg>");
/***/ }),
/***/ "./node_modules/bootstrap-icons/icons/gear.svg":
/*!*****************************************************!*\
!*** ./node_modules/bootstrap-icons/icons/gear.svg ***!
\*****************************************************/
/*! exports provided: default */
/***/ (function(module, __webpack_exports__, __webpack_require__) {
"use strict";
__webpack_require__.r(__webpack_exports__);
/* harmony default export */ __webpack_exports__["default"] = ("<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" fill=\"currentColor\" class=\"bi bi-gear\" viewBox=\"0 0 16 16\">\n <path d=\"M8 4.754a3.246 3.246 0 1 0 0 6.492 3.246 3.246 0 0 0 0-6.492zM5.754 8a2.246 2.246 0 1 1 4.492 0 2.246 2.246 0 0 1-4.492 0z\"/>\n <path d=\"M9.796 1.343c-.527-1.79-3.065-1.79-3.592 0l-.094.319a.873.873 0 0 1-1.255.52l-.292-.16c-1.64-.892-3.433.902-2.54 2.541l.159.292a.873.873 0 0 1-.52 1.255l-.319.094c-1.79.527-1.79 3.065 0 3.592l.319.094a.873.873 0 0 1 .52 1.255l-.16.292c-.892 1.64.901 3.434 2.541 2.54l.292-.159a.873.873 0 0 1 1.255.52l.094.319c.527 1.79 3.065 1.79 3.592 0l.094-.319a.873.873 0 0 1 1.255-.52l.292.16c1.64.893 3.434-.902 2.54-2.541l-.159-.292a.873.873 0 0 1 .52-1.255l.319-.094c1.79-.527 1.79-3.065 0-3.592l-.319-.094a.873.873 0 0 1-.52-1.255l.16-.292c.893-1.64-.902-3.433-2.541-2.54l-.292.159a.873.873 0 0 1-1.255-.52l-.094-.319zm-2.633.283c.246-.835 1.428-.835 1.674 0l.094.319a1.873 1.873 0 0 0 2.693 1.115l.291-.16c.764-.415 1.6.42 1.184 1.185l-.159.292a1.873 1.873 0 0 0 1.116 2.692l.318.094c.835.246.835 1.428 0 1.674l-.319.094a1.873 1.873 0 0 0-1.115 2.693l.16.291c.415.764-.42 1.6-1.185 1.184l-.291-.159a1.873 1.873 0 0 0-2.693 1.116l-.094.318c-.246.835-1.428.835-1.674 0l-.094-.319a1.873 1.873 0 0 0-2.692-1.115l-.292.16c-.764.415-1.6-.42-1.184-1.185l.159-.291A1.873 1.873 0 0 0 1.945 8.93l-.319-.094c-.835-.246-.835-1.428 0-1.674l.319-.094A1.873 1.873 0 0 0 3.06 4.377l-.16-.292c-.415-.764.42-1.6 1.185-1.184l.292.159a1.873 1.873 0 0 0 2.692-1.115l.094-.319z\"/>\n</svg>");
/***/ }),
/***/ "./node_modules/bootstrap-icons/icons/github.svg":
/*!*******************************************************!*\
!*** ./node_modules/bootstrap-icons/icons/github.svg ***!
\*******************************************************/
/*! exports provided: default */
/***/ (function(module, __webpack_exports__, __webpack_require__) {
"use strict";
__webpack_require__.r(__webpack_exports__);
/* harmony default export */ __webpack_exports__["default"] = ("<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" fill=\"currentColor\" class=\"bi bi-github\" viewBox=\"0 0 16 16\">\n <path d=\"M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.012 8.012 0 0 0 16 8c0-4.42-3.58-8-8-8z\"/>\n</svg>");
/***/ }),
/***/ "./node_modules/bootstrap-icons/icons/image.svg":
/*!******************************************************!*\
!*** ./node_modules/bootstrap-icons/icons/image.svg ***!
\******************************************************/
/*! exports provided: default */
/***/ (function(module, __webpack_exports__, __webpack_require__) {
"use strict";
__webpack_require__.r(__webpack_exports__);
/* harmony default export */ __webpack_exports__["default"] = ("<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" fill=\"currentColor\" class=\"bi bi-image\" viewBox=\"0 0 16 16\">\n <path d=\"M6.002 5.5a1.5 1.5 0 1 1-3 0 1.5 1.5 0 0 1 3 0z\"/>\n <path d=\"M2.002 1a2 2 0 0 0-2 2v10a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V3a2 2 0 0 0-2-2h-12zm12 1a1 1 0 0 1 1 1v6.5l-3.777-1.947a.5.5 0 0 0-.577.093l-3.71 3.71-2.66-1.772a.5.5 0 0 0-.63.062L1.002 12V3a1 1 0 0 1 1-1h12z\"/>\n</svg>");
/***/ }),
/***/ "./node_modules/bootstrap-icons/icons/info-circle.svg":
/*!************************************************************!*\
!*** ./node_modules/bootstrap-icons/icons/info-circle.svg ***!
\************************************************************/
/*! exports provided: default */
/***/ (function(module, __webpack_exports__, __webpack_require__) {
"use strict";
__webpack_require__.r(__webpack_exports__);
/* harmony default export */ __webpack_exports__["default"] = ("<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" fill=\"currentColor\" class=\"bi bi-info-circle\" viewBox=\"0 0 16 16\">\n <path d=\"M8 15A7 7 0 1 1 8 1a7 7 0 0 1 0 14zm0 1A8 8 0 1 0 8 0a8 8 0 0 0 0 16z\"/>\n <path d=\"M8.93 6.588l-2.29.287-.082.38.45.083c.294.07.352.176.288.469l-.738 3.468c-.194.897.105 1.319.808 1.319.545 0 1.178-.252 1.465-.598l.088-.416c-.2.176-.492.246-.686.246-.275 0-.375-.193-.304-.533L8.93 6.588zM9 4.5a1 1 0 1 1-2 0 1 1 0 0 1 2 0z\"/>\n</svg>");
/***/ }),
/***/ "./node_modules/bootstrap-icons/icons/link-45deg.svg":
/*!***********************************************************!*\
!*** ./node_modules/bootstrap-icons/icons/link-45deg.svg ***!
\***********************************************************/
/*! exports provided: default */
/***/ (function(module, __webpack_exports__, __webpack_require__) {
"use strict";
__webpack_require__.r(__webpack_exports__);
/* harmony default export */ __webpack_exports__["default"] = ("<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" fill=\"currentColor\" class=\"bi bi-link-45deg\" viewBox=\"0 0 16 16\">\n <path d=\"M4.715 6.542L3.343 7.914a3 3 0 1 0 4.243 4.243l1.828-1.829A3 3 0 0 0 8.586 5.5L8 6.086a1.001 1.001 0 0 0-.154.199 2 2 0 0 1 .861 3.337L6.88 11.45a2 2 0 1 1-2.83-2.83l.793-.792a4.018 4.018 0 0 1-.128-1.287z\"/>\n <path d=\"M6.586 4.672A3 3 0 0 0 7.414 9.5l.775-.776a2 2 0 0 1-.896-3.346L9.12 3.55a2 2 0 0 1 2.83 2.83l-.793.792c.112.42.155.855.128 1.287l1.372-1.372a3 3 0 0 0-4.243-4.243L6.586 4.672z\"/>\n</svg>");
/***/ }),
/***/ "./node_modules/bootstrap-icons/icons/music-note-list.svg":
/*!****************************************************************!*\
!*** ./node_modules/bootstrap-icons/icons/music-note-list.svg ***!
\****************************************************************/
/*! exports provided: default */
/***/ (function(module, __webpack_exports__, __webpack_require__) {
"use strict";
__webpack_require__.r(__webpack_exports__);
/* harmony default export */ __webpack_exports__["default"] = ("<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" fill=\"currentColor\" class=\"bi bi-music-note-list\" viewBox=\"0 0 16 16\">\n <path d=\"M12 13c0 1.105-1.12 2-2.5 2S7 14.105 7 13s1.12-2 2.5-2 2.5.895 2.5 2z\"/>\n <path fill-rule=\"evenodd\" d=\"M12 3v10h-1V3h1z\"/>\n <path d=\"M11 2.82a1 1 0 0 1 .804-.98l3-.6A1 1 0 0 1 16 2.22V4l-5 1V2.82z\"/>\n <path fill-rule=\"evenodd\" d=\"M0 11.5a.5.5 0 0 1 .5-.5H4a.5.5 0 0 1 0 1H.5a.5.5 0 0 1-.5-.5zm0-4A.5.5 0 0 1 .5 7H8a.5.5 0 0 1 0 1H.5a.5.5 0 0 1-.5-.5zm0-4A.5.5 0 0 1 .5 3H8a.5.5 0 0 1 0 1H.5a.5.5 0 0 1-.5-.5z\"/>\n</svg>");
/***/ }),
/***/ "./node_modules/bootstrap-icons/icons/pause-fill.svg":
/*!***********************************************************!*\
!*** ./node_modules/bootstrap-icons/icons/pause-fill.svg ***!
\***********************************************************/
/*! exports provided: default */
/***/ (function(module, __webpack_exports__, __webpack_require__) {
"use strict";
__webpack_require__.r(__webpack_exports__);
/* harmony default export */ __webpack_exports__["default"] = ("<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" fill=\"currentColor\" class=\"bi bi-pause-fill\" viewBox=\"0 0 16 16\">\n <path d=\"M5.5 3.5A1.5 1.5 0 0 1 7 5v6a1.5 1.5 0 0 1-3 0V5a1.5 1.5 0 0 1 1.5-1.5zm5 0A1.5 1.5 0 0 1 12 5v6a1.5 1.5 0 0 1-3 0V5a1.5 1.5 0 0 1 1.5-1.5z\"/>\n</svg>");
/***/ }),
/***/ "./node_modules/bootstrap-icons/icons/pause.svg":
/*!******************************************************!*\
!*** ./node_modules/bootstrap-icons/icons/pause.svg ***!
\******************************************************/
/*! exports provided: default */
/***/ (function(module, __webpack_exports__, __webpack_require__) {
"use strict";
__webpack_require__.r(__webpack_exports__);
/* harmony default export */ __webpack_exports__["default"] = ("<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" fill=\"currentColor\" class=\"bi bi-pause\" viewBox=\"0 0 16 16\">\n <path d=\"M6 3.5a.5.5 0 0 1 .5.5v8a.5.5 0 0 1-1 0V4a.5.5 0 0 1 .5-.5zm4 0a.5.5 0 0 1 .5.5v8a.5.5 0 0 1-1 0V4a.5.5 0 0 1 .5-.5z\"/>\n</svg>");
/***/ }),
/***/ "./node_modules/bootstrap-icons/icons/play-fill.svg":
/*!**********************************************************!*\
!*** ./node_modules/bootstrap-icons/icons/play-fill.svg ***!
\**********************************************************/
/*! exports provided: default */
/***/ (function(module, __webpack_exports__, __webpack_require__) {
"use strict";
__webpack_require__.r(__webpack_exports__);
/* harmony default export */ __webpack_exports__["default"] = ("<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" fill=\"currentColor\" class=\"bi bi-play-fill\" viewBox=\"0 0 16 16\">\n <path d=\"M11.596 8.697l-6.363 3.692c-.54.313-1.233-.066-1.233-.697V4.308c0-.63.692-1.01 1.233-.696l6.363 3.692a.802.802 0 0 1 0 1.393z\"/>\n</svg>");
/***/ }),
/***/ "./node_modules/bootstrap-icons/icons/play.svg":
/*!*****************************************************!*\
!*** ./node_modules/bootstrap-icons/icons/play.svg ***!
\*****************************************************/
/*! exports provided: default */
/***/ (function(module, __webpack_exports__, __webpack_require__) {
"use strict";
__webpack_require__.r(__webpack_exports__);
/* harmony default export */ __webpack_exports__["default"] = ("<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" fill=\"currentColor\" class=\"bi bi-play\" viewBox=\"0 0 16 16\">\n <path d=\"M10.804 8L5 4.633v6.734L10.804 8zm.792-.696a.802.802 0 0 1 0 1.392l-6.363 3.692C4.713 12.69 4 12.345 4 11.692V4.308c0-.653.713-.998 1.233-.696l6.363 3.692z\"/>\n</svg>");
/***/ }),
/***/ "./node_modules/bootstrap-icons/icons/plus-circle.svg":
/*!************************************************************!*\
!*** ./node_modules/bootstrap-icons/icons/plus-circle.svg ***!
\************************************************************/
/*! exports provided: default */
/***/ (function(module, __webpack_exports__, __webpack_require__) {
"use strict";
__webpack_require__.r(__webpack_exports__);
/* harmony default export */ __webpack_exports__["default"] = ("<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" fill=\"currentColor\" class=\"bi bi-plus-circle\" viewBox=\"0 0 16 16\">\n <path d=\"M8 15A7 7 0 1 1 8 1a7 7 0 0 1 0 14zm0 1A8 8 0 1 0 8 0a8 8 0 0 0 0 16z\"/>\n <path d=\"M8 4a.5.5 0 0 1 .5.5v3h3a.5.5 0 0 1 0 1h-3v3a.5.5 0 0 1-1 0v-3h-3a.5.5 0 0 1 0-1h3v-3A.5.5 0 0 1 8 4z\"/>\n</svg>");
/***/ }),
/***/ "./node_modules/bootstrap-icons/icons/search.svg":
/*!*******************************************************!*\
!*** ./node_modules/bootstrap-icons/icons/search.svg ***!
\*******************************************************/
/*! exports provided: default */
/***/ (function(module, __webpack_exports__, __webpack_require__) {
"use strict";
__webpack_require__.r(__webpack_exports__);
/* harmony default export */ __webpack_exports__["default"] = ("<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" fill=\"currentColor\" class=\"bi bi-search\" viewBox=\"0 0 16 16\">\n <path d=\"M11.742 10.344a6.5 6.5 0 1 0-1.397 1.398h-.001c.03.04.062.078.098.115l3.85 3.85a1 1 0 0 0 1.415-1.414l-3.85-3.85a1.007 1.007 0 0 0-.115-.1zM12 6.5a5.5 5.5 0 1 1-11 0 5.5 5.5 0 0 1 11 0z\"/>\n</svg>");
/***/ }),
/***/ "./node_modules/bootstrap-icons/icons/shuffle.svg":
/*!********************************************************!*\
!*** ./node_modules/bootstrap-icons/icons/shuffle.svg ***!
\********************************************************/
/*! exports provided: default */
/***/ (function(module, __webpack_exports__, __webpack_require__) {
"use strict";
__webpack_require__.r(__webpack_exports__);
/* harmony default export */ __webpack_exports__["default"] = ("<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" fill=\"currentColor\" class=\"bi bi-shuffle\" viewBox=\"0 0 16 16\">\n <path fill-rule=\"evenodd\" d=\"M0 3.5A.5.5 0 0 1 .5 3H1c2.202 0 3.827 1.24 4.874 2.418.49.552.865 1.102 1.126 1.532.26-.43.636-.98 1.126-1.532C9.173 4.24 10.798 3 13 3v1c-1.798 0-3.173 1.01-4.126 2.082A9.624 9.624 0 0 0 7.556 8a9.624 9.624 0 0 0 1.317 1.918C9.828 10.99 11.204 12 13 12v1c-2.202 0-3.827-1.24-4.874-2.418A10.595 10.595 0 0 1 7 9.05c-.26.43-.636.98-1.126 1.532C4.827 11.76 3.202 13 1 13H.5a.5.5 0 0 1 0-1H1c1.798 0 3.173-1.01 4.126-2.082A9.624 9.624 0 0 0 6.444 8a9.624 9.624 0 0 0-1.317-1.918C4.172 5.01 2.796 4 1 4H.5a.5.5 0 0 1-.5-.5z\"/>\n <path d=\"M13 5.466V1.534a.25.25 0 0 1 .41-.192l2.36 1.966c.12.1.12.284 0 .384l-2.36 1.966a.25.25 0 0 1-.41-.192zm0 9v-3.932a.25.25 0 0 1 .41-.192l2.36 1.966c.12.1.12.284 0 .384l-2.36 1.966a.25.25 0 0 1-.41-.192z\"/>\n</svg>");
/***/ }),
/***/ "./node_modules/bootstrap-icons/icons/skip-end-fill.svg":
/*!**************************************************************!*\
!*** ./node_modules/bootstrap-icons/icons/skip-end-fill.svg ***!
\**************************************************************/
/*! exports provided: default */
/***/ (function(module, __webpack_exports__, __webpack_require__) {
"use strict";
__webpack_require__.r(__webpack_exports__);
/* harmony default export */ __webpack_exports__["default"] = ("<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" fill=\"currentColor\" class=\"bi bi-skip-end-fill\" viewBox=\"0 0 16 16\">\n <path d=\"M12.5 4a.5.5 0 0 0-1 0v3.248L5.233 3.612C4.693 3.3 4 3.678 4 4.308v7.384c0 .63.692 1.01 1.233.697L11.5 8.753V12a.5.5 0 0 0 1 0V4z\"/>\n</svg>");
/***/ }),
/***/ "./node_modules/bootstrap-icons/icons/skip-end.svg":
/*!*********************************************************!*\
!*** ./node_modules/bootstrap-icons/icons/skip-end.svg ***!
\*********************************************************/
/*! exports provided: default */
/***/ (function(module, __webpack_exports__, __webpack_require__) {
"use strict";
__webpack_require__.r(__webpack_exports__);
/* harmony default export */ __webpack_exports__["default"] = ("<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" fill=\"currentColor\" class=\"bi bi-skip-end\" viewBox=\"0 0 16 16\">\n <path d=\"M12.5 4a.5.5 0 0 0-1 0v3.248L5.233 3.612C4.713 3.31 4 3.655 4 4.308v7.384c0 .653.713.998 1.233.696L11.5 8.752V12a.5.5 0 0 0 1 0V4zM5 4.633L10.804 8 5 11.367V4.633z\"/>\n</svg>");
/***/ }),
/***/ "./node_modules/bootstrap-icons/icons/skip-start-fill.svg":
/*!****************************************************************!*\
!*** ./node_modules/bootstrap-icons/icons/skip-start-fill.svg ***!
\****************************************************************/
/*! exports provided: default */
/***/ (function(module, __webpack_exports__, __webpack_require__) {
"use strict";
__webpack_require__.r(__webpack_exports__);
/* harmony default export */ __webpack_exports__["default"] = ("<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" fill=\"currentColor\" class=\"bi bi-skip-start-fill\" viewBox=\"0 0 16 16\">\n <path d=\"M4 4a.5.5 0 0 1 1 0v3.248l6.267-3.636c.54-.313 1.232.066 1.232.696v7.384c0 .63-.692 1.01-1.232.697L5 8.753V12a.5.5 0 0 1-1 0V4z\"/>\n</svg>");
/***/ }),
/***/ "./node_modules/bootstrap-icons/icons/skip-start.svg":
/*!***********************************************************!*\
!*** ./node_modules/bootstrap-icons/icons/skip-start.svg ***!
\***********************************************************/
/*! exports provided: default */
/***/ (function(module, __webpack_exports__, __webpack_require__) {
"use strict";
__webpack_require__.r(__webpack_exports__);
/* harmony default export */ __webpack_exports__["default"] = ("<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" fill=\"currentColor\" class=\"bi bi-skip-start\" viewBox=\"0 0 16 16\">\n <path d=\"M4 4a.5.5 0 0 1 1 0v3.248l6.267-3.636c.52-.302 1.233.043 1.233.696v7.384c0 .653-.713.998-1.233.696L5 8.752V12a.5.5 0 0 1-1 0V4zm7.5.633L5.696 8l5.804 3.367V4.633z\"/>\n</svg>");
/***/ }),
/***/ "./node_modules/bootstrap-icons/icons/soundwave.svg":
/*!**********************************************************!*\
!*** ./node_modules/bootstrap-icons/icons/soundwave.svg ***!
\**********************************************************/
/*! exports provided: default */
/***/ (function(module, __webpack_exports__, __webpack_require__) {
"use strict";
__webpack_require__.r(__webpack_exports__);
/* harmony default export */ __webpack_exports__["default"] = ("<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" fill=\"currentColor\" class=\"bi bi-soundwave\" viewBox=\"0 0 16 16\">\n <path fill-rule=\"evenodd\" d=\"M8.5 2a.5.5 0 0 1 .5.5v11a.5.5 0 0 1-1 0v-11a.5.5 0 0 1 .5-.5zm-2 2a.5.5 0 0 1 .5.5v7a.5.5 0 0 1-1 0v-7a.5.5 0 0 1 .5-.5zm4 0a.5.5 0 0 1 .5.5v7a.5.5 0 0 1-1 0v-7a.5.5 0 0 1 .5-.5zm-6 1.5A.5.5 0 0 1 5 6v4a.5.5 0 0 1-1 0V6a.5.5 0 0 1 .5-.5zm8 0a.5.5 0 0 1 .5.5v4a.5.5 0 0 1-1 0V6a.5.5 0 0 1 .5-.5zm-10 1A.5.5 0 0 1 3 7v2a.5.5 0 0 1-1 0V7a.5.5 0 0 1 .5-.5zm12 0a.5.5 0 0 1 .5.5v2a.5.5 0 0 1-1 0V7a.5.5 0 0 1 .5-.5z\"/>\n</svg>");
/***/ }),
/***/ "./node_modules/bootstrap-icons/icons/square.svg":
/*!*******************************************************!*\
!*** ./node_modules/bootstrap-icons/icons/square.svg ***!
\*******************************************************/
/*! exports provided: default */
/***/ (function(module, __webpack_exports__, __webpack_require__) {
"use strict";
__webpack_require__.r(__webpack_exports__);
/* harmony default export */ __webpack_exports__["default"] = ("<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" fill=\"currentColor\" class=\"bi bi-square\" viewBox=\"0 0 16 16\">\n <path d=\"M14 1a1 1 0 0 1 1 1v12a1 1 0 0 1-1 1H2a1 1 0 0 1-1-1V2a1 1 0 0 1 1-1h12zM2 0a2 2 0 0 0-2 2v12a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V2a2 2 0 0 0-2-2H2z\"/>\n</svg>");
/***/ }),
/***/ "./node_modules/bootstrap-icons/icons/tools.svg":
/*!******************************************************!*\
!*** ./node_modules/bootstrap-icons/icons/tools.svg ***!
\******************************************************/
/*! exports provided: default */
/***/ (function(module, __webpack_exports__, __webpack_require__) {
"use strict";
__webpack_require__.r(__webpack_exports__);
/* harmony default export */ __webpack_exports__["default"] = ("<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" fill=\"currentColor\" class=\"bi bi-tools\" viewBox=\"0 0 16 16\">\n <path d=\"M1 0L0 1l2.2 3.081a1 1 0 0 0 .815.419h.07a1 1 0 0 1 .708.293l2.675 2.675-2.617 2.654A3.003 3.003 0 0 0 0 13a3 3 0 1 0 5.878-.851l2.654-2.617.968.968-.305.914a1 1 0 0 0 .242 1.023l3.356 3.356a1 1 0 0 0 1.414 0l1.586-1.586a1 1 0 0 0 0-1.414l-3.356-3.356a1 1 0 0 0-1.023-.242L10.5 9.5l-.96-.96 2.68-2.643A3.005 3.005 0 0 0 16 3c0-.269-.035-.53-.102-.777l-2.14 2.141L12 4l-.364-1.757L13.777.102a3 3 0 0 0-3.675 3.68L7.462 6.46 4.793 3.793a1 1 0 0 1-.293-.707v-.071a1 1 0 0 0-.419-.814L1 0zm9.646 10.646a.5.5 0 0 1 .708 0l3 3a.5.5 0 0 1-.708.708l-3-3a.5.5 0 0 1 0-.708zM3 11l.471.242.529.026.287.445.445.287.026.529L5 13l-.242.471-.026.529-.445.287-.287.445-.529.026L3 15l-.471-.242L2 14.732l-.287-.445L1.268 14l-.026-.529L1 13l.242-.471.026-.529.445-.287.287-.445.529-.026L3 11z\"/>\n</svg>");
/***/ }),
/***/ "./node_modules/bootstrap-icons/icons/trash.svg":
/*!******************************************************!*\
!*** ./node_modules/bootstrap-icons/icons/trash.svg ***!
\******************************************************/
/*! exports provided: default */
/***/ (function(module, __webpack_exports__, __webpack_require__) {
"use strict";
__webpack_require__.r(__webpack_exports__);
/* harmony default export */ __webpack_exports__["default"] = ("<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" fill=\"currentColor\" class=\"bi bi-trash\" viewBox=\"0 0 16 16\">\n <path d=\"M5.5 5.5A.5.5 0 0 1 6 6v6a.5.5 0 0 1-1 0V6a.5.5 0 0 1 .5-.5zm2.5 0a.5.5 0 0 1 .5.5v6a.5.5 0 0 1-1 0V6a.5.5 0 0 1 .5-.5zm3 .5a.5.5 0 0 0-1 0v6a.5.5 0 0 0 1 0V6z\"/>\n <path fill-rule=\"evenodd\" d=\"M14.5 3a1 1 0 0 1-1 1H13v9a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V4h-.5a1 1 0 0 1-1-1V2a1 1 0 0 1 1-1H6a1 1 0 0 1 1-1h2a1 1 0 0 1 1 1h3.5a1 1 0 0 1 1 1v1zM4.118 4L4 4.059V13a1 1 0 0 0 1 1h6a1 1 0 0 0 1-1V4.059L11.882 4H4.118zM2.5 3V2h11v1h-11z\"/>\n</svg>");
/***/ }),
/***/ "./node_modules/bootstrap-icons/icons/volume-mute-fill.svg":
/*!*****************************************************************!*\
!*** ./node_modules/bootstrap-icons/icons/volume-mute-fill.svg ***!
\*****************************************************************/
/*! exports provided: default */
/***/ (function(module, __webpack_exports__, __webpack_require__) {
"use strict";
__webpack_require__.r(__webpack_exports__);
/* harmony default export */ __webpack_exports__["default"] = ("<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" fill=\"currentColor\" class=\"bi bi-volume-mute-fill\" viewBox=\"0 0 16 16\">\n <path d=\"M6.717 3.55A.5.5 0 0 1 7 4v8a.5.5 0 0 1-.812.39L3.825 10.5H1.5A.5.5 0 0 1 1 10V6a.5.5 0 0 1 .5-.5h2.325l2.363-1.89a.5.5 0 0 1 .529-.06zm7.137 2.096a.5.5 0 0 1 0 .708L12.207 8l1.647 1.646a.5.5 0 0 1-.708.708L11.5 8.707l-1.646 1.647a.5.5 0 0 1-.708-.708L10.793 8 9.146 6.354a.5.5 0 1 1 .708-.708L11.5 7.293l1.646-1.647a.5.5 0 0 1 .708 0z\"/>\n</svg>");
/***/ }),
/***/ "./node_modules/bootstrap-icons/icons/volume-mute.svg":
/*!************************************************************!*\
!*** ./node_modules/bootstrap-icons/icons/volume-mute.svg ***!
\************************************************************/
/*! exports provided: default */
/***/ (function(module, __webpack_exports__, __webpack_require__) {
"use strict";
__webpack_require__.r(__webpack_exports__);
/* harmony default export */ __webpack_exports__["default"] = ("<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" fill=\"currentColor\" class=\"bi bi-volume-mute\" viewBox=\"0 0 16 16\">\n <path d=\"M6.717 3.55A.5.5 0 0 1 7 4v8a.5.5 0 0 1-.812.39L3.825 10.5H1.5A.5.5 0 0 1 1 10V6a.5.5 0 0 1 .5-.5h2.325l2.363-1.89a.5.5 0 0 1 .529-.06zM6 5.04L4.312 6.39A.5.5 0 0 1 4 6.5H2v3h2a.5.5 0 0 1 .312.11L6 10.96V5.04zm7.854.606a.5.5 0 0 1 0 .708L12.207 8l1.647 1.646a.5.5 0 0 1-.708.708L11.5 8.707l-1.646 1.647a.5.5 0 0 1-.708-.708L10.793 8 9.146 6.354a.5.5 0 1 1 .708-.708L11.5 7.293l1.646-1.647a.5.5 0 0 1 .708 0z\"/>\n</svg>");
/***/ }),
/***/ "./node_modules/bootstrap-icons/icons/volume-up-fill.svg":
/*!***************************************************************!*\
!*** ./node_modules/bootstrap-icons/icons/volume-up-fill.svg ***!
\***************************************************************/
/*! exports provided: default */
/***/ (function(module, __webpack_exports__, __webpack_require__) {
"use strict";
__webpack_require__.r(__webpack_exports__);
/* harmony default export */ __webpack_exports__["default"] = ("<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" fill=\"currentColor\" class=\"bi bi-volume-up-fill\" viewBox=\"0 0 16 16\">\n <path d=\"M11.536 14.01A8.473 8.473 0 0 0 14.026 8a8.473 8.473 0 0 0-2.49-6.01l-.708.707A7.476 7.476 0 0 1 13.025 8c0 2.071-.84 3.946-2.197 5.303l.708.707z\"/>\n <path d=\"M10.121 12.596A6.48 6.48 0 0 0 12.025 8a6.48 6.48 0 0 0-1.904-4.596l-.707.707A5.483 5.483 0 0 1 11.025 8a5.483 5.483 0 0 1-1.61 3.89l.706.706z\"/>\n <path d=\"M8.707 11.182A4.486 4.486 0 0 0 10.025 8a4.486 4.486 0 0 0-1.318-3.182L8 5.525A3.489 3.489 0 0 1 9.025 8 3.49 3.49 0 0 1 8 10.475l.707.707zM6.717 3.55A.5.5 0 0 1 7 4v8a.5.5 0 0 1-.812.39L3.825 10.5H1.5A.5.5 0 0 1 1 10V6a.5.5 0 0 1 .5-.5h2.325l2.363-1.89a.5.5 0 0 1 .529-.06z\"/>\n</svg>");
/***/ }),
/***/ "./node_modules/bootstrap-icons/icons/volume-up.svg":
/*!**********************************************************!*\
!*** ./node_modules/bootstrap-icons/icons/volume-up.svg ***!
\**********************************************************/
/*! exports provided: default */
/***/ (function(module, __webpack_exports__, __webpack_require__) {
"use strict";
__webpack_require__.r(__webpack_exports__);
/* harmony default export */ __webpack_exports__["default"] = ("<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" fill=\"currentColor\" class=\"bi bi-volume-up\" viewBox=\"0 0 16 16\">\n <path d=\"M11.536 14.01A8.473 8.473 0 0 0 14.026 8a8.473 8.473 0 0 0-2.49-6.01l-.708.707A7.476 7.476 0 0 1 13.025 8c0 2.071-.84 3.946-2.197 5.303l.708.707z\"/>\n <path d=\"M10.121 12.596A6.48 6.48 0 0 0 12.025 8a6.48 6.48 0 0 0-1.904-4.596l-.707.707A5.483 5.483 0 0 1 11.025 8a5.483 5.483 0 0 1-1.61 3.89l.706.706z\"/>\n <path d=\"M10.025 8a4.486 4.486 0 0 1-1.318 3.182L8 10.475A3.489 3.489 0 0 0 9.025 8c0-.966-.392-1.841-1.025-2.475l.707-.707A4.486 4.486 0 0 1 10.025 8zM7 4a.5.5 0 0 0-.812-.39L3.825 5.5H1.5A.5.5 0 0 0 1 6v4a.5.5 0 0 0 .5.5h2.325l2.363 1.89A.5.5 0 0 0 7 12V4zM4.312 6.39L6 5.04v5.92L4.312 9.61A.5.5 0 0 0 4 9.5H2v-3h2a.5.5 0 0 0 .312-.11z\"/>\n</svg>");
/***/ }),
/***/ "./node_modules/bootstrap-icons/icons/x.svg":
/*!**************************************************!*\
!*** ./node_modules/bootstrap-icons/icons/x.svg ***!
\**************************************************/
/*! exports provided: default */
/***/ (function(module, __webpack_exports__, __webpack_require__) {
"use strict";
__webpack_require__.r(__webpack_exports__);
/* harmony default export */ __webpack_exports__["default"] = ("<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" fill=\"currentColor\" class=\"bi bi-x\" viewBox=\"0 0 16 16\">\n <path d=\"M4.646 4.646a.5.5 0 0 1 .708 0L8 7.293l2.646-2.647a.5.5 0 0 1 .708.708L8.707 8l2.647 2.646a.5.5 0 0 1-.708.708L8 8.707l-2.646 2.647a.5.5 0 0 1-.708-.708L7.293 8 4.646 5.354a.5.5 0 0 1 0-.708z\"/>\n</svg>");
/***/ }),
/***/ "./src/_.js":
/*!******************!*\
!*** ./src/_.js ***!
\******************/
/*! no static exports found */
/***/ (function(module, exports) {
const _ = module.exports;
module.exports.set = function set(object, path, value) {
const props = path.split('.');
const lastProp = props.pop();
const setOn = props.reduce((obj, k) => obj[k] || (obj[k] = {}), object);
setOn && (setOn[lastProp] = value);
return object;
};
module.exports.get = function get(object, path, dflt) {
if (typeof path !== 'string') {
return dflt;
}
const props = path.split('.');
const lastProp = props.pop();
const parent = props.reduce((obj, k) => obj && obj[k], object);
return parent && Object.prototype.hasOwnProperty.call(parent, lastProp)
? parent[lastProp]
: dflt;
};
/**
* Check two values are equal. Arrays/Objects are deep checked.
*/
module.exports.isEqual = function isEqual(a, b, strict = true) {
if (typeof a !== typeof b) {
return false;
}
if (Array.isArray(a, b)) {
return a === b || a.length === b.length && a.every((_a, i) => isEqual(_a, b[i]));
}
if (a && b && typeof a === 'object' && a !== b) {
const allKeys = Object.keys(a);
allKeys.push(...Object.keys(b).filter(k => !allKeys.includes(k)));
return allKeys.every(key => _.isEqual(a[key], b[key]));
}
// eslint-disable-next-line eqeqeq
return strict ? a === b : a == b;
};
module.exports.toDuration = function toDuration(number) {
number = Math.floor(number || 0);
let [ seconds, minutes, hours ] = _duration(0, number);
seconds < 10 && (seconds = '0' + seconds);
return (hours ? hours + ':' : '') + minutes + ':' + seconds;
};
module.exports.timeAgo = function timeAgo(date) {
const [ seconds, minutes, hours, days, weeks ] = _duration(Math.floor(date), Math.floor(Date.now() / 1000));
/* _eslint-disable indent */
return weeks > 1 ? weeks + ' weeks ago'
: days > 0 ? days + (days === 1 ? ' day' : ' days') + ' ago'
: hours > 0 ? hours + (hours === 1 ? ' hour' : ' hours') + ' ago'
: minutes > 0 ? minutes + (minutes === 1 ? ' minute' : ' minutes') + ' ago'
: seconds + (seconds === 1 ? ' second' : ' seconds') + ' ago';
/* eslint-enable indent */
};
function _duration(from, to) {
const diff = Math.max(0, to - from);
return [
diff % 60,
Math.floor(diff / 60) % 60,
Math.floor(diff / 60 / 60) % 24,
Math.floor(diff / 60 / 60 / 24) % 7,
Math.floor(diff / 60 / 60 / 24 / 7)
];
}
module.exports.element = function element(html, parent, events = {}) {
const container = document.createElement('div');
container.innerHTML = html;
const el = container.children[0];
parent && parent.appendChild(el);
Player.events.addUndelegatedListeners(events);
return el;
};
module.exports.elementBefore = function elementBefore(html, before, events = {}) {
const el = _.element(html, null, events);
before.parentNode.insertBefore(el, before);
return el;
};
module.exports.noDefault = (f, ...args) => e => {
e.preventDefault();
const func = typeof f === 'function' ? f : _.get(Player, f);
func(e, ...args);
};
/***/ }),
/***/ "./src/api.js":
/*!********************!*\
!*** ./src/api.js ***!
\********************/
/*! no static exports found */
/***/ (function(module, exports) {
const cache = {};
module.exports = {
get
};
async function get(url) {
return new Promise(function (resolve, reject) {
const headers = {};
if (cache[url]) {
headers['If-Modified-Since'] = cache[url].lastModified;
}
GM.xmlHttpRequest({
method: 'GET',
url,
headers,
responseType: 'json',
onload: response => {
if (response.status >= 200 && response.status < 300) {
cache[url] = { lastModified: response.responseHeaders['last-modified'], response: response.response };
}
resolve(response.status === 304 ? cache[url].response : response.response);
},
onerror: reject
});
});
}
/***/ }),
/***/ "./src/components/actions/index.js":
/*!*****************************************!*\
!*** ./src/components/actions/index.js ***!
\*****************************************/
/*! no static exports found */
/***/ (function(module, exports) {
module.exports = {
atRoot: [ 'togglePlay', 'play', 'pause', 'next', 'previous', 'stop', 'toggleMute', 'volumeUp', 'volumeDown' ],
public: [ 'togglePlay', 'play', 'pause', 'next', 'previous', 'stop', 'toggleMute', 'volumeUp', 'volumeDown' ],
/**
* Switching being playing and paused.
*/
togglePlay: function () {
if (Player.audio.paused) {
Player.play();
} else {
Player.pause();
}
},
/**
* Start playback.
*/
play: async function (sound, { paused } = {}) {
try {
// If nothing is currently selected to play start playing the first sound.
if (!sound && !Player.playing && Player.sounds.length) {
sound = Player.sounds[0];
}
const video = document.querySelector(`.${ns}-video`);
video.removeEventListener('canplaythrough', Player.actions._playOnceLoaded);
Player.audio.removeEventListener('canplaythrough', Player.actions._playOnceLoaded);
// If a new sound is being played update the display.
if (sound) {
if (Player.playing) {
Player.playing.playing = false;
}
// Remove audio events from the video, and add them back for standalone video.
const audioEvents = Player.controls.audioEvents;
for (let evt in audioEvents) {
let handlers = Array.isArray(audioEvents[evt]) ? audioEvents[evt] : [ audioEvents[evt] ];
handlers.forEach(handler => {
const handlerFunction = Player.getHandler(handler);
video.removeEventListener(evt, handlerFunction);
sound.standaloneVideo && video.addEventListener(evt, handlerFunction);
});
}
sound.playing = true;
Player.playing = sound;
Player.audio.src = sound.src;
Player.isVideo = sound.image.endsWith('.webm') || sound.type === 'video/webm';
Player.isStandalone = sound.standaloneVideo;
Player.audio = sound.standaloneVideo ? video : Player.controls._audio;
Player.container.classList[Player.isVideo ? 'add' : 'remove']('playing-video');
Player.container.classList[Player.isVideo || sound.image.endsWith('gif') ? 'add' : 'remove']('playing-animated');
await Player.trigger('playsound', sound);
}
if (!paused) {
// If there's a video and sound wait for both to load before playing.
if (!Player.isStandalone && Player.isVideo && (video.readyState < 3 || Player.audio.readyState < 3)) {
video.addEventListener('canplaythrough', Player.actions._playOnceLoaded);
Player.audio.addEventListener('canplaythrough', Player.actions._playOnceLoaded);
} else {
Player.audio.play();
}
}
} catch (err) {
Player.logError('There was an error playing the sound. Please check the console for details.', err);
}
},
/**
* Handler to start playback once the video and audio are both loaded.
*/
_playOnceLoaded: function () {
const video = document.querySelector(`.${ns}-video`);
if (video.readyState > 2 && Player.audio.readyState > 2) {
video.removeEventListener('canplaythrough', Player.actions._playOnceLoaded);
Player.audio.removeEventListener('canplaythrough', Player.actions._playOnceLoaded);
Player.audio.play();
// Sometimes it just doesn't sync when the playback starts. Give it a second and then force a sync.
setTimeout(Player.controls.syncVideo, 100);
}
},
/**
* Pause playback.
*/
pause: function () {
Player.audio && Player.audio.pause();
},
/**
* Stop playback.
*/
stop: function () {
Player.audio.src = null;
Player.playing = null;
Player.trigger('stop');
},
/**
* Play the next sound.
*/
next: function (opts) {
Player.actions._movePlaying(1, opts);
},
/**
* Play the previous sound.
*/
previous: function (opts) {
// Over three seconds into a sound restarts it instead.
if (Player.audio.currentTime > 3) {
Player.audio.currentTime = 0;
} else {
Player.actions._movePlaying(-1, opts);
}
},
_movePlaying: function (direction, { force, group, paused } = {}) {
// If there's no sound fall out.
if (!Player.sounds.length) {
return;
}
// If there's no sound currently playing or it's not in the list then just play the first sound.
const currentIndex = Player.sounds.indexOf(Player.playing);
if (currentIndex === -1) {
return Player.play(Player.sounds[0]);
}
// Get the next index, either repeating the same, wrapping round to repeat all or just moving the index.
let nextSound;
if (!force && Player.config.repeat === 'one') {
nextSound = Player.sounds[currentIndex];
} else {
let newIndex = currentIndex;
// Get the next index wrapping round if repeat all is selected
// Keep going if it's group move, there's still more sounds to check, and the next sound is still in the same group.
do {
newIndex = Player.config.repeat === 'all'
? ((newIndex + direction) + Player.sounds.length) % Player.sounds.length
: newIndex + direction;
nextSound = Player.sounds[newIndex];
} while (group && nextSound && newIndex !== currentIndex && (!nextSound.post || nextSound.post === Player.playing.post));
}
nextSound && Player.play(nextSound, { paused });
},
/**
* Raise the volume by 5%.
*/
volumeUp: function () {
Player.audio.volume = Math.min(Player.audio.volume + 0.05, 1);
},
/**
* Lower the volume by 5%.
*/
volumeDown: function () {
Player.audio.volume = Math.max(Player.audio.volume - 0.05, 0);
},
/**
* Mute the audio, or reset it to the last volume prior to muting.
*/
toggleMute: function () {
Player.audio.volume = (Player._lastVolume || 0.5) * !Player.audio.volume;
}
};
/***/ }),
/***/ "./src/components/controls/index.js":
/*!******************************************!*\
!*** ./src/components/controls/index.js ***!
\******************************************/
/*! no static exports found */
/***/ (function(module, exports, __webpack_require__) {
/* WEBPACK VAR INJECTION */(function(_) {module.exports = {
template: __webpack_require__(/*! ./templates/controls.tpl */ "./src/components/controls/templates/controls.tpl"),
delegatedEvents: {
click: {
[`.${ns}-previous-button`]: _.noDefault(() => Player.previous({ force: true })),
[`.${ns}-play-button`]: _.noDefault('togglePlay'),
[`.${ns}-next-button`]: _.noDefault(() => Player.next({ force: true })),
[`.${ns}-seek-bar`]: 'controls.handleSeek',
[`.${ns}-volume-bar`]: 'controls.handleVolume',
[`.${ns}-volume-button`]: _.noDefault('toggleMute'),
[`.${ns}-fullscreen-button`]: 'display.toggleFullScreen'
},
mousedown: {
[`.${ns}-seek-bar`]: () => Player._seekBarDown = true,
[`.${ns}-volume-bar`]: () => Player._volumeBarDown = true
},
mousemove: {
[`.${ns}-seek-bar`]: e => Player._seekBarDown && Player.controls.handleSeek(e),
[`.${ns}-volume-bar`]: e => Player._volumeBarDown && Player.controls.handleVolume(e)
}
},
undelegatedEvents: {
mouseleave: {
[`.${ns}-seek-bar`]: e => Player._seekBarDown && Player.controls.handleSeek(e),
[`.${ns}-volume-bar`]: e => Player._volumeBarDown && Player.controls.handleVolume(e)
},
mouseup: {
body: () => {
Player._seekBarDown = false;
Player._volumeBarDown = false;
}
},
play: { [`.${ns}-video`]: 'controls.syncVideo' },
pause: { [`.${ns}-video`]: 'controls.syncVideo' }
},
audioEvents: {
ended: () => Player.next(),
pause: 'controls.handleAudioEvent',
play: 'controls.handleAudioEvent',
seeked: 'controls.handleAudioEvent',
waiting: 'controls.handleAudioEvent',
timeupdate: 'controls.updateDuration',
loadedmetadata: [ 'controls.updateDuration', 'controls.preventWrapping' ],
durationchange: 'controls.updateDuration',
volumechange: 'controls.updateVolume',
loadstart: 'controls.pollForLoading',
error: 'controls.handleAudioError'
},
initialize: async function () {
// Keep this reference to switch Player.audio to standalone videos and back.
Player.controls._audio = Player.audio;
// Apply the previous volume
GM.getValue('volume').then(volume => volume >= 0 && volume <= 1 && (Player.audio.volume = volume));
// Only poll for the loaded data when the player is open.
Player.on('show', () => Player._hiddenWhilePolling && Player.controls.pollForLoading());
Player.on('hide', () => {
Player._hiddenWhilePolling = !!Player._loadingPoll;
Player.controls.stopPollingForLoading();
});
Player.on('rendered', () => {
// Keep track of heavily updated elements.
Player.ui.currentTimeBar = Player.$(`.${ns}-seek-bar .${ns}-current-bar`);
Player.ui.loadedBar = Player.$(`.${ns}-seek-bar .${ns}-loaded-bar`);
// Set the initial volume/seek bar positions and hidden controls.
Player.controls.updateDuration();
Player.controls.updateVolume();
Player.controls.preventWrapping();
});
// Show all the controls when wrapping prevention is disabled.
Player.on('config:preventControlsWrapping', newValue => !newValue && Player.controls.showAllControls());
// Reset the hidden controls when the hide order is changed.
Player.on('config:controlsHideOrder', () => {
Player.controls.setHideOrder();
Player.controls.preventWrapping();
});
},
/**
* Handle audio errors
*/
handleAudioError: function (err) {
if (Player.playing) {
Player.logError(`Failed to play ${Player.playing.title}. Please check the console for details.`, err, 'warning');
Player.next();
}
},
/**
* Handle audio events. Sync the video up, and update the controls.
*/
handleAudioEvent: function () {
Player.controls.syncVideo();
Player.controls.updateDuration();
document.querySelectorAll(`.${ns}-play-button`).forEach(el => {
el.classList[Player.audio.paused ? 'add' : 'remove'](`${ns}-play`);
});
},
/**
* Sync the webm to the audio. Matches the videos time and play state to the audios.
*/
syncVideo: function () {
if (Player.isVideo && !Player.isStandalone) {
const paused = Player.audio.paused;
const video = document.querySelector(`.${ns}-video`);
if (video) {
video.currentTime = Player.audio.currentTime % video.duration;
if (paused) {
video.pause();
} else {
video.play();
}
}
}
},
/**
* Poll for how much has loaded. I know there's the progress event but it unreliable.
*/
pollForLoading: function () {
Player._loadingPoll = Player._loadingPoll || setInterval(Player.controls.updateLoaded, 1000);
},
/**
* Stop polling for how much has loaded.
*/
stopPollingForLoading: function () {
Player._loadingPoll && clearInterval(Player._loadingPoll);
Player._loadingPoll = null;
},
/**
* Update the loading bar.
*/
updateLoaded: function () {
const length = Player.audio.buffered.length;
const size = length > 0
? (Player.audio.buffered.end(length - 1) / Player.audio.duration) * 100
: 0;
// If it's fully loaded then stop polling.
size === 100 && Player.controls.stopPollingForLoading();
Player.ui.loadedBar.style.width = size + '%';
},
/**
* Update the seek bar and the duration labels.
*/
updateDuration: function () {
const currentTime = _.toDuration(Player.audio.currentTime);
const duration = _.toDuration(Player.audio.duration);
// Gross use of childNodes to avoid textContent triggering mutation observers of other scripts.
document.querySelectorAll(`.${ns}-current-time`).forEach(el => el.childNodes[0].textContent = currentTime);
document.querySelectorAll(`.${ns}-duration`).forEach(el => el.childNodes[0].textContent = duration);
Player.controls.updateProgressBarPosition(Player.ui.currentTimeBar, Player.audio.currentTime, Player.audio.duration);
},
/**
* Update the volume bar.
*/
updateVolume: function () {
const vol = Player.audio.volume;
vol > 0 && (Player._lastVolume = vol);
GM.setValue('volume', vol);
document.querySelectorAll(`.${ns}-volume-button`).forEach(el => {
el.classList[vol === 0 ? 'add' : 'remove']('mute');
el.classList[vol > 0 ? 'add' : 'remove']('up');
});
Player.controls.updateProgressBarPosition(Player.$(`.${ns}-volume-bar .${ns}-current-bar`), Player.audio.volume, 1);
},
/**
* Update a progress bar width. Adjust the margin of the circle so it's contained within the bar at both ends.
*/
updateProgressBarPosition: function (bar, current, total) {
if (!bar) {
return;
}
current || (current = 0);
total || (total = 0);
const ratio = !total ? 0 : Math.max(0, Math.min(((current || 0) / total), 1));
bar.style.width = `calc(${ratio * 100}% - ${(0.8 * ratio) - 0.4}rem)`;
},
/**
* Handle the user interacting with the seek bar.
*/
handleSeek: function (e) {
e.preventDefault();
if (Player.audio.duration && Player.audio.duration !== Infinity) {
Player.audio.currentTime = Player.audio.duration * Player.controls._getBarXRatio(e);
}
},
/**
* Handle the user interacting with the volume bar.
*/
handleVolume: function (e) {
e.preventDefault();
Player.audio.volume = Player.controls._getBarXRatio(e);
Player.controls.updateVolume();
},
_getBarXRatio: function (e) {
const offset = 0.4 * Player.remSize;
return Math.max(0, Math.min(1, (e.offsetX - offset) / (parseInt(getComputedStyle(e.eventTarget || e.target).width, 10) - (2 * offset))));
},
/**
* Set all controls visible.
*/
showAllControls: function () {
Player.$all(`.${ns}-controls [data-hide-id]`).forEach(el => el.style.display = null);
},
/**
* Hide elements in the controls instead of wrapping
*/
preventWrapping: function () {
if (!Player.config.preventControlWrapping) {
return;
}
const controls = Player.$(`.${ns}-controls`);
// If the offset top of the last visible child than this value it indicates wrapping.
const expectedOffsetTop = parseFloat(window.getComputedStyle(controls).paddingTop);
const hideElements = Player.controls.hideOrder || Player.controls.setHideOrder();
let visibleChildren = Array.prototype.slice.call(controls.children);
let lastChild = visibleChildren.pop();
let hidden = 0;
// Show everything to check what has wrapped.
Player.controls.showAllControls();
// Keep hiding elements until the last visible child has not wrapped, or there's nothing left to hide.
while (lastChild.offsetTop > expectedOffsetTop && hidden < hideElements.length) {
const hide = hideElements[hidden++];
hide.style.display = 'none';
visibleChildren = visibleChildren.filter(el => el !== hide);
hide === lastChild && (lastChild = visibleChildren.pop());
}
},
/**
* Set the hide order from the user config.
*/
setHideOrder: function () {
if (!Array.isArray(Player.config.controlsHideOrder)) {
Player.settings.reset('controlsHideOrder');
}
const controls = Player.$(`.${ns}-controls`);
return Player.controls.hideOrder = Player.config.controlsHideOrder
.map(id => controls.querySelector(`[data-hide-id="${id}"]`))
.filter(el => el)
.sort((a, b) => a.dataset.hideOrder - b.dataset.hideOrder);
}
};
/* WEBPACK VAR INJECTION */}.call(this, __webpack_require__(/*! ./src/_ */ "./src/_.js")))
/***/ }),
/***/ "./src/components/controls/templates/controls.tpl":
/*!********************************************************!*\
!*** ./src/components/controls/templates/controls.tpl ***!
\********************************************************/
/*! no static exports found */
/***/ (function(module, exports, __webpack_require__) {
/* WEBPACK VAR INJECTION */(function(Icons) {module.exports = (data = {}) => `<div class="${ns}-col-auto">
<div class="${ns}-media-control ${ns}-previous-button ${ns}-hover-fill" data-hide-id="previous">
${Icons.skipStart} ${Icons.skipStartFill}
</div>
<div class="${ns}-media-control ${ns}-play-button ${ns}-hover-fill ${!Player.audio || Player.audio.paused ? `${ns}-play` : ''}">
${Icons.play} ${Icons.pause} ${Icons.playFill} ${Icons.pauseFill}
</div>
<div class="${ns}-media-control ${ns}-next-button ${ns}-hover-fill" data-hide-id="next">
${Icons.skipEnd} ${Icons.skipEndFill}
</div>
</div>
<div class="${ns}-col" data-hide-id="seek-bar">
<div class="${ns}-seek-bar ${ns}-progress-bar">
<div class="${ns}-full-bar">
<div class="${ns}-loaded-bar"></div>
<div class="${ns}-current-bar"></div>
</div>
</div>
</div>
<div class="${ns}-col-auto" data-hide-id="time">
<span>
<span class="${ns}-current-time">0:00</span>
<span class="${ns}-text-muted" data-hide-id="duration"> / <span class="${ns}-duration">0:00</span></span>
</span>
</div>
<div class="${ns}-col-auto" data-hide-id="mute">
<div class="${ns}-media-control ${ns}-volume-button ${ns}-hover-fill up" data-hide-id="volume-button">
${Icons.volumeMute} ${Icons.volumeMuteFill}
${Icons.volumeUp} ${Icons.volumeUpFill}
</div>
<div class="${ns}-volume-bar ${ns}-progress-bar" data-hide-id="volume-bar">
<div class="${ns}-full-bar">
<div class="${ns}-current-bar" style="width: ${Player.audio.volume * 100}%"></div>
</div>
</div>
</div>
<div class="${ns}-col-auto" data-hide-id="fullscreen">
<div class="${ns}-media-control ${ns}-fullscreen-button">
${Icons.fullscreen} ${Icons.fullscreenExit}
</div>
</div>`
/* WEBPACK VAR INJECTION */}.call(this, __webpack_require__(/*! ./src/icons */ "./src/icons.js")))
/***/ }),
/***/ "./src/components/display/index.js":
/*!*****************************************!*\
!*** ./src/components/display/index.js ***!
\*****************************************/
/*! no static exports found */
/***/ (function(module, exports, __webpack_require__) {
/* WEBPACK VAR INJECTION */(function(_) {const cssTemplate = __webpack_require__(/*! ../../scss/style.scss */ "./src/scss/style.scss");
const css4chanXPolyfillTemplate = __webpack_require__(/*! ../../scss/4chan-x-polyfill.scss */ "./src/scss/4chan-x-polyfill.scss");
const dismissedContentCache = {};
const dismissedRestoreCache = {};
const noSleep = typeof NoSleep === 'function' && new NoSleep();
module.exports = {
atRoot: [ 'show', 'hide' ],
public: [ 'show', 'hide' ],
template: __webpack_require__(/*! ./templates/body.tpl */ "./src/components/display/templates/body.tpl"),
_noSleepEnabled: false,
delegatedEvents: {
click: {
[`.${ns}-close-button`]: 'hide',
[`.${ns}-dismiss-link`]: 'display._handleDismiss',
[`.${ns}-restore-link`]: 'display._handleRestore'
},
fullscreenchange: {
[`.${ns}-player`]: 'display._handleFullScreenChange'
},
drop: {
[`#${ns}-container`]: 'display._handleDrop'
}
},
undelegatedEvents: {
click: {
body: 'display.closeDialogs'
},
keydown: {
body: e => e.key === 'Escape' && Player.display.closeDialogs(e)
}
},
initialize: async function () {
try {
Player.display.dismissed = (await GM.getValue('dismissed')).split(',');
} catch (err) {
Player.display.dismissed = [];
}
Player.on('playsound', () => {
// Reset marquees
Player.display._marquees = {};
!Player.display._marqueeTO && Player.display.runTitleMarquee();
});
// Store the rem size
Player.remSize = parseFloat(getComputedStyle(document.documentElement).fontSize);
// Set up no sleep
Player.on('config:preventSleep', Player.display._initNoSleep);
Player.display._initNoSleep(Player.config.preventSleep);
},
/**
* Create the player show/hide button in to the 4chan X header.
*/
createPlayerButton: function () {
if (Site === 'FoolFuuka') {
// Add a sounds link in the nav for archives
const nav = document.querySelector('.navbar-inner .nav:nth-child(2)');
const li = _.element('<li><a href="javascript:;">Sounds</a></li>', nav);
li.children[0].addEventListener('click', Player.display.toggle);
} else if (Site === 'Fuuka') {
const br = document.querySelector('body > div > br');
br.parentNode.insertBefore(document.createTextNode('['), br);
_.elementBefore('<a href="javascript:;">Sounds</a>', br, { click: Player.display.toggle });
br.parentNode.insertBefore(document.createTextNode(']'), br);
} else if (isChanX) {
// Add a button in the header for 4chan X.
const showIcon = _.elementBefore(`<span id="shortcut-sounds" class="shortcut brackets-wrap" data-index="0">
<a href="javascript:;" title="Sounds" class="fa fa-play-circle">Sounds</a>
</span>`, document.getElementById('shortcut-settings'));
showIcon.querySelector('a').addEventListener('click', Player.display.toggle);
} else {
// Add a [Sounds] link in the top and bottom nav for native 4chan.
document.querySelectorAll('#settingsWindowLink, #settingsWindowLinkBot').forEach(function (link) {
_.elementBefore('<a href="javascript:;">Sounds</a>', link, { click: Player.display.toggle });
link.parentNode.insertBefore(document.createTextNode('] ['), link);
});
}
},
/**
* Render the player.
*/
render: async function () {
try {
if (Player.container) {
document.body.removeChild(Player.container);
document.head.removeChild(Player.stylesheet);
}
// Create the main stylesheet.
Player.display.updateStylesheet();
// Create the main player. For native threads put it in the threads to get free quote previews.
const isThread = document.body.classList.contains('is_thread');
const parent = isThread && !isChanX && document.body.querySelector('.board') || document.body;
Player.container = _.element(Player.display.template(), parent);
Player.display.initPopovers(Player.container);
Player.trigger('rendered');
} catch (err) {
Player.logError('There was an error rendering the sound player.', err);
// Can't recover, throw.
throw err;
}
},
updateStylesheet: function () {
// Insert the stylesheet if it doesn't exist. 4chan X polyfill, sound player styling, and user styling.
Player.stylesheet = Player.stylesheet || _.element('<style id="sound-player-css"></style>', document.head);
Player.stylesheet.innerHTML = (!isChanX ? '/* 4chanX Polyfill */\n\n' + css4chanXPolyfillTemplate() : '')
+ '\n\n/* Sounds Player CSS */\n\n' + cssTemplate();
},
/**
* Change what view is being shown
*/
setViewStyle: async function (style) {
// Get the size and style prior to switching.
const previousStyle = Player.config.viewStyle;
// Exit fullscreen before changing to a different view.
if (style !== 'fullscreen') {
document.fullscreenElement && document.exitFullscreen();
}
// Change the style.
Player.set('viewStyle', style);
Player.container.setAttribute('data-view-style', style);
if (style === 'playlist' || style === 'image') {
Player.controls.preventWrapping();
}
// Try to reapply the pre change sizing unless it was fullscreen.
if (previousStyle !== 'fullscreen' || style === 'fullscreen') {
const [ width, height ] = (await GM.getValue('size') || '').split(':');
width && height && Player.position.resize(parseInt(width, 10), parseInt(height, 10));
Player.position.setPostWidths();
}
Player.trigger('view', style, previousStyle);
},
/**
* Togle the display status of the player.
*/
toggle: function (e) {
e && e.preventDefault();
if (Player.container.style.display === 'none') {
Player.show();
} else {
Player.hide();
}
},
/**
* Hide the player. Stops polling for changes, and pauses the aduio if set to.
*/
hide: function (e) {
e && e.preventDefault();
Player.container.style.display = 'none';
Player.isHidden = true;
Player.trigger('hide');
},
/**
* Show the player. Reapplies the saved position/size, and resumes loaded amount polling if it was paused.
*/
show: async function (e) {
e && e.preventDefault();
if (!Player.container.style.display) {
return;
}
Player.container.style.display = null;
Player.isHidden = false;
await Player.trigger('show');
},
/**
* Stop playback and close the player.
*/
close: async function () {
Player.stop();
Player.hide();
},
/**
* Toggle the video/image and controls fullscreen state
*/
toggleFullScreen: async function () {
if (!document.fullscreenElement) {
// Make sure the player (and fullscreen contents) are visible first.
if (Player.isHidden) {
Player.show();
}
Player.$(`.${ns}-player`).requestFullscreen();
Player.$(`.${ns}-player`).addEventListener('mousemove', Player.display._fullscreenMouseMove);
Player.display._fullscreenMouseMove();
} else if (document.exitFullscreen) {
document.exitFullscreen();
Player.$(`.${ns}-player`).removeEventListener('mousemove', Player.display._fullscreenMouseMove);
}
},
_fullscreenMouseMove: function () {
Player.container.classList.remove('cursor-inactive');
Player.display.fullscreenCursorTO && clearTimeout(Player.display.fullscreenCursorTO);
Player.display.fullscreenCursorTO = setTimeout(function () {
Player.container.classList.add('cursor-inactive');
}, 2000);
},
/**
* Handle file/s being dropped on the player.
*/
_handleDrop: function (e) {
e.preventDefault();
e.stopPropagation();
Player.playlist.addFromFiles(e.dataTransfer.files);
},
/**
* Handle the fullscreen state being changed
*/
_handleFullScreenChange: function () {
if (document.fullscreenElement) {
Player.display.setViewStyle('fullscreen');
document.querySelector(`.${ns}-image-link`).removeAttribute('href');
} else {
if (Player.playing) {
document.querySelector(`.${ns}-image-link`).href = Player.playing.image;
}
Player.playlist.restore();
}
Player.controls.preventWrapping();
},
_handleRestore: async function (e) {
e.preventDefault();
const restore = e.eventTarget.getAttribute('data-restore');
const restoreIndex = Player.display.dismissed.indexOf(restore);
if (restore && restoreIndex > -1) {
Player.display.dismissed.splice(restoreIndex, 1);
Player.$all(`[data-restore="${restore}"]`).forEach(el => {
_.elementBefore(dismissedContentCache[restore], el);
el.parentNode.removeChild(el);
});
await GM.setValue('dismissed', Player.display.dismissed.join(','));
}
},
_handleDismiss: async function (e) {
e.preventDefault();
const dismiss = e.eventTarget.getAttribute('data-dismiss');
if (dismiss && !Player.display.dismissed.includes(dismiss)) {
Player.display.dismissed.push(dismiss);
Player.$all(`[data-dismiss-id="${dismiss}"]`).forEach(el => {
_.elementBefore(`<a href="#" class="${ns}-restore-link" data-restore="${dismiss}">${dismissedRestoreCache[dismiss]}</a>`, el);
el.parentNode.removeChild(el);
});
await GM.setValue('dismissed', Player.display.dismissed.join(','));
}
},
ifNotDismissed: function (name, restore, text) {
dismissedContentCache[name] = text;
dismissedRestoreCache[name] = restore;
return Player.display.dismissed.includes(name)
? `<a href="#" class="${ns}-restore-link" data-restore="${name}">${restore}</a>`
: text;
},
/**
* Close any open menus.
*/
closeDialogs: function (e) {
document.querySelectorAll(`.${ns}-dialog`).forEach(dialog => {
// Close if there's no click event, or the click was not part of a clickable dialog or an associated element.
const clickableElements = (dialog._keepOpenFor || []).concat(dialog.dataset.allowClick ? dialog : []);
if (!e || !clickableElements.find(el => el === e.target || el.contains(e.target))) {
dialog.parentNode.removeChild(dialog);
Player.trigger('menu-close', dialog);
}
});
},
runTitleMarquee: async function () {
Player.display._marqueeTO = setTimeout(Player.display.runTitleMarquee, 1000);
document.querySelectorAll(`.${ns}-title-marquee`).forEach(title => {
const offset = title.parentNode.getBoundingClientRect().width - (title.scrollWidth + 1);
const location = title.getAttribute('data-location');
// Fall out if the title is fully visible.
if (offset >= 0) {
return title.style.marginLeft = null;
}
const data = Player.display._marquees[location] = Player.display._marquees[location] || {
direction: 1,
position: parseInt(title.style.marginLeft, 10) || 0
};
// Pause at each end.
if (data.pause > 0) {
data.pause--;
return;
}
data.position -= (20 * data.direction);
// Pause then reverse direction when the end is reached.
if (data.position > 0 || data.position < offset) {
data.position = Math.min(0, Math.max(data.position, offset));
data.direction *= -1;
data.pause = 1;
}
title.style.marginLeft = data.position + 'px';
});
},
initPopovers: function (el) {
const popovers = el.querySelectorAll(`.${ns}-popover`);
popovers.forEach(popover => {
popover.addEventListener('mouseenter', Player.display._popoverMouseEnter);
popover.addEventListener('mouseleave', Player.display._popoverMouseLeave);
popover.addEventListener('click', Player.display._popoverClick);
});
},
_popoverMouseEnter: e => {
const icon = e.currentTarget;
if (!icon.infoEl || !Player.container.contains(icon.infoEl)) {
icon.infoEl = _.element(`<div class="${ns}-popover-body ${ns}-dialog dialog">${icon.dataset.content}</div>`, Player.container);
icon.infoEl._keepOpenFor = [ icon ];
Player.position.showRelativeTo(icon.infoEl, icon);
}
},
_popoverMouseLeave: e => {
const icon = e.currentTarget;
if (icon.infoEl && !icon.infoEl._clicked) {
icon.infoEl.parentNode.removeChild(icon.infoEl);
delete icon.infoEl;
}
},
_popoverClick: e => {
const icon = e.currentTarget;
const openPopover = icon.infoEl && Player.container.contains(icon.infoEl);
if (!openPopover) {
Player.display._popoverMouseEnter(e);
} else if (!(icon.infoEl._clicked = !icon.infoEl._clicked)) {
Player.display._popoverMouseLeave(e);
}
},
_initNoSleep: newValue => {
const action = newValue ? 'addEventListener' : 'removeEventListener';
if (!noSleep || !!newValue === Player.display._noSleepEnabled) {
return;
}
Player.audio[action]('play', noSleep.enable);
Player.audio[action]('pause', noSleep.disable);
Player.audio[action]('ended', noSleep.disable);
Player.display._noSleepEnabled = !!newValue;
if (!Player.audio.paused) {
noSleep[newValue ? 'enable' : 'disable']();
}
}
};
/* WEBPACK VAR INJECTION */}.call(this, __webpack_require__(/*! ./src/_ */ "./src/_.js")))
/***/ }),
/***/ "./src/components/display/templates/body.tpl":
/*!***************************************************!*\
!*** ./src/components/display/templates/body.tpl ***!
\***************************************************/
/*! no static exports found */
/***/ (function(module, exports) {
module.exports = (data = {}) => `<div id="${ns}-container" data-view-style="${Player.config.viewStyle}" style="top: 30px; left: 0px; width: 360px; height: 360px; display: none;">
<div class="${ns}-header ${ns}-row ${ns}-align-center">
${Player.header.template(data)}
</div>
<div class="${ns}-player ${!Player.config.hoverImages ? `${ns}-hide-hover-image` : ''}">
${Player.playlist.template(data)}
</div>
<div class="${ns}-settings ${ns}-panel">
${Player.settings.template(data)}
</div>
<div class="${ns}-threads ${ns}-panel">
${Player.threads.template(data)}
</div>
<div class="${ns}-tools ${ns}-panel">
${Player.tools.template(data)}
</div>
<div class="${ns}-footer ${ns}-row ${ns}-align-center">
${Player.footer.template(data)}
</div>
<input class="${ns}-add-local-file-input" type="file" style="display: none" accept="image/*,.webm" multiple>
</div>`
/***/ }),
/***/ "./src/components/events/index.js":
/*!****************************************!*\
!*** ./src/components/events/index.js ***!
\****************************************/
/*! no static exports found */
/***/ (function(module, exports) {
module.exports = {
atRoot: [ 'on', 'off', 'trigger' ],
// Holder of event handlers.
_events: { },
_delegatedEvents: { },
_undelegatedEvents: { },
_audioEvents: [ ],
initialize: function () {
const eventLocations = { Player, ...Player.components };
const delegated = Player.events._delegatedEvents;
const undelegated = Player.events._undelegatedEvents;
const audio = Player.events._audioEvents;
for (let name in eventLocations) {
const comp = eventLocations[name];
for (let evt in comp.delegatedEvents || {}) {
delegated[evt] || (delegated[evt] = []);
delegated[evt].push(comp.delegatedEvents[evt]);
}
for (let evt in comp.undelegatedEvents || {}) {
undelegated[evt] || (undelegated[evt] = []);
undelegated[evt].push(comp.undelegatedEvents[evt]);
}
comp.audioEvents && (audio.push(comp.audioEvents));
}
Player.on('rendered', function () {
// Wire up delegated events on the container.
Player.events.addDelegatedListeners(Player.container, delegated);
// Wire up undelegated events.
Player.events.addUndelegatedListeners(document, undelegated);
// Wire up audio events.
for (let eventList of audio) {
for (let evt in eventList) {
let handlers = Array.isArray(eventList[evt]) ? eventList[evt] : [ eventList[evt] ];
handlers.forEach(handler => Player.audio.addEventListener(evt, Player.getHandler(handler)));
}
}
});
},
/**
* Set delegated events listeners on a target
*/
addDelegatedListeners(target, events) {
for (let evt in events) {
target.addEventListener(evt, function (e) {
let nodes = [ e.target ];
while (nodes[nodes.length - 1] !== target) {
nodes.push(nodes[nodes.length - 1].parentNode);
}
for (let node of nodes) {
for (let eventList of [].concat(events[evt])) {
for (let selector in eventList) {
if (node.matches && node.matches(selector)) {
e.eventTarget = node;
let handler = Player.getHandler(eventList[selector]);
// If the handler returns false stop propogation
if (handler && handler(e) === false) {
return;
}
}
}
}
}
});
}
},
/**
* Set, or reset, directly bound events.
*/
addUndelegatedListeners: function (target, events) {
for (let evt in events) {
if (typeof events[evt] !== 'object') {
Player.events._addEventListener([ target ], evt, events[evt]);
} else {
for (let eventList of [].concat(events[evt])) {
for (let selector in eventList) {
const elements = [ ...target.querySelectorAll(selector) ];
target.matches && target.matches(selector) && elements.unshift(target);
Player.events._addEventListener(elements, evt, eventList[selector]);
}
}
}
}
},
_addEventListener(elements, evt, listener) {
elements.forEach(element => {
const handler = Player.getHandler(listener);
element.removeEventListener(evt, handler);
element.addEventListener(evt, handler);
});
},
/**
* Create an event listener on the player.
*
* @param {String} evt The name of the events.
* @param {function} handler The handler function.
*/
on: function (evt, handler) {
Player.events._events[evt] || (Player.events._events[evt] = []);
Player.events._events[evt].push(handler);
},
/**
* Remove an event listener on the player.
*
* @param {String} evt The name of the events.
* @param {function} handler The handler function.
*/
off: function (evt, handler) {
const index = Player.events._events[evt] && Player.events._events[evt].indexOf(handler);
if (index > -1) {
Player.events._events[evt].splice(index, 1);
}
},
/**
* Trigger an event on the player.
*
* @param {String} evt The name of the events.
* @param {*} data Data passed to the handler.
*/
trigger: async function (evt, ...data) {
const events = Player.events._events[evt] || [];
for (let handler of events) {
await handler(...data);
}
}
};
/***/ }),
/***/ "./src/components/footer/index.js":
/*!****************************************!*\
!*** ./src/components/footer/index.js ***!
\****************************************/
/*! no static exports found */
/***/ (function(module, exports) {
module.exports = {
template: () => Player.userTemplate.build({
template: Player.config.footerTemplate
+ `<div class="${ns}-expander" data-direction="sw"></div><div class="${ns}-expander" data-direction="se"></div>`,
location: 'footer',
sound: Player.playing,
defaultName: '4chan Sounds',
outerClass: `${ns}-col-auto`
}),
initialize: function () {
Player.userTemplate.maintain(Player.footer, 'footerTemplate');
},
render: function () {
if (Player.container) {
Player.$(`.${ns}-footer`).innerHTML = Player.footer.template();
}
}
};
/***/ }),
/***/ "./src/components/header/index.js":
/*!****************************************!*\
!*** ./src/components/header/index.js ***!
\****************************************/
/*! no static exports found */
/***/ (function(module, exports) {
module.exports = {
template: () => Player.userTemplate.build({
template: Player.config.headerTemplate
+ `<div class="${ns}-expander" data-direction="nw"></div><div class="${ns}-expander" data-direction="ne"></div>`,
location: 'header',
sound: Player.playing,
defaultName: '4chan Sounds',
outerClass: `${ns}-col-auto`
}),
initialize: function () {
Player.userTemplate.maintain(Player.header, 'headerTemplate');
},
render: function () {
Player.$(`.${ns}-header`).innerHTML = Player.header.template();
}
};
/***/ }),
/***/ "./src/components/hotkeys/index.js":
/*!*****************************************!*\
!*** ./src/components/hotkeys/index.js ***!
\*****************************************/
/*! no static exports found */
/***/ (function(module, exports, __webpack_require__) {
const settingsConfig = __webpack_require__(/*! config */ "./src/config/index.js");
let keyConfigs;
module.exports = {
_keyMap: {
' ': 'space',
arrowleft: 'left',
arrowright: 'right',
arrowup: 'up',
arrowdown: 'down'
},
initialize: function () {
Player.on('rendered', Player.hotkeys.apply);
Player.on('config:hotkeys', Player.hotkeys.apply);
keyConfigs = settingsConfig.reduce((c, s) => {
s.property === 'hotkey_bindings' && s.settings.forEach(s => c[s.property.slice(16)] = s);
return c;
}, {});
// Setup up hardware media keys.
if ('mediaSession' in navigator && Player.config.hardwareMediaKeys) {
const actions = [
[ 'play', () => Player.play() ],
[ 'pause', () => Player.pause() ],
[ 'stop', () => Player.pause() ],
[ 'previoustrack', () => Player.previous() ],
[ 'nexttrack', () => Player.next() ],
[ 'seekbackward', evt => Player.audio.currentTime -= evt.seekOffset || 10 ],
[ 'seekforward', evt => Player.audio.currentTime += evt.seekOffset || 10 ],
[ 'seekto', evt => Player.audio.currentTime += evt.seekTime ]
];
for (let [ type, handler ] of actions) {
try {
navigator.mediaSession.setActionHandler(type, handler);
} catch (err) {
// not enabled...
}
}
// Keep the media metadata updated.
Player.audio.addEventListener('pause', () => navigator.mediaSession.playbackState = 'paused');
Player.audio.addEventListener('ended', () => navigator.mediaSession.playbackState = 'paused');
Player.audio.addEventListener('play', function () {
navigator.mediaSession.playbackState = 'playing';
navigator.mediaSession.metadata = new MediaMetadata({
title: Player.playing.title,
artist: '4chan Sounds Player',
album: document.title,
artwork: [ { src: Player.playing.thumb } ]
});
});
}
},
addHandler: () => {
Player.hotkeys.removeHandler();
document.body.addEventListener('keydown', Player.hotkeys.handle);
},
removeHandler: () => {
document.body.removeEventListener('keydown', Player.hotkeys.handle);
},
/**
* Apply the selecting hotkeys option
*/
apply: function () {
const type = Player.config.hotkeys;
Player.hotkeys.removeHandler();
Player.off('show', Player.hotkeys.addHandler);
Player.off('hide', Player.hotkeys.removeHandler);
if (type === 'always') {
// If hotkeys are always enabled then just set the handler.
Player.hotkeys.addHandler();
} else if (type === 'open') {
// If hotkeys are only enabled with the player toggle the handler as the player opens/closes.
// If the player is already open set the handler now.
if (!Player.isHidden) {
Player.hotkeys.addHandler();
}
Player.on('show', Player.hotkeys.addHandler);
Player.on('hide', Player.hotkeys.removeHandler);
}
},
/**
* Handle a keydown even on the body
*/
handle: function (e) {
// Ignore events on inputs so you can still type.
const ignoreFor = [ 'INPUT', 'SELECT', 'TEXTAREA', 'INPUT' ];
if (ignoreFor.includes(e.target.nodeName) || Player.isHidden && (Player.config.hotkeys !== 'always' || !Player.sounds.length)) {
return;
}
const k = e.key.toLowerCase();
const bindings = Player.config.hotkey_bindings || {};
// Look for a matching hotkey binding
Object.entries(bindings).find(function checkBinding([ name, keyDef ]) {
if (Array.isArray(keyDef)) {
return keyDef.find(_def => checkBinding([ name, _def ]));
}
const bindingConfig = k === keyDef.key
&& (!!keyDef.shiftKey === !!e.shiftKey) && (!!keyDef.ctrlKey === !!e.ctrlKey) && (!!keyDef.metaKey === !!e.metaKey)
&& (!keyDef.ignoreRepeat || !e.repeat)
&& keyConfigs[name];
if (bindingConfig) {
e.preventDefault();
e._binding = keyDef;
Player.getHandler(bindingConfig.keyHandler)(e);
return true;
}
return false;
});
},
/**
* Turn a hotkey definition or key event into an input string.
*/
stringifyKey: function (key) {
let k = key.key.toLowerCase();
Player.hotkeys._keyMap[k] && (k = Player.hotkeys._keyMap[k]);
return (key.ctrlKey ? 'Ctrl+' : '') + (key.shiftKey ? 'Shift+' : '') + (key.metaKey ? 'Meta+' : '') + k;
},
/**
* Turn an input string into a hotkey definition object.
*/
parseKey: function (str) {
const keys = str.split('+');
let key = keys.pop();
Object.keys(Player.hotkeys._keyMap).find(k => Player.hotkeys._keyMap[k] === key && (key = k));
const newValue = { key };
keys.forEach(key => newValue[key.toLowerCase() + 'Key'] = true);
return newValue;
}
};
/***/ }),
/***/ "./src/components/minimised/index.js":
/*!*******************************************!*\
!*** ./src/components/minimised/index.js ***!
\*******************************************/
/*! no static exports found */
/***/ (function(module, exports, __webpack_require__) {
/* WEBPACK VAR INJECTION */(function(_, Icons) {module.exports = {
_showingPIP: false,
initialize: function () {
if (isChanX) {
Player.userTemplate.maintain(Player.minimised, 'chanXTemplate', [ 'chanXControls' ], [ 'show', 'hide', 'stop' ]);
}
Player.on('rendered', Player.minimised.render);
Player.on('show', Player.minimised.hidePIP);
Player.on('hide', Player.minimised.showPIP);
Player.on('stop', Player.minimised.hidePIP);
Player.on('playsound', Player.minimised.showPIP);
},
render: function () {
if (Player.container && isChanX) {
let container = document.querySelector(`.${ns}-chan-x-controls`);
// Create the element if it doesn't exist.
// Set the user template and control events on it to make all the buttons work.
if (!container) {
container = _.elementBefore(`<span class="${ns}-chan-x-controls ${ns}-col-auto ${ns}-align-center"></span>`, document.querySelector('#shortcuts').firstElementChild);
Player.events.addDelegatedListeners(container, {
click: [ Player.userTemplate.delegatedEvents.click, Player.controls.delegatedEvents.click ]
});
}
if (Player.config.chanXControls === 'never' || Player.config.chanXControls === 'closed' && !Player.isHidden) {
return container.innerHTML = '';
}
// Render the contents.
container.innerHTML = Player.userTemplate.build({
template: Player.config.chanXTemplate,
location: '4chan-X-controls',
sound: Player.playing,
replacements: {
'prev-button': `<a href="#" class="${ns}-media-control ${ns}-previous-button ${ns}-hover-fill">${Icons.skipStart} ${Icons.skipStartFill}</a>`,
'play-button': `<a href="#" class="${ns}-media-control ${ns}-play-button ${ns}-hover-fill ${!Player.audio || Player.audio.paused ? `${ns}-play` : ''}">${Icons.play} ${Icons.pause} ${Icons.playFill} ${Icons.pauseFill}</a>`,
'next-button': `<a href="#" class="${ns}-media-control ${ns}-next-button ${ns}-hover-fill">${Icons.skipEnd} ${Icons.skipEndFill} </a>`,
'sound-current-time': `<span class="${ns}-current-time">0:00</span>`,
'sound-duration': `<span class="${ns}-duration">0:00</span>`
}
});
}
},
/**
* Move the image to a picture in picture like thumnail.
*/
showPIP: function () {
if (!Player.isHidden || !Player.config.pip || !Player.playing || Player.minimised._showingPIP) {
return;
}
Player.minimised._showingPIP = true;
const image = document.querySelector(`.${ns}-image-link`);
document.body.appendChild(image);
image.classList.add(`${ns}-pip`);
image.style.bottom = (Player.position.getHeaderOffset().bottom + 10) + 'px';
// Show the player again when the image is clicked.
image.addEventListener('click', Player.show);
},
/**
* Move the image back to the player.
*/
hidePIP: function () {
Player.minimised._showingPIP = false;
const image = document.querySelector(`.${ns}-image-link`);
const controls = Player.$(`.${ns}-controls`);
controls.parentNode.insertBefore(document.querySelector(`.${ns}-image-link`), controls);
image.classList.remove(`${ns}-pip`);
image.style.bottom = null;
image.removeEventListener('click', Player.show);
}
};
/* WEBPACK VAR INJECTION */}.call(this, __webpack_require__(/*! ./src/_ */ "./src/_.js"), __webpack_require__(/*! ./src/icons */ "./src/icons.js")))
/***/ }),
/***/ "./src/components/playlist/index.js":
/*!******************************************!*\
!*** ./src/components/playlist/index.js ***!
\******************************************/
/*! no static exports found */
/***/ (function(module, exports, __webpack_require__) {
/* WEBPACK VAR INJECTION */(function(_, Icons) {const { parseFiles, parseFileName } = __webpack_require__(/*! ../../file_parser */ "./src/file_parser.js");
const { postIdPrefix } = __webpack_require__(/*! ../../selectors */ "./src/selectors.js");
const itemMenuTemplate = __webpack_require__(/*! ./templates/item_menu.tpl */ "./src/components/playlist/templates/item_menu.tpl");
module.exports = {
atRoot: [ 'add', 'remove' ],
public: [ 'search' ],
template: __webpack_require__(/*! ./templates/player.tpl */ "./src/components/playlist/templates/player.tpl"),
listTemplate: __webpack_require__(/*! ./templates/list.tpl */ "./src/components/playlist/templates/list.tpl"),
delegatedEvents: {
click: { [`.${ns}-list-item`]: 'playlist.handleSelect' },
dragstart: { [`.${ns}-list-item`]: 'playlist.handleDragStart' },
dragenter: { [`.${ns}-list-item`]: 'playlist.handleDragEnter' },
dragend: { [`.${ns}-list-item`]: 'playlist.handleDragEnd' },
dragover: { [`.${ns}-list-item`]: e => e.preventDefault() },
drop: { [`.${ns}-list-item`]: e => e.preventDefault() },
keyup: { [`.${ns}-playlist-search`]: 'playlist._handleSearch' },
contextmenu: { [`.${ns}-list-item`]: 'playlist._handleItemMenu' }
},
undelegatedEvents: {
mouseenter: { [`.${ns}-list-item`]: 'playlist.updateHoverImage' },
mouseleave: { [`.${ns}-list-item`]: 'playlist.removeHoverImage' },
mousemove: { [`.${ns}-list-item`]: 'playlist.positionHoverImage' }
},
initialize: function () {
// Keep track of the last view style so we can return to it.
Player.playlist._lastView = Player.config.viewStyle === 'playlist' || Player.config.viewStyle === 'image'
? Player.config.viewStyle
: 'playlist';
Player.on('view', style => {
// Focus the playing song when switching to the playlist.
style === 'playlist' && Player.playlist.scrollToPlaying();
// Track state.
if (style === 'playlist' || style === 'image') {
Player.playlist._lastView = style;
}
});
// Keey track of of the hover image element.
Player.on('rendered', () => Player.playlist.hoverImage = Player.$(`.${ns}-hover-image`));
// Update the UI when a new sound plays, and scroll to it.
Player.on('playsound', sound => {
Player.playlist.showImage(sound);
Player.$all(`.${ns}-list-item.playing, .${ns}-list-item[data-id="${Player.playing.id}"]`).forEach(el => {
const newItem = Player.playlist.listTemplate({ sounds: [ Player.sounds.find(s => s.id === el.dataset.id) ] });
_.elementBefore(newItem, el, Player.playlist.undelegatedEvents);
el.parentNode.removeChild(el);
});
Player.config.viewStyle !== 'fullscreen' && Player.playlist.scrollToPlaying('nearest');
Player.config.autoScrollThread && sound.post && (location.href = location.href.split('#')[0] + '#' + postIdPrefix + sound.post);
});
// Reset to the placeholder image when the player is stopped.
Player.on('stop', () => {
Player.$all(`.${ns}-list-item.playing`).forEach(el => el.classList.remove('playing'));
Player.playlist.showImage({ image: `data:image/svg+xml;base64,${btoa(Icons.fcSounds)}` });
});
// Reapply filters when they change
Player.on('config:filters', Player.playlist.applyFilters);
// Listen to anything that can affect the display of hover images
Player.on('config:hoverImages', Player.playlist.setHoverImageVisibility);
Player.on('menu-open', Player.playlist.setHoverImageVisibility);
Player.on('menu-close', Player.playlist.setHoverImageVisibility);
// Listen to the search display being toggled
Player.on('config:showPlaylistSearch', Player.playlist.toggleSearch);
// Maintain changes to the user templates it's dependent values
Player.userTemplate.maintain(Player.playlist, 'rowTemplate', [ 'shuffle' ]);
},
/**
* Render the playlist.
*/
render: function () {
const container = Player.$(`.${ns}-list-container`);
container.innerHTML = Player.playlist.listTemplate();
Player.events.addUndelegatedListeners(document.body, Player.playlist.undelegatedEvents);
Player.playlist.hoverImage = Player.$(`.${ns}-hover-image`);
},
/**
* Restore the last playlist or image view.
*/
restore: function () {
Player.display.setViewStyle(Player.playlist._lastView || 'playlist');
},
/**
* Update the image displayed in the player.
*/
showImage: function (sound) {
const container = document.querySelector(`.${ns}-image-link`);
const img = container.querySelector(`.${ns}-image`);
const video = container.querySelector(`.${ns}-video`);
const background = container.querySelector(`.${ns}-background-image`);
img.src = background.src = '';
img.src = background.src = sound.imageOrThumb;
video.src = Player.isVideo ? sound.image : undefined;
if (Player.config.viewStyle !== 'fullscreen') {
container.href = sound.image;
}
container.classList[Player.isVideo ? 'add' : 'remove'](ns + '-show-video');
},
/**
* Switch between playlist and image view.
*/
toggleView: function (e) {
e && e.preventDefault();
let style = Player.config.viewStyle === 'playlist' ? 'image'
: Player.config.viewStyle === 'image' ? 'playlist'
: Player.playlist._lastView;
Player.display.setViewStyle(style);
},
/**
* Add a new sound from the thread to the player.
*/
add: function (sound, skipRender) {
try {
const id = sound.id;
// Make sure the sound is not a duplicate.
if (Player.sounds.find(sound => sound.id === id)) {
return;
}
// Add the sound with the location based on the shuffle settings.
let index = Player.config.shuffle
? Math.floor(Math.random() * Player.sounds.length - 1)
: Player.sounds.findIndex(s => Player.compareIds(s.id, id) > 1);
index < 0 && (index = Player.sounds.length);
Player.sounds.splice(index, 0, sound);
if (Player.container) {
if (!skipRender) {
// Add the sound to the playlist.
const list = Player.$(`.${ns}-list-container`);
let rowContainer = _.element(`<div>${Player.playlist.listTemplate({ sounds: [ sound ] })}</div>`, null, Player.playlist.undelegatedEvents);
if (index < Player.sounds.length - 1) {
const before = Player.$(`.${ns}-list-item[data-id="${Player.sounds[index + 1].id}"]`);
list.insertBefore(rowContainer.children[0], before);
} else {
list.appendChild(rowContainer.children[0]);
}
}
// If nothing else has been added yet show the image for this sound.
if (Player.sounds.length === 1) {
Player.playlist.showImage(sound);
}
// Auto show if enabled, we're on a thread, and this is the first non-standlone item.
if (Player.config.autoshow && /\/thread\//.test(location.href) && Player.sounds.filter(s => !s.standaloneVideo).length === 1) {
Player.show();
}
Player.trigger('add', sound);
}
} catch (err) {
Player.logError('There was an error adding to the sound player. Please check the console for details.', err);
console.log('[4chan sounds player]', sound);
}
},
addFromFiles: function (files) {
// Check each of the files for sounds.
[ ...files ].forEach(file => {
if (!file.type.startsWith('image') && file.type !== 'video/webm') {
return;
}
const imageSrc = URL.createObjectURL(file);
const type = file.type;
let thumbSrc = imageSrc;
// If it's not a webm just use the full image as the thumbnail
if (file.type !== 'video/webm') {
return _continue();
}
// If it's a webm grab the first frame as the thumbnail
const canvas = document.createElement('canvas');
const video = document.createElement('video');
const context = canvas.getContext('2d');
video.addEventListener('loadeddata', function () {
context.drawImage(video, 0, 0);
thumbSrc = canvas.toDataURL();
_continue();
});
video.src = imageSrc;
function _continue() {
parseFileName(file.name, imageSrc, null, thumbSrc, null, true).forEach(sound => Player.add({ ...sound, local: true, type }));
}
});
},
/**
* Remove a sound
*/
remove: function (sound) {
const index = Player.sounds.indexOf(sound);
// If the playing sound is being removed then play the next sound.
if (Player.playing === sound) {
Player.next({ force: true, paused: Player.audio.paused });
}
// Remove the sound from the the list and play order.
index > -1 && Player.sounds.splice(index, 1);
// Remove the item from the list.
Player.$(`.${ns}-list-container`).removeChild(Player.$(`.${ns}-list-item[data-id="${sound.id}"]`));
Player.trigger('remove', sound);
},
/**
* Handle an playlist item being clicked. Either open/close the menu or play the sound.
*/
handleSelect: function (e) {
// Ignore if a link was clicked.
if (e.target.nodeName === 'A' || e.target.closest('a')) {
return;
}
e.preventDefault();
const id = e.eventTarget.getAttribute('data-id');
const sound = id && Player.sounds.find(sound => sound.id === id);
sound && Player.play(sound);
},
/**
* Read all the sounds from the thread again.
*/
refresh: function () {
parseFiles(document.body);
},
/**
* Display an item menu.
*/
_handleItemMenu: function (e) {
e.preventDefault();
e.stopPropagation();
const id = e.eventTarget.getAttribute('data-id');
const sound = Player.sounds.find(s => s.id === id);
// Add row item menus to the list container. Append to the container otherwise.
const listContainer = e.eventTarget.closest(`.${ns}-list-container`);
const parent = listContainer || Player.container;
// Create the menu.
const dialog = _.element(itemMenuTemplate({ sound, postIdPrefix }), parent);
const relative = e.eventTarget.classList.contains(`${ns}-item-menu-button`) ? e.eventTarget : e;
Player.userTemplate._showMenu(relative, dialog, parent);
},
/**
* Toggle the hoverImages setting
*/
toggleHoverImages: function (e) {
e && e.preventDefault();
Player.set('hoverImages', !Player.config.hoverImages);
},
/**
* Only show the hover image with the setting enabled, no item menu open, and nothing being dragged.
*/
setHoverImageVisibility: function () {
const container = Player.$(`.${ns}-player`);
const hideImage = !Player.config.hoverImages
|| Player.playlist._dragging
|| container.querySelector(`.${ns}-menu`);
container.classList[hideImage ? 'add' : 'remove'](`${ns}-hide-hover-image`);
},
/**
* Set the displayed hover image and reposition.
*/
updateHoverImage: function (e) {
const id = e.currentTarget.getAttribute('data-id');
const sound = Player.sounds.find(sound => sound.id === id);
Player.playlist.hoverImage.style.display = 'block';
Player.playlist.hoverImage.setAttribute('src', sound.thumb);
Player.playlist.positionHoverImage(e);
},
/**
* Reposition the hover image to follow the cursor.
*/
positionHoverImage: function (e) {
const { width, height } = Player.playlist.hoverImage.getBoundingClientRect();
const maxX = document.documentElement.clientWidth - width - 5;
Player.playlist.hoverImage.style.left = (Math.min(e.clientX, maxX) + 5) + 'px';
Player.playlist.hoverImage.style.top = (e.clientY - height - 10) + 'px';
},
/**
* Hide the hover image when nothing is being hovered over.
*/
removeHoverImage: function () {
Player.playlist.hoverImage.style.display = 'none';
},
/**
* Start dragging a playlist item.
*/
handleDragStart: function (e) {
Player.playlist._dragging = e.eventTarget;
Player.playlist.setHoverImageVisibility();
e.eventTarget.classList.add(`${ns}-dragging`);
e.dataTransfer.setDragImage(new Image(), 0, 0);
e.dataTransfer.dropEffect = 'move';
e.dataTransfer.setData('text/plain', e.eventTarget.getAttribute('data-id'));
},
/**
* Swap a playlist item when it's dragged over another item.
*/
handleDragEnter: function (e) {
if (!Player.playlist._dragging) {
return;
}
e.preventDefault();
const moving = Player.playlist._dragging;
const id = moving.getAttribute('data-id');
let before = e.target.closest && e.target.closest(`.${ns}-list-item`);
if (!before || moving === before) {
return;
}
const movingIdx = Player.sounds.findIndex(s => s.id === id);
const list = moving.parentNode;
// If the item is being moved down it need inserting before the node after the one it's dropped on.
const position = moving.compareDocumentPosition(before);
if (position & 0x04) {
before = before.nextSibling;
}
// Move the element and sound.
// If there's nothing to go before then append.
if (before) {
const beforeId = before.getAttribute('data-id');
const beforeIdx = Player.sounds.findIndex(s => s.id === beforeId);
const insertIdx = movingIdx < beforeIdx ? beforeIdx - 1 : beforeIdx;
list.insertBefore(moving, before);
Player.sounds.splice(insertIdx, 0, Player.sounds.splice(movingIdx, 1)[0]);
} else {
Player.sounds.push(Player.sounds.splice(movingIdx, 1)[0]);
list.appendChild(moving);
}
Player.trigger('order');
},
/**
* Start dragging a playlist item.
*/
handleDragEnd: function (e) {
if (!Player.playlist._dragging) {
return;
}
e.preventDefault();
delete Player.playlist._dragging;
e.eventTarget.classList.remove(`${ns}-dragging`);
Player.playlist.setHoverImageVisibility();
},
/**
* Scroll to the playing item, unless there is an open menu in the playlist.
*/
scrollToPlaying: function (type = 'center') {
if (Player.$(`.${ns}-list-container .${ns}-menu`)) {
return;
}
const playing = Player.$(`.${ns}-list-item.playing`);
playing && playing.scrollIntoView({ block: type });
},
/**
* Remove any user filtered items from the playlist.
*/
applyFilters: function () {
Player.sounds.filter(sound => !Player.acceptedSound(sound)).forEach(Player.playlist.remove);
},
/**
* Search the playlist
*/
_handleSearch: function (e) {
Player.playlist.search(e.eventTarget.value.toLowerCase());
},
search: function (v) {
const lastSearch = Player.playlist._lastSearch;
Player.playlist._lastSearch = v;
if (v === lastSearch) {
return;
}
if (!v) {
return Player.$all(`.${ns}-list-item`).forEach(el => el.style.display = null);
}
Player.sounds.forEach(sound => {
const row = Player.$(`.${ns}-list-item[data-id="${sound.id}"]`);
row && (row.style.display = Player.playlist.matchesSearch(sound) ? null : 'none');
});
},
matchesSearch: function (sound) {
const v = Player.playlist._lastSearch;
return !v
|| sound.title.toLowerCase().includes(v)
|| String(sound.post.toLowerCase()).includes(v)
|| String(sound.src.toLowerCase()).includes(v);
},
toggleSearch: function (show) {
const input = Player.$(`.${ns}-playlist-search`);
!show && Player.playlist._lastSearch && Player.playlist.search();
input.style.display = show ? null : 'none';
show && input.focus();
}
};
/* WEBPACK VAR INJECTION */}.call(this, __webpack_require__(/*! ./src/_ */ "./src/_.js"), __webpack_require__(/*! ./src/icons */ "./src/icons.js")))
/***/ }),
/***/ "./src/components/playlist/templates/item_menu.tpl":
/*!*********************************************************!*\
!*** ./src/components/playlist/templates/item_menu.tpl ***!
\*********************************************************/
/*! no static exports found */
/***/ (function(module, exports) {
module.exports = (data = {}) => `<div class="${ns}-menu dialog ${ns}-dialog" id="menu" tabindex="0" data-type="post" style="position: fixed;">
<a class="${ns}-remove-link entry focused" href="javascript:;" data-id="${data.sound.id}">Remove</a>
${data.sound.post ? `<a class="entry" href="#${data.postIdPrefix + data.sound.post}">Show Post</a>` : ''}
<div class="entry has-submenu">
Open
<div class="dialog submenu" style="inset: 0px auto auto 100%;">
<a class="entry" href="${data.sound.image}" target="_blank">Image</a>
<a class="entry" href="${data.sound.src}" target="_blank">Sound</a>
</div>
</div>
<div class="entry has-submenu">
Download
<div class="dialog submenu" style="inset: 0px auto auto 100%;">
<a class="${ns}-download-link entry" href="javascript:;" data-src="${data.sound.image}" data-name="${data.sound.filename}">Image</a>
<a class="${ns}-download-link entry" href="javascript:;" data-src="${data.sound.src}" data-name="${data.sound.name}">Sound</a>
</div>
</div>
<div class="entry has-submenu">
Filter
<div class="dialog submenu" style="inset: 0px auto auto 100%;">
${data.sound.imageMD5 ? `<a class="${ns}-filter-link entry" href="javascript:;" data-filter="${data.sound.imageMD5}">Image</a>` : ''}
<a class="${ns}-filter-link entry" href="javascript:;" data-filter="${data.sound.src.replace(/^(https?\:)?\/\//, '')}">Sound</a>
</div>
</div>
</div>`
/***/ }),
/***/ "./src/components/playlist/templates/list.tpl":
/*!****************************************************!*\
!*** ./src/components/playlist/templates/list.tpl ***!
\****************************************************/
/*! no static exports found */
/***/ (function(module, exports) {
module.exports = (data = {}) => (data.sounds || Player.sounds).map(sound =>
`<div class="${ns}-list-item ${ns}-row ${sound.playing ? 'playing' : ''}" data-id="${sound.id}" ${!Player.playlist.matchesSearch(sound) ? 'style="display: none"' : ''} draggable="true">
${Player.userTemplate.build({
template: Player.config.rowTemplate,
location: 'item-' + sound.id,
sound,
outerClass: `${ns}-col-auto`
})}
</div>`
).join('')
/***/ }),
/***/ "./src/components/playlist/templates/player.tpl":
/*!******************************************************!*\
!*** ./src/components/playlist/templates/player.tpl ***!
\******************************************************/
/*! no static exports found */
/***/ (function(module, exports, __webpack_require__) {
/* WEBPACK VAR INJECTION */(function(Icons) {module.exports = (data = {}) => `<a class="${ns}-image-link" target="_blank">
<img class="${ns}-background-image"></img>
<img id="fcspImage" class="${ns}-image" src="data:image/svg+xml;base64,${btoa(Icons.fcSounds)}"></img>
<video class="${ns}-video"></video>
</a>
<div class="${ns}-controls ${ns}-row">
${Player.controls.template(data)}
</div>
<input class="${ns}-playlist-search" type="input" placeholder="Search" style="min-width: 100%; box-sizing: border-box; ${!Player.config.showPlaylistSearch ? 'display: none;' : ''}">
<div class="${ns}-list-container">
${Player.playlist.listTemplate(data)}
</div>
<img class="${ns}-hover-image">`
/* WEBPACK VAR INJECTION */}.call(this, __webpack_require__(/*! ./src/icons */ "./src/icons.js")))
/***/ }),
/***/ "./src/components/position/index.js":
/*!******************************************!*\
!*** ./src/components/position/index.js ***!
\******************************************/
/*! no static exports found */
/***/ (function(module, exports, __webpack_require__) {
const selectors = __webpack_require__(/*! ../../selectors */ "./src/selectors.js");
/* eslint-disable max-statements-per-line, no-empty */
module.exports = {
delegatedEvents: {
mousedown: {
[`.${ns}-header`]: 'position.initMove',
[`.${ns}-expander`]: 'position.initResize'
},
touchstart: {
[`.${ns}-header`]: 'position.initMove',
[`.${ns}-expander`]: 'position.initResize'
}
},
initialize: function () {
// Set the header offsets for use in templates.
const { top, bottom } = Player.position.getHeaderOffset();
Player.config.offsetTop = top + 'px';
Player.config.offsetBottom = bottom + 'px';
// Apply the last position/size, and post width limiting, when the player is shown.
Player.on('show', async function () {
const [ top, left ] = (await GM.getValue('position') || '').split(':');
const [ width, height ] = (await GM.getValue('size') || '').split(':');
+top && +left && Player.position.move(top, left, true);
+width && +height && Player.position.resize(width, height);
if (Player.config.limitPostWidths) {
Player.position.setPostWidths();
window.addEventListener('scroll', Player.position.setPostWidths);
}
});
// Remove post width limiting when the player is hidden.
Player.on('hide', function () {
Player.position.setPostWidths();
window.removeEventListener('scroll', Player.position.setPostWidths);
});
// Reapply the post width limiting config values when they're changed.
Player.on('config', prop => {
if (prop === 'limitPostWidths' || prop === 'minPostWidth') {
window.removeEventListener('scroll', Player.position.setPostWidths);
Player.position.setPostWidths();
if (Player.config.limitPostWidths) {
window.addEventListener('scroll', Player.position.setPostWidths);
}
}
});
// Remove post width limit from inline quotes
new MutationObserver(function () {
document.querySelectorAll('#hoverUI .postContainer, .inline .postContainer, .backlink_container article').forEach(post => {
post.style.maxWidth = null;
post.style.minWidth = null;
});
}).observe(document.body, {
childList: true,
subtree: true
});
// Listen for changes from other tabs
Player.syncTab('position', value => Player.position.move(...value.split(':').concat(true)));
Player.syncTab('size', value => Player.position.resize(...value.split(':')));
},
/**
* Applies a max width to posts next to the player so they don't get hidden behind it.
*/
setPostWidths: function () {
const offset = (document.documentElement.clientWidth - Player.container.offsetLeft) + 10;
const enabled = !Player.isHidden && Player.config.limitPostWidths;
const startY = Player.container.offsetTop;
const endY = Player.container.getBoundingClientRect().height + startY;
document.querySelectorAll(selectors.limitWidthOf).forEach(post => {
const rect = enabled && post.getBoundingClientRect();
const limitWidth = enabled && rect.top + rect.height > startY && rect.top < endY;
post.style.maxWidth = limitWidth ? `calc(100% - ${offset}px)` : null;
post.style.minWidth = limitWidth && Player.config.minPostWidth ? `${Player.config.minPostWidth}` : null;
});
},
/**
* Handle the user grabbing the expander.
*/
initResize: function (e) {
try { e.preventDefault(); } catch (e) { }
Player._startX = (e.touches && e.touches[0] || e).clientX;
Player._startY = (e.touches && e.touches[0] || e).clientY;
let { width, height } = Player.container.getBoundingClientRect();
Player._startWidth = width;
Player._startHeight = height;
Player._startTop = Player.container.offsetTop;
Player._startLeft = Player.container.offsetLeft;
const dir = e.eventTarget.dataset.direction || 'se';
Player._resizeX = dir.includes('e') ? 1 : dir.includes('w') ? -1 : 0;
Player._resizeY = dir.includes('s') ? 1 : dir.includes('n') ? -1 : 0;
Player._resizeMoveX = dir.includes('w') ? -1 : 0;
Player._resizeMoveY = dir.includes('n') ? -1 : 0;
Player._resizeTarget = e.eventTarget;
document.documentElement.addEventListener('mousemove', Player.position.doResize, false);
document.documentElement.addEventListener('touchmove', Player.position.doResize, false);
document.documentElement.addEventListener('mouseup', Player.position.stopResize, false);
document.documentElement.addEventListener('touchend', Player.position.stopResize, false);
},
/**
* Handle the user dragging the expander.
*/
doResize: function (e) {
try { e.preventDefault(); } catch (e) { }
const xDelta = ((e.touches && e.touches[0] || e).clientX - Player._startX) * Player._resizeX;
const yDelta = ((e.touches && e.touches[0] || e).clientY - Player._startY) * Player._resizeY;
const reposition = Player._resizeTarget.dataset.bypassPosition !== 'true' && (Player._resizeMoveX || Player._resizeMoveY);
Player.position.resize(Player._startWidth + xDelta, Player._startHeight + yDelta, reposition || Player._resizeTarget.dataset.allowOffscreen);
// If the direction is north or east then the player will need moving first.
if (reposition) {
Player.position.move(Player._startLeft + (xDelta * Player._resizeMoveX), Player._startTop + (yDelta * Player._resizeMoveY));
}
},
/**
* Handle the user releasing the expander.
*/
stopResize: function (e) {
try { e.preventDefault(); } catch (e) { }
const { width, height } = Player.container.getBoundingClientRect();
document.documentElement.removeEventListener('mousemove', Player.position.doResize, false);
document.documentElement.removeEventListener('touchmove', Player.position.doResize, false);
document.documentElement.removeEventListener('mouseup', Player.position.stopResize, false);
document.documentElement.removeEventListener('touchend', Player.position.stopResize, false);
if (Player._resizeTarget.dataset.bypassSave !== 'true') {
GM.setValue('size', width + ':' + height);
if (Player._resizeMoveX || Player._resizeMoveY) {
GM.setValue('position', parseInt(Player.container.style.left, 10) + ':' + parseInt(Player.container.style.top, 10));
}
}
},
/**
* Resize the player.
*/
resize: function (width, height, allowOffscreen) {
if (!Player.container || Player.config.viewStyle === 'fullscreen') {
return;
}
const { bottom } = Player.position.getHeaderOffset();
// Make sure the player isn't going off screen.
if (!allowOffscreen) {
height = Math.min(height, document.documentElement.clientHeight - Player.container.offsetTop - bottom);
width = Math.min(width, document.documentElement.clientWidth - Player.container.offsetLeft);
}
Player.container.style.width = width + 'px';
Player.container.style.height = height + 'px';
Player.controls.preventWrapping();
},
/**
* Handle the user grabbing the header.
*/
initMove: function (e) {
if (e.target.nodeName === 'A' || e.target.closest('a') || e.target.classList.contains(`${ns}-expander`)) {
return;
}
try { e.preventDefault(); } catch (e) { }
Player.$(`.${ns}-header`).style.cursor = 'grabbing';
// Try to reapply the current sizing to fix oversized winows.
const { width, height } = Player.container.getBoundingClientRect();
Player.position.resize(width, height);
const clientX = (e.touches && e.touches[0] || e).clientX;
const clientY = (e.touches && e.touches[0] || e).clientY;
Player._offsetX = clientX - Player.container.offsetLeft;
Player._offsetY = clientY - Player.container.offsetTop;
document.documentElement.addEventListener('mousemove', Player.position.doMove, false);
document.documentElement.addEventListener('touchmove', Player.position.doMove, false);
document.documentElement.addEventListener('mouseup', Player.position.stopMove, false);
document.documentElement.addEventListener('touchend', Player.position.stopMove, false);
},
/**
* Handle the user dragging the header.
*/
doMove: function (e) {
try { e.preventDefault(); } catch (e) { }
const clientX = (e.touches && e.touches[0] || e).clientX;
const clientY = (e.touches && e.touches[0] || e).clientY;
Player.position.move(clientX - Player._offsetX, clientY - Player._offsetY);
},
/**
* Handle the user releasing the heaer.
*/
stopMove: function (e) {
try { e.preventDefault(); } catch (e) { }
document.documentElement.removeEventListener('mousemove', Player.position.doMove, false);
document.documentElement.removeEventListener('touchmove', Player.position.doMove, false);
document.documentElement.removeEventListener('mouseup', Player.position.stopMove, false);
document.documentElement.removeEventListener('touchend', Player.position.stopMove, false);
Player.$(`.${ns}-header`).style.cursor = null;
GM.setValue('position', parseInt(Player.container.style.left, 10) + ':' + parseInt(Player.container.style.top, 10));
},
/**
* Move the player.
*/
move: function (x, y, allowOffscreen) {
if (!Player.container) {
return;
}
const { top, bottom } = Player.position.getHeaderOffset();
// Ensure the player stays fully within the window.
const { width, height } = Player.container.getBoundingClientRect();
const maxX = allowOffscreen ? Infinity : document.documentElement.clientWidth - width;
const maxY = allowOffscreen ? Infinity : document.documentElement.clientHeight - height - bottom;
// Move the window.
Player.container.style.left = Math.max(0, Math.min(x, maxX)) + 'px';
Player.container.style.top = Math.max(top, Math.min(y, maxY)) + 'px';
if (Player.config.limitPostWidths) {
Player.position.setPostWidths();
}
},
/**
* Get the offset from the top or bottom required for the 4chan X header.
*/
getHeaderOffset: function () {
const docClasses = document.documentElement.classList;
const hasChanXHeader = docClasses.contains('fixed');
const headerHeight = hasChanXHeader ? document.querySelector('#header-bar').getBoundingClientRect().height : 0;
const top = hasChanXHeader && docClasses.contains('top-header') ? headerHeight : 0;
const bottom = hasChanXHeader && docClasses.contains('bottom-header') ? headerHeight : 0;
return { top, bottom };
},
/**
* Position a fixed item with respect to an element or event.
*/
showRelativeTo: function (item, relative) {
// Try and put the item aligned to the left under the relative.
const relRect = relative instanceof Node
? relative.getBoundingClientRect()
: { top: relative.clientY, left: relative.clientX, width: 0, height: 0 };
item.style.top = relRect.top + relRect.height + 'px';
item.style.left = relRect.left + 'px';
// Reposition around the relative if the item is off screen.
const { width: width, height: height } = item.getBoundingClientRect();
if (relRect.left + width > document.documentElement.clientWidth) {
item.style.left = (relRect.left + relRect.width - width) + 'px';
}
if (relRect.top + relRect.height + height > document.documentElement.clientHeight - Player.position.getHeaderOffset().bottom) {
item.style.top = (relRect.top - height) + 'px';
}
}
};
/***/ }),
/***/ "./src/components/settings/colorpicker.js":
/*!************************************************!*\
!*** ./src/components/settings/colorpicker.js ***!
\************************************************/
/*! no static exports found */
/***/ (function(module, exports, __webpack_require__) {
/* WEBPACK VAR INJECTION */(function(_) {const colorpickerTemplate = __webpack_require__(/*! ./templates/colorpicker.tpl */ "./src/components/settings/templates/colorpicker.tpl");
const HEIGHT = 200;
const WIDTH = 200;
module.exports = {
delegatedEvents: {
click: {
[`.${ns}-colorpicker-input, .${ns}-cp-preview`]: 'colorpicker.create',
[`.${ns}-apply-colorpicker`]: 'colorpicker._applyColorPicker',
[`.${ns}-close-colorpicker`]: _.noDefault(() => Player.display.closeDialogs())
},
change: {
[`.${ns}-rgb-input`]: 'colorpicker._handleRGBInput',
},
focusout: {
[`.${ns}-colorpicker-input`]: 'colorpicker._updatePreview'
},
mousedown: {
[`.${ns}-cp-saturation, .${ns}-cp-hue`]: e => {
const target = e.eventTarget;
target._mousedown = true;
document.documentElement.addEventListener('mouseup', _e => delete target._mousedown, { once: true });
Player.colorpicker[`_handle${e.eventTarget.classList.contains(`${ns}-cp-hue`) ? 'Hue' : 'Saturation'}Move`](e);
}
},
mousemove: {
[`.${ns}-cp-hue`]: 'colorpicker._handleHueMove',
[`.${ns}-cp-saturation`]: 'colorpicker._handleSaturationMove'
}
},
initialize: function () {
Player.on('menu-close', menu => menu._input && (delete menu._input._colorpicker));
},
create: function (e) {
e.preventDefault();
e.stopPropagation();
const parent = e.eventTarget.parentNode;
const input = e.eventTarget.nodeName === 'INPUT' ? e.eventTarget : parent.querySelector('input');
const preview = parent.querySelector(`.${ns}-cp-preview`);
if (!input || input._colorpicker) {
return;
}
Player.display.closeDialogs();
// Get the color from the preview.
const previewColor = window.getComputedStyle(preview).backgroundColor;
const rgbMatch = previewColor.match(/rgba?\((\d+), (\d+), (\d+)(?:, ([\d.]+))?\)/);
const rgb = [ +rgbMatch[1], +rgbMatch[2], +rgbMatch[3], isNaN(+rgbMatch[4]) ? 1 : rgbMatch[4] ];
const colorpicker = _.element(colorpickerTemplate({ HEIGHT, WIDTH, rgb }), parent);
Player.position.showRelativeTo(colorpicker, input);
input._colorpicker = colorpicker;
colorpicker._input = input;
colorpicker._colorpicker = { hsv: [ 0, 1, 1, 1 ], rgb: rgb };
// If there's a color in the input then update the hue/saturation positions to show it.
Player.colorpicker.updateOutput(colorpicker);
},
_handleHueMove: function (e) {
if (!e.eventTarget._mousedown) {
return;
}
e.preventDefault();
const colorpicker = e.eventTarget.closest(`.${ns}-colorpicker`);
const y = Math.max(0, e.clientY - e.eventTarget.getBoundingClientRect().top);
colorpicker._colorpicker.hsv[0] = y / HEIGHT;
const _hue = Player.colorpicker.hsv2rgb(colorpicker._colorpicker.hsv[0], 1, 1, 1);
colorpicker.querySelector(`.${ns}-cp-saturation`).style.background = `linear-gradient(to right, white, rgb(${_hue[0]}, ${_hue[1]}, ${_hue[2]}))`;
e.eventTarget.querySelector('.position').style.top = Math.max(-3, (y - 6)) + 'px';
Player.colorpicker.updateOutput(colorpicker, true);
},
_handleSaturationMove: function (e) {
if (!e.eventTarget._mousedown) {
return;
}
e.preventDefault();
const colorpicker = e.eventTarget.closest(`.${ns}-colorpicker`);
const saturationPosition = e.eventTarget.querySelector('.position');
const x = Math.max(0, e.clientX - e.eventTarget.getBoundingClientRect().left);
const y = Math.max(0, e.clientY - e.eventTarget.getBoundingClientRect().top);
colorpicker._colorpicker.hsv[1] = x / WIDTH;
colorpicker._colorpicker.hsv[2] = 1 - y / HEIGHT;
saturationPosition.style.top = Math.min(HEIGHT - 3, Math.max(-3, (y - 6))) + 'px';
saturationPosition.style.left = Math.min(WIDTH - 3, Math.max(-3, (x - 5))) + 'px';
Player.colorpicker.updateOutput(colorpicker, true);
},
_handleRGBInput: function (e) {
const colorpicker = e.eventTarget.closest(`.${ns}-colorpicker`);
colorpicker._colorpicker.rgb[+e.eventTarget.getAttribute('data-color')] = e.eventTarget.value;
Player.colorpicker.updateOutput(colorpicker);
},
updateOutput: function (colorpicker, fromHSV) {
const order = fromHSV ? [ 'hsv', 'rgb' ] : [ 'rgb', 'hsv' ];
colorpicker._colorpicker[order[1]] = Player.colorpicker[`${order[0]}2${order[1]}`](...colorpicker._colorpicker[order[0]]);
const [ r, g, b, a ] = colorpicker._colorpicker.rgb;
// Update the display.
if (fromHSV) {
colorpicker.querySelector(`.${ns}-rgb-input[data-color="0"]`).value = r;
colorpicker.querySelector(`.${ns}-rgb-input[data-color="1"]`).value = g;
colorpicker.querySelector(`.${ns}-rgb-input[data-color="2"]`).value = b;
colorpicker.querySelector(`.${ns}-rgb-input[data-color="3"]`).value = a;
} else {
const [ h, s, v ] = colorpicker._colorpicker.hsv;
const huePos = colorpicker.querySelector(`.${ns}-cp-hue .position`);
const satPos = colorpicker.querySelector(`.${ns}-cp-saturation .position`);
const _hue = Player.colorpicker.hsv2rgb(h, 1, 1, 1);
colorpicker.querySelector(`.${ns}-cp-saturation`).style.background = `linear-gradient(to right, white, rgb(${_hue[0]}, ${_hue[1]}, ${_hue[2]}))`;
huePos.style.top = (HEIGHT * h) - 3 + 'px';
satPos.style.left = (s * WIDTH) - 3 + 'px';
satPos.style.top = ((1 - v) * WIDTH) - 3 + 'px';
}
colorpicker.querySelector('.output-color').style.background = `rgb(${r}, ${g}, ${b}, ${a})`;
},
_applyColorPicker: function (e) {
e.preventDefault();
e.stopPropagation();
// Update the input.
const colorpicker = e.eventTarget.closest(`.${ns}-colorpicker`);
const [ r, g, b, a ] = colorpicker._colorpicker.rgb;
const input = colorpicker._input;
input.value = `rgb(${r}, ${g}, ${b}, ${a})`;
// Remove the colorpicker.
delete input._colorpicker;
colorpicker.parentNode.removeChild(colorpicker);
// Focus and blur to trigger the change handler.
input.focus();
input.blur();
},
hsv2rgb: function (h, s, v, a) {
const i = Math.floor((h * 6));
const f = (h * 6) - i;
const p = v * (1 - s);
const q = v * (1 - f * s);
const t = v * (1 - (1 - f) * s);
const mod = i % 6;
const r = [ v, q, p, p, t, v ][mod];
const g = [ t, v, v, q, p, p ][mod];
const b = [ p, p, t, v, v, q ][mod];
return [
Math.round(r * 255),
Math.round(g * 255),
Math.round(b * 255),
a
];
},
rgb2hsv: function (r, g, b, a) {
const max = Math.max(r, g, b);
const min = Math.min(r, g, b);
const d = max - min;
const s = (max === 0 ? 0 : d / max);
const v = max / 255;
let h;
/* eslint-disable max-statements-per-line */
switch (max) {
case min: h = 0; break;
case r: h = (g - b) + d * (g < b ? 6 : 0); h /= 6 * d; break;
case g: h = (b - r) + d * 2; h /= 6 * d; break;
case b: h = (r - g) + d * 4; h /= 6 * d; break;
}
/* eslint-enable max-statements-per-line */
return [ h, s, v, a ];
},
_updatePreview: function (e) {
const value = e.eventTarget.value;
const preview = e.eventTarget.parentNode.querySelector(`.${ns}-cp-preview`);
preview.style.background = value;
}
};
/* WEBPACK VAR INJECTION */}.call(this, __webpack_require__(/*! ./src/_ */ "./src/_.js")))
/***/ }),
/***/ "./src/components/settings/hosts.js":
/*!******************************************!*\
!*** ./src/components/settings/hosts.js ***!
\******************************************/
/*! no static exports found */
/***/ (function(module, exports, __webpack_require__) {
/* WEBPACK VAR INJECTION */(function(_) {const inputTemplate = __webpack_require__(/*! ./templates/host_input.tpl */ "./src/components/settings/templates/host_input.tpl");
module.exports = {
template: inputTemplate,
parse: function (newValue, hosts, e) {
hosts = { ...hosts };
const container = e.eventTarget.closest(`.${ns}-host-input`);
let name = container.getAttribute('data-host-name');
let host = hosts[name] = { ...hosts[name] };
const changedField = e.eventTarget.getAttribute('name');
try {
// If the name was changed then reassign in hosts and update the data-host-name attribute.
if (changedField === 'name' && newValue !== name) {
if (!newValue || hosts[newValue]) {
throw new PlayerError('A unique name for the host is required.', 'warning');
}
container.setAttribute('data-host-name', newValue);
hosts[newValue] = host;
delete hosts[name];
name = newValue;
}
// Validate URL
if (changedField === 'url' || changedField === 'soundUrl') {
try {
(changedField === 'url' || newValue) && new URL(newValue);
} catch (err) {
throw new PlayerError('The value must be a valid URL.', 'warning');
}
}
// Parse the data
if (changedField === 'data') {
try {
newValue = JSON.parse(newValue);
} catch (err) {
throw new PlayerError('The data must be valid JSON.', 'warning');
}
}
if (changedField === 'headers') {
try {
newValue = newValue ? JSON.parse(newValue) : undefined;
} catch (err) {
throw new PlayerError('The headers must be valid JSON.', 'warning');
}
}
} catch (err) {
host.invalid = true;
container.classList.add('invalid');
throw err;
}
if (newValue === undefined) {
delete host[changedField];
} else {
host[changedField] = newValue;
}
try {
const soundUrlValue = container.querySelector('[name=soundUrl]').value;
const headersValue = container.querySelector('[name=headers]').value;
if (name
&& JSON.parse(container.querySelector('[name=data]').value)
&& new URL(container.querySelector('[name=url]').value)
&& (!soundUrlValue || new URL(soundUrlValue))
&& (!headersValue || JSON.parse(headersValue))) {
delete host.invalid;
container.classList.remove('invalid');
}
} catch (err) {
// leave it invalid
}
return hosts;
},
add: function () {
const hosts = Player.config.uploadHosts;
const container = Player.$(`.${ns}-host-inputs`);
let name = 'New Host';
let i = 1;
while (Player.config.uploadHosts[name]) {
name = name + ' ' + ++i;
}
hosts[name] = { invalid: true, data: { file: '$file' } };
if (container.children[0]) {
_.elementBefore(inputTemplate([ name, hosts[name] ]), container.children[0]);
} else {
_.element(inputTemplate([ name, hosts[name] ]), container);
}
Player.settings.set('uploadHosts', hosts, { bypassValidation: true, bypassRender: true, silent: true });
},
remove: function (prop, e) {
const hosts = Player.config.uploadHosts;
const container = e.eventTarget.closest(`.${ns}-host-input`);
const name = container.getAttribute('data-host-name');
// For hosts in the defaults set null so we know to not include them on load
if (Player.settings.findDefault('uploadHosts').default[name]) {
hosts[name] = null;
} else {
delete hosts[name];
}
container.parentNode.removeChild(container);
Player.settings.set('uploadHosts', hosts, { bypassValidation: true, bypassRender: true });
},
setDefault: function (_new, _current, e) {
const selected = e.eventTarget.closest(`.${ns}-host-input`).getAttribute('data-host-name');
if (selected === Player.config.defaultUploadHost) {
return selected;
}
Object.keys(Player.config.uploadHosts).forEach(name => {
const checkbox = Player.$(`.${ns}-host-input[data-host-name="${name}"] input[data-property="defaultUploadHost"]`);
checkbox && (checkbox.checked = name === selected);
});
return selected;
},
restoreDefaults: function () {
Object.assign(Player.config.uploadHosts, Player.settings.findDefault('uploadHosts').default);
Player.set('uploadHosts', Player.config.uploadHosts, { bypassValidation: true });
}
};
/* WEBPACK VAR INJECTION */}.call(this, __webpack_require__(/*! ./src/_ */ "./src/_.js")))
/***/ }),
/***/ "./src/components/settings/index.js":
/*!******************************************!*\
!*** ./src/components/settings/index.js ***!
\******************************************/
/*! no static exports found */
/***/ (function(module, exports, __webpack_require__) {
/* WEBPACK VAR INJECTION */(function(_) {const settingsConfig = __webpack_require__(/*! config */ "./src/config/index.js");
const migrations = __webpack_require__(/*! ../../migrations */ "./src/migrations.js");
const hosts = __webpack_require__(/*! ./hosts */ "./src/components/settings/hosts.js");
module.exports = {
atRoot: [ 'set' ],
public: [ 'set', 'export', 'import', 'reset', 'load' ],
hosts,
template: __webpack_require__(/*! ./templates/settings.tpl */ "./src/components/settings/templates/settings.tpl"),
changelog: 'https://github.com/rcc11/4chan-sounds-player/releases',
delegatedEvents: {
click: {
[`.${ns}-settings .${ns}-heading-action`]: 'settings._handleAction',
[`.${ns}-settings-tab`]: 'settings._handleTab',
[`.${ns}-settings-reset-all`]: _.noDefault(() => Player.settings.load({}, { applyDefault: true, ignore: [ 'viewStyle' ] })),
[`.${ns}-settings-export`]: 'settings.export',
[`.${ns}-settings-import`]: 'settings.import',
},
focusout: {
[`.${ns}-settings input, .${ns}-settings textarea`]: 'settings._handleChange'
},
change: {
[`.${ns}-settings input[type=checkbox], .${ns}-settings select`]: 'settings._handleChange'
},
keydown: {
[`.${ns}-key-input`]: 'settings.handleKeyChange',
}
},
initialize: async function () {
Player.settings.view = 'Display';
// Apply the board theme as default.
Player.theme.applyBoardTheme({ bypassRender: true });
// Load the config.
await Player.settings.load(await GM.getValue('settings') || {}, {
applyDefault: true,
bypassAll: true
});
// Show update notifications.
if (Player.config.showUpdatedNotification && Player.config.VERSION && Player.config.VERSION !== "3.3.1") {
Player.alert(`4chan Sounds Player has been updated to <a href="${Player.settings.changelog}" target="_blank">version ${"3.3.1"}</a>.`);
}
// Listen for the player closing to apply the pause on hide setting.
Player.on('hide', function () {
if (Player.config.pauseOnHide) {
Player.pause();
}
});
// Listen for changes from other tabs
Player.syncTab('settings', value => Player.settings.load(value, {
bypassSave: true,
applyDefault: true,
ignore: [ 'viewStyle' ]
}));
},
render: function () {
const settingsContainer = Player.$(`.${ns}-settings`);
settingsContainer.innerHTML = Player.settings.template();
Player.events.addUndelegatedListeners(settingsContainer, Player.settings.undelegatedEvents);
Player.display.initPopovers(settingsContainer);
},
/**
* Update a setting.
*/
set: function (property, value, { bypassAll, bypassValidation, bypassSave, bypassRender, silent, bypassStylesheet, settingConfig } = {}) {
settingConfig = settingConfig || Player.settings.findDefault(property);
const previous = _.get(Player.config, property);
// Check if the value has actually changed.
if (!bypassValidation && _.isEqual(previous, value)) {
return;
}
// Set the new value.
_.set(Player.config, property, value);
// Trigger events, unless they are disabled in opts.
if (!bypassAll) {
!bypassStylesheet && settingConfig && settingConfig.updateStylesheet && Player.display.updateStylesheet();
!silent && Player.trigger('config', property, value, previous);
!silent && Player.trigger('config:' + property, value, previous);
!bypassSave && Player.settings.save();
!bypassRender && settingConfig.displayGroup && Player.settings.render();
}
return [ previous, value ];
},
/**
* Reset a setting to the default value
*/
reset: function (property, opts) {
let settingConfig = Player.settings.findDefault(property);
Player.set(property, settingConfig.default, { ...opts, settingConfig });
},
/**
* Load a configuration object.
*
* @param {Object} settings Config to load
* @param {Object} opts Same as Player.set, and applyDefault to reset defaults instead mixing current values.
*/
load: async function (settings, opts = {}) {
if (typeof settings === 'string') {
settings = JSON.parse(settings);
}
const changes = {};
settingsConfig.forEach(function _handleSetting(setting) {
if (setting.settings) {
return setting.settings.forEach(subSetting => _handleSetting({
property: setting.property,
default: setting.default,
...subSetting
}));
}
if (opts.ignore && opts.ignore.includes(setting.property)) {
return;
}
let value = _.get(settings, setting.property, opts.applyDefault ? setting.default : undefined);
if (value !== undefined) {
// Mix in default.
setting.mix && (value = { ...setting.default, ...(value || {}) });
const data = Player.set(setting.property, value, { bypassAll: true, settingConfig: setting });
data && (changes[setting.property] = data);
}
});
// Run any migrations to get up to date, and update the stored changes for event triggering.
Object.entries(await Player.settings.migrate(settings.VERSION)).forEach(([ prop, [ previous, current ] ]) => {
changes[prop] = [ changes[prop] ? changes[prop][1] : previous, current ];
});
// Finally, trigger events.
if (!opts.bypassAll) {
!opts.bypassStylesheet && Player.display.updateStylesheet();
!opts.silent && Object.entries(changes).forEach(([ prop, [ previous, current ] ]) => {
Player.trigger('config', prop, current, previous);
Player.trigger('config:' + prop, current, previous);
});
!opts.bypassSave && Player.settings.save();
!opts.bypassRender && Player.settings.render();
}
},
/**
* Persist the player settings.
*/
save: function () {
try {
// Filter settings that haven't been modified from the default.
const settings = settingsConfig.reduce(function _handleSetting(settings, setting) {
if (setting.settings) {
setting.settings.forEach(subSetting => _handleSetting(settings, {
property: setting.property,
default: setting.default,
...subSetting
}));
} else {
let userVal = _.get(Player.config, setting.property);
if (userVal !== undefined && !_.isEqual(userVal, setting.default)) {
// If the setting is a mixed in object only store items that differ from the default.
if (setting.mix) {
userVal = Object.keys(userVal).reduce((changed, key) => {
if (!_.isEqual(setting.default[key], userVal[key])) {
changed[key] = userVal[key];
}
return changed;
}, {});
}
_.set(settings, setting.property, userVal);
}
}
return settings;
}, {});
// Show the playlist or image view on load, whichever was last shown.
settings.viewStyle = Player.playlist._lastView;
// Store the player version with the settings.
settings.VERSION = "3.3.1";
// Save the settings.
return GM.setValue('settings', JSON.stringify(settings));
} catch (err) {
Player.logError('There was an error saving the sound player settings.', err);
}
},
/**
* Run migrations when the player is updated.
*/
migrate: async function (fromVersion) {
// Fall out if the player hasn't updated.
if (!fromVersion || fromVersion === "3.3.1") {
return {};
}
const changes = {};
for (let i = 0; i < migrations.length; i++) {
let mig = migrations[i];
if (Player.settings.compareVersions(fromVersion, mig.version) < 0) {
try {
console.log('[4chan sound player] Migrate:', mig.name);
Object.entries(await mig.run()).forEach(([ prop, [ current, previous ] ]) => {
changes[prop] = [ current, changes[prop] ? changes[prop][1] : previous ];
});
} catch (err) {
console.error(err);
}
}
}
return changes;
},
/**
* Compare two semver strings.
*/
compareVersions: function (a, b) {
const [ aVer, aHash ] = a.split('-');
const [ bVer, bHash ] = b.split('-');
const aParts = aVer.split('.');
const bParts = bVer.split('.');
for (let i = 0; i < 3; i++) {
if (+aParts[i] > +bParts[i]) {
return 1;
}
if (+aParts[i] < +bParts[i]) {
return -1;
}
}
return aHash !== bHash;
},
/**
* Find a setting in the default configuration.
*/
findDefault: function (property) {
let settingConfig;
settingsConfig.find(function (setting) {
if (setting.property === property) {
return settingConfig = setting;
}
if (setting.settings) {
let subSetting = setting.settings.find(_setting => _setting.property === property);
return subSetting && (settingConfig = { ...setting, settings: null, ...subSetting });
}
return false;
});
return settingConfig || { property };
},
/**
* Toggle whether the player or settings are displayed.
*/
toggle: function (group) {
// Blur anything focused so the change is applied.
let focused = Player.$(`.${ns}-settings :focus`);
focused && focused.blur();
// Restore the playlist if there's no group given and the settings are already open.
if (!group && Player.config.viewStyle === 'settings') {
return Player.playlist.restore();
}
// Switch to the settings view if it's not already showing.
if (Player.config.viewStyle !== 'settings') {
Player.display.setViewStyle('settings');
}
// Switch to a given group.
if (group && group !== Player.settings.view) {
Player.settings.showGroup(group);
}
},
/**
* Switch the displayed group
*/
_handleTab: function (e) {
const group = e.eventTarget.getAttribute('data-group');
if (group) {
e.preventDefault();
Player.settings.showGroup(group);
}
},
showGroup: function (group) {
Player.settings.view = group;
const currentGroup = Player.$(`.${ns}-settings-group.active`);
const currentTab = Player.$(`.${ns}-settings-tab.active`);
currentGroup && currentGroup.classList.remove('active');
currentTab && currentTab.classList.remove('active');
Player.$(`.${ns}-settings-group[data-group="${group}"]`).classList.add('active');
Player.$(`.${ns}-settings-tab[data-group="${group}"]`).classList.add('active');
},
import: async function (e) {
e && e.preventDefault();
const fileInput = _.element('<input type="file">');
const _import = async () => {
let config;
try {
config = await (await fetch(URL.createObjectURL(fileInput.files[0]))).json();
} catch (err) {
Player.logError(`Expected a JSON config file and got ${fileInput.files[0].type}.`, err, 'warning');
}
fileInput.removeEventListener('change', _import);
Player.settings.load(config);
};
fileInput.addEventListener('change', _import);
fileInput.click();
},
export: async function (e) {
e && e.preventDefault();
// Use the saved settings to only export non-default user settings. Shift click exports everything for testing.
const settings = e && e.shiftKey ? JSON.stringify(Player.config, null, 4) : await GM.getValue('settings') || '{}';
const blob = new Blob([ settings ], { type: 'application/json' });
const a = _.element(`<a href="${URL.createObjectURL(blob)}" download="4chan-sp-config.json" rel="noopener" target="_blank"></a>`);
a.click();
URL.revokeObjectURL(a.href);
},
/**
* Handle the user making a change in the settings view.
*/
_handleChange: function (e) {
try {
const input = e.eventTarget;
const property = input.getAttribute('data-property');
if (!property) {
return;
}
let settingConfig = Player.settings.findDefault(property);
// Get the new value of the setting.
const currentValue = _.get(Player.config, property);
let newValue = input[input.getAttribute('type') === 'checkbox' ? 'checked' : 'value'];
if (settingConfig.parse) {
newValue = Player.getHandler(settingConfig.parse)(newValue, currentValue, e);
}
if (settingConfig && settingConfig.split) {
newValue = newValue.split(decodeURIComponent(settingConfig.split));
}
// Not the most stringent check but enough to avoid some spamming.
if (!_.isEqual(currentValue, newValue, !settingConfig.looseCompare)) {
// Update the setting.
Player.set(property, newValue, { bypassValidation: true, bypassRender: true, settingConfig });
}
} catch (err) {
Player.logError('There was an error updating the setting.', err);
}
},
/**
* Converts a key event in an input to a string representation set as the input value.
*/
handleKeyChange: function (e) {
e.preventDefault();
if (e.key === 'Shift' || e.key === 'Control' || e.key === 'Meta') {
return;
}
e.eventTarget.value = Player.hotkeys.stringifyKey(e);
},
/**
* Handle an action link next to a heading being clicked.
*/
_handleAction: function (e) {
e.preventDefault();
const property = e.eventTarget.getAttribute('data-property');
const handlerName = e.eventTarget.getAttribute('data-handler');
const handler = _.get(Player, handlerName);
handler && handler(property, e);
}
};
/* WEBPACK VAR INJECTION */}.call(this, __webpack_require__(/*! ./src/_ */ "./src/_.js")))
/***/ }),
/***/ "./src/components/settings/templates/colorpicker.tpl":
/*!***********************************************************!*\
!*** ./src/components/settings/templates/colorpicker.tpl ***!
\***********************************************************/
/*! no static exports found */
/***/ (function(module, exports, __webpack_require__) {
/* WEBPACK VAR INJECTION */(function(Icons) {module.exports = (data = {}) => `<div class="${ns}-colorpicker ${ns}-dialog dialog" data-allow-click="true" style="top: 0px; left: 0px;">
<div class="${ns}-cp-saturation" style="height: ${data.HEIGHT}px; width: ${data.WIDTH}px;">
<div class="position" style="left: ${data.WIDTH - 3}px; top: -3px;"></div>
</div>
<div class="${ns}-cp-hue" style="height: ${data.HEIGHT}px">
<div class="position"></div>
</div>
<div class="${ns}-output" style="text-align: right;">
<a href="#" class="${ns}-close-colorpicker">${Icons.close}</a>
<div class="output-color" style="background: rgb(${data.rgb[0]}, ${data.rgb[1]}, ${data.rgb[2]});"></div>
<table>
<tr><td>R:</td><td><input type="text" class="${ns}-rgb-input" data-color="0" value="${data.rgb[0]}"></td></tr>
<tr><td>G:</td><td><input type="text" class="${ns}-rgb-input" data-color="1" value="${data.rgb[1]}"></td></tr>
<tr><td>B:</td><td><input type="text" class="${ns}-rgb-input" data-color="2" value="${data.rgb[2]}"></td></tr>
<tr><td>A:</td><td><input type="text" class="${ns}-rgb-input" data-color="3" value="${data.rgb[3]}"></td></tr>
</table>
<button class="${ns}-apply-colorpicker">Apply</button><br>
</div>
</div>`
/* WEBPACK VAR INJECTION */}.call(this, __webpack_require__(/*! ./src/icons */ "./src/icons.js")))
/***/ }),
/***/ "./src/components/settings/templates/host_input.tpl":
/*!**********************************************************!*\
!*** ./src/components/settings/templates/host_input.tpl ***!
\**********************************************************/
/*! no static exports found */
/***/ (function(module, exports) {
module.exports = (data = {}) => data[1] ? `<div class="${ns}-row ${ns}-col ${ns}-host-input ${data[1].invalid ? 'invalid' : ''}" data-host-name="${data[0]}">
<div class="${ns}-row ${ns}-host-controls">
<div class="${ns}-col-auto">
<label>
<input type="checkbox" data-property="defaultUploadHost" ${Player.config.defaultUploadHost === data ? 'checked': ''}>
Default
</label>
</div>
<div class="${ns}-col-auto"><a href="#" class="${ns}-heading-action ${ns}-remove-host" data-handler="settings.hosts.remove" data-property="uploadHosts">Remove</a></div>
</div>
<div class="${ns}-row">
<div class="${ns}-col"><input type="text" data-property="uploadHosts" name="name" value="${data[0] || ''}" placeholder="Name"></div>
<div class="${ns}-col"><input type="text" data-property="uploadHosts" name="url" value="${data[1].url || ''}" placeholder="URL"></div>
<div class="${ns}-col"><input type="text" data-property="uploadHosts" name="responsePath" value="${data[1].responsePath || ''}" placeholder="Response Path"></div>
<div class="${ns}-col"><input type="text" data-property="uploadHosts" name="responseMatch" value="${data[1].responseMatch || ''}" placeholder="Response Match"></div>
<div class="${ns}-col"><input type="text" data-property="uploadHosts" name="soundUrl" value="${data[1].soundUrl || ''}" placeholder="File URL Format"></div>
</div>
<div class="${ns}-row">
<div class="${ns}-col"><textarea data-property="uploadHosts" name="data" placeholder="Data (JSON)">${JSON.stringify(data[1].data, null, 4)}</textarea></div>
</div>
<div class="${ns}-row">
<div class="${ns}-col"><textarea data-property="uploadHosts" name="headers" placeholder="Headers (JSON)">${data[1].headers ? JSON.stringify(data[1].headers, null, 4) : ''}</textarea></div>
</div>
</div>` : ''
/***/ }),
/***/ "./src/components/settings/templates/settings.tpl":
/*!********************************************************!*\
!*** ./src/components/settings/templates/settings.tpl ***!
\********************************************************/
/*! no static exports found */
/***/ (function(module, exports, __webpack_require__) {
/* WEBPACK VAR INJECTION */(function(Icons, _) {module.exports = (data = {}) => {
const settingsConfig = __webpack_require__(/*! config */ "./src/config/index.js");
const groups = settingsConfig.reduce((groups, setting) => {
if (setting.displayGroup) {
groups[setting.displayGroup] || (groups[setting.displayGroup] = []);
groups[setting.displayGroup].push(setting);
}
return groups;
}, {});
let tpl = `<div class="${ns}-settings-tabs ${ns}-row">
<div class="${ns}-settings-tab-group ${ns}-col-auto">
<a href="#" class="${ns}-settings-reset-all ${ns}-settings-tab" title="Reset all settings to their default values." title="Reset all to default.">${Icons.reboot}</a>
<a href="#" class="${ns}-settings-export ${ns}-settings-tab" title="Export. Shift click to export all settings. Otherwise only modified settings are included in the export.">${Icons.boxArrowRight}</a>
<a href="#" class="${ns}-settings-import ${ns}-settings-tab" title="Import. Settings not included in the import will be left as their current value.">${Icons.boxArrowInLeft}</a>
<a href="${Player.settings.changelog}" class="${ns}-settings-tab" target="_blank" title="v${"3.3.1"}">${Icons.github}</a>
</div>
<div class="${ns}-settings-tab-group ${ns}-col-auto">
${Object.keys(groups).map(name =>
`<a href="javascript:;" class="${ns}-settings-tab ${Player.settings.view !== name ? '' : 'active'}" data-group="${name}">${name}</a>`
).join(' | ')}
</div>
</div>`;
Object.keys(groups).forEach(name => {
tpl += `<div class="${ns}-settings-group ${Player.settings.view !== name ? '' : 'active'}" data-group="${name}">`;
groups[name].forEach(function addSetting(setting) {
// Filter settings with a null display method;
if (setting.displayMethod === null) {
return;
}
tpl += `
<div class="${ns}-row ${ns}-align-${setting.isSubSetting ? 'start' : 'center'} ${setting.isSubSetting ? `${ns}-sub-settings` : ''}">
<div class="${ns}-col ${!setting.isSubSetting ? `${ns}-heading` : `${ns}-space-between`}">
<span>
${setting.title}
${setting.description ? `<i class="${ns}-info-circle ${ns}-popover" data-content="${setting.description}">${Icons.infoCircle}</i>` : ''}
</span>
${!setting.actions || !setting.actions.length ? '' : `<div style="display: inline-block; margin: 0 .25rem">
${(setting.actions || []).map(action => `<a href="#" class="${ns}-heading-action" data-handler="${action.handler}" data-property="${setting.property}">${action.title}</a>`).join(' ')}
</div>`}
</div>`;
if (setting.text) {
tpl += setting.dismissTextId
? `<div class="${ns}-col" style="min-width: 100%">`
+ Player.display.ifNotDismissed(
setting.dismissTextId,
setting.dismissRestoreText,
`<div data-dismiss-id="${setting.dismissTextId}">`
+ setting.text
+ `<a href="javascript:;" class="${ns}-dismiss-link" data-dismiss="${setting.dismissTextId}" style="display:block; margin-top:.25rem">Dismiss</a>`
+ `</div>`
)
+ `</div>`
: setting.text;
};
if (setting.settings) {
setting.settings.forEach(subSetting => addSetting({
...setting,
actions: null,
settings: null,
description: null,
...subSetting,
isSubSetting: true
}));
} else {
let value = _.get(Player.config, setting.property, setting.default),
attrs = (setting.attrs || '') + (setting.class ? ` class="${setting.class}"` : '') + ` data-property="${setting.property}"`,
displayMethod = setting.displayMethod,
displayMethodFunction = typeof displayMethod === 'function' ? displayMethod : _.get(Player, displayMethod);
if (setting.format) {
value = Player.getHandler(setting.format)(value);
}
let type = typeof value;
if (setting.split) {
value = value.join(setting.split);
} else if (type === 'object') {
value = JSON.stringify(value, null, 4);
}
tpl += typeof displayMethodFunction === 'function'
? displayMethodFunction(value, attrs)
: type === 'boolean'
? `<div class="${ns}-col"><input type="checkbox" ${attrs} ${value ? 'checked' : ''}></div>`
: displayMethod === 'textarea' || type === 'object'
? `<div class="${ns}-row ${ns}-col"><textarea ${attrs}>${value}</textarea></div>`
: setting.options
? `<div class="${ns}-col">
<select ${attrs}>
${Object.keys(setting.options).map(k => `<option value="${k}" ${value === k ? 'selected' : ''}>
${setting.options[k]}
</option>`).join('')}
</select>
</div>`
: `<div class="${ns}-col"><input type="text" ${attrs} value="${value}"></div>`;
}
tpl += '</div>';
});
tpl += '</div>';
});
return tpl;
}
/* WEBPACK VAR INJECTION */}.call(this, __webpack_require__(/*! ./src/icons */ "./src/icons.js"), __webpack_require__(/*! ./src/_ */ "./src/_.js")))
/***/ }),
/***/ "./src/components/theme/index.js":
/*!***************************************!*\
!*** ./src/components/theme/index.js ***!
\***************************************/
/*! no static exports found */
/***/ (function(module, exports, __webpack_require__) {
/* WEBPACK VAR INJECTION */(function(_) {const selectors = __webpack_require__(/*! ../../selectors */ "./src/selectors.js");
const settingsConfig = __webpack_require__(/*! config */ "./src/config/index.js");
const saveMenuTemplate = __webpack_require__(/*! ./templates/save_theme_menu.tpl */ "./src/components/theme/templates/save_theme_menu.tpl");
module.exports = {
public: [ 'switch', 'next', 'previous' ],
savedThemesTemplate: __webpack_require__(/*! ./templates/saved_themes.tpl */ "./src/components/theme/templates/saved_themes.tpl"),
themeKeybindsTemplate: __webpack_require__(/*! ./templates/theme_keybinds.tpl */ "./src/components/theme/templates/theme_keybinds.tpl"),
delegatedEvents: {
click: {
[`.${ns}-save-theme`]: 'theme._save',
[`.${ns}-toggle-theme-save-fields`]: _.noDefault(() => Player.theme._toggleSaveFields())
},
keyup: {
[`.${ns}-save-theme-name`]: e => {
Player.$(`.${ns}-save-theme`).innerHTML = Player.config.savedThemes[e.eventTarget.value] ? 'Update' : 'Create';
}
}
},
initialize: async function () {
// Create the user stylesheet and update it when dependent config values are changed.
Player.theme.render();
Player.userTemplate.maintain(Player.theme, 'customCSS');
Player.theme.validateOrder();
},
render: function () {
Player.userStylesheet = Player.userStylesheet || _.element('<style id="sound-player-user-css"></style>', document.head);
Player.userStylesheet.innerHTML = Player.userTemplate.build({
template: '/* Sounds Player User CSS */\n\n' + Player.config.customCSS,
sound: Player.playing,
ignoreButtons: true,
ignoreDisplayBlocks: true,
ignoreSoundName: true,
ignoreVersion: true
});
},
forceBoardTheme: function () {
Player.theme.applyBoardTheme({ force: true });
Player.settings.save();
},
/**
* Get colors from the board theme.
*/
applyBoardTheme: function (opts = {}) {
// Create a reply element to gather the style from
const div = _.element(`<div class="${selectors.styleFetcher}"></div>`, document.body);
const style = document.defaultView.getComputedStyle(div);
// Make sure the style is loaded.
// TODO: This sucks. Should observe the stylesheets for changes to make it work.
// That would also make theme changes apply without a reload.
if (style.backgroundColor === 'rgba(0, 0, 0, 0)') {
return setTimeout(Player.display.applyBoardTheme, 0);
}
Object.assign(style, { page_background: window.getComputedStyle(document.body).backgroundColor });
// Apply the computed style to the color config.
const colorSettingMap = {
'colors.text': 'color',
'colors.background': 'backgroundColor',
'colors.odd_row': 'backgroundColor',
'colors.border': 'borderBottomColor',
// If the border is the same color as the text don't use it as a background color.
'colors.even_row': style.borderBottomColor === style.color ? 'backgroundColor' : 'borderBottomColor',
// Set this for use in custom css and templates
'colors.page_background': 'page_background'
};
settingsConfig.find(s => s.property === 'colors').settings.forEach(setting => {
const updateConfig = opts.force || (setting.default === _.get(Player.config, setting.property));
colorSettingMap[setting.property] && (setting.default = style[colorSettingMap[setting.property]]);
updateConfig && Player.set(setting.property, setting.default, { bypassSave: true, bypassRender: true, bypassStylesheet: true });
});
// Clean up the element.
document.body.removeChild(div);
if (!opts.bypassRender) {
// Updated the stylesheet.
Player.display.updateStylesheet();
// Re-render the settings.
Player.settings.render();
}
},
/**
* Switch to the next theme, wrapping round to the beginning.
*/
next: function () {
const order = [ 'Default' ].concat(Player.config.savedThemesOrder);
const cIndex = order.indexOf(Player.config.selectedTheme);
const next = order[(cIndex + order.length + 1) % order.length];
Player.theme.switch(next);
},
/**
* Switch to the previous theme, wrapping round to the end.
*/
previous: function () {
const order = [ 'Default' ].concat(Player.config.savedThemesOrder);
const cIndex = order.indexOf(Player.config.selectedTheme);
const previous = order[(cIndex + order.length - 1) % order.length];
Player.theme.switch(previous);
},
/**
* Switch theme.
* @param {String} name The name of the theme to switch to.
* @param {Object} opts Options passed to player.load
*/
switch: function (name) {
if (name !== 'Default' && !Player.config.savedThemes[name]) {
return Player.logError(`Theme '${name}' does not exist.`, null, 'warning');
}
Player.set('selectedTheme', name);
if (name === 'Default') {
[ 'headerTemplate', 'footerTemplate', 'rowTemplate', 'chanXTemplate', 'customCSS' ].forEach(prop => {
Player.settings.reset(prop, { bypassRender: true, bypassStylesheet: true });
});
Player.settings.render();
Player.display.updateStylesheet();
} else {
Player.settings.load(Player.config.savedThemes[name]);
}
},
/**
* Make sure the saved themes order contains all and only the saved themes, without duplicates.
*/
validateOrder: function () {
const order = Player.config.savedThemesOrder;
let _i;
Player.config.savedThemesOrder = order
.concat(Object.keys(Player.config.savedThemes))
.filter((name, i) => Player.config.savedThemes[name] && (_i = order.indexOf(name), _i === -1 || _i === i));
},
_parseSwitch: function (newValue, bindings, e) {
bindings = [ ...bindings ];
const themeName = e.eventTarget.parentNode.dataset.name;
if (themeName !== 'Default' && !Player.config.savedThemes[themeName]) {
Player.logError(`No theme named '${themeName}'.`, null, 'warning');
}
const keyDef = Player.hotkeys.parseKey(newValue);
if (!keyDef.key) {
bindings = bindings.filter(def => def.themeName !== themeName);
} else {
let binding = bindings.find(def => def.themeName === themeName);
binding || bindings.push(binding = { themeName });
Object.assign(binding, keyDef);
}
return bindings;
},
_handleSwitch: function (e) {
Player.theme.switch(e._binding.themeName);
},
_moveUp: (prop, e) => Player.theme._swapOrder(e, -1),
_moveDown: (prop, e) => Player.theme._swapOrder(e, 1),
_swapOrder: function (e, dir) {
const name = e.eventTarget.closest('[data-theme]').dataset.theme;
const order = Player.config.savedThemesOrder;
const i = order.indexOf(name);
if (i + dir >= 0 && i + dir < order.length) {
[ order[i], order[i + dir] ] = [ order[i + dir], order[i] ];
Player.$(`[data-theme="${name}"]`).style.order = i + dir;
Player.$(`[data-theme="${order[i]}"]`).style.order = i;
Player.settings.set('savedThemes', Player.config.savedThemes, { bypassValidation: true, bypassRender: true });
}
},
_remove: function (prop, e) {
const themes = Player.config.savedThemes;
const row = e.eventTarget.closest('[data-theme]');
const name = row.dataset.theme;
// Can't delete the default. It's not actually a stored theme.
if (name === 'Default') {
return Player.logError('Cannot delete the default theme. You can instead overwrite it.', null, 'warning');
}
// For default themes set null so we know to not include them.
if (Player.settings.findDefault('savedThemes').default[name]) {
themes[name] = null;
} else {
delete themes[name];
}
Player.config.savedThemesOrder = Player.config.savedThemesOrder.filter(_name => _name !== name);
// Remove the row
row.parentNode.removeChild(row);
Player.settings.set('savedThemes', themes, { bypassValidation: true, bypassRender: true });
// Remove hotkey binding
const bindingIndex = Player.config.hotkey_bindings.switchTheme.find(def => def.themeName === name);
if (bindingIndex) {
Player.set('hotkey_bindings.switchTheme', Player.config.hotkey_bindings.switchTheme.splice(bindingIndex, 1), { bypassValidation: true });
}
},
_restoreDefaults: function () {
Object.assign(Player.config.savedThemes, Player.settings.findDefault('savedThemes').default);
Player.theme.validateOrder();
Player.set('savedThemes', Player.config.savedThemes, { bypassValidation: true });
},
_showSaveOptions: function (prop, e) {
e.stopPropagation();
const open = Player.$(`.${ns}-theme-save-options`);
if (open) {
return Player.container.removeChild(open);
}
const el = _.element(saveMenuTemplate({ settingsConfig }), Player.container);
Player.position.showRelativeTo(el, e.eventTarget);
Player.$(`.${ns}-save-theme-name`).focus();
},
_toggleSaveFields: function () {
Player.$(`.${ns}-theme-save-options`).classList.toggle('fields-collapsed');
Player.position.showRelativeTo(Player.$(`.${ns}-theme-save-options`), Player.$('[data-handler="theme._showSaveOptions"]'));
},
_save: function (e) {
e.preventDefault();
const name = Player.$(`.${ns}-save-theme-name`).value;
if (!name) {
return Player.logError('A name is required to save a theme.', null, 'warning');
}
const checked = Player.$all(`.${ns}-theme-save-options input:checked`);
const data = [ ...checked ].reduce((data, el) => _.set(data, el.value, _.get(Player.config, el.value)), {});
Player.config.savedThemes[name] = data;
Player.config.savedThemesOrder.indexOf(name) === -1 && Player.config.savedThemesOrder.push(name);
Player.set('savedThemes', Player.config.savedThemes, { bypassValidation: true });
Player.container.removeChild(Player.$(`.${ns}-theme-save-options`));
}
};
/* WEBPACK VAR INJECTION */}.call(this, __webpack_require__(/*! ./src/_ */ "./src/_.js")))
/***/ }),
/***/ "./src/components/theme/templates/save_theme_menu.tpl":
/*!************************************************************!*\
!*** ./src/components/theme/templates/save_theme_menu.tpl ***!
\************************************************************/
/*! no static exports found */
/***/ (function(module, exports, __webpack_require__) {
/* WEBPACK VAR INJECTION */(function(Icons) {module.exports = (data = {}) => `<div class="${ns}-theme-save-options ${ns}-dialog fields-collapsed dialog" data-allow-click="true" style="top: 0px; left: 0px;">
<div class="${ns}-row ${ns}-align-center">
<div class="${ns}-col">
<input type="text" class="${ns}-save-theme-name" placeholder="Name">
</div>
<div class="${ns}-col">
<a class="${ns}-save-theme" href="#">Create</a>
</div>
</div>
<a class="${ns}-row ${ns}-toggle-theme-save-fields" href="#" style="margin: .25rem 0">
<span style="margin-right: .25rem">Included Settings</span>
${Icons.chevronDown}
${Icons.chevronUp}
</a>
${(function saveFieldOptions(settings, parent) {
return settings.map(s => {
const id = s.property && `theme_field-${s.property.replace(/\./g, '_')}`;
return s.settings
? saveFieldOptions(s.settings, s)
: { ...(parent || {}), ...s }.allowInTheme || s.themeField
? `<div><input type="checkbox" id="${id}" value="${s.property}" ${s.themeField ? 'checked' : ''}><label for="${id}">${parent ? `${parent.themeFieldTitle || parent.title}: ` : ''}${s.title}</label></div>`
: '';
}).join('');
})(data.settingsConfig)}
</div>`
/* WEBPACK VAR INJECTION */}.call(this, __webpack_require__(/*! ./src/icons */ "./src/icons.js")))
/***/ }),
/***/ "./src/components/theme/templates/saved_themes.tpl":
/*!*********************************************************!*\
!*** ./src/components/theme/templates/saved_themes.tpl ***!
\*********************************************************/
/*! no static exports found */
/***/ (function(module, exports, __webpack_require__) {
/* WEBPACK VAR INJECTION */(function(Icons) {module.exports = (data = {}) => `<div class="${ns}-row ${ns}-saved-themes">
<div class="${ns}-row ${ns}-align-start ${ns}-sub-settings" data-theme="Default" style="order: ${-1}">
<div class="${ns}-col ${ns}-space-between">Default</div>
<div class="${ns}-col">
<a href="#" class="${ns}-heading-action ${ns}-apply-theme" data-handler="theme._apply" data-property="savedTheme">${Player.config.selectedTheme === 'Default' ? Icons.checkSquare : Icons.square}</a>
</div>
</div>
${Player.config.savedThemesOrder.map((name, i) => `
<div class="${ns}-row ${ns}-align-start ${ns}-sub-settings" data-theme="${name}" style="order: ${i}">
<div class="${ns}-col ${ns}-space-between">${name}</div>
<div class="${ns}-col">
<a href="#" class="${ns}-heading-action ${ns}-apply-theme" data-handler="theme._apply" data-property="savedTheme">${Player.config.selectedTheme === name ? Icons.checkSquare : Icons.square}</a>
<a href="#" class="${ns}-heading-action ${ns}-move-theme-up ${i === 0 ? 'disabled' : '' }" data-handler="theme._moveUp" data-property="savedTheme">${Icons.arrowUp}</a>
<a href="#" class="${ns}-heading-action ${ns}-move-theme-down ${i === Player.config.savedThemesOrder.length - 1 ? 'disabled' : '' }" data-handler="theme._moveDown" data-property="savedTheme">${Icons.arrowDown}</a>
<a href="#" class="${ns}-heading-action ${ns}-remove-theme" data-handler="theme._remove" data-property="savedTheme">${Icons.trash}</a>
</div>
</div>
`).join('')}
</div>`
/* WEBPACK VAR INJECTION */}.call(this, __webpack_require__(/*! ./src/icons */ "./src/icons.js")))
/***/ }),
/***/ "./src/components/theme/templates/theme_keybinds.tpl":
/*!***********************************************************!*\
!*** ./src/components/theme/templates/theme_keybinds.tpl ***!
\***********************************************************/
/*! no static exports found */
/***/ (function(module, exports) {
module.exports = (data = {}) => [ 'Default' ].concat(Player.config.savedThemesOrder).map(name => `
<div class="${ns}-row ${ns}-select-themes">
<div class="${ns}-col"><span style="padding-left: .5rem">- ${name}</span></div>
<div class="${ns}-col" data-name="${name}">
<input
type="text"
class="${ns}-key-input"
value="${Player.hotkeys.stringifyKey(Player.config.hotkey_bindings.switchTheme.find(def => def.themeName === name) || { key: '' })}"
data-property="hotkey_bindings.switchTheme"
/>
</div>
</div>
`).join('')
/***/ }),
/***/ "./src/components/theme/themes.js":
/*!****************************************!*\
!*** ./src/components/theme/themes.js ***!
\****************************************/
/*! no static exports found */
/***/ (function(module, exports) {
module.exports = {
'Fixed Playlist': {
chanXControls: 'always',
headerTemplate: '<div class="playlist-resizer fcsp-expander" data-direction="w" data-bypass-save="true" data-bypass-position="true" data-allow-offscreen="true"></div>\nrepeat-button shuffle-button hover-images-button playlist-button\nsound-title-marquee\nview-menu-button add-button reload-button close-button',
rowTemplate: 'sound-title\np:{<img class="fcsp-row-image" src="sound-imageOrThumb">}\n<img class="fcsp-row-thumb" src="sound-thumb">',
customCSS: '/* Fix the player to the right at full height (minus the 4chan X header) */\n#fcsp-container[data-view-style="playlist"] {\n\t/* Fixed width *\\/\n\twidth: 25rem !important;/**/\n\theight: auto !important;\n\ttop: $config[offsetTop] !important;\n\tright: 0px !important;\n\tbottom: $config[offsetBottom] !important;\n\tleft: auto !important;\n\theight: auto !important;\n\tmax-height: calc(100% - 24px);\n\tbackground: none !important;\n\tborder: none !important;\n}\n\n/* Hide things when the playlist is open */\n/* Hide the image with the playlist open, unless it\'s a webm.\n * To show gifs as well change playing-video to playing-animated. */\n#fcsp-container[data-view-style="playlist"]:not(.playing-video) .fcsp-image-link,/**/ \n#fcsp-container[data-view-style="playlist"] .fcsp-controls,\n#fcsp-container[data-view-style="playlist"] .fcsp-hover-image,\n#fcsp-container[data-view-style="playlist"] .fcsp-footer,\n#fcsp-container[data-view-style="fullscreen"] .fcsp-row-thumb,\n#fcsp-container[data-view-style="fullscreen"] .fcsp-row-image {\n\tdisplay: none !important;\n}\n/* Header is shown with adjustments to handle the changed container style */\n/* Opacity and absolute position are used to auto hide the header */\n#fcsp-container[data-view-style="playlist"] .fcsp-header {\n\tposition: absolute !important;\n\topacity: 0;\n\tz-index: 9;\n\tcursor: inherit;\n\tbackground: $config[colors.background];\n\tborder-width: 0 1px 1px 0;\n\ttransition: all .3s ease;\n}\n#fcsp-container[data-view-style="playlist"] .fcsp-header:hover {\n\topacity: 1;\n}\n\n/* Don\'t show a scrollbar for the playlist for aesthetic reasons */\n#fcsp-container[data-view-style="playlist"] .fcsp-list-container {\n\tscrollbar-width: none;\n}\n#fcsp-container[data-view-style="playlist"] .fcsp-list-container::-webkit-scrollbar {\n\tdisplay: none;\n}\n\n/* Chunky playlist items, with no background and a squared thumbnail image. */\n#fcsp-container[data-view-style="playlist"] .fcsp-list-item {\n\tbackground: none !important;\n\theight: auto !important;\n\ttext-align: right;\n\talign-items: center;\n\ttransition: all .5s ease;\n\tfont-size: 1rem;\n\tcolor: $config[colors.text];\n}\n#fcsp-container[data-view-style="playlist"] .fcsp-row-thumb, #fcsp-container[data-view-style="playlist"] .fcsp-row-image {\n\theight: 3rem;\n\twidth: 3rem;\n\tobject-fit: cover;\n\ttransition: all .5s ease;\n}\n/* Show a gradient background and increase the size of list items when you hover over them. */\n#fcsp-container[data-view-style="playlist"] .fcsp-list-item:hover {\n\tline-height: calc(1.5rem + 4px);\n\tfont-size: 1.5rem;\n\tfont-weight: bold;\n\tbackground-image: radial-gradient(circle at -50%, #0000 70%, $config[colors.odd_row]) !important;\n\tcolor: $config[colors.background];\n\t-webkit-text-stroke: 1px black;\n}\n#fcsp-container[data-view-style="playlist"] .fcsp-list-item:hover .fcsp-row-thumb {\n\theight: 4rem;\n\twidth: 4rem;\n}\n#fcsp-container[data-view-style="playlist"] .fcsp-row-image {\n\theight: 7rem;\n\twidth: 7rem;\n}\n/* Add a gradient background to the playing item, make the text bigger, and style the text. */\n#fcsp-container[data-view-style="playlist"] .fcsp-list-item.playing {\n\tbackground-image: radial-gradient(circle at -50%, #0000 70%, $config[colors.playing]) !important;\n\tpadding-left: 2px;\n\tfont-weight: bold;\n\tfont-size: 1.5rem;\n\tcolor: $config[colors.page_background];\n\t-webkit-text-stroke: 1px black;\n\ttext-shadow: 0 0 2px $config[colors.border];\n}\n/* Swap the thumb image with the full image for the playing item. */\n#fcsp-container[data-view-style="playlist"] .fcsp-list-item:not(.playing) .fcsp-row-image {\n\tdisplay: none;\n}\n#fcsp-container[data-view-style="playlist"] .fcsp-list-item.playing .fcsp-row-thumb {\n\tdisplay: none;\n}\n/* Same gradient background style for dragging items. */\n#fcsp-container[data-view-style="playlist"] .fcsp-dragging {\n\tbackground-image: radial-gradient(circle at -50%, #0000 70%, $config[colors.dragging]) !important\n}\n\n/* Add a resizer to the left of the header when the playlist is open. */\n.playlist-resizer {\n\topacity: 1 !important;\n\tmargin: 0 !important;\n\twidth: .25rem !important;\n\theight: auto !important;\n\tbackground-color: $config[colors.border] !important;\n\tposition: absolute;\n\tleft: -.25rem !important;\n\ttop: 0 !important;\n\tbottom: 0 !important;\n\tborder-radius: 100% 0 0 100%;\n\tcursor: ew-resize !important;\n\tdisplay: none;\n\ttransition: all .5s ease;\n}\n.playlist-resizer:hover {\n\twidth: .4rem !important;\n\tleft: -.4rem !important;\n}\n#fcsp-container[data-view-style="playlist"] .playlist-resizer {\n\tdisplay: block;\n}\n/* Hide the default resizers */\n#fcsp-container[data-view-style="playlist"] .fcsp-expander:not(.playlist-resizer) {\n\tdisplay: none;\n}\n'
}
};
/***/ }),
/***/ "./src/components/threads/index.js":
/*!*****************************************!*\
!*** ./src/components/threads/index.js ***!
\*****************************************/
/*! no static exports found */
/***/ (function(module, exports, __webpack_require__) {
/* WEBPACK VAR INJECTION */(function(_) {const { parseFileName } = __webpack_require__(/*! ../../file_parser */ "./src/file_parser.js");
const { get } = __webpack_require__(/*! ../../api */ "./src/api.js");
const maxSavedBoards = 10;
const boardsURL = 'https://a.4cdn.org/boards.json';
const catalogURL = 'https://a.4cdn.org/%s/catalog.json';
module.exports = {
template: __webpack_require__(/*! ./templates/threads.tpl */ "./src/components/threads/templates/threads.tpl"),
boardsTemplate: __webpack_require__(/*! ./templates/boards.tpl */ "./src/components/threads/templates/boards.tpl"),
listsTemplate: __webpack_require__(/*! ./templates/list.tpl */ "./src/components/threads/templates/list.tpl"),
boardList: null,
soundThreads: null,
displayThreads: {},
selectedBoards: Board ? [ Board ] : [ 'a' ],
showAllBoards: false,
delegatedEvents: {
click: {
[`.${ns}-fetch-threads-link`]: 'threads.fetch',
[`.${ns}-all-boards-link`]: 'threads.toggleBoardList',
[`.${ns}-threads-view-style`]: 'threads.toggleView'
},
keyup: {
[`.${ns}-threads-filter`]: e => Player.threads.filter(e.eventTarget.value)
},
change: {
[`.${ns}-threads input[type=checkbox]`]: 'threads.toggleBoard'
}
},
initialize: async function () {
Player.threads.hasParser = is4chan && typeof Parser !== 'undefined';
// If the native Parser hasn't been intialised chuck customSpoiler on it so we can call it for threads.
// You shouldn't do things like this. We can fall back to the table view if it breaks though.
if (Player.threads.hasParser && !Parser.customSpoiler) {
Parser.customSpoiler = {};
}
Player.on('show', Player.threads._initialFetch);
Player.on('view', Player.threads._initialFetch);
Player.on('rendered', Player.threads.afterRender);
Player.on('config:threadsViewStyle', Player.threads.render);
try {
const savedBoards = await GM.getValue('threads_board_selection');
savedBoards && (Player.threads.selectedBoards = savedBoards.split(','));
} catch (err) {
// Leave it defaulted to the current board.
}
},
/**
* Fetch the threads when the threads view is opened for the first time.
*/
_initialFetch: function () {
if (Player.container && Player.config.viewStyle === 'threads' && Player.threads.boardList === null) {
Player.threads.fetchBoards(true);
}
},
render: function () {
if (Player.container) {
Player.$(`.${ns}-threads`).innerHTML = Player.threads.template();
Player.threads.afterRender();
}
},
/**
* Render the threads and apply the board styling after the view is rendered.
*/
afterRender: function () {
const threadList = Player.$(`.${ns}-thread-list`);
if (threadList) {
const bodyStyle = document.defaultView.getComputedStyle(document.body);
threadList.style.background = bodyStyle.backgroundColor;
threadList.style.backgroundImage = bodyStyle.backgroundImage;
threadList.style.backgroundRepeat = bodyStyle.backgroundRepeat;
threadList.style.backgroundPosition = bodyStyle.backgroundPosition;
}
Player.threads.renderThreads();
},
/**
* Switch between board and table view.
*/
toggleView: function (e) {
e.preventDefault();
Player.set('threadsViewStyle', e.eventTarget.getAttribute('data-style'));
},
/**
* Render just the threads.
*/
renderThreads: function () {
if (!Player.threads.hasParser || Player.config.threadsViewStyle === 'table') {
Player.$(`.${ns}-threads-body`).innerHTML = Player.threads.listsTemplate();
} else {
try {
const list = Player.$(`.${ns}-thread-list`);
list.innerHTML = '';
for (let board in Player.threads.displayThreads) {
// Create a board title
const boardConf = Player.threads.boardList.find(boardConf => boardConf.board === board);
const boardTitle = `/${boardConf.board}/ - ${boardConf.title}`;
_.element(`<div class="boardBanner"><div class="boardTitle">${boardTitle}</div></div>`, list);
// Add each thread for the board
const threads = Player.threads.displayThreads[board];
for (let i = 0; i < threads.length; i++) {
list.appendChild(Parser.buildHTMLFromJSON.call(Parser, threads[i], threads[i].board, true, true));
// Add a line under each thread
_.element('<hr style="clear: both">', list);
}
}
} catch (err) {
Player.logError('Unable to display the threads board view.', err, 'warning');
// If there was an error fall back to the table view.
Player.set('threadsViewStyle', 'table');
Player.renderThreads();
}
}
},
/**
* Render just the board selection.
*/
renderBoards: function () {
Player.$(`.${ns}-thread-board-list`).innerHTML = Player.threads.boardsTemplate();
},
/**
* Toggle the threads view.
*/
toggle: function (e) {
e && e.preventDefault();
if (Player.config.viewStyle === 'threads') {
Player.playlist.restore();
} else {
Player.display.setViewStyle('threads');
}
},
/**
* Switch between showing just the selected boards and all boards.
*/
toggleBoardList: function (e) {
e.preventDefault();
Player.threads.showAllBoards = !Player.threads.showAllBoards;
Player.$(`.${ns}-all-boards-link`).innerHTML = Player.threads.showAllBoards ? 'Selected Only' : 'Show All';
Player.threads.renderBoards();
},
/**
* Select/deselect a board.
*/
toggleBoard: async function (e) {
const board = e.eventTarget.value;
const selected = e.eventTarget.checked;
if (selected) {
!Player.threads.selectedBoards.includes(board) && Player.threads.selectedBoards.unshift(board);
} else {
Player.threads.selectedBoards = Player.threads.selectedBoards.filter(b => b !== board);
}
await GM.setValue('threads_board_selection', Player.threads.selectedBoards.slice(0, maxSavedBoards).join(','));
},
/**
* Fetch the board list from the 4chan API.
*/
fetchBoards: async function (fetchThreads) {
Player.threads.loading = true;
Player.threads.render();
Player.threads.boardList = (await get(boardsURL)).boards;
if (fetchThreads) {
Player.threads.fetch();
} else {
Player.threads.loading = false;
Player.threads.render();
}
},
/**
* Fetch the catalog for each selected board and search for sounds in OPs.
*/
fetch: async function (e) {
e && e.preventDefault();
Player.threads.loading = true;
Player.threads.render();
if (!Player.threads.boardList) {
try {
await Player.threads.fetchBoards();
} catch (err) {
return Player.logError('Failed fetching the boards list.', err);
}
}
const allThreads = [];
try {
await Promise.all(Player.threads.selectedBoards.map(async board => {
const boardConf = Player.threads.boardList.find(boardConf => boardConf.board === board);
if (!boardConf) {
return;
}
const pages = boardConf && await get(catalogURL.replace('%s', board));
(pages || []).forEach(({ page, threads }) => {
allThreads.push(...threads.map(thread => Object.assign(thread, { board, page, ws_board: boardConf.ws_board })));
});
}));
Player.threads.soundThreads = allThreads.filter(thread => {
const sounds = parseFileName(thread.filename, `https://i.4cdn.org/${thread.board}/${thread.tim}${thread.ext}`, thread.no, `https://i.4cdn.org/${thread.board}/${thread.tim}s${thread.ext}`, thread.md5, true);
return sounds.length;
});
} catch (err) {
Player.logError('Failed searching for sounds threads.', err);
}
Player.threads.loading = false;
Player.threads.filter(Player.$(`.${ns}-threads-filter`).value, true);
Player.threads.render();
},
/**
* Apply the filter input to the already fetched threads.
*/
filter: function (search, skipRender) {
search = search.toLowerCase();
Player.threads.filterValue = search || '';
if (Player.threads.soundThreads === null) {
return;
}
Player.threads.displayThreads = Player.threads.soundThreads.reduce((threadsByBoard, thread) => {
if (!search || thread.sub && thread.sub.toLowerCase().includes(search) || thread.com && thread.com.toLowerCase().includes(search)) {
threadsByBoard[thread.board] || (threadsByBoard[thread.board] = []);
threadsByBoard[thread.board].push(thread);
}
return threadsByBoard;
}, {});
!skipRender && Player.threads.renderThreads();
}
};
/* WEBPACK VAR INJECTION */}.call(this, __webpack_require__(/*! ./src/_ */ "./src/_.js")))
/***/ }),
/***/ "./src/components/threads/templates/boards.tpl":
/*!*****************************************************!*\
!*** ./src/components/threads/templates/boards.tpl ***!
\*****************************************************/
/*! no static exports found */
/***/ (function(module, exports) {
module.exports = (data = {}) => (Player.threads.boardList || []).map(board => {
let checked = Player.threads.selectedBoards.includes(board.board);
return !checked && !Player.threads.showAllBoards
? ''
: `<label>
<input type="checkbox" value="${board.board}" ${checked ? 'checked' : ''}>
/${board.board}/
</label>`
}).join('')
/***/ }),
/***/ "./src/components/threads/templates/list.tpl":
/*!***************************************************!*\
!*** ./src/components/threads/templates/list.tpl ***!
\***************************************************/
/*! no static exports found */
/***/ (function(module, exports, __webpack_require__) {
/* WEBPACK VAR INJECTION */(function(_) {module.exports = (data = {}) => Object.keys(Player.threads.displayThreads).reduce((rows, board) => {
return rows.concat(Player.threads.displayThreads[board].map(thread => `
<tr>
<td>
<a class="quotelink" href="//boards.${thread.ws_board ? '4channel' : '4chan'}.org/${thread.board}/thread/${thread.no}#p${thread.no}" target="_blank">
>>>/${thread.board}/${thread.no}
</a>
</td>
<td>${thread.sub || ''}</td>
<td>${thread.replies} / ${thread.images}</td>
<td>${_.timeAgo(thread.time)}</td>
<td>${_.timeAgo(thread.last_modified)}</td>
</tr>
`))
}, []).join('')
/* WEBPACK VAR INJECTION */}.call(this, __webpack_require__(/*! ./src/_ */ "./src/_.js")))
/***/ }),
/***/ "./src/components/threads/templates/threads.tpl":
/*!******************************************************!*\
!*** ./src/components/threads/templates/threads.tpl ***!
\******************************************************/
/*! no static exports found */
/***/ (function(module, exports) {
module.exports = (data = {}) => `<div class="${ns}-heading ${ns}-has-description" title="Search for threads with a sound OP">
Active Threads
${!Player.threads.loading ? `- <a class="${ns}-fetch-threads-link ${ns}-heading-action" href="#">Update</a>` : ''}
</div>
<div style="display: ${Player.threads.loading ? 'block' : 'none'}">Loading</div>
<div style="display: ${Player.threads.loading ? 'none' : 'block'}">
<div class="${ns}-heading ${ns}-has-description" title="Only includes threads containing the search.">
Filter
</div>
<input type="text" class="${ns}-threads-filter" value="${Player.threads.filterValue || ''}"></input>
<div class="${ns}-heading">
Boards - <a class="${ns}-all-boards-link ${ns}-heading-action" href="#">${Player.threads.showAllBoards ? 'Selected Only' : 'Show All'}</a>
</div>
<div class="${ns}-thread-board-list">
${Player.threads.boardsTemplate(data)}
</div>
${!Player.threads.hasParser
? ''
: `<div class="${ns}-heading" style="text-align: center">
${Player.config.threadsViewStyle !== 'table'
? `<a class="${ns}-threads-view-style ${ns}-heading-action" style="margin: 0" data-style="table" href="#">Table</a>`
: `<span>Table</span>`}
|
${Player.config.threadsViewStyle !== 'board'
? `<a class="${ns}-threads-view-style ${ns}-heading-action" style="margin: 0" data-style="board" href="#">Board</a>`
: `<span>Board</span>`}
</div>`
}
${
!Player.threads.hasParser || Player.config.threadsViewStyle === 'table'
? `<table>
<tr>
<th>Thread</th>
<th>Subject</th>
<th>Replies/Images</th>
<th>Started</th>
<th>Updated</th>
<tr>
<tbody class="${ns}-threads-body"></tbody>
</table>`
: `<div class="${ns}-thread-list"></div>`
}
</div>`
/***/ }),
/***/ "./src/components/tools/index.js":
/*!***************************************!*\
!*** ./src/components/tools/index.js ***!
\***************************************/
/*! no static exports found */
/***/ (function(module, exports, __webpack_require__) {
/* WEBPACK VAR INJECTION */(function(_, Icons) {const ffmpegVersionUrl = 'https://raw.githubusercontent.com/rcc11/4chan-sounds-player/master/dist/4chan-sounds-player-with-ffmpeg.user.js';
const promoteFFmpegVersion = false;
// Seems to be the cut off point for file names
const maxFilenameLength = 218;
module.exports = {
template: __webpack_require__(/*! ./templates/tools.tpl */ "./src/components/tools/templates/tools.tpl"),
hasFFmpeg: typeof ffmpeg === 'function',
_uploadIdx: 0,
createStatusText: '',
delegatedEvents: {
click: {
[`.${ns}-create-button`]: 'tools._handleCreate',
[`.${ns}-create-sound-post-link`]: 'tools._addCreatedToQR',
[`.${ns}-create-sound-add-link`]: 'tools._addCreatedToPlayer',
[`.${ns}-toggle-sound-input`]: 'tools._handleToggleSoundInput',
[`.${ns}-host-setting-link`]: _.noDefault(() => Player.settings.toggle('Hosts')),
[`.${ns}-remove-file`]: 'tools._handleFileRemove'
},
change: {
[`.${ns}-create-sound-img`]: 'tools._handleImageSelect',
[`.${ns}-create-sound-form input[type=file]`]: e => Player.tools._handleFileSelect(e.eventTarget),
[`.${ns}-use-video`]: 'tools._handleWebmSoundChange'
},
drop: {
[`.${ns}-create-sound-form`]: 'tools._handleCreateSoundDrop'
},
keyup: {
[`.${ns}-encoded-input`]: 'tools._handleEncoded',
[`.${ns}-decoded-input`]: 'tools._handleDecoded'
}
},
initialize: function () {
Player.on('config:uploadHosts', Player.tools.render);
Player.on('config:defaultUploadHost', newValue => Player.$(`.${ns}-create-sound-host`).value = newValue);
Player.on('rendered', Player.tools.afterRender);
},
render: function () {
Player.$(`.${ns}-tools`).innerHTML = Player.tools.template();
Player.tools.afterRender();
},
afterRender: function () {
Player.tools.status = Player.$(`.${ns}-create-sound-status`);
Player.tools.imgInput = Player.$(`.${ns}-create-sound-img`);
Player.tools.sndInput = Player.$(`.${ns}-create-sound-snd`);
},
toggle: function (e) {
e && e.preventDefault();
if (Player.config.viewStyle === 'tools') {
Player.playlist.restore();
} else {
Player.display.setViewStyle('tools');
}
},
updateCreateStatus: function (text) {
Player.tools.status.style.display = text ? 'inherit' : 'none';
Player.tools.status.innerHTML = Player.tools.createStatusText = text;
},
/**
* Encode the decoded input.
*/
_handleDecoded: function (e) {
Player.$(`.${ns}-encoded-input`).value = encodeURIComponent(e.eventTarget.value);
},
/**
* Decode the encoded input.
*/
_handleEncoded: function (e) {
Player.$(`.${ns}-decoded-input`).value = decodeURIComponent(e.eventTarget.value);
},
/**
* Show/hide the "Use webm" checkbox when an image is selected.
*/
_handleImageSelect: async function (e) {
const input = e && e.eventTarget || Player.tools.imgInput;
const image = input.files[0];
const isVideo = image.type === 'video/webm';
let placeholder = image.name.replace(/\.[^/.]+$/, '');
if (Player.tools.hasFFmpeg) {
// Show the Use Webm label if the image is a webm file
Player.$(`.${ns}-use-video-label`).style.display = isVideo ? 'inherit' : 'none';
const webmCheckbox = Player.$(`.${ns}-use-video`);
// If the image is a video and Copy Video is selected then update the sound input as well
webmCheckbox.checked && isVideo && Player.tools._handleFileSelect(Player.tools.sndInput, [ image ]);
// If the image isn't a webm make sure Copy Video is deselected (click to fire change event)
webmCheckbox.checked && !isVideo && webmCheckbox.click();
} else if (await Player.tools.hasAudio(image)) {
Player.logError('Audio not allowed for the image webm.', null, 'warning');
}
// Show the image name as the placeholder for the name input since it's the default
Player.$(`.${ns}-create-sound-name`).setAttribute('placeholder', placeholder);
},
/**
* Update the custom file input display when the input changes
*/
_handleFileSelect: function (input, files) {
const container = input.closest(`.${ns}-file-input`);
const fileText = container.querySelector('.text');
const fileList = container.querySelector(`.${ns}-file-list`);
files || (files = [ ...input.files ]);
container.classList[files.length ? 'remove' : 'add']('placeholder');
fileText.innerHTML = files.length > 1
? files.length + ' files'
: files[0] && files[0].name || '';
fileList && (fileList.innerHTML = files.length < 2 ? '' : files.map((file, i) =>
`<div class="${ns}-row">
<div class="${ns}-col ${ns}-truncate-text">${file.name}</div>
<a class="${ns}-col-auto ${ns}-remove-file" href="#" data-idx="${i}">${Icons.close}</a>
</div>`
).join(''));
},
/**
* Handle a file being removed from a multi input
*/
_handleFileRemove: function (e) {
e.preventDefault();
const idx = +e.eventTarget.getAttribute('data-idx');
const input = e.eventTarget.closest(`.${ns}-file-input`).querySelector('input[type="file"]');
const dataTransfer = new DataTransfer();
for (let i = 0; i < input.files.length; i++) {
i !== idx && dataTransfer.items.add(input.files[i]);
}
input.files = dataTransfer.files;
Player.tools._handleFileSelect(input);
},
/**
* Show/hide the sound input when "Use webm" is changed.
*/
_handleWebmSoundChange: function (e) {
const sound = Player.tools.sndInput;
const image = Player.tools.imgInput;
Player.tools._handleFileSelect(sound, e.eventTarget.checked && [ image.files[0] ]);
},
_handleToggleSoundInput: function (e) {
e.preventDefault();
const showURL = e.eventTarget.getAttribute('data-type') === 'url';
Player.$(`.${ns}-create-sound-snd-url`).closest(`.${ns}-row`).style.display = showURL ? null : 'none';
Player.$(`.${ns}-create-sound-snd`).closest(`.${ns}-file-input`).style.display = showURL ? 'none' : null;
Player.tools.useSoundURL = showURL;
},
/**
* Handle files being dropped on the create sound section.
*/
_handleCreateSoundDrop: function (e) {
e.preventDefault();
e.stopPropagation();
const targetInput = e.target.nodeName === 'INPUT' && e.target.getAttribute('type') === 'file' && e.target;
[ ...e.dataTransfer.files ].forEach(file => {
const isVideo = file.type.startsWith('video');
const isImage = file.type.startsWith('image') || file.type === 'video/webm';
const isSound = file.type.startsWith('audio');
if (isVideo || isImage || isSound) {
const input = file.type === 'video/webm' && targetInput
? targetInput
: isImage
? Player.tools.imgInput
: Player.tools.sndInput;
const dataTransfer = new DataTransfer();
if (input.multiple) {
[ ...input.files ].forEach(file => dataTransfer.items.add(file));
}
dataTransfer.items.add(file);
input.files = dataTransfer.files;
Player.tools._handleFileSelect(input);
input === Player.tools.imgInput && Player.tools._handleImageSelect();
}
});
return false;
},
/**
* Handle the create button.
* Extracts video/audio if required, uploads the sound, and creates an image file names with [sound=url].
*/
_handleCreate: async function (e) {
e && e.preventDefault();
// Revoke the URL for an existing created image.
Player.tools._createdImageURL && URL.revokeObjectURL(Player.tools._createdImageURL);
Player.tools._createdImage = null;
Player.tools.updateCreateStatus('Creating sound image');
Player.$(`.${ns}-create-button`).disabled = true;
// Gather the input values.
const host = Player.config.uploadHosts[Player.$(`.${ns}-create-sound-host`).value];
const useSoundURL = Player.tools.useSoundURL;
let image = Player.tools.imgInput.files[0];
let soundURLs = useSoundURL && Player.$(`.${ns}-create-sound-snd-url`).value.split(',').map(v => v.trim()).filter(v => v);
let sounds = !(Player.$(`.${ns}-use-video`) || {}).checked || !image || !image.type.startsWith('video')
? [ ...Player.tools.sndInput.files ]
: image && [ image ];
const customName = Player.$(`.${ns}-create-sound-name`).value;
// Only split a given name if there's multiple sounds.
const names = customName
? ((soundURLs || sounds).length > 1 ? customName.split(',') : [ customName ]).map(v => v.trim())
: image && [ image.name.replace(/\.[^/.]+$/, '') ];
try {
if (!image) {
throw new PlayerError('Select an image or webm.', 'warning');
}
if (image.type.startsWith('video') && await Player.tools.hasAudio(image)) {
// If ffmpeg is not available fall out.
if (!Player.tools.hasFFmpeg) {
Player.tools.updateCreateStatus(Player.tools.createStatusText
+ '<br>' + (promoteFFmpegVersion ? 'This version of the player does not enable webm splitting.' : 'Audio not allowed for the image webm.')
+ '<br>Remove the audio from the webm and try again.'
+ (promoteFFmpegVersion ? `<br>Alternatively install the <a href="${ffmpegVersionUrl}">ffmpeg version</a> to extract video/audio automatically.` : ''));
throw new PlayerError('Audio not allowed for the image webm.', 'warning');
}
// If the image is a webm with audio then extract just the video.
image = await Player.tools.extract(image, 'video');
}
const soundlessLength = names.join('').length + (soundURLs || sounds).length * 8;
if (useSoundURL) {
try {
// Make sure each url is valid and strip the protocol.
soundURLs = soundURLs.map(url => new URL(url) && url.replace(/^(https?:)?\/\//, ''));
} catch (err) {
throw new PlayerError('The provided sound URL is invalid.', 'warning');
}
if (maxFilenameLength < soundlessLength + soundURLs.join('').length) {
throw new PlayerError('The generated image filename is too long.', 'warning');
}
} else {
if (!sounds || !sounds.length) {
throw new PlayerError('Select a sound.', 'warning');
}
// Check the final filename length if the URL length is known for the host.
// Limit to 8 otherwise. zz.ht is as small as you're likely to get and that can only fit 8.
const tooManySounds = host.filenameLength
? maxFilenameLength < soundlessLength + (host.filenameLength) * sounds.length
: sounds.length > 8;
if (tooManySounds) {
throw new PlayerError('The generated image filename is too long.', 'warning');
}
// Check videos have audio and extract it if possible.
sounds = await Promise.all(sounds.map(async sound => {
if (sound.type.startsWith('video')) {
if (!await Player.tools.hasAudio(sound)) {
throw new PlayerError(`The selected video has no audio. (${sound.name})`, 'warning');
}
if (Player.tools.hasFFmpeg) {
return await Player.tools.extract(sound, 'audio');
}
}
return sound;
}));
// Upload the sounds.
try {
soundURLs = await Promise.all(sounds.map(async sound => Player.tools.postFile(sound, host)));
} catch (err) {
throw new PlayerError('Upload failed.', 'error', err);
}
}
if (!soundURLs.length) {
throw new PlayerError('No sounds selected.', 'warning');
}
// Create a new file that includes [sound=url] in the name.
let filename = '';
for (let i = 0; i < soundURLs.length; i++) {
filename += (names[i] || '') + '[sound=' + encodeURIComponent(soundURLs[i].replace(/^(https?:)?\/\//, '')) + ']';
}
const ext = image.name.match(/\.([^/.]+)$/)[1];
const soundImage = new File([ image ], filename + '.' + ext, { type: image.type });
// Keep track of the create image and a url to it.
Player.tools._createdImage = soundImage;
Player.tools._createdImageURL = URL.createObjectURL(soundImage);
// Complete! with some action links
Player.tools.updateCreateStatus(Player.tools.createStatusText
+ '<br>Complete!<br>'
+ (is4chan ? `<a href="#" class="${ns}-create-sound-post-link">Post</a> - ` : '')
+ ` <a href="#" class="${ns}-create-sound-add-link">Add</a> - `
+ ` <a href="${Player.tools._createdImageURL}" download="${soundImage.name}" title="${soundImage.name}">Download</a>`
);
} catch (err) {
Player.tools.updateCreateStatus(Player.tools.createStatusText
+ '<br>Failed! ' + (err instanceof PlayerError ? err.reason : ''));
Player.logError('Failed to create sound image', err);
}
Player.$(`.${ns}-create-button`).disabled = false;
},
hasAudio: function (file) {
if (!file.type.startsWith('audio') && !file.type.startsWith('video')) {
return false;
}
return new Promise((resolve, reject) => {
const url = URL.createObjectURL(file);
const video = document.createElement('video');
video.addEventListener('loadeddata', () => {
URL.revokeObjectURL(url);
resolve(video.mozHasAudio || !!video.webkitAudioDecodedByteCount);
});
video.addEventListener('error', reject);
video.src = url;
});
},
/**
* Extract just the audio or video from a file.
*/
extract: async function (file, type) {
Player.tools.updateCreateStatus(Player.tools.createStatusText + '<br>Extracting ' + type);
if (typeof ffmpeg !== 'function') {
return file;
}
const name = file.name.replace(/\.[^/.]+$/, '') + (type === 'audio' ? '.ogg' : '.webm');
const result = ffmpeg({
MEMFS: [ { name: '_' + file.name, data: await new Response(file).arrayBuffer() } ],
arguments: type === 'audio'
? [ '-i', '_' + file.name, '-vn', '-c', 'copy', name ]
: [ '-i', '_' + file.name, '-an', '-c', 'copy', name ]
});
return new File([ result.MEMFS[0].data ], name, { type: type === 'audio' ? 'audio/ogg' : 'video/webm' });
},
/**
* Upload the sound file and return a link to it.
*/
postFile: async function (file, host) {
const idx = Player.tools._uploadIdx++;
if (!host || host.invalid) {
throw new PlayerError('Invalid upload host.', 'error');
}
const formData = new FormData();
Object.keys(host.data).forEach(key => {
if (host.data[key] !== null) {
formData.append(key, host.data[key] === '$file' ? file : host.data[key]);
}
});
Player.tools.updateCreateStatus(Player.tools.createStatusText + `<br><span class="${ns}-upload-status-${idx}">Uploading ${file.name}</span>`);
return new Promise((resolve, reject) => {
GM.xmlHttpRequest({
method: 'POST',
url: host.url,
data: formData,
responseType: host.responsePath ? 'json' : 'text',
headers: host.headers,
onload: async response => {
if (response.status < 200 || response.status >= 300) {
return reject(response);
}
const responseVal = host.responsePath
? _.get(response.response, host.responsePath)
: host.responseMatch
? (response.responseText.match(new RegExp(host.responseMatch)) || [])[1]
: response.responseText;
const uploadedUrl = host.soundUrl ? host.soundUrl.replace('%s', responseVal) : responseVal;
Player.$(`.${ns}-upload-status-${idx}`).innerHTML = `Uploaded ${file.name} to <a href="${uploadedUrl}" target="_blank">${uploadedUrl}</a>`;
Player.tools.createStatusText = Player.tools.status.innerHTML;
resolve(uploadedUrl);
},
upload: {
onprogress: response => {
const total = response.total > 0 ? response.total : file.size;
Player.$(`.${ns}-upload-status-${idx}`).innerHTML = `Uploading ${file.name} - ${Math.floor(response.loaded / total * 100)}%`;
}
},
onerror: reject
});
});
},
/**
* Add the created sound image to the player.
*/
_addCreatedToPlayer: function (e) {
e.preventDefault();
Player.playlist.addFromFiles([ Player.tools._createdImage ]);
},
/**
* Open the QR window and add the created sound image to it.
*/
_addCreatedToQR: function (e) {
if (!is4chan) {
return;
}
e.preventDefault();
// Open the quick reply window.
const qrLink = document.querySelector(isChanX ? '.qr-link' : '.open-qr-link');
const dataTransfer = new DataTransfer();
dataTransfer.items.add(Player.tools._createdImage);
// 4chan X, drop the file on the qr window.
if (isChanX) {
qrLink.click();
const event = new CustomEvent('drop', { view: window, bubbles: true, cancelable: true });
event.dataTransfer = dataTransfer;
document.querySelector('#qr').dispatchEvent(event);
// Native, set the file input value. Check for a quick reply
} else if (qrLink) {
qrLink.click();
document.querySelector('#qrFile').files = dataTransfer.files;
} else {
document.querySelector('#togglePostFormLink a').click();
document.querySelector('#postFile').files = dataTransfer.files;
document.querySelector('.postForm').scrollIntoView();
}
},
};
/* WEBPACK VAR INJECTION */}.call(this, __webpack_require__(/*! ./src/_ */ "./src/_.js"), __webpack_require__(/*! ./src/icons */ "./src/icons.js")))
/***/ }),
/***/ "./src/components/tools/templates/tools.tpl":
/*!**************************************************!*\
!*** ./src/components/tools/templates/tools.tpl ***!
\**************************************************/
/*! no static exports found */
/***/ (function(module, exports, __webpack_require__) {
/* WEBPACK VAR INJECTION */(function(Icons) {module.exports = (data = {}) => `<div class="${ns}-heading">Encode / Decode URL</div>
<div class="${ns}-row">
<div class="${ns}-col"><input type="text" class="${ns}-decoded-input" placeholder="https://"></div>
<div class="${ns}-col"><input type="text" class="${ns}-encoded-input" placeholder="https%3A%2F%2F"></div>
</div>
<div class="${ns}-heading">
Create Sound Image
</div>
<div class="${ns}-create-sound-form">
<div class="${ns}-row" style="margin-bottom: .5rem">
${Player.display.ifNotDismissed('createSoundDetails', 'Show Help',
`<div class="${ns}-col" data-dismiss-id="createSoundDetails">
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.
If you have an account for a host that you would like to use then make the required changes in the <a class="${ns}-host-setting-link" href="#">host config</a>.
That typically means providing a user token in the data or headers.<br>
${Player.tools.hasFFmpeg
? 'Selecting a webm with audio as the image will split it into a video only webm to be posted and ogg audio file to be uploaded.'
: 'For a webm with audio first split the webm into a separate video and audio file and select them both.'
}
<br>
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.<br>
<a href="javascript:;" class="${ns}-dismiss-link" data-dismiss="createSoundDetails">Dismiss</a>
</div>`)}
</div>
<div class="${ns}-row">
Host
</div>
<div class="${ns}-row">
<div class="${ns}-col">
<select class="${ns}-create-sound-host">
${Object.keys(Player.config.uploadHosts).map((hostId, i) =>
Player.config.uploadHosts[hostId] && !Player.config.uploadHosts[hostId].invalid
? `<option value="${hostId}" ${Player.config.defaultUploadHost === hostId ? 'selected' : ''}>${hostId}</option>`
: ''
).join('')}
</select>
</div>
</div>
<div class="${ns}-row" style="margin-top: .25rem">
Data
</div>
<div class="${ns}-row">
<div class="${ns}-col">
<input type="text" class="${ns}-create-sound-name" placeholder="Name/s">
</div>
</div>
<div class="${ns}-row">
<div class="${ns}-col">
<div class="${ns}-file-input placeholder">
<div class="${ns}-file-overlay">
<span class="placeholder-text">Select/Drop Image</span>
<span class="text"></span>
<input class="${ns}-create-sound-img" type="file" accept="image/*,.webm">
</div>
</div>
</div>
<div class="${ns}-col">
<div class="${ns}-file-input placeholder" ${Player.tools.useSoundURL ? 'display: none;' : ''}>
<div class="${ns}-file-overlay">
<span class="placeholder-text">Select/Drop Sound/s</span>
<span class="text"></span>
<div class="overfile ${ns}-input-append">
${Player.tools.hasFFmpeg && `<label class="${ns}-use-video-label" style="display: none;">Use video<input type="checkbox" class="${ns}-use-video"></label>` || ''}
<a href="#" class="${ns}-toggle-sound-input" data-type="url" title="Enter a URL of a previously uploaded file.">${Icons.link}</a>
</div>
<input class="${ns}-create-sound-snd" type="file" accept="audio/*,video/*" multiple>
</div>
<div class="${ns}-file-list"></div>
</div>
<div class="${ns}-row ${ns}-align-center" style="position: relative; ${Player.tools.useSoundURL ? '' : 'display: none;'}">
<a href="#" class="${ns}-toggle-sound-input ${ns}-input-append" data-type="file" title="Select a file to upload.">
${Icons.fileEarmarkMusic}
</a>
<input type="text" class="${ns}-create-sound-snd-url" placeholder="Sound URL/s" style="min-width: 100%;">
</div>
</div>
</div>
<div class="${ns}-row" style="margin-top: .5rem">
<div class="${ns}-col-auto">
<button class="${ns}-create-button">Create</button>
</div>
</div>
</div>
<div class="${ns}-create-sound-status" ${Player.tools.createStatusText ? '' : 'style="display: none"'}>
${Player.tools.createStatusText}
</div>`
/* WEBPACK VAR INJECTION */}.call(this, __webpack_require__(/*! ./src/icons */ "./src/icons.js")))
/***/ }),
/***/ "./src/components/user-template/buttons.js":
/*!*************************************************!*\
!*** ./src/components/user-template/buttons.js ***!
\*************************************************/
/*! no static exports found */
/***/ (function(module, exports, __webpack_require__) {
/* WEBPACK VAR INJECTION */(function(Icons) {const { postIdPrefix } = __webpack_require__(/*! ../../selectors */ "./src/selectors.js");
module.exports = [
{
property: 'repeat',
tplName: 'repeat',
class: `${ns}-repeat-button`,
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',
class: `${ns}-shuffle-button`,
values: {
true: { attrs: [ 'title="Shuffled"' ], icon: Icons.shuffle },
false: { attrs: [ 'title="Ordered"' ], class: 'muted', icon: Icons.shuffle }
}
},
{
property: 'viewStyle',
tplName: 'playlist',
class: `${ns}-viewStyle-button`,
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',
class: `${ns}-hoverImages-button`,
values: {
true: { attrs: [ 'title="Hover Images Enabled"' ], icon: Icons.image },
false: { attrs: [ 'title="Hover Images Disabled"' ], class: 'muted', icon: Icons.image }
}
},
{
tplName: 'add',
class: `${ns}-add-button`,
icon: Icons.plus,
attrs: [ 'title="Add local files"' ]
},
{
tplName: 'reload',
class: `${ns}-reload-button`,
icon: Icons.reboot,
attrs: [ 'title="Reload the playlist"' ]
},
{
property: 'viewStyle',
tplName: 'settings',
class: `${ns}-config-button`,
icon: Icons.gear,
attrs: [ 'title="Settings"' ],
values: {
default: { class: 'muted' },
settings: { }
}
},
{
property: 'viewStyle',
tplName: 'threads',
class: `${ns}-threads-button`,
icon: Icons.search,
attrs: [ 'title="Threads"' ],
values: {
default: { class: 'muted' },
threads: { }
}
},
{
property: 'viewStyle',
tplName: 'tools',
class: `${ns}-tools-button`,
icon: Icons.tools,
attrs: [ 'title="Tools"' ],
values: {
default: { class: 'muted' },
tools: { }
}
},
{
tplName: 'close',
class: `${ns}-close-button`,
icon: Icons.close,
attrs: [ 'title="Hide the player"' ]
},
{
tplName: 'playing',
requireSound: true,
class: `${ns}-playing-jump-link`,
icon: Icons.musicNoteList,
attrs: [ 'title="Scroll the playlist 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,
href: data => data.sound.src,
icon: Icons.soundwave,
attrs: data => [
`href=${data.sound.src}`,
'title="Open the sound in a new tab"',
'target="_blank"'
]
},
{
tplName: 'dl-image',
requireSound: true,
class: `${ns}-download-link`,
icon: Icons.fileEarmarkImage,
attrs: data => [
'title="Download the image with the original filename"',
`data-src="${data.sound.image}"`,
`data-name="${data.sound.filename}"`
]
},
{
tplName: 'dl-sound',
requireSound: true,
class: `${ns}-download-link`,
icon: Icons.fileEarmarkMusic,
attrs: data => [
'title="Download the sound"',
`data-src="${data.sound.src}"`,
`data-name="${data.sound.name}"`
]
},
{
tplName: 'filter-image',
requireSound: true,
class: `${ns}-filter-link`,
icon: Icons.filter,
showIf: data => data.sound.imageMD5,
attrs: data => [
'title="Add the image MD5 to the filters."',
`data-filter="${data.sound.imageMD5}"`
]
},
{
tplName: 'filter-sound',
requireSound: true,
class: `${ns}-filter-link`,
icon: Icons.filter,
attrs: data => [
'title="Add the sound URL to the filters."',
`data-filter="${data.sound.src.replace(/^(https?:)?\/\//, '')}"`
]
},
{
tplName: 'remove',
requireSound: true,
class: `${ns}-remove-link`,
icon: Icons.trash,
attrs: data => [
'title="Filter the image."',
`data-id="${data.sound.id}"`
]
},
{
tplName: 'menu',
requireSound: true,
class: `${ns}-item-menu-button`,
icon: Icons.chevronDown,
attrs: data => [ `data-id=${data.sound.id}` ]
},
{
tplName: 'view-menu',
class: `${ns}-view-menu-button`,
icon: Icons.chevronDown,
attrs: [ 'href="javascript:;"' ]
}
];
/* WEBPACK VAR INJECTION */}.call(this, __webpack_require__(/*! ./src/icons */ "./src/icons.js")))
/***/ }),
/***/ "./src/components/user-template/index.js":
/*!***********************************************!*\
!*** ./src/components/user-template/index.js ***!
\***********************************************/
/*! no static exports found */
/***/ (function(module, exports, __webpack_require__) {
/* WEBPACK VAR INJECTION */(function(_) {const buttons = __webpack_require__(/*! ./buttons */ "./src/components/user-template/buttons.js");
const viewsMenuTemplate = __webpack_require__(/*! ./templates/views_menu.tpl */ "./src/components/user-template/templates/views_menu.tpl");
// Regex for replacements
const playingRE = /p: ?{([^}]*)}/g;
const hoverRE = /h: ?{([^}]*)}/g;
const buttonRE = new RegExp(`(${buttons.map(option => option.tplName).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)/g;
const configRE = /\$config\[([^\]]+)\]/g;
// Hold information on which config values components templates depend on.
const componentDeps = [ ];
module.exports = {
buttons,
delegatedEvents: {
click: {
[`.${ns}-playing-jump-link`]: () => Player.playlist.scrollToPlaying('center'),
[`.${ns}-viewStyle-button`]: 'playlist.toggleView',
[`.${ns}-hoverImages-button`]: 'playlist.toggleHoverImages',
[`.${ns}-remove-link`]: 'userTemplate._handleRemove',
[`.${ns}-filter-link`]: 'userTemplate._handleFilter',
[`.${ns}-download-link`]: 'userTemplate._handleDownload',
[`.${ns}-shuffle-button`]: 'userTemplate._handleShuffle',
[`.${ns}-repeat-button`]: 'userTemplate._handleRepeat',
[`.${ns}-reload-button`]: _.noDefault('playlist.refresh'),
[`.${ns}-add-button`]: _.noDefault(() => Player.$(`.${ns}-add-local-file-input`).click()),
[`.${ns}-item-menu-button`]: 'playlist._handleItemMenu',
[`.${ns}-view-menu-button`]: 'userTemplate._handleViewsMenu',
[`.${ns}-threads-button`]: 'threads.toggle',
[`.${ns}-tools-button`]: 'tools.toggle',
[`.${ns}-config-button`]: _.noDefault(() => Player.settings.toggle()),
[`.${ns}-favorites-button`]: 'favorites.toggle',
[`.${ns}-player-button`]: 'playlist.restore'
},
change: {
[`.${ns}-add-local-file-input`]: 'userTemplate._handleFileSelect'
}
},
initialize: function () {
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: function (data) {
const outerClass = data.outerClass || '';
const name = data.sound && data.sound.title || data.defaultName;
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, `<span class="${ns}-hover-display ${outerClass}">$1</span>`));
!data.ignoreButtons && (html = html.replace(buttonRE, function (full, type, text) {
let buttonConf = buttons.find(conf => conf.tplName === type);
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 is 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, class: ((topConf.class || '') + ' ' + (valConf.class || '')).trim() };
}
const attrs = [ ...(_confFuncOrText(buttonConf.attrs) || []) ];
attrs.some(attr => attr.startsWith('href')) || attrs.push('href="javascript:;"');
(buttonConf.class || outerClass) && attrs.push(`class="${buttonConf.class || ''} ${outerClass || ''}"`);
return `<a ${attrs.join(' ')}>${text || _confFuncOrText(buttonConf.icon) || _confFuncOrText(buttonConf.text)}</a>`;
}));
!data.ignoreSoundName && (html = html
.replace(soundTitleMarqueeRE, name ? `<div class="${ns}-col ${ns}-truncate-text" style="margin: 0 .5rem; text-overflow: clip;"><span title="${name}" class="${ns}-title-marquee" data-location="${data.location || ''}">${name}</span></div>` : '')
.replace(soundTitleRE, name ? `<div class="${ns}-col ${ns}-truncate-text" style="margin: 0 .5rem"><span title="${name}">${name}</span></div>` : ''));
!data.ignoreSoundProperties && (html = html
.replace(soundPropRE, (...args) => data.sound ? data.sound[args[1]] : '')
.replace(soundIndexRE, data.sound ? Player.sounds.indexOf(data.sound) + 1 : 0)
.replace(soundCountRE, Player.sounds.length));
!data.ignoreVersion && (html = html.replace(/%v/g, "3.3.1"));
// 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: function (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: function (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);
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');
// 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 type = match[1];
let buttonConf = buttons.find(conf => conf.tplName === type);
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: function (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: function (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();
}
});
},
/**
* Add local files.
*/
_handleFileSelect: function (e) {
e.preventDefault();
const input = e.eventTarget;
Player.playlist.addFromFiles(input.files);
},
/**
* Toggle the repeat style.
*/
_handleRepeat: function (e) {
e.preventDefault();
const values = [ 'all', 'one', 'none' ];
const current = values.indexOf(Player.config.repeat);
Player.set('repeat', values[(current + 4) % 3]);
},
/**
* Toggle the shuffle style.
*/
_handleShuffle: function (e) {
e.preventDefault();
Player.set('shuffle', !Player.config.shuffle);
Player.header.render();
// Update the play order.
if (!Player.config.shuffle) {
Player.sounds.sort((a, b) => Player.compareIds(a.id, b.id));
} else {
const sounds = Player.sounds;
for (let i = sounds.length - 1; i > 0; i--) {
const j = Math.floor(Math.random() * (i + 1));
[ sounds[i], sounds[j] ] = [ sounds[j], sounds[i] ];
}
}
Player.trigger('order');
},
_handleViewsMenu: function (e) {
e.preventDefault();
e.stopPropagation();
const dialog = _.element(viewsMenuTemplate());
Player.userTemplate._showMenu(e.eventTarget, dialog);
},
_showMenu: function (relative, dialog, parent) {
Player.display.closeDialogs();
parent || (parent = Player.container);
parent.appendChild(dialog);
// Position the menu.
Player.position.showRelativeTo(dialog, relative);
// Add the focused class handler
dialog.querySelectorAll('.entry').forEach(el => {
el.addEventListener('mouseenter', Player.userTemplate._setFocusedMenuItem);
});
Player.trigger('menu-open', dialog);
},
_setFocusedMenuItem: function (e) {
const submenu = e.currentTarget.querySelector('.submenu');
const menu = e.currentTarget.closest('.dialog');
const currentFocus = menu.querySelectorAll('.focused');
currentFocus.forEach(el => el.classList.remove('focused'));
e.currentTarget.classList.add('focused');
// Move the menu to the other side if there isn't room.
if (submenu && submenu.getBoundingClientRect().right > document.documentElement.clientWidth) {
submenu.style.inset = '0px 100% auto auto';
}
},
_handleFilter: function (e) {
e.preventDefault();
let filter = e.eventTarget.getAttribute('data-filter');
if (filter) {
Player.set('filters', Player.config.filters.concat(filter));
}
},
_handleDownload: function (e) {
const src = e.eventTarget.getAttribute('data-src');
const name = e.eventTarget.getAttribute('data-name') || new URL(src).pathname.split('/').pop();
GM.xmlHttpRequest({
method: 'GET',
url: src,
responseType: 'blob',
onload: response => {
const a = _.element(`<a href="${URL.createObjectURL(response.response)}" download="${name}" rel="noopener" target="_blank"></a>`);
a.click();
URL.revokeObjectURL(a.href);
},
onerror: response => Player.logError('There was an error downloading.', response, 'warning')
});
},
_handleRemove: function (e) {
const id = e.eventTarget.getAttribute('data-id');
const sound = id && Player.sounds.find(sound => sound.id === '' + id);
sound && Player.remove(sound);
},
};
/* WEBPACK VAR INJECTION */}.call(this, __webpack_require__(/*! ./src/_ */ "./src/_.js")))
/***/ }),
/***/ "./src/components/user-template/templates/views_menu.tpl":
/*!***************************************************************!*\
!*** ./src/components/user-template/templates/views_menu.tpl ***!
\***************************************************************/
/*! no static exports found */
/***/ (function(module, exports, __webpack_require__) {
/* WEBPACK VAR INJECTION */(function(Icons) {module.exports = (data = {}) => `<div class="${ns}-menu ${ns}-dialog dialog" id="menu" tabindex="0" data-type="post" style="position: fixed;">
${[ 'playlist', 'image' ].includes(Player.config.viewStyle) ? ''
: `<a class="${ns}-row nowrap ${ns}-align-center ${ns}-player-button entry" href="javascript:;"><div class="${ns}-col">Player</div><div class="${ns}-col-auto">${Icons.musicNoteList}</div></a>`}
${Player.config.viewStyle === 'settings' ? ''
: `<a class="${ns}-row nowrap ${ns}-align-center ${ns}-config-button entry" href="javascript:;"><div class="${ns}-col">Settings</div><div class="${ns}-col-auto">${Icons.gear}</div></span></a>`}
${Player.config.viewStyle === 'threads' ? ''
: `<a class="${ns}-row nowrap ${ns}-align-center ${ns}-threads-button entry" href="javascript:;"><div class="${ns}-col">Threads</div><div class="${ns}-col-auto">${Icons.search}</div></span></a>`}
${Player.config.viewStyle === 'tools' ? ''
: `<a class="${ns}-row nowrap ${ns}-align-center ${ns}-tools-button entry" href="javascript:;"><div class="${ns}-col">Tools</div><div class="${ns}-col-auto">${Icons.tools}</div></span></a>`}
</div>`
/* WEBPACK VAR INJECTION */}.call(this, __webpack_require__(/*! ./src/icons */ "./src/icons.js")))
/***/ }),
/***/ "./src/config/display.js":
/*!*******************************!*\
!*** ./src/config/display.js ***!
\*******************************/
/*! no static exports found */
/***/ (function(module, exports) {
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: 'preventSleep',
default: true,
title: 'Prevent Sleep',
description: 'Prevent sleeping while audio is playing. This only works when the browser and tab are in the foreground.',
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, mute, volume-bar, and fullscreen.',
default: [ 'fullscreen', 'duration', 'volume-bar', 'seek-bar', 'time', 'previous' ],
displayMethod: (value, attrs) => `<div class="${ns}-col"><textarea ${attrs}>${value}</textarea></div>`,
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',
updateStylesheet: 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,
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',
updateStylesheet: true,
allowInTheme: true,
class: `${ns}-colorpicker-input`,
displayMethod: (value, attrs) => `<div class="${ns}-col">
<input type="text" ${attrs} value="${value}">
<div class="${ns}-cp-preview" style="background: ${value}"></div>
</div>`,
actions: [
{ title: 'Match Theme', handler: 'display.forceBoardTheme' }
],
// These colors will be overriden with the theme defaults at initialization. They're set to yotsuba b here.
settings: [
{
property: 'colors.text',
default: '#000000',
title: 'Text'
},
{
property: 'colors.background',
default: '#d6daf0',
title: 'Background'
},
{
property: 'colors.border',
default: '#b7c5d9',
title: 'Border'
},
{
property: 'colors.odd_row',
default: '#d6daf0',
title: 'Odd Row',
},
{
property: 'colors.even_row',
default: '#b7c5d9',
title: 'Even Row'
},
{
property: 'colors.playing',
default: '#98bff7',
title: 'Playing Row'
},
{
property: 'colors.dragging',
default: '#c396c8',
title: 'Dragging Row'
},
{
property: 'colors.controls_background',
default: '#3f3f44',
title: 'Controls Background',
description: 'The controls container element background.',
actions: [ { title: 'Reset', handler: 'settings.reset' } ],
},
{
property: 'colors.controls_inactive',
default: '#FFFFFF',
title: 'Control Items',
description: 'The playback controls and played bar.',
actions: [ { title: 'Reset', handler: 'settings.reset' } ],
},
{
property: 'colors.controls_active',
default: '#00b6f0',
title: 'Focused Control Items',
description: 'The control items when hovered.',
actions: [ { title: 'Reset', handler: 'settings.reset' } ],
},
{
property: 'colors.controls_empty_bar',
default: '#131314',
title: 'Volume/Seek Bar Background',
decscription: 'The background of the volume and seek bars.',
actions: [ { title: 'Reset', handler: 'settings.reset' } ],
},
{
property: 'colors.controls_loaded_bar',
default: '#5a5a5b',
title: 'Loaded Bar Background',
description: 'The loaded bar within the seek bar.',
actions: [ { title: 'Reset', handler: 'settings.reset' } ],
},
// Not configurable but here for access in templates.
{
property: 'colors.page_background',
default: 'rgb(238, 242, 255)',
displayMethod: null,
allowInTheme: false
}
]
}
];
/***/ }),
/***/ "./src/config/filter.js":
/*!******************************!*\
!*** ./src/config/filter.js ***!
\******************************/
/*! no static exports found */
/***/ (function(module, exports) {
module.exports = [
{
property: 'addWebm',
title: 'Include WebM',
description: 'Whether to add all WebM files regardless of a sound filename.',
default: 'soundBoards',
displayGroup: 'Filter',
options: {
always: 'Always',
soundBoards: 'Boards with sound',
never: 'Never'
}
},
{
property: 'allow',
title: 'Allowed Hosts',
description: 'Which domains sounds are allowed to be loaded from.',
default: [
'4cdn.org',
'catbox.moe',
'dmca.gripe',
'lewd.se',
'pomf.cat',
'zz.ht'
],
actions: [ { title: 'Reset', handler: 'settings.reset' } ],
displayGroup: 'Filter',
split: '\n'
},
{
property: 'filters',
default: [ '# Image MD5 or sound URL' ],
title: 'Filters',
description: 'List of URLs or image MD5s to filter, one per line.\nLines starting with a # will be ignored.',
actions: [ { title: 'Reset', handler: 'settings.reset' } ],
displayGroup: 'Filter',
split: '\n'
}
];
/***/ }),
/***/ "./src/config/hosts.js":
/*!*****************************!*\
!*** ./src/config/hosts.js ***!
\*****************************/
/*! no static exports found */
/***/ (function(module, exports) {
module.exports = [
{
property: 'defaultUploadHost',
default: 'catbox',
parse: 'settings.hosts.setDefault'
},
{
property: 'uploadHosts',
title: 'Hosts',
actions: [
{ title: 'Add', handler: 'settings.hosts.add' },
{ title: 'Restore Defaults', handler: 'settings.hosts.restoreDefaults' }
],
displayGroup: 'Hosts',
displayMethod: () => `<div class="${ns}-host-inputs">${Object.entries(Player.config.uploadHosts).map(Player.settings.hosts.template).join('')}</div>`,
parse: 'settings.hosts.parse',
looseCompare: true,
dismissTextId: 'uplodHostSettings',
dismissRestoreText: 'Show Help',
text: 'Properties'
+ '<br><strong>Name</strong>: A unique identifier.'
+ '<br><strong>URL</strong>: The URL to post the file to.'
+ '<br><strong>Response Path/Match</strong>: A key path or regular expression to locate the uploaded filename in the response.'
+ '<br><strong>File URL Format</strong>: The URL format for uploaded sounds. %s is replaced with the result of response path/match if given or the full response.'
+ '<br><strong>Data</strong>: The form data for the upload (as JSON). Specify the file using $file.',
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',
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 ***!
\*****************************/
/*! no static exports found */
/***/ (function(module, exports, __webpack_require__) {
module.exports = [
// Order the groups appear in.
...__webpack_require__(/*! ./display */ "./src/config/display.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: 'shuffle',
default: false
},
{
property: 'repeat',
default: 'all'
},
{
property: 'viewStyle',
default: 'playlist'
},
{
property: 'showPlaylistSearch',
default: true
},
// These are for availability in templates
{
property: 'offsetTop',
default: '0'
},
{
property: 'offsetBottom',
default: '0'
}
];
/***/ }),
/***/ "./src/config/keybinds.js":
/*!********************************!*\
!*** ./src/config/keybinds.js ***!
\********************************/
/*! no static exports found */
/***/ (function(module, exports) {
const hasMediaSession = 'mediaSession' in navigator;
const keybindOpts = {
displayGroup: 'Keybinds',
format: 'hotkeys.stringifyKey',
parse: 'hotkeys.parseKey',
class: `${ns}-key-input`,
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' }
}
]
},
{
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: '' }
},
{
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: '' }
},
{
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/theme.js":
/*!*****************************!*\
!*** ./src/config/theme.js ***!
\*****************************/
/*! no static exports found */
/***/ (function(module, exports, __webpack_require__) {
module.exports = [
{
property: 'savedThemes',
title: 'Saved Themes',
actions: [
{ title: 'Restore Defaults', handler: 'theme._restoreDefaults' },
{ title: 'Save Current', handler: 'theme._showSaveOptions' }
],
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' } ],
default: 'repeat-button shuffle-button hover-images-button playlist-button\nsound-title-marquee\nview-menu-button add-button reload-button close-button',
displayGroup: 'Theme',
displayMethod: 'textarea',
themeField: true
},
{
property: 'rowTemplate',
title: 'Row',
actions: [ { title: 'Reset', handler: 'settings.reset' } ],
default: 'sound-title h:{menu-button}',
displayGroup: 'Theme',
displayMethod: 'textarea',
themeField: true
},
{
property: 'footerTemplate',
title: 'Footer',
actions: [ { title: 'Reset', handler: 'settings.reset' } ],
default: 'playing-button:"sound-index / " sound-count sounds\n'
+ '<div class="fcsp-col"></div>\n'
+ 'p:{\n'
+ ' post-link\n'
+ ' Open [ image-link sound-link ]\n'
+ ' Download [ dl-image-button dl-sound-button ]\n'
+ '}\n'
+ `<div class="${ns}-expander" data-direction="se"></div>\n`,
displayGroup: 'Theme',
displayMethod: 'textarea',
attrs: 'style="height:9em;"',
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' } ],
displayGroup: 'Theme',
displayMethod: 'textarea',
attrs: 'style="height:9em;"',
themeField: true
},
{
property: 'customCSS',
title: 'Custom CSS',
default: '',
displayGroup: 'Theme',
displayMethod: 'textarea',
attrs: 'style="height:9em"',
themeField: true
}
];
/***/ }),
/***/ "./src/file_parser.js":
/*!****************************!*\
!*** ./src/file_parser.js ***!
\****************************/
/*! no static exports found */
/***/ (function(module, exports, __webpack_require__) {
/* WEBPACK VAR INJECTION */(function(_) {const selectors = __webpack_require__(/*! ./selectors */ "./src/selectors.js");
const protocolRE = /^(https?:)?\/\//;
const filenameRE = /(.*?)[[({](?:audio|sound)[ =:|$](.*?)[\])}]/gi;
let localCounter = 0;
module.exports = {
parseFiles,
parsePost,
parseFileName
};
function parseFiles(target, postRender) {
let addedSounds = false;
let posts = target.classList.contains('post')
? [ target ]
: target.querySelectorAll(selectors.posts);
posts.forEach(post => parsePost(post, postRender) && (addedSounds = true));
if (addedSounds && postRender && Player.container) {
Player.playlist.render();
}
}
function parsePost(post, skipRender) {
try {
// Ignore the style fetcher post created by this script, quoted posts, and posts with no file.
let parent = post.parentElement;
let parentParent = parent && parent.parentElement;
if (post.classList.contains('style-fetcher') || parentParent && parentParent.id === 'qp' || parent && parent.classList.contains('noFile')) {
return;
}
// If there's a play button this post has already been parsed. Just wire up the link.
let playLink = post.querySelector(`.${ns}-play-link`);
if (playLink) {
const id = playLink.getAttribute('data-id');
playLink.onclick = () => Player.play(Player.sounds.find(sound => sound.id === id));
return;
}
let filename = null;
let filenameLocations = selectors.filename;
Object.keys(filenameLocations).some(function (selector) {
const node = post.querySelector(selector);
return node && (filename = node[filenameLocations[selector]]);
});
if (!filename) {
return;
}
selectors.filenameParser && (filename = selectors.filenameParser(filename));
const postID = post.id.slice(selectors.postIdPrefix.length);
const fileThumb = post.querySelector(selectors.thumb).closest('a');
const imageSrc = fileThumb && fileThumb.href;
const thumbImg = fileThumb && fileThumb.querySelector('img');
const thumbSrc = thumbImg && thumbImg.src;
const imageMD5 = Site === 'Fuuka'
? post.querySelector(':scope > a:nth-of-type(3)').href.split('/').pop()
: thumbImg && thumbImg.getAttribute('data-md5');
const sounds = parseFileName(filename, imageSrc, postID, thumbSrc, imageMD5);
if (!sounds.length) {
return;
}
// Create a play link
const firstID = sounds[0].id;
const linkInfo = selectors.playLink;
const content = `<a href="javascript:;" class="${linkInfo.class}" data-id="${firstID}">${linkInfo.text}</a>`;
const playLinkRelative = linkInfo.relative && post.querySelector(linkInfo.relative);
linkInfo.prependText && _addPlayLinkText(linkInfo.prependText, linkInfo.before, playLinkRelative);
playLink = linkInfo.before
? _.elementBefore(content, playLinkRelative)
: _.element(content, playLinkRelative);
linkInfo.appendText && _addPlayLinkText(linkInfo.appendText, linkInfo.before, playLinkRelative);
playLink.onclick = () => Player.play(sounds[0]);
// Don't add sounds from inline quotes of posts in the thread
sounds.forEach(sound => Player.add(sound, skipRender));
return sounds.length > 0;
} catch (err) {
Player.logError('There was an issue parsing the files. Please check the console for details.', err);
console.log('[4chan sounds player]', post);
}
}
function _addPlayLinkText(text, before, relative) {
const node = text && document.createTextNode(text);
if (before) {
relative.parentNode.insertBefore(node, relative);
} else {
relative.appendChild(node);
}
}
function parseFileName(filename, image, post, thumb, imageMD5, bypassVerification) {
if (!filename) {
return [];
}
// Best quality image. For webms this has to be the thumbnail still. SAD!
const imageOrThumb = image.endsWith('webm') ? thumb : image;
filename = filename.replace(/-/, '/');
const matches = [];
let match;
while ((match = filenameRE.exec(filename)) !== null) {
matches.push(match);
}
// Add webms without a sound filename as a standable video if enabled
if (!matches.length && (Player.config.addWebm === 'always' || (Player.config.addWebm === 'soundBoards' && (Board === 'gif' || Board === 'wsg'))) && filename.endsWith('.webm')) {
matches.push([ null, filename.slice(0, -5), image ]);
}
const defaultName = matches[0] && matches[0][1] || post || 'Local Sound ' + localCounter;
matches.length && !post && localCounter++;
return matches.reduce((sounds, match, i) => {
let src = match[2];
const id = (post || 'local' + localCounter) + ':' + i;
const name = match[1].trim();
const title = name || defaultName + (matches.length > 1 ? ` (${i + 1})` : '');
const standaloneVideo = src === image;
try {
if (src.includes('%')) {
src = decodeURIComponent(src);
}
if (!src.startsWith('blob:') && src.match(protocolRE) === null) {
src = (location.protocol + '//' + src);
}
} catch (error) {
return sounds;
}
const sound = { src, id, title, name, post, image, imageOrThumb, filename, thumb, imageMD5, standaloneVideo };
if (bypassVerification || Player.acceptedSound(sound)) {
sounds.push(sound);
}
return sounds;
}, []);
}
/* WEBPACK VAR INJECTION */}.call(this, __webpack_require__(/*! ./src/_ */ "./src/_.js")))
/***/ }),
/***/ "./src/globals.js":
/*!************************!*\
!*** ./src/globals.js ***!
\************************/
/*! no static exports found */
/***/ (function(module, exports) {
/**
* 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];
// 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 ***!
\**********************/
/*! no static exports found */
/***/ (function(module, exports, __webpack_require__) {
module.exports = {
fcSounds: '<svg width="452" height="257" xmlns="http://www.w3.org/2000/svg"><g><text font-weight="bold" font-style="italic" font-family="Helvetica, Arial, sans-serif" font-size="250" y="197" fill-opacity="0.05" fill="#000000">4sp</text></g></svg>',
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,
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,
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/main.js":
/*!*********************!*\
!*** ./src/main.js ***!
\*********************/
/*! no static exports found */
/***/ (function(module, exports, __webpack_require__) {
"use strict";
async function doInit() {
// Require globals again here just in case 4chan X loaded before timeout below.
__webpack_require__(/*! ./globals */ "./src/globals.js");
// Require these here so every other require is sure of the 4chan X state.
const Player = __webpack_require__(/*! ./player */ "./src/player.js");
const { parseFiles } = __webpack_require__(/*! ./file_parser */ "./src/file_parser.js");
await Player.initialize();
parseFiles(document.body, true);
const observer = new MutationObserver(function (mutations) {
mutations.forEach(function (mutation) {
if (mutation.type === 'childList') {
mutation.addedNodes.forEach(function (node) {
if (node.nodeType === Node.ELEMENT_NODE) {
parseFiles(node);
}
});
}
});
});
observer.observe(document.body, {
childList: true,
subtree: true
});
}
document.addEventListener('4chanXInitFinished', doInit);
// The timeout makes sure 4chan X will have added it's classes and be identified.
setTimeout(function () {
__webpack_require__(/*! ./globals */ "./src/globals.js");
// If it's already known 4chan X is installed this can be skipped.
if (!isChanX) {
if (document.readyState !== 'loading') {
doInit();
} else {
document.addEventListener('DOMContentLoaded', doInit);
}
}
}, 0);
/***/ }),
/***/ "./src/migrations.js":
/*!***************************!*\
!*** ./src/migrations.js ***!
\***************************/
/*! no static exports found */
/***/ (function(module, exports) {
// Migrations must return { [prop]: [ previous, updated ], ... }
module.exports = [
{
version: '3.0.0',
name: 'hosts-filename-length',
async run() {
const defaultHosts = Player.settings.findDefault('uploadHosts').default;
Object.keys(defaultHosts).forEach(host => {
Player.config.uploadHosts[host].filenameLength = defaultHosts[host].filenameLength;
});
return {};
}
},
{
version: '3.3.0',
name: 'sound-name-title-swap',
async run() {
const config = Player.config;
const changes = {};
const templates = [ 'headerTemplate', 'rowTemplate', 'footerTemplate', 'chanXTemplate', 'customCSS' ];
templates.forEach(prop => {
/sound-name/.test(config[prop]) && (changes[prop] = [
config[prop],
config[prop] = config[prop].replace(/sound-name/g, 'sound-title')
]);
});
return changes;
}
}
];
/***/ }),
/***/ "./src/player.js":
/*!***********************!*\
!*** ./src/player.js ***!
\***********************/
/*! no static exports found */
/***/ (function(module, exports, __webpack_require__) {
/* WEBPACK VAR INJECTION */(function(_) {const components = {
// Settings must be first.
settings: __webpack_require__(/*! ./components/settings */ "./src/components/settings/index.js"),
events: __webpack_require__(/*! ./components/events */ "./src/components/events/index.js"),
actions: __webpack_require__(/*! ./components/actions */ "./src/components/actions/index.js"),
colorpicker: __webpack_require__(/*! ./components/settings/colorpicker */ "./src/components/settings/colorpicker.js"),
controls: __webpack_require__(/*! ./components/controls */ "./src/components/controls/index.js"),
display: __webpack_require__(/*! ./components/display */ "./src/components/display/index.js"),
footer: __webpack_require__(/*! ./components/footer */ "./src/components/footer/index.js"),
header: __webpack_require__(/*! ./components/header */ "./src/components/header/index.js"),
hotkeys: __webpack_require__(/*! ./components/hotkeys */ "./src/components/hotkeys/index.js"),
minimised: __webpack_require__(/*! ./components/minimised */ "./src/components/minimised/index.js"),
playlist: __webpack_require__(/*! ./components/playlist */ "./src/components/playlist/index.js"),
position: __webpack_require__(/*! ./components/position */ "./src/components/position/index.js"),
theme: __webpack_require__(/*! ./components/theme */ "./src/components/theme/index.js"),
threads: __webpack_require__(/*! ./components/threads */ "./src/components/threads/index.js"),
tools: __webpack_require__(/*! ./components/tools */ "./src/components/tools/index.js"),
userTemplate: __webpack_require__(/*! ./components/user-template */ "./src/components/user-template/index.js")
};
// Create a global ref to the player.
const Player = window.Player = module.exports = {
ns,
// Store a ref to the components so they can be iterated.
components,
audio: new Audio(),
sounds: [],
isHidden: true,
container: null,
ui: {},
_public: [],
// Build the config from the default
config: {},
// Helper function to query elements in the player.
$: (...args) => Player.container && Player.container.querySelector(...args),
$all: (...args) => Player.container && Player.container.querySelectorAll(...args),
/**
* Set up the player.
*/
initialize: async function initialize() {
if (Player.initialized) {
return;
}
Player.initialized = true;
try {
Player.sounds = [ ];
// Run the initialisation for each component.
for (let name in components) {
components[name].initialize && await components[name].initialize();
}
// Show a button to open the player.
Player.display.createPlayerButton();
// Render the player, but not neccessarily show it.
Player.display.render();
// Expose some functionality via PlayerEvent custom events.
document.addEventListener('PlayerEvent', e => {
if (e.detail.action && ( true || false)) {
return _.get(Player, e.detail.action).apply(window, e.detail.arguments);
}
});
} catch (err) {
Player.logError('There was an error initialzing the sound player. Please check the console for details.', err);
// Can't recover so throw this error.
throw err;
}
},
/**
* Returns the function of Player referenced by name or a given handler function.
* @param {String|Function} handler Name to function on Player or a handler function.
*/
getHandler: function (handler) {
return typeof handler === 'string' ? _.get(Player, handler) : handler;
},
/**
* Compare two ids for sorting.
*/
compareIds: function (a, b) {
const [ aPID, aSID ] = a.split(':');
const [ bPID, bSID ] = b.split(':');
const postDiff = aPID - bPID;
return postDiff !== 0 ? postDiff : aSID - bSID;
},
/**
* Check whether a sound src and image are allowed and not filtered.
*/
acceptedSound: function ({ src, imageMD5 }) {
try {
const link = new URL(src);
const host = link.hostname.toLowerCase();
return !Player.config.filters.find(v => v === imageMD5 || v === host + link.pathname)
&& Player.config.allow.find(h => host === h || host.endsWith('.' + h));
} catch (err) {
return false;
}
},
/**
* Listen for changes
*/
syncTab: (property, callback) => typeof GM_addValueChangeListener !== 'undefined' && GM_addValueChangeListener(property, (_prop, oldValue, newValue, remote) => {
remote && callback(newValue, oldValue);
}),
/**
* Log errors and show an error notification.
*/
logError: function (message, error, type) {
console.error('[4chan sounds player]', message, error);
if (error instanceof PlayerError) {
error.error && console.error('[4chan sound player]', error.error);
message = error.reason;
type = error.type || type;
}
Player.alert(message, type || 'error', 5);
},
/**
* Show a notification using 4chan X or the native extention.
*/
alert: function (content, type = 'info', lifetime = 5) {
if (isChanX) {
content = _.element(`<span>${content}</span`);
document.dispatchEvent(new CustomEvent('CreateNotification', {
bubbles: true,
detail: { content, type, lifetime }
}));
} else if (typeof Feedback !== 'undefined') {
Feedback.showMessage(content, type === 'info' ? 'notify' : 'error', lifetime * 1000);
}
}
};
// Add each of the components to the player.
for (let name in components) {
Player[name] = components[name];
(Player[name].atRoot || []).forEach(k => Player[k] = Player[name][k]);
(Player[name].public || []).forEach(k => {
Player._public.push((Player[name].atRoot || []).includes(k) ? k : `${name}.${k}`);
});
}
/* WEBPACK VAR INJECTION */}.call(this, __webpack_require__(/*! ./src/_ */ "./src/_.js")))
/***/ }),
/***/ "./src/scss/4chan-x-polyfill.scss":
/*!****************************************!*\
!*** ./src/scss/4chan-x-polyfill.scss ***!
\****************************************/
/*! no static exports found */
/***/ (function(module, exports) {
module.exports = (data = {}) => `.dialog {
background: ${Player.config.colors.background};
background: ${Player.config.colors.background};
border-color: ${Player.config.colors.border};
border-radius: 3px;
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.15);
border-radius: 3px;
padding-top: 1px;
padding-bottom: 3px;
}
.entry {
position: relative;
display: block;
padding: 0.125rem 0.5rem;
min-width: 70px;
white-space: nowrap;
}
.entry.has-submenu::after {
content: "";
border-left: 0.5em solid;
border-top: 0.3em solid transparent;
border-bottom: 0.3em solid transparent;
display: inline-block;
margin: 0.35em;
position: absolute;
right: 3px;
}
.entry.focused {
background: rgba(255, 255, 255, 0.33);
}
.entry.focused > .submenu {
display: block;
}
.submenu {
position: absolute;
display: none;
}`
/***/ }),
/***/ "./src/scss/style.scss":
/*!*****************************!*\
!*** ./src/scss/style.scss ***!
\*****************************/
/*! no static exports found */
/***/ (function(module, exports) {
module.exports = (data = {}) => `.${ns}-colorpicker {
position: fixed;
padding: 0.25rem;
white-space: nowrap;
z-index: 999;
}
.${ns}-colorpicker .${ns}-cp-saturation {
display: inline-block;
position: relative;
}
.${ns}-colorpicker .${ns}-cp-saturation .position {
width: 5px;
}
.${ns}-colorpicker .${ns}-cp-saturation::before {
content: "";
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
border-radius: inherit;
background: black;
-webkit-mask-image: linear-gradient(#0000, #000);
mask-image: linear-gradient(#0000, #000);
}
.${ns}-colorpicker .${ns}-cp-hue {
margin-left: 0.5rem;
display: inline-block;
position: relative;
width: 30px;
background: linear-gradient(to bottom, #F00, #FF0, #0F0, #0FF, #00F, #F0F, #F00);
}
.${ns}-colorpicker .${ns}-cp-hue .position {
top: -3px;
left: -1px;
right: -1px;
}
.${ns}-colorpicker .${ns}-cp-saturation .position, .${ns}-colorpicker .${ns}-cp-hue .position {
position: absolute;
height: 5px;
border-radius: 1rem;
}
.${ns}-colorpicker .${ns}-output {
vertical-align: top;
margin-left: 1rem;
display: inline-block;
}
.${ns}-colorpicker .${ns}-output .${ns}-rgb-input {
width: 2rem;
}
.${ns}-colorpicker .${ns}-output .output-color {
height: 40px;
margin: 0.25rem 0;
}
.${ns}-cp-preview, .${ns}-cp-saturation .position, .${ns}-cp-hue .position, .${ns}-output .output-color {
border: solid 1px black;
box-shadow: inset 0 0 0 1px #EEE;
}
.${ns}-cp-preview {
height: 1em;
width: 1em;
margin-left: 0.125rem;
}
.${ns}-text-muted {
color: #909090;
}
.${ns}-controls {
align-items: center;
padding: 0.5rem 0;
position: relative;
background: ${Player.config.colors.controls_background};
justify-content: space-between;
}
.${ns}-controls > div {
margin: 0 0.5rem;
}
.${ns}-controls .${ns}-current-time {
color: ${Player.config.colors.controls_inactive};
}
.${ns}-controls .${ns}-media-control {
width: 1.5rem;
height: 1.5rem;
font-size: 1rem;
color: ${Player.config.colors.controls_inactive};
}
.${ns}-controls .${ns}-media-control:hover {
color: ${Player.config.colors.controls_active};
}
.${ns}-media-control {
display: flex;
justify-content: center;
align-items: center;
cursor: pointer;
}
.${ns}-media-control.${ns}-hover-fill svg[class$=-fill], .${ns}-media-control.${ns}-hover-fill svg[class*="-fill "] {
display: none;
}
.${ns}-media-control.${ns}-hover-fill:hover svg {
display: none;
}
.${ns}-media-control.${ns}-hover-fill:hover svg[class$=-fill], .${ns}-media-control.${ns}-hover-fill:hover svg[class*="-fill "] {
display: block;
}
.${ns}-media-control.${ns}-play-button:not(.${ns}-play) svg.bi-play-fill, .${ns}-media-control.${ns}-play-button:not(.${ns}-play) svg.bi-play {
display: none !important;
}
.${ns}-media-control.${ns}-play-button.${ns}-play svg.bi-pause-fill, .${ns}-media-control.${ns}-play-button.${ns}-play svg.bi-pause {
display: none !important;
}
.${ns}-media-control.${ns}-fullscreen-button svg.bi-fullscreen-exit {
display: none;
}
#${ns}-container[data-view-style=fullscreen] .${ns}-media-control.${ns}-fullscreen-button svg.bi-fullscreen-exit {
display: block;
}
#${ns}-container[data-view-style=fullscreen] .${ns}-media-control.${ns}-fullscreen-button svg.bi-fullscreen {
display: none;
}
.${ns}-media-control.${ns}-volume-button.mute .bi:not(.bi-volume-mute):not(.bi-volume-mute-fill) {
display: none;
}
.${ns}-media-control.${ns}-volume-button.up .bi:not(.bi-volume-up):not(.bi-volume-up-fill) {
display: none;
}
.${ns}-progress-bar {
min-width: 3.5rem;
height: 1.5rem;
display: flex;
align-items: center;
}
.${ns}-progress-bar .${ns}-full-bar {
height: 0.3rem;
width: 100%;
background: ${Player.config.colors.controls_empty_bar};
border-radius: 1rem;
position: relative;
}
.${ns}-progress-bar .${ns}-full-bar > div {
position: absolute;
top: 0;
bottom: 0;
border-radius: 1rem;
}
.${ns}-progress-bar .${ns}-full-bar .${ns}-loaded-bar {
background: ${Player.config.colors.controls_loaded_bar};
}
.${ns}-progress-bar .${ns}-full-bar .${ns}-current-bar {
display: flex;
justify-content: flex-end;
align-items: center;
}
.${ns}-progress-bar .${ns}-full-bar .${ns}-current-bar:after {
content: "";
background: ${Player.config.colors.controls_inactive};
height: 0.8rem;
min-width: 0.8rem;
border-radius: 1rem;
box-shadow: rgba(0, 0, 0, 0.76) 0 0 3px 0;
margin-right: -0.4rem;
}
.${ns}-progress-bar:hover .${ns}-current-bar:after {
background: ${Player.config.colors.controls_active};
}
.${ns}-seek-bar .${ns}-current-bar {
background: ${Player.config.colors.controls_active};
}
.${ns}-volume-bar .${ns}-current-bar {
background: ${Player.config.colors.controls_inactive};
}
.${ns}-chan-x-controls .${ns}-current-time, .${ns}-chan-x-controls .${ns}-duration {
margin: 0 0.25rem;
}
.${ns}-header, .${ns}-footer {
text-align: center;
padding: 0.125rem;
max-width: 100%;
line-height: 1rem;
}
.${ns}-header:hover .${ns}-hover-display, .${ns}-footer:hover .${ns}-hover-display {
display: flex;
}
.${ns}-header .${ns}-expander, .${ns}-footer .${ns}-expander {
opacity: 0;
position: absolute;
bottom: -0.25rem;
right: -0.25rem;
height: 0.75rem;
width: 0.75rem;
cursor: se-resize;
background: linear-gradient(to bottom right, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0) 50%, ${Player.config.colors.border} 55%, ${Player.config.colors.border} 100%);
}
.${ns}-header .${ns}-expander[data-direction=sw], .${ns}-footer .${ns}-expander[data-direction=sw] {
left: -0.25rem;
right: auto;
transform: rotate(90deg);
cursor: sw-resize;
}
.${ns}-header .${ns}-expander[data-direction=nw], .${ns}-footer .${ns}-expander[data-direction=nw] {
left: -0.25rem;
top: -0.25rem;
right: auto;
bottom: auto;
transform: rotate(180deg);
cursor: nw-resize;
}
.${ns}-header .${ns}-expander[data-direction=ne], .${ns}-footer .${ns}-expander[data-direction=ne] {
right: -0.25rem;
top: -0.25rem;
bottom: auto;
transform: rotate(270deg);
cursor: ne-resize;
}
.${ns}-header {
cursor: grab;
border-bottom: solid 1px ${Player.config.colors.border};
}
.${ns}-footer {
cursor: grab;
border-top: solid 1px ${Player.config.colors.border};
}
.${ns}-title-marquee {
transition: margin-left 1s linear;
}
.${ns}-menu svg.bi {
margin: 0 -0.25rem 0 0.25rem;
}
.${ns}-header svg.bi, .${ns}-footer svg.bi {
margin: 0 0.125rem;
}
.muted svg.bi {
opacity: 0.45;
}
svg.bi {
overflow: visible;
height: 1em;
width: 1em;
}
.${ns}-image-link {
text-align: center;
display: flex;
flex-grow: 1;
justify-content: center;
overflow: hidden;
position: relative;
}
.${ns}-image-link.${ns}-show-video .${ns}-video {
display: block;
}
.${ns}-image-link.${ns}-show-video .${ns}-image {
display: none;
}
.${ns}-image-link.${ns}-pip {
position: fixed;
right: 10px;
align-items: end;
}
.${ns}-image-link.${ns}-pip .${ns}-image, .${ns}-image-link.${ns}-pip .${ns}-video {
width: auto;
height: auto;
max-height: ${Player.config.maxPIPWidth};
max-width: ${Player.config.maxPIPWidth};
object-fit: contain;
}
.${ns}-image-link .${ns}-video {
display: none;
}
.${ns}-image-link .${ns}-image, .${ns}-image-link .${ns}-video {
height: 100%;
width: 100%;
object-fit: contain;
}
.${ns}-image-link .${ns}-background-image {
position: absolute;
top: -20px;
bottom: -20px;
left: -20px;
right: -20px;
object-fit: cover;
object-position: center;
height: calc(100% + 40px);
width: calc(100% + 40px);
filter: blur(10px) brightness(0.7) saturate(0.5) contrast(0.7);
z-index: -1;
}
.${ns}-image-link .${ns}-background-image:not([src]) {
display: none;
}
#${ns}-container[data-view-style=fullscreen].playing-video .${ns}-image-link {
background: black;
}
#${ns}-container[data-view-style=fullscreen].playing-video .${ns}-background-image {
display: none;
}
#${ns}-container {
position: fixed;
display: flex;
flex-direction: column;
background: ${Player.config.colors.background};
color: ${Player.config.colors.text};
border: 1px solid ${Player.config.colors.border};
box-sizing: border-box;
min-width: 7rem;
}
.${ns}-panel {
padding: 0 0.25rem;
height: 100%;
width: calc(100% - .5rem);
overflow: auto;
}
.${ns}-heading {
font-weight: 600;
margin: 0.5rem 0;
}
.${ns}-has-description {
cursor: help;
}
.${ns}-heading-action {
font-weight: normal;
text-decoration: underline;
display: inline-flex;
}
.${ns}-row {
display: flex;
flex-wrap: wrap;
min-width: 100%;
box-sizing: border-box;
}
.${ns}-row.nowrap {
flex-wrap: nowrap;
}
.${ns}-col-auto {
flex: 0 0 auto;
width: auto;
max-width: 100%;
display: inline-flex;
}
.${ns}-col {
flex-basis: 0;
flex-grow: 1;
max-width: 100%;
width: 100%;
position: relative;
}
.${ns}-align-center {
align-items: center;
align-content: center;
align-self: center;
}
.${ns}-align-start {
align-items: start;
align-content: start;
align-self: start;
}
.${ns}-space-between {
justify-content: space-between;
}
html.fourchan-x #${ns}-container .fa {
font-size: 0;
visibility: hidden;
margin: 0 0.15rem;
}
.${ns}-truncate-text {
white-space: nowrap;
text-overflow: ellipsis;
overflow: hidden;
}
.${ns}-hover-display {
display: none;
}
.${ns}-player {
display: flex;
flex-direction: column;
flex-grow: 1;
overflow: auto;
}
.${ns}-player .${ns}-hover-image {
position: fixed;
max-height: 125px;
max-width: 125px;
}
.${ns}-player.${ns}-hide-hover-image .${ns}-hover-image {
display: none !important;
}
.${ns}-list-container {
flex-grow: 1;
overflow: auto;
}
.${ns}-list-container .${ns}-list-item {
list-style-type: none;
padding: 0.15rem 0.25rem;
white-space: nowrap;
text-overflow: ellipsis;
cursor: pointer;
background: ${Player.config.colors.odd_row};
overflow: hidden;
height: 1.3rem;
}
.${ns}-list-container .${ns}-list-item:nth-child(2n) {
background: ${Player.config.colors.even_row};
}
.${ns}-list-container .${ns}-list-item:nth-child(n).playing {
background: ${Player.config.colors.playing};
}
.${ns}-list-container .${ns}-list-item .${ns}-item-menu-button {
right: 0.25rem;
}
.${ns}-list-container .${ns}-list-item:hover .${ns}-hover-display {
display: flex;
}
.${ns}-list-container .${ns}-list-item.${ns}-dragging {
background: ${Player.config.colors.dragging};
}
.${ns}-settings textarea {
border: solid 1px ${Player.config.colors.border};
min-width: 100%;
min-height: 4rem;
box-sizing: border-box;
white-space: pre;
}
.${ns}-settings .${ns}-sub-settings .${ns}-col {
min-height: 1.55rem;
display: flex;
align-items: center;
align-content: center;
white-space: nowrap;
}
.${ns}-settings .${ns}-settings-tabs {
justify-content: space-between;
flex-direction: row-reverse;
margin: 0 -0.25rem;
}
.${ns}-settings .${ns}-settings-tab-group {
text-align: center;
white-space: nowrap;
align-items: center;
}
.${ns}-settings .${ns}-settings-tab {
display: flex;
margin: 0.25rem;
text-decoration: underline;
text-align: center;
}
.${ns}-settings .${ns}-settings-tab.active {
font-weight: bold;
}
.${ns}-settings .${ns}-settings-tab svg.bi {
margin: 0 -0.125rem;
}
.${ns}-settings .${ns}-settings-group {
display: none;
}
.${ns}-settings .${ns}-settings-group.active {
display: block;
}
.${ns}-settings .${ns}-host-input {
margin: 0.5rem 0;
border-top: solid 1px ${Player.config.colors.border};
}
.${ns}-settings .${ns}-host-input.invalid {
border: solid 1px red;
}
.${ns}-settings .${ns}-host-input .${ns}-host-controls {
align-items: center;
justify-content: space-between;
margin: 0.125rem 0;
}
.${ns}-settings .${ns}-host-input input[type=text] {
min-width: 100%;
box-sizing: border-box;
}
.${ns}-theme-save-options {
position: fixed;
max-height: 20rem;
overflow: auto;
padding: 0.25rem;
}
.${ns}-theme-save-options:not(.fields-collapsed) .bi-chevron-down, .${ns}-theme-save-options.fields-collapsed .bi-chevron-up, .${ns}-theme-save-options.fields-collapsed input[type=checkbox]:not(:checked), .${ns}-theme-save-options.fields-collapsed input[type=checkbox]:not(:checked) + label {
display: none;
}
.${ns}-info-circle {
cursor: pointer;
}
.${ns}-info-circle svg {
height: 0.8em;
width: 0.8em;
}
.${ns}-popover-body {
position: fixed;
padding: 0.25rem;
max-width: 12rem;
text-align: center;
border-radius: 0.3rem;
}
.${ns}-threads .${ns}-thread-board-list label {
display: inline-block;
width: 4rem;
}
.${ns}-threads .${ns}-thread-list {
margin: 0.5rem -0.25rem 0;
padding: 0.5rem 1rem;
border-top: solid 1px ${Player.config.colors.border};
}
.${ns}-threads .${ns}-thread-list .boardBanner {
margin: 1rem 0;
}
.${ns}-threads table {
border-top: solid 1px ${Player.config.colors.border};
width: 100%;
margin-top: 0.5rem;
border-collapse: collapse;
}
.${ns}-threads table th {
border-bottom: solid 1px ${Player.config.colors.border};
}
.${ns}-threads table th, .${ns}-threads table td {
text-align: left;
padding: 0.25rem;
}
.${ns}-threads table tr {
padding: 0.25rem 0;
}
.${ns}-threads table .${ns}-threads-body tr {
background: ${Player.config.colors.even_row};
}
.${ns}-threads table .${ns}-threads-body tr:nth-child(2n) {
background: ${Player.config.colors.odd_row};
}
.${ns}-create-sound-status {
margin-top: 0.5rem;
border: solid 1px ${Player.config.colors.border};
border-radius: 5px;
padding: 0.25rem;
}
.${ns}-file-input, .${ns}-tools input[type=text] {
width: 100%;
color: black;
}
.${ns}-file-overlay, .${ns}-tools input[type=text] {
box-sizing: border-box;
height: 1.5rem;
border: solid 1px ${Player.config.colors.border};
min-width: 5rem;
display: flex;
align-items: center;
padding: 0 0.25rem;
margin: 0;
}
.${ns}-file-input.placeholder span, .${ns}-create-sound-form input[type=text]::placeholder {
color: #AAA;
opacity: 1;
}
.${ns}-file-input .${ns}-file-overlay {
position: relative;
background: white;
}
.${ns}-file-input .placeholder-text {
display: none;
}
.${ns}-file-input.placeholder .placeholder-text {
display: inherit;
}
.${ns}-file-input span {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.${ns}-file-input input[type=file] {
width: 100%;
box-sizing: border-box;
height: 100%;
position: absolute;
left: 0;
opacity: 0;
}
.${ns}-file-input .overfile {
z-index: 9999;
}
.${ns}-file-input .${ns}-file-list {
padding: 0 0.25rem;
}
.${ns}-file-input .${ns}-file-list:empty {
display: none;
}
.${ns}-input-append {
position: absolute;
display: flex;
align-items: center;
background: white;
padding-left: 0.25rem;
right: 0.125rem;
}
.${ns}-threads, .${ns}-settings, .${ns}-tools, .${ns}-player {
display: none;
}
#${ns}-container[data-view-style=settings] .${ns}-settings {
display: block;
}
#${ns}-container[data-view-style=threads] .${ns}-threads {
display: block;
}
#${ns}-container[data-view-style=tools] .${ns}-tools {
display: block;
}
#${ns}-container[data-view-style=image] .${ns}-player,
#${ns}-container[data-view-style=playlist] .${ns}-player,
#${ns}-container[data-view-style=fullscreen] .${ns}-player {
display: flex;
}
#${ns}-container[data-view-style=image] .${ns}-list-container, #${ns}-container[data-view-style=image] .${ns}-playlist-search {
display: none;
}
#${ns}-container[data-view-style=image] .${ns}-image-link {
height: auto;
}
#${ns}-container[data-view-style=playlist] .${ns}-image-link {
height: 125px;
flex-shrink: 0;
}
#${ns}-container[data-view-style=fullscreen].cursor-inactive .${ns}-player {
cursor: none;
}
#${ns}-container[data-view-style=fullscreen].cursor-inactive .${ns}-controls {
opacity: 0;
}
#${ns}-container[data-view-style=fullscreen] .${ns}-image-link {
height: calc(100% - .4rem) !important;
}
#${ns}-container[data-view-style=fullscreen] .${ns}-controls {
position: absolute;
left: 0;
right: 0;
bottom: 0;
opacity: 0.7;
transition: opacity 0.3s ease;
}
#${ns}-container[data-view-style=fullscreen] .${ns}-list-container {
position: absolute;
top: 100%;
width: 100%;
}`
/***/ }),
/***/ "./src/selectors.js":
/*!**************************!*\
!*** ./src/selectors.js ***!
\**************************/
/*! no static exports found */
/***/ (function(module, exports) {
module.exports = {
'4chan': {
postIdPrefix: 'p',
posts: '.post',
// For 4chan there's native / 4chan X / 4chan X with file info formatting
filename: {
'.fileText .file-info .fnfull': 'textContent',
'.fileText .file-info > a': 'textContent',
'.fileText > a': 'title',
'.fileText': 'textContent'
},
thumb: '.fileThumb',
playLink: {
class: `${ns}-play-link`,
text: 'play',
relative: '.fileText',
prependText: ' '
},
// Deliberately missing dots because this is used to set the class
styleFetcher: 'post reply style-fetcher',
limitWidthOf: '.thread > .postContainer'
},
FoolFuuka: {
postIdPrefix: '',
posts: 'article',
// For the archive the OP and reply selector differs
filename: {
'.thread_image_box .post_file_filename': 'textContent',
'.post_file_filename': 'title'
},
thumb: '.thread_image_link',
playLink: {
class: `${ns}-play-link btnr`,
text: 'Play',
relative: '.post_controls'
},
styleFetcher: 'post_wrapper style-fetcher',
limitWidthOf: '.posts > article.post'
},
Fuuka: {
postIdPrefix: 'p',
posts: '.content > div, td.reply',
filename: {
':scope > span': 'textContent'
},
filenameParser: v => v.split(', ').slice(2).join(', '),
thumb: '.thumb',
playLink: {
class: `${ns}-play-link`,
text: 'play',
relative: 'br:nth-of-type(2)',
before: true,
prependText: ' [',
appendText: ']'
},
styleFetcher: 'reply style-fetcher',
limitWidthOf: '.content > div, .content > table'
}
}[Site];
/***/ })
/******/ });