add video to embed (#5145)
parent
fcf27f0512
commit
5dcb52015c
|
@ -0,0 +1 @@
|
||||||
|
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"><path fill="#fff" d="M9.576 2.534C7.578 1.299 5 2.737 5 5.086v13.828c0 2.35 2.578 3.787 4.576 2.552l11.194-6.914c1.899-1.172 1.899-3.932 0-5.104L9.576 2.534Z"/></svg>
|
After Width: | Height: | Size: 239 B |
|
@ -9,7 +9,7 @@
|
||||||
"lint": "eslint --cache --ext .js,.jsx,.ts,.tsx src"
|
"lint": "eslint --cache --ext .js,.jsx,.ts,.tsx src"
|
||||||
},
|
},
|
||||||
"dependencies": {
|
"dependencies": {
|
||||||
"@atproto/api": "0.13.1",
|
"@atproto/api": "0.13.6",
|
||||||
"@preact/preset-vite": "^2.8.2",
|
"@preact/preset-vite": "^2.8.2",
|
||||||
"@vitejs/plugin-legacy": "^5.3.2",
|
"@vitejs/plugin-legacy": "^5.3.2",
|
||||||
"preact": "^10.4.8",
|
"preact": "^10.4.8",
|
||||||
|
|
|
@ -3,6 +3,7 @@ import {
|
||||||
AppBskyEmbedImages,
|
AppBskyEmbedImages,
|
||||||
AppBskyEmbedRecord,
|
AppBskyEmbedRecord,
|
||||||
AppBskyEmbedRecordWithMedia,
|
AppBskyEmbedRecordWithMedia,
|
||||||
|
AppBskyEmbedVideo,
|
||||||
AppBskyFeedDefs,
|
AppBskyFeedDefs,
|
||||||
AppBskyFeedPost,
|
AppBskyFeedPost,
|
||||||
AppBskyGraphDefs,
|
AppBskyGraphDefs,
|
||||||
|
@ -14,6 +15,7 @@ import {ComponentChildren, h} from 'preact'
|
||||||
import {useMemo} from 'preact/hooks'
|
import {useMemo} from 'preact/hooks'
|
||||||
|
|
||||||
import infoIcon from '../../assets/circleInfo_stroke2_corner0_rounded.svg'
|
import infoIcon from '../../assets/circleInfo_stroke2_corner0_rounded.svg'
|
||||||
|
import playIcon from '../../assets/play_filled_corner2_rounded.svg'
|
||||||
import starterPackIcon from '../../assets/starterPack.svg'
|
import starterPackIcon from '../../assets/starterPack.svg'
|
||||||
import {CONTENT_LABELS, labelsToInfo} from '../labels'
|
import {CONTENT_LABELS, labelsToInfo} from '../labels'
|
||||||
import {getRkey} from '../utils'
|
import {getRkey} from '../utils'
|
||||||
|
@ -160,7 +162,12 @@ export function Embed({
|
||||||
return null
|
return null
|
||||||
}
|
}
|
||||||
|
|
||||||
// Case 4: Record with media
|
// Case 4: Video
|
||||||
|
if (AppBskyEmbedVideo.isView(content)) {
|
||||||
|
return <VideoEmbed content={content} />
|
||||||
|
}
|
||||||
|
|
||||||
|
// Case 5: Record with media
|
||||||
if (
|
if (
|
||||||
AppBskyEmbedRecordWithMedia.isView(content) &&
|
AppBskyEmbedRecordWithMedia.isView(content) &&
|
||||||
AppBskyEmbedRecord.isViewRecord(content.record.record)
|
AppBskyEmbedRecord.isViewRecord(content.record.record)
|
||||||
|
@ -354,6 +361,31 @@ function GenericWithImageEmbed({
|
||||||
)
|
)
|
||||||
}
|
}
|
||||||
|
|
||||||
|
// just the thumbnail and a play button
|
||||||
|
function VideoEmbed({content}: {content: AppBskyEmbedVideo.View}) {
|
||||||
|
let aspectRatio = 1
|
||||||
|
|
||||||
|
if (content.aspectRatio) {
|
||||||
|
const {width, height} = content.aspectRatio
|
||||||
|
aspectRatio = clamp(width / height, 1 / 1, 3 / 1)
|
||||||
|
}
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div
|
||||||
|
className="w-full overflow-hidden rounded-lg aspect-square"
|
||||||
|
style={{aspectRatio: `${aspectRatio} / 1`}}>
|
||||||
|
<img
|
||||||
|
src={content.thumbnail}
|
||||||
|
alt={content.alt}
|
||||||
|
className="object-cover size-full"
|
||||||
|
/>
|
||||||
|
<div className="size-24 absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 rounded-full bg-black/50 flex items-center justify-center">
|
||||||
|
<img src={playIcon} className="object-cover size-3/5" />
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
|
||||||
function StarterPackEmbed({
|
function StarterPackEmbed({
|
||||||
content,
|
content,
|
||||||
}: {
|
}: {
|
||||||
|
@ -410,3 +442,7 @@ function getStarterPackHref(
|
||||||
const handleOrDid = starterPack.creator.handle || starterPack.creator.did
|
const handleOrDid = starterPack.creator.handle || starterPack.creator.did
|
||||||
return `/starter-pack/${handleOrDid}/${rkey}`
|
return `/starter-pack/${handleOrDid}/${rkey}`
|
||||||
}
|
}
|
||||||
|
|
||||||
|
function clamp(num: number, min: number, max: number) {
|
||||||
|
return Math.max(min, Math.min(num, max))
|
||||||
|
}
|
||||||
|
|
|
@ -20,15 +20,15 @@
|
||||||
"@jridgewell/gen-mapping" "^0.3.5"
|
"@jridgewell/gen-mapping" "^0.3.5"
|
||||||
"@jridgewell/trace-mapping" "^0.3.24"
|
"@jridgewell/trace-mapping" "^0.3.24"
|
||||||
|
|
||||||
"@atproto/api@0.13.1":
|
"@atproto/api@0.13.6":
|
||||||
version "0.13.1"
|
version "0.13.6"
|
||||||
resolved "https://registry.yarnpkg.com/@atproto/api/-/api-0.13.1.tgz#fbf4306e4465d5467aaf031308c1b47dcc8039d0"
|
resolved "https://registry.yarnpkg.com/@atproto/api/-/api-0.13.6.tgz#2500e9d7143e6718089632300c42ce50149f8cd5"
|
||||||
integrity sha512-DL3iBfavn8Nnl48FmnAreQB0k0cIkW531DJ5JAHUCQZo10Nq0ZLk2/WFxcs0KuBG5wuLnGUdo+Y6/GQPVq8dYw==
|
integrity sha512-58emFFZhqY8nVWD3xFWK0yYqAmJ2un+NaTtZxBbRo00mGq1rz9VXTpVmfoHFcuXL1hoDQN3WyJfsub8r6xGOgg==
|
||||||
dependencies:
|
dependencies:
|
||||||
"@atproto/common-web" "^0.3.0"
|
"@atproto/common-web" "^0.3.0"
|
||||||
"@atproto/lexicon" "^0.4.1"
|
"@atproto/lexicon" "^0.4.1"
|
||||||
"@atproto/syntax" "^0.3.0"
|
"@atproto/syntax" "^0.3.0"
|
||||||
"@atproto/xrpc" "^0.6.0"
|
"@atproto/xrpc" "^0.6.1"
|
||||||
await-lock "^2.2.2"
|
await-lock "^2.2.2"
|
||||||
multiformats "^9.9.0"
|
multiformats "^9.9.0"
|
||||||
tlds "^1.234.0"
|
tlds "^1.234.0"
|
||||||
|
@ -59,10 +59,10 @@
|
||||||
resolved "https://registry.yarnpkg.com/@atproto/syntax/-/syntax-0.3.0.tgz#fafa2dbea9add37253005cb663e7373e05e618b3"
|
resolved "https://registry.yarnpkg.com/@atproto/syntax/-/syntax-0.3.0.tgz#fafa2dbea9add37253005cb663e7373e05e618b3"
|
||||||
integrity sha512-Weq0ZBxffGHDXHl9U7BQc2BFJi/e23AL+k+i5+D9hUq/bzT4yjGsrCejkjq0xt82xXDjmhhvQSZ0LqxyZ5woxA==
|
integrity sha512-Weq0ZBxffGHDXHl9U7BQc2BFJi/e23AL+k+i5+D9hUq/bzT4yjGsrCejkjq0xt82xXDjmhhvQSZ0LqxyZ5woxA==
|
||||||
|
|
||||||
"@atproto/xrpc@^0.6.0":
|
"@atproto/xrpc@^0.6.1":
|
||||||
version "0.6.0"
|
version "0.6.1"
|
||||||
resolved "https://registry.yarnpkg.com/@atproto/xrpc/-/xrpc-0.6.0.tgz#668c3262e67e2afa65951ea79a03bfe3720ddf5c"
|
resolved "https://registry.yarnpkg.com/@atproto/xrpc/-/xrpc-0.6.1.tgz#dcd1315c8c60eef5af2db7fa4e35a38ebc6d79d5"
|
||||||
integrity sha512-5BbhBTv5j6MC3iIQ4+vYxQE7nLy2dDGQ+LYJrH8PptOCUdq0Pwg6aRccQ3y52kUZlhE/mzOTZ8Ngiy9pSAyfVQ==
|
integrity sha512-Zy5ydXEdk6sY7FDUZcEVfCL1jvbL4tXu5CcdPqbEaW6LQtk9GLds/DK1bCX9kswTGaBC88EMuqQMfkxOhp2t4A==
|
||||||
dependencies:
|
dependencies:
|
||||||
"@atproto/lexicon" "^0.4.1"
|
"@atproto/lexicon" "^0.4.1"
|
||||||
zod "^3.23.8"
|
zod "^3.23.8"
|
||||||
|
|
Loading…
Reference in New Issue