Discussion: Flipnote Player v4

[jaames]

I think it's about time I took another pass at this - if anyone has any suggestions to add, please don't hesitate to reach out!

• Improved audio:
  • ~~Redo flipnote.js audio implementation to use the web audio API instead of separate WAV audio elements for each track. This would require implementing audio resampling (mostly for Safari) and sample mixing, which I'm not really familiar with at all, but I can probably figure it out~~ Implemented in flipnote.js!
  • We recently figured out what's causing messed up audio in DSi Gallery KWZs, but I'd need to figure out how to identify borked Flipnotes and implement a separate step for handling their audio
  • ~~SimonTime recently figured out how to achieve hardware-accurate DSi audio output, it would be cool to implement this too~~ Implemented in flipnote.js!
• Improved export functionality:
  • Batch export to a ZIP file!!
  • Aspect ratio options for GIF/MP4/image export (adds padding on each side of the note)
  • Remove MP4 speed presets, slow is... too slow, and the output size difference is minimal anyway
  • Upgrade MP4 video converter to ffmpeg.wasm (see #15)
  • WAV audio export
• Code improvements:
  • Rewrite in Typescript
  • Try out linaria or css modules because I don't like CSS in JS
  • Move to react context API
• UI improvements:
  • Full redesign, I think the general layout is okay but it looks a bit bland. Would be cool to incorporate elements from my Fakenote Studio project
  • Expanded metadata view (see #14)
  • Sorting options for browsing through Flipnotes (username sort, order by date, size, etc)
  • Debug metadata view? (frame tables, offset printouts, etc)
  • Expand "Flipnote File Location" popup with some graphics showing how to put Flipnotes on an SD card, how to eject it, etc
  • Add a little dialog box explaining Flipnote Studio, a general gist of how the player works, and a changelog
  • Add support for UI translations
  • More transitions! More flair!
• Misc:
  • Try to auto-crop and apply special audio processing for DSi gallery notes
  • Feature detection to see whether the user can use all the features
  • Allow sample Flipnotes to be downloaded in their original formats
  • Add Aardman Flipnotes as samples, since they're a famous studio and that artwork was essentially lost in its original form
  • ~~Get default layer visibility state from Flipnote metadata (flipnote.js)~~ done
  • Assess Flipnote data validity, but don't block playback of invalid Flipnotes altogether (flipnote.js)
  • Move external service (Kaeru, IPG, Sudomemo) API calls to backend
  • Buy a domain name, move away from rakujira.jp
  • Try out an undither filter like on https://bisqwit.iki.fi/story/howto/dither/jy/

[thejsa]

Moving the actual player logic into an embeddable player component for external services would be amazing to have :)

[jaames]

@thejsa sure, I was planning to add a webcomponent wrapper to flipnote.js for that, so embedding a flipnote player would be as simple as dropping in a script and a <flipnote-player src="./whatever.ppm"/> tag somewhere

It'd have similar attributes and API to the HMTL5

[redegg89]

Converting from one animation format to the other would be nice

I have some PPMs I'd like to play on actual hardware, but I only have my 3DS from 2015 and I don't feel comfortable modding it, considering how old it is.

[jaames]

I'm not going to be tackling encoding to either animation formats im afraid

[redegg89]

I understand. It also hasn't been done before (to my knowledge, except for the dsi library on the 3ds), so it's not even like you would have anything to base it off of

[nikku4211]

Why would you want to add padding on each side of the note? That just causes windowboxing in certain monitors with different ratios in fullscreen. I think a more useful option would be to crop the Flipnote to a custom setting, so that you can get rid of any unused space.

Also, even if the space saving of the 'slow' speed preset is negligible for most people, I found it pretty useful in getting the most out of the H.264 format. It would be awesome if there was also support for VP9 and Opus under the WebM container. VP9 and Opus have better quality at the same bitrate than H.264 and AAC, even if again, most people have huge enough SSDs to not care at all about optimising file size.

[jaames]

Why would you want to add padding on each side of the note?

Padding with the Flipnote's paper color would be an easy way to make an exported Flipnote look more appealing on places like YouTube where the video player has a wider aspect ratio. I've had a few people ask if if there's a way to "remove the black bars", so I assume that's what they mean.

I think a more useful option would be to crop the Flipnote to a custom setting

I was planning that too, just guess I didn't mention it here.

Also, even if the space saving of the 'slow' speed preset is negligible for most people

I don't think 99% of users will care? This tool isn't explicitly geared towards techies, and I'd rather keep options to a minimum to avoid being cluttered and confusing for the majority of people.

It would be awesome if there was also support for VP9 and Opus under the WebM container

See above.

[nikku4211]

Why would you want to add padding on each side of the note?

Padding with the Flipnote's paper color would be an easy way to make an exported Flipnote look more appealing on places like YouTube where the video player has a wider aspect ratio. I've had a few people ask if if there's a way to "remove the black bars", so I assume that's what they mean.

Actually, YouTube's video player changes to fit a video's aspect ratio, and it has done so since mid-2018. If you've seen any videos that still have black bars, it's because they have black bars actually baked into the video data itself.

However, most people do use 16:9 screens, and it'd make sense to do this when you're putting it in a video that's already 16:9.