cnhis-design-vue 3.1.9-beta.4 → 3.1.9-beta.5

package/es/src/components/player-vod/player2.mjs

@@ -0,0 +1,121 @@
+import { defineComponent, reactive, ref, computed, onMounted, watch, createVNode } from 'vue';
+import videojs from 'video.js/dist/video.min.js';
+import 'video.js/dist/video-js.css';
+
+var playerVod = defineComponent({
+  name: "player",
+  props: {
+    options: {
+      type: Object,
+      required: true,
+      default: () => {
+      }
+    }
+  },
+  setup(props, context) {
+    let tempW = document.documentElement.clientWidth * 0.6 + "";
+    const state = reactive({
+      player: null,
+      playerOptions: {},
+      defaultOptions: {
+        playbackRates: [0.5, 1, 1.5, 2],
+        autoplay: true,
+        muted: false,
+        loop: false,
+        preload: "auto",
+        src: "",
+        poster: "",
+        height: 600,
+        width: parseInt(tempW),
+        controls: true,
+        notSupportedMessage: "\u6B64\u89C6\u9891\u6682\u65E0\u6CD5\u64AD\u653E",
+        suppressNotSupportedError: true,
+        controlBar: {
+          timeDivider: true,
+          durationDisplay: true,
+          currentTimeDisplay: true,
+          remainingTimeDisplay: false,
+          pictureInPictureToggle: false,
+          volumePanel: {
+            inline: false
+          }
+        },
+        errorDisplay: true,
+        posterImage: false,
+        bigPlayButton: true,
+        textTrackDisplay: false
+      }
+    });
+    const videoDom = ref(null);
+    const error = (e) => {
+      let err = e.error();
+      if (err.code === 2) {
+        let buffTime = e.bufferedEnd() - 6;
+        e.load(window.playerOptions.sources[0].src);
+        e.currentTime(buffTime);
+        e.play();
+      } else {
+        window.alert.err(err.message);
+      }
+    };
+    const initVideo = () => {
+      state.player = videojs(videoDom.value, Object.assign(state.defaultOptions, props.options), function() {
+        state.player.on("error", () => {
+          let err = error();
+          if (err.code === 2) {
+            let buffTime = window.bufferedEnd() - 6;
+            window.load(src.value);
+            window.currentTime(buffTime);
+            window.play();
+          } else {
+            console.log(err.message);
+          }
+        });
+      });
+      state.player.src(src.value);
+      if (state.player)
+        state.player.play();
+    };
+    const src = computed(() => {
+      var _a, _b, _c;
+      return (_c = (_b = (_a = props.options) == null ? void 0 : _a.sources) == null ? void 0 : _b[0]) == null ? void 0 : _c.src;
+    });
+    const autoplay = computed(() => {
+      var _a;
+      return (_a = props.options) == null ? void 0 : _a.autoplay;
+    });
+    onMounted(() => {
+      initVideo();
+    });
+    watch(() => src.value, (val) => {
+      if (!val)
+        return;
+      console.log(val, "---watch--src");
+    });
+    watch(() => autoplay.value, (val) => {
+      if (!val)
+        return;
+      state.player.play();
+    });
+    const renderVideoPlayer = () => {
+      return createVNode("div", {
+        "class": "video-container cp"
+      }, [createVNode("video", {
+        "onContextmenu": (e) => {
+          e.preventDefault();
+          e.stopPropagation();
+        },
+        "ref": videoDom,
+        "controls": true,
+        "class": "video-js vjs-default-skin vjs-big-play-centered",
+        "webkit-playsinline": "true",
+        "playsinline": true
+      }, null)]);
+    };
+    return () => {
+      return renderVideoPlayer();
+    };
+  }
+});
+
+export { playerVod as default };

package/es/src/components/player-vod/video-list.mjs

