\n ![](\"static/android-chrome-192x192.png\")
\n
\n
\n );\n }\n\n return children;\n }\n}\n\nexport default ErrorBoundary;\n"
},
{
"path": "src/client/components/InfiniteScroll.jsx",
"content": "/**\n * Apologies for this trainwreck. Copied and pasted from\n * https://www.npmjs.com/package/react-infinite-scroll-component\n * with a few small changes because I didn't want to install react-compat.\n */\n\nimport { Component } from 'inferno';\n\nconst ThresholdUnits = {\n Pixel: 'Pixel',\n Percent: 'Percent',\n};\n\nconst defaultThreshold = {\n unit: ThresholdUnits.Percent,\n value: 0.8,\n};\n\nconst parseThreshold = (scrollThreshold) => {\n if (typeof scrollThreshold === \"number\") {\n return {\n unit: ThresholdUnits.Percent,\n value: scrollThreshold * 100,\n };\n }\n\n if (typeof scrollThreshold === \"string\") {\n if (scrollThreshold.match(/^(\\d*(\\.\\d+)?)px$/)) {\n return {\n unit: ThresholdUnits.Pixel,\n value: parseFloat(scrollThreshold),\n };\n }\n\n if (scrollThreshold.match(/^(\\d*(\\.\\d+)?)%$/)) {\n return {\n unit: ThresholdUnits.Percent,\n value: parseFloat(scrollThreshold),\n };\n }\n\n console.warn('scrollThreshold format is invalid. Valid formats: \"120px\", \"50%\"...');\n\n return defaultThreshold;\n }\n\n console.warn('scrollThreshold should be string or number');\n\n return defaultThreshold;\n}\n\n// https://remysharp.com/2010/07/21/throttling-function-calls\nconst throttle = (fn, threshhold, scope) => {\n threshhold || (threshhold = 250);\n let last;\n let deferTimer;\n return function () {\n const context = scope || this;\n\n const now = +new Date();\n let args = arguments;\n if (last && now < last + threshhold) {\n // hold on to it\n clearTimeout(deferTimer);\n deferTimer = setTimeout(() => {\n last = now;\n fn.apply(context, args);\n }, threshhold);\n } else {\n last = now;\n fn.apply(context, args);\n }\n };\n};\n\nclass InfiniteScroll extends Component {\n constructor(props) {\n super();\n this.state = {\n showLoader: false,\n lastScrollTop: 0,\n actionTriggered: false,\n pullToRefreshThresholdBreached: false,\n };\n // variables to keep track of pull down behaviour\n this.startY = 0;\n this.currentY = 0;\n this.dragging = false;\n // will be populated in componentDidMount\n // based on the height of the pull down element\n this.maxPullDownDistance = 0;\n\n this.onScrollListener = this.onScrollListener.bind(this);\n this.throttledOnScrollListener = throttle(this.onScrollListener, 150).bind(\n this,\n );\n this.onStart = this.onStart.bind(this);\n this.onMove = this.onMove.bind(this);\n this.onEnd = this.onEnd.bind(this);\n this.getScrollableTarget = this.getScrollableTarget.bind(this);\n }\n\n componentDidMount() {\n this._scrollableNode = this.getScrollableTarget();\n this.el = this.props.height\n ? this._infScroll\n : this._scrollableNode || window;\n this.el.addEventListener('scroll', this.throttledOnScrollListener);\n\n if (\n typeof this.props.initialScrollY === 'number'\n && this.el.scrollHeight > this.props.initialScrollY\n ) {\n this.el.scrollTo(0, this.props.initialScrollY);\n }\n\n if (this.props.pullDownToRefresh) {\n this.el.addEventListener('touchstart', this.onStart);\n this.el.addEventListener('touchmove', this.onMove);\n this.el.addEventListener('touchend', this.onEnd);\n\n this.el.addEventListener('mousedown', this.onStart);\n this.el.addEventListener('mousemove', this.onMove);\n this.el.addEventListener('mouseup', this.onEnd);\n\n // get BCR of pullDown element to position it above\n this.maxPullDownDistance = this._pullDown.firstChild.getBoundingClientRect().height;\n this.forceUpdate();\n\n if (typeof this.props.refreshFunction !== 'function') {\n throw new Error(\n `Mandatory prop \"refreshFunction\" missing.\n Pull Down To Refresh functionality will not work\n as expected. Check README.md for usage'`,\n );\n }\n }\n }\n\n componentWillUnmount() {\n this.el.removeEventListener('scroll', this.throttledOnScrollListener);\n\n if (this.props.pullDownToRefresh) {\n this.el.removeEventListener('touchstart', this.onStart);\n this.el.removeEventListener('touchmove', this.onMove);\n this.el.removeEventListener('touchend', this.onEnd);\n\n this.el.removeEventListener('mousedown', this.onStart);\n this.el.removeEventListener('mousemove', this.onMove);\n this.el.removeEventListener('mouseup', this.onEnd);\n }\n }\n\n componentWillReceiveProps(props) {\n // do nothing when dataLength and key are unchanged\n if (this.props.key === props.key && this.props.dataLength === props.dataLength) return;\n\n // update state when new data was sent in\n this.setState({\n showLoader: false,\n actionTriggered: false,\n pullToRefreshThresholdBreached: false,\n });\n }\n\n getScrollableTarget() {\n if (this.props.scrollableTarget instanceof HTMLElement) return this.props.scrollableTarget;\n if (typeof this.props.scrollableTarget === 'string') {\n return document.getElementById(this.props.scrollableTarget);\n }\n if (this.props.scrollableTarget === null) {\n console.warn(`You are trying to pass scrollableTarget but it is null. This might\n happen because the element may not have been added to DOM yet.\n See https://github.com/ankeetmaini/react-infinite-scroll-component/issues/59 for more info.\n `);\n }\n return null;\n }\n\n onStart(evt) {\n if (this.state.lastScrollTop) return;\n\n this.dragging = true;\n this.startY = evt.pageY || evt.touches[0].pageY;\n this.currentY = this.startY;\n\n this._infScroll.style.willChange = 'transform';\n this._infScroll.style.transition = 'transform 0.2s cubic-bezier(0,0,0.31,1)';\n }\n\n onMove(evt) {\n if (!this.dragging) return;\n this.currentY = evt.pageY || evt.touches[0].pageY;\n\n // user is scrolling down to up\n if (this.currentY < this.startY) return;\n\n if (this.currentY - this.startY >= this.props.pullDownToRefreshThreshold) {\n this.setState({\n pullToRefreshThresholdBreached: true,\n });\n }\n\n // so you can drag upto 1.5 times of the maxPullDownDistance\n if (this.currentY - this.startY > this.maxPullDownDistance * 1.5) return;\n\n this._infScroll.style.overflow = 'visible';\n this._infScroll.style.transform = `translate3d(0px, ${this.currentY\n - this.startY}px, 0px)`;\n }\n\n onEnd(evt) {\n this.startY = 0;\n this.currentY = 0;\n\n this.dragging = false;\n\n if (this.state.pullToRefreshThresholdBreached) {\n this.props.refreshFunction && this.props.refreshFunction();\n }\n\n requestAnimationFrame(() => {\n // this._infScroll\n if (this._infScroll) {\n this._infScroll.style.overflow = 'inherit';\n this._infScroll.style.transform = 'none';\n this._infScroll.style.willChange = 'none';\n }\n });\n }\n\n isElementAtBottom(target, scrollThreshold = 0.8) {\n const clientHeight = target === document.body || target === document.documentElement\n ? window.screen.availHeight\n : target.clientHeight;\n\n const threshold = parseThreshold(scrollThreshold);\n\n if (threshold.unit === ThresholdUnits.Pixel) {\n return (\n target.scrollTop + clientHeight >= target.scrollHeight - threshold.value\n );\n }\n\n return (\n target.scrollTop + clientHeight >= threshold.value / 100 * target.scrollHeight\n );\n }\n\n onScrollListener(event) {\n if (typeof this.props.onScroll === 'function') {\n // Execute this callback in next tick so that it does not affect the\n // functionality of the library.\n setTimeout(() => this.props.onScroll(event), 0);\n }\n\n const target = this.props.height || this._scrollableNode\n ? event.target\n : document.documentElement.scrollTop\n ? document.documentElement\n : document.body;\n\n // return immediately if the action has already been triggered,\n // prevents multiple triggers.\n if (this.state.actionTriggered) return;\n\n const atBottom = this.isElementAtBottom(target, this.props.scrollThreshold);\n\n // call the `next` function in the props to trigger the next data fetch\n if (atBottom && this.props.hasMore) {\n this.setState({ actionTriggered: true, showLoader: true });\n this.props.next();\n }\n this.setState({ lastScrollTop: target.scrollTop });\n }\n\n render() {\n const style = {\n height: this.props.height || 'auto',\n overflow: 'inherit',\n WebkitOverflowScrolling: 'touch',\n ...this.props.style,\n };\n const hasChildren = this.props.hasChildren\n || !!(this.props.children && this.props.children.length);\n\n // because heighted infiniteScroll visualy breaks\n // on drag down as overflow becomes visible\n const outerDivStyle = this.props.pullDownToRefresh && this.props.height\n ? { overflow: 'inherit' }\n : {};\n return (\n \n
\n Something went wrong:
\n{error}
\n{info}
\n\n (this._infScroll = infScroll)}\n style={style}\n >\n {this.props.pullDownToRefresh && (\n (this._pullDown = pullDown)}\n >\n \n {!this.state.pullToRefreshThresholdBreached\n && this.props.pullDownToRefreshContent}\n {this.state.pullToRefreshThresholdBreached\n && this.props.releaseToRefreshContent}\n
\n \n )}\n {this.props.children}\n {!this.state.showLoader\n && !hasChildren\n && this.props.hasMore\n && this.props.loader}\n {this.state.showLoader && this.props.hasMore && this.props.loader}\n {!this.props.hasMore && this.props.endMessage}\n \n \n );\n }\n}\n\nexport default InfiniteScroll;\n"
},
{
"path": "src/client/components/NavBar.jsx",
"content": "import { Link, withRouter } from 'inferno-router';\nimport UIkit from 'uikit';\n\nconst closeOffCanvasNav = () => {\n const element = document.getElementById('offcanvas-nav');\n UIkit.offcanvas(element).hide();\n};\n\nconst OffCanvasNav = (props) => {\n const { location } = props;\n const path = location.pathname;\n\n return (\n \n );\n};\nconst OffCanvasNavWithRouter = withRouter(OffCanvasNav);\n\nconst NavBar = (props) => {\n const { location } = props;\n const transparent = location.pathname === '/player/';\n\n return (\n <>\n \n
\n \n );\n};\n\nexport default withRouter(NavBar);\n"
},
{
"path": "src/client/components/PlayerBar.jsx",
"content": "import { connect } from 'inferno-redux';\nimport { Link } from 'inferno-router';\n\nimport playIcon from '../static/svg/play.svg';\nimport pauseIcon from '../static/svg/pause.svg';\n\nconst mapStateToProps = state => ({\n playing: state.playing,\n queue: state.queue,\n currentlyPlaying: state.queue[state.queueIndex],\n});\n\nconst PlayerBar = (props) => {\n const {\n dispatch, playing, queue, currentlyPlaying,\n } = props;\n\n // Queue is empty, don't render the player bar.\n if (queue.length === 0) {\n return null;\n }\n\n return (\n <>\n \n \n
\n\n \n \n
\n \n \n
\n \n\n
\n \n );\n};\n\nexport default connect(mapStateToProps)(PlayerBar);\n"
},
{
"path": "src/client/components/WorkDetails.jsx",
"content": "import { Link } from 'inferno-router';\n\n// Renders the tag links.\nconst Tags = props => props.tags.map(\n (tag, index, tags) => (\n <>\n {tag.name}\n {index !== tags.length - 1 ? ', ' : ''}\n \n ),\n);\n\n// Renders the VA badges.\nconst VAs = props => props.vas.map(\n va => (\n \n 
\n
\n\n \n \n
\n {currentlyPlaying.title}
\n{currentlyPlaying.subtitle}
\n \n\n \n
\n \n
\n);\n"
},
{
"path": "src/client/components/WorkQueue.jsx",
"content": "import { Component } from 'inferno';\nimport { connect } from 'inferno-redux';\n\nimport UIkit from 'uikit';\n\nconst mapStateToProps = state => ({\n // Track hash if currently playing a track, else null.\n currentlyPlayingHash: (state.playing && state.queue[state.queueIndex])\n ? state.queue[state.queueIndex].hash : null,\n});\n\n// Renders a single row (track) inside the list.\nconst FileTableRow = ({\n clickHandler, file, index, fileOptions, usePauseIcon,\n}) => (\n \n \n 
\n \n
\n\n \n \n
\n\n \n {metadata.circle.name}\n \n\n
\n \n \n {metadata.title}\n \n
\n\n \n
\n\n \n
\n {file.subtitle}
\n\n
\n - \n {fileOptions.map(option => )}\n
Queue is empty.
);\n }\n\n const TrashButton = (\n\n \n \n
\n
\n );\n }\n}\n\nexport default connect(mapStateToProps)(WorkQueue);\n"
},
{
"path": "src/client/index.jsx",
"content": "import { render } from 'inferno';\nimport { Provider } from 'inferno-redux';\nimport { BrowserRouter, Route, Switch } from 'inferno-router';\nimport { createBrowserHistory } from 'history';\nimport { createStore } from 'redux';\n\nimport UIkit from 'uikit';\nimport Icons from 'uikit/dist/js/uikit-icons';\n\nimport AudioElement from './components/AudioElement';\nimport PlayerBar from './components/PlayerBar';\nimport Player from './routes/Player';\nimport Work from './routes/Work';\nimport Works from './routes/Works';\nimport List from './routes/List';\nimport Reducer from './reducer';\n\nimport './static/style/uikit.stripped.less';\nimport './static/style/kikoeru.css';\nimport ErrorBoundary from './components/ErrorBoundary';\nimport NavBar from './components/NavBar';\n\n// Enable UIkit icon plugin\nUIkit.use(Icons);\n\nconst browserHistory = createBrowserHistory();\nconst store = createStore(Reducer);\n\nconst App = () => (\n | \n | Filename | \n\n {showTrashButton ? TrashButton : null}\n | \n
|---|
\n \n
\n );\n }\n\n const visibleItems = filteredItems || items;\n const elementList = visibleItems.map(item => (\n \n
\n );\n }\n}\n\nexport default List;\n"
},
{
"path": "src/client/routes/Player.jsx",
"content": "import { Component } from 'inferno';\nimport { connect } from 'inferno-redux';\nimport { Redirect } from 'inferno-router';\n\nimport WorkQueue from '../components/WorkQueue';\n\nimport playIcon from '../static/svg/play.svg';\nimport pauseIcon from '../static/svg/pause.svg';\nimport previousIcon from '../static/svg/previous.svg';\nimport nextIcon from '../static/svg/next.svg';\n\nconst mapStateToProps = state => ({\n playing: state.playing,\n progress: state.progress,\n queue: state.queue,\n queueIndex: state.queueIndex,\n});\n\n/**\n * Player page. Contains player controls and the queue.\n */\nclass Player extends Component {\n constructor(props) {\n super(props);\n\n this.handleSeek = this.handleSeek.bind(this);\n this.handleClick = this.handleClick.bind(this);\n\n this.fileOptions = [\n { text: 'Remove from queue', type: 'REMOVE_FROM_QUEUE' },\n { text: 'Move up', type: 'MOVE_UP_IN_QUEUE' },\n { text: 'Move down', type: 'MOVE_DOWN_IN_QUEUE' },\n ];\n }\n\n componentDidMount() {\n window.scrollTo(0, 0);\n }\n\n handleSeek(evt) {\n const { dispatch } = this.props;\n\n dispatch({\n type: 'SEEK',\n payload: evt.currentTarget.valueAsNumber,\n });\n }\n\n handleClick(evt, which) {\n const { dispatch } = this.props;\n\n switch (which) {\n case 'previous-button':\n dispatch({ type: 'PREVIOUS_TRACK' });\n break;\n case 'middle-button':\n dispatch({ type: 'TOGGLE_PLAYING' });\n break;\n case 'next-button':\n dispatch({ type: 'NEXT_TRACK' });\n break;\n default:\n throw new Error(`Clicked on unknown element: ${which}`);\n }\n }\n\n // TODO: refactor into smaller components (controls, seekbar)?\n render() {\n const {\n playing, progress, queue, queueIndex,\n } = this.props;\n const currentlyPlaying = queue[queueIndex];\n\n if (!currentlyPlaying) {\n return (All {restrict}s
\n \n\n {elementList}\n
\n \n \n\n \n\n \n\n
\n\n \n \n
\n \n
\n \n \n
\n );\n }\n\n // Metadata ready, render the work page.\n return (\n <>\n \n \n
\n );\n }\n\n return (\n \n
\n );\n }\n}\n\nexport default Works;\n"
},
{
"path": "src/client/static/style/kikoeru.css",
"content": "/**\n * Logo for the navbars.\n */\n\n.k-logo {\n font-size: 1.5em;\n font-family: 'Big Caslon', 'Times New Roman', Times, serif;\n}\n\n.k-logo-muted {\n font-size: 4em !important;\n opacity: 0.3;\n}\n\n.k-logo::after {\n content: 'K';\n}\n\n/**\n * Badge/label links (VAs)\n */\n\n.k-label-link {\n color: #fff !important;\n text-decoration: none !important;\n margin-right: 3px;\n}\n\n.k-label-link:clicked {\n background-color: #5dd7a9;\n}\n\n.k-label-link:hover {\n background-color: #32bc88;\n}\n\n/**\n * Play/menu icons in the queue card.\n */\n\n.k-button-icon {\n padding: 0;\n width: 20px;\n transition-property: color, transform, -webkit-transform;\n transition-duration: 0.3s;\n -webkit-tap-highlight-color: transparent;\n}\n\n.k-button-icon:hover, .k-button-active {\n color: #1e87f0;\n -webkit-transform: scale(1.15);\n transform: scale(1.15);\n}\n\n/**\n * Bottom player bar.\n */\n\n.k-player-bar {\n position: fixed;\n width: 100%;\n bottom: 0;\n padding: 8px 8px 8px 14px;\n background-color: #fff;\n box-shadow: 0 0 12px rgba(0, 0, 0, 0.2);\n border-top: 1px solid rgba(0, 0, 0, 0.15);\n}\n\n@keyframes button-touch-animation {\n 0% {\n transform: scale(0, 0);\n opacity: 1;\n }\n 20% {\n transform: scale(25, 25);\n opacity: 1;\n }\n 100% {\n opacity: 0;\n transform: scale(40, 40);\n }\n}\n\n.k-player-button {\n background-color: transparent;\n background-repeat: no-repeat;\n border: none;\n cursor: pointer;\n overflow: hidden;\n outline: none;\n margin-left: 12px;\n margin-right: 12px;\n -webkit-tap-highlight-color: transparent;\n}\n\n.k-player-button:after {\n content: '';\n overflow: visible !important;\n position: absolute;\n top: 50%;\n left: 50%;\n width: 2px;\n height: 2px;\n background: rgba(255, 255, 255, 0.5);\n opacity: 0;\n border-radius: 100%;\n transform: scale(1, 1) translate(-50%);\n transform-origin: 50% 50%;\n}\n\n.k-player-button:hover:not(:active)::after {\n animation: button-touch-animation 0.5s ease-out;\n}\n\n.k-invert {\n filter: invert(100%);\n}\n\n.k-player-seekbar {\n margin-bottom: 0px;\n position: relative;\n}\n\n.k-player-seekbar-progress {\n height: 5px;\n background: #0000;\n}\n\n.k-progress-bar {\n height: 100%;\n position: relative;\n background-color: #5dd7a9;\n}\n\n.k-progress-bar::after {\n overflow: hidden;\n content: \" \";\n display: block;\n position: absolute;\n width: 14px;\n height: 14px;\n background-color: #5dd7a9;\n border-radius: 8px;\n top: -4px;\n right: -6px;\n z-index: 50;\n}\n\n/**\n * Hide original range input elements.\n */\n\n.k-player-seekbar input[type=\"range\"] {\n -webkit-appearance: none;\n width: calc(100% + 0px);\n overflow-x: hidden;\n height: 32px;\n margin: 0;\n padding: 0;\n position: absolute;\n top: -14px;\n left: -8px;\n z-index: 2;\n background: transparent;\n outline: 0;\n border: 0;\n}\n\n.k-player-seekbar input[type=\"range\"]::-webkit-slider-thumb {\n -webkit-appearance: none;\n display: block;\n width: 48px;\n height: 48px;\n background-color: transparent;\n}\n\n/* Mozilla: https://developer.mozilla.org/en-US/docs/User:Jonathan_Watt/range */\n.k-player-seekbar input[type=\"range\"]::-moz-range-thumb {\n background: transparent;\n border: 0;\n width: 48px;\n height: 48px;\n}\n\n.k-player-seekbar input[type=\"range\"]::-moz-range-track {\n background: transparent;\n border: 0;\n}\n\n.k-player-seekbar input[type=\"range\"]::-moz-focus-outer {\n border: 0;\n}\n"
},
{
"path": "src/client/static/style/uikit.stripped.less",
"content": "@path: \"../../../../node_modules/uikit/src\";\n\n/*\n Components\n */\n\n// Base\n@import \"@{path}/less/components/variables.less\";\n@import \"@{path}/less/components/mixin.less\";\n@import \"@{path}/less/components/base.less\";\n\n// Elements\n@import \"@{path}/less/components/link.less\";\n@import \"@{path}/less/components/heading.less\";\n@import \"@{path}/less/components/divider.less\";\n@import \"@{path}/less/components/list.less\";\n// @import \"@{path}/less/components/description-list.less\";\n@import \"@{path}/less/components/table.less\";\n@import \"@{path}/less/components/icon.less\";\n// @import \"@{path}/less/components/form-range.less\";\n@import \"@{path}/less/components/form.less\"; // After: Icon, Form Range\n@import \"@{path}/less/components/button.less\";\n\n// Layout\n// @import \"@{path}/less/components/section.less\";\n@import \"@{path}/less/components/container.less\";\n@import \"@{path}/less/components/grid.less\";\n// @import \"@{path}/less/components/tile.less\";\n@import \"@{path}/less/components/card.less\";\n\n// Common\n@import \"@{path}/less/components/close.less\"; // After: Icon\n@import \"@{path}/less/components/spinner.less\"; // After: Icon\n// @import \"@{path}/less/components/totop.less\"; // After: Icon\n// @import \"@{path}/less/components/marker.less\"; // After: Icon\n// @import \"@{path}/less/components/alert.less\"; // After: Close\n// @import \"@{path}/less/components/badge.less\";\n@import \"@{path}/less/components/label.less\";\n@import \"@{path}/less/components/overlay.less\"; // After: Icon\n// @import \"@{path}/less/components/article.less\"; // After: Subnav\n// @import \"@{path}/less/components/comment.less\"; // After: Subnav\n// @import \"@{path}/less/components/search.less\"; // After: Icon\n\n// Navs\n@import \"@{path}/less/components/nav.less\";\n@import \"@{path}/less/components/navbar.less\"; // After: Card, Grid, Nav, Icon, Search\n// @import \"@{path}/less/components/subnav.less\";\n// @import \"@{path}/less/components/breadcrumb.less\";\n// @import \"@{path}/less/components/pagination.less\";\n// @import \"@{path}/less/components/tab.less\";\n// @import \"@{path}/less/components/slidenav.less\"; // After: Icon\n// @import \"@{path}/less/components/dotnav.less\";\n// @import \"@{path}/less/components/thumbnav.less\";\n\n// JavaScript\n// @import \"@{path}/less/components/accordion.less\";\n@import \"@{path}/less/components/drop.less\"; // After: Card\n@import \"@{path}/less/components/dropdown.less\"; // After: Card\n// @import \"@{path}/less/components/modal.less\"; // After: Close\n// @import \"@{path}/less/components/lightbox.less\"; // After: Close\n// @import \"@{path}/less/components/slideshow.less\";\n// @import \"@{path}/less/components/slider.less\";\n// @import \"@{path}/less/components/sticky.less\";\n@import \"@{path}/less/components/offcanvas.less\";\n// @import \"@{path}/less/components/switcher.less\";\n// @import \"@{path}/less/components/leader.less\";\n// Scrollspy\n// Toggle\n// Scroll\n\n// Additional\n@import \"@{path}/less/components/iconnav.less\";\n// @import \"@{path}/less/components/notification.less\";\n// @import \"@{path}/less/components/tooltip.less\";\n// @import \"@{path}/less/components/placeholder.less\";\n// @import \"@{path}/less/components/progress.less\";\n// @import \"@{path}/less/components/sortable.less\";\n// @import \"@{path}/less/components/countdown.less\";\n\n// Utilities\n@import \"@{path}/less/components/animation.less\";\n@import \"@{path}/less/components/width.less\";\n@import \"@{path}/less/components/height.less\";\n@import \"@{path}/less/components/text.less\";\n@import \"@{path}/less/components/column.less\";\n@import \"@{path}/less/components/cover.less\";\n@import \"@{path}/less/components/background.less\";\n@import \"@{path}/less/components/align.less\";\n@import \"@{path}/less/components/svg.less\";\n@import \"@{path}/less/components/utility.less\";\n@import \"@{path}/less/components/flex.less\"; // After: Utility\n@import \"@{path}/less/components/margin.less\";\n@import \"@{path}/less/components/padding.less\";\n@import \"@{path}/less/components/position.less\";\n@import \"@{path}/less/components/transition.less\";\n@import \"@{path}/less/components/visibility.less\";\n@import \"@{path}/less/components/inverse.less\";\n\n// Need to be loaded last\n@import \"@{path}/less/components/print.less\";\n\n/*\n Theme\n */\n\n// Base\n@import \"@{path}/less/theme/variables.less\";\n@import \"@{path}/less/theme/base.less\";\n\n// Elements\n@import \"@{path}/less/theme/link.less\";\n@import \"@{path}/less/theme/heading.less\";\n@import \"@{path}/less/theme/divider.less\";\n@import \"@{path}/less/theme/list.less\";\n// @import \"@{path}/less/theme/description-list.less\";\n@import \"@{path}/less/theme/table.less\";\n@import \"@{path}/less/theme/icon.less\";\n// @import \"@{path}/less/theme/form-range.less\";\n@import \"@{path}/less/theme/form.less\";\n@import \"@{path}/less/theme/button.less\";\n\n// Layout\n// @import \"@{path}/less/theme/section.less\";\n@import \"@{path}/less/theme/container.less\";\n@import \"@{path}/less/theme/grid.less\";\n// @import \"@{path}/less/theme/tile.less\";\n@import \"@{path}/less/theme/card.less\";\n\n// Common\n@import \"@{path}/less/theme/close.less\";\n@import \"@{path}/less/theme/spinner.less\";\n// @import \"@{path}/less/theme/marker.less\";\n// @import \"@{path}/less/theme/totop.less\";\n// @import \"@{path}/less/theme/alert.less\";\n// @import \"@{path}/less/theme/badge.less\";\n@import \"@{path}/less/theme/label.less\";\n@import \"@{path}/less/theme/overlay.less\";\n// @import \"@{path}/less/theme/article.less\";\n// @import \"@{path}/less/theme/comment.less\";\n// @import \"@{path}/less/theme/search.less\";\n\n// Navs\n@import \"@{path}/less/theme/nav.less\";\n@import \"@{path}/less/theme/navbar.less\";\n// @import \"@{path}/less/theme/subnav.less\";\n// @import \"@{path}/less/theme/breadcrumb.less\";\n// @import \"@{path}/less/theme/pagination.less\";\n// @import \"@{path}/less/theme/tab.less\";\n// @import \"@{path}/less/theme/slidenav.less\";\n// @import \"@{path}/less/theme/dotnav.less\";\n// @import \"@{path}/less/theme/thumbnav.less\";\n\n// JavaScript\n// @import \"@{path}/less/theme/accordion.less\";\n@import \"@{path}/less/theme/drop.less\";\n@import \"@{path}/less/theme/dropdown.less\";\n// @import \"@{path}/less/theme/modal.less\";\n// @import \"@{path}/less/theme/lightbox.less\";\n// @import \"@{path}/less/theme/sticky.less\";\n@import \"@{path}/less/theme/offcanvas.less\";\n// @import \"@{path}/less/theme/leader.less\";\n\n// Additional\n@import \"@{path}/less/theme/iconnav.less\";\n// @import \"@{path}/less/theme/notification.less\";\n// @import \"@{path}/less/theme/tooltip.less\";\n// @import \"@{path}/less/theme/placeholder.less\";\n// @import \"@{path}/less/theme/progress.less\";\n// @import \"@{path}/less/theme/sortable.less\";\n// @import \"@{path}/less/theme/countdown.less\";\n\n// Utilities\n@import \"@{path}/less/theme/animation.less\";\n@import \"@{path}/less/theme/width.less\";\n@import \"@{path}/less/theme/height.less\";\n@import \"@{path}/less/theme/text.less\";\n@import \"@{path}/less/theme/column.less\";\n@import \"@{path}/less/theme/background.less\";\n@import \"@{path}/less/theme/align.less\";\n@import \"@{path}/less/theme/utility.less\";\n@import \"@{path}/less/theme/margin.less\";\n@import \"@{path}/less/theme/padding.less\";\n@import \"@{path}/less/theme/position.less\";\n@import \"@{path}/less/theme/transition.less\";\n@import \"@{path}/less/theme/inverse.less\";\n\n\n/*\n Extra\n */\n@media (min-width: @breakpoint-small) and (max-width: @breakpoint-medium - 1) {\n .uk-width-1-2-margin\\@s { width: ~'calc(100% * 1 / 2.3)' !important; }\n}\n\n@media (min-width: @breakpoint-medium) {\n .uk-width-1-3-margin\\@m { width: ~'calc(100% * 1 / 3.5)'; }\n}\n\n"
},
{
"path": "src/server/auth.js",
"content": "const path = require('path');\nconst express = require('express');\n\nconst config = require('../../config.json');\n\nconst router = express.Router();\n\nrouter.get('/', (req, res, next) => {\n res.sendFile(path.join(__dirname, '..', '..', 'static', 'auth.html'));\n});\n\nrouter.post('/', (req, res, next) => {\n if (req.body.password === config.password) {\n req.session.auth = true;\n }\n\n res.redirect('/');\n});\n\nconst authenticator = (req, res, next) => {\n if (req.path === '/auth/'\n || req.path === '/main.css'\n || req.path.indexOf('/static/') === 0\n || req.session.auth\n || !config.password\n ) {\n next();\n } else {\n res.redirect('/auth/');\n }\n};\n\nmodule.exports = { router, authenticator };\n"
},
{
"path": "src/server/database/db.js",
"content": "const knex = require('knex')({\n client: 'sqlite3',\n useNullAsDefault: true,\n connection: {\n filename: './db.sqlite3',\n },\n acquireConnectionTimeout: 5000,\n});\n\n/**\n * Takes a work metadata object and inserts it into the database.\n * @param {Object} work Work object.\n */\nconst insertWorkMetadata = work => knex.transaction(trx => trx.raw(\n trx('t_circle')\n .insert({\n id: work.circle.id,\n name: work.circle.name,\n }).toString().replace('insert', 'insert or ignore'),\n)\n .then(() => trx('t_work')\n .insert({\n id: work.id,\n dir: work.dir,\n title: work.title,\n circle_id: work.circle.id,\n nsfw: work.nsfw,\n }))\n .then(() => {\n // Now that work is in the database, insert relationships\n const promises = [];\n\n for (let i = 0; i < work.tags.length; i += 1) {\n promises.push(trx.raw(\n trx('t_tag')\n .insert({\n id: work.tags[i].id,\n name: work.tags[i].name,\n }).toString().replace('insert', 'insert or ignore'),\n )\n .then(() => trx('r_tag_work')\n .insert({\n tag_id: work.tags[i].id,\n work_id: work.id,\n })));\n }\n\n for (let i = 0; i < work.vas.length; i += 1) {\n promises.push(trx.raw(\n trx('t_va')\n .insert({\n id: work.vas[i].id,\n name: work.vas[i].name,\n }).toString().replace('insert', 'insert or ignore'),\n )\n .then(() => trx('r_va_work')\n .insert({\n va_id: work.vas[i].id,\n work_id: work.id,\n })));\n }\n\n return Promise.all(promises)\n .then(() => trx);\n }));\n\n/**\n * Fetches metadata for a specific work id.\n * @param {Number} id Work identifier.\n */\nconst getWorkMetadata = id => new Promise((resolve, reject) => {\n // TODO: do this all in a single transaction?\n knex('t_work')\n .select('*')\n .where('id', '=', id)\n .first()\n .then((workRes) => {\n if (!workRes) {\n throw new Error(`There is no work with id ${id} in the database.`);\n }\n\n knex('t_circle')\n .select('name')\n .where('t_circle.id', '=', workRes.circle_id)\n .first()\n .then((circleRes) => {\n const work = {\n id: workRes.id,\n title: workRes.title,\n circle: { id: workRes.circle_id, name: circleRes.name },\n };\n\n knex('r_tag_work')\n .select('tag_id', 'name')\n .where('r_tag_work.work_id', '=', id)\n .join('t_tag', 't_tag.id', '=', 'r_tag_work.tag_id')\n .then((tagsRes) => {\n work.tags = tagsRes.map(tag => ({ id: tag.tag_id, name: tag.name }));\n\n knex('r_va_work')\n .select('va_id', 'name')\n .where('r_va_work.work_id', '=', id)\n .join('t_va', 't_va.id', '=', 'r_va_work.va_id')\n .then((vaRes) => {\n work.vas = vaRes.map(va => ({ id: va.va_id, name: va.name }));\n resolve(work);\n });\n });\n });\n })\n .catch(err => reject(err));\n});\n\n/**\n * Tests if the given circle, tags and VAs are orphans and if so, removes them.\n * @param {*} trx Knex transaction object.\n * @param {*} circle Circle id to check.\n * @param {*} tags Array of tag ids to check.\n * @param {*} vas Array of VA ids to check.\n */\nconst cleanupOrphans = (trx, circle, tags, vas) => new Promise(async (resolve, reject) => {\n const getCount = (tableName, colName, colValue) => new Promise((resolveCount, rejectCount) => {\n trx(tableName)\n .select(colName)\n .where(colName, '=', colValue)\n .count()\n .first()\n .then(res => res['count(*)'])\n .then(count => resolveCount(count))\n .catch(err => rejectCount(err));\n });\n\n const promises = [];\n promises.push(new Promise((resolveCircle, rejectCircle) => {\n getCount('t_work', 'circle_id', circle)\n .then((count) => {\n if (count === 0) {\n trx('t_circle')\n .del()\n .where('id', '=', circle)\n .then(() => resolveCircle())\n .catch(err => rejectCircle(err));\n } else {\n resolveCircle();\n }\n });\n }));\n\n for (let i = 0; i < tags.length; i += 1) {\n const tag = tags[i];\n\n // eslint-disable-next-line no-await-in-loop\n const count = await getCount('r_tag_work', 'tag_id', tag);\n\n if (count === 0) {\n promises.push(\n trx('t_tag')\n .delete()\n .where('id', '=', tag),\n );\n }\n }\n\n for (let i = 0; i < vas.length; i += 1) {\n const va = vas[i];\n\n // eslint-disable-next-line no-await-in-loop\n const count = await getCount('r_va_work', 'va_id', va);\n\n if (count === 0) {\n promises.push(\n trx('t_va')\n .delete()\n .where('id', '=', va),\n );\n }\n }\n\n Promise.all(promises)\n .then((results) => {\n resolve(results);\n })\n .catch(err => reject(err));\n});\n\n/**\n * Removes a work and then its orphaned circles, tags & VAs from the database.\n * @param {Integer} id Work id.\n */\nconst removeWork = id => new Promise(async (resolve, reject) => {\n const trx = await knex.transaction();\n\n // Save circle, tags and VAs to array for later testing\n const circle = await trx('t_work').select('circle_id').where('id', '=', id).first();\n const tags = await trx('r_tag_work').select('tag_id').where('work_id', '=', id);\n const vas = await trx('r_va_work').select('va_id').where('work_id', '=', id);\n\n // Remove work and its relationships\n trx('t_work')\n .del()\n .where('id', '=', id)\n .then(trx('r_tag_work')\n .del()\n .where('work_id', '=', id)\n .then(trx('r_va_work')\n .del()\n .where('work_id', '=', id)\n .then(() => cleanupOrphans(\n trx,\n circle.circle_id,\n tags.map(tag => tag.tag_id),\n vas.map(va => va.va_id),\n ))\n .then(trx.commit)\n .then(() => resolve())))\n .catch(err => reject(err));\n});\n\n/**\n * Returns list of work ids by circle, tag or VA.\n * @param {Number} id Which id to filter by.\n * @param {String} field Which field to filter by.\n */\nconst getUnsortedWorksBy = (id, field) => {\n switch (field) {\n case 'circle':\n return knex('t_work')\n .select('id')\n .where('circle_id', '=', id);\n\n case 'tag':\n return knex('r_tag_work')\n .select('work_id as id')\n .where('tag_id', '=', id);\n\n case 'va':\n return knex('r_va_work')\n .select('work_id as id')\n .where('va_id', '=', id);\n\n default:\n return knex('t_work')\n .select('id');\n }\n};\nconst getWorksBy = (id, field) => getUnsortedWorksBy(id, field).orderBy('id', 'desc');\n\nconst paginateResults = (query, startFrom, howMany, tableName) => query\n .where(tableName ? `${tableName}_id` : 'id', '<', startFrom)\n .limit(howMany);\n\nmodule.exports = {\n knex, insertWorkMetadata, getWorkMetadata, removeWork, getWorksBy, paginateResults,\n};\n"
},
{
"path": "src/server/database/schema.js",
"content": "/* eslint-disable no-console */\nconst { knex } = require('./db');\n\nconst createSchema = () => knex.schema\n .createTable('t_circle', (table) => {\n table.increments();\n table.string('name').notNullable();\n })\n .createTable('t_work', (table) => {\n table.increments();\n table.string('dir').notNullable();\n table.string('title').notNullable();\n table.integer('circle_id').notNullable();\n table.boolean('nsfw').notNullable();\n table.foreign('circle_id').references('id').inTable('t_circle');\n })\n .createTable('t_tag', (table) => {\n table.increments();\n table.string('name').notNullable();\n })\n .createTable('t_va', (table) => {\n table.increments();\n table.string('name').notNullable();\n })\n\n .createTable('r_tag_work', (table) => {\n table.integer('tag_id');\n table.integer('work_id');\n table.foreign('tag_id').references('id').inTable('t_tag');\n table.foreign('work_id').references('id').inTable('t_work');\n table.primary(['tag_id', 'work_id']);\n })\n .createTable('r_va_work', (table) => {\n table.integer('va_id');\n table.integer('work_id');\n table.foreign('va_id').references('id').inTable('t_va');\n table.foreign('work_id').references('id').inTable('t_work');\n table.primary(['va_id', 'work_id']);\n })\n .then(() => {\n console.log(' * Schema created.');\n })\n .catch((err) => {\n // ew\n if (err.toString().indexOf('table `t_circle` already exists') !== -1) {\n console.log(' * Schema already exists.');\n } else {\n throw new Error(` ! ERROR while creating schema: ${err}`);\n }\n });\n\nmodule.exports = { createSchema };\n"
},
{
"path": "src/server/filesystem/scanner.js",
"content": "/* eslint-disable no-console */\nconst fs = require('fs');\nconst path = require('path');\nconst fetch = require('node-fetch');\nconst db = require('../database/db');\nconst { getFolderList, deleteCoverImageFromDisk, saveCoverImageToDisk, throttlePromises } = require('./utils');\nconst { createSchema } = require('../database/schema');\nconst scrapeWorkMetadata = require('../hvdb');\n\nconst config = require('../../../config.json');\n\n/**\n * Takes a single folder, fetches metadata and adds it to the database.\n * @param {*} id Work id.\n * @param {*} folder Directory name (relative).\n */\nconst processFolder = (id, folder) => db.knex('t_work')\n .where('id', '=', id)\n .count()\n .first()\n .then((res) => {\n const count = res['count(*)'];\n\n if (count) {\n // Already in database.\n // console.log(` * ${folder} already in database, skipping.`);\n return 'skipped';\n }\n\n // New folder.\n console.log(` * Found new folder: ${folder}`);\n const rjcode = (`000000${id}`).slice(-6); // zero-pad to 6 digits\n\n console.log(` -> [RJ${rjcode}] Fetching metadata from HVDB...`);\n return scrapeWorkMetadata(id)\n .then((metadata) => {\n console.log(` -> [RJ${rjcode}] Fetched metadata! Adding to database...`);\n\n // TODO: cover download could be in parallel with metadata fetch. Haven't\n // done it because if metadata fails, cover is useless. Consider for later.\n console.log(` -> [RJ${rjcode}] Downloading cover image...`);\n fetch(`https://hvdb.me/WorkImages/RJ${rjcode}.jpg`)\n .then((imageRes) => {\n if (!imageRes.ok) {\n throw new Error(imageRes.statusText);\n }\n\n return imageRes;\n })\n .then((imageRes) => {\n saveCoverImageToDisk(imageRes.body, rjcode)\n .then(() => console.log(` -> [RJ${rjcode}] Cover image downloaded!`));\n })\n .catch((err) => {\n console.log(` ! [RJ${rjcode}] Failed to download cover image: ${err.message}`);\n });\n\n // eslint-disable-next-line no-param-reassign\n metadata.dir = folder;\n return db.insertWorkMetadata(metadata)\n .then(console.log(` -> [RJ${rjcode}] Finished adding to the database!`))\n .then(() => 'added');\n })\n .catch((err) => {\n console.log(` ! [RJ${rjcode}] Failed to fetch metadata from HVDB: ${err.message}`);\n return 'failed';\n });\n });\n\nconst performCleanup = () => {\n console.log(' * Looking for folders to clean up...');\n return db.knex('t_work')\n .select('id', 'dir')\n .then((works) => {\n const promises = works.map(work => new Promise((resolve, reject) => {\n if (!fs.existsSync(path.join(config.rootDir, work.dir))) {\n console.warn(` ! ${work.dir} is missing from filesystem. Removing from database...`);\n db.removeWork(work.id)\n .then((result) => {\n const rjcode = (`000000${work.id}`).slice(-6); // zero-pad to 6 digits\n deleteCoverImageFromDisk(rjcode)\n .catch(() => console.log(` -> [RJ${rjcode}] Failed to delete cover image.`))\n .then(() => resolve(result));\n })\n .catch(err => reject(err));\n } else {\n resolve();\n }\n }));\n\n return Promise.all(promises);\n });\n};\n\nconst performScan = () => {\n fs.mkdir(path.join(config.rootDir, 'Images'), (direrr) => {\n if (direrr && direrr.code !== 'EEXIST') {\n console.error(` ! ERROR while trying to create Images folder: ${direrr.code}`);\n process.exit(1);\n }\n\n createSchema()\n .then(() => performCleanup())\n .catch((err) => {\n console.error(` ! ERROR while performing cleanup: ${err.message}`);\n process.exit(1);\n })\n .then(async () => {\n console.log(' * Finished cleanup. Starting scan...');\n const promises = [];\n\n try {\n for await (const folder of getFolderList()) {\n const id = folder.match(/RJ(\\d{6})/)[1];\n promises.push(() => processFolder(id, folder));\n \n }\n } catch (err) {\n console.error(` ! ERROR while trying to get folder list: ${err.message}`);\n process.exit(1);\n }\n\n throttlePromises(config.maxParallelism, promises)\n .then((results) => {\n const counts = {\n added: 0,\n failed: 0,\n skipped: 0,\n };\n\n // eslint-disable-next-line no-return-assign\n results.forEach(x => counts[x] += 1);\n\n console.log(` * Finished scan. Added ${counts.added}, skipped ${counts.skipped} and failed to add ${counts.failed} works.`);\n db.knex.destroy();\n })\n .catch((err) => {\n console.error(` ! ERROR while performing scan: ${err.message}`);\n process.exit(1);\n });\n })\n .catch((err) => {\n console.error(` ! ERROR while creating database schema: ${err.message}`);\n process.exit(1);\n });\n });\n};\n\nperformScan();\n"
},
{
"path": "src/server/filesystem/utils.js",
"content": "const fs = require('fs');\nconst path = require('path');\nconst recursiveReaddir = require('recursive-readdir');\nconst { orderBy } = require('natural-orderby');\n\nconst config = require('../../../config.json');\n\n/**\n * Returns list of playable tracks in a given folder. Track is an object\n * containing 'title', 'subtitle' and 'hash'.\n * @param {Number} id Work identifier. Currently, RJ/RE code.\n * @param {String} dir Work directory (relative).\n */\nconst getTrackList = (id, dir) => recursiveReaddir(\n path.join(config.rootDir, dir),\n)\n .then((files) => {\n // Filter out any files not matching these extensions\n const filteredFiles = files.filter((file) => {\n const ext = path.extname(file);\n\n return (ext === '.mp3' || ext === '.ogg' || ext === '.opus' || ext === '.wav' || ext === '.flac' || ext === '.webm' || ext === '.mp4');\n });\n\n // Sort by folder and title\n const sortedFiles = orderBy(filteredFiles.map((file) => {\n const shortFilePath = file.replace(path.join(config.rootDir, dir, '/'), '');\n const dirName = path.dirname(shortFilePath);\n\n return {\n title: path.basename(file),\n subtitle: dirName === '.' ? null : dirName,\n };\n }), [v => v.subtitle, v => v.title]);\n\n // Add hash to each file\n const sortedHashedFiles = sortedFiles.map(\n (file, index) => ({\n title: file.title,\n subtitle: file.subtitle,\n hash: `${id}/${index}`,\n }),\n );\n\n return sortedHashedFiles;\n })\n .catch((err) => { throw new Error(`Failed to get tracklist from disk: ${err}`); });\n\n/**\n * Returns list of directory names (relative) that contain an RJ code.\n */\nasync function* getFolderList(current = '', depth = 0) {\n const folders = await fs.promises.readdir(path.join(config.rootDir, current));\n\n for (const folder of folders) {\n const absolutePath = path.resolve(config.rootDir, current, folder);\n const relativePath = path.join(current, folder);\n\n // eslint-disable-next-line no-await-in-loop\n if ((await fs.promises.stat(absolutePath)).isDirectory()) {\n if (folder.match(/RJ\\d{6}/)) {\n // Found a work folder, don't go any deeper.\n yield relativePath;\n } else if (depth + 1 < config.scannerMaxRecursionDepth) {\n // Found a folder that's not a work folder, go inside if allowed.\n yield* getFolderList(relativePath, depth + 1);\n }\n }\n }\n}\n\n/**\n * Deletes a work's cover image from disk.\n * @param {String} rjcode Work RJ code (only the 6 digits, zero-padded).\n */\nconst deleteCoverImageFromDisk = rjcode => new Promise((resolve, reject) => {\n fs.unlink(path.join(config.rootDir, 'Images', `RJ${rjcode}.jpg`), (err) => {\n if (err) {\n reject(err);\n } else {\n resolve();\n }\n });\n});\n\n/**\n * Saves cover image to disk.\n * @param {ReadableStream} stream Image data stream.\n * @param {String} rjcode Work RJ code (only the 6 digits, zero-padded).\n */\nconst saveCoverImageToDisk = (stream, rjcode) => new Promise((resolve, reject) => {\n // TODO: don't assume image is a jpg?\n try {\n stream.pipe(\n fs.createWriteStream(path.join(config.rootDir, 'Images', `RJ${rjcode}.jpg`))\n .on('close', () => resolve()),\n );\n } catch (err) {\n reject(err);\n }\n});\n\n/**\n * Runs an array of Promise returning functions at a specified rate\n * @param {Number} the maximum number of unresolved promises that may exist at a given time\n * @param {Array{pageTitle}
\nNo more works.
}\n >\n {works.map(work =>\n
\n\n\n\n"
},
{
"path": "static/index.html",
"content": "\n\n\n\n \n \n \n\n \n \n \n \n\n \n \n
\n Please authenticate.
\n\n \n