Sindbad~EG File Manager

<?php
include "conn.php"; // Make sure this is already included

function getAdByKey($mysqli, $key) {
    $stmt = $mysqli->prepare("SELECT * FROM ads WHERE ad_key = ?  AND is_enabled = 1");
    $stmt->bind_param("s", $key);
    $stmt->execute();
    return $stmt->get_result()->fetch_assoc();
}
$adKeys = [
    'left_hero_ad' => 'ad1',
    'right_hero_ad' => 'ad2',
    'bottom_left_ad' => 'ad3',
    'bottom_right_ad' => 'ad4'
];

$leftAd = getAdByKey($mysqli, $adKeys['left_hero_ad']);
$rightAd = getAdByKey($mysqli, $adKeys['right_hero_ad']);
$bottomLeftAd = getAdByKey($mysqli, $adKeys['bottom_left_ad']);
$bottomRightAd = getAdByKey($mysqli, $adKeys['bottom_right_ad']);

?>

 

<section class="hero--section"> 
  <div class="container-fluid">
    <div class="row g-2 gx-md-2 justify-content-between">

      <!-- LEFT HERO AD -->
      <div class="col-md-2 col-6 order-2 order-md-1 my-auto" data-aos="fade-up" data-aos-delay="200" data-aos-duration="800">
        <?php if (!empty($leftAd) && $leftAd['is_enabled']): ?>
          <a href="<?= htmlspecialchars($leftAd['url']) ?>" target="_blank" rel="noopener noreferrer">
            <img src="img/ads/<?= htmlspecialchars($leftAd['image']) ?>" class="img-fluid w-100 my-4 brr20" alt="<?= htmlspecialchars($leftAd['ad_key']) ?>">
          </a>
        <?php endif; ?>
      </div>

      <!-- CENTER SECTION WITH PLAYER -->
      <div class="col-md-8 order-1 order-md-2 my-auto">
        <div class="hero-card">
          <div class="row g-2 g-md-3 align-items-center justify-content-between">

            <div class="col-md-5">
              <div class="hero-text text-white">
                <?php
                $jsonUrl = 'https://www.jam-on.ch/tracklist/currentlyplaying.json';
                $title = 'Unknown Title';
                $artist = 'Unknown Artist';
                $response = @file_get_contents($jsonUrl);
                if ($response !== false) {
                    $data = json_decode($response, true);
                    if (!empty($data['track'])) $title = htmlspecialchars($data['track']);
                    if (!empty($data['artist'])) $artist = htmlspecialchars($data['artist']);
                } else {
                    $title = 'Error loading title';
                    $artist = 'Error loading artist';
                }
                ?>

                <h2 id="trackTitle" data-aos="fade-right" data-aos-delay="400" data-aos-duration="800"><?= $title ?></h2>
                <p id="trackArtist" data-aos="fade-right" data-aos-delay="500" data-aos-duration="800"><?= $artist ?></p>

                <div class="live-player-container transparent-player mb-0" id="livePlayer" data-aos="fade-up" data-aos-delay="600" data-aos-duration="800"> 
                  <audio id="liveAudio" autoplay>
                    <source src="https://jam-on.ice.infomaniak.ch/jam-on-128.mp3" type="audio/mpeg">
                    Your browser does not support the audio element.
                  </audio>

                  <input type="range" id="timeBar" min="0" max="100" value="0" step="1" disabled />

                  <div class="bottom-controls d-flex align-items-center justify-content-between">
                    <div class="left-controls d-flex align-items-center gap-2">
                      <button id="playPauseBtn"><i class="fas fa-play"></i></button>
                      <button id="muteBtn"><i class="fas fa-volume-up"></i></button>
                      <span id="currentTime" style="padding-left: 10px;">00:00</span>
                      <div class="now-playing-info" style="font-size: 13px; padding-left: 8px;">
                        <strong><?= $title ?></strong> <em>by <?= $artist ?></em>
                      </div>
                    </div> 
                    <input type="range" id="volumeSlider" min="0" max="1" step="0.01" value="1" orient="vertical" />
                  </div>
                </div>

                 
                <a href="live.php"
                  onclick="window.open('live.php', 'ListenLiveWindow', 'width=400,height=600,resizable=yes,scrollbars=yes'); return false;"
                  class="explore-btn mt-3"
                  data-aos="fade-right"
                  data-aos-delay="800"
                  data-aos-duration="800"
                  rel="noopener noreferrer">
                  Listen Live
                </a>
              </div>
            </div>

            <!-- Album Art -->
            <div class="col-md-6 my-auto" data-aos="fade-left" data-aos-delay="500" data-aos-duration="800">
              <div class="image-tint"></div>
              <div class="hero-image p-3 p-md-5">
                <img id="trackImage" src="https://www.jam-on.ch/tracklist/art-00.jpg" alt="Currently playing track art " class="img-fluid w-100 brr20 shadow" />
                <div class="sound-waves">
                  <span></span><span></span><span></span><span></span><span></span>
                </div>
              </div>
            </div>

          </div>
        </div>
      </div>

      <!-- RIGHT HERO AD -->
      <div class="col-md-2 col-6 order-3 order-md-3 my-auto" data-aos="fade-up" data-aos-delay="400" data-aos-duration="800">
        <?php if (!empty($rightAd) && $rightAd['is_enabled']): ?>
          <a href="<?= htmlspecialchars($rightAd['url']) ?>" target="_blank" rel="noopener noreferrer">
            <img src="img/ads/<?= htmlspecialchars($rightAd['image']) ?>" class="img-fluid w-100 my-4  brr20" alt="<?= htmlspecialchars($rightAd['ad_key']) ?>">
          </a>
        <?php endif; ?>
      </div>

    </div>
  </div>
</section>