Improve organization of “chart gallery”

[maggiejaenicke]

There is a carousel for the 2023 30-day chart challenge, but other charts are organized sort of randomly. As this section grows, we’ll want to move them all to carousels so only a couple appear at once, but all can be browsed.

• Organize U.S. River Conditions

  • Released quarterly
  • Ideally the most recent one or two would appear and the rest could be found by navigating a carousel
  • PR adding the most recent river conditions

• Flow Tiles

  • Put in a carousel

Notes:
-Relates to / replaces #39
-There's a csv that controls everything on the landing page

Assignee: Maggie Jaenicke
(putting this here since I don't have repo access)

[aaarcher-usgs]

Reopening this to document some issues with the River Conditions chart gallery.

(NOTE: Turns out you have to disconnect VPN for the screenshots to show)

• The gallery loads on Safari properly (first screenshot), but then disappears after hovering over the carousel (second screenshot)
• Add the dates as text on the cards for river conditions so we can see when they're from at a glance on load before playing videos

[maggiejaenicke]

• All of the drupal pages open when a video is clicked on--FIX so just one

[maggiejaenicke]

@aaarcher-usgs

• The gallery loads on Safari properly (first screenshot), but then disappears after hovering over the carousel (second screenshot)

Oh no! I'll do my best to look into this, but I am not allowed Safari on my machine, so it's difficult to test.

[cnell-usgs]

I tried using a click event to control the playback instead of mouseover and mouseout to control the safari behavior here main...cnell-usgs:vizlab-home:click-video . It worked but then realized there's no way to get through to the full size video with this approach 😦

[maggiejaenicke]

@cnell-usgs if you do it that way, have you tried adding "controls" into the video element, like in the code below? I have the mouseover and mouseout there just to add and remove the controls with the mouse just because I thought it looks better, but you can just have the controls on there straight up.

<video class="video" width="100%" :poster="getThumbnailUrl(chart.folder, chart.image_thumbnail)" controls> 
<source :src="getVideoUrl(chart.folder, chart.video_basename, chart.video_type)" type="video/mp4">
Your browser does not support the video tag.
</video>

Is there a way to detect which browser is being used? If so, we could leave the default controls on for Safari but have it dynamic for Chromium browsers?

[maggiejaenicke]

@cnell-usgs Can you also test this code on Safari?

<video class="video" width="100%" :poster="getThumbnailUrl(chart.folder, chart.image_thumbnail)" onmouseover="this.setAttribute('controls','controls')" onmouseout="this.removeAttribute('controls')">
<source :src="getVideoUrl(chart.folder, chart.video_basename, chart.video_type)" type="video/mp4">
Your browser does not support the video tag.
</video>