Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Fix download state not being reactive in offline mode. #166

Merged
merged 1 commit into from
Nov 8, 2021
Merged

Fix download state not being reactive in offline mode. #166

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
26 changes: 23 additions & 3 deletions src/js/pages/Video.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -56,8 +56,6 @@ export default (routerContext) => {
}
downloader.setAttribute('expanded', 'true');

const disabled = (connectionStatus.status === 'offline' && downloader.state !== 'done');

let videoImageHTML;

if (Array.isArray(thumbnail)) {
Expand All @@ -72,9 +70,21 @@ export default (routerContext) => {

const [videoMinutes, videoSeconds] = currentVideoData.length.split(':');

/**
* Returns whether the current video is available for playback.
*
* @param {object} downloaderOrState Downloader instance or state object.
* @param {string} downloaderOrState.state Downloader state string, e.g. "done".
* @param {boolean} downloaderOrState.willremove Downloader willremove flag.
* @returns {boolean} Whether video is available for playback from any source (network or IDB).
*/
const isVideoAvailable = (downloaderOrState) => connectionStatus.status !== 'offline' // We're are not offline...
|| downloaderOrState.state === 'done' // ... or we have the video downloaded
|| downloaderOrState.willremove === true; // ... or we're about to remove it, but haven't yet.

mainContent.innerHTML = `
<div class="container">
<article${disabled ? ' class="video--disabled"' : ''}>
<article class="video-article ${isVideoAvailable(downloader) ? '' : 'video--disabled'}">
<div class="video-container width-full">
<div class="video-container--image">
${videoImageHTML}
Expand Down Expand Up @@ -115,6 +125,16 @@ export default (routerContext) => {
mainContent.prepend(posterWrapper);
mainContent.querySelector('.downloader').appendChild(downloader);

downloader.subscribe((oldState, newState) => {
const articleEl = mainContent.querySelector('.video-article');

if (isVideoAvailable(newState)) {
articleEl.classList.remove('video--disabled');
} else {
articleEl.classList.add('video--disabled');
}
});

const playButton = mainContent.querySelector('.play');
const categorySlug = currentVideoData.categories[0];
const { name, slug } = apiData.categories.find((obj) => obj.slug === categorySlug);
Expand Down
41 changes: 28 additions & 13 deletions src/js/web-components/video-download/VideoDownloader.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -24,6 +24,9 @@ import getURLsForDownload from '../../utils/getURLsForDownload';
import { MEDIA_SESSION_DEFAULT_ARTWORK } from '../../constants';

export default class VideoDownloader extends HTMLElement {
/**
* @type {string[]}
*/
static get observedAttributes() {
return ['state', 'progress', 'downloading', 'willremove'];
}
Expand Down Expand Up @@ -55,12 +58,7 @@ export default class VideoDownloader extends HTMLElement {
}

set state(state) {
const oldState = this.state;
this.setAttribute('state', state);

this.internal.changeCallbacks.forEach(
(callback) => callback(oldState, state),
);
}

/**
Expand Down Expand Up @@ -114,6 +112,24 @@ export default class VideoDownloader extends HTMLElement {
const percentageAsDashOffset = 82 - (82 * value);
this.internal.root.host.style.setProperty('--progress', percentageAsDashOffset);
}

// Broadcast changes in several internal properties.
const currentState = {
state: this.state,
willremove: this.willremove,
};

if (Object.keys(currentState).includes(name)) {
const typecastBooleans = (val) => (['false', 'true'].includes(val) ? val === 'true' : val);
const oldState = {
...currentState,
[name]: typecastBooleans(old),
};

this.internal.changeCallbacks.forEach(
(callback) => callback(oldState, currentState),
);
}
}

/**
Expand Down Expand Up @@ -405,14 +421,12 @@ export default class VideoDownloader extends HTMLElement {
await this.removeFromIDB();
window.removeEventListener('beforeunload', this.unloadHandler);
}, 5000);
} else if (e.target.classList.contains('action--undo')) {
if (this.willremove === true) {
if (this.removalTimeout) {
this.state = 'done';
this.willremove = false;
clearTimeout(this.removalTimeout);
window.removeEventListener('beforeunload', this.unloadHandler);
}
} else if (this.willremove === true) {
if (this.removalTimeout) {
this.state = 'done';
this.willremove = false;
clearTimeout(this.removalTimeout);
window.removeEventListener('beforeunload', this.unloadHandler);
}
} else if (e.target.classList.contains('action--cancel')) {
this.removeFromIDB();
Expand Down Expand Up @@ -483,6 +497,7 @@ export default class VideoDownloader extends HTMLElement {
} else {
this.state = 'ready';
}

this.downloading = false;
}

Expand Down