search

mayeaux / nodetube

Open-source YouTube alternative that offers video, audio and image uploads, livestreaming and built-in monetization
MIT License
2.33k stars 260 forks source link

add cover image for audio on the player page #322

Open mayeaux opened 4 years ago

mayeaux commented 4 years ago

You could also drop the audio.svg file above it, will fix the issue of the speed selector being inaccesible to audio files

BassOfBass commented 3 years ago

Or just go hacky way and use <video> for audio instead. <video> tag has poster attribute and can accept audio <source> as a child element.

mayeaux commented 3 years ago

Not a bad idea at all. Are there any downsides to that you can think of?

BassOfBass commented 3 years ago

Depends on what range of browsers you are targeting, so there are probably going to be problems with Safari and IE.

Borewit commented 3 years ago

Would music-metadata be useful to extract covers from audio files? It can be used to get the duration as well.

mayeaux commented 3 years ago

Depends on what range of browsers you are targeting, so there are probably going to be problems with Safari and IE.

That's fine, it's probably the cleanest/nicest solution so I'd support it even if for some browsers it doesn't work. Is there a caniuse link I can check to see the browser support?

BassOfBass commented 3 years ago

@mayeaux there is MDN article. Although after thinking about it I'd advice against going that way and instead use plain old wrappers. Something like this:

div.audioplayer
  div.picturewrapper
    a(href="")
      picture
        img(srcset="", src="", width="", height="", alt="")
  div.audiowrapper
    //- `<audio> doesn't support subtitles`
    video(controls)
      each source of sources
        source(src="", type="audio/*")
      each track of tracks
        track(kind="", label="", src="")
      p Your browser doesn't support HTML5 media. Here is a #[a(href="") link to the audio] instead.
  div.audiocontrols
  div.transcription

Will require some changes to the model for full support.

BassOfBass commented 3 years ago

Since media.pug is a gargantuan mess, I've opted for small changes: https://github.com/mayeaux/nodetube/pull/395 @mayeaux could you write a file in docs folder explaining which files the upload info goes through from hitting upload button up to landing in the media.pug template? IMO having a single template for video/audio/pictures was a mistake, way too many conditionals and path concatenations to keep track of.