How to change hls quality lists dynamically when src change to other m3u8 url?

[begalinsaf]

How can I change the HLS quality list when switching the src to another m3u8 URL? I've created custom settings named 'sources' to change the source URL with the type m3u8, but when I switch to another source, the quality list remains the same as the previous one and doesn't change.

also i try in this playground and its working perfectly why? playground%2C%0A%20%20%20%20%5D%2C%0A%20%20%20%20customType%3A%20%7B%0A%20%20%20%20%20%20%20%20m3u8%3A%20function%20playM3u8(video%2C%20url%2C%20art)%20%7B%0A%20%20%20%20%20%20%20%20%20%20%20%20if%20(Hls.isSupported())%20%7B%0A%09%09%09%09if%20(art.hls)%20art.hls.destroy()%3B%0A%09%09%09%09const%20hls%20%3D%20new%20Hls()%3B%0A%09%09%09%09hls.loadSource(url)%3B%0A%09%09%09%09hls.attachMedia(video)%3B%0A%09%09%09%09art.hls%20%3D%20hls%3B%0A%09%09%09%09art.on(%27destroy%27%2C%20()%20%3D%3E%20hls.destroy())%3B%0A%20%20%20%20%20%20%20%20%20%20%20%20%7D%20else%20if%20(video.canPlayType(%27application%2Fvnd.apple.mpegurl%27))%20%7B%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20video.src%20%3D%20url%3B%0A%20%20%20%20%20%20%20%20%20%20%20%20%7D%20else%20%7B%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20art.notice.show%20%3D%20%27Unsupported%20playback%20format%3A%20m3u8%27%3B%0A%20%20%20%20%20%20%20%20%20%20%20%20%7D%0A%20%20%20%20%20%20%20%20%7D%0A%20%20%20%20%7D%2C%0A%7D)%3B)

my code

 // Mount ArtPlayer
  useEffect(() => {
    Artplayer.NOTICE_TIME = 5000;

    const art = new Artplayer({
      ...
      customType: {
        m3u8: playM3u8,
      },
      settings: [
        {
          name: 'sources',
          html: 'Sources',
          width: 250,
          tooltip: defaultSource.name ?? '',
          selector: filteredSources,
          onSelect: function (item, $dom, event) {
            console.info(item, $dom, event);

            art.switch = item.url;
            art.on('restart', item.url);

            const { ext } = parse(item.url);
            art.type = ext.substring(1);

            setSelectedSource({
              html: item.html,
              url: item.url,
              subs: item.subs,
            });
          },
        },
        ...
      ],
      icons: artPlayerIcons,
      plugins: [
        artplayerPluginHlsQuality({
          control: false,
          setting: true,
          getResolution: (level) => level.height + 'P',
          title: 'Quality',
          auto: 'Auto',
        }),
      ],
    });

    setArtState(art);

    const { ext: type } = parse(defaultSource.data.file ?? '');
    art.on('ready', () => {
      if (type.substring(1) === 'm3u8' || sources.length === 0) {
        art.setting.update({
          name: 'hls-quality',
          html: 'Quality',
        });
      }

      if (defaultSub) {
        art.subtitle.url = defaultSub.url;
      }
    });

    art.on('subtitleLoad', () => {
      art.notice.show = 'Subtitle Berhasil dimuat';
    });

    return () => {
      if (art && art.destroy) {
        art.destroy(false);
        setArtState(null);
      }
    };
  }, [setArtState, defaultSub, defaultSource, poster]);

// update options
 useEffect(() => {
    if (artState) {
      if (getInstance && typeof getInstance === 'function') {
        getInstance(artState);
      }

      if (selectedSource) {
        artState.setting.update({
          name: 'sources',
          tooltip: selectedSource.html,
        });

        const selectedSub = selectedSource.subs.map((sub) => ({
          html: sub.lang,
          url: sub.file,
        }));

        artState.setting.update({
          name: 'subtitles',
          selector: [...selectedSub, ...dbSub],
        });
      }
    }
  }, [artState, filteredSources, filteredSubtitles, selectedSource]);

if you ask full code https://pastebin.com/nZGYuGb0

[begalinsaf]

i fixed it with updating hls.js version, but i got new problem when i change the source, hls quality show new quality lists, but i got error TypeError: r[t].fn.apply is not a function

[begalinsaf]

i fixed it on my way