Open maggiejaenicke opened 5 months ago
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)
@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.
I tried using a click
event to control the playback instead of mouseover
and mouseout
to control the safari behavior here https://github.com/DOI-USGS/vizlab-home/compare/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 😦
@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?
@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>
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.
[x] Organize U.S. River Conditions
[x] Flow Tiles
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)