From 81eeff428e4b621503cf7bfedd2c504ff29889a2 Mon Sep 17 00:00:00 2001
From: Mitko Nikov <mitko.nikov@student.um.si>
Date: Mon, 12 Feb 2024 23:05:59 +0100
Subject: [PATCH] Query data from our server.

---
 cinefolio2/src/app.css                     |   2 +-
 cinefolio2/src/components/Hoverable.svelte |   1 +
 cinefolio2/src/components/Playlist.svelte  |  54 +++++-----
 cinefolio2/src/components/Slide.svelte     | 112 ++++++++++++++++++---
 cinefolio2/src/lib/constants.ts            |   2 +
 cinefolio2/src/routes/+page.svelte         |  42 ++++----
 cinefolio2/src/types/film.ts               |  16 +--
 cinefolio2/src/types/playlist.ts           |   5 +
 8 files changed, 164 insertions(+), 70 deletions(-)
 create mode 100644 cinefolio2/src/lib/constants.ts
 create mode 100644 cinefolio2/src/types/playlist.ts

diff --git a/cinefolio2/src/app.css b/cinefolio2/src/app.css
index 3d6598e..cb57965 100644
--- a/cinefolio2/src/app.css
+++ b/cinefolio2/src/app.css
@@ -10,7 +10,7 @@ html, body {
 body {
 	margin: 0;
 	box-sizing: border-box;
-	overflow: hidden;
+    overflow-x: hidden;
 }
 
 main {
diff --git a/cinefolio2/src/components/Hoverable.svelte b/cinefolio2/src/components/Hoverable.svelte
index b19ec8a..a604cd7 100644
--- a/cinefolio2/src/components/Hoverable.svelte
+++ b/cinefolio2/src/components/Hoverable.svelte
@@ -18,5 +18,6 @@
 <style>
 	.hoverable {
 		display: inline-block;
+		width: 100%;
 	}
 </style>
\ No newline at end of file
diff --git a/cinefolio2/src/components/Playlist.svelte b/cinefolio2/src/components/Playlist.svelte
index dcb0a67..d65730c 100644
--- a/cinefolio2/src/components/Playlist.svelte
+++ b/cinefolio2/src/components/Playlist.svelte
@@ -1,13 +1,13 @@
 <script lang="ts">
-    export let repositoryName;
-    export let displayName = repositoryName;
+    export let playlist: IPlaylist;
 
-    import { db } from '$lib/firebase';
-	import { collection, getDocs, limit, orderBy, query } from 'firebase/firestore';
+	import { onMount } from 'svelte';
     import Slide from './../components/Slide.svelte';
+	import type { IFilm } from '../types/film';
+	import type { IPlaylist } from '../types/playlist';
+	import { API_URL } from '$lib/constants';
 
     import { Splide, SplideSlide } from '@splidejs/svelte-splide';
-
     import '@splidejs/svelte-splide/css';
     import '@splidejs/svelte-splide/css/sea-green';
     import './../css/splide.css';
@@ -32,35 +32,33 @@
         }
     };
 
+    let videos: IFilm[] = [];
     $: splideInit = false;
 
