mirror of
https://github.com/PR0M3TH3AN/bitvid.git
synced 2026-10-27 07:52:24 +00:00
Enhance SimilarContentCard identity layout
This commit is contained in:
thePR0M3TH3AN committed
1 parent
ddad9c0f4f
commit
665d7fd342
5 files changed
+224
-67
No files matched your search
@@ -5,6 +5,6 @@
|
||||
--player-modal-inline-padding,clamp(var(--space-md),4vw,var(--space-xl-plus))
|
||||
);overflow:visible}#playerModal .watch-container.video-modal__similar{padding-inline:clamp(var(--space-3xs),.6vw,var(--space-2xs))}#playerModal .video-modal__primary>.watch-container:first-child{padding-block-start:var(--player-modal-vertical-padding)}#playerModal .video-modal__secondary>.watch-container:last-child{padding-block-end:var(--player-modal-vertical-padding)}#playerModal .modal-nav .watch-container{max-width:none;margin-inline:0}#playerModal .modal-info-panel{display:flex;flex-direction:column;gap:var(--space-md-plus)}#playerModal h2#videoTitle{margin:0;font-size:clamp(var(--font-size-xl),calc(var(--font-size-modal-title-base) + .5vw),var(--font-size-xl-plus));font-weight:600;line-height:1.3;color:var(--color-text)}#playerModal .modal-meta{font-size:var(--font-size-sm);line-height:1.4;color:var(--color-text-muted)}#playerModal .modal-view-count{font-weight:600;color:var(--color-text)}#playerModal .channel-card{align-items:center;gap:var(--space-md);padding:var(--space-md) var(--space-lg)}#playerModal .channel-card,#playerModal .player-modal__module{display:flex;border-radius:var(--radius-xl);border:var(--border-width-hairline) solid var(--color-border-translucent);background-color:var(--color-surface);box-shadow:var(--shadow-sm)}#playerModal .player-modal__module{flex-direction:column;gap:clamp(var(--space-2xs),1vw,var(--space-sm));width:100%;padding:clamp(var(--space-xs),1vw,var(--space-sm))}#playerModal .player-modal__module-title{margin:0;font-size:var(--font-size-lg);font-weight:600;line-height:1.3;color:var(--color-text)}#playerModal .player-modal__module-list{display:flex;flex-direction:column;gap:var(--space-sm);width:100%;margin:0;padding:0;list-style:none}#playerModal .video-modal__similar .player-modal__module{gap:clamp(var(--space-3xs),.6vw,var(--space-xs));padding:clamp(var(--space-2xs),.6vw,var(--space-xs));border-width:0;box-shadow:none;background-color:transparent}#playerModal .video-modal__similar .player-modal__module-title{padding-inline:clamp(var(--space-3xs),.6vw,var(--space-2xs))}#playerModal .video-modal__similar .player-modal__module-list{gap:clamp(var(--space-3xs),.6vw,var(--space-xs));padding-inline:clamp(var(--space-3xs),.6vw,var(--space-2xs));padding-bottom:clamp(var(--space-3xs),.6vw,var(--space-2xs))}#playerModal .player-modal__module-scroll{max-height:clamp(14rem,calc(100vh - var(--player-modal-vertical-padding)*2 - var(--space-2xl)),28rem);overflow-y:auto;overflow-x:hidden;overscroll-behavior:contain;scrollbar-gutter:stable;padding-inline-end:var(--space-xs)}#playerModal .video-modal__similar .player-modal__module-scroll{max-height:none;overflow:visible;padding-inline-end:0;scrollbar-gutter:auto}#playerModal .player-modal__module-scroll>li{scroll-margin-block:var(--space-xs)}@media (max-width:30rem){#playerModal .modal-nav .icon-button{width:var(--space-xl);height:var(--space-xl);min-width:var(--space-xl);min-height:var(--space-xl)}#playerModal .watch-container{padding-inline:var(--space-sm)}#playerModal .channel-card{gap:var(--space-sm);padding:var(--space-sm) var(--space-md)}}#playerModal .channel-card__avatar{flex-shrink:0;width:var(--avatar-size-lg);height:var(--avatar-size-lg);border-radius:var(--radius-full);overflow:hidden;background-color:var(--color-border-subtle)}#playerModal .channel-card__avatar img{display:block;width:100%;height:100%;-o-object-fit:cover;object-fit:cover}#playerModal .channel-card__name{margin:0;font-size:var(--font-size-lg);font-weight:600;color:var(--color-text)}#playerModal .channel-card__npub{margin:0;font-size:var(--font-size-sm);color:var(--color-text-muted)}#playerModal .description-panel{padding:var(--space-md-plus) var(--space-lg);border-radius:var(--radius-xl);border:var(--border-width-hairline) solid var(--color-border-translucent);background-color:var(--color-surface);box-shadow:var(--shadow-sm)}#playerModal .description-panel p{margin:0;font-size:var(--font-size-sm);line-height:1.6;color:var(--color-text)}.player-modal__content{position:relative;z-index:var(--z-modal-content);display:flex;flex:1 1 auto;width:100%;min-height:100%;flex-direction:column;overflow:visible;padding:0;margin:0;border:none;border-radius:0;background-color:var(--color-surface);box-shadow:none}@media (prefers-reduced-motion:reduce){.player-modal__content{transition-property:none}}#playerModal .modal-nav{position:sticky;top:0;z-index:var(--z-overlay-nav);--tw-translate-y:0px;transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));transition-property:transform;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.15s;background-color:var(--surface-overlay-panel);background-image:linear-gradient(180deg,color-mix(in srgb,var(--surface-overlay-panel) 94%,transparent) 0,color-mix(in srgb,var(--surface-overlay-panel) 88%,transparent) 100%);border-bottom:var(--border-width-hairline) solid var(--border-oveLine truncated
|
||||
--player-modal-primary-inline-padding-lg,clamp(var(--space-sm),2.75vw,var(--space-lg))
|
||||
)}}.revert-modal__layout{display:grid;gap:1.5rem}@media (min-width:1024px){.revert-modal__layout{grid-template-columns:minmax(var(--revert-modal-sidebar-min),var(--revert-modal-sidebar-width)) minmax(0,1fr)}}#playerModal.video-modal__primary{display:block}.video-modal__primary{display:flex;flex-direction:column;gap:1.5rem;min-width:0;min-height:0}#playerModal.video-modal__secondary{display:block}.video-modal__secondary{display:flex;flex-direction:column;gap:1rem;min-width:0;min-height:0;width:100%;align-self:stretch}.video-modal__similar{display:none}@media (min-width:1024px){#playerModal.video-modal__similar{display:block}.video-modal__similar{display:flex;flex-direction:column;gap:1.5rem;align-self:stretch;flex:1 1 auto;min-height:0}#playerModal .video-modal__similar .player-modal__module{height:100%;display:flex;flex:1 1 auto;min-height:0;flex-direction:column}#playerModal .video-modal__similar .player-modal__module-list{flex:1 1 auto;min-height:0}#playerModal .video-modal__similar .player-modal__module-scroll{height:100%;max-height:none;min-height:0}}#playerModal .player-modal__module-item{width:100%}#playerModal#playerModal .player-modal__module-item>.card:not(.player-modal__similar-card){display:block}#playerModal .player-modal__module-item>.card:not(.player-modal__similar-card){display:flex;width:100%;flex-direction:row;flex-wrap:nowrap;align-items:stretch;gap:var(--space-md)}#playerModal#playerModal .player-modal__module-item>.\!card:not(.player-modal__similar-card){display:block}#playerModal .player-modal__module-item>.\!card:not(.player-modal__similar-card){display:flex;width:100%;flex-direction:row;flex-wrap:nowrap;align-items:stretch;gap:var(--space-md)}#playerModal .player-modal__module-item>.card:not(.player-modal__similar-card) .video-card__media{width:clamp(5.75rem,18vw,8rem)}#playerModal .player-modal__module-item>.\!card:not(.player-modal__similar-card) .video-card__media{width:clamp(5.75rem,18vw,8rem)!important}#playerModal .player-modal__module-item>.\!card:not(.player-modal__similar-card) .video-card__media,#playerModal .player-modal__module-item>.card:not(.player-modal__similar-card) .video-card__media{flex-shrink:0;overflow:hidden;border-radius:var(--radius-lg)}#playerModal .player-modal__module-item>.card:not(.player-modal__similar-card) .video-card__content{padding:clamp(var(--space-sm),1.25vw,var(--space-md))}#playerModal .player-modal__module-item>.\!card:not(.player-modal__similar-card) .video-card__content{padding:clamp(var(--space-sm),1.25vw,var(--space-md))!important}#playerModal#playerModal .player-modal__module-item>.card:not(.player-modal__similar-card) .video-card__content{display:block}#playerModal .player-modal__module-item>.card:not(.player-modal__similar-card) .video-card__content{display:flex;min-width:0;flex:1 1 0%;flex-direction:column;gap:var(--space-sm)}#playerModal#playerModal .player-modal__module-item>.\!card:not(.player-modal__similar-card) .video-card__content{display:block}#playerModal .player-modal__module-item>.\!card:not(.player-modal__similar-card) .video-card__content{display:flex;min-width:0;flex:1 1 0%;flex-direction:column;gap:var(--space-sm)}#playerModal#playerModal .player-modal__module-item>.card:not(.player-modal__similar-card) .video-card__meta{display:block}#playerModal .player-modal__module-item>.card:not(.player-modal__similar-card) .video-card__meta{display:flex;flex-wrap:wrap;align-items:center;gap:.5rem;font-size:var(--font-size-xs);line-height:var(--line-height-tight);color:var(--text-muted-strong)}#playerModal#playerModal .player-modal__module-item>.\!card:not(.player-modal__similar-card) .video-card__meta{display:block}#playerModal .player-modal__module-item>.\!card:not(.player-modal__similar-card) .video-card__meta{display:flex;flex-wrap:wrap;align-items:center;gap:.5rem;font-size:var(--font-size-xs);line-height:var(--line-height-tight);color:var(--text-muted-strong)}#playerModal .video-modal__similar .player-modal__module-list{gap:clamp(var(--space-2xs),.85vw,var(--space-sm))}.player-modal__similar-card{--player-modal-similar-thumb:clamp(6.75rem,calc(var(--video-modal-secondary-min, 320px)*0.34),10.5rem);--player-modal-similar-gap:clamp(var(--space-4xs),0.65vw,var(--space-2xs));--player-modal-similar-padding:clamp(var(--space-4xs),0.7vw,var(--space-sm));position:relative;display:grid;grid-template-columns:var(--player-modal-similar-thumb) minmax(0,1fr);align-items:stretch;gap:var(--player-modal-similar-gap);padding:var(--player-modal-similar-padding);width:100%;min-width:0;transform:translate3d(0,var(--video-card-lift-translate-y,0),0)}.player-modal__similar-card:before{content:"";position:absolute;inset:0;z-index:0;opacity:var(--video-card-backdrop-opacity,0);background-image:var(
|
||||
)}}.revert-modal__layout{display:grid;gap:1.5rem}@media (min-width:1024px){.revert-modal__layout{grid-template-columns:minmax(var(--revert-modal-sidebar-min),var(--revert-modal-sidebar-width)) minmax(0,1fr)}}#playerModal.video-modal__primary{display:block}.video-modal__primary{display:flex;flex-direction:column;gap:1.5rem;min-width:0;min-height:0}#playerModal.video-modal__secondary{display:block}.video-modal__secondary{display:flex;flex-direction:column;gap:1rem;min-width:0;min-height:0;width:100%;align-self:stretch}.video-modal__similar{display:none}@media (min-width:1024px){#playerModal.video-modal__similar{display:block}.video-modal__similar{display:flex;flex-direction:column;gap:1.5rem;align-self:stretch;flex:1 1 auto;min-height:0}#playerModal .video-modal__similar .player-modal__module{height:100%;display:flex;flex:1 1 auto;min-height:0;flex-direction:column}#playerModal .video-modal__similar .player-modal__module-list{flex:1 1 auto;min-height:0}#playerModal .video-modal__similar .player-modal__module-scroll{height:100%;max-height:none;min-height:0}}#playerModal .player-modal__module-item{width:100%}#playerModal#playerModal .player-modal__module-item>.card:not(.player-modal__similar-card){display:block}#playerModal .player-modal__module-item>.card:not(.player-modal__similar-card){display:flex;width:100%;flex-direction:row;flex-wrap:nowrap;align-items:stretch;gap:var(--space-md)}#playerModal#playerModal .player-modal__module-item>.\!card:not(.player-modal__similar-card){display:block}#playerModal .player-modal__module-item>.\!card:not(.player-modal__similar-card){display:flex;width:100%;flex-direction:row;flex-wrap:nowrap;align-items:stretch;gap:var(--space-md)}#playerModal .player-modal__module-item>.card:not(.player-modal__similar-card) .video-card__media{width:clamp(5.75rem,18vw,8rem)}#playerModal .player-modal__module-item>.\!card:not(.player-modal__similar-card) .video-card__media{width:clamp(5.75rem,18vw,8rem)!important}#playerModal .player-modal__module-item>.\!card:not(.player-modal__similar-card) .video-card__media,#playerModal .player-modal__module-item>.card:not(.player-modal__similar-card) .video-card__media{flex-shrink:0;overflow:hidden;border-radius:var(--radius-lg)}#playerModal .player-modal__module-item>.card:not(.player-modal__similar-card) .video-card__content{padding:clamp(var(--space-sm),1.25vw,var(--space-md))}#playerModal .player-modal__module-item>.\!card:not(.player-modal__similar-card) .video-card__content{padding:clamp(var(--space-sm),1.25vw,var(--space-md))!important}#playerModal#playerModal .player-modal__module-item>.card:not(.player-modal__similar-card) .video-card__content{display:block}#playerModal .player-modal__module-item>.card:not(.player-modal__similar-card) .video-card__content{display:flex;min-width:0;flex:1 1 0%;flex-direction:column;gap:var(--space-sm)}#playerModal#playerModal .player-modal__module-item>.\!card:not(.player-modal__similar-card) .video-card__content{display:block}#playerModal .player-modal__module-item>.\!card:not(.player-modal__similar-card) .video-card__content{display:flex;min-width:0;flex:1 1 0%;flex-direction:column;gap:var(--space-sm)}#playerModal#playerModal .player-modal__module-item>.card:not(.player-modal__similar-card) .video-card__meta{display:block}#playerModal .player-modal__module-item>.card:not(.player-modal__similar-card) .video-card__meta{display:flex;flex-wrap:wrap;align-items:center;gap:.5rem;font-size:var(--font-size-xs);line-height:var(--line-height-tight);color:var(--text-muted-strong)}#playerModal#playerModal .player-modal__module-item>.\!card:not(.player-modal__similar-card) .video-card__meta{display:block}#playerModal .player-modal__module-item>.\!card:not(.player-modal__similar-card) .video-card__meta{display:flex;flex-wrap:wrap;align-items:center;gap:.5rem;font-size:var(--font-size-xs);line-height:var(--line-height-tight);color:var(--text-muted-strong)}#playerModal .video-modal__similar .player-modal__module-list{gap:clamp(var(--space-2xs),.85vw,var(--space-sm))}.player-modal__similar-card{--player-modal-similar-thumb:clamp(8.75rem,calc(var(--video-modal-secondary-min, 320px)*0.48),13.25rem);--player-modal-similar-gap:clamp(var(--space-4xs),0.65vw,var(--space-2xs));--player-modal-similar-padding:clamp(var(--space-4xs),0.7vw,var(--space-sm));position:relative;display:grid;grid-template-columns:var(--player-modal-similar-thumb) minmax(0,1fr);align-items:stretch;gap:var(--player-modal-similar-gap);padding:var(--player-modal-similar-padding);width:100%;min-width:0;transform:translate3d(0,var(--video-card-lift-translate-y,0),0)}.player-modal__similar-card:before{content:"";position:absolute;inset:0;z-index:0;opacity:var(--video-card-backdrop-opacity,0);background-image:var(
|
||||
--similar-card-thumb-url,var(--video-card-thumb-url,none)
|
||||
);background-position:50%;background-repeat:no-repeat;background-size:cover;transform:translate3d(0,var(--video-card-backdrop-translate-y,0),0) scale(var(--video-card-backdrop-scale,1));filter:blur(var(--video-card-backdrop-blur,0));transition:opacity var(--motion-duration-base) var(--motion-ease-in-out),transform var(--motion-duration-base) var(--motion-ease-in-out),filter var(--motion-duration-base) var(--motion-ease-in-out);pointer-events:none;will-change:opacity,transform,filter}.player-modal__similar-card>*{position:relative;z-index:1}.player-modal__similar-card:focus-within,.player-modal__similar-card:hover{--video-card-backdrop-opacity:0.425;--video-card-backdrop-translate-y:0.15rem;--video-card-backdrop-scale:1.12;--video-card-backdrop-blur:24px}.player-modal__similar-card-media{display:block;position:relative;inline-size:var(--player-modal-similar-thumb);max-inline-size:clamp(calc(var(--space-xl-plus)*1.25),24vw,calc(var(--space-2xl-plus)*1.75));border-radius:var(--radius-lg);overflow:hidden;isolation:isolate}.player-modal__similar-card-media img{display:block;width:100%;height:auto;aspect-ratio:16/9;-o-object-fit:cover;object-fit:cover;border-radius:inherit}.player-modal__similar-card-content{display:flex;flex-direction:column;gap:clamp(var(--space-4xs),.6vw,var(--space-2xs));min-width:0}.player-modal__similar-card-title{display:-webkit-box;margin:0;font-size:clamp(var(--font-size-sm),1.05vw,var(--font-size-base));font-weight:600;line-height:1.35;color:var(--color-text);text-decoration:none;overflow:hidden;-webkit-line-clamp:2;-webkit-box-orient:vertical;transition:color var(--motion-duration-base) var(--motion-ease-in-out)}.player-modal__similar-card-title:focus-visible,.player-modal__similar-card-title:hover{color:var(--color-accent)}.player-modal__similar-card-author{display:flex;flex-wrap:wrap;align-items:center;-moz-column-gap:clamp(var(--space-5xs),.4vw,var(--space-4xs));column-gap:clamp(var(--space-5xs),.4vw,var(--space-4xs));row-gap:var(--space-6xs);font-size:var(--font-size-xs);color:var(--color-text-muted);min-width:0}.player-modal__similar-card-author-name{font-weight:500;color:var(--color-text);min-width:0}.player-modal__similar-card-author-npub{display:inline-flex;padding-inline:var(--space-6xs);border-radius:var(--radius-full);font-family:var(--font-family-mono);line-height:1.2;background-color:color-mix(in srgb,var(--color-surface-alt) 80%,transparent)}.player-modal__similar-card-author-npub,.player-modal__similar-card-meta{align-items:center;font-size:var(--font-size-2xs,.75rem);color:var(--color-muted-strong)}.player-modal__similar-card-meta{display:flex;flex-wrap:wrap;gap:clamp(var(--space-5xs),.5vw,var(--space-4xs));min-width:0}.player-modal__similar-card-timestamp{white-space:nowrap}.player-modal__similar-card-separator{color:inherit;opacity:.8}.player-modal__similar-card-views{white-space:nowrap}.video-modal__stage{position:relative;isolation:isolate;overflow:visible;--video-modal-ambient-bleed:clamp(var(--space-2xl),12vw,var(--space-5xl));--video-modal-ambient-scale:1.38;--video-modal-ambient-blur:clamp(128px,20vw,256px);--video-modal-ambient-opacity:1}.video-modal__video{position:relative;z-index:1;border-radius:var(--radius-xl);padding-block:clamp(var(--space-xs),2.5vw,var(--space-md-plus));background-color:color-mix(in srgb,var(--color-surface) 82%,transparent);box-shadow:0 0 0 1px color-mix(in srgb,var(--color-border-strong) 8%,transparent) inset;overflow:visible}.video-modal__ambient{position:absolute;inset:calc(var(--video-modal-ambient-bleed)*-1);border-radius:calc(var(--radius-3xl) + var(--video-modal-ambient-bleed));pointer-events:none;z-index:0;display:block;overflow:visible}.video-modal__ambient:before{content:"";position:absolute;inset:0;border-radius:inherit;background:radial-gradient(circle at 50% 50%,color-mix(in srgb,var(--color-overlay-strong) 18%,transparent) 0,color-mix(in srgb,var(--color-overlay) 34%,transparent) 62%,transparent 100%);opacity:.9;mix-blend-mode:screen;pointer-events:none}.video-modal__ambient-canvas{position:relative;width:100%;height:100%;display:block;transform:scale(var(--video-modal-ambient-scale));filter:blur(var(--video-modal-ambient-blur)) saturate(2) brightness(1.24);opacity:var(--video-modal-ambient-opacity)}@media (min-width:1024px){.video-modal__video{position:sticky;top:calc(var(--space-2xl) + var(--space-xl))}}#playerModal .video-modal__video video{position:relative;z-index:1;background-color:var(--color-black);border-radius:var(--radius-lg);box-shadow:var(--shadow-video-modal);max-height:min(80vh,56.25vw);-o-object-fit:contain;object-fit:contain}.video-modal__media{display:block;aspect-ratio:16/9;width:100%;-o-object-fit:contain;object-fit:contain}#playerModal.video-modal__details{display:block}.video-modal__details{display:flex;flex-direction:column;gap:1.5rem}.video-modal__meta{border-bottom-width:1px;border-color:var(--border-default);--tw-border-opacity:0.2;padding-bottom:1rem}#playerModal.video-modal__tags{display:bLine truncated
|
||||
);background-position:50%;background-repeat:no-repeat;background-size:cover;transform:translate3d(0,var(--video-card-backdrop-translate-y,0),0) scale(var(--video-card-backdrop-scale,1));filter:blur(var(--video-card-backdrop-blur,0));transition:opacity var(--motion-duration-base) var(--motion-ease-in-out),transform var(--motion-duration-base) var(--motion-ease-in-out),filter var(--motion-duration-base) var(--motion-ease-in-out);pointer-events:none;will-change:opacity,transform,filter}.player-modal__similar-card>*{position:relative;z-index:1}.player-modal__similar-card:focus-within,.player-modal__similar-card:hover{--video-card-backdrop-opacity:0.425;--video-card-backdrop-translate-y:0.15rem;--video-card-backdrop-scale:1.12;--video-card-backdrop-blur:24px}.player-modal__similar-card-media{display:block;position:relative;inline-size:var(--player-modal-similar-thumb);max-inline-size:clamp(calc(var(--space-2xl-plus)*1.1),28vw,calc(var(--space-2xl-plus)*2.1));border-radius:var(--radius-lg);overflow:hidden;isolation:isolate}.player-modal__similar-card-media img{display:block;width:100%;height:auto;aspect-ratio:16/9;-o-object-fit:cover;object-fit:cover;border-radius:inherit}.player-modal__similar-card-content{display:flex;flex-direction:column;gap:clamp(var(--space-4xs),.6vw,var(--space-2xs));min-width:0}.player-modal__similar-card-title{display:-webkit-box;margin:0;font-size:clamp(var(--font-size-sm),1.05vw,var(--font-size-base));font-weight:600;line-height:1.35;color:var(--color-text);text-decoration:none;overflow:hidden;-webkit-line-clamp:2;-webkit-box-orient:vertical;transition:color var(--motion-duration-base) var(--motion-ease-in-out)}.player-modal__similar-card-title:focus-visible,.player-modal__similar-card-title:hover{color:var(--color-accent)}.player-modal__similar-card-author{display:flex;align-items:center;-moz-column-gap:clamp(var(--space-5xs),.6vw,var(--space-3xs));column-gap:clamp(var(--space-5xs),.6vw,var(--space-3xs));font-size:var(--font-size-xs);color:var(--color-text-muted);min-width:0}.player-modal__similar-card-avatar{flex:0 0 auto;display:block;inline-size:clamp(2.5rem,.8vw + 2.1rem,3rem);block-size:clamp(2.5rem,.8vw + 2.1rem,3rem);border-radius:var(--radius-full);overflow:hidden;background-color:var(--color-surface-alt);box-shadow:0 0 0 1px color-mix(in srgb,var(--color-border-strong) 65%,transparent)}.player-modal__similar-card-avatar-img{display:block;width:100%;height:100%;-o-object-fit:cover;object-fit:cover}.player-modal__similar-card-author-meta{display:flex;flex-direction:column;align-items:flex-start;gap:clamp(var(--space-6xs),.35vw,var(--space-5xs));min-width:0}.player-modal__similar-card-author-name{font-weight:500;color:var(--color-text);min-width:0}.player-modal__similar-card-author-npub{display:inline-flex;padding-inline:var(--space-6xs);border-radius:var(--radius-full);font-family:var(--font-family-mono);line-height:1.2;background-color:color-mix(in srgb,var(--color-surface-alt) 80%,transparent)}.player-modal__similar-card-author-npub,.player-modal__similar-card-meta{align-items:center;font-size:var(--font-size-2xs,.75rem);color:var(--color-muted-strong)}.player-modal__similar-card-meta{display:flex;flex-wrap:wrap;gap:clamp(var(--space-5xs),.5vw,var(--space-4xs));min-width:0}.player-modal__similar-card-timestamp{white-space:nowrap}.player-modal__similar-card-separator{color:inherit;opacity:.8}.player-modal__similar-card-views{white-space:nowrap}.video-modal__stage{position:relative;isolation:isolate;overflow:visible;--video-modal-ambient-bleed:clamp(var(--space-2xl),12vw,var(--space-5xl));--video-modal-ambient-scale:1.38;--video-modal-ambient-blur:clamp(128px,20vw,256px);--video-modal-ambient-opacity:1}.video-modal__video{position:relative;z-index:1;border-radius:var(--radius-xl);padding-block:clamp(var(--space-xs),2.5vw,var(--space-md-plus));background-color:color-mix(in srgb,var(--color-surface) 82%,transparent);box-shadow:0 0 0 1px color-mix(in srgb,var(--color-border-strong) 8%,transparent) inset;overflow:visible}.video-modal__ambient{position:absolute;inset:calc(var(--video-modal-ambient-bleed)*-1);border-radius:calc(var(--radius-3xl) + var(--video-modal-ambient-bleed));pointer-events:none;z-index:0;display:block;overflow:visible}.video-modal__ambient:before{content:"";position:absolute;inset:0;border-radius:inherit;background:radial-gradient(circle at 50% 50%,color-mix(in srgb,var(--color-overlay-strong) 18%,transparent) 0,color-mix(in srgb,var(--color-overlay) 34%,transparent) 62%,transparent 100%);opacity:.9;mix-blend-mode:screen;pointer-events:none}.video-modal__ambient-canvas{position:relative;width:100%;height:100%;display:block;transform:scale(var(--video-modal-ambient-scale));filter:blur(var(--video-modal-ambient-blur)) saturate(2) brightness(1.24);opacity:var(--video-modal-ambient-opacity)}@media (min-width:1024px){.video-modal__video{position:sticky;top:calc(var(--space-2xl) + var(--space-xl))}}#playerModal .video-modal__video video{position:relative;z-indexLine truncated
|
||||
+34
-9
@@ -1928,9 +1928,9 @@
|
||||
|
||||
.player-modal__similar-card {
|
||||
--player-modal-similar-thumb: clamp(
|
||||
6.75rem,
|
||||
calc(var(--video-modal-secondary-min, 320px) * 0.34),
|
||||
10.5rem
|
||||
8.75rem,
|
||||
calc(var(--video-modal-secondary-min, 320px) * 0.48),
|
||||
13.25rem
|
||||
);
|
||||
--player-modal-similar-gap: clamp(var(--space-4xs), 0.65vw, var(--space-2xs));
|
||||
--player-modal-similar-padding: clamp(
|
||||
@@ -1995,9 +1995,9 @@
|
||||
position: relative;
|
||||
inline-size: var(--player-modal-similar-thumb);
|
||||
max-inline-size: clamp(
|
||||
calc(var(--space-xl-plus) * 1.25),
|
||||
24vw,
|
||||
calc(var(--space-2xl-plus) * 1.75)
|
||||
calc(var(--space-2xl-plus) * 1.1),
|
||||
28vw,
|
||||
calc(var(--space-2xl-plus) * 2.1)
|
||||
);
|
||||
border-radius: var(--radius-lg);
|
||||
overflow: hidden;
|
||||
@@ -2041,15 +2041,40 @@
|
||||
|
||||
.player-modal__similar-card-author {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
align-items: center;
|
||||
column-gap: clamp(var(--space-5xs), 0.4vw, var(--space-4xs));
|
||||
row-gap: var(--space-6xs);
|
||||
column-gap: clamp(var(--space-5xs), 0.6vw, var(--space-3xs));
|
||||
font-size: var(--font-size-xs);
|
||||
color: var(--color-text-muted);
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
.player-modal__similar-card-avatar {
|
||||
flex: 0 0 auto;
|
||||
display: block;
|
||||
inline-size: clamp(2.5rem, 0.8vw + 2.1rem, 3rem);
|
||||
block-size: clamp(2.5rem, 0.8vw + 2.1rem, 3rem);
|
||||
border-radius: var(--radius-full);
|
||||
overflow: hidden;
|
||||
background-color: var(--color-surface-alt);
|
||||
box-shadow: 0 0 0 1px
|
||||
color-mix(in srgb, var(--color-border-strong) 65%, transparent);
|
||||
}
|
||||
|
||||
.player-modal__similar-card-avatar-img {
|
||||
display: block;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
object-fit: cover;
|
||||
}
|
||||
|
||||
.player-modal__similar-card-author-meta {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: flex-start;
|
||||
gap: clamp(var(--space-6xs), 0.35vw, var(--space-5xs));
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
.player-modal__similar-card-author-name {
|
||||
font-weight: 500;
|
||||
color: var(--color-text);
|
||||
|
||||
@@ -1,6 +1,8 @@
|
||||
import { normalizeDesignSystemContext } from "../../designSystem.js";
|
||||
import { formatShortNpub } from "../../utils/formatters.js";
|
||||
|
||||
const DEFAULT_PROFILE_AVATAR = "assets/svg/default-profile.svg";
|
||||
|
||||
export class SimilarContentCard {
|
||||
constructor({
|
||||
document: doc,
|
||||
@@ -58,6 +60,7 @@ export class SimilarContentCard {
|
||||
this.thumbnailEl = null;
|
||||
this.contentEl = null;
|
||||
this.titleEl = null;
|
||||
this.avatarEl = null;
|
||||
this.authorNameEl = null;
|
||||
this.authorNpubEl = null;
|
||||
this.timeEl = null;
|
||||
@@ -85,41 +88,7 @@ export class SimilarContentCard {
|
||||
updateIdentity(nextIdentity = {}) {
|
||||
this.identity = this.normalizeIdentity(nextIdentity, this.identity);
|
||||
|
||||
if (this.authorNameEl) {
|
||||
const label =
|
||||
this.identity.name ||
|
||||
this.identity.shortNpub ||
|
||||
this.identity.npub ||
|
||||
"";
|
||||
this.authorNameEl.textContent = label;
|
||||
if (this.identity.pubkey) {
|
||||
this.authorNameEl.dataset.pubkey = this.identity.pubkey;
|
||||
} else if (this.authorNameEl.dataset?.pubkey) {
|
||||
delete this.authorNameEl.dataset.pubkey;
|
||||
}
|
||||
}
|
||||
|
||||
if (this.authorNpubEl) {
|
||||
const label = this.identity.shortNpub || this.identity.npub || "";
|
||||
this.authorNpubEl.textContent = label;
|
||||
if (!label) {
|
||||
this.authorNpubEl.setAttribute("aria-hidden", "true");
|
||||
} else {
|
||||
this.authorNpubEl.setAttribute("aria-hidden", "false");
|
||||
}
|
||||
|
||||
if (this.identity.npub) {
|
||||
this.authorNpubEl.setAttribute("title", this.identity.npub);
|
||||
} else {
|
||||
this.authorNpubEl.removeAttribute("title");
|
||||
}
|
||||
|
||||
if (this.identity.pubkey) {
|
||||
this.authorNpubEl.dataset.pubkey = this.identity.pubkey;
|
||||
} else if (this.authorNpubEl.dataset?.pubkey) {
|
||||
delete this.authorNpubEl.dataset.pubkey;
|
||||
}
|
||||
}
|
||||
this.applyIdentityToElements();
|
||||
}
|
||||
|
||||
normalizePointerInfo(info) {
|
||||
@@ -224,7 +193,98 @@ export class SimilarContentCard {
|
||||
name = shortNpub || npub || "";
|
||||
}
|
||||
|
||||
return { name, npub, shortNpub, pubkey };
|
||||
const picture = (() => {
|
||||
const entries = [
|
||||
candidate.picture,
|
||||
candidate.image,
|
||||
candidate.photo,
|
||||
baseline.picture,
|
||||
baseline.image,
|
||||
baseline.photo,
|
||||
this.video?.author?.picture,
|
||||
this.video?.creator?.picture,
|
||||
this.video?.profile?.picture,
|
||||
this.video?.authorPicture,
|
||||
this.video?.creatorPicture,
|
||||
];
|
||||
|
||||
for (const entry of entries) {
|
||||
if (typeof entry !== "string") {
|
||||
continue;
|
||||
}
|
||||
const trimmed = entry.trim();
|
||||
if (trimmed) {
|
||||
return trimmed;
|
||||
}
|
||||
}
|
||||
|
||||
return "";
|
||||
})();
|
||||
|
||||
return { name, npub, shortNpub, pubkey, picture };
|
||||
}
|
||||
|
||||
applyIdentityToElements() {
|
||||
const nameLabel =
|
||||
this.identity.name ||
|
||||
this.identity.shortNpub ||
|
||||
this.identity.npub ||
|
||||
"";
|
||||
const npubLabel = this.identity.shortNpub || this.identity.npub || "";
|
||||
|
||||
if (this.authorNameEl) {
|
||||
this.authorNameEl.textContent = nameLabel;
|
||||
if (this.identity.pubkey) {
|
||||
this.authorNameEl.dataset.pubkey = this.identity.pubkey;
|
||||
} else if (this.authorNameEl.dataset?.pubkey) {
|
||||
delete this.authorNameEl.dataset.pubkey;
|
||||
}
|
||||
}
|
||||
|
||||
if (this.authorNpubEl) {
|
||||
this.authorNpubEl.textContent = npubLabel;
|
||||
|
||||
const hasNpub = Boolean(npubLabel);
|
||||
const normalizedName = nameLabel.trim().toLowerCase();
|
||||
const normalizedNpub = npubLabel.trim().toLowerCase();
|
||||
const isDuplicate =
|
||||
hasNpub && normalizedName && normalizedName === normalizedNpub;
|
||||
|
||||
this.authorNpubEl.hidden = !hasNpub || isDuplicate;
|
||||
this.authorNpubEl.setAttribute(
|
||||
"aria-hidden",
|
||||
!hasNpub || isDuplicate ? "true" : "false",
|
||||
);
|
||||
|
||||
if (this.identity.npub && !isDuplicate) {
|
||||
this.authorNpubEl.setAttribute("title", this.identity.npub);
|
||||
} else {
|
||||
this.authorNpubEl.removeAttribute("title");
|
||||
}
|
||||
|
||||
if (this.identity.pubkey) {
|
||||
this.authorNpubEl.dataset.pubkey = this.identity.pubkey;
|
||||
} else if (this.authorNpubEl.dataset?.pubkey) {
|
||||
delete this.authorNpubEl.dataset.pubkey;
|
||||
}
|
||||
}
|
||||
|
||||
if (this.avatarEl) {
|
||||
const picture = this.identity.picture || DEFAULT_PROFILE_AVATAR;
|
||||
if (this.avatarEl.getAttribute("src") !== picture) {
|
||||
this.avatarEl.src = picture;
|
||||
}
|
||||
|
||||
const altLabel =
|
||||
nameLabel || this.identity.shortNpub || this.identity.npub || "Channel";
|
||||
this.avatarEl.alt = `${altLabel}'s avatar`;
|
||||
|
||||
if (this.identity.pubkey) {
|
||||
this.avatarEl.dataset.pubkey = this.identity.pubkey;
|
||||
} else if (this.avatarEl.dataset?.pubkey) {
|
||||
delete this.avatarEl.dataset.pubkey;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
build() {
|
||||
@@ -404,36 +464,37 @@ export class SimilarContentCard {
|
||||
wrapper.classList.add("player-modal__similar-card-author");
|
||||
wrapper.style.minWidth = "0";
|
||||
|
||||
const avatarWrapper = this.document.createElement("span");
|
||||
avatarWrapper.classList.add("player-modal__similar-card-avatar");
|
||||
|
||||
const avatarImg = this.document.createElement("img");
|
||||
avatarImg.classList.add("player-modal__similar-card-avatar-img");
|
||||
avatarImg.decoding = "async";
|
||||
avatarImg.loading = "lazy";
|
||||
avatarImg.alt = "";
|
||||
avatarWrapper.appendChild(avatarImg);
|
||||
|
||||
const textWrapper = this.document.createElement("span");
|
||||
textWrapper.classList.add("player-modal__similar-card-author-meta");
|
||||
textWrapper.style.minWidth = "0";
|
||||
|
||||
const nameEl = this.document.createElement("span");
|
||||
nameEl.classList.add("author-name", "player-modal__similar-card-author-name");
|
||||
nameEl.textContent =
|
||||
this.identity.name || this.identity.shortNpub || this.identity.npub || "";
|
||||
if (this.identity.pubkey) {
|
||||
nameEl.dataset.pubkey = this.identity.pubkey;
|
||||
}
|
||||
textWrapper.appendChild(nameEl);
|
||||
|
||||
const npubEl = this.document.createElement("span");
|
||||
npubEl.classList.add("author-npub", "player-modal__similar-card-author-npub");
|
||||
const npubLabel = this.identity.shortNpub || this.identity.npub || "";
|
||||
npubEl.textContent = npubLabel;
|
||||
if (npubLabel) {
|
||||
npubEl.setAttribute("aria-hidden", "false");
|
||||
} else {
|
||||
npubEl.setAttribute("aria-hidden", "true");
|
||||
}
|
||||
if (this.identity.npub) {
|
||||
npubEl.setAttribute("title", this.identity.npub);
|
||||
}
|
||||
if (this.identity.pubkey) {
|
||||
npubEl.dataset.pubkey = this.identity.pubkey;
|
||||
}
|
||||
textWrapper.appendChild(npubEl);
|
||||
|
||||
wrapper.appendChild(nameEl);
|
||||
wrapper.appendChild(npubEl);
|
||||
wrapper.appendChild(avatarWrapper);
|
||||
wrapper.appendChild(textWrapper);
|
||||
|
||||
this.avatarEl = avatarImg;
|
||||
this.authorNameEl = nameEl;
|
||||
this.authorNpubEl = npubEl;
|
||||
|
||||
this.applyIdentityToElements();
|
||||
|
||||
return wrapper;
|
||||
}
|
||||
|
||||
|
||||
@@ -4536,11 +4536,36 @@ export class VideoModal {
|
||||
name = npub;
|
||||
}
|
||||
|
||||
const pictureCandidates = [
|
||||
override.picture,
|
||||
override.image,
|
||||
override.photo,
|
||||
video?.picture,
|
||||
video?.authorPicture,
|
||||
video?.creatorPicture,
|
||||
video?.author?.picture,
|
||||
video?.creator?.picture,
|
||||
video?.profile?.picture,
|
||||
];
|
||||
|
||||
let picture = "";
|
||||
for (const candidate of pictureCandidates) {
|
||||
if (typeof candidate !== "string") {
|
||||
continue;
|
||||
}
|
||||
const trimmed = candidate.trim();
|
||||
if (trimmed) {
|
||||
picture = trimmed;
|
||||
break;
|
||||
}
|
||||
}
|
||||
|
||||
return {
|
||||
name,
|
||||
npub,
|
||||
shortNpub,
|
||||
pubkey,
|
||||
picture,
|
||||
};
|
||||
}
|
||||
|
||||
|
||||
@@ -149,6 +149,7 @@ test("renders author identity fields with provided datasets", (t) => {
|
||||
name: "Satoshi",
|
||||
npub: "npub1qqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqq",
|
||||
pubkey: "pubkey-satoshi",
|
||||
picture: "https://cdn.example.com/avatar.png",
|
||||
};
|
||||
|
||||
const card = new SimilarContentCard({
|
||||
@@ -160,8 +161,12 @@ test("renders author identity fields with provided datasets", (t) => {
|
||||
const root = card.getRoot();
|
||||
const nameEl = root.querySelector(".author-name");
|
||||
const npubEl = root.querySelector(".author-npub");
|
||||
const avatarEl = root.querySelector(
|
||||
".player-modal__similar-card-avatar-img",
|
||||
);
|
||||
assert(nameEl);
|
||||
assert(npubEl);
|
||||
assert(avatarEl);
|
||||
|
||||
assert.equal(nameEl.textContent, identity.name);
|
||||
assert.equal(nameEl.dataset.pubkey, identity.pubkey);
|
||||
@@ -171,6 +176,11 @@ test("renders author identity fields with provided datasets", (t) => {
|
||||
assert.equal(npubEl.dataset.pubkey, identity.pubkey);
|
||||
assert.equal(npubEl.getAttribute("title"), identity.npub);
|
||||
assert.equal(npubEl.getAttribute("aria-hidden"), "false");
|
||||
assert.equal(npubEl.hidden, false);
|
||||
|
||||
assert.equal(avatarEl.dataset.pubkey, identity.pubkey);
|
||||
assert.equal(avatarEl.src, identity.picture);
|
||||
assert.match(avatarEl.alt, /Satoshi/);
|
||||
});
|
||||
|
||||
test("exposes view count element wired to pointer info", (t) => {
|
||||
@@ -194,3 +204,39 @@ test("exposes view count element wired to pointer info", (t) => {
|
||||
assert.equal(viewEl.dataset.viewCount, "");
|
||||
assert.equal(viewEl.textContent, "– views");
|
||||
});
|
||||
|
||||
test("hides duplicate npub pill and falls back to default avatar", (t) => {
|
||||
const { document, cleanup } = createDom();
|
||||
t.after(cleanup);
|
||||
|
||||
const npub = "npub1qqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqq";
|
||||
|
||||
const card = new SimilarContentCard({
|
||||
document,
|
||||
video: createVideo({ id: "duplicates" }),
|
||||
identity: { npub },
|
||||
});
|
||||
|
||||
const root = card.getRoot();
|
||||
const nameEl = root.querySelector(".author-name");
|
||||
const npubEl = root.querySelector(".author-npub");
|
||||
const avatarEl = root.querySelector(
|
||||
".player-modal__similar-card-avatar-img",
|
||||
);
|
||||
assert(nameEl);
|
||||
assert(npubEl);
|
||||
assert(avatarEl);
|
||||
|
||||
const expectedShort = formatShortNpub(npub);
|
||||
assert.equal(nameEl.textContent, expectedShort);
|
||||
assert.equal(npubEl.textContent, expectedShort);
|
||||
assert.equal(npubEl.hidden, true);
|
||||
assert.equal(npubEl.getAttribute("aria-hidden"), "true");
|
||||
assert.equal(npubEl.hasAttribute("title"), false);
|
||||
|
||||
assert.ok(
|
||||
avatarEl.src.endsWith("/assets/svg/default-profile.svg"),
|
||||
"avatar should fall back to default profile icon",
|
||||
);
|
||||
assert.match(avatarEl.alt, /avatar$/i);
|
||||
});
|
||||
Reference in new issue
Block a user