src/routes/language.svelte

   1 <!-- This file is part of api-worker <https://github.com/senpy-club/api-worker>.
   2 Copyright (C) 2022-2022 Fuwn <contact@fuwn.me>
   3
   4 This program is free software: you can redistribute it and/or modify
   5 it under the terms of the GNU General Public License as published by
   6 the Free Software Foundation, version 3.
   7
   8 This program is distributed in the hope that it will be useful, but
   9 WITHOUT ANY WARRANTY; without even the implied warranty of
  10 MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the GNU
  11 General Public License for more details.
  12
  13 You should have received a copy of the GNU General Public License
  14 along with this program. If not, see <http://www.gnu.org/licenses/>.
  15
  16 Copyright (C) 2022-2022 Fuwn <contact@fuwn.me>
  17 SPDX-License-Identifier: GPL-3.0-only -->
  18 <script>
  19   import { onMount } from "svelte";
  20   import { fetchImages } from "$lib/api";
  21   import { page } from "$app/stores";
  22
  23   const errorImages = [
  24     "https://www.pngarts.com/files/8/Confused-Anime-Transparent-Image.png",
  25     "https://cdn130.picsart.com/246838980018212.png?r1024x1024",
  26     "https://toppng.com/public/uploads/thumbnail/confused-anime-png-anime-question-png-gif-11563638774nccphyut3x.png",
  27     "https://linuxreviews.org/images/8/8d/Blond-anime-girl-with-red-questionmark.png",
  28     "https://external-preview.redd.it/VNfYgsb6Pqn4xlEBpYl11534fIpOfN1XeMe7NrzgmQs.png?width=282&auto=webp&s=3247341e1cb8a6d6f63b7b3d63809e52ca0558fd",
  29     "https://i.ya-webdesign.com/images/confused-anime-png-5.png",
  30     "https://www.pngarts.com/files/8/Confused-Anime-PNG-Picture.png",
  31     "https://64.media.tumblr.com/20fb900f57db568393387211c9c4760c/tumblr_olanyyuuQZ1tbejoso2_400.png",
  32     "https://stickershop.line-scdn.net/stickershop/v1/product/7982958/LINEStorePC/main.png;compress=true",
  33     "https://emoji.gg/assets/emoji/8573_Shikiconfused.png",
  34     "https://i.imgur.com/TOgxESH.jpg",
  35   ];
  36
  37   let language = $page.url.searchParams.get("language");
  38   let images, fetchTime, image, imageSize;
  39   let complete = false;
  40   let imageQuery = $page.url.searchParams.get("image");
  41
  42   onMount(async () => {
  43     fetchTime = performance.now();
  44     images = await fetchImages(language);
  45     fetchTime = performance.now() - fetchTime;
  46     complete = true;
  47
  48     if (imageQuery) {
  49       image = images.filter(i => i.includes(imageQuery));
  50
  51       if (!image[0]) {
  52         image = "https://www.pngarts.com/files/8/Confused-Anime-Transparent-Image.png";
  53         image = errorImages[Math.floor(Math.random() * errorImages.length)];
  54       } else {
  55         let xhr = new XMLHttpRequest();
  56
  57         xhr.open("HEAD", image, true);
  58         xhr.onreadystatechange = () => {
  59           if (xhr.readyState === 4) {
  60             if (xhr.status === 200) {
  61               imageSize = `${xhr.getResponseHeader("Content-Length") / 1024}`;
  62             } else {
  63               imageSize = "Error";
  64             }
  65           }
  66         }
  67         xhr.send(null);
  68       }
  69     }
  70   });
  71 </script>
  72
  73 <svelte:head>
  74   <title>{language} | The Senpy Club</title>
  75 </svelte:head>
  76
  77 <div class="content">
  78   <h1>{language}</h1>
  79
  80   {#if !complete}
  81     <p>Fetching images...</p>
  82   {:else if images.length === 0}
  83     <p>Sorry, no images were found for this language.</p>
  84   {:else if image}
  85     {#if errorImages.includes(image)}
  86       <div class="highlight-image">
  87         <p>
  88           <i>Could not locate that specific image!</i>
  89           Wanna go <a href={`/language?language=${language}`}>back</a> to language homepage?
  90         </p>
  91
  92         <a href={image}>
  93           <img
  94             src={image}
  95             alt="Image of a confused anime girl"
  96           />
  97         </a>
  98       </div>
  99     {:else if image}
 100       <div class="highlight-image">
 101         <p>
 102           Wanna go <a href={`/language?language=${language}`}>back</a> to language homepage?
 103         </p>
 104
 105         <a href={image}>
 106           <img
 107             src={image}
 108             alt="Image of an anime girl holding a programming book"
 109           />
 110         </a>
 111
 112         <p>
 113           Attributes attributes =
 114           &lbrace;<br>
 115           &ensp;direct_link: "<a href={image}>url</a>",<br>
 116           &ensp;size: {imageSize}, /* kb */<br>
 117           &ensp;fetch_time: {fetchTime}, /* ms */<br>
 118           &rbrace;;
 119         </p>
 120       </div>
 121     {/if}
 122   {:else}
 123     <ul class="image-rack">
 124       {#each images as image}
 125         <li id="image-rack-item">
 126           <a href={`/language?language=${language}&image=${image}`}>
 127             <img
 128               src={image}
 129               alt="Image of an anime girl holding a programming book"
 130             />
 131           </a>
 132         </li>
 133       {/each}
 134     </ul>
 135
 136     <p>Double fetch_time = {fetchTime}; /* ms */</p>
 137   {/if}
 138 </div>