@@ -1,125 +1 @@
-import { defineComponent, reactive, computed, createVNode, resolveComponent } from 'vue';
-import vexutils from 'cnhis-design-vue/es/src/utils/vexutils';
-import videoModal from './video-modal.mjs';
-import { NIcon } from 'naive-ui';
-import { SyncOutline } from '@vicons/ionicons5';
-import default_cover from 'cnhis-design-vue/es/src/assets/img/video_default_cover.png';
-
-var videoList = defineComponent({
-  name: "video-list",
-  components: {
-    videoModal,
-    NIcon
-  },
-  props: {
-    propsList: {
-      type: [Array, String],
-      default: () => []
-    },
-    columnName: {
-      type: String,
-      default: ""
-    },
-    stlist: {
-      type: String,
-      default: ""
-    }
-  },
-  setup(props, context) {
-    const state = reactive({
-      videoVisible: false,
-      fileList: [],
-      palyerIndex: 0,
-      playerOptions: {}
-    });
-    const handleGetJsonStr = (str) => {
-      let resList = [];
-      if (vexutils.isJSON(str)) {
-        resList = JSON.parse(str);
-      } else {
-        resList = typeof str === "string" ? [] : str;
-      }
-      if (resList && resList.type === "jsonb") {
-        if (vexutils.isJSON(resList.value)) {
-          resList = JSON.parse(resList.value);
-          if (resList.type === "jsonb") {
-            resList = handleGetJsonStr(resList);
-          }
-        }
-      }
-      return resList;
-    };
-    const initFileList = (val) => {
-      let fileList = val;
-      let resList = [];
-      if (Array.isArray(fileList)) {
-        resList = JSON.parse(JSON.stringify(fileList));
-      }
-      if (typeof fileList === "string") {
-        resList = handleGetJsonStr(fileList);
-      }
-      resList.forEach((v) => {
-        v.vodCoverUrl = v.vodCoverUrl || void 0;
-        let vodUrl = v.url || v.videoUrl;
-        let strList = vodUrl.split(".");
-        let last = strList[strList.length - 1];
-        let type = `video/${last}`;
-        v.playerOptions = {
-          sources: [{
-            type,
-            src: vodUrl
-          }]
-        };
-      });
-      state.fileList = resList || [];
-      return resList;
-    };
-    const showFileList = computed(() => {
-      let val = props.stlist || props.propsList;
-      return initFileList(val) || [];
-    });
-    const palyerVod = (data, index) => {
-      state.palyerIndex = index;
-      let vodUrl = data.url || data.videoUrl;
-      let strList = vodUrl.split(".");
-      strList[strList.length - 1];
-      state.playerOptions = data.playerOptions;
-      state.videoVisible = true;
-    };
-    const getvideoCover = (item) => {
-      return item.vodCoverUrl || default_cover;
-    };
-    const renderVodList = () => {
-      return createVNode("div", {
-        "class": "c-playervod-wrap vod-list"
-      }, [createVNode("div", {
-        "class": "show-list"
-      }, [showFileList.value.map((v, i) => {
-        createVNode("div", {
-          "class": "vod-wrap"
-        }, [createVNode("div", {
-          "class": "vod-def-bg"
-        }, [createVNode("img", {
-          "src": getvideoCover(v),
-          "class": "vod-cover-img"
-        }, null)]), createVNode("div", {
-          "class": "icon-wrap"
-        }, [createVNode(resolveComponent("n-icon"), {
-          "component": SyncOutline,
-          "class": "icon-play",
-          "onClick": palyerVod(v, i)
-        }, null)])]);
-      })]), state.videoVisible && createVNode(resolveComponent("video-modal"), {
-        "visible:sync": state.videoVisible,
-        "fileList": state.fileList,
-        "palyerIndex": state.palyerIndex,
-        "playerOptions": state.playerOptions
-      }, null)]);
-    };
-    return () => {
-      return renderVodList();
-    };
-  }
-});
-
-export { videoList as default };
+export { default } from './video-list2.mjs';

package/es/src/components/player-vod/video-list2.mjs

