const PLAYER_CONFIG = {

    trackTitle: "\u0422\u0440\u0435\u043a \u043d\u0435 \u043d\u0430\u0439\u0434\u0435\u043d",
    artistName: "Minatrix.FM",

    audioUrl: "https:\/\/mp3.minatrix.fm\/?id=1",

    coverImage: "https:\/\/minatrix.fm\/images\/covers\/0.png",
    radioLogo: "https:\/\/api.minatrix.fm\/player\/logo.webp",

    width: "100%",

    primaryColor: "#ff7a00",
    backgroundColor: "#111111",

    textColor: "#ffffff",
    secondaryTextColor: "#a0a0a0",

    borderRadius: "20px",
    padding: "16px",

    coverSize: "100px",
    logoSize: "24px",

    playButtonSize: "42px",
    playIconSize: "18px",

    titleSize: "15px",
    artistSize: "13px"
};

/* ======================================
   HTML
====================================== */

const container =
    document.getElementById("minatrixplay");

container.innerHTML = `

<div class="mx-player">

    <div class="mx-track">

        <img
            src="${PLAYER_CONFIG.coverImage}"
            class="mx-cover"
        >

<div class="mx-track-info">

    <div class="mx-top-line">

        <div class="mx-title">
            ${PLAYER_CONFIG.trackTitle}
        </div>

        <div class="mx-brand-inline">

            <a
                href="https://minatrix.fm/"
                target="_blank"
                rel="nofollow"
            >
                <img
                    src="${PLAYER_CONFIG.radioLogo}"
                    class="mx-logo"
                >
            </a>

            <a
                href="https://minatrix.fm/"
                target="_blank"
                rel="nofollow"
                class="mx-inline-radio"
            >
                Minatrix.FM
            </a>

        </div>

    </div>

    <div class="mx-artist">
        ${PLAYER_CONFIG.artistName}
    </div>

    <div class="mx-controls">

        <button class="mx-play-btn">

            <svg
                class="mx-play-icon mx-play-svg"
                viewBox="0 0 24 24"
            >
                <path d="M8 5V19L19 12Z"/>
            </svg>

            <svg
                class="mx-play-icon mx-pause-svg"
                viewBox="0 0 24 24"
                style="display:none"
            >
                <path d="M6 5H10V19H6ZM14 5H18V19H14Z"/>
            </svg>

        </button>

        <input
            type="range"
            class="mx-progress"
            value="0"
            min="0"
            max="100"
        >

    </div>

</div>

    </div>

    <audio
        class="mx-audio"
        src="${PLAYER_CONFIG.audioUrl}"
    ></audio>

</div>

`;

/* ======================================
   STYLES
====================================== */

const style = document.createElement("style");

style.innerHTML = `

.mx-player{

    width:${PLAYER_CONFIG.width};

    background:${PLAYER_CONFIG.backgroundColor};

    border-radius:${PLAYER_CONFIG.borderRadius};

    padding:${PLAYER_CONFIG.padding};

    box-sizing:border-box;

    font-family:Arial,sans-serif;

    box-shadow:
        0 8px 30px rgba(0,0,0,0.35);
}

/* HEADER */

.mx-logo{

    width:${PLAYER_CONFIG.logoSize};

    height:${PLAYER_CONFIG.logoSize};

    border-radius:7px;

    object-fit:cover;
}
/* TOP LINE */

.mx-top-line{

    display:flex;

    align-items:center;

    gap:10px;

    min-width:0;
}

/* TITLE */

.mx-title{

    flex:1;

    min-width:0;

    color:${PLAYER_CONFIG.textColor};

    font-size:${PLAYER_CONFIG.titleSize};

    font-weight:700;

    white-space:nowrap;

    overflow:hidden;

    text-overflow:ellipsis;
}

/* INLINE BRAND */

.mx-brand-inline{

    display:flex;

    align-items:center;

    gap:6px;

    flex-shrink:0;
}

.mx-inline-radio{

    color:${PLAYER_CONFIG.secondaryTextColor};

    font-size:11px;

    font-weight:600;

    text-decoration:none;

    white-space:nowrap;
}

/* LOGO */

.mx-logo{

    width:${PLAYER_CONFIG.logoSize};

    height:${PLAYER_CONFIG.logoSize};

    border-radius:7px;

    object-fit:cover;

    display:block;
}

/* TRACK */

.mx-track{

    display:flex;

    gap:12px;
}

.mx-cover{

    width:${PLAYER_CONFIG.coverSize};

    height:${PLAYER_CONFIG.coverSize};

    border-radius:16px;

    object-fit:cover;

    flex-shrink:0;
}

.mx-track-info{

    flex:1;

    min-width:0;
}

.mx-title{

    color:${PLAYER_CONFIG.textColor};

    font-size:${PLAYER_CONFIG.titleSize};

    font-weight:700;

    white-space:nowrap;

    overflow:hidden;

    text-overflow:ellipsis;
}

.mx-artist{

    color:${PLAYER_CONFIG.secondaryTextColor};

    font-size:${PLAYER_CONFIG.artistSize};

    margin-top:4px;

    white-space:nowrap;

    overflow:hidden;

    text-overflow:ellipsis;
}

/* CONTROLS */

.mx-controls{

    display:flex;

    align-items:center;

    gap:10px;

    margin-top:14px;
}

.mx-play-btn{

    width:${PLAYER_CONFIG.playButtonSize};

    height:${PLAYER_CONFIG.playButtonSize};

    border:none;

    background:${PLAYER_CONFIG.primaryColor};

    border-radius:50%;

    cursor:pointer;

    display:flex;

    align-items:center;

    justify-content:center;

    padding:0;

    flex-shrink:0;

    transition:0.2s;
}

.mx-play-btn:hover{
    opacity:0.9;
}

/* SVG ICON */

.mx-play-icon{

    width:${PLAYER_CONFIG.playIconSize};

    height:${PLAYER_CONFIG.playIconSize};

    fill:#ffffff;
}

/* PROGRESS */

.mx-progress{

    flex:1;

    cursor:pointer;

    accent-color:${PLAYER_CONFIG.primaryColor};
}

`;

document.head.appendChild(style);

/* ======================================
   LOGIC
====================================== */

const player =
    container.querySelector(".mx-player");

const audio =
    player.querySelector(".mx-audio");

const playBtn =
    player.querySelector(".mx-play-btn");

const playSvg =
    player.querySelector(".mx-play-svg");

const pauseSvg =
    player.querySelector(".mx-pause-svg");

const progress =
    player.querySelector(".mx-progress");

let isPlaying = false;

/* PLAY / PAUSE */

playBtn.addEventListener("click", () => {

    if(isPlaying){

        audio.pause();

        playSvg.style.display = "block";
        pauseSvg.style.display = "none";

    } else {

        audio.play();

        playSvg.style.display = "none";
        pauseSvg.style.display = "block";
    }

    isPlaying = !isPlaying;
});

/* PROGRESS */

audio.addEventListener("timeupdate", () => {

    const value =
        (audio.currentTime / audio.duration) * 100;

    progress.value = value || 0;
});

progress.addEventListener("input", () => {

    const seekTime =
        (progress.value / 100) * audio.duration;

    audio.currentTime = seekTime;
});

/* TRACK END */

audio.addEventListener("ended", () => {

    isPlaying = false;

    playSvg.style.display = "block";
    pauseSvg.style.display = "none";

    progress.value = 0;
});