kopia lustrzana https://github.com/learn-awesome/learndb
60 wiersze
2.6 KiB
Svelte
60 wiersze
2.6 KiB
Svelte
<script>
|
|
// import ButtonGroup from "./ButtonGroup.svelte";
|
|
// import { oEmdedProviders } from "./oEmbedProviders.js"
|
|
export let item;
|
|
let oEmded_image_ytb_url = null;
|
|
|
|
function oEmded_image(item){
|
|
let youtubeformat = item.links.find(s => s.startsWith('video|') && (s.includes('youtube.com') || s.includes('youtu.be')));
|
|
let youtubeurl = youtubeformat && youtubeformat.split('|')[1];
|
|
|
|
if(!youtubeurl) return;
|
|
|
|
return `https://www.youtube.com/oembed?url=${youtubeurl}&format=json`
|
|
}
|
|
|
|
$: oEmded_image(item) && fetch(oEmded_image(item))
|
|
.then( r => r.json())
|
|
.then(data => {
|
|
oEmded_image_ytb_url = data.thumbnail_url
|
|
});
|
|
|
|
</script>
|
|
|
|
|
|
<a class="flex flex-wrap overflow-hidden rounded-lg duration-300 break-inside-avoid max-w-lg border-secondary" href="#/item/{item.id}">
|
|
<div class="relative w-full max-w-sm w-full md:w-64 ring-black/5 rounded-xl flex flex-col items-center">
|
|
<div class="h-36 w-full md:w-64 flex justify-center items-center relative ">
|
|
|
|
{#if item.image || oEmded_image_ytb_url}
|
|
|
|
<div class="rounded-md overflow-hidden">
|
|
<img src={item.image || oEmded_image_ytb_url} class="object-contain w-48 h-36" alt="{item.name}">
|
|
<div class="absolute inset-0 w-full h-full flex items-center justify-center" aria-hidden="true">
|
|
<svg class="h-12 w-12 text-indigo-500" fill="currentColor" viewBox="0 0 84 84"><circle opacity="0.9" cx="42" cy="42" r="42" fill="white"></circle><path d="M55.5039 40.3359L37.1094 28.0729C35.7803 27.1869 34 28.1396 34 29.737V54.263C34 55.8604 35.7803 56.8131 37.1094 55.9271L55.5038 43.6641C56.6913 42.8725 56.6913 41.1275 55.5039 40.3359Z"></path></svg>
|
|
</div>
|
|
|
|
</div>
|
|
|
|
{:else}
|
|
|
|
<div class="w-full flex justify-center items-center rounded-lg">
|
|
<div class="w-48 h-36 bg-primary rounded-md"></div>
|
|
<div class="absolute inset-0 w-full h-full flex items-center justify-center" aria-hidden="true">
|
|
<svg class="h-12 w-12 text-indigo-500" fill="currentColor" viewBox="0 0 84 84"><circle opacity="0.9" cx="42" cy="42" r="42" fill="white"></circle><path d="M55.5039 40.3359L37.1094 28.0729C35.7803 27.1869 34 28.1396 34 29.737V54.263C34 55.8604 35.7803 56.8131 37.1094 55.9271L55.5038 43.6641C56.6913 42.8725 56.6913 41.1275 55.5039 40.3359Z"></path></svg>
|
|
</div>
|
|
</div>
|
|
|
|
|
|
{/if}
|
|
</div>
|
|
|
|
<div class="flex flex-col my-5 w-48">
|
|
<strong class="font-extrabold">{item.name}</strong>
|
|
{#if item.creators}<span class="text-sm font-medium">{item.creators}</span>{/if}
|
|
</div>
|
|
|
|
</div>
|
|
</a>
|
|
|