Embedded js player

[sudara]

Ok, let's try #145 again.

This is how I think it makes sense to approach:

1. Requirements gathering

• [ ] Catch up on what the state of embedded players is.
• [ ] Design: Do we need to do account for anything special for card players for twitter
• [ ] html/js: Do we need to do account for anything special for card players for twitter?
• [ ] Are we aiming for a certain gzipped size?

2. Nail down scope

I assume we want a single track player and a playlist player. Let's aim for one solid responsive version of each of these vs. trying to cook up multiple flavors.

We probably want light and dark options that resemble alonetone.

What other features are mandatory? Alonetone logo and link back to the artist's profile on alonetone?

• [ ] artist name
• [ ] Playlist name
• [ ] track number
• [ ] track title
• [ ] track length
• [ ] play/pause
• [ ] progress bar
• [ ] vertical scrollbar for playlist

3. Design.

Our figma file might be a bit of a mess, but it's probably worth poking around if we want to keep some visual similarity to the main site.

4. Implementation

Implement with stitches. I'd like to have the implementation as modern/dependency free as possible and ideally keep webpack and friends out of the build pipeline.

Also, stitches probably needs updating. Fiddling with CI is likely to be a bit annoying, I can help with that.

Happy for any help on any of the items!

[sudara]

Bandcamp looks like this:

I think we'll have to do a preview like this, but maybe light/dark are the only customizable options to start and we can iterate from there.

Let's not specify the embed size. Seems ideal to responsively fill any container the user puts it into (?).

Prev/next buttons are redundant (easier/bigger target to actually click/touch on the next track). The play/pause button should be next to the seekbar since those are all "playback controls" — it looks strange and out of place in the above screenshot.

[jlmitch5]

Catch up on what the state of embedded players is. Design: Do we need to do account for anything special for card players for twitter html/js: Do we need to do account for anything special for card players for twitter? Are we aiming for a certain gzipped size?

Finding this stuff is super hard to google about, because there's so much about setting up embeds for $existingService, rather than creating an embed for a new thing, hah.

From what I can tell, it's basically just a web page that is a determinstic size which you then put in an iframe...so the embed would basically be putting a tiny version of an alonetone site page on whatever site it is embedded on.

In terms of responsiveness, I'm pretty sure there are tricks around having to set a static width and height for the iframe and rather have the container take up the width of the child (I know I've done this in the past for responsive youtube videos etc.), but I believe that may involve changing the display type/positioning on the iframe element or kind of "hacking" that behavior where the embed will live...I don't know of a way to "supply" the embed in a way that is responsive without requiring the user add a css hack for the iframe element. But may totally be wrong. Ir does seem like from the screenshot above, bandcamp are setting things to be static, which I would guess they wouldn't do unless they had to, so maybe that's a good place to start. But who knows!

I have not looked into the twitter stuff yet. It seems like a lot of services have some logic to auto-embed based on urls from services they know (youtube, soundcloud, bandcamp, etc.) I think discourse refers to this as "oneboxing", but I couldn't find too much about it. I have no idea if there is a way to "get on the list" so to speak.

what I was thinking my first thing to try is make a page called

http://127.0.0.1:3000/hawkhill/tracks/killer-queen/embed which basically takes the layout from the standard track detail and compacts the core info into a block that I then could try iframe-ing in a local html file just to get a super basic mvp up.

Then, we could rope Hannes (papernoise from lines) in to help us tweak and figure out what we actually want it to look like?

[sudara]

takes the layout from the standard track detail and compacts the core info into a block that I then could try iframe-ing in a local html file just to get a super basic mvp up. Then, we could rope Hannes (papernoise from lines) in to help us tweak and figure out what we actually want it to look like?

Makes sense to do a fun test like that first!

"For realisies" (er, production), we can do fresh html/js/css, and like you said, drop into figma, ask Hannes, etc.

More info on twitter cards:

https://developer.twitter.com/en/docs/twitter-for-websites/cards/overview/player-card

Looks like it'll involve adding some meta tags to the track / playlist pages, including one that points to the embedded player.

They mention:

Build your HTML page used in the iFrame to be responsive, ensuring the video content fills the full width of any display area provided, across all clients.

Soundcloud has an iframe with 100% width: