Infrastructure/ghost
0
Fork 0
mirror of https://github.com/TryGhost/Ghost.git synced 2025-04-01 02:41:39 -05:00
Code Issues Activity

Added animation to control behavior for video cards

Browse source 
Refs https://github.com/TryGhost/Team/issues/1229
This commit is contained in:
Sanne de Vries 2021-12-14 17:22:30 +01:00
parent b8b0a29a2e
commit 2364de5696
2 changed files with 23 additions and 13 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

20
core/frontend/src/cards/css/video.css
View file

@ -1,8 +1,3 @@
.kg-video-card video {
display: block;
max-width: 100%;
height: auto;
}
.kg-video-card {
position: relative;
@ -11,6 +6,12 @@
--buffered-width: 0%;
}
.kg-video-card video {
display: block;
max-width: 100%;
height: auto;
}
.kg-video-container {
position: relative;
}
@ -26,6 +27,7 @@
align-items: center;
background-image: linear-gradient(180deg,rgba(0,0,0,0.3) 0,transparent 70%,transparent 100%);
z-index: 999;
transition: opacity .2s ease-in-out;
}
.kg-video-large-play-icon {
@ -37,6 +39,7 @@
padding: 0;
background: rgba(0, 0, 0, 0.5);
border-radius: 50%;
transition: opacity .2s ease-in-out;
}
.kg-video-large-play-icon svg {
@ -53,6 +56,8 @@
height: 80px;
background: linear-gradient(rgba(0,0,0,0), rgba(0,0,0,.5));
z-index: 999;
transition: opacity .2s ease-in-out;
}
.kg-video-player {
@ -101,6 +106,11 @@
display: none !important;
}
.kg-video-hide-animated {
opacity: 0 !important;
transition: opacity .2s ease-in-out;
}
.kg-video-play-icon svg,
.kg-video-pause-icon svg {
width: 14px;

16
core/frontend/src/cards/js/video.js
View file

@ -103,13 +103,13 @@
}
videoElementContainer.onmouseover = () => {
videoPlayerContainer.classList.remove("kg-video-hide");
videoPlayerContainer.classList.remove("kg-video-hide-animated");
}
videoElementContainer.onmouseleave = () => {
const isPlaying = !!(videoEl.currentTime > 0 && !videoEl.paused && !videoEl.ended && videoEl.readyState > 2);
if (isPlaying) {
videoPlayerContainer.classList.add("kg-video-hide");
videoPlayerContainer.classList.add("kg-video-hide-animated");
}
}
@ -121,15 +121,15 @@
});
videoEl.onplay = () => {
largePlayIcon.classList.add("kg-video-hide");
videoOverlay.classList.add("kg-video-hide");
largePlayIcon.classList.add("kg-video-hide-animated");
videoOverlay.classList.add("kg-video-hide-animated");
playIconContainer.classList.add("kg-video-hide");
pauseIconContainer.classList.remove("kg-video-hide");
};
const handleOnPlay = () => {
largePlayIcon.classList.add("kg-video-hide");
videoOverlay.classList.add("kg-video-hide");
largePlayIcon.classList.add("kg-video-hide-animated");
videoOverlay.classList.add("kg-video-hide-animated");
playIconContainer.classList.add("kg-video-hide");
pauseIconContainer.classList.remove("kg-video-hide");
videoEl.play();
@ -137,8 +137,8 @@
}
const handleOnPause = () => {
largePlayIcon.classList.remove("kg-video-hide");
videoOverlay.classList.remove("kg-video-hide");
largePlayIcon.classList.remove("kg-video-hide-animated");
videoOverlay.classList.remove("kg-video-hide-animated");
pauseIconContainer.classList.add("kg-video-hide");
playIconContainer.classList.remove("kg-video-hide");
videoEl.pause();