developerforce / gif-booth Goto Github PK

When at /home allow users to click GIF, which populates the url with query params "?gif_id={GIF_ID}"

It would be cool to update the main grid when a user uploads a new GIF, we can use SSE to submit the event to it.

I added a thumbs up (👍 ) emoji and my GIF looks like this

Looks like some emojis work:

@justjenu and I both hit this error. I got it in Firefox. She got it in Chrome.

It happened as both of us were inputting text in the text box after recording a GIF.

I see this in the Heroku applications logs. Unfortunately I wasn't able to grab any more log lines:

2020-09-02T00:58:27.444311+00:00 app[web.1]: [0] an error happened: ffmpeg exited with code 1: Error while opening decoder for input stream #0:0 : Resource temporarily unavailable
2020-09-02T00:58:27.444323+00:00 app[web.1]: [0] 
2020-09-02T00:58:27.565971+00:00 heroku[router]: at=info method=POST path="/video2gif" host=cascadiajs-gif-booth.herokuapp.com request_id=a3485d88-9584-4d24-8c76-7e9f9759cb01 fwd="75.172.126.59" dyno=web.1 connect=0ms service=1570ms status=200 bytes=282 protocol=https
2020-09-02T00:58:27.567731+00:00 heroku[router]: at=info method=POST path="/video2gif" host=cascadiajs-gif-booth.herokuapp.com request_id=a0ff769a-70c5-4081-9e07-c2097dca7fe5 fwd="75.172.126.59" dyno=web.1 connect=0ms service=950ms status=200 bytes=288 protocol=https
2020-09-02T00:58:27.865231+00:00 heroku[router]: at=info method=POST path="/video2gif" host=cascadiajs-gif-booth.herokuapp.com request_id=184fd8ce-3418-401b-a14c-fcd2f86bb8e1 fwd="75.172.126.59" dyno=web.1 connect=0ms service=1865ms status=200 bytes=282 protocol=https
2020-09-02T00:58:27.886270+00:00 heroku[router]: at=info method=POST path="/video2gif" host=cascadiajs-gif-booth.herokuapp.com request_id=f29f5deb-f43c-4692-958b-c35e0dd2b129 fwd="75.172.126.59" dyno=web.1 connect=0ms service=1693ms status=200 bytes=286 protocol=https
2020-09-02T00:58:27.894345+00:00 heroku[router]: at=info method=POST path="/video2gif" host=cascadiajs-gif-booth.herokuapp.com request_id=2e78d76a-6b19-4cba-83a8-ddf058c7912b fwd="75.172.126.59" dyno=web.1 connect=1ms service=1739ms status=200 bytes=284 protocol=https
2020-09-02T00:58:27.895122+00:00 heroku[router]: at=info method=POST path="/video2gif" host=cascadiajs-gif-booth.herokuapp.com request_id=50c30fea-c0f9-48ef-a067-ca460a3f397f fwd="75.172.126.59" dyno=web.1 connect=0ms service=1228ms status=200 bytes=289 protocol=https
2020-09-02T00:58:27.956680+00:00 heroku[router]: at=info method=POST path="/video2gif" host=cascadiajs-gif-booth.herokuapp.com request_id=200c25f5-3e2e-459c-a5c5-398dee1e6f5b fwd="75.172.126.59" dyno=web.1 connect=2ms service=911ms status=200 bytes=290 protocol=https
2020-09-02T00:58:28.061595+00:00 heroku[router]: at=info method=POST path="/video2gif" host=cascadiajs-gif-booth.herokuapp.com request_id=456faed0-e19f-442a-a91d-b962807d4841 fwd="75.172.126.59" dyno=web.1 connect=0ms service=1024ms status=200 bytes=291 protocol=https

We need:

• a page for users to view, download, and share the generated group photo (show a <Warning /> message when it isn't ready yet).
• a simple alert at /home to show users when the group photo is ready.

It would be nice for the photo to be zoomable like with: https://openseadragon.github.io/

I typed this as my caption and got the below GIF "chrome desktop (4:17pm build)"

Looks like the colon broke it.

• Normalize endpoint names
• Add better error handling

Currently we are outputting a static JPEG.

This task is related to potentially implementing a more efficient group photo processor: #27

The sharp image processing library we are currently using supports stitching GIFs together, but I could not get it to work -- it may still be possible with this library.

• Add a Powered by Fostive linking to the GitHub repo
• Change colors to Fostive brand
• Remove other event logos and branding
• Add documentation on How to customize the gif-booth app

Bucketeer does not create or populate this environment variable, and its value can be constructed using the BUCKETEER_BUCKET_NAME or AWS_BUCKET_NAME environment variable.

So config.js can probably be changed like this:

AWS_BUCKET_URL: `https://${process.env.BUCKETEER_BUCKET_NAME || process.env.AWS_BUCKET_NAME}.s3.amazonaws.com`

Currently, when trying to create a new GIF without a camera the application crashes.

The current implementation is very slow (sorry lol). For 2000 images, processing can take more than 2 minutes.

We should look into adding a more efficient means of making the group photo.

A bonus would be completing this ticket as well in the process: #28

Maybe there is a way to achieve with the current image processing library (https://sharp.pixelplumbing.com/), but we should look into other libraries if needed.

• Change any occurrences of Make GIF (old app name) to GIF Booth (new app name)
• Remove use of React favicon

I'm getting an error about the uploads directory missing. After doing some digging it looks like this is happening because there is a gitignore rule for all files in the uploads directory and git doesn't allow empty folder so this folder is not getting created for new forks.

The readme mentions a URL to moderate/delete an image but I'm not finding any further documentation on that URL. Any help on that would be most appreciated. Thanks!

Give visitors a better idea of what it is and how it works.

When a user uploads a GIF instead of recording one, the group photo creation fails silently.

Steps to reproduce

Upload the GIF below to a deploy and also record a GIF the regular way. Then create a group photo with curl -X POST http://localhost:3001/createGroupPhoto. See error in log from that POST request. It will look something like this. Unfortunately I cannot figure out how to get a stack trace, but I believe the error comes from these lines of code -- specifically the composite() function call.

[Error: VipsImage: memory area too small --- should be 480000 bytes, you passed 360000
]

We should set a reasonable file size limit to the user uploaded GIF (via incompatible browser path)

We should let users select which camera they are going to use for recording their GIF. A default <select> directly below the video frame would be fine.

related to #17

This may be a lot of work and/or a big rewrite. If you're interested in working on this, please share your ideas before you get too deep into code.

We need to implement CSS Variables, (even if it means moving to scss, etc) so brands can control basic coloring of the application from the top level.