mirror of
https://github.com/mediacms-io/mediacms.git
synced 2025-11-06 07:28: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