Watcharr/src/lib/poster/PersonPoster.svelte

<script lang="ts">
  import { goto } from "$app/navigation";
  import { addClassToParent, calculateTransformOrigin } from "@/lib/util/helpers";

  interface Props {
    id: number | undefined;
    name: string | undefined;
    path: string | undefined;
    role?: string | undefined;
    zoomOnHover?: boolean;
  }

  let {
    id,
    name,
    path,
    role = undefined,
    zoomOnHover = true
  }: Props = $props();

  const poster = path ? `https://image.tmdb.org/t/p/w300_and_h450_bestv2${path}` : undefined;
  const link = id ? `/person/${id}` : undefined;
</script>

<!-- Quick fix to ignore error, should be fixed -->
<!-- svelte-ignore a11y_no_noninteractive_element_interactions -->
<li
  onmouseenter={(e) => calculateTransformOrigin(e)}
  onfocusin={(e) => calculateTransformOrigin(e)}
  onclick={() => {
    if (link) goto(link);
  }}
  onkeypress={() => console.log("on kpress")}
>
  <div class={`container${!poster ? " details-shown" : ""}${!zoomOnHover ? " no-zoom" : ""}`}>
    {#if poster}
      <div class="img-loader"></div>
      <img
        loading="lazy"
        src={poster}
        alt=""
        onload={(e) => {
          addClassToParent(e, "img-loaded");
        }}
        onerror={(e) => {
          console.log("on err");
          addClassToParent(e, "details-shown");
        }}
      />
    {/if}
    <div class="inner">
      <h2>
        {#if link}
          <a data-sveltekit-preload-data="tap" href={link}>
            {name}
          </a>
        {:else}
          {name}
        {/if}
      </h2>
      {#if role}
        <h3>{role}</h3>
      {/if}
    </div>
  </div>
</li>

<style lang="scss">
  .container {
    display: flex;
    flex-flow: column;
    background-color: rgb(48, 45, 45);
    overflow: hidden;
    flex: 1 1;
    border-radius: 5px;
    width: 170px;
    height: 100%;
    min-height: 256.367px;
    position: relative;
    transition:
      transform 150ms ease,
      outline 50ms ease;
    cursor: pointer;

    img {
      width: 100%;
      height: 100%;
    }

    &.img-loaded .img-loader,
    &.details-shown .img-loader {
      display: none;
    }

    .img-loader {
      position: absolute;
      width: 100%;
      height: 100%;
      background-color: gray;
      background: linear-gradient(359deg, #5c5c5c, #2c2929, #2c2424);
      background-size: 400% 400%;
      animation: imgloader 4s ease infinite;

      @keyframes imgloader {
        0% {
          background-position: 50% 0%;
        }
        50% {
          background-position: 50% 100%;
        }
        100% {
          background-position: 50% 0%;
        }
      }
    }

    .inner {
      position: absolute;
      display: flex;
      flex-flow: column;
      top: 0;
      height: 100%;
      width: 100%;
      padding: 10px;
      background-color: transparent;

      h2,
      h3 {
        font-family:
          sans-serif,
          system-ui,
          -apple-system,
          BlinkMacSystemFont;
        font-size: 18px;
        color: white;
        word-wrap: break-word;

        a {
          color: white;
        }
      }

      h2 {
        margin-top: auto;
        text-shadow: 1px 1px 3px black;
      }

      h3 {
        font-size: 12px;
        text-shadow: 0px 1px 1px black;
      }
    }

    &:not(.no-zoom) {
      &:hover,
      &:has(:global(:focus-visible)) {
        transform: scale(1.3);
        z-index: 99;
      }
    }

    &:not(:not(.no-zoom)) {
      &:hover,
      &:has(:global(:focus-visible)) {
        outline: 3px solid $text-color;
      }
    }

    &:hover,
    &:has(:global(:focus-visible)),
    &:global(.details-shown) {
      .inner {
        color: white;
      }
    }
  }
</style>