Create a Web Interface

[CollinHeist]

This will be a pretty huge endeavor, but ideally TCM should move away from YAML files and command-line scripts and be interacted with via a web UI/interface, like all the -arr apps. It's derivative, but I think the Sonarr interface is good inspiration for a general layout.

I think the server-side API should using FastAPI to handle the requests and HTML content delivery.

Outstanding Tasks

• [x] Implement light/dark mode
• [x] Implement Syncing
  • [x] Run these on automatic schedule
  • [x] Allow user to adjust Sync frequency
    • [x] From the API
    • [x] From the UI
• [x] Implement Templates
  • [x] Allow creation/edit/deletion from API
  • [x] Allow creation/edit/deletion from UI
  • [x] Add image source priority to Templates (decided this is not necessary and adds needless complication)
  • [x] Add Filters to Templates (#212)
  • [x] Allow Series and Episodes to have multiple Templates
• [x] Implement Custom Fonts
• [x] Implement per-Episode toggles/overrides
  • [x] Allow user to create/edit/add font and other card-based customization options from the API and UI
  • [x] Allow user to create/edit/add extras from the API
  • [x] Allow user to create/edit/add extras from the UI
• [x] Implement translations
  • [x] Add Translations to Templates and Series models
  • [x] Utilize translated titles when indicated as preferred_title
  • [x] Allow Translations to be added/edited via the API
  • [x] Allow Translations to be added/edited via the UI
• [x] Implement Tautulli integration
  • [x] Utilize "Webhook" API triggers rather than file monitoring
  • [x] Add automatic setup to Connections page
• [x] Periodically schedule major tasks
  • [x] Episode data refreshing (new episodes, updated titles, etc.)
  • [x] Download source images
  • [x] Card creation
  • [x] Media server loading
  • [x] Title translation
  • [x] Series logo downloading
  • [x] Sync syncing
  • [x] Refresh remote (user) card-types
  • [x] Check for new version of TCM
• [x] Implement YAML importing functionality
  • [x] Import Fonts
  • [x] Import Templates
  • [x] Import Series
    • [x] Parse Template variables in Series imports
  • [x] Import settings / preferences
  • [x] Import Syncs
  • [x] Maybe import Episode data, although this would be really niche Too niche
  • [x] Create import page within the UI
• [x] Create missing asset page / report
• [x] Allow series to be "unmonitored" in which they are skipped when executing scheduled all-series functions
• [x] Add remote card type dropdown toggles to Settings page
• [x] Make all card type selectors searchable
• [ ] Update user card types to work with UI
  • [x] Create JSON file on the repository that can be queried to populate the UI
  • [x] Ask all user card creators to submit updated descriptions for their types to add to the JSON file. Give them an opportunity to rename the cards as well
  • [ ] Merge some of Wdvh's cards, as there are multiple that are nearly identical and can easily by combined
  • [x] Allow them to be used within TCM
  • [x] Create Pydantic models for all card types
• [x] Add toggle for enabling/disabling TMDb logo downloading
• [x] Add page to showcase the different card types and their supported customization options (extras)
• [ ] Add local-storage filter for series on shown main page
• [x] Create alternate views (table view?) for series on main page Putting on hold until I can think of a good layout
• [x] Implement SQLAlchemy database migrations with Alembic
• [x] Add source file display to Series HTML page
  • [x] Show present/missing source images (including dimensions, file size, etc.)
  • [x] Allow users to manually query for source images on a per-Episode basic (via UI)
• [x] Implement builtin source image selection/overwriting
  • [x] Via manual file upload
  • [x] Via manual URL specification
  • [x] Via TMDb browser
• [x] Add change log page/section (currently only showing "new release is available" message)
• [x] Add functionality to import existing cards for a Series
• [x] Create Pydantic models for all Card types to perform validation

• [x] Add translated cardinal/ordinal number functionality

  Low Priority Tasks

• [ ] Add functionality to reset / unload title cards
• [x] Add authentication
• [ ] Implement mini maker functionality (not high priority)
• [x] Write creation as EXIF tag? https://stackoverflow.com/questions/10833928/custom-exif-tags
• [x] Double check that /api URL’s are acceptable in Sonarr API forms
• [x] Fix background of main page not covering entire viewport
• [ ] Implement API keys ref
• [ ] Rewrite front end to use React + NextUI
  • [ ] https://nextui.org/docs/guide/installation

  • [ ] https://www.kirupa.com/react/creating_single_page_app_react_using_react_router.htm

    Documentation tasks should be tracked in #339

[CollinHeist]

I think a toggleable dark/light mode could probably be accomplished like so:

$('.ui').toggleClass('inverted', true);  // Dark mode
$('.ui').toggleClass('inverted', false); // Light mode

Although any CSS selectors using the class might need to be revised, along with any hard-coded class name assignment in JS (e.g. elem.className = "...")

[CollinHeist]

Task scheduling might be doable with BackgroundTasks objects, but this is limited in terms of periodic scheduling and task monitoring.

The APScheduler module looks like a good solution; here is a good example of the basic object utilization with scheduling API endpoints.

[CollinHeist]

Looks like APScheduler will not be able to write to the database at all, which is problematic. The problem is that SQL Alchemy is not multi thread/process safe; leading to a ton of issues when scheduling writes in separate processes.

Might change the SQL backend, or find a different solution, but for now starlette BackgroundTasks will have to do for background DB writes.

[CollinHeist]

Created the https://github.com/CollinHeist/TitleCardMaker-CardTypes/tree/web-ui branch on the TitleCardMaker-CardTypes repository; and added a JSON file in 563e0d1e4e80e0d9fda34daf32352b1aaed6a6d2 which defines a JSON file containing card details for all user-created cards. This should be parsed on the webpage.

---

I'll need to reach out to the card creators and get their feedback on the card/extra descriptions, as well as the example images they want used.

---

I think users should be able to toggle which card types they do/do not want shown in card type dropdowns. This should be added to the Settings page. Card type dropdowns should also be searchable.

[CollinHeist]

I think users should also be able to turn off logo downloading within the TMDb settings

[CollinHeist]

[CollinHeist]

https://github.com/CollinHeist/TitleCardMaker/assets/17693271/1b39ea68-bfd3-41bc-99ce-bd7d6af01415

[CollinHeist]

[CollinHeist]

[CollinHeist]