class MdkPlayer extends HTMLElement {
constructor() {
super();
this.attachShadow({ mode: 'open' });
}
connectedCallback() {
// --- التحديث الجديد: الرابط الأساسي (Base URL) ---
const baseUrl = 'https://moddaker.fra1.cdn.digitaloceanspaces.com/';
// جلب الجزء الذي وضعته في الـ HTML
const rawSrc = this.getAttribute('src') || '';
// بناء الرابط النهائي الذكي
let fullAudioSrc = '';
if (rawSrc) {
// إذا كان الرابط يبدأ بـ http (رابط كامل)، استخدمه كما هو
if (rawSrc.startsWith('http://') || rawSrc.startsWith('https://')) {
fullAudioSrc = rawSrc;
} else {
// التأكد من عدم وجود شرطة مزدوجة (//) عند دمج الرابطين
const cleanRawSrc = rawSrc.startsWith('/') ? rawSrc.substring(1) : rawSrc;
fullAudioSrc = baseUrl + cleanRawSrc;
}
}
// استخراج اسم الملف بدقة للعنوان
let defaultTitle = 'مقطع صوتي';
if (rawSrc) {
try {
const cleanUrl = rawSrc.split('?')[0];
const fileNameWithExt = cleanUrl.split('/').pop();
const lastDotIndex = fileNameWithExt.lastIndexOf('.');
const nameOnly = lastDotIndex !== -1 ? fileNameWithExt.substring(0, lastDotIndex) : fileNameWithExt;
defaultTitle = decodeURIComponent(nameOnly);
} catch (e) {
console.error("لم يتمكن من استخراج الاسم:", e);
}
}
const audioTitle = this.getAttribute('title') || defaultTitle;
this.shadowRoot.innerHTML = `
`;
this.initPlayer();
}
initPlayer() {
const container = this.shadowRoot.querySelector('.mdk-player-container');
const audio = this.shadowRoot.querySelector('.mdk-main-audio');
const playPauseBtn = this.shadowRoot.querySelector('.mdk-btn-action');
const playIcon = this.shadowRoot.querySelector('.mdk-play-icon');
const pauseIcon = this.shadowRoot.querySelector('.mdk-pause-icon');
const progressArea = this.shadowRoot.querySelector('.mdk-progress-action');
const progressBar = this.shadowRoot.querySelector('.mdk-player-progress-bar');
const currentTimeEl = this.shadowRoot.querySelector('.mdk-current-time');
const totalTimeEl = this.shadowRoot.querySelector('.mdk-total-time');
if (!audio || !playPauseBtn) return;
playPauseBtn.addEventListener('click', (e) => {
e.preventDefault();
if (audio.paused) {
audio.play().catch(e => console.log("تشغيل محظور", e));
playIcon.style.display = 'none';
pauseIcon.style.display = 'block';
container.classList.add('is-playing');
} else {
audio.pause();
playIcon.style.display = 'block';
pauseIcon.style.display = 'none';
container.classList.remove('is-playing');
}
});
const formatTime = (time) => {
if (isNaN(time)) return "00:00";
let minutes = Math.floor(time / 60);
let seconds = Math.floor(time % 60);
return (minutes < 10 ? '0' : '') + minutes + ':' + (seconds < 10 ? '0' : '') + seconds;
};
audio.addEventListener('loadedmetadata', () => {
totalTimeEl.innerText = formatTime(audio.duration);
});
if (audio.readyState >= 1) {
totalTimeEl.innerText = formatTime(audio.duration);
}
audio.addEventListener('timeupdate', () => {
currentTimeEl.innerText = formatTime(audio.currentTime);
if (audio.duration) {
progressBar.style.width = ((audio.currentTime / audio.duration) * 100) + '%';
}
});
progressArea.addEventListener('click', function(e) {
const rect = this.getBoundingClientRect();
const clickX = e.clientX - rect.left;
const width = rect.width;
const ratio = (width - clickX) / width;
audio.currentTime = ratio * audio.duration;
});
audio.addEventListener('ended', () => {
playIcon.style.display = 'block';
pauseIcon.style.display = 'none';
progressBar.style.width = '0%';
container.classList.remove('is-playing');
audio.currentTime = 0;
});
}
}
customElements.define('mdk-player', MdkPlayer);