diff --git a/frontend/css/style.css b/frontend/css/style.css
index 4737d80..adcc8a4 100644
--- a/frontend/css/style.css
+++ b/frontend/css/style.css
@@ -398,6 +398,15 @@ body.theme-light .sidebar {
margin-bottom: 8px;
}
+/* Explanatory line under a control -- and where the import reports back. Not a
+ `label`, so it keeps sentence case and normal letter spacing. */
+.setting-note {
+ margin: 8px 0 0;
+ font-size: 12px;
+ line-height: 1.45;
+ color: var(--text-secondary);
+}
+
.setting-label-row label {
margin-bottom: 0;
}
diff --git a/frontend/index.html b/frontend/index.html
index c6238fc..74b0944 100644
--- a/frontend/index.html
+++ b/frontend/index.html
@@ -133,6 +133,17 @@
+
+
Hot Tub Backup
+
+
+
+
+
+ Reads the favorites out of an exported Hot Tub database. The file stays on this device.
+
+
+
@@ -191,6 +202,8 @@
+
+
diff --git a/frontend/js/favorites.js b/frontend/js/favorites.js
index 312571b..4d97a40 100644
--- a/frontend/js/favorites.js
+++ b/frontend/js/favorites.js
@@ -63,10 +63,90 @@ App.favorites = App.favorites || {};
};
};
+ // Identity across sources. Favorites added here are keyed by the server's
+ // id; ones imported from a Hot Tub backup can only be keyed by URL (the app
+ // keys videos by a hash of its own). Comparing normalized URLs is what
+ // stops the same video being listed twice under two different keys.
+ App.favorites.urlKey = function(url) {
+ const raw = String(url || '').trim();
+ if (!raw) return '';
+ try {
+ const parsed = new URL(raw, window.location.href);
+ const host = parsed.host.replace(/^www\./i, '').toLowerCase();
+ const path = parsed.pathname.replace(/\/+$/, '');
+ return `${host}${path}${parsed.search}`;
+ } catch (err) {
+ return raw.toLowerCase();
+ }
+ };
+
+ // Adds favorites from an import, skipping any this client already has.
+ // Existing entries are left exactly as they are -- they carry the server id
+ // that makes a listing card's heart light up, which an imported entry has
+ // no way to know -- and new ones are appended after them.
+ App.favorites.mergeImported = function(entries) {
+ const incoming = Array.isArray(entries) ? entries : [];
+ const favorites = App.favorites.getAll();
+ const keys = new Set();
+ const urls = new Set();
+ favorites.forEach((item) => {
+ if (!item) return;
+ if (item.key) keys.add(item.key);
+ const urlKey = App.favorites.urlKey(item.url);
+ if (urlKey) urls.add(urlKey);
+ });
+
+ let added = 0;
+ let skipped = 0;
+ incoming.forEach((entry) => {
+ if (!entry || !entry.key) return;
+ const urlKey = App.favorites.urlKey(entry.url);
+ if (keys.has(entry.key) || (urlKey && urls.has(urlKey))) {
+ skipped++;
+ return;
+ }
+ keys.add(entry.key);
+ if (urlKey) urls.add(urlKey);
+ favorites.push(entry);
+ added++;
+ });
+
+ if (added) {
+ App.favorites.setAll(favorites);
+ App.favorites.renderBar();
+ App.favorites.syncButtons();
+ }
+ return { added, skipped, total: favorites.length };
+ };
+
App.favorites.getSet = function() {
return new Set(App.favorites.getAll().map((item) => item.key));
};
+ // Same set, addressed by URL. Imported favorites are keyed by URL rather
+ // than by a server id, so a listing card can only recognise one this way.
+ App.favorites.getUrlSet = function() {
+ const urls = new Set();
+ App.favorites.getAll().forEach((item) => {
+ const urlKey = item && App.favorites.urlKey(item.url);
+ if (urlKey) urls.add(urlKey);
+ });
+ return urls;
+ };
+
+ // Is this video already a favorite, whichever way it got saved? Checked by
+ // key first, then by URL, so a card and an imported entry for the same
+ // video are recognised as one thing.
+ App.favorites.indexOfEntry = function(favorites, video) {
+ const key = App.favorites.getKey(video);
+ const byKey = key ? favorites.findIndex((item) => item && item.key === key) : -1;
+ if (byKey >= 0) return byKey;
+ const meta = (video && video.meta) || video || {};
+ const urlKey = App.favorites.urlKey(video && (video.url || meta.url));
+ if (!urlKey) return -1;
+ return favorites.findIndex((item) => item && App.favorites.urlKey(item.url) === urlKey);
+ };
+
App.favorites.isVisible = function() {
return localStorage.getItem(FAVORITES_VISIBILITY_KEY) !== 'false';
};
@@ -85,10 +165,12 @@ App.favorites = App.favorites || {};
App.favorites.syncButtons = function() {
const favoritesSet = App.favorites.getSet();
+ const favoriteUrls = App.favorites.getUrlSet();
document.querySelectorAll('.favorite-btn[data-fav-key]').forEach((button) => {
const key = button.dataset.favKey;
- if (!key) return;
- App.favorites.setButtonState(button, favoritesSet.has(key));
+ const urlKey = App.favorites.urlKey(button.dataset.favUrl);
+ if (!key && !urlKey) return;
+ App.favorites.setButtonState(button, (key && favoritesSet.has(key)) || (urlKey && favoriteUrls.has(urlKey)));
});
};
@@ -96,7 +178,9 @@ App.favorites = App.favorites || {};
const key = App.favorites.getKey(video);
if (!key) return;
const favorites = App.favorites.getAll();
- const existingIndex = favorites.findIndex((item) => item.key === key);
+ // By key or by URL: unfavoriting a card whose video came in from a
+ // backup must remove that entry, not add a second one beside it.
+ const existingIndex = App.favorites.indexOfEntry(favorites, video);
const becameFavorite = existingIndex < 0;
if (existingIndex >= 0) {
favorites.splice(existingIndex, 1);
@@ -140,7 +224,7 @@ App.favorites = App.favorites || {};
const liveBadge = item.isLive ? '● LIVE' : '';
card.innerHTML = `
${liveBadge}
-
+
diff --git a/frontend/js/feed.js b/frontend/js/feed.js
index bb1f9a6..4d836a8 100644
--- a/frontend/js/feed.js
+++ b/frontend/js/feed.js
@@ -442,7 +442,7 @@ App.feed = App.feed || {};
${liveBadge}
- ${favKey ? `` : ''}
+ ${favKey ? `` : ''}
@@ -484,7 +484,7 @@ App.feed = App.feed || {};
const favBtn = slide.querySelector('.feed-fav-btn');
if (favBtn && App.favorites) {
- App.favorites.setButtonState(favBtn, App.favorites.getSet().has(favKey));
+ App.favorites.setButtonState(favBtn, App.favorites.indexOfEntry(App.favorites.getAll(), v) >= 0);
favBtn.addEventListener('click', (event) => {
event.stopPropagation();
App.favorites.toggle(v);
diff --git a/frontend/js/hottubBackup.js b/frontend/js/hottubBackup.js
new file mode 100644
index 0000000..5d83183
--- /dev/null
+++ b/frontend/js/hottubBackup.js
@@ -0,0 +1,69 @@
+window.App = window.App || {};
+App.hottubBackup = App.hottubBackup || {};
+
+// Reads a Hot Tub app backup (an exported SQLite database) and turns the videos
+// it has flagged as favorites into this client's favorites.
+//
+// The app and this client don't agree on identity: the app keys a video by a
+// hash it computes locally, while the server -- and so this client -- keys it by
+// something like "reddit-1rdudss". So an imported favorite is matched to an
+// existing one by URL, and carries no id of its own; see App.favorites.mergeImported.
+(function() {
+ // The app stores a comma-separated set here ("favorite", "recent", ...).
+ // It also keeps a `favoriteDate` on rows it no longer flags -- a leftover
+ // from unfavoriting -- so the flag, not the date, is what counts.
+ const FAVORITE_FLAG = 'favorite';
+
+ // Only what a favorite needs. Skipping the rest matters: `allFormats` alone
+ // is kilobytes of resolved-format JSON per row, and it is exactly the kind
+ // of thing this client must not store -- those URLs are signed and expire
+ // (see App.favorites.normalize).
+ const COLUMNS = ['url', 'title', 'thumb', 'duration', 'uploader', 'flags', 'favoriteDate'];
+
+ const hasFavoriteFlag = function(flags) {
+ if (!flags) return false;
+ return String(flags).split(',').some((flag) => flag.trim().toLowerCase() === FAVORITE_FLAG);
+ };
+
+ // Newest first, matching how favorites are ordered when added by hand.
+ const byNewest = function(a, b) {
+ return String(b.favoriteDate || '').localeCompare(String(a.favoriteDate || ''));
+ };
+
+ App.hottubBackup.readFavorites = function(buffer) {
+ const db = App.sqlite.open(buffer);
+ if (db.tableNames().indexOf('video_details') < 0) {
+ throw new Error('This database has no video_details table -- is it a Hot Tub backup?');
+ }
+ const rows = db.readTable('video_details', { columns: COLUMNS });
+ return rows
+ .filter((row) => row.url && hasFavoriteFlag(row.flags))
+ .sort(byNewest)
+ .map((row) => ({
+ // No id: the app's own is meaningless to this client, and the
+ // URL is what both sides agree on.
+ key: row.url,
+ id: null,
+ url: row.url,
+ title: row.title || '',
+ thumb: row.thumb || '',
+ channel: '',
+ uploader: row.uploader || '',
+ duration: Number(row.duration) || 0,
+ isLive: false
+ }));
+ };
+
+ App.hottubBackup.readFile = function(file) {
+ return file.arrayBuffer().then((buffer) => App.hottubBackup.readFavorites(buffer));
+ };
+
+ // Reads the file and merges what it finds. Resolves to the merge summary
+ // ({found, added, skipped, total}) so the caller can report it.
+ App.hottubBackup.importFile = function(file) {
+ return App.hottubBackup.readFile(file).then((entries) => {
+ const result = App.favorites.mergeImported(entries);
+ return Object.assign({ found: entries.length }, result);
+ });
+ };
+})();
diff --git a/frontend/js/sqlite.js b/frontend/js/sqlite.js
new file mode 100644
index 0000000..0a77440
Binary files /dev/null and b/frontend/js/sqlite.js differ
diff --git a/frontend/js/ui.js b/frontend/js/ui.js
index f27c5a9..21324ae 100644
--- a/frontend/js/ui.js
+++ b/frontend/js/ui.js
@@ -616,7 +616,51 @@ App.ui = App.ui || {};
};
// Expose inline handlers + keyboard shortcuts.
+ // Settings -> Hot Tub Backup: pick an exported database and merge the
+ // favorites out of it. Bound once (unlike the controls in renderMenu, which
+ // are re-assigned on every render) because a file input mid-read must not
+ // have its handler swapped underneath it.
+ App.ui.bindBackupImport = function() {
+ const button = document.getElementById('import-favorites-btn');
+ const input = document.getElementById('import-favorites-file');
+ const status = document.getElementById('import-favorites-status');
+ if (!button || !input) return;
+
+ const say = (message) => { if (status) status.textContent = message; };
+
+ button.addEventListener('click', () => {
+ // Cleared first so picking the same file twice still fires change.
+ input.value = '';
+ input.click();
+ });
+
+ input.addEventListener('change', () => {
+ const file = input.files && input.files[0];
+ if (!file) return;
+ button.disabled = true;
+ say('Reading backup…');
+ App.hottubBackup.importFile(file).then((result) => {
+ if (!result.found) {
+ say('No favorites found in that backup.');
+ } else if (!result.added) {
+ say(`Nothing new: all ${result.found} favorites in that backup are already saved.`);
+ } else {
+ const plural = result.added === 1 ? 'favorite' : 'favorites';
+ const already = result.skipped ? ` ${result.skipped} were already saved.` : '';
+ say(`Imported ${result.added} ${plural}.${already}`);
+ }
+ }).catch((err) => {
+ say('Could not read that file.');
+ App.ui.showError((err && err.message) || 'Could not read that backup.');
+ }).then(() => {
+ button.disabled = false;
+ });
+ });
+ };
+
App.ui.bindGlobalHandlers = function() {
+ App.ui.bindBackupImport();
+
window.toggleDrawer = App.ui.toggleDrawer;
window.closeDrawers = App.ui.closeDrawers;
window.handleSearch = App.videos.handleSearch;
diff --git a/frontend/js/videos.js b/frontend/js/videos.js
index 219eb7e..9dbf8e4 100644
--- a/frontend/js/videos.js
+++ b/frontend/js/videos.js
@@ -460,7 +460,7 @@ App.videos = App.videos || {};
const liveBadge = v.isLive ? '● LIVE' : '';
card.innerHTML = `
${liveBadge}
-
+