diff --git a/css/style.css b/css/style.css index 37694f0f..5b7818a4 100644 --- a/css/style.css +++ b/css/style.css @@ -8,6 +8,7 @@ --color-surface: #0f172a; --color-bg: var(--color-surface); --color-card: #1e293b; + --color-card-private: #3b1d74; --color-primary: #fe0032; --color-secondary: #ff93a5; --color-card-critical: #3f0b13; @@ -167,6 +168,15 @@ header img { box-shadow: var(--shadow-md); } +.video-card.video-card--owner-private { + background-color: var(--color-card-private) !important; + box-shadow: 0 0 0 0.125rem rgba(168, 85, 247, 0.55), var(--shadow-md); +} + +.video-card.video-card--owner-private:hover { + box-shadow: 0 0 0 0.125rem rgba(192, 132, 252, 0.65), var(--shadow-lg); +} + .video-card[data-owner-is-viewer="false"][data-url-health-state="offline"][data-stream-health-state="unhealthy"] { display: none; } diff --git a/js/channelProfile.js b/js/channelProfile.js index 336fda23..deff1985 100644 --- a/js/channelProfile.js +++ b/js/channelProfile.js @@ -1819,6 +1819,9 @@ function renderChannelVideosFromList({ ? app.formatTimeAgo(video.created_at) : new Date(video.created_at * 1000).toLocaleString(); + const highlightClass = + canEdit && video.isPrivate ? "video-card--owner-private" : ""; + const videoCard = new VideoCard({ document, video, @@ -1826,6 +1829,7 @@ function renderChannelVideosFromList({ shareUrl, pointerInfo, timeAgo, + highlightClass, capabilities: { canEdit, canDelete: canEdit, diff --git a/js/ui/components/VideoCard.js b/js/ui/components/VideoCard.js index 8c08f6a6..bbdb561f 100644 --- a/js/ui/components/VideoCard.js +++ b/js/ui/components/VideoCard.js @@ -28,7 +28,8 @@ export class VideoCard { this.video = video; this.index = index; this.shareUrl = shareUrl; - this.highlightClass = highlightClass || ""; + this.highlightClass = + typeof highlightClass === "string" ? highlightClass : ""; this.animationClass = animationClass || ""; this.pointerInfo = pointerInfo; this.capabilities = { diff --git a/js/ui/views/VideoListView.js b/js/ui/views/VideoListView.js index 91ce4050..d0d77467 100644 --- a/js/ui/views/VideoListView.js +++ b/js/ui/views/VideoListView.js @@ -321,9 +321,8 @@ export class VideoListView { const shareUrl = this.buildShareUrl(video, shareBase); const canEdit = this.utils.canEditVideo(video); const canDelete = this.utils.canDeleteVideo(video); - const highlightClass = canEdit && video.isPrivate - ? "border-2 border-yellow-500" - : "border-none"; + const highlightClass = + canEdit && video.isPrivate ? "video-card--owner-private" : ""; const isNewlyRendered = !previouslyRenderedIds.has(video.id); const animationClass = isNewlyRendered ? "video-card--enter" : ""; const timeAgo = this.formatters.formatTimeAgo(video.created_at);