import {
  defineComponent,
  nextTick,
  onMounted,
  onUnmounted,
  reactive,
  toRefs,
  watch
} from 'vue';
import TCPlayer from 'tcplayer.js';
import 'tcplayer.js/dist/tcplayer.min.css';
// import 'plyr/dist/plyr.css';
// import Plyr from 'plyr';
import { ref } from 'vue';
import styles from './video.module.less';
import iconplay from '../image/icon-pause.png';
import iconpause from '../image/icon-play.png';
// import iconReplay from '../image/icon-replay.png';
import iconLoop from '../image/icon-loop.svg';
import iconLoopActive from '../image/icon-loop-active.svg';
import iconSpeed from '../image/icon-speed.png';
import { NSlider, useMessage } from 'naive-ui';

export default defineComponent({
  name: 'video-play',
  props: {
    item: {
      type: Object,
      default: () => {
        return {};
      }
    },
    showModel: {
      type: Boolean,
      default: false
    },
    isEmtry: {
      type: Boolean,
      default: false
    },
    imagePos: {
      type: String,
      default: 'left'
    }
  },
  emits: [
    'canplay',
    'pause',
    'togglePlay',
    'ended',
    'reset',
    'error',
    'close',
    'loadedmetadata'
  ],
  setup(props, { emit, expose }) {
    const { item, isEmtry } = toRefs(props);
    const message = useMessage();
    const videoFroms = reactive({
      paused: true,
      speedInKbps: '',
      isOnline: true, // 是否在线
      currentTimeNum: 0,
      currentTime: '00:00',
      durationNum: 0,
      duration: '00:00',
      showBar: true,
      showAction: true,
      loop: false,
      speedControl: false,
      speedStyle: {
        left: '1px'
      },
      defaultSpeed: 1, // 默认速度

      // 添加缓冲状态标识
      isBuffering: false,
      bufferTimeout: null as any
    });
    const videoRef = ref();
    const videoItem = ref();
    const videoID = ref('video' + Date.now() + Math.floor(Math.random() * 100));
    // const videoSlider =
    //   'videoSlider' + Date.now() + Math.floor(Math.random() * 100);

    // 对时间进行格式化
    const timeFormat = (num: number) => {
      if (num > 0) {
        const m = Math.floor(num / 60);
        const s = num % 60;
        return (m < 10 ? '0' + m : m) + ':' + (s < 10 ? '0' + s : s);
      } else {
        return '00:00';
      }
    };

    // 如果视屏异常后，需要重新播放视屏
    const onPlay = () => {
      if (videoItem.value) {
        videoItem.value.src(item.value.content);
        emit('reset');
      }
    };

    //
    const toggleHideControl = (isShow: false) => {
      videoFroms.showBar = isShow;
      videoFroms.speedControl = false;
    };

    const onReplay = () => {
      videoFroms.speedControl = false;
      if (!videoItem.value) return;
      videoItem.value.currentTime(0);
    };

    // 切换音频播放
    const onToggleVideo = (e?: MouseEvent) => {
      e?.stopPropagation();
      if (videoFroms.paused) {
        videoItem.value.play();
        videoFroms.paused = false;
      } else {
        videoItem.value.pause();
        videoFroms.paused = true;
      }
      emit('togglePlay', videoFroms.paused);
    };

    const videoTimer = null as any;
    let videoTimerErrorCount = 0;
    const handlePlayVideo = () => {
      if (videoTimerErrorCount > 5) {
        return;
      }
      clearTimeout(videoTimer);
      nextTick(() => {
        videoItem.value?.play().catch((err: any) => {
          // console.log('🚀 ~ err:', err)
          // videoTimer = setTimeout(() => {
          //   if (err?.message?.includes('play()')) {
          //     // emit('play');
          //   }
          //   handlePlayVideo();
          // }, 1000);
        });
      });
      videoTimerErrorCount++;
    };

    const __init = () => {
      if (videoItem.value) {
        console.log(item.value, 'item.value');
        videoItem.value.poster(props.item.coverImg); // 封面
        videoItem.value.src(item.value.content + '?t=' + Date.now()); // url 播放地址
        videoItem.value.playbackRate(videoFroms.defaultSpeed);
        // 初步加载时
        videoItem.value.one('loadedmetadata', () => {
          // console.log(' Loading metadata');
          videoItem.value.playbackRate(videoFroms.defaultSpeed);

          // 获取时长
          videoFroms.duration = timeFormat(
            Math.round(videoItem.value.duration())
          );
          videoFroms.durationNum = videoItem.value.duration();

          emit('canplay');
          emit('loadedmetadata', videoItem.value);

          if (item.value.autoPlay && videoItem.value) {
            // videoItem.value?.play()
            nextTick(() => {
              videoTimerErrorCount = 0;
              videoItem.value.currentTime(0);
              nextTick(handlePlayVideo);
            });
          }
        });

        // 视频开始播放
        videoItem.value.on('play', () => {
          emit('close');
          emit('canplay');
        });

        // 视频播放时加载
        videoItem.value.on('timeupdate', () => {
          videoFroms.currentTime = timeFormat(
            Math.round(videoItem.value?.currentTime() || 0)
          );
          videoFroms.currentTimeNum = videoItem.value.currentTime();
        });

        // 视频播放结束
        videoItem.value.on('ended', () => {
          videoFroms.paused = true;
          emit('ended');
        });

        videoItem.value.on('waiting', () => {
          console.log('waiting')

          videoFroms.isBuffering = true;

          videoFroms.bufferTimeout && clearTimeout(videoFroms.bufferTimeout);

          // 设置缓冲超时检测（15秒）
          videoFroms.bufferTimeout = setTimeout(() => {
            if (videoFroms.isBuffering && videoFroms.isOnline) {
              console.log('缓冲超时，暂停播放');
              videoItem.value.pause();
              videoFroms.paused = true;
              message.info('网络连接不稳定，请检查网络后继续播放', {
                showIcon: false,
                render: (props: any) => {
                  return (
                    <div style="background: rgba(0,0,0,.6); color: #fff; border-radius: 8px; padding: 6px 16px;">
                      {props.content}
                    </div>
                  );
                }
              });
              videoItem.value.currentTime(videoItem.value.currentTime() + 0.01);
            }
          }, 15000);
        });

        //
        videoItem.value.on('pause', () => {
          videoFroms.paused = true;
          emit('pause');
        });

        videoItem.value.on('playing', () => {
          videoFroms.paused = false;
        });

        videoItem.value.on('canplay', (e: any) => {
          console.log('canplay')

          videoFroms.isBuffering = false;
          videoFroms.bufferTimeout && clearTimeout(videoFroms.bufferTimeout); // 清除超时检测
          // 获取时长
          videoFroms.duration = timeFormat(
            Math.round(videoItem.value.duration())
          );
          videoFroms.durationNum = videoItem.value.duration();
          emit('canplay');

        });

        // 视频播放异常
        videoItem.value.on('error', (e: any) => {
          emit('error');
          console.log(e, 'error');
          // element.pause();
          // videoItem.value?.pause();
        });
      }
    };

    const calculateSpeed = (element: any) => {
      let previousBytesLoaded = 0;
      let timer: any = null;
      let previousTime = Date.now();
      let buffterCatchArray = [] as any; // 缓存数据显示
      let isWaiting = false;

      // 缓存检测状态
      let isBuffering = false;
      // 缓存检测计时器
      let bufferTimeout: any = null;
      // 设定一个检测缓存停止的时间间隔，这里我们设置为2500毫秒（2秒）
      const BUFFER_CHECK_INTERVAL = 2500;

      function resetDownloadSpeed(time = 1500) {
        timer = setTimeout(() => {
          // displayElement.textContent = `视屏下载速度: 0 KB/s`;
          videoFroms.speedInKbps = `0 KB/s`;
        }, time);
      }

      function buffterCatch(time = 0) {
        // 设定一个计时器，检查是否在指定的时间内再次触发了progress事件
        bufferTimeout = setTimeout(() => {
          if (isBuffering) {
            // 如果计时器到达且isBuffering仍为true，则认为缓存停止
            // console.log('停止缓存数据。');
            isBuffering = false;
            videoFroms.speedInKbps = '';
          }
        }, time || BUFFER_CHECK_INTERVAL);
      }

      function resetBuffterCatch() {
        // 如果有缓存检测计时器，则清除它
        if (bufferTimeout) {
          clearTimeout(bufferTimeout);
        }
        // 标记为正在缓存
        isBuffering = true;

        buffterCatch();
      }

      /**
       * 格式化视屏播放有效时间 - 合并区间
       * @param intervals [[], []]
       * @example [[4, 8],[0, 4],[10, 30]]
       * @returns [[0, 8], [10, 30]]
       */
      const formatEffectiveTime = (intervals: any[]) => {
        const res: any = [];
        intervals.sort((a, b) => a[0] - b[0]);
        let prev = intervals[0];
        for (let i = 1; i < intervals.length; i++) {
          const cur = intervals[i];
          if (prev[1] >= cur[0]) {
            // 有重合
            prev[1] = Math.max(cur[1], prev[1]);
          } else {
            // 不重合，prev推入res数组
            res.push(prev);
            prev = cur; // 更新 prev
          }
        }
        res.push(prev);
        return res;
      };

      // 获取视频总时长
      let noData = false;

      const onProgress = () => {
        const duration = element.duration;
        const currentTime = Date.now();
        const buffered = element.buffered;
        let currentBytesLoaded = 0;
        const currentLength = 0;

        // 计算视频已缓存的总时长
        let cachedDuration = 0;
        if (buffered.length > 0) {
          for (let i = 0; i < buffered.length; i++) {
            currentBytesLoaded += buffered.end(i) - buffered.start(i);
            cachedDuration += buffered.end(i) - buffered.start(i);
            // console.log(buffered.end(i), buffered.start(i), 'bufferd');
            buffterCatchArray = formatEffectiveTime([
              ...buffterCatchArray,
              [buffered.start(i), buffered.end(i)]
            ]);
          }
          // for (let i = 0; i < buffered.length; i++) {
          //   // 寻找当前时间之后最近的点
          //   if (buffered.start(buffered.length - 1 - i) < element.currentTime) {
          //     cachedDuration += buffered.end(i) - buffered.start(i);
          //     currentLength =
          //       (buffered.end(buffered.length - 1 - i) / duration) * 100;
          //     break;
          //   }
          // }
          currentBytesLoaded *= element.duration * element.seekable.end(0); // 更精确地近似字节加载量
        }

        // 计算未缓存的时间段
        const uncachedDuration = duration - cachedDuration;
        let uncachedTime = true; // 没有缓存时间
        buffterCatchArray.forEach((item: any) => {
          if (element.currentTime >= item[0] && uncachedTime <= item[1]) {
            uncachedTime = false;
          }
        });

        // if (duration) {
        //   const sliderDom: any = document.querySelector(
        //     '#' + videoSlider + ' .n-slider'
        //   );
        //   if (sliderDom) {
        //     sliderDom.style.setProperty(
        //       '--catch-width',
        //       uncachedDuration > 0 ? `${currentLength}%` : 'calc(100% + 17px)'
        //     );
        //   }

        // }
        // console.log(
        //   uncachedTime,
        //   duration,
        //   cachedDuration,
        //   'duration',
        //   buffterCatchArray,
        //   element.currentTime,
        //   currentLength + '%',
        //   isWaiting,
        //   currentBytesLoaded <= previousBytesLoaded
        // );

        const isNoBuffer = currentBytesLoaded <= previousBytesLoaded;
        // 如果存在未缓存的时间段，可以根据具体情况做出相应处理
        if (uncachedDuration > 0) {
          // console.log(
          //   'progress',
          //   currentBytesLoaded > previousBytesLoaded,
          //   currentBytesLoaded,
          //   previousBytesLoaded,
          //   '------ 加载中'
          // );
          if (currentBytesLoaded > previousBytesLoaded && videoFroms.isOnline) {
            const timeDiff = (currentTime - previousTime) / 1000; // 时间差转换为秒
            const bytesDiff = currentBytesLoaded - previousBytesLoaded; // 字节差值
            const speed = bytesDiff / timeDiff; // 字节每秒
            // console.log(timeDiff, bytesDiff, speed);
            // console.log(element.paused, 'element.paused');
            if (!element.paused) {
              const kbps = speed / 1024;
              const speedInKbps = kbps.toFixed(2); // 转换为千字节每秒并保留两位小数
              if (kbps > 1024) {
                videoFroms.speedInKbps = `${Number(
                  (kbps / 1024).toFixed(2)
                )} M/s`;
              } else {
                videoFroms.speedInKbps = `${Number(speedInKbps)} KB/s`;
              }

              // 如果1秒钟没有返回就重置数据
              clearTimeout(timer);
              resetDownloadSpeed();
            }

            previousBytesLoaded = currentBytesLoaded;
            previousTime = currentTime;
            noData = false;
          }
          if (isNoBuffer && !uncachedTime) {
            // 如果1秒钟没有返回就重置数据
            if (!noData) {
              clearTimeout(timer);
              clearTimeout(bufferTimeout);
              setTimeout(() => {
                if (isBuffering) {
                  // 如果计时器到达且isBuffering仍为true，则认为缓存停止
                  // console.log('停止缓存数据-。');
                  isBuffering = false;
                  videoFroms.speedInKbps = '';
                }
              }, 800);
            }

            noData = true;
          }
          if (element.paused || !videoFroms.isOnline) {
            clearTimeout(timer);
            videoFroms.speedInKbps = '';
          }

          if (!isWaiting) {
            resetBuffterCatch();
          }
        } else {
          clearTimeout(timer);
          buffterCatch(1000);
        }
      };

      const onWaiting = () => {
        // console.log('waiting');
        isWaiting = true;
        let uncachedTime = true; // 没有缓存时间
        buffterCatchArray.forEach((item: any) => {
          if (element.currentTime >= item[0] && uncachedTime <= item[1]) {
            uncachedTime = false;
          }
        });

        if (!element.paused && videoFroms.isOnline && uncachedTime) {
          // 如果1秒钟没有返回就重置数据
          clearTimeout(timer);
          resetDownloadSpeed();
        }

        // 如果有缓存检测计时器，则清除它
        if (bufferTimeout) {
          clearTimeout(bufferTimeout);
        }
      };

      const onCanplay = () => {
        // console.log('canplay');
        isWaiting = false;
        resetBuffterCatch();
      };

      const onPause = () => {
        clearTimeout(timer);
        // 如果有缓存检测计时器，则清除它
        if (bufferTimeout) {
          clearTimeout(bufferTimeout);
        }
        videoFroms.speedInKbps = '';
      };

      element.removeEventListener('progress', onProgress);
      element.removeEventListener('waiting', onWaiting);
      element.removeEventListener('canplay', onCanplay);
      element.removeEventListener('pause', onPause);
      // if (type !== 'remove') {
      element.addEventListener('progress', onProgress);
      element.addEventListener('waiting', onWaiting);
      element.addEventListener('canplay', onCanplay);
      element.addEventListener('pause', onPause);
      // } else {
      //   element.removeEventListener('progress', onProgress);
      //   element.removeEventListener('waiting', onWaiting);
      //   element.removeEventListener('canplay', onCanplay);
      //   element.removeEventListener('pause', onPause);
      // }
    };

    const onChangeOnlineStatus = (val: any) => {
      if (val.type === 'online') {
        videoFroms.isOnline = true;
        const currentTime = videoItem.value.currentTime();
        videoItem.value.load();
        videoItem.value.currentTime(currentTime);
        console.log('online')
        pause();
      } else if (val.type === 'offline') {
        videoFroms.isOnline = false;
        console.log('offline')

        // 去掉检测加载缓存
        videoFroms.isBuffering = false;
        videoFroms.bufferTimeout && clearTimeout(videoFroms.bufferTimeout);
      }
    };
    onMounted(() => {
      videoItem.value = TCPlayer(videoID.value, {
        appID: '',
        controls: false
      }); // player-container-id 为播放器容器 ID，必须与 html 中一致

      __init();

      nextTick(() => {
        calculateSpeed(videoRef.value);
      });

      window.addEventListener('online', onChangeOnlineStatus);
      window.addEventListener('offline', onChangeOnlineStatus);
    });
    const stop = () => {
      videoItem.value.currentTime(0);
      videoItem.value.pause();
    };

    const pause = () => {
      videoItem.value.pause();
      videoFroms.paused = true;
    };

    onUnmounted(() => {
      if (videoItem.value) {
        videoItem.value.pause();
        videoItem.value.src('');
        videoItem.value.dispose();
      }

      window.removeEventListener('online', onChangeOnlineStatus);
      window.removeEventListener('offline', onChangeOnlineStatus);
    });

    watch(
      () => props.item,
      () => {
        videoItem.value.pause();
        videoItem.value.currentTime(0);
        if (item.value?.id) {
          // videoItem.value.poster(props.item.coverImg); // 封面
          // videoItem.value.src(item.value.content); // url 播放地址
          __init();

          videoFroms.paused = true;
        }
        nextTick(() => {
          calculateSpeed(videoRef.value);
        });
      }
    );
    watch(
      () => props.showModel,
      () => {
        // console.log(props.showModel, 'props.showModel')
        videoFroms.showAction = props.showModel;
        videoFroms.speedControl = false;
      }
    );
    expose({
      onPlay,
      stop,
      pause,
      // changePlayBtn,
      toggleHideControl
    });
    return () => (
      <div class={styles.videoWrap}>
        <video
          style={{ width: '100%', height: '100%' }}
          ref={videoRef}
          id={videoID.value}
          preload="auto"
          playsinline
          webkit-playsinline
          x5-video-player-type="h5"></video>
        <div class={styles.videoPop}></div>

        <div
          class={[
            styles.controls,
            videoFroms.showAction ? '' : styles.sectionAnimate
          ]}
          onClick={(e: MouseEvent) => {
            e.stopPropagation();
            if (videoItem.value.paused()) return;
            emit('close');
            emit('reset');
          }}>
          <div class={styles.slider}>
            {props.imagePos !== 'right' && <div class={styles.time}>
              <div
                class="plyr__time plyr__time--current"
                aria-label="Current time">
                {videoFroms.currentTime}
              </div>
              <span class={styles.line}>/</span>
              <div
                class="plyr__time plyr__time--duration"
                aria-label="Duration">
                {videoFroms.duration}
              </div>
            </div>}
            <NSlider
              value={videoFroms.currentTimeNum}
              step={0.01}
              max={videoFroms.durationNum}
              tooltip={false}
              onUpdate:value={(val: number) => {
                videoFroms.speedControl = false;
                videoItem.value.currentTime(val);
                videoFroms.currentTimeNum = val;
                videoFroms.currentTime = timeFormat(Math.round(val || 0));
              }}
            />
            {props.imagePos === 'right' && <div class={[styles.time, styles.rightTime]}>
                      <div
                        class="plyr__time plyr__time--current"
                        aria-label="Current time">
                        {videoFroms.currentTime}
                      </div>
                      <span class={styles.line}>/</span>
                      <div
                        class="plyr__time plyr__time--duration"
                        aria-label="Duration">
                        {videoFroms.duration}
                      </div>
                    </div>}
          </div>
          <div class={styles.tools}>
            {props.imagePos === 'right' ? (
              <>
                <div class={styles.actions}>
                  <div class={styles.actionWrap}>
                    <div class={styles.title}>{props.item.title}</div>
                    {/* <div class={styles.time}>
                      <div
                        class="plyr__time plyr__time--current"
                        aria-label="Current time">
                        {videoFroms.currentTime}
                      </div>
                      <span class={styles.line}>/</span>
                      <div
                        class="plyr__time plyr__time--duration"
                        aria-label="Duration">
                        {videoFroms.duration}
                      </div>
                    </div> */}
                  </div>
                </div>
                <div class={styles.actions}>
                  <div class={styles.actionWrap}>
                    <div
                      class={styles.downloadSpeed}
                      style={{ paddingRight: '20px' }}>
                      {videoFroms.speedInKbps}
                    </div>
                    <div
                      class={styles.actionBtnSpeed}
                      onClick={e => {
                        e.stopPropagation();
                        videoFroms.speedControl = !videoFroms.speedControl;
                      }}>
                      <img src={iconSpeed} />
                      <div
                        style={{
                          display: videoFroms.speedControl ? 'block' : 'none'
                        }}>
                        <div
                          class={styles.sliderPopup}
                          onClick={(e: Event) => {
                            e.stopPropagation();
                          }}>
                          <i
                            class={styles.iconAdd}
                            onClick={() => {
                              if (videoFroms.defaultSpeed >= 1.5) {
                                return;
                              }

                              if (videoItem.value) {
                                videoFroms.defaultSpeed =
                                  (videoFroms.defaultSpeed * 10 + 1) / 10;
                                videoItem.value.playbackRate(
                                  videoFroms.defaultSpeed
                                );
                              }
                            }}></i>
                          <NSlider
                            value={videoFroms.defaultSpeed}
                            step={0.1}
                            max={1.5}
                            min={0.5}
                            vertical
                            tooltip={false}
                            onUpdate:value={(val: number) => {
                              videoFroms.defaultSpeed = val;

                              if (videoItem.value) {
                                videoItem.value.playbackRate(
                                  videoFroms.defaultSpeed
                                );
                              }
                            }}>
                            {{
                              thumb: () => (
                                <div class={styles.sliderPoint}>
                                  {videoFroms.defaultSpeed}
                                  <span>x</span>
                                </div>
                              )
                            }}
                          </NSlider>
                          <i
                            class={[styles.iconCut]}
                            onClick={() => {
                              if (videoFroms.defaultSpeed <= 0.5) {
                                return;
                              }
                              if (videoItem.value) {
                                videoFroms.defaultSpeed =
                                  (videoFroms.defaultSpeed * 10 - 1) / 10;
                                videoItem.value.playbackRate(
                                  videoFroms.defaultSpeed
                                );
                              }
                            }}></i>
                        </div>
                      </div>
                    </div>
                    <button class={styles.iconReplay} onClick={onReplay}>
                      <img src={iconLoop} />
                    </button>
                    <div
                      class={styles.actionBtn}
                      onClick={() => {
                        videoFroms.speedControl = false;
                        onToggleVideo();
                      }}>
                      <img
                        style={{
                          display: videoFroms.paused ? 'block' : 'none'
                        }}
                        class={styles.playIcon}
                        src={iconplay}
                      />

                      <img
                        style={{
                          display: videoFroms.paused ? 'none' : 'block'
                        }}
                        class={styles.playIcon}
                        src={iconpause}
                      />
                    </div>
                  </div>
                </div>
              </>
            ) : (
              <>
                <div class={styles.actions}>
                  <div class={styles.actionWrap}>
                    <div
                      class={styles.actionBtn}
                      onClick={() => {
                        videoFroms.speedControl = false;
                        onToggleVideo();
                      }}>
                      {/* {videoFroms.paused ? (
                        <img class={styles.playIcon} src={iconplay} />
                      ) : (
                        <img class={styles.playIcon} src={iconpause} />
                      )} */}
                      <img
                        style={{
                          display: videoFroms.paused ? 'block' : 'none'
                        }}
                        class={styles.playIcon}
                        src={iconplay}
                      />

                      <img
                        style={{
                          display: videoFroms.paused ? 'none' : 'block'
                        }}
                        class={styles.playIcon}
                        src={iconpause}
                      />
                    </div>

                    <button class={styles.iconReplay} onClick={onReplay}>
                      <img src={iconLoop} />
                    </button>

                    <div
                      class={styles.actionBtnSpeed}
                      onClick={e => {
                        e.stopPropagation();
                        videoFroms.speedControl = !videoFroms.speedControl;
                      }}>
                      <img src={iconSpeed} />

                      <div
                        style={{
                          display: videoFroms.speedControl ? 'block' : 'none'
                        }}>
                        <div
                          class={styles.sliderPopup}
                          onClick={(e: Event) => {
                            e.stopPropagation();
                          }}>
                          <i
                            class={styles.iconAdd}
                            onClick={() => {
                              if (videoFroms.defaultSpeed >= 1.5) {
                                return;
                              }

                              if (videoItem.value) {
                                videoFroms.defaultSpeed =
                                  (videoFroms.defaultSpeed * 10 + 1) / 10;
                                videoItem.value.playbackRate(
                                  videoFroms.defaultSpeed
                                );
                              }
                            }}></i>
                          <NSlider
                            value={videoFroms.defaultSpeed}
                            step={0.1}
                            max={1.5}
                            min={0.5}
                            vertical
                            tooltip={false}
                            onUpdate:value={(val: number) => {
                              videoFroms.defaultSpeed = val;

                              if (videoItem.value) {
                                videoItem.value.playbackRate(
                                  videoFroms.defaultSpeed
                                );
                              }
                            }}>
                            {{
                              thumb: () => (
                                <div class={styles.sliderPoint}>
                                  {videoFroms.defaultSpeed}
                                  <span>x</span>
                                </div>
                              )
                            }}
                          </NSlider>
                          <i
                            class={[styles.iconCut]}
                            onClick={() => {
                              if (videoFroms.defaultSpeed <= 0.5) {
                                return;
                              }
                              if (videoItem.value) {
                                videoFroms.defaultSpeed =
                                  (videoFroms.defaultSpeed * 10 - 1) / 10;
                                videoItem.value.playbackRate(
                                  videoFroms.defaultSpeed
                                );
                              }
                            }}></i>
                        </div>
                      </div>
                    </div>

                    <div class={styles.downloadSpeed}>
                      {videoFroms.speedInKbps}
                    </div>
                  </div>
                </div>
                <div class={styles.actions}>
                  <div class={styles.actionWrap}>
                   <div class={styles.title}>{props.item.title}</div>
                    {/* <div class={styles.time}>
                      <div
                        class="plyr__time plyr__time--current"
                        aria-label="Current time">
                        {videoFroms.currentTime}
                      </div>
                      <span class={styles.line}>/</span>
                      <div
                        class="plyr__time plyr__time--duration"
                        aria-label="Duration">
                        {videoFroms.duration}
                      </div>
                    </div> */}
                  </div>
                </div>
              </>
            )}
          </div>
        </div>
      </div>
    );
  }
});
