Fix or exclude posts with "slides"

[seanmturley]

Description

Posts with "slides" don't display the image (e.g. this post). Media handling should either be improved to display the image(s) in some way, or these should be excluded from the results.

[seanmturley]

This link is useful for testing purposes: http://localhost:3000/natureddit/fullpage/r/LandscapePhotography/comments/1aj2zsc/a_somewhat_snowy_winter_in_the_jemez_mountains_nm/

[seanmturley]

Now returning an object containing the gallery URL data and a tag identifying the mediaType (which will be used for rendering logic within Card and Post. Need to implement the equivalent for "normal" image posts, then setup the conditional rendering logic in the aforementioned components.

[seanmturley]

Should probably rename a few things:

• mediaUrlProcessing.js --> mediaProcessing.js
• getMediaUrls --> getMedia

It's also looking like some extra components should be created to handle media rendering:

• <ImageGallery /> - This is definitely necessary for producing the side-scrolling gallery
• <Image /> - This isn't strictly necessary, but may help streamline things. Additionally, it may make sense to make the HTML structure in Post and Card the same (there are currently different containers).
• Both above component could also be combined, or perhaps wrapped in another component, depending on where it's best to handle the image vs gallery logic.

[seanmturley]

I played with the idea of having an Image component as a child of Media, but this seems like an unnecessary abstraction.

I have realised that wrapping Media in a Context.Provider is probably useful to pass several parameters into the image and Gallery i.e. class (referring to Card vs Post), size, subreddit name, and post title.

[seanmturley]

Upon further reflection, the idea of using Context.Provider to avoid props in Media was overkill - there's not much data to pass, and at worst it has to drill only 2 levels into Gallery.

I've implemented this partly - so far just dealing with images in Post via the new Media component.

[seanmturley]

All images are now implemented via Media.

The gallery images are also rendering in both Post and Card, but as a simple list.

To do:

• [x] Add correct propTypes to Media
• [x] In Card, display only the first image of a gallery
• [x] Provide unique keys for each image in a gallery
• [x] Add alt text to gallery images
• [x] Implement scrolling through image galleries in Post

[seanmturley]

Currently the Gallery images are all hidden off to the right page by default with left: 100%;. The idea is that the currently viewed image will be made visible with left: unset;, and eventually slide off the other side of the page with left:-100%;. Changes in left will be animated (if necessary, can use left: 0; for current slide).

• Current slide needs:

  left: unset; (animated)
  width: 100%; (this is necessary to ensure horizontal centering with `flex`)

• Previous slides need:

  left: -100%; (animated)

• Need to investigate the most "React" way to implement the above CSS changes when the user moves through the slides.
• Currently the height of the entire gallery is set arbitrarily, which is necessary since the images have position: absolute; (removing them from normal document flow). Is there a more responsive way to manage this?

[seanmturley]

Basic functionality of prev/next buttons are implemented in Gallery, but these need to be disabled when there is no prev/next item to view.

[seanmturley]

Having prev/next buttons and the current position in the Gallery only visible when the Gallery is hovered is problematic - they're the only means of communicating that the media is a Gallery, rather than just a single image. These should probably all be reverted to be visible at all times, possibly with a slight reduction in size of the prev/next buttons to make them less obtrusive.

[seanmturley]

The display of position in Gallery is currently unreadable in the light theme - the colours need adjusting.

[seanmturley]

I think this is done, and looking pretty decent.

A recent example: http://localhost:3000/natureddit/fullpage/r/LandscapePhotography/comments/1bd7t94/surrey_photography/

Closing this task as complete.