search

frankborden / slippilab

Watch Slippi replays in the browser
https://slippilab.com
MIT License
77 stars 15 forks source link

URL Parameter File Loading #2

Closed NeilHarbin0 closed 2 years ago

NeilHarbin0 commented 2 years ago

If the website had some kind of support for placing a URL to a target .slp file to open, anyone who hosts .slp files could create hyperlinks for easy file previewing.

I am not a web dev so sorry if this is incorrect, but I assume the URL would look something like:

https://www.slippilab.com/?FileURL=https%3A%2F%2Fstorage.googleapis.com%2Fslippi.appspot.com%2Freplays%2F114117%2FDay%25203-Game_20210718T094500.slp

So slippi.gg would be able to have a button for like "Preview in slippilab", or discord servers could have bots that could grab their users .slp uploads and make a slippilab link for them.

Might also want parameters for start/end times to preview like a short clip.

frankborden commented 2 years ago

Thanks for the idea. I'll have to see about the right way to do it, but there shouldn't be any technical problems in the way.

frankborden commented 2 years ago

URL loading added using query param "replayUrl". Your example is at: https://www.slippilab.com/?replayUrl=https%3A%2F%2Fstorage.googleapis.com%2Fslippi.appspot.com%2Freplays%2F114117%2FDay%25203-Game_20210718T094500.slp

start/end will have to come later.

NeilHarbin0 commented 2 years ago

Nice! It seems to work when I try with slippi.gg files.

It does not seem to work with discord attachments. The file name does not come up, and the interface doesn't change from "Waiting for game..."

//Discord attachment URL https://cdn.discordapp.com/attachments/778662551151050784/944767221132050452/Game_20220107T235612.slp //Encoded for slippilab https://www.slippilab.com/?replayUrl=https%3A%2F%2Fcdn.discordapp.com%2Fattachments%2F778662551151050784%2F944763144406986812%2FGame_20220107T235612.slp

Discord attachments are public, so I wouldn't think there shouldn't be any issue accessing the files. I can also open this file fine with the normal "Open File" button.

frankborden commented 2 years ago

Sorry, this looks like it's blocked on the Discord-side. CORS is a browser security feature that by default prevents my domain slippilab.com from fetching from other domains like cdn.discordapp.com unless they set the response header access-control-allow-origin to include my domain or a * wildcard. Manually navigating to the .slp url or clicking a link works fine because it is not subject to CORS, only(?) javascript code. The official Slippi site sets this header on it's slp files, probably because the data lives in storage.googleapis.com/slippi.appspot.com and they want to use it on the slippi.gg domain. Any particular .slp host site could set this header to give slippilab.com access to fetch their files.

https://developer.mozilla.org/en-US/docs/Web/HTTP/CORS

NeilHarbin0 commented 2 years ago

That's unfortunate. I tried to use normal publicly shared google drive as well but it looks like that must not provide the header either. Disabling CORS in browser also didn't work fully.

Still great to have this at least for slippi.gg files. Thank you very much for adding it.

frankborden commented 2 years ago

I have added an upload feature so you can share a game via slippilab URL. Ex: https://www.slippilab.com/sample You can also add a # to start at a given frame. Ex: https://www.slippilab.com/sample#888

Hopefully this will cover the cases you had in mind.

NeilHarbin0 commented 2 years ago

Thank you. That is very cool. I might be able to make something that downloads the discord attachment, then uploads them to your site to get the new url, but I wouldn't want to end up taking up more and more space on wherever you are keeping them over time. Do you automatically delete the files after some time?

frankborden commented 2 years ago

It will depend on how much it will end up costing, but for now I don't have specific plans to delete files. You can set up your own hosting with amazon S3 or something and enable CORS for slippilab if you want file life guarantees or controls, then your bot could upload to your cloud and spit back a slippilab link with ?replayUrl= like before. I wouldn't want someone sending up their whole archives, but I want to support as much single uploads as I can. There is no Upload API to talk to, just a button on the website. Maybe I will look into that some day. I used to have a feature for locally rendering out ~30 seconds of a replay into a .gif the user downloads. But it didn't seem like .gif format supports smooth 60fps (could be wrong) and I haven't investigated other formats yet that discord knows how to embed.