Skip to content

Commit

Permalink
Merge pull request #29 from Jesse-Kramer/story-component
Browse files Browse the repository at this point in the history 
Story component
  • Loading branch information
@Jesse-Kramer
Jesse-Kramer authored Nov 26, 2024
2 parents 08757e5 + 2b57e84 commit 7bc6257
Show file tree
Hide file tree
Showing 20 changed files with 420 additions and 255 deletions.
290 changes: 91 additions & 199 deletions src/components/story.svelte
View file
Original file line number Diff line number Diff line change
@@ -1,208 +1,100 @@
<script>
const stories = [
{ title: "The dinosaur family", description: "Long ago there was a family of dinosaurs that lived in a deserted place The little dinosaur is making a new friend" ,playtime: "1 min, 3 sec"},
{ title: "Six o’clock", description: " A group of friends try to take over the playground. Jesper and Wylan want to take over the swings, but one person stands in their way.", playtime: "3 min, 4 sec"},
{ title: "Toys on the Orient Express", description: "A child looses his toy during a train ride. He is determined to find it back.", playtime: "2 min, 1 sec"}
];
</script>

{#each stories as {title, description, playtime}}
<article class="story-content">
<img src="/Frame 103.svg" class="schildpad" alt="schilpad" />

<div class="tekst">
<p class="title">{title}</p>
<p class="description">{description}</p>
</div>

<img src="/Rectangle 135.svg" class="vlag-icon" alt="engelse-vlag" />

<div class="iconen-onder">
<img src="/Group 316 (1).svg" class="links-onder" alt="playbutton-blue" />
<p class="time">{playtime}</p>

<div class="rechts-onder">
<img src="/Frame 64.svg" class="download-icon" alt="download-icon" />
<img src="/Group 4.svg" class="add-icon" alt="add-icon" />
</div>
</div>
</article>
export let story;
// SELECT THE FIRST AUDIO FILE, EX: NO SPEAKER PROFILE SELECTED
const firstAudio = story.audios?.[0]?.file || null;
</script>
<article class="story-content">
<img src="/Frame 104.svg" class="schildpad" alt="pinguin" />

<div class="tekst">
<p class="title">Six o’clock</p>
<p class="description">
A group of friends try to take over the playground. Jesper and
Wylan want to take over the swings, but one person stands in
their way.
</p>
<li class="story-container">
<div class="story-image flex-items">
<img src="{story.image}" alt="">
</div>

<img
src="/Rectangle 135.svg"
class="vlag-icon"
alt="engelse-vlag"
/>

<div class="iconen-onder">
<img
src="/Group 316 (1).svg"
class="links-onder"
alt="playbutton-blue"
/>
<p class="time">3 min. 5 sec</p>

<div class="rechts-onder">
<img
src="/Frame 64.svg"
class="download-icon"
alt="download-icon"
/>
<img src="/Group 4.svg" class="add-icon" alt="add-icon" />
</div>
<h3 class="story-title">{story.title}</h3>
<div class="story-language flex-items">
<img src="/languages/{story.language}.svg" alt="{story.language} flag">
</div>
</article>

<article class="story-content">
<img src="/Frame 105.svg" class="schildpad" alt="bomen" />

<div class="tekst">
<p class="title">Toys on the Orient Express</p>
<p class="description">
A child looses his toy during a train ride. He is determined to
find it back.
</p>
<p class="story-summary">{story.summary}</p>
<div class="story-playtime flex-items">
<a href={firstAudio} target="_blank"><img src="/icons/story-playtime.svg" alt="Icon for playtime"></a>
<p>{story.playtime}</p>
</div>

<img
src="/Rectangle 135.svg"
class="vlag-icon"
alt="engelse-vlag"
/>

<div class="iconen-onder">
<img
src="/Group 316 (1).svg"
class="links-onder"
alt="playbutton-blue"
/>
<p class="time">3 min. 5 sec</p>

<div class="rechts-onder">
<img
src="/Frame 64.svg"
class="download-icon"
alt="download-icon"
/>
<img src="/Group 4.svg" class="add-icon" alt="add-icon" />
</div>
<div class="story-icons flex-items">
<img src="/icons/download-icon.svg" alt="Icon for download">
<img src="/icons/add-to-playlist.svg" alt="Icon for adding to playlist">
</div>
</article>

{/each}
</li>
<style>
:root {
--card-bg-color: #f3f3f3;
}
p {
font-size: var(--card-time-font-size);
line-height: 12px;
text-align: left;
}
article.story-content {
display: flex;
flex-direction: row;
justify-content: center;
align-items: center;
width: 300px;
max-width: 800px;
height: 65px;
background-color: var(--card-bg-color);
padding: 20px;
position: relative;
margin: 5px;
border-radius: 10px;
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
margin-left: 155px;
}
.title {
font-weight: 600;
font-size: 12px;
line-height: 15px;
margin-bottom: 5px;
margin-top: 5px;
}
.description {
margin-bottom: 35px;
line-height: 12px;
width: 220px;
text-overflow: ellipsis;
overflow: hidden;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
white-space: normal;
font-size: 10px;
}
.time {
margin-top: 10px;
margin-right: 129px;
}
.tekst {
flex-grow: 1;
font-size: 8px;
padding: 0;
}
img.schildpad {
object-fit: cover;
width: 70px;
height: 75px;
border-radius: 8px;
margin-bottom: 5px;
margin-right: 2px;
margin-left: 0;
transform: translateX(-8px);
}
.vlag-icon {
position: absolute;
top: 11px;
right: 10px;
}
.iconen-onder {
position: absolute;
margin-right: 10px;
margin-bottom: 5px;
margin-top: 10px;
bottom: 5px;
left: 0;
right: 0;
display: flex;
justify-content: space-between;
}
.links-onder {
margin-left: 93px;
}
.rechts-onder {
display: flex;
align-items: center;
gap: 5px;
margin-top: 2px;
}
</style> -->
li {
width: 22.5em;
max-height: 5.3em;
display: grid;
grid-template-columns: repeat(6, auto);
grid-template-rows: repeat(3, 1fr);
background-color: #fff;
overflow: hidden;
padding: 10px;
border-radius: 4px;
color: black;
}
.story-title {
font-size: 10px;
font-weight: 600;
grid-area: 1 / 3 / 2 / 6;
}
p {
font-size: 8px;
}
img {
max-width: 1.1em;
}
.story-image {
grid-area: 1 / 1 / 4 / 2;
}
.story-image img{
max-width: 3.75em;
min-height: 4em;
object-fit: cover;
}
.story-language {
grid-area: 1 / 6 / 2 / 7;
justify-content: flex-end;
}
.story-summary {
grid-area: 2 / 3 / 3 / 7;
width: 275px;
max-height: 1.5em;
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 2;
line-clamp: 2;
overflow: hidden;
}
.story-playtime {
grid-area: 3 / 3 / 4 / 6;
}
.story-playtime a {
display: flex;
align-items: center;
}
.story-icons {
grid-area: 3 / 6 / 4 / 7;
justify-content: flex-end;
}
.flex-items {
display: flex;
align-items: center;
gap: 8px;
}
</style>
93 changes: 93 additions & 0 deletions src/lib/api.js
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,93 @@
import getDirectusInstance from '$lib/directus';
import { readItems } from '@directus/sdk';

// Helper function to fetch data for a specific collection
export async function fetchCollection(fetch, collectionName) {
const directus = getDirectusInstance(fetch);
return await directus.request(readItems(collectionName));
}

// Helper function to fetch all required data
export async function fetchAllData(fetch) {
const directus = getDirectusInstance(fetch);

// Fetch all required data in parallel
const [
accounts,
profiles,
profileStatistics,
buddys,
languages,
audios,
playlists,
speakers,
stories,
likes
] = await Promise.all([
fetchCollection(fetch, 'tm_users'),
fetchCollection(fetch, 'tm_profile'),
fetchCollection(fetch, 'tm_profile_statistics'),
fetchCollection(fetch, 'tm_buddy'),
fetchCollection(fetch, 'tm_language'),
fetchCollection(fetch, 'tm_audio'),
fetchCollection(fetch, 'tm_playlist'),
fetchCollection(fetch, 'tm_speaker_profile'),
fetchCollection(fetch, 'tm_story'),
fetchCollection(fetch, 'tm_likes')
]);

return {
accounts,
profiles,
profileStatistics,
buddys,
languages,
audios,
playlists,
speakers,
stories,
likes
};
}

// Helper function to convert seconds to "min sec" format
function formatPlaytime(seconds) {
const minutes = Math.floor(seconds / 60); // Calculate minutes
const remainingSeconds = seconds % 60; // Calculate remaining seconds
return `${minutes} min ${remainingSeconds} sec`;
}

// Helper function to enrich stories with audio and language details
export function mapStoriesWithDetails(stories, audios, languages) {
const assetBaseUrl = "https://fdnd-agency.directus.app/assets/";

return stories.map((story) => {
const language = languages.find((lang) => lang.id === story.language)?.language || "unknown.svg";
const storyAudios = story.audio.map((audioId) => {
const audioData = audios.find((audio) => audio.id === audioId);
if (audioData) {

return {
id: audioData.id,
file: `${assetBaseUrl}${audioData.audio_file}`,
voice_colours: audioData.voice_colours,
speaker_profile: audioData.speaker_profile
};
}
return null;
}).filter(Boolean);

story.image = story.image ? `${assetBaseUrl}${story.image}` : "unknown.svg";

if (story.playtime) {
story.playtime = formatPlaytime(story.playtime);
}

story.language = language;

return {
...story,
audios: storyAudios
};
});
}
Loading

0 comments on commit 7bc6257

Please sign in to comment.