hy-dispatch-ui-v3 0.1.6 → 0.2.0

package/lib/components/appVideoPlayer/index.js

@@ -0,0 +1,11 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var appVideoPlayer = require('./appVideoPlayer.vue.js');
+var handler = require('../../utils/handler.js');
+
+const AppVideoPlayer = handler.withInstall(appVideoPlayer.default);
+
+exports.AppVideoPlayer = AppVideoPlayer;
+exports.default = AppVideoPlayer;

package/lib/components/appVideoPlayer/js/index.js

@@ -0,0 +1,429 @@
+'use strict';
+
+var vue = require('vue');
+var elementPlus = require('element-plus');
+var useVideoPlayerConfig = require('../../../hooks/useVideoPlayerConfig.js');
+var date = require('../../../utils/date.js');
+var index = require('../../appConfirmDialog/index.js');
+var handler = require('../../../utils/handler.js');
+var is = require('../../../utils/is.js');
+var useLocale = require('../../../hooks/useLocale.js');
+
+const useVideoPlayer = (hy) => {
+  const { props, emits, videoRef } = hy;
+  const { t } = useLocale.useLocale();
+  const { videoPlayerConfig } = useVideoPlayerConfig.useVideoPlayerConfig();
+  const speed = vue.ref(1);
+  const playRules = vue.ref(1);
+  const loading = vue.ref(false);
+  const videoItem = vue.ref({});
+  const videoUrl = vue.ref("");
+  const totalTime = vue.ref(0);
+  const curTime = vue.ref(0);
+  const progress = vue.ref(0);
+  const isDrop = vue.ref(false);
+  const isFullScreen = vue.ref(false);
+  const volumeValue = vue.ref(100);
+  const hasVLC = vue.ref(true);
+  const isCanNotPlayType = vue.ref(true);
+  const videoState = vue.ref("NO_LOAD");
+  const speedList = [
+    { value: 0.5, label: "0.5 X" },
+    { value: 1, label: "1.0 X" },
+    { value: 1.5, label: "1.5 X" },
+    { value: 2, label: "2.0 X" },
+    { value: 3, label: "3.0 X" }
+  ];
+  const playRulesList = [
+    {
+      value: 1,
+      label: t("videoPlayer.stopAfterPlayback"),
+      svgName: "player-mediaCenter_stopPlaying"
+    },
+    {
+      value: 2,
+      label: t("videoPlayer.continuousPlayback"),
+      svgName: "player-mediaCenter_autoplay"
+    },
+    {
+      value: 3,
+      label: t("videoPlayer.loopPlayback"),
+      svgName: "player-mediaCenter_loopPlayback"
+    }
+  ];
+  const isAnalyseType = vue.computed(() => {
+    return props.type === "analyse";
+  });
+  const speedLabel = vue.computed(() => {
+    if (speed.value === 1) {
+      return t("videoPlayer.multiples");
+    } else {
+      return speedList.find((item) => item.value === speed.value).label;
+    }
+  });
+  const isCanPlay = vue.computed(() => {
+    return videoState.value !== "NO_LOAD" || videoState.value !== "CAN_NOT_PLAY";
+  });
+  const currentDuration = vue.computed(() => {
+    const time = date.formatDuration(curTime.value, true);
+    if (!time) return "- -";
+    return `${time}"`;
+  });
+  const totalDuration = vue.computed(() => {
+    const time = date.formatDuration(totalTime.value, true);
+    if (!time) return "- -";
+    return `${time}"`;
+  });
+  async function initVideo() {
+    await vue.nextTick();
+    videoRef.value.addEventListener("canplay", (e) => {
+      loading.value = false;
+      if (!e.target?.videoWidth || !e.target?.videoHeight || !e.target?.webkitVideoDecodedByteCount) {
+        videoRef.value.pause();
+        videoState.value = "CAN_NOT_PLAY";
+        isCanNotPlayType.value = true;
+        console.error("canplay", e);
+        return;
+      }
+      videoState.value = "IS_LOAD";
+      totalTime.value = Math.floor(videoRef.value.duration);
+      emits("canplay", e);
+    });
+    videoRef.value.addEventListener("play", () => {
+      videoRef.value.playbackRate = speed.value;
+      videoState.value = "PLAYING";
+      if (videoUrl.value && videoItem.value) {
+        emits("play-start", videoUrl.value, videoItem.value);
+      }
+    });
+    videoRef.value.addEventListener("pause", (e) => {
+      if (isCanNotPlay(e)) {
+        return;
+      }
+      videoState.value = "PAUSE";
+    });
+    videoRef.value.addEventListener("ended", () => {
+      videoState.value = "PLAY_END";
+      if (playRules.value === 2) {
+        playNext();
+      } else if (playRules.value === 3) {
+        videoRef.value.load();
+        videoRef.value.play();
+      }
+      emits("play-ended");
+    });
+    videoRef.value.addEventListener(
+      "timeupdate",
+      (e) => {
+        if (isCanNotPlay(e)) {
+          return;
+        }
+        videoState.value = "PLAYING";
+        if (!isDrop.value) {
+          const currentTime = videoRef.value.currentTime;
+          if (videoRef.value) {
+            curTime.value = Math.floor(currentTime);
+          } else {
+            setTimeout(() => {
+              if (videoRef.value) {
+                curTime.value = Math.floor(currentTime);
+              }
+            }, 1e3);
+          }
+          progress.value = curTime.value / totalTime.value * 100;
+          emits("timeupdate", e);
+        }
+      },
+      false
+    );
+    videoRef.value.addEventListener("error", (e) => {
+      loading.value = false;
+      videoState.value = "CAN_NOT_PLAY";
+      isCanNotPlayType.value = isCantPlayType(e);
+      console.error("error", e);
+      videoRef.value = null;
+    });
+  }
+  async function playVideo(filePath, item) {
+    const { isSupport } = is.isSupportH265();
+    if (item && item.fileCoding === "H.265" && !isSupport) {
+      videoState.value = "CAN_NOT_PLAY";
+      isCanNotPlayType.value = true;
+      return;
+    }
+    if (videoState.value === "CAN_NOT_PLAY") {
+      videoState.value = "NO_LOAD";
+      await vue.nextTick();
+      initVideo();
+    }
+    if (item) {
+      if (item.id !== videoItem.value.id || !videoRef.value.src) {
+        loading.value = true;
+        videoItem.value = item;
+        videoUrl.value = filePath;
+        videoRef.value.src = filePath;
+      }
+    } else if (videoUrl.value === "") {
+      return false;
+    }
+    if (videoItem.value.playSeconds) {
+      jumpDuration(videoItem.value.playSeconds);
+    }
+    await vue.nextTick();
+    videoRef.value.play();
+    videoState.value = "PLAYING";
+  }
+  function pauseVideo() {
+    if (videoState.value === "CAN_NOT_PLAY") return;
+    videoRef.value && videoRef.value.pause();
+    videoState.value = "PAUSE";
+  }
+  function playPrevious() {
+    if (props.type === "default") {
+      const index = props.playList.findIndex(
+        (item) => item.id === videoItem.value.id
+      );
+      if (index > 0 && index !== props.playList.length) {
+        const item = props.playList[index - 1];
+        playVideo(item.filePath, item);
+        emits("play-previous");
+      } else {
+        elementPlus.ElMessage.warning(t("videoPlayer.currentIsTheFirstItem"));
+      }
+    } else if (isAnalyseType.value) {
+      if (!isCanPlay.value) return;
+      emits("play-previous");
+    }
+  }
+  function playNext() {
+    if (props.type === "default") {
+      const index = props.playList.findIndex(
+        (item) => item.id === videoItem.value.id
+      );
+      if (index !== props.playList.length - 1) {
+        const item = props.playList[index + 1];
+        playVideo(item.filePath, item);
+        emits("play-next");
+      } else {
+        elementPlus.ElMessage.warning(t("videoPlayer.currentIsTheLastItem"));
+      }
+    } else if (isAnalyseType.value) {
+      if (!isCanPlay.value) return;
+      emits("play-next");
+    }
+  }
+  function playRulesHandler(value) {
+    if (value === 3) {
+      playRules.value = 1;
+    } else {
+      playRules.value = value + 1;
+    }
+  }
+  function speedHandler(value) {
+    speed.value = value;
+    if (!videoRef.value) return;
+    videoRef.value.playbackRate = value;
+  }
+  function changeVolume() {
+    if (!videoRef.value) return;
+    videoRef.value.volume = volumeValue.value / 100;
+  }
+  function getNowWh() {
+    curTime.value = totalTime.value * (progress.value / 100);
+    videoRef.value.currentTime = curTime.value;
+    isDrop.value = false;
+  }
+  function setVideoCurrentTime(currentTime) {
+    if (!videoRef.value || typeof currentTime !== "number") return;
+    videoRef.value.currentTime = currentTime;
+  }
+  function getPercent(num, total) {
+    num = parseFloat(num);
+    total = parseFloat(total);
+    if (isNaN(num) || isNaN(total)) {
+      return 0;
+    }
+    return total <= 0 ? 0 : Math.round(num / total * 1e4) / 100;
+  }
+  function isCanNotPlay(e) {
+    if (videoState.value === "CAN_NOT_PLAY") {
+      return true;
+    }
+    if (e && e.target.error) {
+      const { code } = e.target.error;
+      return code === 4;
+    }
+    return false;
+  }
+  function isCantPlayType(e) {
+    if (e.target.error) {
+      const { code, message } = e.target.error;
+      return code === 4 && !message.includes("Format error") || message.includes("PIPELINE_ERROR_DECODE");
+    }
+    return false;
+  }
+  function jumpDuration(s) {
+    videoRef.value.currentTime = s;
+  }
+  function initFullScreenEvent() {
+    document.addEventListener("fullscreenchange", fullscreenchangeHandler);
+  }
+  function destroyFullScreenEvent() {
+    document.removeEventListener("fullscreenchange", fullscreenchangeHandler);
+  }
+  function fullscreenchangeHandler(e) {
+    if (document.fullscreenElement) ; else {
+      isFullScreen.value = false;
+    }
+  }
+  function onFullScreenHandler() {
+    if (isFullScreen.value) {
+      const el = document;
+      if (el.exitFullscreen) {
+        el.exitFullscreen();
+      }
+    } else {
+      const el = document.documentElement;
+      if (el.requestFullscreen) {
+        isFullScreen.value = true;
+        el.requestFullscreen();
+      }
+    }
+  }
+  function videoCutting() {
+    const canvas = document.createElement("canvas");
+    const img = document.getElementById("img");
+    const video = videoRef.value;
+    video.setAttribute("crossOrigin", "anonymous");
+    canvas.width = video.clientWidth;
+    canvas.height = video.clientHeight;
+    canvas.getContext("2d").drawImage(video, 0, 0, canvas.width, canvas.height);
+    const dataURL = canvas.toDataURL("image/png");
+    img.setAttribute("src", dataURL);
+  }
+  function openVLC() {
+    const url = `${props.vlcProtocol}:${videoUrl.value}`;
+    window.protocolCheck(url, () => {
+      hasVLC.value = false;
+      elementPlus.ElMessage.error(t("videoPlayer.notInstallVlcTips"));
+    });
+  }
+  function downloadVLC() {
+    if (!props.vlcAddress) {
+      elementPlus.ElMessage.warning(
+        t("videoPlayer.pleaseConfigureTheAddressForDownloadingVLC")
+      );
+      return;
+    }
+    const newOpenWindow = window.open("about:blank");
+    if (newOpenWindow) {
+      newOpenWindow.location = props.vlcAddress;
+    }
+    if (newOpenWindow) {
+      elementPlus.ElMessage.success(t("videoPlayer.operationSuccessful"));
+    } else {
+      index.AppConfirmDialog.confirm({
+        title: "\u8DF3\u8F6C\u63D0\u793A",
+        content: `<div><p>${t(
+          "videoPlayer.theCurrentBrowserBlocksTheOpeningOfNewWindows"
+        )}</p><p>${t(
+          "videoPlayer.pleaseGoToTheBrowserSettingsAndClickOnTheDownloadOrCopyLinkToOpenInTheBrowser"
+        )}</p></div>`,
+        submitText: t("videoPlayer.copyLink"),
+        onSubmit: async () => {
+          await handler.copyText(props.vlcAddress);
+          elementPlus.ElMessage.success(t("hy.copySuccessfully"));
+        }
+      });
+    }
+  }
+  function onDownloadHandler() {
+    if (props.downloadFn) {
+      props.downloadFn(videoItem.value, props.playList);
+      return;
+    }
+    if (videoPlayerConfig.value.downloadFn) {
+      videoPlayerConfig.value.downloadFn(videoItem.value, props.playList);
+      return;
+    }
+  }
+  playRulesHandler(props.playRules);
+  speedHandler(props.speed);
+  initVideo();
+  return {
+    speed,
+    playRules,
+    loading,
+    videoItem,
+    videoUrl,
+    currentDuration,
+    totalDuration,
+    progress,
+    isDrop,
+    isFullScreen,
+    volumeValue,
+    hasVLC,
+    isCanNotPlayType,
+    videoState,
+    speedLabel,
+    isCanPlay,
+    isAnalyseType,
+    // 配置
+    speedList,
+    playRulesList,
+    // 函数
+    playVideo,
+    pauseVideo,
+    playPrevious,
+    playNext,
+    playRulesHandler,
+    speedHandler,
+    changeVolume,
+    getNowWh,
+    setVideoCurrentTime,
+    getPercent,
+    initFullScreenEvent,
+    destroyFullScreenEvent,
+    onFullScreenHandler,
+    videoCutting,
+    openVLC,
+    downloadVLC,
+    onDownloadHandler
+  };
+};
+const useVideoResize = (hy) => {
+  const { props, videoWrapperRef, videoRef } = hy;
+  const wrapperHeight = vue.ref(0);
+  const isExpand = vue.ref(true);
+  const videoHeight = vue.computed(() => {
+    if (!props.showShrink) {
+      return;
+    }
+    return `${isExpand.value ? wrapperHeight.value ? wrapperHeight.value - 58 : 0 : 0}px`;
+  });
+  let resizeObs;
+  async function listenerVideoWrapper() {
+    await vue.nextTick();
+    resizeObs = new ResizeObserver((entries) => {
+      const item = entries[0];
+      wrapperHeight.value = item.target.clientHeight;
+    });
+    resizeObs.observe(videoWrapperRef.value);
+  }
+  function unlistenerVideoWrapper() {
+    resizeObs && resizeObs.disconnect();
+  }
+  function onSwitchShrink() {
+    isExpand.value = !isExpand.value;
+  }
+  return {
+    isExpand,
+    videoHeight,
+    onSwitchShrink,
+    listenerVideoWrapper,
+    unlistenerVideoWrapper
+  };
+};
+
+exports.useVideoPlayer = useVideoPlayer;
+exports.useVideoResize = useVideoResize;

package/lib/components/appVideoPlayer/style/appVideoPlayer.scss

@@ -0,0 +1,275 @@
+.video-player-content {
+  width: 100%;
+  border: 1px solid rgba(var(--hy-border));
+  background: #040814;
+  border-radius: 12px;
+  overflow: hidden;
+  display: flex;
+  flex-direction: column;
+  position: relative;
+  transition: all 0.3s linear;
+  video {
+    width: 100%;
+    transition: all 0.3s linear;
+  }
+  &.video-player-content-pick-up {
+    height: 60px !important;
+  }
+  // 全屏播放器样式
+  &.full-video-player-content {
+    height: 100% !important;
+    position: fixed;
+    left: 0;
+    top: 0;
+    z-index: 999;
+    transition: none;
+    video {
+      transition: none;
+    }
+
+    .operator-box {
+      height: 65px;
+      .center-operator {
+        .app-icon {
+          width: 34px;
+          height: 34px;
+        }
+        &.center-analyse {
+          .last-icon,
+          .next-icon {
+            width: 30px;
+            height: 30px;
+          }
+        }
+      }
+
+      .left-operator {
+        font-size: 16px;
+      }
+
+      .right-operator {
+        .speed-box {
+          height: 28px;
+          font-size: 14px;
+        }
+        .app-icon {
+          width: 28px;
+          height: 28px;
+          &.volume-icon {
+            width: 30px;
+            height: 30px;
+          }
+        }
+      }
+    }
+
+    .float-operator-item {
+      position: absolute;
+      right: 16px;
+      z-index: 100;
+      color: rgba(var(--hy-main));
+
+      .app-icon {
+        width: 28px;
+        height: 28px;
+      }
+    }
+  }
+  &:not(.video-player-content-pick-up) {
+    height: 100%;
+    video {
+      height: 0;
+      flex-grow: 1;
+    }
+  }
+
+  .operator-box {
+    width: 100%;
+    height: 42px;
+    flex-shrink: 0;
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    position: relative;
+    background: #040814;
+    color: rgba(var(--hy-main));
+    padding: 0 10px;
+    margin-top: 16px;
+
+    .progress-box {
+      width: 100%;
+      height: 14px;
+      position: absolute;
+      top: -14px;
+      left: 0;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      text-align: center;
+
+      input[type='range'] {
+        width: 100%;
+        height: 6px;
+        outline: none;
+        border-radius: 20px;
+        -webkit-appearance: none; /*清除系统默认样式*/
+        background-color: #eaf5f9;
+        position: relative;
+      }
+
+      input[type='range']::-webkit-slider-thumb {
+        -webkit-appearance: none; /*清除系统默认样式*/
+        width: 14px;
+        height: 14px;
+        border-radius: 20px;
+        background: rgba(var(--hy-main));
+        box-shadow: 0px 0px 6px 3px rgba(var(--hy-theme));
+        cursor: pointer;
+      }
+
+      input[type='range']::-ms-fill-lower {
+        -webkit-appearance: none;
+      }
+    }
+
+    .left-operator {
+      font-size: 12px;
+      font-weight: bold;
+      color: rgba(var(--hy-auxiliary));
+      display: flex;
+      align-items: center;
+      column-gap: 4px;
+      white-space: nowrap;
+    }
+
+    .center-operator {
+      position: absolute;
+      left: 50%;
+      top: 50%;
+      transform: translate(-50%, -50%);
+      display: flex;
+      align-items: center;
+      column-gap: 10px;
+      & > div {
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        cursor: pointer;
+        .app-icon {
+          width: 26px;
+          height: 26px;
+        }
+      }
+      &.center-analyse {
+        .last-icon,
+        .next-icon {
+          width: 22px;
+          height: 22px;
+        }
+      }
+    }
+
+    .right-operator {
+      display: flex;
+      align-items: center;
+      justify-content: flex-end;
+      column-gap: 10px;
+      position: relative;
+      color: rgba(var(--hy-main));
+
+      .speed-box {
+        min-width: 60px;
+        height: 24px;
+        font-size: 12px;
+        color: rgba(var(--hy-auxiliary));
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        cursor: pointer;
+        user-select: none;
+        padding: 0 6px;
+        border: 1px solid rgba(var(--hy-border));
+        border-radius: 4px;
+        background-color: rgba(var(--hy-background-2));
+      }
+
+      .app-icon {
+        width: 18px;
+        height: 18px;
+        cursor: pointer;
+        &.volume-icon {
+          width: 20px;
+          height: 20px;
+        }
+      }
+    }
+  }
+
+  .float-operator-item {
+    position: absolute;
+    top: 20px;
+    right: 10px;
+    z-index: 100;
+    color: rgba(var(--hy-main));
+    display: flex;
+    flex-direction: column;
+    row-gap: 10px;
+
+    .app-icon {
+      width: 24px;
+      height: 24px;
+      cursor: pointer;
+    }
+  }
+
+  .right-center-operator {
+    top: 40%;
+  }
+
+  .vlc-between-control {
+    width: 30px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    position: absolute;
+    top: 0;
+    bottom: 0;
+    background: linear-gradient(
+      to bottom,
+      rgba(28, 51, 74, 0) 0%,
+      #1c334ac4 50%,
+      rgba(28, 51, 74, 0) 100%
+    );
+  }
+}
+
+.popover-volume-slider {
+  min-width: auto !important;
+  width: 40px !important;
+  padding: 16px 0;
+}
+
+.popover-speed {
+  min-width: auto !important;
+  width: 62px !important;
+  padding: 0px !important;
+  .speed-list {
+    width: 100%;
+    color: rgba(var(--hy-auxiliary));
+    font-size: 12px;
+    li {
+      transition: 0.5s;
+      height: 26px;
+      line-height: 26px;
+      text-align: center;
+      &:after {
+        transition: 0s;
+      }
+      &:hover,
+      &.selectBox {
+        color: rgba(var(--hy-theme));
+        background: rgba(var(--hy-background-3));
+      }
+    }
+  }
+}