-
-
Notifications
You must be signed in to change notification settings - Fork 93
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Embedded js player #1145
Comments
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. |
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? |
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:
Soundcloud has an iframe with 100% width: |
Ok, let's try #145 again.
This is how I think it makes sense to approach:
1. Requirements gathering
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?
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!
The text was updated successfully, but these errors were encountered: