-
Notifications
You must be signed in to change notification settings - Fork 8
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
add astro-embed and handle Youtube expand
- Loading branch information
Showing
9 changed files
with
274 additions
and
49 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,28 +1,48 @@ | ||
| --- | ||
| import { cn } from '@/utils/styles'; | ||
| import { YouTube as YouTubeAstroEmbed } from 'astro-embed'; | ||
| export type Props = { | ||
| title: string; | ||
| code: string; | ||
| wide?: boolean; | ||
| }; | ||
| import { cva } from 'class-variance-authority'; | ||
| // add cva | ||
| import type { ComponentProps } from 'astro/types'; | ||
| import type { VariantProps } from 'class-variance-authority'; | ||
| const { title, code, wide } = Astro.props; | ||
| type YouTubeAstroEmbedProps = ComponentProps<typeof YouTubeAstroEmbed>; | ||
| const src = `https://www.youtube-nocookie.com/embed/${code}?autoplay=1&rel=0`; | ||
| const youtubeVariants = cva('', { | ||
| variants: { | ||
| size: { sm: 'max-w-3xl', full: '', 'expand-sm': 'expand-sm', 'expand-lg': 'expand-lg' }, | ||
| }, | ||
| }); | ||
| const playButtonSvg = `<svg height="100%" version="1.1" viewBox="0 0 68 48" width="100%"><path d="M66.52,7.74c-0.78-2.93-2.49-5.41-5.42-6.19C55.79,.13,34,0,34,0S12.21,.13,6.9,1.55 C3.97,2.33,2.27,4.81,1.48,7.74C0.06,13.05,0,24,0,24s0.06,10.95,1.48,16.26c0.78,2.93,2.49,5.41,5.42,6.19 C12.21,47.87,34,48,34,48s21.79-0.13,27.1-1.55c2.93-0.78,4.64-3.26,5.42-6.19C67.94,34.95,68,24,68,24S67.94,13.05,66.52,7.74z" fill="#f00"></path><path d="M 45,24 27,14 27,34" fill="#fff"></path></svg>`; | ||
| export interface Props extends YouTubeAstroEmbedProps, VariantProps<typeof youtubeVariants> { | ||
| class?: string; | ||
| } | ||
| const srcdoc = `<style>*{padding:0;margin:0;overflow:hidden}html,body{height:100%}img{position:absolute;width:100%;top:0;bottom:0;margin:auto}.button{position:absolute;left:50%;top:50%;width:68px;height:48px;margin-left:-34px;margin-top:-24px;}.top{position:absolute;top:18px;left:18px;right:18px;display:flex;flex-wrap:nowrap}.title{color:#fff;font-size:18px;white-space:nowrap;word-wrap:normal;text-shadow:0 0 2px rgba(0,0,0,.5);font-family:"YouTube Noto",Roboto,Arial,Helvetica,sans-serif;line-height:1.3;text-overflow:ellipsis;overflow:hidden;}</style><a href="${src}"><img src="https://img.youtube.com/vi/${code}/sddefault.jpg" alt="${title}"><div class="top"><div class="title">${title}</div></div><div class="button">${playButtonSvg}</div></a>`; | ||
| const { size = 'sm', class: className, ...props } = Astro.props; | ||
| let posterQuality: YouTubeAstroEmbedProps['posterQuality'] = undefined; | ||
| switch (size) { | ||
| case 'full': | ||
| posterQuality = 'high'; | ||
| break; | ||
| case 'expand-sm': | ||
| case 'expand-lg': | ||
| posterQuality = 'max'; | ||
| break; | ||
| default: | ||
| posterQuality = 'default'; | ||
| break; | ||
| } | ||
| --- | ||
|
|
||
| <iframe | ||
| class={cn('aspect-video w-full rounded-lg', { 'expand-sm': wide })} | ||
| src={src} | ||
| title={title} | ||
| srcdoc={srcdoc} | ||
| frameborder="0" | ||
| allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" | ||
| allowfullscreen></iframe> | ||
| <div class={youtubeVariants({ size, className })}> | ||
| <YouTubeAstroEmbed {...props} {posterQuality} /> | ||
| </div> | ||
|
|
||
| <style is:global> | ||
| lite-youtube { | ||
| @apply max-w-none rounded-button; | ||
| } | ||
| </style> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,28 @@ | ||
| --- | ||
| import { cn } from '@/utils/styles'; | ||
| export type Props = { | ||
| title: string; | ||
| code: string; | ||
| wide?: boolean; | ||
| }; | ||
| // add cva | ||
| const { title, code, wide } = Astro.props; | ||
| const src = `https://www.youtube-nocookie.com/embed/${code}?autoplay=1&rel=0`; | ||
| const playButtonSvg = `<svg height="100%" version="1.1" viewBox="0 0 68 48" width="100%"><path d="M66.52,7.74c-0.78-2.93-2.49-5.41-5.42-6.19C55.79,.13,34,0,34,0S12.21,.13,6.9,1.55 C3.97,2.33,2.27,4.81,1.48,7.74C0.06,13.05,0,24,0,24s0.06,10.95,1.48,16.26c0.78,2.93,2.49,5.41,5.42,6.19 C12.21,47.87,34,48,34,48s21.79-0.13,27.1-1.55c2.93-0.78,4.64-3.26,5.42-6.19C67.94,34.95,68,24,68,24S67.94,13.05,66.52,7.74z" fill="#f00"></path><path d="M 45,24 27,14 27,34" fill="#fff"></path></svg>`; | ||
| const srcdoc = `<style>*{padding:0;margin:0;overflow:hidden}html,body{height:100%}img{position:absolute;width:100%;top:0;bottom:0;margin:auto}.button{position:absolute;left:50%;top:50%;width:68px;height:48px;margin-left:-34px;margin-top:-24px;}.top{position:absolute;top:18px;left:18px;right:18px;display:flex;flex-wrap:nowrap}.title{color:#fff;font-size:18px;white-space:nowrap;word-wrap:normal;text-shadow:0 0 2px rgba(0,0,0,.5);font-family:"YouTube Noto",Roboto,Arial,Helvetica,sans-serif;line-height:1.3;text-overflow:ellipsis;overflow:hidden;}</style><a href="${src}"><img src="https://img.youtube.com/vi/${code}/sddefault.jpg" alt="${title}"><div class="top"><div class="title">${title}</div></div><div class="button">${playButtonSvg}</div></a>`; | ||
| --- | ||
|
|
||
| <iframe | ||
| class={cn('aspect-video w-full rounded-lg', { 'expand-sm': wide })} | ||
| src={src} | ||
| title={title} | ||
| srcdoc={srcdoc} | ||
| frameborder="0" | ||
| allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" | ||
| allowfullscreen></iframe> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,34 @@ | ||
| --- | ||
| layout: '../../layouts/Page.astro' | ||
| title: Images, YouTube | ||
| --- | ||
|
|
||
| import YouTube from '../../components/YouTube.old.astro'; | ||
|
|
||
|
|
||
| back to [Index](/design) | ||
|
|
||
|
|
||
| ## YouTube | ||
|
|
||
| ### YouTube default | ||
|
|
||
| <YouTube title="Arjan codes" code="XlnmN4BfCxw" /> | ||
|
|
||
| Irure quis laboris exercitation officia anim deserunt sit laborum non deserunt labore labore consectetur. Aliquip duis velit non velit commodo est sit enim irure sunt sint minim amet. | ||
|
|
||
| ### YouTube expand-sm | ||
|
|
||
| <div class="expand-sm"> | ||
| <YouTube title="Arjan codes" code="eZXXa7ujoks" /> | ||
| </div> | ||
|
|
||
| Veniam adipisicing sunt amet ut nulla. Voluptate pariatur in laborum velit est consectetur aliquip proident culpa. Irure ut non culpa cillum culpa magna amet anim excepteur ex. Cillum velit incididunt dolore ut est aliquip cupidatat ipsum aliquip dolore Lorem deserunt. | ||
|
|
||
| ### YouTube expand-lg | ||
|
|
||
| <div class="expand-lg"> | ||
| <YouTube title="Arjan codes" code="dvyeoDBUtsU" /> | ||
| </div> | ||
|
|
||
| Elit irure nisi id magna consequat eiusmod voluptate minim ullamco dolor id aliqua nulla qui. Qui labore adipisicing aute velit et excepteur nisi pariatur laboris pariatur nostrud tempor. Irure cupidatat dolor dolore duis in nulla cupidatat. Lorem laborum duis exercitation cupidatat tempor elit tempor veniam duis. |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,2 +1,5 @@ | ||
| /** use only for components */ | ||
| /** | ||
| * Use only for components. | ||
| * Unused, use ComponentProps<typeof SomeComponent> instead. | ||
| */ | ||
| export type InferProps<T> = T extends (props: infer P) => JSX.Element ? P : never; |
Oops, something went wrong.