Anime Subtitle Player

Learn Japanese through Anime

💬 About The Project

• Anime Subtitle Player is a video player that help people to learn Japanese through watching Anime with Japanese subtitle.

⏳ Timeline

• ✅ I started this project on Aug 6, 2023 because it's a bit annoying to use MKV player with a tab aside (it's make video too small 😠). Also, i want to make it easier for me to just hover directly to the subtitle in the video and get the definition of the word.

• ❌ I am not going to finish this project at a specific time cause i'm going to use this everyday and do more feature when i have time to make it better 😁.

📺 Preview

• In video subtitle

• Under video subtitle

• Beside video subtitle

• Hover translation dictionary

• Japanese's word dictionary (support Vietnamese and English)

• Kanji dictionary (support Vietnamese and English)

• Subtitle Position setting

• Keyboard shortcut

• Subtitle setting

• Subtitle's Synchronization setting

📚 TODO

1. Subtitle

• Supporting .ass subtitle file (handle multiple language)
• Auto translation (for no subtitle case)
• Silence + Music OP and ED identicator
• Font optimization using next/font/google, google font with tailwind

2. Dicitonaries + Translation

• Input loading state + icon
• If not have definiton, ex: だから　さっき妖夢化した秋人君は => searching for "name" definition
• Immersion Kit API for anime sentence example
• Add card to Anki with exact audio time and image

3. Video

• Add dowload screenshot with sub or not sub (using imageNext smth i forgot 😭)
• playerIO player
• Support video link

4. UI + main page

• Add "sample" video and subtitle for user
• Website name
• Store anime name and watch progress to ask next time if user watch same video
• Website main page with instruction + better README
• Add login + save word to dictionary with audio + image screenshot
• Export to anki word have saved

5. Settings

• Add image bg for settings subtitle background opacity
• Save user's settting in local storage
• Changin subtitle color and text shadow color

✅ Finished Task

• Handle subtitle logic
  • Remove subtitle block when there's no dialogue
  • Hover then pause
• Add setting gears on top right screen as modal pop up
• Making subtitle in 3 mode
  • On the right of video
  • Under video
  • In video
• Fix click at any subtitle in beside mode
• Add ui when there's no sub
• Change ion-icon to react icon
• Add ui when there's no video
• Subtitle being "lag" when forward video at specific time
• Change subtitle font (Netflix-San, Yu-Gothic, Zen-Maru-Gothic)
• Change font's weight (bold, thin);
• Preview font option in settings
• Change Font size
• Adjust sub bg, font size, edit mode, sync slow fast, subtitle position (3 mode)
• Subtitle Background
• Toggle subtitle
• Change js file to module and export
• Synchrnization settings
• Hover subtitle pause video
  • In video
  • Under video
  • Beside video
• Toggle text shadow
• Adding Yu Gothic, Noto Font and MS Gothic
• Furigana for subtitle
• Fix render 2 time subtitle error
• Add Whisper Model AI to subtitle Synchronization
• Add larger screen feature like the old template + fix speed button not working + click button video stop error
• Keyboard shortcut
• keyboard shortcut UI
• Instruction at screen + bocchi loading screen
• Auto Sync subtitle with Video
• Add in video subtitle along with beside subtitle
• Add something when video haven't loaded
• Break down sentence when hover
• Storing sentence that have fetched to avoid fetching again
• Storing each word that have fetched to avoid fetching again
• "Translation" modal for each word when hovering
• Add hover translation hover for word with 'each word translation i4"
• Popup Dictionary Loading UI
• Complete popup dicitonary Body
• Add Shortcut instruction for this
• Handle in auto sync if difference video file / not have subtitle (limit button click time)
• File upload type limit (toast message)
• next and prev subtitle error when sync ealier or later
• Moving the translation feature to use everywhere on the screen too;
• Fix word form error (Kyoukai no kanata - eps 10 - 9:57)
• Multiple key click toggle translation
• Fix main state hide and show length error
• Fix can't click dicitonaries => click video instead
• Open side bar dictionary with 2 mode (use ChakraUI's drawer)
  • Vietnamese Dictionary word(Mazii)
  • English Dictionary word(Mazii)
• jaen kanji search mode
• javi kanji searhc mode