mirror of
https://github.com/mediacms-io/mediacms.git
synced 2025-11-05 23:18:53 -05:00
cleanup comments and old code
This commit is contained in:
Yiannis Christodoulou
parent
ca0dc29488
commit
1a080adddc
@ -1,689 +0,0 @@
|
||||
/* ===== END SCREEN OVERLAY STYLES ===== */
|
||||
|
||||
.vjs-end-screen-overlay {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: calc(100% - 80px); /* Reduce reserved space for seekbar */
|
||||
background: #000000;
|
||||
display: none;
|
||||
flex-direction: column;
|
||||
justify-content: center; /* Center the grid vertically */
|
||||
align-items: center;
|
||||
padding: 40px 40px 40px 40px; /* Equal visual margins on all sides */
|
||||
box-sizing: border-box;
|
||||
z-index: 9999;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
/* Hide poster image when video ends and end screen is shown */
|
||||
.video-js.vjs-ended .vjs-poster {
|
||||
display: none !important;
|
||||
opacity: 0 !important;
|
||||
visibility: hidden !important;
|
||||
z-index: -1 !important;
|
||||
width: 0 !important;
|
||||
height: 0 !important;
|
||||
}
|
||||
|
||||
/* Hide video element completely when ended */
|
||||
.video-js.vjs-ended video {
|
||||
display: none !important;
|
||||
opacity: 0 !important;
|
||||
visibility: hidden !important;
|
||||
}
|
||||
|
||||
/* Ensure the overlay covers everything with maximum z-index */
|
||||
.video-js.vjs-ended .vjs-end-screen-overlay {
|
||||
z-index: 99999 !important;
|
||||
display: flex !important;
|
||||
}
|
||||
|
||||
/* Embed-specific full page overlay */
|
||||
#page-embed .video-js-root-embed .video-js.vjs-ended .vjs-end-screen-overlay {
|
||||
position: fixed !important;
|
||||
top: 0 !important;
|
||||
left: 0 !important;
|
||||
width: 100vw !important;
|
||||
height: calc(100vh - 80px) !important; /* Reduce reserved space for controls */
|
||||
z-index: 9998 !important; /* Below controls but above video */
|
||||
display: flex !important;
|
||||
padding: 120px 40px 40px 40px !important; /* Top padding for embed info + equal visual margins */
|
||||
justify-content: center !important; /* Center the grid vertically */
|
||||
}
|
||||
|
||||
/* Small player size optimization - 2 items horizontally for better title readability */
|
||||
/* This applies to both embed and regular players when they're small */
|
||||
.vjs-end-screen-overlay.vjs-small-player .vjs-related-videos-grid {
|
||||
grid-template-columns: repeat(2, 1fr) !important;
|
||||
grid-template-rows: 1fr !important;
|
||||
gap: 20px !important;
|
||||
max-width: 600px; /* Limit width for better proportions */
|
||||
}
|
||||
|
||||
.vjs-end-screen-overlay.vjs-small-player {
|
||||
height: calc(100% - 60px) !important;
|
||||
padding: 30px !important;
|
||||
}
|
||||
|
||||
/* Hide items beyond the first 2 for small players */
|
||||
.vjs-end-screen-overlay.vjs-small-player .vjs-related-video-item:nth-child(n + 3) {
|
||||
display: none !important;
|
||||
}
|
||||
|
||||
/* Embed-specific adjustments for small sizes */
|
||||
#page-embed .video-js-root-embed .video-js.vjs-ended .vjs-end-screen-overlay.vjs-small-player {
|
||||
height: calc(100vh - 60px) !important;
|
||||
padding: 80px 30px 30px 30px !important;
|
||||
}
|
||||
|
||||
/* Fallback media query for cases where class detection might not work */
|
||||
@media (max-height: 500px), (max-width: 600px) {
|
||||
.vjs-related-videos-grid {
|
||||
grid-template-columns: repeat(2, 1fr) !important;
|
||||
grid-template-rows: 1fr !important;
|
||||
gap: 20px !important;
|
||||
max-width: 600px;
|
||||
}
|
||||
|
||||
.vjs-end-screen-overlay {
|
||||
height: calc(100% - 60px) !important;
|
||||
padding: 30px !important;
|
||||
}
|
||||
|
||||
.vjs-related-video-item:nth-child(n + 3) {
|
||||
display: none !important;
|
||||
}
|
||||
|
||||
#page-embed .video-js-root-embed .video-js.vjs-ended .vjs-end-screen-overlay {
|
||||
height: calc(100vh - 60px) !important;
|
||||
padding: 80px 30px 30px 30px !important;
|
||||
}
|
||||
}
|
||||
|
||||
/* Very small player size - further optimize spacing (class-based detection) */
|
||||
.vjs-end-screen-overlay.vjs-very-small-player .vjs-related-videos-grid {
|
||||
gap: 15px !important;
|
||||
max-width: 500px !important;
|
||||
}
|
||||
|
||||
.vjs-end-screen-overlay.vjs-very-small-player {
|
||||
height: calc(100% - 50px) !important;
|
||||
padding: 25px !important;
|
||||
}
|
||||
|
||||
.vjs-end-screen-overlay.vjs-very-small-player .vjs-related-video-item {
|
||||
min-height: 80px !important;
|
||||
}
|
||||
|
||||
#page-embed .video-js-root-embed .video-js.vjs-ended .vjs-end-screen-overlay.vjs-very-small-player {
|
||||
height: calc(100vh - 50px) !important;
|
||||
padding: 60px 25px 25px 25px !important;
|
||||
}
|
||||
|
||||
/* Fallback media query for very small sizes */
|
||||
@media (max-height: 400px), (max-width: 400px) {
|
||||
.vjs-related-videos-grid {
|
||||
gap: 15px !important;
|
||||
max-width: 500px !important;
|
||||
}
|
||||
|
||||
.vjs-end-screen-overlay {
|
||||
height: calc(100% - 50px) !important;
|
||||
padding: 25px !important;
|
||||
}
|
||||
|
||||
.vjs-related-video-item {
|
||||
min-height: 80px !important;
|
||||
}
|
||||
|
||||
#page-embed .video-js-root-embed .video-js.vjs-ended .vjs-end-screen-overlay {
|
||||
height: calc(100vh - 50px) !important;
|
||||
padding: 60px 25px 25px 25px !important;
|
||||
}
|
||||
}
|
||||
|
||||
/* Ensure controls stay visible over the black background */
|
||||
.video-js.vjs-ended .vjs-control-bar {
|
||||
z-index: 10000 !important;
|
||||
position: absolute !important;
|
||||
bottom: 0 !important;
|
||||
left: 0 !important;
|
||||
right: 0 !important;
|
||||
width: 100% !important;
|
||||
display: flex !important;
|
||||
opacity: 1 !important;
|
||||
visibility: visible !important;
|
||||
}
|
||||
|
||||
.video-js.vjs-ended .vjs-progress-control {
|
||||
z-index: 10001 !important;
|
||||
position: absolute !important;
|
||||
bottom: 48px !important;
|
||||
left: 0 !important;
|
||||
right: 0 !important;
|
||||
width: 100% !important;
|
||||
display: block !important;
|
||||
opacity: 1 !important;
|
||||
visibility: visible !important;
|
||||
}
|
||||
|
||||
/* Embed-specific controls handling when ended */
|
||||
#page-embed .video-js-root-embed .video-js.vjs-ended .vjs-control-bar {
|
||||
position: fixed !important;
|
||||
bottom: 0 !important;
|
||||
left: 0 !important;
|
||||
right: 0 !important;
|
||||
width: 100vw !important;
|
||||
z-index: 10000 !important;
|
||||
display: flex !important;
|
||||
opacity: 1 !important;
|
||||
visibility: visible !important;
|
||||
}
|
||||
|
||||
#page-embed .video-js-root-embed .video-js.vjs-ended .vjs-progress-control {
|
||||
position: fixed !important;
|
||||
bottom: 48px !important;
|
||||
left: 0 !important;
|
||||
right: 0 !important;
|
||||
width: 100vw !important;
|
||||
z-index: 10001 !important;
|
||||
display: block !important;
|
||||
opacity: 1 !important;
|
||||
visibility: visible !important;
|
||||
}
|
||||
|
||||
/* Ensure embed info overlay (title/avatar) stays visible when ended */
|
||||
#page-embed .video-js-root-embed .video-js.vjs-ended .vjs-embed-info-overlay {
|
||||
z-index: 10002 !important;
|
||||
display: flex !important;
|
||||
opacity: 1 !important;
|
||||
visibility: visible !important;
|
||||
}
|
||||
|
||||
/* Hide big play button when end screen is active */
|
||||
.video-js.vjs-ended .vjs-big-play-button {
|
||||
display: none !important;
|
||||
opacity: 0 !important;
|
||||
visibility: hidden !important;
|
||||
}
|
||||
|
||||
/* Hide seek indicator (play icon) when end screen is active */
|
||||
.video-js.vjs-ended .vjs-seek-indicator {
|
||||
display: none !important;
|
||||
opacity: 0 !important;
|
||||
visibility: hidden !important;
|
||||
}
|
||||
|
||||
/* Make control bar and seekbar background black when video ends */
|
||||
.video-js.vjs-ended .vjs-control-bar {
|
||||
background: #000000 !important;
|
||||
background-color: #000000 !important;
|
||||
background-image: none !important;
|
||||
}
|
||||
|
||||
.video-js.vjs-ended .vjs-progress-control {
|
||||
background: #000000 !important;
|
||||
background-color: #000000 !important;
|
||||
}
|
||||
|
||||
/* Also ensure the gradient overlay is black when ended */
|
||||
.video-js.vjs-ended::after {
|
||||
background: #000000 !important;
|
||||
background-image: none !important;
|
||||
}
|
||||
|
||||
/* Remove any white elements or gradients */
|
||||
.video-js.vjs-ended::before {
|
||||
background: #000000 !important;
|
||||
background-image: none !important;
|
||||
}
|
||||
|
||||
/* Ensure all VideoJS overlays are black but preserve seekbar colors */
|
||||
.video-js.vjs-ended .vjs-loading-spinner,
|
||||
.video-js.vjs-ended .vjs-mouse-display {
|
||||
background: #000000 !important;
|
||||
background-image: none !important;
|
||||
}
|
||||
|
||||
/* Only change the background holder, preserve progress colors */
|
||||
.video-js.vjs-ended .vjs-progress-holder {
|
||||
background: rgba(255, 255, 255, 0.3) !important; /* Keep original transparent background */
|
||||
}
|
||||
|
||||
/* Hide any remaining VideoJS elements that might show white */
|
||||
.video-js.vjs-ended .vjs-tech,
|
||||
.video-js.vjs-ended .vjs-poster-overlay {
|
||||
display: none !important;
|
||||
opacity: 0 !important;
|
||||
visibility: hidden !important;
|
||||
}
|
||||
|
||||
.vjs-related-videos-title {
|
||||
color: white;
|
||||
font-size: 24px;
|
||||
line-height: 24px;
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
text-align: center;
|
||||
font-weight: bold;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.vjs-related-videos-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
|
||||
gap: 16px;
|
||||
width: 100%;
|
||||
max-width: 100%;
|
||||
margin: 0; /* Remove margin since parent handles centering */
|
||||
box-sizing: border-box;
|
||||
justify-items: stretch;
|
||||
align-items: stretch;
|
||||
justify-content: center;
|
||||
align-content: center; /* Center grid content */
|
||||
overflow: hidden;
|
||||
grid-auto-rows: 1fr;
|
||||
}
|
||||
|
||||
.vjs-related-video-item {
|
||||
position: relative;
|
||||
cursor: pointer;
|
||||
overflow: hidden;
|
||||
transition:
|
||||
transform 0.2s ease,
|
||||
box-shadow 0.2s ease;
|
||||
background: #1a1a1a;
|
||||
border: 1px solid #333;
|
||||
aspect-ratio: 16/9;
|
||||
width: 100%;
|
||||
min-height: 100px;
|
||||
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
|
||||
}
|
||||
|
||||
/* Apply rounded corners only when useRoundedCorners is true */
|
||||
.video-js.video-js-rounded-corners .vjs-related-video-item {
|
||||
border-radius: 8px;
|
||||
}
|
||||
|
||||
.vjs-related-video-item:hover {
|
||||
transform: translateY(-2px);
|
||||
box-shadow: 0 8px 25px rgba(0, 0, 0, 0.3);
|
||||
}
|
||||
|
||||
.vjs-related-video-thumbnail {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
object-fit: cover;
|
||||
display: block;
|
||||
/* border-radius: 8px; */
|
||||
background: #1a1a1a; /* Fallback background */
|
||||
transition: transform 0.2s ease;
|
||||
}
|
||||
|
||||
.vjs-related-video-item:hover .vjs-related-video-thumbnail {
|
||||
transform: scale(1.02); /* Subtle zoom like YouTube */
|
||||
}
|
||||
|
||||
.vjs-related-video-overlay {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
background: linear-gradient(transparent, rgba(0, 0, 0, 0.9));
|
||||
color: white;
|
||||
padding: 12px;
|
||||
opacity: 0;
|
||||
transition: opacity 0.3s ease;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: flex-start;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.vjs-related-video-item:hover .vjs-related-video-overlay {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
/* Show overlay by default on touch devices - match default hover behavior exactly */
|
||||
.vjs-related-video-item.vjs-touch-device .vjs-related-video-overlay {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
.vjs-related-video-title {
|
||||
font-size: 14px;
|
||||
font-weight: bold;
|
||||
line-height: 1.3;
|
||||
color: white;
|
||||
margin-bottom: 4px;
|
||||
}
|
||||
|
||||
.vjs-related-video-meta {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
gap: 8px;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.vjs-related-video-author {
|
||||
font-size: 12px;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.vjs-related-video-views {
|
||||
font-size: 12px;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.vjs-related-video-author::after {
|
||||
content: "•";
|
||||
margin-left: 8px;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.vjs-related-video-duration {
|
||||
position: absolute;
|
||||
bottom: 8px;
|
||||
right: 8px;
|
||||
background: rgba(0, 0, 0, 0.8);
|
||||
color: white;
|
||||
padding: 2px 6px;
|
||||
font-size: 11px;
|
||||
font-weight: bold;
|
||||
opacity: 0;
|
||||
transition: opacity 0.3s ease;
|
||||
}
|
||||
|
||||
/* Apply rounded corners to duration badge only when useRoundedCorners is true */
|
||||
.video-js.video-js-rounded-corners .vjs-related-video-duration {
|
||||
border-radius: 2px;
|
||||
}
|
||||
|
||||
.vjs-related-video-item:hover .vjs-related-video-duration {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
/* Show duration by default on touch devices */
|
||||
.vjs-related-video-item.vjs-touch-device .vjs-related-video-duration {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
.video-js.vjs-ended .vjs-control-bar {
|
||||
opacity: 1 !important;
|
||||
pointer-events: auto !important;
|
||||
}
|
||||
|
||||
.video-js.vjs-ended .vjs-control-bar .vjs-control {
|
||||
opacity: 1 !important;
|
||||
pointer-events: auto !important;
|
||||
cursor: pointer !important;
|
||||
}
|
||||
|
||||
.video-js.vjs-ended .vjs-control-bar button {
|
||||
opacity: 1 !important;
|
||||
pointer-events: auto !important;
|
||||
cursor: pointer !important;
|
||||
}
|
||||
|
||||
.video-js.vjs-ended .vjs-control-bar .vjs-control.vjs-volume-control {
|
||||
opacity: 0 !important;
|
||||
}
|
||||
|
||||
.video-js.vjs-ended .vjs-control-bar .vjs-volume-panel.vjs-hover .vjs-volume-control {
|
||||
opacity: 1 !important;
|
||||
}
|
||||
|
||||
/* Responsive grid adjustments for different screen sizes */
|
||||
@media (max-width: 1200px) {
|
||||
.vjs-related-videos-grid {
|
||||
grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
|
||||
gap: 14px;
|
||||
}
|
||||
|
||||
.vjs-end-screen-overlay {
|
||||
height: calc(100% - 70px);
|
||||
padding: 35px;
|
||||
}
|
||||
|
||||
#page-embed .video-js-root-embed .video-js.vjs-ended .vjs-end-screen-overlay {
|
||||
height: calc(100vh - 70px) !important;
|
||||
padding: 115px 35px 35px 35px !important;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 900px) {
|
||||
.vjs-related-videos-grid {
|
||||
grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
|
||||
gap: 12px;
|
||||
}
|
||||
|
||||
.vjs-end-screen-overlay {
|
||||
height: calc(100% - 60px);
|
||||
padding: 30px;
|
||||
}
|
||||
|
||||
#page-embed .video-js-root-embed .video-js.vjs-ended .vjs-end-screen-overlay {
|
||||
height: calc(100vh - 60px) !important;
|
||||
padding: 110px 30px 30px 30px !important;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 600px) {
|
||||
.vjs-related-videos-grid {
|
||||
grid-template-columns: repeat(2, 1fr);
|
||||
gap: 10px;
|
||||
}
|
||||
|
||||
.vjs-end-screen-overlay {
|
||||
height: calc(100% - 50px);
|
||||
padding: 25px;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
#page-embed .video-js-root-embed .video-js.vjs-ended .vjs-end-screen-overlay {
|
||||
height: calc(100vh - 50px) !important;
|
||||
padding: 105px 25px 25px 25px !important;
|
||||
}
|
||||
|
||||
.vjs-related-video-item {
|
||||
min-height: 80px;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 400px) {
|
||||
.vjs-related-videos-grid {
|
||||
grid-template-columns: repeat(2, 1fr);
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
.vjs-end-screen-overlay {
|
||||
height: calc(100% - 40px);
|
||||
padding: 20px;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
#page-embed .video-js-root-embed .video-js.vjs-ended .vjs-end-screen-overlay {
|
||||
height: calc(100vh - 40px) !important;
|
||||
padding: 100px 20px 20px 20px !important;
|
||||
}
|
||||
|
||||
.vjs-related-video-item {
|
||||
min-height: 70px;
|
||||
}
|
||||
}
|
||||
|
||||
.video-js.vjs-ended .vjs-play-control {
|
||||
opacity: 1 !important;
|
||||
pointer-events: auto !important;
|
||||
cursor: pointer !important;
|
||||
}
|
||||
|
||||
.video-js.vjs-ended .vjs-progress-control {
|
||||
opacity: 1 !important;
|
||||
pointer-events: auto !important;
|
||||
}
|
||||
|
||||
.video-js.vjs-ended .vjs-volume-panel {
|
||||
opacity: 1 !important;
|
||||
pointer-events: auto !important;
|
||||
}
|
||||
|
||||
/* Responsive grid layouts */
|
||||
@media (min-width: 1200px) {
|
||||
.vjs-related-videos-grid {
|
||||
grid-template-columns: repeat(4, 1fr);
|
||||
gap: 20px;
|
||||
}
|
||||
|
||||
.vjs-end-screen-overlay {
|
||||
height: calc(100% - 80px);
|
||||
padding: 40px;
|
||||
}
|
||||
|
||||
#page-embed .video-js-root-embed .video-js.vjs-ended .vjs-end-screen-overlay {
|
||||
height: calc(100vh - 80px) !important;
|
||||
padding: 120px 40px 40px 40px !important;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 1199px) {
|
||||
.vjs-related-video-item:nth-child(n + 10) {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 1100px) {
|
||||
.vjs-related-videos-grid {
|
||||
grid-template-columns: repeat(3, 1fr);
|
||||
gap: 16px;
|
||||
}
|
||||
}
|
||||
|
||||
/* iPad Pro and larger tablets */
|
||||
@media (min-width: 1024px) and (max-width: 1199px) {
|
||||
.vjs-related-videos-grid {
|
||||
grid-template-columns: repeat(3, 1fr);
|
||||
gap: 16px;
|
||||
}
|
||||
|
||||
/* Allow up to 9 videos on larger tablets */
|
||||
.vjs-related-video-item:nth-child(n + 10) {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
/* Large tablets like iPad Pro */
|
||||
@media (min-width: 900px) and (max-width: 1024px) {
|
||||
.vjs-related-videos-grid {
|
||||
grid-template-columns: repeat(3, 1fr);
|
||||
gap: 16px;
|
||||
}
|
||||
|
||||
/* Allow up to 9 videos on large tablets */
|
||||
.vjs-related-video-item:nth-child(n + 10) {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
@media (min-width: 768px) and (max-width: 899px) {
|
||||
.vjs-related-videos-grid {
|
||||
grid-template-columns: repeat(3, 1fr);
|
||||
gap: 14px;
|
||||
}
|
||||
|
||||
.vjs-end-screen-overlay {
|
||||
height: calc(100% - 60px);
|
||||
padding: 30px;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
#page-embed .video-js-root-embed .video-js.vjs-ended .vjs-end-screen-overlay {
|
||||
height: calc(100vh - 60px) !important;
|
||||
padding: 110px 30px 30px 30px !important;
|
||||
}
|
||||
|
||||
/* Allow up to 9 videos on regular tablets */
|
||||
.vjs-related-video-item:nth-child(n + 10) {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 767px) {
|
||||
.vjs-related-video-item:nth-child(n + 5) {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.vjs-related-videos-grid {
|
||||
grid-template-columns: repeat(2, 1fr);
|
||||
grid-template-rows: repeat(2, 1fr);
|
||||
gap: 12px;
|
||||
}
|
||||
|
||||
.vjs-end-screen-overlay {
|
||||
padding: 12px;
|
||||
justify-content: center;
|
||||
height: calc(100% - 105px);
|
||||
}
|
||||
|
||||
#page-embed .video-js-root-embed .video-js.vjs-ended .vjs-end-screen-overlay {
|
||||
height: calc(100vh - 105px) !important;
|
||||
padding: 80px 12px 12px 12px !important;
|
||||
}
|
||||
|
||||
.vjs-related-video-thumbnail {
|
||||
height: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 574px) {
|
||||
.vjs-related-video-item:nth-child(n + 5) {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.vjs-related-videos-grid {
|
||||
grid-template-columns: repeat(2, 1fr);
|
||||
grid-template-rows: repeat(2, 1fr);
|
||||
gap: 10px;
|
||||
}
|
||||
|
||||
.vjs-end-screen-overlay {
|
||||
padding: 10px;
|
||||
justify-content: center;
|
||||
height: calc(100% - 100px);
|
||||
}
|
||||
|
||||
#page-embed .video-js-root-embed .video-js.vjs-ended .vjs-end-screen-overlay {
|
||||
height: calc(100vh - 100px) !important;
|
||||
padding: 80px 10px 10px 10px !important;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 439px) {
|
||||
.vjs-related-video-item:nth-child(n + 5) {
|
||||
display: none;
|
||||
}
|
||||
.vjs-related-videos-grid {
|
||||
grid-template-columns: repeat(2, 1fr);
|
||||
grid-template-rows: repeat(2, 1fr);
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
.vjs-end-screen-overlay {
|
||||
padding: 8px;
|
||||
justify-content: center;
|
||||
height: calc(100% - 98px);
|
||||
}
|
||||
|
||||
#page-embed .video-js-root-embed .video-js.vjs-ended .vjs-end-screen-overlay {
|
||||
height: calc(100vh - 98px) !important;
|
||||
padding: 80px 8px 8px 8px !important;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 480px) {
|
||||
.vjs-related-video-thumbnail {
|
||||
height: 100%;
|
||||
}
|
||||
}
|
||||
@ -1,377 +0,0 @@
|
||||
import videojs from 'video.js';
|
||||
import './EndScreenOverlay.css';
|
||||
|
||||
const Component = videojs.getComponent('Component');
|
||||
|
||||
class EndScreenOverlay extends Component {
|
||||
constructor(player, options) {
|
||||
// Store relatedVideos in options before calling super
|
||||
// so it's available during createEl()
|
||||
if (options && options.relatedVideos) {
|
||||
options._relatedVideos = options.relatedVideos;
|
||||
}
|
||||
|
||||
super(player, options);
|
||||
|
||||
// Now set the instance property after super() completes
|
||||
this.relatedVideos = options && options.relatedVideos ? options.relatedVideos : [];
|
||||
}
|
||||
|
||||
createEl() {
|
||||
// Get relatedVideos from options since createEl is called during super()
|
||||
const relatedVideos = this.options_ && this.options_._relatedVideos ? this.options_._relatedVideos : [];
|
||||
|
||||
// Limit videos based on screen size to fit grid properly
|
||||
const maxVideos = this.getMaxVideosForScreen();
|
||||
const videosToShow = relatedVideos.slice(0, maxVideos);
|
||||
|
||||
// Determine if player is small and add appropriate class
|
||||
const playerEl = this.player().el();
|
||||
const playerWidth = playerEl ? playerEl.offsetWidth : window.innerWidth;
|
||||
const playerHeight = playerEl ? playerEl.offsetHeight : window.innerHeight;
|
||||
const isSmallPlayer = playerHeight <= 500 || playerWidth <= 600;
|
||||
const isVerySmallPlayer = playerHeight <= 400 || playerWidth <= 400;
|
||||
|
||||
let overlayClasses = 'vjs-end-screen-overlay';
|
||||
if (isVerySmallPlayer) {
|
||||
overlayClasses += ' vjs-very-small-player vjs-small-player';
|
||||
} else if (isSmallPlayer) {
|
||||
overlayClasses += ' vjs-small-player';
|
||||
}
|
||||
|
||||
const overlay = super.createEl('div', {
|
||||
className: overlayClasses,
|
||||
});
|
||||
|
||||
// Create grid container
|
||||
const grid = videojs.dom.createEl('div', {
|
||||
className: 'vjs-related-videos-grid',
|
||||
});
|
||||
|
||||
// Create video items
|
||||
if (videosToShow && Array.isArray(videosToShow) && videosToShow.length > 0) {
|
||||
videosToShow.forEach((video) => {
|
||||
const videoItem = this.createVideoItem(video);
|
||||
grid.appendChild(videoItem);
|
||||
});
|
||||
} else {
|
||||
// Create sample videos for testing if no related videos provided
|
||||
const sampleVideos = this.createSampleVideos();
|
||||
sampleVideos.slice(0, this.getMaxVideosForScreen()).forEach((video) => {
|
||||
const videoItem = this.createVideoItem(video);
|
||||
grid.appendChild(videoItem);
|
||||
});
|
||||
}
|
||||
|
||||
overlay.appendChild(grid);
|
||||
|
||||
return overlay;
|
||||
}
|
||||
|
||||
createVideoItem(video) {
|
||||
// Detect touch device
|
||||
const isTouchDevice = this.isTouchDevice();
|
||||
|
||||
const item = videojs.dom.createEl('div', {
|
||||
className: isTouchDevice ? 'vjs-related-video-item vjs-touch-device' : 'vjs-related-video-item',
|
||||
});
|
||||
|
||||
// Use real YouTube thumbnail or fallback to placeholder
|
||||
const thumbnailSrc = video.thumbnail || this.getPlaceholderImage(video.title);
|
||||
|
||||
const thumbnail = videojs.dom.createEl('img', {
|
||||
className: 'vjs-related-video-thumbnail',
|
||||
src: thumbnailSrc,
|
||||
alt: video.title,
|
||||
loading: 'lazy', // Lazy load for better performance
|
||||
onerror: () => {
|
||||
// Fallback to placeholder if image fails to load
|
||||
thumbnail.src = this.getPlaceholderImage(video.title);
|
||||
},
|
||||
});
|
||||
|
||||
const overlay = videojs.dom.createEl('div', {
|
||||
className: 'vjs-related-video-overlay',
|
||||
});
|
||||
|
||||
const title = videojs.dom.createEl('div', {
|
||||
className: 'vjs-related-video-title',
|
||||
});
|
||||
title.textContent = video.title;
|
||||
|
||||
// Create meta container for author and views
|
||||
const meta = videojs.dom.createEl('div', {
|
||||
className: 'vjs-related-video-meta',
|
||||
});
|
||||
|
||||
const author = videojs.dom.createEl('div', {
|
||||
className: 'vjs-related-video-author',
|
||||
});
|
||||
author.textContent = video.author;
|
||||
|
||||
const views = videojs.dom.createEl('div', {
|
||||
className: 'vjs-related-video-views',
|
||||
});
|
||||
views.textContent = video.views;
|
||||
|
||||
// Add author and views to meta container
|
||||
meta.appendChild(author);
|
||||
meta.appendChild(views);
|
||||
|
||||
// Add duration display (positioned absolutely in bottom right)
|
||||
const duration = videojs.dom.createEl('div', {
|
||||
className: 'vjs-related-video-duration',
|
||||
});
|
||||
|
||||
// Format duration from seconds to MM:SS
|
||||
const formatDuration = (seconds) => {
|
||||
if (!seconds || seconds === 0) return '';
|
||||
const mins = Math.floor(seconds / 60);
|
||||
const secs = Math.floor(seconds % 60);
|
||||
return `${mins}:${secs.toString().padStart(2, '0')}`;
|
||||
};
|
||||
|
||||
duration.textContent = formatDuration(video.duration);
|
||||
|
||||
// Structure: title at top, meta at bottom
|
||||
overlay.appendChild(title);
|
||||
overlay.appendChild(meta);
|
||||
|
||||
item.appendChild(thumbnail);
|
||||
item.appendChild(overlay);
|
||||
|
||||
// Add duration to the item (positioned absolutely)
|
||||
if (video.duration && video.duration > 0) {
|
||||
item.appendChild(duration);
|
||||
}
|
||||
|
||||
// Add click handler
|
||||
item.addEventListener('click', () => {
|
||||
// Check if this is an embed player - use multiple methods for reliability
|
||||
const playerId = this.player().id() || this.player().options_.id;
|
||||
const isEmbedPlayer =
|
||||
playerId === 'video-embed' ||
|
||||
window.location.pathname.includes('/embed') ||
|
||||
window.location.search.includes('embed') ||
|
||||
window.parent !== window; // Most reliable check for iframe
|
||||
|
||||
if (isEmbedPlayer) {
|
||||
// Open in new tab/window for embed players
|
||||
window.open(`/view?m=${video.id}`, '_blank', 'noopener,noreferrer');
|
||||
} else {
|
||||
// Navigate in same window for regular players
|
||||
window.location.href = `/view?m=${video.id}`;
|
||||
}
|
||||
});
|
||||
|
||||
return item;
|
||||
}
|
||||
|
||||
getPlaceholderImage(title) {
|
||||
// Generate a placeholder image using a service or create a data URL
|
||||
// For now, we'll use a simple colored placeholder based on the title
|
||||
const colors = [
|
||||
'#009931',
|
||||
'#4ECDC4',
|
||||
'#45B7D1',
|
||||
'#96CEB4',
|
||||
'#FFEAA7',
|
||||
'#DDA0DD',
|
||||
'#98D8C8',
|
||||
'#F7DC6F',
|
||||
'#BB8FCE',
|
||||
'#85C1E9',
|
||||
];
|
||||
|
||||
// Use title hash to consistently assign colors
|
||||
let hash = 0;
|
||||
for (let i = 0; i < title.length; i++) {
|
||||
hash = title.charCodeAt(i) + ((hash << 5) - hash);
|
||||
}
|
||||
const colorIndex = Math.abs(hash) % colors.length;
|
||||
const color = colors[colorIndex];
|
||||
|
||||
// Create a simple placeholder with the first letter of the title
|
||||
const firstLetter = title.charAt(0).toUpperCase();
|
||||
|
||||
// Create a data URL for a simple placeholder image
|
||||
const canvas = document.createElement('canvas');
|
||||
canvas.width = 320;
|
||||
canvas.height = 180;
|
||||
const ctx = canvas.getContext('2d');
|
||||
|
||||
// Background
|
||||
ctx.fillStyle = color;
|
||||
ctx.fillRect(0, 0, 320, 180);
|
||||
|
||||
// Add a subtle pattern
|
||||
ctx.fillStyle = 'rgba(255, 255, 255, 0.1)';
|
||||
for (let i = 0; i < 20; i++) {
|
||||
ctx.fillRect(Math.random() * 320, Math.random() * 180, 2, 2);
|
||||
}
|
||||
|
||||
// Add the first letter
|
||||
ctx.fillStyle = 'white';
|
||||
ctx.font = 'bold 48px Arial';
|
||||
ctx.textAlign = 'center';
|
||||
ctx.textBaseline = 'middle';
|
||||
ctx.fillText(firstLetter, 160, 90);
|
||||
|
||||
return canvas.toDataURL();
|
||||
}
|
||||
|
||||
getMaxVideosForScreen() {
|
||||
// Get actual player dimensions instead of window dimensions
|
||||
const playerEl = this.player().el();
|
||||
const playerWidth = playerEl ? playerEl.offsetWidth : window.innerWidth;
|
||||
const playerHeight = playerEl ? playerEl.offsetHeight : window.innerHeight;
|
||||
|
||||
// Check if this is an embed player
|
||||
const playerId = this.player().id() || this.player().options_.id;
|
||||
const isEmbedPlayer =
|
||||
playerId === 'video-embed' ||
|
||||
document.getElementById('page-embed') ||
|
||||
window.location.pathname.includes('embed');
|
||||
|
||||
// For small player sizes, limit to 2 items for better readability
|
||||
// This works for both embed and regular players when they're small
|
||||
if (playerHeight <= 500 || playerWidth <= 600) {
|
||||
return 2; // 2x1 grid for small player sizes
|
||||
}
|
||||
|
||||
// Use player width for responsive decisions
|
||||
if (playerWidth >= 1200) {
|
||||
return 12; // 4x3 grid for large player
|
||||
} else if (playerWidth >= 1024) {
|
||||
return 9; // 3x3 grid for desktop-sized player
|
||||
} else if (playerWidth >= 768) {
|
||||
return 6; // 3x2 grid for tablet-sized player
|
||||
} else {
|
||||
return 4; // 2x2 grid for mobile-sized player
|
||||
}
|
||||
}
|
||||
|
||||
createSampleVideos() {
|
||||
return [
|
||||
{
|
||||
id: 'sample1',
|
||||
title: 'React Full Course for Beginners',
|
||||
author: 'Bro Code',
|
||||
views: '2.1M views',
|
||||
duration: 1800,
|
||||
thumbnail: 'https://img.youtube.com/vi/dGcsHMXbSOA/maxresdefault.jpg',
|
||||
},
|
||||
{
|
||||
id: 'sample2',
|
||||
title: 'JavaScript ES6+ Features',
|
||||
author: 'Tech Tutorials',
|
||||
views: '850K views',
|
||||
duration: 1200,
|
||||
thumbnail: 'https://img.youtube.com/vi/WZQc7RUAg18/maxresdefault.jpg',
|
||||
},
|
||||
{
|
||||
id: 'sample3',
|
||||
title: 'CSS Grid Layout Masterclass',
|
||||
author: 'Web Dev Academy',
|
||||
views: '1.2M views',
|
||||
duration: 2400,
|
||||
thumbnail: 'https://img.youtube.com/vi/0xMQfnTU6oo/maxresdefault.jpg',
|
||||
},
|
||||
{
|
||||
id: 'sample4',
|
||||
title: 'Node.js Backend Development',
|
||||
author: 'Code Master',
|
||||
views: '650K views',
|
||||
duration: 3600,
|
||||
thumbnail: 'https://img.youtube.com/vi/fBNz6F-Cowg/maxresdefault.jpg',
|
||||
},
|
||||
{
|
||||
id: 'sample5',
|
||||
title: 'Vue.js Complete Guide',
|
||||
author: 'Frontend Pro',
|
||||
views: '980K views',
|
||||
duration: 2800,
|
||||
thumbnail: 'https://img.youtube.com/vi/qZXt1Aom3Cs/maxresdefault.jpg',
|
||||
},
|
||||
{
|
||||
id: 'sample6',
|
||||
title: 'Python Data Science',
|
||||
author: 'Data Academy',
|
||||
views: '1.5M views',
|
||||
duration: 4200,
|
||||
thumbnail: 'https://img.youtube.com/vi/ua-CiDNNj30/maxresdefault.jpg',
|
||||
},
|
||||
{
|
||||
id: 'sample7',
|
||||
title: 'TypeScript Fundamentals',
|
||||
author: 'TypeScript Expert',
|
||||
views: '720K views',
|
||||
duration: 2100,
|
||||
thumbnail: 'https://img.youtube.com/vi/BwuLxPH8IDs/maxresdefault.jpg',
|
||||
},
|
||||
{
|
||||
id: 'sample8',
|
||||
title: 'MongoDB Database Tutorial',
|
||||
author: 'Database Pro',
|
||||
views: '890K views',
|
||||
duration: 1800,
|
||||
thumbnail: 'https://img.youtube.com/vi/-56x56UppqQ/maxresdefault.jpg',
|
||||
},
|
||||
{
|
||||
id: 'sample9',
|
||||
title: 'Docker Containerization',
|
||||
author: 'DevOps Master',
|
||||
views: '1.1M views',
|
||||
duration: 3200,
|
||||
thumbnail: 'https://img.youtube.com/vi/pTFZFxd4hOI/maxresdefault.jpg',
|
||||
},
|
||||
{
|
||||
id: 'sample10',
|
||||
title: 'AWS Cloud Services',
|
||||
author: 'Cloud Expert',
|
||||
views: '1.3M views',
|
||||
duration: 4500,
|
||||
thumbnail: 'https://img.youtube.com/vi/ITcXLS3h2qU/maxresdefault.jpg',
|
||||
},
|
||||
{
|
||||
id: 'sample11',
|
||||
title: 'GraphQL API Design',
|
||||
author: 'API Specialist',
|
||||
views: '680K views',
|
||||
duration: 2600,
|
||||
thumbnail: 'https://img.youtube.com/vi/ed8SzALpx1Q/maxresdefault.jpg',
|
||||
},
|
||||
{
|
||||
id: 'sample12',
|
||||
title: 'Machine Learning Basics',
|
||||
author: 'AI Academy',
|
||||
views: '2.3M views',
|
||||
duration: 5400,
|
||||
thumbnail: 'https://img.youtube.com/vi/i_LwzRVP7bg/maxresdefault.jpg',
|
||||
},
|
||||
];
|
||||
}
|
||||
|
||||
isTouchDevice() {
|
||||
// Multiple methods to detect touch devices
|
||||
return (
|
||||
'ontouchstart' in window ||
|
||||
navigator.maxTouchPoints > 0 ||
|
||||
navigator.msMaxTouchPoints > 0 ||
|
||||
window.matchMedia('(pointer: coarse)').matches
|
||||
);
|
||||
}
|
||||
|
||||
show() {
|
||||
this.el().style.display = 'flex';
|
||||
}
|
||||
|
||||
hide() {
|
||||
this.el().style.display = 'none';
|
||||
}
|
||||
}
|
||||
|
||||
// Register the component
|
||||
videojs.registerComponent('EndScreenOverlay', EndScreenOverlay);
|
||||
|
||||
export default EndScreenOverlay;
|
||||
File diff suppressed because it is too large
Load Diff
Loading…
x
Reference in New Issue
Block a user