myetv-player 1.5.0 → 1.6.0

package/dist/myetv-player.min.js

@@ -3323,7 +3323,7 @@ createControls() {
  <div class="settings-menu"></div>
  </div>
 
- ${this.options.showQualitySelector && this.originalSources && this.originalSources.length > 1 ? `
+${(this.options.showQualitySelector && this.originalSources && this.originalSources.length > 1) || this.options.adaptiveQualityControl ? `
  <div class="quality-control">
  <button class="control-btn quality-btn" data-tooltip="video_quality">
  <div class="quality-btn-text">
@@ -4115,6 +4115,11 @@ updateQualityDisplay() {
 }
 
 updateQualityButton() {
+ if (this.isAdaptiveStream) {
+ if (this.options.debug) console.log('🔒 Adaptive streaming active - quality button managed by streaming.js');
+ return;
+ }
+
  const qualityBtn = this.controls?.querySelector('.quality-btn');
  if (!qualityBtn) return;
 
@@ -4161,6 +4166,11 @@ updateQualityMenu() {
  const qualityMenu = this.controls?.querySelector('.quality-menu');
  if (!qualityMenu) return;
 
+ if (this.isAdaptiveStream) {
+ if (this.options.debug) console.log('🔒 Adaptive streaming active - quality menu managed by streaming.js');
+ return;
+ }
+
  let menuHTML = '';
 
  if (this.isAdaptiveStream && this.adaptiveQualities && this.adaptiveQualities.length > 0) {
@@ -6495,6 +6505,13 @@ async loadAdaptiveLibraries() {
 
  try {
 
+ this.selectedQuality = 'auto';
+ this.qualityEventsInitialized = false;
+
+ if (this.options.debug) {
+ console.log('🔍 initializeDash - FORCED selectedQuality to:', this.selectedQuality);
+ }
+
  if (this.dashPlayer) {
  this.dashPlayer.destroy();
  }
@@ -6646,17 +6663,67 @@ disableDashTextTracks() {
  }
  }
 
- updateAdaptiveQualities() {
+updateAdaptiveQualities() {
  this.adaptiveQualities = [];
 
  if (this.adaptiveStreamingType === 'dash' && this.dashPlayer) {
- const bitrates = this.dashPlayer.getBitrateInfoListFor('video');
- this.adaptiveQualities = bitrates.map((bitrate, index) => ({
- index: index,
- label: this.getQualityLabel(bitrate.height, bitrate.width),
+ try {
+
+ const videoTracks = this.dashPlayer.getTracksFor('video');
+
+ if (this.options.debug) {
+ console.log('✅ DASH getTracksFor result:', videoTracks);
+ }
+
+ if (videoTracks && videoTracks.length > 0) {
+
+ const allQualities = [];
+
+ videoTracks.forEach((track, trackIndex) => {
+ const bitrateList = track.bitrateList || [];
+
+ if (this.options.debug) {
+ console.log(`✅ Track ${trackIndex} (${track.codec}):`, bitrateList);
+ }
+
+ bitrateList.forEach((bitrate, index) => {
+ allQualities.push({
+ trackIndex: trackIndex,
+ bitrateIndex: index,
+ label: `${bitrate.height}p`,
  height: bitrate.height,
- bandwidth: bitrate.bandwidth
- }));
+ width: bitrate.width,
+ bandwidth: bitrate.bandwidth,
+ codec: track.codec
+ });
+ });
+ });
+
+ const uniqueHeights = [...new Set(allQualities.map(q => q.height))];
+ uniqueHeights.sort((a, b) => b - a);
+
+ this.adaptiveQualities = uniqueHeights.map((height, index) => {
+ const quality = allQualities.find(q => q.height === height);
+ return {
+ index: index,
+ label: `${height}p`,
+ height: height,
+ trackIndex: quality.trackIndex,
+ bitrateIndex: quality.bitrateIndex,
+ bandwidth: quality.bandwidth,
+ codec: quality.codec
+ };
+ });
+
+ if (this.options.debug) {
+ console.log('✅ All DASH qualities merged:', this.adaptiveQualities);
+ }
+ }
+ } catch (error) {
+ if (this.options.debug) {
+ console.error('❌ Error getting DASH qualities:', error);
+ }
+ }
  } else if (this.adaptiveStreamingType === 'hls' && this.hlsPlayer) {
  const levels = this.hlsPlayer.levels;
  this.adaptiveQualities = levels.map((level, index) => ({
@@ -6673,9 +6740,361 @@ disableDashTextTracks() {
 
  if (this.options.debug) {
  console.log('📡 Adaptive qualities available:', this.adaptiveQualities);
+ console.log('📡 Selected quality mode:', this.selectedQuality);
+ }
+}
+
+updateAdaptiveQualityMenu() {
+ const qualityMenu = this.controls?.querySelector('.quality-menu');
+ if (!qualityMenu) {
+ if (this.options.debug) console.log('❌ Quality menu not found in DOM');
+ return;
+ }
+
+ if (this.adaptiveQualities.length === 0) {
+ if (this.options.debug) console.log('❌ No adaptive qualities to display');
+ return;
+ }
+
+ const isAutoActive = this.selectedQuality === 'auto';
+ let menuHTML = `<div class="quality-option ${isAutoActive ? 'active' : ''}" data-quality="auto">Auto</div>`;
+
+ this.adaptiveQualities.forEach((quality) => {
+ const isActive = this.selectedQuality === quality.height;
+
+ if (this.options.debug) {
+ console.log('🔍 Quality item:', quality.label, 'height:', quality.height, 'active:', isActive);
+ }
+
+ menuHTML += `<div class="quality-option ${isActive ? 'active' : ''}" data-quality="${quality.height}">
+ ${quality.label}
+ <span class="quality-playing" style="display: none; color: #4CAF50; margin-left: 8px; font-size: 0.85em;">● Playing</span>
+ </div>`;
+ });
+
+ qualityMenu.innerHTML = menuHTML;
+
+ if (this.options.debug) {
+ console.log('✅ Quality menu populated with', this.adaptiveQualities.length, 'options');
+ }
+
+ if (!this.qualityEventsInitialized) {
+ this.bindAdaptiveQualityEvents();
+ this.qualityEventsInitialized = true;
+ }
+
+ this.updateAdaptiveQualityDisplay();
+}
+
+updateAdaptiveQualityDisplay() {
+ if (!this.dashPlayer && !this.hlsPlayer) return;
+
+ let currentHeight = null;
+
+ try {
+ if (this.adaptiveStreamingType === 'dash' && this.dashPlayer) {
+
+ if (this.video && this.video.videoHeight) {
+ currentHeight = this.video.videoHeight;
+ }
+
+ if (this.options.debug) {
+ console.log('📊 Current video height:', currentHeight, 'Selected mode:', this.selectedQuality);
+ }
+ } else if (this.adaptiveStreamingType === 'hls' && this.hlsPlayer) {
+ const currentLevel = this.hlsPlayer.currentLevel;
+ if (currentLevel >= 0 && this.hlsPlayer.levels[currentLevel]) {
+ currentHeight = this.hlsPlayer.levels[currentLevel].height;
+ }
+ }
+
+ const qualityBtnText = this.controls?.querySelector('.quality-btn .selected-quality');
+ if (qualityBtnText) {
+ if (this.selectedQuality === 'auto') {
+ qualityBtnText.textContent = 'Auto';
+ } else {
+ qualityBtnText.textContent = `${this.selectedQuality}p`;
+ }
+ }
+
+ const currentQualityText = this.controls?.querySelector('.quality-btn .current-quality');
+ if (currentQualityText) {
+ if (this.selectedQuality === 'auto' && currentHeight) {
+ currentQualityText.textContent = `${currentHeight}p`;
+ currentQualityText.style.display = 'block';
+ } else {
+ currentQualityText.textContent = '';
+ currentQualityText.style.display = 'none';
+ }
+ }
+
+ const qualityMenu = this.controls?.querySelector('.quality-menu');
+ if (qualityMenu) {
+
+ qualityMenu.querySelectorAll('.quality-option').forEach(opt => {
+ opt.classList.remove('active');
+ });
+
+ if (this.selectedQuality === 'auto') {
+ const autoOption = qualityMenu.querySelector('[data-quality="auto"]');
+ if (autoOption) autoOption.classList.add('active');
+ } else {
+ const selectedOption = qualityMenu.querySelector(`[data-quality="${this.selectedQuality}"]`);
+ if (selectedOption) selectedOption.classList.add('active');
+ }
+
+ qualityMenu.querySelectorAll('.quality-playing').forEach(el => {
+ el.style.display = 'none';
+ });
+
+ if (this.selectedQuality === 'auto' && currentHeight) {
+ const playingOption = qualityMenu.querySelector(`[data-quality="${currentHeight}"] .quality-playing`);
+ if (playingOption) {
+ playingOption.style.display = 'inline';
+ }
+ }
+ }
+
+ } catch (error) {
+ if (this.options.debug) console.error('❌ Error updating quality display:', error);
+ }
+}
+
+updateQualityButtonText() {
+ const qualityBtn = this.controls?.querySelector('.quality-btn .selected-quality');
+ if (!qualityBtn) return;
+
+ if (this.selectedQuality === 'auto' || !this.selectedQuality) {
+ qualityBtn.textContent = this.t('auto');
+ } else {
+ const quality = this.adaptiveQualities.find(q => q.index === parseInt(this.selectedQuality));
+ qualityBtn.textContent = quality ? quality.label : 'Auto';
+ }
+}
+
+bindAdaptiveQualityEvents() {
+ const qualityMenu = this.controls?.querySelector('.quality-menu');
+ const qualityBtn = this.controls?.querySelector('.quality-btn');
+
+ if (!qualityMenu || !qualityBtn) return;
+
+ qualityBtn.addEventListener('click', (e) => {
+ e.stopPropagation();
+ qualityMenu.classList.toggle('active');
+
+ if (qualityMenu.classList.contains('active')) {
+ this.updateAdaptiveQualityDisplay();
+ }
+ });
+
+ const closeMenuHandler = (e) => {
+ if (!qualityBtn.contains(e.target) && !qualityMenu.contains(e.target)) {
+ qualityMenu.classList.remove('active');
+ }
+ };
+ document.addEventListener('click', closeMenuHandler);
+
+ qualityMenu.addEventListener('click', (e) => {
+ const option = e.target.closest('.quality-option');
+ if (!option) return;
+
+ e.stopPropagation();
+
+ const qualityData = option.getAttribute('data-quality');
+
+ if (this.options.debug) {
+ console.log('🎬 Quality clicked - raw data:', qualityData, 'type:', typeof qualityData);
+ }
+
+ if (qualityData === 'auto') {
+
+ this.selectedQuality = 'auto';
+
+ if (this.adaptiveStreamingType === 'dash' && this.dashPlayer) {
+ this.dashPlayer.updateSettings({
+ streaming: {
+ abr: {
+ autoSwitchBitrate: { video: true }
+ }
+ }
+ });
+ if (this.options.debug) console.log('✅ Auto quality enabled');
+ } else if (this.adaptiveStreamingType === 'hls' && this.hlsPlayer) {
+ this.hlsPlayer.currentLevel = -1;
+ }
+
+ } else {
+
+ const selectedHeight = parseInt(qualityData, 10);
+
+ if (isNaN(selectedHeight)) {
+ if (this.options.debug) console.error('❌ Invalid quality data:', qualityData);
+ return;
+ }
+
+ if (this.options.debug) {
+ console.log('🎬 Setting manual quality to height:', selectedHeight);
+ }
+
+ this.selectedQuality = selectedHeight;
+
+ if (this.adaptiveStreamingType === 'dash') {
+ this.setDashQualityByHeight(selectedHeight);
+ } else if (this.adaptiveStreamingType === 'hls') {
+ const levelIndex = this.hlsPlayer.levels.findIndex(l => l.height === selectedHeight);
+ if (levelIndex >= 0) {
+ this.hlsPlayer.currentLevel = levelIndex;
+ }
  }
  }
 
+ this.updateAdaptiveQualityDisplay();
+
+ qualityMenu.classList.remove('active');
+ });
+
+ if (this.options.debug) {
+ console.log('✅ Quality events bound');
+ }
+}
+
+setDashQualityByHeight(targetHeight) {
+ if (!this.dashPlayer) return;
+
+ try {
+ const targetQuality = this.adaptiveQualities.find(q => q.height === targetHeight);
+ if (!targetQuality) {
+ if (this.options.debug) console.error('❌ Quality not found for height:', targetHeight);
+ return;
+ }
+
+ if (this.options.debug) {
+ console.log('🎬 Setting quality:', targetQuality);
+ }
+
+ this.dashPlayer.updateSettings({
+ streaming: {
+ abr: {
+ autoSwitchBitrate: { video: false }
+ }
+ }
+ });
+
+ const currentTrack = this.dashPlayer.getCurrentTrackFor('video');
+
+ if (!currentTrack) {
+ if (this.options.debug) console.error('❌ No current video track');
+ return;
+ }
+
+ const allTracks = this.dashPlayer.getTracksFor('video');
+ let targetTrack = null;
+
+ for (const track of allTracks) {
+ if (track.bitrateList && track.bitrateList[targetQuality.bitrateIndex]) {
+ const bitrate = track.bitrateList[targetQuality.bitrateIndex];
+ if (bitrate.height === targetHeight) {
+ targetTrack = track;
+ break;
+ }
+ }
+ }
+
+ if (!targetTrack) {
+ if (this.options.debug) console.error('❌ Target track not found');
+ return;
+ }
+
+ if (currentTrack.index !== targetTrack.index) {
+ this.dashPlayer.setCurrentTrack(targetTrack);
+ if (this.options.debug) {
+ console.log('✅ Switched to track:', targetTrack.index);
+ }
+ }
+
+ setTimeout(() => {
+ try {
+
+ this.dashPlayer.updateSettings({
+ streaming: {
+ abr: {
+ initialBitrate: { video: targetQuality.bandwidth / 1000 },
+ maxBitrate: { video: targetQuality.bandwidth / 1000 },
+ minBitrate: { video: targetQuality.bandwidth / 1000 }
+ }
+ }
+ });
+
+ if (this.options.debug) {
+ console.log('✅ Quality locked to:', targetHeight + 'p', 'bandwidth:', targetQuality.bandwidth);
+ }
+
+ const qualityBtnText = this.controls?.querySelector('.quality-btn .selected-quality');
+ if (qualityBtnText) {
+ qualityBtnText.textContent = `${targetHeight}p`;
+ }
+
+ const currentTime = this.video.currentTime;
+ this.dashPlayer.seek(currentTime + 0.1);
+ setTimeout(() => {
+ this.dashPlayer.seek(currentTime);
+ }, 100);
+
+ } catch (innerError) {
+ if (this.options.debug) console.error('❌ Error setting quality:', innerError);
+ }
+ }, 100);
+
+ } catch (error) {
+ if (this.options.debug) console.error('❌ Error in setDashQualityByHeight:', error);
+ }
+}
+
+setDashQuality(qualityIndex) {
+ if (!this.dashPlayer) return;
+
+ try {
+ const selectedQuality = this.adaptiveQualities[qualityIndex];
+ if (!selectedQuality) {
+ if (this.options.debug) console.error('❌ Quality not found at index:', qualityIndex);
+ return;
+ }
+
+ if (this.options.debug) {
+ console.log('🎬 Setting DASH quality:', selectedQuality);
+ }
+
+ this.dashPlayer.updateSettings({
+ streaming: {
+ abr: {
+ autoSwitchBitrate: { video: false }
+ }
+ }
+ });
+
+ setTimeout(() => {
+ try {
+ this.dashPlayer.setQualityFor('video', selectedQuality.bitrateIndex);
+
+ if (this.options.debug) {
+ console.log('✅ DASH quality set to bitrateIndex:', selectedQuality.bitrateIndex, 'height:', selectedQuality.height);
+ }
+
+ const qualityBtnText = this.controls?.querySelector('.quality-btn .selected-quality');
+ if (qualityBtnText) {
+ qualityBtnText.textContent = selectedQuality.label;
+ }
+
+ } catch (innerError) {
+ if (this.options.debug) console.error('❌ Error setting quality:', innerError);
+ }
+ }, 100);
+
+ } catch (error) {
+ if (this.options.debug) console.error('❌ Error in setDashQuality:', error);
+ }
+}
+
  handleAdaptiveError(data) {
  if (this.options.debug) console.error('📡 Fatal adaptive streaming error:', data);
 

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "myetv-player",
-  "version": "1.5.0",
-  "description": "MYETV Video Player - Modular HTML5 video player with plugin support for YouTube, Vimeo, Twitch, Facebook, and streaming protocols (HLS/DASH)",
+  "version": "1.6.0",
+  "description": "MYETV Video Player - Modular HTML5 video player with plugin support for YouTube, Vimeo, Twitch, Facebook, Cloudflare Stream and streaming protocols (HLS/DASH)",
   "main": "dist/myetv-player.js",
   "files": [
     "dist/",
@@ -60,3 +60,4 @@
 
 
 
+