2 | 
3 |
25 |
31 | );
32 | }
33 |
34 | return children;
35 | }
36 | }
37 |
38 | export default ErrorBoundary;
39 |
--------------------------------------------------------------------------------
/src/client/components/InfiniteScroll.jsx:
--------------------------------------------------------------------------------
1 | /**
2 | * Apologies for this trainwreck. Copied and pasted from
3 | * https://www.npmjs.com/package/react-infinite-scroll-component
4 | * with a few small changes because I didn't want to install react-compat.
5 | */
6 |
7 | import { Component } from 'inferno';
8 |
9 | const ThresholdUnits = {
10 | Pixel: 'Pixel',
11 | Percent: 'Percent',
12 | };
13 |
14 | const defaultThreshold = {
15 | unit: ThresholdUnits.Percent,
16 | value: 0.8,
17 | };
18 |
19 | const parseThreshold = (scrollThreshold) => {
20 | if (typeof scrollThreshold === "number") {
21 | return {
22 | unit: ThresholdUnits.Percent,
23 | value: scrollThreshold * 100,
24 | };
25 | }
26 |
27 | if (typeof scrollThreshold === "string") {
28 | if (scrollThreshold.match(/^(\d*(\.\d+)?)px$/)) {
29 | return {
30 | unit: ThresholdUnits.Pixel,
31 | value: parseFloat(scrollThreshold),
32 | };
33 | }
34 |
35 | if (scrollThreshold.match(/^(\d*(\.\d+)?)%$/)) {
36 | return {
37 | unit: ThresholdUnits.Percent,
38 | value: parseFloat(scrollThreshold),
39 | };
40 | }
41 |
42 | console.warn('scrollThreshold format is invalid. Valid formats: "120px", "50%"...');
43 |
44 | return defaultThreshold;
45 | }
46 |
47 | console.warn('scrollThreshold should be string or number');
48 |
49 | return defaultThreshold;
50 | }
51 |
52 | // https://remysharp.com/2010/07/21/throttling-function-calls
53 | const throttle = (fn, threshhold, scope) => {
54 | threshhold || (threshhold = 250);
55 | let last;
56 | let deferTimer;
57 | return function () {
58 | const context = scope || this;
59 |
60 | const now = +new Date();
61 | let args = arguments;
62 | if (last && now < last + threshhold) {
63 | // hold on to it
64 | clearTimeout(deferTimer);
65 | deferTimer = setTimeout(() => {
66 | last = now;
67 | fn.apply(context, args);
68 | }, threshhold);
69 | } else {
70 | last = now;
71 | fn.apply(context, args);
72 | }
73 | };
74 | };
75 |
76 | class InfiniteScroll extends Component {
77 | constructor(props) {
78 | super();
79 | this.state = {
80 | showLoader: false,
81 | lastScrollTop: 0,
82 | actionTriggered: false,
83 | pullToRefreshThresholdBreached: false,
84 | };
85 | // variables to keep track of pull down behaviour
86 | this.startY = 0;
87 | this.currentY = 0;
88 | this.dragging = false;
89 | // will be populated in componentDidMount
90 | // based on the height of the pull down element
91 | this.maxPullDownDistance = 0;
92 |
93 | this.onScrollListener = this.onScrollListener.bind(this);
94 | this.throttledOnScrollListener = throttle(this.onScrollListener, 150).bind(
95 | this,
96 | );
97 | this.onStart = this.onStart.bind(this);
98 | this.onMove = this.onMove.bind(this);
99 | this.onEnd = this.onEnd.bind(this);
100 | this.getScrollableTarget = this.getScrollableTarget.bind(this);
101 | }
102 |
103 | componentDidMount() {
104 | this._scrollableNode = this.getScrollableTarget();
105 | this.el = this.props.height
106 | ? this._infScroll
107 | : this._scrollableNode || window;
108 | this.el.addEventListener('scroll', this.throttledOnScrollListener);
109 |
110 | if (
111 | typeof this.props.initialScrollY === 'number'
112 | && this.el.scrollHeight > this.props.initialScrollY
113 | ) {
114 | this.el.scrollTo(0, this.props.initialScrollY);
115 | }
116 |
117 | if (this.props.pullDownToRefresh) {
118 | this.el.addEventListener('touchstart', this.onStart);
119 | this.el.addEventListener('touchmove', this.onMove);
120 | this.el.addEventListener('touchend', this.onEnd);
121 |
122 | this.el.addEventListener('mousedown', this.onStart);
123 | this.el.addEventListener('mousemove', this.onMove);
124 | this.el.addEventListener('mouseup', this.onEnd);
125 |
126 | // get BCR of pullDown element to position it above
127 | this.maxPullDownDistance = this._pullDown.firstChild.getBoundingClientRect().height;
128 | this.forceUpdate();
129 |
130 | if (typeof this.props.refreshFunction !== 'function') {
131 | throw new Error(
132 | `Mandatory prop "refreshFunction" missing.
133 | Pull Down To Refresh functionality will not work
134 | as expected. Check README.md for usage'`,
135 | );
136 | }
137 | }
138 | }
139 |
140 | componentWillUnmount() {
141 | this.el.removeEventListener('scroll', this.throttledOnScrollListener);
142 |
143 | if (this.props.pullDownToRefresh) {
144 | this.el.removeEventListener('touchstart', this.onStart);
145 | this.el.removeEventListener('touchmove', this.onMove);
146 | this.el.removeEventListener('touchend', this.onEnd);
147 |
148 | this.el.removeEventListener('mousedown', this.onStart);
149 | this.el.removeEventListener('mousemove', this.onMove);
150 | this.el.removeEventListener('mouseup', this.onEnd);
151 | }
152 | }
153 |
154 | componentWillReceiveProps(props) {
155 | // do nothing when dataLength and key are unchanged
156 | if (this.props.key === props.key && this.props.dataLength === props.dataLength) return;
157 |
158 | // update state when new data was sent in
159 | this.setState({
160 | showLoader: false,
161 | actionTriggered: false,
162 | pullToRefreshThresholdBreached: false,
163 | });
164 | }
165 |
166 | getScrollableTarget() {
167 | if (this.props.scrollableTarget instanceof HTMLElement) return this.props.scrollableTarget;
168 | if (typeof this.props.scrollableTarget === 'string') {
169 | return document.getElementById(this.props.scrollableTarget);
170 | }
171 | if (this.props.scrollableTarget === null) {
172 | console.warn(`You are trying to pass scrollableTarget but it is null. This might
173 | happen because the element may not have been added to DOM yet.
174 | See https://github.com/ankeetmaini/react-infinite-scroll-component/issues/59 for more info.
175 | `);
176 | }
177 | return null;
178 | }
179 |
180 | onStart(evt) {
181 | if (this.state.lastScrollTop) return;
182 |
183 | this.dragging = true;
184 | this.startY = evt.pageY || evt.touches[0].pageY;
185 | this.currentY = this.startY;
186 |
187 | this._infScroll.style.willChange = 'transform';
188 | this._infScroll.style.transition = 'transform 0.2s cubic-bezier(0,0,0.31,1)';
189 | }
190 |
191 | onMove(evt) {
192 | if (!this.dragging) return;
193 | this.currentY = evt.pageY || evt.touches[0].pageY;
194 |
195 | // user is scrolling down to up
196 | if (this.currentY < this.startY) return;
197 |
198 | if (this.currentY - this.startY >= this.props.pullDownToRefreshThreshold) {
199 | this.setState({
200 | pullToRefreshThresholdBreached: true,
201 | });
202 | }
203 |
204 | // so you can drag upto 1.5 times of the maxPullDownDistance
205 | if (this.currentY - this.startY > this.maxPullDownDistance * 1.5) return;
206 |
207 | this._infScroll.style.overflow = 'visible';
208 | this._infScroll.style.transform = `translate3d(0px, ${this.currentY
209 | - this.startY}px, 0px)`;
210 | }
211 |
212 | onEnd(evt) {
213 | this.startY = 0;
214 | this.currentY = 0;
215 |
216 | this.dragging = false;
217 |
218 | if (this.state.pullToRefreshThresholdBreached) {
219 | this.props.refreshFunction && this.props.refreshFunction();
220 | }
221 |
222 | requestAnimationFrame(() => {
223 | // this._infScroll
224 | if (this._infScroll) {
225 | this._infScroll.style.overflow = 'inherit';
226 | this._infScroll.style.transform = 'none';
227 | this._infScroll.style.willChange = 'none';
228 | }
229 | });
230 | }
231 |
232 | isElementAtBottom(target, scrollThreshold = 0.8) {
233 | const clientHeight = target === document.body || target === document.documentElement
234 | ? window.screen.availHeight
235 | : target.clientHeight;
236 |
237 | const threshold = parseThreshold(scrollThreshold);
238 |
239 | if (threshold.unit === ThresholdUnits.Pixel) {
240 | return (
241 | target.scrollTop + clientHeight >= target.scrollHeight - threshold.value
242 | );
243 | }
244 |
245 | return (
246 | target.scrollTop + clientHeight >= threshold.value / 100 * target.scrollHeight
247 | );
248 | }
249 |
250 | onScrollListener(event) {
251 | if (typeof this.props.onScroll === 'function') {
252 | // Execute this callback in next tick so that it does not affect the
253 | // functionality of the library.
254 | setTimeout(() => this.props.onScroll(event), 0);
255 | }
256 |
257 | const target = this.props.height || this._scrollableNode
258 | ? event.target
259 | : document.documentElement.scrollTop
260 | ? document.documentElement
261 | : document.body;
262 |
263 | // return immediately if the action has already been triggered,
264 | // prevents multiple triggers.
265 | if (this.state.actionTriggered) return;
266 |
267 | const atBottom = this.isElementAtBottom(target, this.props.scrollThreshold);
268 |
269 | // call the `next` function in the props to trigger the next data fetch
270 | if (atBottom && this.props.hasMore) {
271 | this.setState({ actionTriggered: true, showLoader: true });
272 | this.props.next();
273 | }
274 | this.setState({ lastScrollTop: target.scrollTop });
275 | }
276 |
277 | render() {
278 | const style = {
279 | height: this.props.height || 'auto',
280 | overflow: 'inherit',
281 | WebkitOverflowScrolling: 'touch',
282 | ...this.props.style,
283 | };
284 | const hasChildren = this.props.hasChildren
285 | || !!(this.props.children && this.props.children.length);
286 |
287 | // because heighted infiniteScroll visualy breaks
288 | // on drag down as overflow becomes visible
289 | const outerDivStyle = this.props.pullDownToRefresh && this.props.height
290 | ? { overflow: 'inherit' }
291 | : {};
292 | return (
293 |
26 |
30 | Something went wrong:
27 |{error}
28 |{info}
29 |
294 |
328 | );
329 | }
330 | }
331 |
332 | export default InfiniteScroll;
333 |
--------------------------------------------------------------------------------
/src/client/components/NavBar.jsx:
--------------------------------------------------------------------------------
1 | import { Link, withRouter } from 'inferno-router';
2 | import UIkit from 'uikit';
3 |
4 | const closeOffCanvasNav = () => {
5 | const element = document.getElementById('offcanvas-nav');
6 | UIkit.offcanvas(element).hide();
7 | };
8 |
9 | const OffCanvasNav = (props) => {
10 | const { location } = props;
11 | const path = location.pathname;
12 |
13 | return (
14 |
49 | );
50 | };
51 | const OffCanvasNavWithRouter = withRouter(OffCanvasNav);
52 |
53 | const NavBar = (props) => {
54 | const { location } = props;
55 | const transparent = location.pathname === '/player/';
56 |
57 | return (
58 | <>
59 | (this._infScroll = infScroll)}
297 | style={style}
298 | >
299 | {this.props.pullDownToRefresh && (
300 |
327 | (this._pullDown = pullDown)}
303 | >
304 |
318 | )}
319 | {this.props.children}
320 | {!this.state.showLoader
321 | && !hasChildren
322 | && this.props.hasMore
323 | && this.props.loader}
324 | {this.state.showLoader && this.props.hasMore && this.props.loader}
325 | {!this.props.hasMore && this.props.endMessage}
326 |
312 | {!this.state.pullToRefreshThresholdBreached
313 | && this.props.pullDownToRefreshContent}
314 | {this.state.pullToRefreshThresholdBreached
315 | && this.props.releaseToRefreshContent}
316 |
317 |
60 |
71 |
72 | );
73 | };
74 |
75 | export default withRouter(NavBar);
76 |
--------------------------------------------------------------------------------
/src/client/components/PlayerBar.jsx:
--------------------------------------------------------------------------------
1 | import { connect } from 'inferno-redux';
2 | import { Link } from 'inferno-router';
3 |
4 | import playIcon from '../static/svg/play.svg';
5 | import pauseIcon from '../static/svg/pause.svg';
6 |
7 | const mapStateToProps = state => ({
8 | playing: state.playing,
9 | queue: state.queue,
10 | currentlyPlaying: state.queue[state.queueIndex],
11 | });
12 |
13 | const PlayerBar = (props) => {
14 | const {
15 | dispatch, playing, queue, currentlyPlaying,
16 | } = props;
17 |
18 | // Queue is empty, don't render the player bar.
19 | if (queue.length === 0) {
20 | return null;
21 | }
22 |
23 | return (
24 | <>
25 |
26 |
61 |
65 |
66 |
62 |
63 |
64 |
67 |
68 |
70 |
27 |
28 |
44 |
45 | );
46 | };
47 |
48 | export default connect(mapStateToProps)(PlayerBar);
49 |
--------------------------------------------------------------------------------
/src/client/components/WorkDetails.jsx:
--------------------------------------------------------------------------------
1 | import { Link } from 'inferno-router';
2 |
3 | // Renders the tag links.
4 | const Tags = props => props.tags.map(
5 | (tag, index, tags) => (
6 | <>
7 | {tag.name}
8 | {index !== tags.length - 1 ? ', ' : ''}
9 |
10 | ),
11 | );
12 |
13 | // Renders the VA badges.
14 | const VAs = props => props.vas.map(
15 | va => (
16 |
20 | {va.name}
21 |
22 | ),
23 | );
24 |
25 | // Renders the work metadata.
26 | export default ({ metadata }) => (
27 |
29 | 
30 |
31 |
32 |
33 |
34 |
38 | {currentlyPlaying.title}
35 |{currentlyPlaying.subtitle}
36 | 37 |
39 |
42 |
43 |
28 |
60 | );
61 |
--------------------------------------------------------------------------------
/src/client/components/WorkQueue.jsx:
--------------------------------------------------------------------------------
1 | import { Component } from 'inferno';
2 | import { connect } from 'inferno-redux';
3 |
4 | import UIkit from 'uikit';
5 |
6 | const mapStateToProps = state => ({
7 | // Track hash if currently playing a track, else null.
8 | currentlyPlayingHash: (state.playing && state.queue[state.queueIndex])
9 | ? state.queue[state.queueIndex].hash : null,
10 | });
11 |
12 | // Renders a single row (track) inside the list.
13 | const FileTableRow = ({
14 | clickHandler, file, index, fileOptions, usePauseIcon,
15 | }) => (
16 |
29 |
30 | 
31 |
32 |
33 |
34 |
35 |
59 | 36 | 40 | {metadata.title} 41 | 42 |
43 | 44 | 48 | {metadata.circle.name} 49 | 50 | 51 |
52 |
54 |
55 |
56 |
58 | {file.subtitle}
21 |
25 |
29 | -
26 | {fileOptions.map(option => )}
27 |
Queue is empty.
); 76 | } 77 | 78 | const TrashButton = ( 79 |