MyMusicBox/MyMusicClientSveltePwa/src/lib/components/Modals.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
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
<script>
// @ts-nocheck

  import { isPlaying, currentSong,
           playPercentage, setCurrentTime,
           nextSong, previousSong,
           isShuffledEnabled, isLoopingEnabled,
           toggleShuffle, playOrPauseSong,
           toggleLoop } from "../scripts/playbackService";
  import { getImageUrl } from "../scripts/api";
  import { get } from "svelte/store";
  import { isTimerEnabled, timeLeft, toggleSleepTimer } from "../scripts/sleeptimerService";

  $: $currentSong;
  $: $isPlaying;
  $: $playPercentage;
  $: $isShuffledEnabled;
  $: $isLoopingEnabled;
  $: $isTimerEnabled;
  $: $timeLeft;

  function togglePlay() {
    playOrPauseSong(get(currentSong).id);
  }

  function seekEvent(event) {
    const percentage = event.target.value;
    playPercentage.set(percentage);
    const currentSongData = $currentSong;
    if (currentSongData) {
      const duration = currentSongData.duration;
      const newTime = (duration * percentage) / 100;
      console.log(`Seeking to ${newTime} seconds in song ${currentSongData.name}`);
      setCurrentTime(newTime);
    }
  }
</script>

<!-- Modal -->
{#if $currentSong && $currentSong.id !== -999} <!-- Ensure currentSong is valid -->
  <div class="modal fade" id="songControlModal" tabindex="-1" aria-labelledby="songControlModalLabel" aria-hidden="false">
    <div class="modal-dialog modal-fullscreen-sm-down">
      <div class="modal-content bg-dark">
        <div class="modal-body">
          <div>
            <div class="row">
              <div class="col-12">
                <div class="container-fluid" style="height: 7rem;">
                    <p class="text-white" id="songControlModalLabel">{$currentSong.name}</p>
                </div>
              </div>
              <div class="col-12 text-center">
                <img class="img-fluid border border-1 rounded rounded-2 mt-1" src={getImageUrl($currentSong.thumbnail_path)} alt="404" />
              </div>
              <div class="col-12">
                <input type="range" on:change={seekEvent} class="form-range mt-5" value={$playPercentage} min="0" max="100" step="1" />
              </div>
              <div class="col-12">
                <div class="row mt-4">
                  <div class="col-4">
                    <button aria-label="previous song" on:click={previousSong} class="btn btn-dark w-100">
                      <i class="fa-solid fa-backward fa-2xl"></i>
                    </button>
                  </div>

                  <div class="col-4">
                    <button on:click={togglePlay} class="btn btn-dark w-100">
                      {#if $isPlaying}
                        <i class="fa-solid fa-pause fa-2xl"></i>
                      {:else}
                        <i class="fa-solid fa-play fa-2xl"></i>
                      {/if}
                    </button>
                  </div>

                  <div class="col-4">
                    <button aria-label="next song" on:click={nextSong} class="btn btn-dark w-100">
                      <i class="fa-solid fa-forward fa-2xl"></i>
                    </button>
                  </div>
                </div>
              </div>
              <!-- Timer, shuffle and repeat controls -->
              <div class="col-12">
                <div class="row mt-5">
                  <div class="col-4">
                    <button on:click={toggleSleepTimer} aria-label="sleep timer" type="button" class="btn btn-dark w-100">
                      <i class="fa-solid fa-stopwatch-20" style="{$isTimerEnabled ? "color: #5bbd99;" : "color:white;"}">
                        <span style="font-size: 0.8rem;">
                            &nbsp;{$isTimerEnabled ? $timeLeft : ""}
                      </span>
                    </i>
                    </button>
                  </div>

                  <div class="col-4">
                    <button on:click={toggleShuffle} aria-label="shuffle playlist" type="button" class="btn btn-dark w-100">
                      <i class="fa-solid fa-shuffle" style="{$isShuffledEnabled ? "color: #5bbd99;" : "color:white;"}"></i>
                    </button>
                  </div>
                  <div class="col-4">
                    <button on:click={toggleLoop} aria-label="repeat song" type="button" class="btn btn-dark w-100">
                      <i class="fa-solid fa-repeat" style="{$isLoopingEnabled ? "color: #5bbd99;" : "color:white;"}"></i>
                    </button>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
        <div class="modal-footer">
          <button type="button" class="btn btn-dark fw-bolder w-100 text-white border border-2" data-bs-dismiss="modal">Close</button>
        </div>
      </div>
    </div>
  </div>
{/if}

<style>
  img {
    height: 10rem;
    object-fit: contain;
    border-color: #5bbd99 !important;
  }

  p{
    font-size: 1rem !important;
    font-weight: bolder;
    color: white;
    text-align: center;
  }

  i{
    color: #5bbd99;
    font-weight: bolder;
  }

  .modal-footer{
    border: none !important;
  }

  .modal-footer button {
    border-color: #5bbd99 !important;
    background-color: #343a40 !important;
  }

input[type="range"]::-webkit-slider-thumb {
   background-color: #5bbd99;
}
</style>