feat(web): stargazers, player

common/modules/util.js

@@ -99,12 +99,12 @@ export function generateRandomHexCode (len) {
 
 export function throttle (fn, time) {
   let wait = false
-  return () => {
+  return (...args) => {
     if (!wait) {
-      fn()
+      fn(...args)
       wait = true
       setTimeout(() => {
-        fn()
+        fn(...args)
         wait = false
       }, time).unref?.()
     }

web/src/app.html

@@ -16,15 +16,15 @@
 <meta name="twitter:image:src" content="%sveltekit.assets%/app.png" />
 <meta name="twitter:site" content="@ThaUnknown_" />
 <meta name="twitter:card" content="summary_large_image" />
-<meta name="twitter:title" content="Miru: Bittorrent streaming software for cats. Stream anime torrents, real-time with no waiting for downloads." />
-<meta name="twitter:description" content="Bittorrent streaming software for cats. Stream anime torrents, real-time with no waiting for downloads. - Miru: Bittorrent streaming software for cats." />
+<meta name="twitter:title" content="Miru: Stream anime torrents, real-time with no waiting for downloads." />
+<meta name="twitter:description" content="Stream anime torrents, real-time with no waiting for downloads." />
 <meta property="og:image" content="%sveltekit.assets%/app.png" />
-<meta property="og:image:alt" content="Stream anime torrents, real-time with no waiting for downloads. - Miru: Bittorrent streaming software for cats." />
+<meta property="og:image:alt" content="Stream anime torrents, real-time with no waiting for downloads." />
 <meta property="og:site_name" content="Miru" />
 <meta property="og:type" content="object" />
-<meta property="og:title" content="Miru: Bittorrent streaming software for cats. Stream anime torrents, real-time with no waiting for downloads." />
+<meta property="og:title" content="Miru: Stream anime torrents, real-time with no waiting for downloads." />
 <meta property="og:url" content="https://miru.watch" />
-<meta property="og:description" content="Bittorrent streaming software for cats. Stream anime torrents, real-time with no waiting for downloads. - Miru: Bittorrent streaming software for cats." />
+<meta property="og:description" content="Stream anime torrents, real-time with no waiting for downloads." />
 
 
 <link rel="icon" href="%sveltekit.assets%/logo.ico" />

web/src/lib/components/Stargazers.svelte

@@ -0,0 +1,73 @@
+<script>
+  export let stargazers = []
+
+  function * chunks (arr, n) {
+    for (let i = 0; i < arr.length; i += n) {
+      yield arr.slice(i, i + n)
+    }
+  }
+</script>
+
+<div class='d-flex flex-column w-full align-items-center pb-20'>
+  <div class='stargazers overflow-hidden position-relative w-full'>
+    <div class='overlay-gradient position-absolute top-0 left-0 w-full h-full z-10' />
+    {#await stargazers}
+      Loading...
+    {:then stargazers}
+      {#each [...chunks(stargazers, 25)] as stargazerRow}
+        <div class='text-nowrap'>
+          {#each stargazerRow as { htmlUrl, avatarUrl, login }}
+            <a href={htmlUrl} class='d-inline-flex p-10 text-reset zoom' target='_blank'>
+              <div class='bg-dark py-15 px-20 rounded font-weight-bold d-flex align-items-center'>
+                <img src={avatarUrl} alt='avatar' class='rounded-circle mr-10' />
+                {login}
+              </div>
+            </a>
+          {/each}
+        </div>
+      {/each}
+    {/await}
+  </div>
+</div>
+
+<style>
+  .overlay-gradient {
+    background: linear-gradient(90deg, rgba(15,17,19,1) 0%, rgba(15,17,19,0) 25%, rgba(15,17,19,0) 75%, rgba(15,17,19,1) 100%);
+    pointer-events: none;
+  }
+  .stargazers {
+    max-width: 205rem;
+  }
+
+  img {
+    width: 3rem;
+    height: 3rem;
+  }
+
+  .text-nowrap {
+    animation: animateRow1 200s linear infinite;
+    width: -moz-max-content;
+    width: max-content;
+  }
+
+  @keyframes animateRow1 {
+    0% {
+      transform: translate(0)
+    }
+
+    to {
+      transform: translate(calc(-50%))
+    }
+  }
+
+  .text-nowrap:nth-child(even) {
+    animation-direction: reverse;
+  }
+
+  .zoom {
+    transition: transform 0.3s ease;
+  }
+  .zoom:hover {
+    transform: scale(1.1);
+  }
+</style>

web/src/routes/+layout.js

@@ -21,6 +21,15 @@ export function load ({ fetch }) {
       } catch (e) {
         return []
       }
+    })(),
+    stargazers: (async () => {
+      try {
+        const res = await fetch('https://api.github.com/repos/ThaUnknown/miru/stargazers?per_page=100&page=' + (Math.round(Math.random() * 10) + 1))
+        const json = await res.json()
+        return json.map(({ html_url: htmlUrl, avatar_url: avatarUrl, login }) => ({ htmlUrl, avatarUrl, login }))
+      } catch (e) {
+        return []
+      }
     })()
   }
 }

web/src/routes/+layout.svelte

@@ -2,6 +2,7 @@
   import Footer from '$lib/components/Footer.svelte'
   import Loader from '$lib/components/Loader.svelte'
   import Navbar from '$lib/components/Navbar.svelte'
+  import { throttle } from '@/modules/util.js'
   import { setContext } from 'svelte'
   import { writable } from 'simple-store-svelte'
 
@@ -15,6 +16,7 @@
     let lastTime = null
     t.addEventListener('wheel', e => {
       e.preventDefault()
+      console.log(e.deltaY)
       // is trackpad
       const spd = (e.deltaY !== (e.deltaY | 0) || e.wheelDelta % 10 !== 0) ? speed / 10 : speed
       pos = Math.max(0, Math.min(pos - Math.max(-1, Math.min(1, e.deltaY * -1)) * spd, (t.scrollHeight - t.clientHeight) + (smooth * 2)))
@@ -37,6 +39,8 @@
 
     t.addEventListener('pointerup', () => { pos = scrollTop = scrollPosition.value = t.scrollTop })
 
+    t.addEventListener('scrollend', throttle(() => { scrollTop = scrollPosition.value = t.scrollTop }, 1000))
+
     function update () {
       const delta = pos - scrollTop === smooth * 2 ? 0 : ((pos - scrollTop) / smooth) * getDeltaTime()
       scrollTop += delta

web/src/routes/+page.svelte

@@ -8,9 +8,13 @@
   import MacOssvg from '$lib/svg/MacOSSVG.svelte'
   import SteamOssvg from '$lib/svg/SteamOSSVG.svelte'
   import WindowsSvg from '$lib/svg/WindowsSVG.svelte'
+  import Stargazers from '$lib/components/Stargazers.svelte'
   import { getContext } from 'svelte'
 
   const scrollPosition = getContext('scroll-position')
+
+  /** @type {import('./$types').PageData} */
+  export let data
 </script>
 
 <Hero />
@@ -67,9 +71,11 @@
   </div>
   <hr class='my-20' />
   <div class='content py-20'>
-    <div class='row'>
+    <div class='row flex-column-reverse flex-md-row'>
       <div class='col-md-5 col-12'>
-        player goes here
+        <div class='content'>
+          <img src='player.png' alt='player' class='mw-full' />
+        </div>
       </div>
       <div class='col-md-7 col-12'>
         <div class='content'>
@@ -103,12 +109,13 @@
     </div>
   </div>
   <hr class='my-20' />
-  <div class='content py-20'>
+  <div class='content pt-20'>
     <h1 class='w-full font-weight-bold text-white px-20'>
       Loved by thousands.
     </h1>
   </div>
 </div>
+<Stargazers stargazers={data.stargazers} />
 
 <style>
   .overlay-gradient {
@@ -127,6 +134,11 @@
   h1 {
     font-size: 5rem
   }
+  @media (pointer: none), (pointer: coarse){
+    .gallery {
+      padding-left: 0 !important;
+    }
+  }
   .gallery {
     padding-left: clamp(0px, var(--left), 100px);
   }