@@ -0,0 +1,125 @@
+import { defineComponent, reactive, computed, createVNode, resolveComponent } from 'vue';
+import vexutils from 'cnhis-design-vue/es/src/utils/vexutils';
+import videoModal from './video-modal2.mjs';
+import { NIcon } from 'naive-ui';
+import { SyncOutline } from '@vicons/ionicons5';
+import default_cover from 'cnhis-design-vue/es/src/assets/img/video_default_cover.png';
+
+var videoList = defineComponent({
+  name: "video-list",
+  components: {
+    videoModal,
+    NIcon
+  },
+  props: {
+    propsList: {
+      type: [Array, String],
+      default: () => []
+    },
+    columnName: {
+      type: String,
+      default: ""
+    },
+    stlist: {
+      type: String,
+      default: ""
+    }
+  },
+  setup(props, context) {
+    const state = reactive({
+      videoVisible: false,
+      fileList: [],
+      palyerIndex: 0,
+      playerOptions: {}
+    });
+    const handleGetJsonStr = (str) => {
+      let resList = [];
+      if (vexutils.isJSON(str)) {
+        resList = JSON.parse(str);
+      } else {
+        resList = typeof str === "string" ? [] : str;
+      }
+      if (resList && resList.type === "jsonb") {
+        if (vexutils.isJSON(resList.value)) {
+          resList = JSON.parse(resList.value);
+          if (resList.type === "jsonb") {
+            resList = handleGetJsonStr(resList);
+          }
+        }
+      }
+      return resList;
+    };
+    const initFileList = (val) => {
+      let fileList = val;
+      let resList = [];
+      if (Array.isArray(fileList)) {
+        resList = JSON.parse(JSON.stringify(fileList));
+      }
+      if (typeof fileList === "string") {
+        resList = handleGetJsonStr(fileList);
+      }
+      resList.forEach((v) => {
+        v.vodCoverUrl = v.vodCoverUrl || void 0;
+        let vodUrl = v.url || v.videoUrl;
+        let strList = vodUrl.split(".");
+        let last = strList[strList.length - 1];
+        let type = `video/${last}`;
+        v.playerOptions = {
+          sources: [{
+            type,
+            src: vodUrl
+          }]
+        };
+      });
+      state.fileList = resList || [];
+      return resList;
+    };
+    const showFileList = computed(() => {
+      let val = props.stlist || props.propsList;
+      return initFileList(val) || [];
+    });
+    const palyerVod = (data, index) => {
+      state.palyerIndex = index;
+      let vodUrl = data.url || data.videoUrl;
+      let strList = vodUrl.split(".");
+      strList[strList.length - 1];
+      state.playerOptions = data.playerOptions;
+      state.videoVisible = true;
+    };
+    const getvideoCover = (item) => {
+      return item.vodCoverUrl || default_cover;
+    };
+    const renderVodList = () => {
+      return createVNode("div", {
+        "class": "c-playervod-wrap vod-list"
+      }, [createVNode("div", {
+        "class": "show-list"
+      }, [showFileList.value.map((v, i) => {
+        createVNode("div", {
+          "class": "vod-wrap"
+        }, [createVNode("div", {
+          "class": "vod-def-bg"
+        }, [createVNode("img", {
+          "src": getvideoCover(v),
+          "class": "vod-cover-img"
+        }, null)]), createVNode("div", {
+          "class": "icon-wrap"
+        }, [createVNode(resolveComponent("n-icon"), {
+          "component": SyncOutline,
+          "class": "icon-play",
+          "onClick": palyerVod(v, i)
+        }, null)])]);
+      })]), state.videoVisible && createVNode(resolveComponent("video-modal"), {
+        "visible:sync": state.videoVisible,
+        "fileList": state.fileList,
+        "palyerIndex": state.palyerIndex,
+        "playerOptions": state.playerOptions
+      }, null)]);
+    };
+    return () => {
+      return renderVodList();
+    };
+  }
+});
+
+export { videoList as default };

package/es/src/components/player-vod/video-modal.mjs

@@ -1,91 +1 @@
-import { defineComponent, reactive, createVNode, resolveComponent, withDirectives, isVNode, resolveDirective } from 'vue';
-import { NModal, NCarousel } from 'naive-ui';
-import playerVod from './player.mjs';
-
-function _isSlot(s) {
-  return typeof s === "function" || Object.prototype.toString.call(s) === "[object Object]" && !isVNode(s);
-}
-var videoModal = defineComponent({
-  name: "videoModal",
-  components: {
-    NModal,
-    NCarousel,
-    playerVod
-  },
-  props: {
-    visible: Boolean,
-    formData: {
-      type: Object,
-      default: () => ({})
-    },
-    playerOptions: {
-      type: Object,
-      default: () => ({
-        sources: [{
-          type: "video/mp4",
-          src: ""
-        }]
-      })
-    },
-    fileList: {
-      type: Array,
-      default: () => []
-    },
-    palyerIndex: {
-      type: Number,
-      default: 0
-    }
-  },
-  setup(props, context) {
-    const state = reactive({
-      previewVisible: false
-    });
-    state.previewVisible = props.visible;
-    console.log(state.previewVisible);
-    const isSingle = props.fileList && !props.fileList.length;
-    const handleCancel = () => {
-      context.emit("closeVideoModal", false);
-      state.previewVisible = false;
-    };
-    console.log("\u6E32\u67D3video-model---", props.formData.title);
-    const renderVideoModal = () => {
-      let _slot;
-      return createVNode(resolveComponent("n-modal"), {
-        "class": "c-player-video-modal",
-        "show": state.previewVisible,
-        "onUpdate:show": ($event) => state.previewVisible = $event,
-        "preset": "card",
-        "style": {
-          width: "60vw",
-          height: "auto"
-        },
-        "on-after-leave": handleCancel
-      }, {
-        default: () => [createVNode("div", {
-          "class": "preview-wrap"
-        }, [createVNode("div", {
-          "class": "preview"
-        }, [isSingle && createVNode(playerVod, {
-          "options": props.playerOptions
-        }, null), !isSingle && withDirectives(createVNode(resolveComponent("n-carousel"), {
-          "arrows": true,
-          "current-index": props.palyerIndex,
-          "dot-type": "line",
-          "show-arrow": true
-        }, _isSlot(_slot = props.fileList.map((v, i) => {
-          createVNode(playerVod, {
-            "playerOptions": v.playerOptions,
-            "key": i
-          }, null);
-        })) ? _slot : {
-          default: () => [_slot]
-        }), [[resolveDirective("else")]])])])]
-      });
-    };
-    return () => {
-      return renderVideoModal();
-    };
-  }
-});
-
-export { videoModal as default };
+export { default } from './video-modal2.mjs';

