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 =
  53           "https://www.pngarts.com/files/8/Confused-Anime-Transparent-Image.png";
  54         image = errorImages[Math.floor(Math.random() * errorImages.length)];
  55       } else {
  56         let xhr = new XMLHttpRequest();
  57
  58         xhr.open("HEAD", image, true);
  59         xhr.onreadystatechange = () => {
  60           if (xhr.readyState === 4) {
  61             if (xhr.status === 200) {
  62               imageSize = `${xhr.getResponseHeader("Content-Length") / 1024}`;
  63             } else {
  64               imageSize = "Error";
  65             }
  66           }
  67         };
  68         xhr.send(null);
  69       }
  70     }
  71   });
  72 </script>
  73
  74 <svelte:head>
  75   <title>{language} | The Senpy Club</title>
  76 </svelte:head>
  77
  78 <div class="content">
  79   <h1>{language}</h1>
  80
  81   {#if !complete}
  82     <p>Fetching images...</p>
  83   {:else if images.length === 0}
  84     <p>Sorry, no images were found for this language.</p>
  85   {:else if image}
  86     {#if errorImages.includes(image)}
  87       <div class="highlight-image">
  88         <p>
  89           <i>Could not locate that specific image!</i>
  90           Wanna go <a href={`/language?language=${language}`}>back</a> to language
  91           homepage?
  92         </p>
  93
  94         <a href={image}>
  95           <img src={image} alt="Image of a confused anime girl" />
  96         </a>
  97       </div>
  98     {:else if image}
  99       <div class="highlight-image">
 100         <p>
 101           Wanna go <a href={`/language?language=${language}`}>back</a> to language
 102           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 = &lbrace;<br />
 114           &ensp;direct_link: "<a href={image}>url</a>",<br />
 115           &ensp;size: {imageSize}, /* kb */<br />
 116           &ensp;fetch_time: {fetchTime}, /* ms */<br />
 117           &rbrace;;
 118         </p>
 119       </div>
 120     {/if}
 121   {:else}
 122     <ul class="image-rack">
 123       {#each images as image}
 124         <li id="image-rack-item">
 125           <a href={`/language?language=${language}&image=${image}`}>
 126             <img
 127               src={image}
 128               alt="Image of an anime girl holding a programming book"
 129             />
 130           </a>
 131         </li>
 132       {/each}
 133     </ul>
 134
 135     <p>Double fetch_time = {fetchTime}; /* ms */</p>
 136   {/if}
 137 </div>