Skip to content

Commit

Permalink
DOI-USGS#50 Updates video html to only show controls on mouseover, ad…
Browse files Browse the repository at this point in the history 
…ds in more videos to the js file, updates gray border styling for river conditions
  • Loading branch information
Jaenicke, Margaret (Contractor) Ellen committed Mar 10, 2024
1 parent 951d1c7 commit 48ec359
Show file tree
Hide file tree
Showing 2 changed files with 33 additions and 29 deletions.
46 changes: 25 additions & 21 deletions src/assets/content/RiverConditions.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -8,7 +8,7 @@ export default {
//some of the thumbnails are B&W
//some of them are small square vs the larger rectangle - pre FY22
{
id: '45',
id: '1',
name: 'Oct-Dec 2024',
drupal_url: 'https://www.usgs.gov/media/videos/us-river-conditions-october-december-2023',
code_url: 'https://github.com/DOI-USGS/gage-conditions-gif',
Expand All @@ -20,47 +20,51 @@ export default {
}
,
{
id: '46',
id: '2',
name: 'Jul-Sep 2023',
drupal_url: 'https://www.usgs.gov/media/videos/us-river-conditions-july-september-2023',
code_url: 'https://github.com/DOI-USGS/gage-conditions-gif',
folder: 'FY23_Q4/',
image_basename: 'river_conditions_jul_sep_2023_square_thumbnail_colorized',
image_type: 'png',
video_basename: 'river_conditions_jul_sep_2023_insta',
image_thumbnail: 'river_conditions_jul_sep_2023_square_thumbnail_colorized.png',
video_type: 'mp4',
image_alt: 'River Conditions for Fiscal Year 2023, Quarter 4, spanning from July-September 2023.'
},
{
id: '47',
id: '3',
name: 'Apr-Jun 2023',
drupal_url: 'https://www.usgs.gov/media/videos/us-river-conditions-april-june-2023',
code_url: 'https://github.com/DOI-USGS/gage-conditions-gif',
folder: 'FY23_Q3/',
image_basename: 'river_conditions_apr_jun_2023_square_thumbnail_colorized',
image_type: 'png',
video_basename: 'river_conditions_apr_jun_2023_insta',
image_thumbnail: 'river_conditions_apr_jun_2023_square_thumbnail_colorized.png',
video_type: 'mp4',
image_alt: 'River Conditions for Fiscal Year 2023, Quarter 3, spanning from April-June 2023.'
},
{
id: '48',
id: '4',
name: 'Jan-Mar 2023',
drupal_url: 'https://www.usgs.gov/media/videos/us-river-conditions-january-march-2023',
code_url: 'https://github.com/DOI-USGS/gage-conditions-gif',
folder: 'FY23_Q2/',
image_basename: 'river_conditions_jan_mar_2023_square_thumbnail_color',
image_type: 'png',
video_basename: 'river_conditions_jan_mar_2023_insta',
image_thumbnail: 'river_conditions_jan_mar_2023_square_thumbnail_color.png',
video_type: 'mp4',
image_alt: 'River Conditions for Fiscal Year 2023, Quarter 2, spanning from January-March 2023.'
},
{
id: '49',
id: '5',
name: 'Oct-Dec 2022',
drupal_url: 'https://www.usgs.gov/media/videos/us-river-conditions-october-december-2022',
code_url: 'https://github.com/DOI-USGS/gage-conditions-gif',
folder: 'FY23_Q1/',
image_basename: 'river_conditions_oct_dec_2022_square_thumbnail_colorized',
image_type: 'png',
video_basename: 'river_conditions_oct_dec_2022_insta',
image_thumbnail: 'river_conditions_oct_dec_2022_square_thumbnail_colorized.png',
video_type: 'mp4',
image_alt: 'River Conditions for Fiscal Year 2022, Quarter 1, spanning from October-December 2022.'
},
{
id: '50',
id: '6',
name: 'Jul-Sep 2022',
drupal_url: 'https://www.usgs.gov/media/videos/us-river-conditions-july-september-2022',
code_url: 'https://github.com/DOI-USGS/gage-conditions-gif',
Expand All @@ -70,7 +74,7 @@ export default {
image_alt: 'River Conditions for Fiscal Year 2022, Quarter 4, spanning from July-September 2022.'
},
{
id: '51',
id: '7',
name: 'Apr-Jun 2022',
drupal_url: 'https://www.usgs.gov/media/videos/us-river-conditions-april-june-2022',
code_url: 'https://github.com/DOI-USGS/gage-conditions-gif',
Expand All @@ -80,7 +84,7 @@ export default {
image_alt: 'River Conditions for Fiscal Year 2022, Quarter 3, spanning from April-June 2022.'
},
{
id: '52',
id: '8',
name: 'Jan-Mar 2022',
drupal_url: 'https://www.usgs.gov/media/videos/us-river-conditions-january-march-2022',
code_url: 'https://github.com/DOI-USGS/gage-conditions-gif',
Expand All @@ -90,7 +94,7 @@ export default {
image_alt: 'River Conditions for Fiscal Year 2022, Quarter 2, spanning from January-March 2022.'
},
{
id: '53',
id: '9',
name: 'Oct-Dec 2021',
drupal_url: 'https://www.usgs.gov/media/videos/us-river-conditions-october-december-2021',
code_url: 'https://github.com/DOI-USGS/gage-conditions-gif',
Expand All @@ -100,7 +104,7 @@ export default {
image_alt: 'River Conditions for Fiscal Year 2022, Quarter 1, spanning from October-December 2021.'
},
{
id: '54',
id: '10',
name: 'Jan-Mar 2021',
drupal_url: 'https://www.usgs.gov/media/videos/us-river-conditions-july-september-2021',
code_url: 'https://github.com/DOI-USGS/gage-conditions-gif',
Expand All @@ -110,7 +114,7 @@ export default {
image_alt: 'River Conditions for Fiscal Year 2021, Quarter 4, spanning from January-March 2021.'
},
{
id: '55',
id: '11',
name: 'Apr-Jun 2021',
drupal_url: 'https://www.usgs.gov/media/videos/us-river-conditions-april-june-2021',
code_url: 'https://github.com/DOI-USGS/gage-conditions-gif',
Expand All @@ -120,7 +124,7 @@ export default {
image_alt: 'River Conditions for Fiscal Year 2021, Quarter 3, spanning from April-June 2021'
},
{
id: '56',
id: '12',
name: 'Jan-Mar 2021',
drupal_url: 'https://www.usgs.gov/media/videos/us-river-conditions-january-march-2021',
code_url: 'https://github.com/DOI-USGS/gage-conditions-gif',
Expand All @@ -130,7 +134,7 @@ export default {
image_alt: 'River Conditions for Fiscal Year 2021, Quarter 2, spanning from January-March 2021'
},
{
id: '57',
id: '13',
name: 'Oct-Dec 2020',
drupal_url: 'https://www.usgs.gov/media/videos/us-river-conditions-october-december-2020',
code_url: 'https://github.com/DOI-USGS/gage-conditions-gif',
Expand Down
16 changes: 8 additions & 8 deletions src/components/RiverConditions_Carousel.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -19,7 +19,7 @@
<br>{{chart.name}}
</center> -->
<div class="slider-video-container">
<video controls width="100%" :poster="getThumbnailUrl(chart.folder, chart.image_thumbnail)" autoplay muted>
<video width="100%" :poster="getThumbnailUrl(chart.folder, chart.image_thumbnail)" onmouseover="this.play();this.setAttribute('controls','controls')" onmouseout="this.load();this.removeAttribute('controls')"> <!-- use atuoplay muted to get videos to autoplay -->
<source :src="getVideoUrl(chart.folder, chart.video_basename, chart.video_type)" type="video/mp4">
Your browser does not support the video tag.
</video>
Expand Down Expand Up @@ -94,9 +94,6 @@
backface-visibility: hidden;
-webkit-touch-callout: none;
-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
outline: 2px solid #dfe1e2;
outline-offset: -15px;
border-radius: 19px;
}
.slide {
margin: 0;
Expand All @@ -109,6 +106,7 @@
transform: translate3D(0,-0.5px,0) scale(1.05);
transition: all .3s ease;
}
.slider-video-container {
padding-left: 10px;
padding-right: 10px;
Expand All @@ -119,10 +117,12 @@
align-content: center;
justify-content: center;
video {
max-width: 470px;
max-height: 370px;
padding-bottom: 20px;
padding-top: 20px
max-width: 430px;
max-height: 330px;
border-width: 2px;
border-color: #dfe1e2;
border-style: solid;
border-radius: 7px;
}
}
</style>

0 comments on commit 48ec359

Please sign in to comment.