package/es/src/components/player-vod/video-modal2.mjs

@@ -0,0 +1,91 @@
+import { defineComponent, reactive, createVNode, resolveComponent, withDirectives, isVNode, resolveDirective } from 'vue';
+import { NModal, NCarousel } from 'naive-ui';
+import playerVod from './player2.mjs';
+
+function _isSlot(s) {
+  return typeof s === "function" || Object.prototype.toString.call(s) === "[object Object]" && !isVNode(s);
+}
+var videoModal = defineComponent({
+  name: "videoModal",
+  components: {
+    NModal,
+    NCarousel,
+    playerVod
+  },
+  props: {
+    visible: Boolean,
+    formData: {
+      type: Object,
+      default: () => ({})
+    },
+    playerOptions: {
+      type: Object,
+      default: () => ({
+        sources: [{
+          type: "video/mp4",
+          src: ""
+        }]
+      })
+    },
+    fileList: {
+      type: Array,
+      default: () => []
+    },
+    palyerIndex: {
+      type: Number,
+      default: 0
+    }
+  },
+  setup(props, context) {
+    const state = reactive({
+      previewVisible: false
+    });
+    state.previewVisible = props.visible;
+    console.log(state.previewVisible);
+    const isSingle = props.fileList && !props.fileList.length;
+    const handleCancel = () => {
+      context.emit("closeVideoModal", false);
+      state.previewVisible = false;
+    };
+    console.log("\u6E32\u67D3video-model---", props.formData.title);
+    const renderVideoModal = () => {
+      let _slot;
+      return createVNode(resolveComponent("n-modal"), {
+        "class": "c-player-video-modal",
+        "show": state.previewVisible,
+        "onUpdate:show": ($event) => state.previewVisible = $event,
+        "preset": "card",
+        "style": {
+          width: "60vw",
+          height: "auto"
+        },
+        "on-after-leave": handleCancel
+      }, {
+        default: () => [createVNode("div", {
+          "class": "preview-wrap"
+        }, [createVNode("div", {
+          "class": "preview"
+        }, [isSingle && createVNode(playerVod, {
+          "options": props.playerOptions
+        }, null), !isSingle && withDirectives(createVNode(resolveComponent("n-carousel"), {
+          "arrows": true,
+          "current-index": props.palyerIndex,
+          "dot-type": "line",
+          "show-arrow": true
+        }, _isSlot(_slot = props.fileList.map((v, i) => {
+          createVNode(playerVod, {
+            "playerOptions": v.playerOptions,
+            "key": i
+          }, null);
+        })) ? _slot : {
+          default: () => [_slot]
+        }), [[resolveDirective("else")]])])])]
+      });
+    };
+    return () => {
+      return renderVideoModal();
+    };
+  }
+});
+
+export { videoModal as default };

package/es/src/core/create.mjs

@@ -1,8 +1 @@
-import { COMPONENT_NAMESPACE } from '../global/variable.mjs';
-
-function create(vm) {
-  vm.name = COMPONENT_NAMESPACE + (vm.name || "");
-  return vm;
-}
-
-export { create as default };
+export { default } from './create2.mjs';

package/es/src/core/create2.mjs

@@ -0,0 +1,8 @@
+import { COMPONENT_NAMESPACE } from '../global/variable2.mjs';
+
+function create(vm) {
+  vm.name = COMPONENT_NAMESPACE + (vm.name || "");
+  return vm;
+}
+
+export { create as default };

package/es/src/global/variable.mjs

@@ -1,4 +1 @@
-const COMPONENT_NAMESPACE = "C";
-const GROUP_TITLE_KEY = "group-show-title";
-
-export { COMPONENT_NAMESPACE, GROUP_TITLE_KEY };
+export { COMPONENT_NAMESPACE, GROUP_TITLE_KEY } from './variable2.mjs';

package/es/src/global/variable2.mjs

@@ -0,0 +1,4 @@
+const COMPONENT_NAMESPACE = "C";
+const GROUP_TITLE_KEY = "group-show-title";
+
+export { COMPONENT_NAMESPACE, GROUP_TITLE_KEY };