trycatchkamal/stream
1
0
Fork 0
forked from Kieran/zap.stream
Code Pull Requests Activity

Dont blur pills

Browse Source
This commit is contained in:
Kieran 2023-07-27 16:45:24 +01:00
parent e370234b5a
commit fed72727ef
Signed by: Kieran
GPG Key ID: DE71CEB3925BE941
2 changed files with 11 additions and 7 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

10
src/element/video-tile.css
View File

@ -1,4 +1,6 @@
.video-tile {} .video-tile {
position: relative;
}
.video-tile.nsfw>div:nth-child(1) { .video-tile.nsfw>div:nth-child(1) {
filter: blur(3px); filter: blur(3px);
@ -22,14 +24,16 @@
} }
.video-tile .pill-box { .video-tile .pill-box {
float: right;
margin: 16px 20px; margin: 16px 20px;
text-transform: uppercase; text-transform: uppercase;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
justify-content: space-between; justify-content: space-between;
align-items: flex-end; align-items: flex-end;
height: calc(100% - 32px); position: absolute;
top: 0;
right: 0;
gap: 8px;
} }
.video-tile .pill-box .pill { .video-tile .pill-box .pill {

8
src/element/video-tile.tsx
View File

@ -42,11 +42,11 @@ export function VideoTile({
backgroundImage: `url(${inView ? ((image?.length ?? 0) > 0 ? image : ZapStream) : ""})`, backgroundImage: `url(${inView ? ((image?.length ?? 0) > 0 ? image : ZapStream) : ""})`,
}} }}
> >
<span className="pill-box">
{showStatus && <StatePill state={status as StreamState} />}
{viewers && <span className="pill viewers">{formatSats(Number(viewers))} viewers</span>}
</span>
</div> </div>
<span className="pill-box">
{showStatus && <StatePill state={status as StreamState} />}
{viewers && <span className="pill viewers">{formatSats(Number(viewers))} viewers</span>}
</span>
<h3>{title}</h3> <h3>{title}</h3>
{showAuthor && <div>{inView && <Profile pubkey={host} />}</div>} {showAuthor && <div>{inView && <Profile pubkey={host} />}</div>}
</Link> </Link>