mirror of
https://github.com/PrimalHQ/primal-web-app.git
synced 2024-10-01 17:31:13 +00:00
Set embedded media border radius to 16px
This commit is contained in:
parent
fb9e2838a1
commit
4828073e55
@ -34,7 +34,7 @@ const EmbeddedNote: Component<{ note: PrimalNote, mentionedUsers?: Record<string
|
|||||||
if (props.includeEmbeds) {
|
if (props.includeEmbeds) {
|
||||||
return (
|
return (
|
||||||
<div
|
<div
|
||||||
class={styles.mentionedNote}
|
class={`${styles.mentionedNote} embeddedContent`}
|
||||||
data-event={props.note.post.id}
|
data-event={props.note.post.id}
|
||||||
data-event-bech32={noteId()}
|
data-event-bech32={noteId()}
|
||||||
>
|
>
|
||||||
@ -46,7 +46,7 @@ const EmbeddedNote: Component<{ note: PrimalNote, mentionedUsers?: Record<string
|
|||||||
return (
|
return (
|
||||||
<A
|
<A
|
||||||
href={`/e/${noteId()}`}
|
href={`/e/${noteId()}`}
|
||||||
class={styles.mentionedNote}
|
class={`${styles.mentionedNote} embeddedContent`}
|
||||||
onClick={() => navToThread()}
|
onClick={() => navToThread()}
|
||||||
data-event={props.note.post.id}
|
data-event={props.note.post.id}
|
||||||
data-event-bech32={noteId()}
|
data-event-bech32={noteId()}
|
||||||
|
@ -42,6 +42,8 @@ const LinkPreview: Component<{ preview: any, id?: string, bordered?: boolean }>
|
|||||||
k += ` ${styles.bordered}`;
|
k += ` ${styles.bordered}`;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
k += " embeddedContent";
|
||||||
|
|
||||||
return k;
|
return k;
|
||||||
};
|
};
|
||||||
|
|
||||||
|
@ -473,6 +473,8 @@ const ParsedNote: Component<{
|
|||||||
klass += ' redBorder';
|
klass += ' redBorder';
|
||||||
}
|
}
|
||||||
|
|
||||||
|
klass += ' embeddedContent';
|
||||||
|
|
||||||
setWordsDisplayed(w => w + shortMentionInWords);
|
setWordsDisplayed(w => w + shortMentionInWords);
|
||||||
|
|
||||||
const video = <video
|
const video = <video
|
||||||
@ -504,7 +506,7 @@ const ParsedNote: Component<{
|
|||||||
const youtubeId = isYouTube(token) && RegExp.$1;
|
const youtubeId = isYouTube(token) && RegExp.$1;
|
||||||
|
|
||||||
return <iframe
|
return <iframe
|
||||||
class="w-max"
|
class="w-max embeddedContent"
|
||||||
src={`https://www.youtube.com/embed/${youtubeId}`}
|
src={`https://www.youtube.com/embed/${youtubeId}`}
|
||||||
title="YouTube video player"
|
title="YouTube video player"
|
||||||
// @ts-ignore no property
|
// @ts-ignore no property
|
||||||
@ -527,6 +529,7 @@ const ParsedNote: Component<{
|
|||||||
const convertedUrl = token.replace(/\/(track|album|playlist|episode)\/([a-zA-Z0-9]+)/, "/embed/$1/$2");
|
const convertedUrl = token.replace(/\/(track|album|playlist|episode)\/([a-zA-Z0-9]+)/, "/embed/$1/$2");
|
||||||
|
|
||||||
return <iframe
|
return <iframe
|
||||||
|
class="embeddedContent"
|
||||||
style="borderRadius: 12"
|
style="borderRadius: 12"
|
||||||
src={convertedUrl}
|
src={convertedUrl}
|
||||||
width="100%"
|
width="100%"
|
||||||
@ -552,6 +555,7 @@ const ParsedNote: Component<{
|
|||||||
const args = `?channel=${channel}&parent=${window.location.hostname}&muted=true`;
|
const args = `?channel=${channel}&parent=${window.location.hostname}&muted=true`;
|
||||||
|
|
||||||
return <iframe
|
return <iframe
|
||||||
|
class="embeddedContent"
|
||||||
src={`https://player.twitch.tv/${args}`}
|
src={`https://player.twitch.tv/${args}`}
|
||||||
// @ts-ignore no property
|
// @ts-ignore no property
|
||||||
className="w-max"
|
className="w-max"
|
||||||
@ -570,7 +574,7 @@ const ParsedNote: Component<{
|
|||||||
|
|
||||||
const feedPath = (isMixCloud(token) && RegExp.$1) + "%2F" + (isMixCloud(token) && RegExp.$2);
|
const feedPath = (isMixCloud(token) && RegExp.$1) + "%2F" + (isMixCloud(token) && RegExp.$2);
|
||||||
|
|
||||||
return <div>
|
return <div class="embeddedContent">
|
||||||
<iframe
|
<iframe
|
||||||
title="SoundCloud player"
|
title="SoundCloud player"
|
||||||
width="100%"
|
width="100%"
|
||||||
@ -592,6 +596,7 @@ const ParsedNote: Component<{
|
|||||||
setWordsDisplayed(w => w + shortMentionInWords);
|
setWordsDisplayed(w => w + shortMentionInWords);
|
||||||
|
|
||||||
return <iframe
|
return <iframe
|
||||||
|
class="embeddedContent"
|
||||||
width="100%"
|
width="100%"
|
||||||
height="166"
|
height="166"
|
||||||
// @ts-ignore no property
|
// @ts-ignore no property
|
||||||
@ -614,6 +619,7 @@ const ParsedNote: Component<{
|
|||||||
const isSongLink = /\?i=\d+$/.test(convertedUrl);
|
const isSongLink = /\?i=\d+$/.test(convertedUrl);
|
||||||
|
|
||||||
return <iframe
|
return <iframe
|
||||||
|
class="embeddedContent"
|
||||||
allow="autoplay *; encrypted-media *; fullscreen *; clipboard-write"
|
allow="autoplay *; encrypted-media *; fullscreen *; clipboard-write"
|
||||||
// @ts-ignore no property
|
// @ts-ignore no property
|
||||||
frameBorder="0"
|
frameBorder="0"
|
||||||
@ -636,6 +642,7 @@ const ParsedNote: Component<{
|
|||||||
const convertedUrl = token.replace(/(?:player\.|www\.)?wavlake\.com/, "embed.wavlake.com");
|
const convertedUrl = token.replace(/(?:player\.|www\.)?wavlake\.com/, "embed.wavlake.com");
|
||||||
|
|
||||||
return <iframe
|
return <iframe
|
||||||
|
class="embeddedContent"
|
||||||
style="borderRadius: 12"
|
style="borderRadius: 12"
|
||||||
src={convertedUrl}
|
src={convertedUrl}
|
||||||
width="100%"
|
width="100%"
|
||||||
|
@ -46,6 +46,7 @@
|
|||||||
|
|
||||||
--border-radius-small: 8px;
|
--border-radius-small: 8px;
|
||||||
--border-radius-big: 12px;
|
--border-radius-big: 12px;
|
||||||
|
--border-radius-large: 16px;
|
||||||
|
|
||||||
--central-content-width: 600px;
|
--central-content-width: 600px;
|
||||||
|
|
||||||
@ -183,13 +184,21 @@ a {
|
|||||||
overflow: hidden;
|
overflow: hidden;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.embeddedContent {
|
||||||
|
margin-block: 12px !important;
|
||||||
|
display: block !important;
|
||||||
|
border-radius: var(--border-radius-large) !important;
|
||||||
|
overflow: hidden !important;
|
||||||
|
}
|
||||||
|
|
||||||
.imageGrid {
|
.imageGrid {
|
||||||
|
margin-block: 12px !important;
|
||||||
display: grid;
|
display: grid;
|
||||||
|
|
||||||
grid-template-columns: 1fr 1fr 1fr 1fr;
|
grid-template-columns: 1fr 1fr 1fr 1fr;
|
||||||
grid-auto-rows: 125px;
|
grid-auto-rows: 125px;
|
||||||
border-radius: 8px;
|
border-radius: var(--border-radius-large) !important;
|
||||||
overflow: hidden;
|
overflow: hidden !important;
|
||||||
grid-gap: 2px;
|
grid-gap: 2px;
|
||||||
|
|
||||||
img {
|
img {
|
||||||
@ -284,7 +293,7 @@ a {
|
|||||||
|
|
||||||
.roundedImage {
|
.roundedImage {
|
||||||
img {
|
img {
|
||||||
border-radius: var(--border-radius-small);
|
border-radius: var(--border-radius-large);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
Loading…
Reference in New Issue
Block a user