This is meant to be a super simple alternative to Plex but of course much simpler and mainly to get Hands on with Video Processing Vue and other cool stuff
npm run job -- --name jobname# For the propsToSeries concatenation job
npm run job -- --name propsToSeries --model model.json --input in.json --output out.json- Front-end: Vue.js + Vuex + Vue-Router + Bootstrap + Vue-SweetAlert-2 + Socket.io + Fontawesome
- Back-end: MySql + Node.js + Express + Socket.io + ffmpeg(for Video encoding/transcoding)
The Full Video Player (Highly changed and customized by myself + integrated into the Vue Eco System)
The Bootstrap 5 Autocomplete (Moderately changed and customized by myself + integrated into the Vue Eco System)
- Id indexing for series
- Job listings and displaying
- Job Types: previewImgs-Generation, previewImgs-Check, series-Scrape,
- if user get back to video start playing at last position
- Pregenerate the previewImgs
- add a store for all user watched episodes
- Think of an elegant way to store those kind of information
- make the debounce server side optimal for multiple clients
- display the title of the movies somewhere
- Add generate Images and parse images also for movies
- Show the current time while scrubbing through the video
- Show a back to top Button on the List page (or maybe make the navbar sticky)
- Extract the Video stuff into own component
- Add the control information modal
- Add the full series watched information dropdown
- Implement a method to un watch a specific series or season
- Implement the command manager and some basic command (session = to list current sockets, info = to show series infos and space infos, reload = to reload the series from their file)
- IMPORTANT: Finally Upgrade to TypeScript so i do not have this fucking pain in my ass!!!
- IMPORTANT: Rewrite the client (copy everything and fix errors)
- This does not get done in one day but after the browse page is finished this should be one of the bigger next steps
- Finally Upgrade the client to TypeScript so adding new features gets easier!!!
- Port vuex to pinia cause it has the better upgrade way and very good TS support
- Remove my Networking library cause it lags some stuff, and replace it with axios
- Rewrite the crawler to remove some stupid old stuff
- Implement the sharing also with movies
- Implement the sharing to include the language
- Use a vue integrated modal instead of the bootstrap javascript one (get's confused on HMR)
- For the ShareModal
- For the ControlsInformationModal
- For the RMVCModal
- For the Settings Side Drawer
- Maybe add a brightness control to the video element with CSS Property"filter: brightness(0.7);"
- Implement a job-cli system to run a pre specified job with the cli
- Change ID Job : A Job for which i can change an ID instant wihout any problems
- Obtain Side-Infos : To Obtain the series image and infos as well as start & end date
- Delete Preview Images: To Instantly delete all Preview Images
- ReThink the current series store
- Rework the whole watch page and use code splitting smart indexing and much more
- Basically rewirte the whole watch page
- Think about maybe on GET /index to not send so mch data over the wire
- Make the website more mobile accessibill
- Rework the image directory structure
- Change in the Navigation search (if you hold CTRL + Enter then open the selected series in a new tab)
- Add some more controls
- 0 - 9 for video percentage skip
- Add a nice skip animation
- . & , for 1 frame more and less
- 0 - 9 for video percentage skip
- Think about a way on how to make it work to add an intro skip button
- Show the Approx. Intro in the timeline
- Implement a Intro Skip button
- Collect the Intro Skip Informations from an External API
- Implement a native (so called todo list) to see wich series are still not ripped/downloaded/uploaded and maybe also with sorting
- Add an confirmation Dialog on Using a Todo
- Add an confirmation Dialog on Deleting a Todo
- Implement a clean entity switch even if the video is finished playing
- Update the Client Navigation Search to use native vue for better data updates
- Port the client application to vite for faster builds and better HMR
- Add a PATCH /index/ID route to update single anime informations
- Think about how to display if only movies are present for example for (Rush Hour/Star Wars)
- Add better mobile accessbillity for scrubbing
- Add Loading Indicators
- Initial Page Load
- News Form POST and GET
- Watch route
- Video Buffering
- Move "Previous & Title & Languages & Next" to its own Componen, maybe called entity infoControls cause the ent is one single video and it displays informations and controls
- Show an Image in the search bar with
<input
type="text"
class="form-control dropdown-toggle show"
placeholder="Search for a series..."
autocomplete="off"
style="width: 20rem;"
data-bs-toggle="dropdown"
aria-expanded="true" />
<img src="cover.jpg" style="width: 15%; height: auto; margin-right: 0.5rem;" />- Update the preview images to be language specific (preview images for every language an episode is in) cause if the episode is longer or shorter
- Implement the update check for EngDub Series
- Implement the update check for sto series
- Implement my own hover so when the mouse is still over, but has'nt moved since hide the menu
- Account/Authentication System Update
- Implement a password change in the settings
- Implement Email Change in the settings
- Implement IP and last Handshake logging
- Restrict accounts so they cannot trigger certain jobs / Only Show the jobs an account is permitted to execute
- Save the audio volume number in state, and maybe also in account
- Implement User Settings to toggle specific infos
- the stuff thats always hardcoded in the state
- Bring it also to the Settings Drawer
- the stuff thats always hardcoded in the state
- Update Every MicroService System to have the same Config system so it is linear throughout the entire systems
- CineFinnServer
- Scraper
- previewImageGenerator
- SubSystem
- Remove BullMQ and build my own lib using mysql i guess cause simple
- BullMQ lacks some stuff that i in this specific case need and probably would be possible to integrate but not feasable in the long term
The language Devision version This Version introduces and overwrited filename parser system and an Language Integration system
This Version introduces the RMVC (Remote Video Control) System the Upgraded Video Player (Enhanced One Screen Mouse Over) the Sharing Functionallity and the improved account settings
This Version introduces the account restriction idea although the general permission system and therefore the account restrictions and the ToDo Page and functionallity
This version should introduce the Sync System and the new HomePage
This version is more focused on ease of use and Backend Improvements with a full client rewrite in typescript with perfect type hints and the distributed Image generation System which later can lead to way more stuff done in a distributed manner
This version introduced the Sub and Main System with distributed proxied video requests so that there can be more than one server holding files but rather multiple that get arranged and aggregated together by the main system which intern can also hold files
- Add a Setting to toggle the card images (for lower bandwidth) : I Dont know how necessary this would be
- Add the series information modal : I currently have no idea where to put it cause in a modal is probably a bad idea but the button for it is there The question also is waht else to put in it since the only accesible stuff is img description title year that is basically it
- Anime Preview (10 - 15 sec.) : I currently have no idea on how to implement that in a good way what snippet of the series to use and where or how to show it
- implement a cron job which automatically checks all downloaded series for updates and writes them to a list
- A Module System to remotely enable or disable certain features for everyone or a specific user i now know that such a system is generally called feature flags
- Module: Sync System
- Module: Share Function
- Module: Todo Page
- Module: New Browse Page
- Module: Mark Season Button
- Add an Primy like sidebar with the characters and full data scraping
- Add Playlists for users e.g. (Watchlist)
- Let the user create its own playlists with names
- Add the downloader and scraping service into ext. services
- Currently Opt In Implement a way to sync watch animes smth. like SyncTube for YT or Watchtogether
- Browse Page instead of the basic list with dropdown
- Continue Watching
- Series that were watched but never finished
- Newly Added
- (Not currently possible since there is no tracking for updated series) Possible if i just trust that the server is SSOT Single Source of Trouth
- You Might Like
- For the start this can just be a simple tag ranking system no biggie
- Enjoy Again
- Series the user has almost continued or continued and possibly want to watch again
- Continue Watching
- Adaptive Bitrate Streaming and Choosable Quality (Yes i said it a pretty big deal for me to learn and wrap my head around) (maybe with a fallback to the normal streaming)
- No Pre transcoding Necessary cause it would use more space and to be honest it's just too easy to implement
- So Live Transcoding it is using ffmpeg which we already use for the image generation and later for the intro detection
- No Librarys at least for core functionality so parser or something is okay but not a lib that just does the stuff
- Intro/Outro Detection a reliable fast pipeline to process intros and outros in the episodes
- There are some libs in python that do this farely well and it would be interesting to implement those libraries into node with rest (has a bit from microservices)
- Add a Setting to toggle auto intro/outro (segment) skip
- Show an actual Skip Button and add a seperate api for storing all that shit
The commit where i just deleted all the old stuff can be found here: https://github.com/Jodu555/CineFinn/commit/18d3a4dd89e22a2b6db01bc81dd10a2e0c04b2ad