TitleCardMaker icon indicating copy to clipboard operation
TitleCardMaker copied to clipboard

Create a Web Interface

Open CollinHeist opened this issue 2 years ago • 9 comments

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 avatar Feb 20 '23 01:02 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 avatar Mar 22 '23 19:03 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 avatar Mar 30 '23 21:03 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 avatar Apr 09 '23 07:04 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 avatar Apr 12 '23 16:04 CollinHeist

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

CollinHeist avatar Apr 24 '23 16:04 CollinHeist

264538128-64d88162-08e2-4745-aed7-06e136c21b2e 265131184-13375bd9-7fba-4cf7-b446-5837e740bf6d 270040388-57f6fe01-bb14-47ae-aad0-d247903872c1 270040595-eb540414-c472-4970-82dc-9d93a6453971 268150144-8cd0c2b5-bd48-4c58-9e5b-bf1e0ebf322d

CollinHeist avatar Oct 02 '23 00:10 CollinHeist

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

CollinHeist avatar Oct 23 '23 22:10 CollinHeist

banner graph inset shape 286067627-69665175-c0b1-4efb-8f9f-bc5423a24760 287941986-8acff66c-ad5a-4698-83f1-ac50b4807cfa Mr  Robot (2015) - S04E06 add-series formula notification set shape-new shape-old

CollinHeist avatar Jan 05 '24 06:01 CollinHeist

webhook

CollinHeist avatar Aug 23 '24 20:08 CollinHeist