15% of the way (Downloading Gifs on Search)

The first part was easier and quicker than expected, but after
installing ImageMagick & ffmpeg alongside gm & fluent-mmpeg I ran into
issues.

One is that gm didn't seem to execute any commands without throwing up
random errors, while after getting ffmpeg and fluent-ffmpeg installed
node apparently couldn't find ffmpeg, even though it was made available
to all users.

Not 100% sure what the problem is at the moment + the more obscure the
topic the harder it is to find valuable & easily understandable
suggestions for how to fix some of these situations.
Now converting Gifs to MP4s w/mmpeg & imagemagick

After ironing out a couple of access issues, the current situation is
that when a user adds a gif the gif is downloaded to the server, which
then uses ImageMagick to slice the frames of the gif into individual
.png files.

Ostensibly I should then be using ffmpeg to compile the indi frames into
an MP4, but at the moment I"m literally just converting the gif into an
mp4 with ffmpeg.

However, there are some framerate issues, and the guys at Gfycat shared
the following process:

"...we first use ffmpeg to extract all frames to pngs. Then we run
imagemagick "identify" to dump all of the centisecond delays into an
array. Then we run through the array and duplicate or cut frames as
required to best fit the gif timing. Finally, we run ffmpeg to generate
the h.264 and webm files. We chose not to override ffmpeg with set
bitrates, but use constant rate factor to let it do the optimizing"

So, at the moment it looks as though I'm missing the middle step of
adding the frames to an array and doing a check & dump before sending to
mmpeg.

Nonetheless, very pleased with the progress in 2 night's work.  Once the
conversion step is all sorted, the last part is to work on a script that
will swap out the .gif url for the mp4 / webm urls, and also use the
<video> tag in html5 in order to provide fallback depending on the
browser environment.

Nice.
Now converting mp4 + webm + saving gif

Next step is to find the message, both in the browser and in the
database, and swap-out the <img tag for a <video tag that includes
autoplay & loop as default, alongside both mp4 & webm as the first
choices with a .gif file as a fallback if neither are supported.
Now saving gif into Gif collection, callback issue

At the moment I'm saving the information about the webm and mp4 files
before actually getting a confirmation back from the conversion
functions, which means that I'm saving without actually knowing if the
conversion has been successful. This could lead to all kinds of problems
and obviously isn't ideal, so I have to work on making sure that I use a
callback appropriately in order to get the order right.
Nightmare session, some progress made

Got completely stuck for some strange reasons on a bunch of little
things, spent 3.5 hours trying to wrestle with some pretty basic stuff.

Have now managed to get a prototype working for replacing out gifs with
webm & mp4 + gif fallback. Current issue is chat div scrolling. Still
haven't quite got the callback issue sorted.

Gaarrggh. Hard session for sure.
A bit more progress, although flicker on replace

jquery / DOM issue, flickering on replacement, need to look into making
a seamless transition.
Now updating msgs, saving to history

Updated msgs are now overwriting the original gif with the updated htm5
video, this function pattern can also be used to update user messages
(i.e. correct typos) in the future.
Playing around with CSS, Editing Msgs

Not too many other changes, added a class of 'visualContent' to all imgs
and videos within messages, and played around with some background
styles. Also added an edit button (currently display:none) that will
eventually be used to edit messages (and maybe delete...)
Trying to Go Live, Many Errors

A little hard not being able to test properly in the 'live' environment,
which is probably something I can do and just haven't worked out yet.
Anyway, app won't process gifs like development version, so not ready
for live deploy yet, will redeploy the current master.
Still fucked, completely hit a wall of despair

No idea how to get this shit live on the modulus server - it worked
perfectly on the localhost, but as soon as I start trying to send it
live the number of different variables just don't match up - I'm doing
something wrong and I have no idea what - the process itself is quite
simple, but I am inputting the wrong parameters at various points along
the way. At some points the gif is saved with the new filename, but it
won't convert the gif to mp4 or web. Right now I'm at the end of my
tether and just super frustrated - 2 hours fucking going around in
circles. Fuck.
Continuing to get nowhere, asking modulus

Yeah, there's like 3 points in the conversion function that are just not
working, so I need to ask around for some help with this, local machine
is fine but production environment is kicking my balls.
Now converting images on live server, modulus error

The issue was that my modulus servo was running some older software. I
asked the guys and they upgraded my servo, so ffmpeg became accessible.
Converting of images is now functioning, as is a pre-check to see if the
the gif is already downloaded. Then dynamic replacement is working.

Also: switched Giphy searches to return mp4s to the gifwindow with a
fallback gif, gif is sent to the message box for conversion. Mp4s are
playing on hover, this should reduce page load & response times
significantly.
Online user sorting added

Now the users list will show the online users at the top of the list,
and this will rearrange itself automatically so the online people are
reachable easily. In the end the sorting was quite a simple matter of
selecting the element by class, removing it and prepending it to the
users list, seems to work fine on the local machine.
Still can't quite get live format switch working

Format conversion is fine and working on the live server. However, many
times all that happens is that a blank window is sent to the client, and
only on refresh does the message appear (in mp4 format).

Still some work to do to get this done, so I've gone back to straight
gifs, although mashabout is saving them all in the background and will
attempt to swap the format if the gif has been used before. I'll see how
that goes while working out how to proceed.
Added a Load More Button to Favourites

For heavy users (myself, Herrmann, Dave) the number of favourite gifs
was into the hundreds, at which point loading up all of them at once was
putting a ridiculous drain on resources. The fix is that I load the urls
into an array, but don't append the img tag until the user has moused
over a 'load more' button - it loads 10 more gifs at a time, iterating
through the user's array of favourites, and gives the computer time to
load the gifs in smaller batches. This has already made a noticeable
difference, and is something that I will implement for all gif searches
in the future.

Second thing done today was to flip the order of the favourite gifs
around so that the most recently saved gifs show up first. This is good
for keeping the freshest gifs in the user's mind to begin with, but I
might move over to randomizing the array to make rediscovery easier.
Will see what the feedback is like.

Finally, there are a couple of things to sort out - one being that mp4
videos can't be dragged into the 'save gif' area (unlike gifs), so that
has to be fixed up somehow...
Shuffling faves, progressive load for Gif search

Favourites are now loaded, then shuffled before being rendered in the
client.

Gif search with giphy now loads 10 at a time to reduce the load of
trying to render 100 gifs at once, while still allowing the user to load
an additional 10 at a time.

Removed the option for Gifbase and Reply Gif because they don't support
HTTPS.
Removed replace gif (client side)

Was throwing an error regularly, so I removed the client-side swap until
I get a handle on it
Removed gif downloading for time being

Was likely responsible for I/O errors causing intermittent crashes
Made msgs editable, can now correct typos real time

Using html 'contenteditable=true' messages can now be corrected and the
ensuing correction sent live to all recipients. The msg is also saved so
the correction is permanent.

Will see how this plays in the wild. There are a couple of ways to kind
of hack this which is cool, but I'd like to add a way to input html tags
to update images if necessary, and also add some kind of signifier that
a msg has been edited. Not bad for a quick session.
Slight adjustment, corrected mistake

screwed with one line off code, flash not working, now fixed.