🎬 MEDIA HUB
A personal tracker for everything you watch: movies, series, anime, anime films and cartoons, in a single HTML file.
MEDIA HUB is a fast, good-looking list app. Your collection lives in your own Google Sheet, TMDB fills in the details for you, and a built-in radar tells you when something you follow gets a new season. There's nothing to install and no account to create beyond your own Google Drive. Open the file and start tracking.
✨ Highlights
- One file, zero setup: plain HTML, CSS and JavaScript. It works from your desktop, a USB stick or any static host.
- Your data, your sheet: everything is stored in a Google Sheet you own, through a small Google Apps Script backend.
- TMDB auto-fill: posters, genres, IMDB links and season, episode or runtime details are filled in automatically.
- Radar: finds new seasons, new episodes and new films for the titles in your list.
- Clean Report: finds and repairs messy data such as duplicates, dead posters, inconsistent formats and missing links.
- Built for PC and phone: a spreadsheet-style table on desktop and poster cards on mobile, each with its own display settings.
- Quick filters on the phone: ALL · NEXT · HOLD · DROP chips (NEXT, HOLD and DROP with their count) show just the titles with that score in one tap.
- Bilingual: English and Romanian.
📚 Your collection
Categories
Five ready-made tabs: MOVIES, SERIES, ANIME, ANIME MOVIE, CARTOONS. You can hide the ones you don't use (at least one always stays visible); their data is kept. A hidden category that has changes not saved to the cloud yet keeps its tab (with the dot) until you save them. With a cloud, a sheet you add to the spreadsheet shows up as a category too. A category the spreadsheet doesn't have yet stays in the app, and its first save creates the sheet. The spreadsheet's own empty first sheet (Sheet1) is not shown as a category. A sheet of your own without a Score column takes titles without a score (the Add window doesn't ask for one). The app always opens on the category you had open last time. Names that differ only by a dash or a space (SCI-FI, SCI FI) are separate tabs, and on the phone a very long name is shortened with … so its tab fits the screen.
The table
| Column | What it holds |
|---|
| # | Position in the list, shown as a small badge on the poster |
| Title | The name, editable in place |
| Score | 1–10 (decimals allowed), or NEXT, HOLD or DROP. Only clean values count: something like 8abc, 10/10 or 95 is left out of the average, the colours and the score order until Clean Report fixes it |
| Genres | Shown as pills: two genres plus a +N chip, and the R+ / R- rating pills |
| Length | 4 Seasons | 89 Episodes or 148 min (2h 28min, 1h30, 1.5h or 45m are understood too, and so is Romanian: 3 sezoane | 30 episoade, 2 SEZ · 20 EP, 2 ore 15 min, 2,5 ore), shown as a compact pill |
| IMDB | A yellow IMDB button with the IMDb score, e.g. IMDB 7.7, or Add link when it's missing. In the link window Enter saves, and a bare tt0111161 or www.imdb.com/… becomes a full link. A link to another title clears the old IMDb score (with an OMDb key the new one is fetched) |
| IMDB_Score | The IMDb score shown inside the IMDB button (not a column of its own); switch it off in Visible columns to hide the score |
| Rewatches | A counter with − / + buttons (on the phone, press and hold them, so a stray tap changes nothing) |
| Notes | A short preview with "…"; hover (PC) to read the whole note |
| Image | The poster, with a hover zoom on PC; a poster whose link no longer works shows the empty-poster icon (Clean Report can replace it) |
Genres, Length and IMDB are merged into one cell, and so are Rewatches and Notes, so each row stays compact and easy to read.
Column names in a sheet or CSV can also be the Romanian ones the app shows (Titlu, Notă, Genuri, Durată, Revizionări, Notițe, Imagine, Notă IMDb): they are recognised and kept as they are.
On PC the Image header shows how many titles the category has. Point at the Score header for its stats: the average score first, then how many titles have each score (10 … 1; a 9.5 counts with the 9s), then DROP, HOLD and NEXT, then the total episodes and watch time.
The totals (episodes and watch time) count only titles with a numeric score, i.e. what you have watched and rated. NEXT, HOLD and DROP titles are left out. On the phone the same totals sit in the bar above the cards, and they update as soon as you edit a Length or a score.
Scores and sorting
Numeric scores always come first, then:
- NEXT: still to watch (green)
- HOLD: started, then paused (amber)
- DROP: abandoned (red)
Click any column header to sort it ascending, descending or back to off. Sorting handles numbers and accented text correctly. The sorted column stays highlighted in the accent colour, even when the mouse moves away.
In merged headers (Genres · Length · IMDb, Rewatches · Notes) every word sorts its own column and has its own arrow, so clicking Length sorts by length (shows by episodes, then films by minutes; a rating in front, like R-, doesn't change the order) and Notes by notes.
As soon as you type, an × appears in the search box: click it (or press Esc) to clear the search and show all titles again. The search ignores accents, spaces and punctuation: spiderman or spider man finds Spider-Man, pokemon the finds Pokémon: The Movie. A search that is mostly symbols, like c++, is matched as typed. On the phone, Enter closes the keyboard.
Empty cells always stay at the end, in both directions. When sorting by Score, the numbers come first, then NEXT, HOLD and DROP in that order.
Sort by IMDb score: click IMDb in the header of the cell that holds the IMDB button on PC, or pick IMDb Score in the sort menu on the phone. The highest score comes first, a second click puts the lowest first, and titles without a score always stay at the end.
Editing
- Click a cell to edit it. Arrow keys and Enter move between cells. Esc cancels the edit and puts the old text back. A cell you only click into or move through keeps its text exactly as it was (line breaks and spaces included); only what you type is saved.
- A Score typed in the table must be 1–10 (decimals allowed,
9,5 becomes 9.5) or NEXT, HOLD, DROP; anything else is refused with a short message and the old score stays.
- Pasting text with several lines into a cell joins the lines with spaces.
- On the phone, editing Genres or Length shows one word per line, so the whole text stays in view (a space starts a new line; it is saved as normal text).
- Move rows up or down: hover the # badge on PC, or use the row menu on the phone. The list always stays in score order (from the very first category you open, whatever the column layout of each sheet), so a row can only swap places with titles that have the same score (for example, to order your NEXT list). The arrows are off while a column is sorted. After a delete the # numbers close the gap.
- Undo (Ctrl/Cmd + Z) covers edits, deletions, moves, additions, TMDB syncs (one row, or the whole table as one step) and whole Clean Report steps. Redo (Ctrl/Cmd + Y or Ctrl/Cmd + Shift + Z) puts back what you undid; both are also in the ⋮ table menu. A new edit after an undo starts fresh, so there is nothing left to redo. Undoing a score change puts the title back exactly where it was among the titles with that score, so an order you made by hand (for example your NEXT list) is kept. A TMDB sync that finishes after you switched category is saved to the category the title belongs to, and a sync that changed nothing leaves nothing unsaved.
- A duplicate warning appears when you add a title that's already in the list.
🎞️ TMDB integration
Add your free TMDB API key in Settings. From then on:
- Adding a title automatically fetches its poster, genres, IMDB link and length. A category whose name has MOVIE or FILM in it (MOVIES, ANIME MOVIE, FILME) is searched as films, the others as series; a title that isn't found as one kind is looked up as the other.
- Sync this row / Sync whole table refreshes the details, and asks you to choose when a title has several matches. A title that already has an IMDB link syncs exactly that title; otherwise the result with the same title is preferred over TMDB's first one.
- Requests are rate-limit aware: they retry on "too many requests", time out instead of hanging, and cache results for 30 minutes.
IMDb scores
Every category has an IMDB_Score column (the app adds it at the end when a sheet doesn't have it yet; the next save puts it in the sheet). Its value is shown inside the IMDB button. TMDB has no IMDb ratings, so the scores come from OMDb: put your free OMDb key (1000 requests a day) in Settings, then:
- ⋮ table menu → Sync external score fills the IMDb score of every title with an IMDB link (missing scores first, so a run cut short by the daily limit still fills the gaps). One Undo reverts it.
- ⋮ on a row → Sync external score does the same for that one title (one Undo step); it is greyed out when the title has no IMDB link.
- The score is also filled in when you add or sync a title, and the Clean Report can fill missing scores or refresh them all.
- You can type a score yourself with the pen on the IMDB button: a number from 0 to 10 (
7,8 is read as 7.8), N/A, or empty to clear it; anything else is not saved and the window stays open with a hint.
- The button size, the IMDB text and the score size can be changed in Depth Customization → IMDb, separately for PC and phone.
An optional ANIMELIST_Score column is kept in the sheet but not shown yet.
🛰️ Radar
Updates scans the current category and reports:
- new seasons, episodes currently airing, completed seasons, new films and announced releases;
- the release date and how many days are left.
You can filter by score range (e.g. 8-10 or 7+), hide anything older than a chosen year, and pick which special scores are scanned too with the Include chips: NEXT, HOLD and DROP, each on or off (HOLD is on by default). Results are grouped into All / Seasons / Airing / Films / Soon.
Search lets you discover new titles on TMDB by type (movies, series, anime, anime films), rating range, year and genres, and add them to your list with one click: the title comes in as NEXT with its poster, genres, Length, IMDB link (and IMDb score, with an OMDb key), written the same way a TMDB sync writes them. Results already in the category you have open are marked as added.
🧹 Clean Report
The Clean Report shows the total number of problems at the top, plus a Fix all button. Each check sits in its own collapsible section, with an Auto button and an old → new preview:
| Check | What it does |
|---|
| Possible duplicates | Matches titles regardless of accents, spaces or punctuation (Spider-Man = Spiderman, & = and, any alphabet). Show jumps to the row; Delete removes one copy. |
| Missing IMDB link | Finds the link on TMDB by title, or lets you paste one yourself. |
| Missing IMDb scores | With an OMDb key: fills scores from OMDb, and can refresh all of them. |
| Dead or empty posters | Replaces them with the TMDB poster. There is also an option to move every poster to TMDB. Without a connection the posters are not checked (a message says so) instead of all being called dead. |
| Grades normalised | Turns any mark between digits into a dot (9,10 → 9.10) and capitalises next / hold / drop. |
| Invalid grades | Fixes clear cases (10/10, 9.5., 8+) and lists the rest for you to edit. |
| Length formats | Rewrites every length in one format, e.g. R- 4 Seasons | 89 Episodes or 148 min (2h 28min becomes 148 min). |
| Genres | Uses one spelling per genre (sci-fi → Sci-Fi) and removes repeats. |
| Text cleanup | Removes stray spaces, turns Rewatches into a number, deletes empty rows and flags rows without a title. Columns of your own keep their line breaks (like Notes). |
Show on an item scrolls to that title (clearing the search or a NEXT / HOLD / DROP filter that hides it). Fix all runs the local fixes first, then the TMDB repairs, with progress shown and a STOP button. A whole run can be undone in one step, and the undo puts every title back exactly where it was. A fixed score moves the title to its place in the score order right away (for example 10/10 becomes 10 and goes to the top).
🎨 Make it yours
Settings → CUSTOMIZATION holds the theme, the view mode, Behaviour, the visible categories and the visible columns; from there Depth Customization opens every colour, rule and size option.
- Themes: Auto (follows your system), Light, Dark, AMOLED (pure black) or Midnight (deep blue), chosen from one compact row; the view mode (Auto / PC / MOBILE) sits in the row under it.
- Visible columns and their order: switch any column on or off, and point at a column to move it up or down with ▲ / ▼. The parts of a merged cell move with their group (Length and IMDB with Genres, Notes with Rewatches). The order is saved per layout profile.
- Depth Customization is one list with a search box. Its sections are listed alphabetically, each option has its name on the left and its control on the right, sizes show the real number (e.g. 2 genre pills, 11.5 px) instead of 0 / auto, and every section has a small ↺ button right after its name that resets only that section (changing an option never moves the list):
- Alignment & lines: horizontal and vertical alignment, wrapping, words per line;
- Colours: the accent colour, from a picker or one of 10 ready-made colours (shown as you pick; closing without APPLY puts the saved one back);
- IMDb: button style (full, icon or hidden), button size (50–200%), size of the IMDB text and of the IMDb score;
- Phone cards (MOBILE profile): space between cards, card corners, and the poster on the left or on top across the card;
- Pills: number of genre pills, pill style, length format, rating pills (Both / R+ / R- / None), pill text size and pill size;
- Poster: fill or fit, width and height (optionally locked to 2:3), corner style, # badge position and size, hover zoom from 1.0× (off) to 6.0× in steps of 0.1 (default 2.0×);
- Rewatch & Notes: size of the Rewatch counter and its − / + buttons, note text size, note preview length;
- Rows: density, row lines, sticky header, table width (full, limited or a custom pixel width);
- Rules: colour scores or text by value, for example
SCORE 9-10 green or GENRES Action red. Rules work on Title, Score, Genres (the matching pill), Length, Notes and Rewatches (an exact number); columns that can't be coloured (Image, IMDB, IMDb score, #) aren't offered. The switch on the Rules bar turns table colouring on or off; tap a rule's colour dot to switch just that rule off (it is kept), duplicate it, or point at it for ▲ / ▼ to reorder (always shown on a phone); a rule's italic, underline and size apply to scores too;
- Score: pill, coloured text or plain, display format (
9.5, 9.50, ★★★★½ or ), score text size and score pill size;
☁️ Saving, sync and safety
- Two tabs open: if MEDIA HUB is open in another tab too, a banner says so (both tabs write the same local library, so edit in only one). When the other tab saves the category you are looking at, the banner says it changed and offers Reload to show the latest version. A change to any other category is picked up by itself, so when you switch to it you see the other tab's edits and your next edit builds on them; only if this tab still has a write of its own pending for that category does it show the banner with Reload when you open it.
- Local first: your library is kept in the browser, so the app works offline, and edits are saved locally as you type. Each category is stored on its own, so an edit writes only the category it changed. If the browser's storage doesn't answer at a start (a slow phone, a storage error), the app says so and writes nothing over the stored library in that session: reload the page and everything is there. Without a cloud there is nothing else to save: no unsaved dot, no "save first?" questions when you switch category, and no browser warning when you close the page.
- Unsaved changes in another category: with a cloud, the tab of a category that has changes not saved yet (after an import, a TMDB sync that finished after you switched, or a kept DISCARD) shows a small dot; the category on screen has its dot on the save button.
- Only data counts as unsaved data: saving Customization (look, columns, rules) never marks your list as edited; it only syncs the settings with the cloud. Saving just a new TMDB or OMDb key in Settings keeps your unsaved edits; you're asked first only when you switch to another cloud (URL or password).
- Instant categories: a category you have opened before on this device appears at once from the local copy, while the cloud is checked in the background. If the cloud copy changed and the table updates while you are typing in a cell, what you typed counts as an edit made here, so you're asked which version to keep; a dialog that was open (delete, note, link) never acts on a different title: if its title is no longer in the list, nothing is changed and a message says so. The same goes for a row button pressed while the table changes (for example a long press on Rewatches + on the phone). A fingerprint of the sheet tells whether it changed: if nothing changed, nothing happens; if it was saved from another device, the table updates by itself ("Updated from the cloud"); if you also have unsaved edits here, you're asked which version to keep. Only a category never opened on the device waits for the cloud.
- Unsaved edits are never lost: if you close the app before saving (or edit offline), your changes are still there next time. When the cloud copy didn't change in the meantime they are simply kept, with the unsaved dot on; if it did change, you're asked which version to keep. Saving without a connection says so plainly (nothing was saved, your changes are kept).
🚀 Getting started
- Download the latest
MEDIAHUB_DD_MM_YYYY Vx.y.html from this repository and open it in any modern browser. You can use it locally right away.
- Connect Google Sheets (optional, needed for the cloud):
- Create a Google Sheet, then open Extensions → Apps Script.
- Open
script.google.com+HELP for MediaHub CONFIGURATION.txt. It starts with a step-by-step setup guide (cloud, TMDB, optional OMDb, updating the script, controls); paste everything from the XXXXXXXXX----(PROVIDED CODE)----XXXXXXXXX line down into Code.gs.
- Set your password on the
ACCESS_KEY line, or add an ACCESS_KEY entry under Project Settings → Script Properties.
- Deploy → New deployment → Web app: Execute as: Me, Who has access: Anyone. Copy the web-app URL.
- In MEDIA HUB, open Settings, paste the URL and your password, then tap the 🔌 button to test the connection (on a brand-new spreadsheet it says the category isn't there yet: the first save creates it; a script older than v4 is flagged right there, so you update it before your first save; the editor's address or a /dev link gets a hint to copy the Web app URL ending in /exec).
- Add a TMDB key in Settings to enable auto-fill, sync, Radar and the TMDB repairs in the Clean Report (the Free key for TMDB link next to it opens the TMDB page where you get one). If TMDB rejects the key, the message says so.
- Optional: add an OMDb key for IMDb scores in the IMDB button (⋮ table menu → Sync external score).
Help: the HELP button in Settings opens this setup guide (the raw script.google.com+HELP for MediaHub CONFIGURATION.txt).
Updating the backend: after changing the script, use Deploy → Manage deployments → ✏️ → Version: New version → Deploy. The URL stays the same. The app needs the v4 script: with an older one it does not save and asks you to update it.
📱 Android app (APK)
MEDIAHUB_DD_MM_YYYY Vx.y.apk is the same app for Android 7 or newer. The HTML file of that version is inside it, so it needs no hosting.
- Download the
.apk on the phone and open it. Android asks once to allow installing apps from the browser or file manager you opened it with. Play Protect may warn that the app is unknown (it doesn't come from the Play Store): choose Install anyway.
- The app starts with an empty list. Open Settings, enter the script URL and your password, and your categories and the TMDB / OMDb keys load from the Google Sheet (or import a
.json backup).
- Export saves the
.json backup and the .csv files to Downloads/MediaHub (Android 7–9 asks where). Import opens the phone's file picker.
- IMDb, TMDB, the spreadsheet and Help open in the browser. The phone's Back key closes the window or menu that is open, like Esc.
- A newer APK may need the old app uninstalled first. Save to the cloud before, and your titles come back from the sheet.
⌨️ Keyboard shortcuts
| Keys | Action |
|---|
/ | Focus the search bar |
Shift + A | Add a new title (the cursor is in the title; Tab to the score, Enter to add; Ctrl/Cmd + Z right after takes it back) |
Ctrl/Cmd + S | Save to the cloud |
Ctrl/Cmd + Z | Undo |
Ctrl/Cmd + Y or Ctrl/Cmd + Shift + Z | Redo |
Esc | Close a window, clear the search, or cancel the edit of a cell |
↑ ↓ Enter | Move to the previous or next row while editing |
← → | Move to the previous or next cell |
Shift + ↑/↓ | Move the current row up or down (among titles with the same score) |
🧩 Under the hood
- A single HTML file with vanilla JavaScript: no framework and no build step.
- Precompiled Tailwind utilities plus custom CSS. The Inter font loads without blocking the page.
- Font Awesome icons are built into the file (only the ones the app uses), so they show at once and work offline, with nothing to download.
- Modern browser features: native
<dialog> windows, Intl.Collator sorting, AbortSignal timeouts, IndexedDB storage, and lazy rendering of large lists.
- Kept light: opening a window never redraws the table behind it, animations run on the compositor, so an open window uses almost no CPU, and search remembers the normalised text of every cell.
- Backend: Google Apps Script on your own Google account. Data: your Google Sheet. Metadata: TMDB.
🏷️ Versions
Each release is a single file named MEDIAHUB_DD_MM_YYYY Vx.y.html, with the release date and a version number that goes up by 0.1 with every update. The newest file in the repository is always the current version. The Android app has the same name with .apk, and its version is the one of the HTML file inside it.
MEDIA HUB is a personal project and isn't affiliated with TMDB or IMDb. Movie and TV metadata and images are provided by TMDB.
