MyMusicBox/MyMusicClientSveltePwa/src/lib/components/SongComponent.svelte at ffd435e90fac02d8d1c61b7bd57b455cfb689728 · DutchJavaDev/MyMusicBox · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
<script>
// @ts-nocheck

  import { getContext, onMount, setContext } from "svelte";
  import { currentSong, isPlaying } from "../scripts/playbackService";

  export let song;

  let playOrPauseSong;

  onMount(() => {
    playOrPauseSong = getContext("playOrPauseSong");
  });

  $: $isPlaying;
  $: $currentSong;
</script>

{#if song}
  <div class="row mb-3 song-component">
    <div class="col-10 bg-dark border border-1 rounded rounded-2" style={$currentSong && $currentSong.id === song.id ? "border-color:#5bbd99 !important;" : ""}>
      <div class="text-lg-start">
        <p style={$currentSong && $currentSong.id === song.id ? "color:#5bbd99;" : ""}>{song.name}</p>
      </div>
    </div>
    <div class="col-2">
      <button
        on:click={() => playOrPauseSong(song.id)}
        class="btn btn-dark play-button"
      >
        {#if $currentSong && $currentSong.id === song.id && $isPlaying}
          <i class="fa-solid fa-pause"></i>
        {:else}
          <i class="fa-solid fa-play"></i>
        {/if}
      </button>
    </div>
  </div>
{:else}
  <p>No song available.</p>
{/if}

<style>
  .song-component {
    height: 2.5rem;
    color: white;
    font-weight: bolder;
  }

  .song-component p {
    font-size: 0.8rem;
    margin: 5px;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .play-button {
    font-size: 1.5rem;
    width: 3rem;
    height: 3rem;
    display: flex;
    color: #5bbd99;
    align-items: center;
    justify-content: center;
  }
</style>