-    // @ts-ignore
-    /**
-	 * @type {any[]}
-	 */
-    let videos: string | any[] = [];
+    onMount(async () => {
+        fetch(`${API_URL}/query/films/${playlist.name}`, {
+            method: 'GET',
+            mode: 'cors'
+        }).then((response) => response.json())
+        .then((value) => {
+            videos = value.files;
+            if (videos.length > 0) {
+                splideInit = true;
+            }
 
-    const q = query(collection(db, repositoryName), orderBy('timestamp', 'desc'), limit(5));
-    // @ts-ignore
-    const querySnapshot = getDocs(q).then((snapshot) => {
-        snapshot.forEach((doc) => {
-            videos = [...videos, (doc.data())];
+            videos.sort((a: IFilm, b: IFilm) => {
+                let dateA = new Date(a.published);
+                let dateB = new Date(b.published);
+                return Number(dateB) - Number(dateA);
+            });
         });
-        while (videos.length < 12) {
-            videos = [...videos, ...videos];
-        }
-        while (videos.length > 12) {
-            (videos as []).pop();
-        }
-        videos = [...videos];
-        splideInit = true;
     });
 </script>
 
 <div class="playlist-wrapper">
-    <div class="title">{displayName}</div>
-    <div class="videos-slider">
-        {#if splideInit}
+    {#if splideInit}
+        <div class="title">{playlist.name}</div>
+        <div class="videos-slider">
             <Splide aria-label="Playlist" options={splideOptions}>
                 {#each videos as video}
                     <SplideSlide>
@@ -68,8 +66,8 @@
                     </SplideSlide>
                 {/each}
             </Splide>
-        {/if}
-    </div>
+        </div>
+    {/if}
 </div>
 
 <style>
diff --git a/cinefolio2/src/components/Slide.svelte b/cinefolio2/src/components/Slide.svelte
index c48d850..aa095f6 100644
--- a/cinefolio2/src/components/Slide.svelte
+++ b/cinefolio2/src/components/Slide.svelte
@@ -4,9 +4,13 @@
 	import type { IFilm } from "../types/film";
     import Play from "svelte-material-icons/Play.svelte";
 	import IconButton from "./IconButton.svelte";
+	import { STATIC_URL } from "$lib/constants";
+	import { onMount } from "svelte";
 
     export let data: IFilm;
 
+    $: imgStyle = '';
+
 	// We check if data saver is enabled on the device
     let dataSaver = false;
     if ("connection" in navigator) {
@@ -16,6 +20,43 @@
         }
 	}
 
+    function getYouTubeID(url: string) {
+        // Regular expression to find YouTube video ID
+        var regExp = /^(?:https?:\/\/)?(?:www\.)?(?:youtube\.com\/(?:[^\/\n\s]+\/\S+\/|(?:v|e(?:mbed)?)\/|\S*?[?&]v=)|youtu\.be\/)([a-zA-Z0-9_-]{11})/;
+        var match = url.match(regExp);
+        if (match && match[1]) {
+            return match[1];
+        } else {
+            return null;
+        }
+    }
+
+    function getVimeoID(url: string) {
+        let s = url.split('/');
+        return s[s.length - 1];
+    }
+
+    function getThumbnailPath() {
+        if (data.thumbnail) {
+            return `${STATIC_URL}/thumbs/${data.thumbnail.filepath}`;
+        } else if (data.link) {
+            if (data.link.includes('vimeo')) {
+                const VimeoID = getVimeoID(data.link);
+                return `https://vumbnail.com/${VimeoID}.jpg`;
+            } else {
+                const YoutubeID = getYouTubeID(data.link);
+                return `https://img.youtube.com/vi/${YoutubeID}/sddefault.jpg`;
+            }
+        }
+        return "";
+    }
+
+    onMount(() => {
+        let thumbnailLink = getThumbnailPath();
+        let backgroundSize = (data.thumbnail && data.thumbnail.crop ? ' background-size: 132%' : '');
+        imgStyle = `background-image: url(${thumbnailLink});` + backgroundSize;
+    });
+
     let showModal = false;
 </script>
 
@@ -29,14 +70,25 @@
         }}
     >
         <div class="frame-container">
-            <img src={data.thumb} class="thumbnail" alt={data.alt} />
+            <div class="thumbnail-container" style={imgStyle}></div>
             {#if hovering}
                 <div class="slide-overlay"></div>
                 <div class="text-container noselect">
                     <div>
                         <div class="text-title">{data.title}</div>
-                        <div class="text-content">{data.content}</div>
-                        <div class="timestamp">  Published {data.timestamp.toDate().getFullYear()}</div>
+                        <div class="text-content">{data.description ? data.description : ""}</div>
+                        <div class="timestamp">  Published {new Date(data.published).getFullYear()}</div>
+                    </div>
+                </div>
+            {:else}
+                <div class="text-thumb-container noselect">
+                    <div class="thumbnail-title-container">
+                        {#if data.title.split('-').length == 1}
+                            <div class="text-thumb-title">{data.title}</div>
+                        {:else}
+                            <div class="text-thumb-title">{data.title.split('-')[0]}</div>
+                            <div class="text-thumb-title">{data.title.split('-')[1]}</div>
+                        {/if}
                     </div>
                 </div>
             {/if}
@@ -46,10 +98,14 @@
 
 <Modal bind:showModal>
     <div class="thumbnail-container">
-        <img src={data.thumb} class="thumbnail" alt={data.alt} />
+        <img src={getThumbnailPath()} class="thumbnail" alt={data.title} />
         <div class="play-btn">
             <IconButton on:click={() => {
-                window.open(data.link, "_black");
+                if (data.link) {
+                    window.open(data.link, "_black");
+                } else {
+                    window.open(`${STATIC_URL}/files/${data.filepath}`);
+                }
             }}>
                 <Play></Play>
             </IconButton>
@@ -58,17 +114,20 @@
     <div class="modal-info noselect">
         <div>
             <div class="text-title">{data.title}</div>
-            <div class="text-content">{data.content}</div>
-            <div class="timestamp">  Published {data.timestamp.toDate().getFullYear()}</div>
+            <div class="text-content">{data.description ? data.description : ""}</div>
+            <div class="timestamp">  Published {new Date(data.published).getFullYear()}</div>
         </div>
     </div>
 </Modal>
 
 <style>
-    .thumbnail {
-        background-color: rgba(0, 0, 0, 0.5);
+    .thumbnail-container {
+        width: 100%;
+        aspect-ratio: 16 / 9;
+        background-size: cover;
+        background-position: center;
     }
-
+    
     .slide {
         -webkit-box-shadow: 4px 10px 13px -5px rgba(0, 0, 0, 0.64);
         -moz-box-shadow: 4px 10px 13px -5px rgba(0, 0, 0, 0.64);
@@ -80,7 +139,7 @@
     .slide {
         margin: 0.2em;
         cursor: pointer;
-		border-radius: 0.3em;
+		border-radius: 0.8em;
 		background-color: rgba(0, 0, 0, 0.9);
     }
 
@@ -102,9 +161,27 @@
         bottom: 0;
     }
 
-    .slide-overlay {
+    .text-thumb-container {
+        padding: 0.5em 1em 0.9em 1em;
+		position: absolute;
+        display: flex;
+        align-items: left;
+        justify-content: center;
+        flex-direction: column;
+        z-index: 10000;
+        top: 0;
+        bottom: 0;
+    }
+
+    .thumbnail-title-container {
+        padding: 0.5em 0.5em;
+        border-radius: 0.2em;
+        background-color: rgba(0, 0, 0, 0.8);
+    }
+
+    .slide-overlay, .slide-thumb-overlay {
         background-color: black;
-        opacity: 0.5;
+        opacity: 0.6;
         position: absolute;
         height: 100%;
         width: 100%;
@@ -118,6 +195,11 @@
         margin-bottom: 0.4em;
     }
 
+    .text-thumb-title {
+        font-weight: 700;
+        font-size: 1em;
+    }
+
     .text-content {
         font-size: 0.8em;
     }
@@ -166,5 +248,9 @@
         .modal-info .text-content {
             font-size: 0.8em;
         }
+
+        .text-thumb-container {
+            display: none;
+        }
     }
 </style>
diff --git a/cinefolio2/src/lib/constants.ts b/cinefolio2/src/lib/constants.ts
new file mode 100644
index 0000000..866e714
--- /dev/null
+++ b/cinefolio2/src/lib/constants.ts
@@ -0,0 +1,2 @@
+export const API_URL = 'http://85.31.239.84/cinefolio/api';
+export const STATIC_URL = 'http://85.31.239.84/cinefolio/public';
diff --git a/cinefolio2/src/routes/+page.svelte b/cinefolio2/src/routes/+page.svelte
index b4520e3..4747f7c 100644
--- a/cinefolio2/src/routes/+page.svelte
+++ b/cinefolio2/src/routes/+page.svelte
@@ -1,38 +1,38 @@
 <script lang="ts">
-    // import { collectionData } from 'rxfire/firestore';
-    // import { startWith } from 'rxjs/operators';
-    // import { db } from '$lib/firebase';
-	// import { collection, getDocs, limit, query } from 'firebase/firestore';
+	import { onMount } from 'svelte';
     import Playlist from './../components/Playlist.svelte';
+    import { type IPlaylist } from './../types/playlist';
+	import { API_URL } from '$lib/constants';
+
+    let playlists: IPlaylist[] = [];
+    $: playlistsLoaded = false;
+
+    onMount(async () => {
+        fetch(`${API_URL}/query/playlists/Cinefolio`, {
+            method: 'GET',
+            mode: 'cors'
+        }).then((response) => response.json())
+        .then((value) => {
+            playlists = value.playlists;
+            playlistsLoaded = true;
+        });
+    });
 </script>
 
 <main>
-	<div class="bg-img" />
-
     <div class="noselect" id="logo">
         <div id="main-logo">cinefolio</div>
         <div class="logo-dec"></div>
     </div>
 	
     <div id="videos-container-center">
-        <Playlist repositoryName={"Videos"} displayName={"Latest"}/>
-        <Playlist repositoryName={"Strumica Open Festival"}/>
+        {#each playlists as playlist}
+            <Playlist playlist={playlist}/>
+        {/each}
     </div>
 </main>
 
 <style>
-	.bg-img {
-		overflow: hidden;
-		position: absolute;
-		width: 100vw;
-		height: 100vh;
-		background-image: url('/img/Stars.jpg');
-		background-repeat: no-repeat;
-		background-size: cover;
-		opacity: 0.3;
-        z-index: -1;
-	}
-
     #logo {
         width: 100%;
         text-align: center;
@@ -64,8 +64,6 @@
     #videos-container-center {
         position: relative;
         padding-top: 2em;
-        width: 100%;
-        height: 100%;
     }
 
     @media only screen and (max-width: 600px) {
diff --git a/cinefolio2/src/types/film.ts b/cinefolio2/src/types/film.ts
index 26b6562..de14020 100644
--- a/cinefolio2/src/types/film.ts
+++ b/cinefolio2/src/types/film.ts
@@ -1,11 +1,15 @@
-import type { Timestamp } from "firebase/firestore";
+export interface IThumbnail {
+    title: string;
+    filepath: string;
+    crop: boolean;
+}
 
 export interface IFilm {
-    thumb : string;
-    alt : string;
     title : string;
-    content : string;
-    link : string;
-	timestamp : Timestamp;
+    description : string;
+    filepath: string;
+    link : string | undefined;
+    thumbnail : IThumbnail;
+	published : string;
 	embedlink : string;
 };
diff --git a/cinefolio2/src/types/playlist.ts b/cinefolio2/src/types/playlist.ts
new file mode 100644
index 0000000..460f0d6
--- /dev/null
+++ b/cinefolio2/src/types/playlist.ts
@@ -0,0 +1,5 @@
+export interface IPlaylist {
+    name: string;
+    site: string;
+};
+