unika-components 1.0.4 → 1.0.6

package/dist/src/components/UniMusic/UniMusic.vue.d.ts

@@ -0,0 +1,13 @@
+declare const _default: import("vue").DefineComponent<{
+    [x: string]: any;
+}, {
+    styleProps: import("vue").ComputedRef<Pick<any, string>>;
+    handleClick: () => void;
+    isPlaying: import("vue").Ref<boolean>;
+    togglePlay: () => void;
+}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
+    [x: string]: any;
+}>>, {
+    [x: string]: any;
+}, {}>;
+export default _default;

package/dist/src/components/UniMusic/index.d.ts

@@ -0,0 +1,2 @@
+import UniMusic from './UniMusic.vue';
+export default UniMusic;

package/dist/src/components/UniVideo/UniVideo.vue.d.ts

@@ -0,0 +1,14 @@
+declare const _default: import("vue").DefineComponent<{
+    [x: string]: any;
+}, {
+    styleProps: import("vue").ComputedRef<Pick<any, string>>;
+    isPlaying: import("vue").Ref<boolean>;
+    showButton: import("vue").Ref<boolean>;
+    handleClick: () => void;
+    playOrPauseVideo: () => void;
+}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
+    [x: string]: any;
+}>>, {
+    [x: string]: any;
+}, {}>;
+export default _default;

package/dist/src/components/UniVideo/index.d.ts

@@ -0,0 +1,2 @@
+import UniVideo from './UniVideo.vue';
+export default UniVideo;

package/dist/src/defaultProps.d.ts

@@ -167,6 +167,51 @@ export declare const backgroundDefaultProps: {
     left: string;
     top: string;
 };
+export declare const musicDefaultProps: {
+    actionType: string;
+    url: string;
+    height: string;
+    width: string;
+    paddingLeft: string;
+    paddingRight: string;
+    paddingTop: string;
+    paddingBottom: string;
+    borderStyle: string;
+    borderColor: string;
+    borderWidth: string;
+    borderRadius: string;
+    boxShadow: string;
+    opacity: number;
+    position: string;
+    left: string;
+    top: string;
+    right: string;
+    musicSrc: string;
+    name: string;
+    isPlaying: boolean;
+};
+export declare const videoDefaultProps: {
+    actionType: string;
+    url: string;
+    height: string;
+    width: string;
+    paddingLeft: string;
+    paddingRight: string;
+    paddingTop: string;
+    paddingBottom: string;
+    borderStyle: string;
+    borderColor: string;
+    borderWidth: string;
+    borderRadius: string;
+    boxShadow: string;
+    opacity: number;
+    position: string;
+    left: string;
+    top: string;
+    right: string;
+    videoSrc: string;
+    isPlaying: boolean;
+};
 export declare const componentsDefaultProps: {
     'uni-text': {
         props: {
@@ -259,6 +304,55 @@ export declare const componentsDefaultProps: {
             top: string;
         };
     };
+    'uni-music': {
+        props: {
+            actionType: string;
+            url: string;
+            height: string;
+            width: string;
+            paddingLeft: string;
+            paddingRight: string;
+            paddingTop: string;
+            paddingBottom: string;
+            borderStyle: string;
+            borderColor: string;
+            borderWidth: string;
+            borderRadius: string;
+            boxShadow: string;
+            opacity: number;
+            position: string;
+            left: string;
+            top: string;
+            right: string;
+            musicSrc: string;
+            name: string;
+            isPlaying: boolean;
+        };
+    };
+    'uni-video': {
+        props: {
+            actionType: string;
+            url: string;
+            height: string;
+            width: string;
+            paddingLeft: string;
+            paddingRight: string;
+            paddingTop: string;
+            paddingBottom: string;
+            borderStyle: string;
+            borderColor: string;
+            borderWidth: string;
+            borderRadius: string;
+            boxShadow: string;
+            opacity: number;
+            position: string;
+            left: string;
+            top: string;
+            right: string;
+            videoSrc: string;
+            isPlaying: boolean;
+        };
+    };
 };
 export declare const isEditingProp: {
     isEditing: {

package/dist/src/index.d.ts

@@ -5,8 +5,10 @@ import UniShape from './components/UniShape';
 import LongPage from './components/LongPage';
 import SwiperPage from './components/SwiperPage';
 import UniBackground from './components/UniBackground';
+import UniMusic from './components/UniMusic';
+import UniVideo from './components/UniVideo';
 declare const install: (app: App) => void;
-export { UniText, UniImage, UniShape, LongPage, SwiperPage, UniBackground, install };
+export { UniText, UniImage, UniShape, LongPage, SwiperPage, UniBackground, UniMusic, UniVideo, install };
 declare const _default: {
     install: (app: App<any>) => void;
 };

package/dist/unika-components.css

@@ -1,8 +1,4 @@
 
-.uni-image-component {
-  max-width: 100%;
-}
-
 h2.uni-text-component, p.uni-text-component {
   margin-bottom: 0;
 }
@@ -38,3 +34,123 @@ button.uni-text-component {
     position:absolute;
     z-index:99999999;
   }
+
+  .uni-video-component {
+    position: relative;
+    text-align: center;
+  }
+  .play-pause-button {
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -50%);
+    cursor: pointer;
+    font-size: 2rem;
+    color: #fff;
+    background: rgba(0, 0, 0, 0.6);
+    border-radius: 50%;
+    padding: 10px;
+    transition: background 0.3s;
+  }
+  .play-pause-button:hover {
+    background: rgba(0, 0, 0, 0.8);
+  }
+
+#audio {
+  position: absolute;
+  right: 10px;
+  top: 10px;
+  z-index: 103;
+  width: 30px;
+  height: 30px;
+  display: -webkit-box;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+}
+#audio .audio {
+  width: 100%;
+  height: 100%;
+  display: -webkit-box;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+  -webkit-box-pack: center;
+  -ms-flex-pack: center;
+  justify-content: center;
+  color: #fff;
+  background: #666;
+  border-radius: 50%;
+  overflow: hidden;
+  will-change: transform;
+}
+#audio .audio .music-icon {
+  display: block;
+  width: 100%;
+  height: 100%;
+}
+#audio .icon-cancel {
+  position: absolute;
+  width: 100%;
+  height: 100%;
+  border-radius: 50%;
+  overflow: hidden;
+  padding: 14px 0;
+}
+#audio .icon-cancel .icon-h {
+  -webkit-transform: rotate(45deg);
+  transform: rotate(45deg);
+  width: 100%;
+  height: 2px;
+  background: #fff;
+}
+#audio .mrotate {
+  -webkit-animation: mrotate 5s linear infinite;
+  animation: mrotate 5s linear infinite;
+}
+  .video-play-audio {
+    position: absolute;
+    left: -9999px;
+    top: -9999px;
+    width: 0;
+    height: 0;
+    z-index: -1;
+    opacity: 1;
+    overflow: hidden;
+  }
+
+  .music-img {
+    position: relative;
+    display: inline-block;
+    width: 100%;
+    height: 100%;
+  }
+
+  .uni-music-component {
+  }
+
+  /* 无限旋转 */
+  @keyframes mrotate {
+    from {
+      transform: rotate(0deg);
+    }
+    to {
+      transform: rotate(360deg);
+    }
+  }
+  @-webkit-keyframes mrotate {
+    from {
+      -webkit-transform: rotate(0deg);
+    }
+    to {
+      -webkit-transform: rotate(360deg);
+    }
+  }
+
+.uni-image-component {
+  max-width: 100%;
+}

package/dist/unika-components.esm.js

@@ -1,4 +1,4 @@
-import { computed, defineComponent, openBlock, createBlock, resolveDynamicComponent, withModifiers, normalizeStyle, withCtx, createTextVNode, toDisplayString, createElementBlock, Fragment, renderList, normalizeProps, guardReactiveProps, resolveComponent, createElementVNode, createVNode, createCommentVNode, pushScopeId, popScopeId } from 'vue';
+import { computed, defineComponent, openBlock, createBlock, resolveDynamicComponent, withModifiers, normalizeStyle, withCtx, createTextVNode, toDisplayString, createElementBlock, Fragment, renderList, normalizeProps, guardReactiveProps, resolveComponent, createElementVNode, createVNode, createCommentVNode, pushScopeId, popScopeId, ref, onMounted, normalizeClass } from 'vue';
 
 /** Detect free variable `global` from Node.js. */
 var freeGlobal = typeof global == 'object' && global && global.Object === Object && global;
@@ -3437,6 +3437,17 @@ const backgroundDefaultProps = {
     left: '0px',
     top: '0px'
 };
+const musicDefaultProps = {
+    musicSrc: '',
+    name: '',
+    isPlaying: false,
+    ...commonDefaultProps
+};
+const videoDefaultProps = {
+    videoSrc: '',
+    isPlaying: false,
+    ...commonDefaultProps
+};
 // this contains all default props for all the components
 // useful for inserting new component into the store
 const componentsDefaultProps = {
@@ -3451,6 +3462,12 @@ const componentsDefaultProps = {
     },
     'uni-background': {
         props: backgroundDefaultProps
+    },
+    'uni-music': {
+        props: musicDefaultProps
+    },
+    'uni-video': {
+        props: videoDefaultProps
     }
 };
 const isEditingProp = {
@@ -3498,12 +3515,12 @@ const extraProps = {
     },
     ...isEditingProp
 };
-const defaultProps$2 = transformToComponentProps(componentsDefaultProps['uni-text'].props, extraProps);
+const defaultProps$4 = transformToComponentProps(componentsDefaultProps['uni-text'].props, extraProps);
 // array that contains style props
-var script$5 = defineComponent({
+var script$7 = defineComponent({
     name: 'uni-text',
     props: {
-        ...defaultProps$2
+        ...defaultProps$4
     },
     setup(props) {
         const styleProps = useStylePick(props);
@@ -3515,7 +3532,7 @@ var script$5 = defineComponent({
     }
 });
 
-function render$5(_ctx, _cache, $props, $setup, $data, $options) {
+function render$7(_ctx, _cache, $props, $setup, $data, $options) {
   return (openBlock(), createBlock(resolveDynamicComponent(_ctx.tag), {
     onClick: withModifiers(_ctx.handleClick, ["prevent"]),
     style: normalizeStyle(_ctx.styleProps),
@@ -3528,16 +3545,16 @@ function render$5(_ctx, _cache, $props, $setup, $data, $options) {
   }, 8 /* PROPS */, ["onClick", "style"]))
 }
 
-script$5.render = render$5;
-script$5.__scopeId = "data-v-55ed80cb";
-script$5.__file = "src/components/UniText/UniText.vue";
+script$7.render = render$7;
+script$7.__scopeId = "data-v-55ed80cb";
+script$7.__file = "src/components/UniText/UniText.vue";
 
-script$5.install = (app) => {
-    app.component(script$5.name, script$5);
+script$7.install = (app) => {
+    app.component(script$7.name, script$7);
 };
 
 // array that contains style props
-var script$4 = defineComponent({
+var script$6 = defineComponent({
     name: 'uni-image',
     props: transformToComponentProps(componentsDefaultProps['uni-image'].props, isEditingProp),
     setup(props) {
@@ -3550,32 +3567,32 @@ var script$4 = defineComponent({
     }
 });
 
-const _hoisted_1$3 = ["src"];
+const _hoisted_1$5 = ["src"];
 
-function render$4(_ctx, _cache, $props, $setup, $data, $options) {
+function render$6(_ctx, _cache, $props, $setup, $data, $options) {
   return (openBlock(), createElementBlock("img", {
     src: _ctx.imageSrc,
     style: normalizeStyle(_ctx.styleProps),
     onClick: _cache[0] || (_cache[0] = withModifiers((...args) => (_ctx.handleClick && _ctx.handleClick(...args)), ["prevent"])),
     class: "uni-image-component",
     draggable: false
-  }, null, 12 /* STYLE, PROPS */, _hoisted_1$3))
+  }, null, 12 /* STYLE, PROPS */, _hoisted_1$5))
 }
 
-script$4.render = render$4;
-script$4.__scopeId = "data-v-03caca2f";
-script$4.__file = "src/components/UniImage/UniImage.vue";
+script$6.render = render$6;
+script$6.__scopeId = "data-v-03caca2f";
+script$6.__file = "src/components/UniImage/UniImage.vue";
 
-script$4.install = (app) => {
-    app.component(script$4.name, script$4);
+script$6.install = (app) => {
+    app.component(script$6.name, script$6);
 };
 
-const defaultProps$1 = transformToComponentProps(componentsDefaultProps['uni-shape'].props, isEditingProp);
+const defaultProps$3 = transformToComponentProps(componentsDefaultProps['uni-shape'].props, isEditingProp);
 // array that contains style props
-var script$3 = defineComponent({
+var script$5 = defineComponent({
     name: 'uni-shape',
     props: {
-        ...defaultProps$1
+        ...defaultProps$3
     },
     setup(props) {
         const styleProps = useStylePick(props);
@@ -3587,7 +3604,7 @@ var script$3 = defineComponent({
     }
 });
 
-function render$3(_ctx, _cache, $props, $setup, $data, $options) {
+function render$5(_ctx, _cache, $props, $setup, $data, $options) {
   return (openBlock(), createElementBlock("div", {
     onClick: _cache[0] || (_cache[0] = withModifiers((...args) => (_ctx.handleClick && _ctx.handleClick(...args)), ["prevent"])),
     style: normalizeStyle(_ctx.styleProps),
@@ -3596,14 +3613,14 @@ function render$3(_ctx, _cache, $props, $setup, $data, $options) {
   }, null, 4 /* STYLE */))
 }
 
-script$3.render = render$3;
-script$3.__file = "src/components/UniShape/UniShape.vue";
+script$5.render = render$5;
+script$5.__file = "src/components/UniShape/UniShape.vue";
 
-script$3.install = (app) => {
-    app.component(script$3.name, script$3);
+script$5.install = (app) => {
+    app.component(script$5.name, script$5);
 };
 
-var script$2 = defineComponent({
+var script$4 = defineComponent({
     name: 'long-page',
     props: {
         work: {
@@ -3616,9 +3633,9 @@ var script$2 = defineComponent({
     }
 });
 
-const _hoisted_1$2 = ["id"];
+const _hoisted_1$4 = ["id"];
 
-function render$2(_ctx, _cache, $props, $setup, $data, $options) {
+function render$4(_ctx, _cache, $props, $setup, $data, $options) {
   return (openBlock(), createElementBlock("div", {
     class: "final-page",
     style: normalizeStyle(_ctx.work && {width: _ctx.work.width, height: _ctx.work.height} )
@@ -3629,20 +3646,20 @@ function render$2(_ctx, _cache, $props, $setup, $data, $options) {
         id: `component-${item.id}`
       }, [
         (openBlock(), createBlock(resolveDynamicComponent(item.name), normalizeProps(guardReactiveProps(item.props)), null, 16 /* FULL_PROPS */))
-      ], 8 /* PROPS */, _hoisted_1$2))
+      ], 8 /* PROPS */, _hoisted_1$4))
     }), 128 /* KEYED_FRAGMENT */))
   ], 4 /* STYLE */))
 }
 
-script$2.render = render$2;
-script$2.__file = "src/components/LongPage/LongPage.vue";
+script$4.render = render$4;
+script$4.__file = "src/components/LongPage/LongPage.vue";
 
 // eslint-disable-next-line @typescript-eslint/no-explicit-any
-script$2.install = (app) => {
-    app.component(script$2.name, script$2);
+script$4.install = (app) => {
+    app.component(script$4.name, script$4);
 };
 
-var script$1 = defineComponent({
+var script$3 = defineComponent({
     name: 'swiper-page',
     props: {
         page: {
@@ -3655,16 +3672,16 @@ var script$1 = defineComponent({
     }
 });
 
-const _hoisted_1$1 = { class: "swiper-wrapper" };
+const _hoisted_1$3 = { class: "swiper-wrapper" };
 
-function render$1(_ctx, _cache, $props, $setup, $data, $options) {
+function render$3(_ctx, _cache, $props, $setup, $data, $options) {
   const _component_final_page = resolveComponent("final-page");
 
   return (openBlock(), createElementBlock("div", {
     style: normalizeStyle(_ctx.styleProps),
     class: "swiper-container"
   }, [
-    createElementVNode("div", _hoisted_1$1, [
+    createElementVNode("div", _hoisted_1$3, [
       (openBlock(true), createElementBlock(Fragment, null, renderList(_ctx.slides, (slide, index) => {
         return (openBlock(), createElementBlock("div", {
           class: "swiper-slide",
@@ -3679,24 +3696,24 @@ function render$1(_ctx, _cache, $props, $setup, $data, $options) {
   ], 4 /* STYLE */))
 }
 
-script$1.render = render$1;
-script$1.__file = "src/components/SwiperPage/SwiperPage.vue";
+script$3.render = render$3;
+script$3.__file = "src/components/SwiperPage/SwiperPage.vue";
 
 // eslint-disable-next-line @typescript-eslint/no-explicit-any
-script$1.install = (app) => {
-    app.component(script$1.name, script$1);
+script$3.install = (app) => {
+    app.component(script$3.name, script$3);
 };
 
-const defaultProps = transformToComponentProps(componentsDefaultProps['uni-background'].props, isEditingProp);
+const defaultProps$2 = transformToComponentProps(componentsDefaultProps['uni-background'].props, isEditingProp);
 // array that contains style props
-var script = defineComponent({
+var script$2 = defineComponent({
     name: 'uni-background',
     props: {
         watermark: {
             type: Boolean,
             default: false
         },
-        ...defaultProps
+        ...defaultProps$2
     },
     components: {},
     setup(props) {
@@ -3712,11 +3729,11 @@ var script = defineComponent({
     }
 });
 
-const _withScopeId = n => (pushScopeId("data-v-04e7238d"),n=n(),popScopeId(),n);
-const _hoisted_1 = /*#__PURE__*/ _withScopeId(() => /*#__PURE__*/createElementVNode("div", { style: {} }, null, -1 /* HOISTED */));
-const _hoisted_2 = ["src"];
+const _withScopeId$1 = n => (pushScopeId("data-v-04e7238d"),n=n(),popScopeId(),n);
+const _hoisted_1$2 = /*#__PURE__*/ _withScopeId$1(() => /*#__PURE__*/createElementVNode("div", { style: {} }, null, -1 /* HOISTED */));
+const _hoisted_2$2 = ["src"];
 
-function render(_ctx, _cache, $props, $setup, $data, $options) {
+function render$2(_ctx, _cache, $props, $setup, $data, $options) {
   const _component_a_watermark = resolveComponent("a-watermark");
 
   return (openBlock(), createElementBlock("div", {
@@ -3730,7 +3747,7 @@ function render(_ctx, _cache, $props, $setup, $data, $options) {
           class: "watermark"
         }, {
           default: withCtx(() => [
-            _hoisted_1
+            _hoisted_1$2
           ]),
           _: 1 /* STABLE */
         }))
@@ -3740,14 +3757,196 @@ function render(_ctx, _cache, $props, $setup, $data, $options) {
           key: 1,
           src: _ctx.backgroundImage,
           class: "bg-img"
-        }, null, 8 /* PROPS */, _hoisted_2))
+        }, null, 8 /* PROPS */, _hoisted_2$2))
       : createCommentVNode("v-if", true)
   ], 4 /* STYLE */))
 }
 
+script$2.render = render$2;
+script$2.__scopeId = "data-v-04e7238d";
+script$2.__file = "src/components/UniBackground/UniBackground.vue";
+
+script$2.install = (app) => {
+    app.component(script$2.name, script$2);
+};
+
+const defaultProps$1 = transformToComponentProps(componentsDefaultProps['uni-music'].props, isEditingProp);
+// array that contains style props
+var script$1 = defineComponent({
+    name: 'uni-music',
+    props: {
+        ...defaultProps$1
+    },
+    setup(props) {
+        // 重用并且简化
+        // 抽离并且获得 styleProps
+        const styleProps = useStylePick(props);
+        const handleClick = useComponentClick(props);
+        const isPlaying = ref(false);
+        const audioPlayer = ref(null);
+        const togglePlay = () => {
+            if (!audioPlayer.value)
+                return;
+            isPlaying.value = !isPlaying.value;
+            if (isPlaying.value) {
+                audioPlayer.value && audioPlayer.value.play();
+            }
+            else {
+                audioPlayer.value && audioPlayer.value.pause();
+            }
+        };
+        onMounted(() => {
+            audioPlayer.value = document.querySelector('audio');
+            if (audioPlayer.value && props.isPlaying) {
+                audioPlayer.value.load();
+                audioPlayer.value.play().catch(() => {
+                    const playError = ref(true);
+                    const event = ['click']; // "touchstart"
+                    const pageClick = () => {
+                        if (audioPlayer.value && playError.value) {
+                            playError.value = false;
+                            audioPlayer.value.load();
+                            audioPlayer.value.play().catch(() => {
+                                playError.value = true;
+                            });
+                            event.forEach((item) => {
+                                document.removeEventListener(item, pageClick);
+                            });
+                        }
+                    };
+                    event.forEach((item) => {
+                        document.addEventListener(item, pageClick);
+                    });
+                });
+            }
+        });
+        return {
+            styleProps,
+            handleClick,
+            isPlaying,
+            togglePlay
+        };
+    }
+});
+
+const _withScopeId = n => (pushScopeId("data-v-99922522"),n=n(),popScopeId(),n);
+const _hoisted_1$1 = {
+  id: "audio",
+  class: "uni-music-component"
+};
+const _hoisted_2$1 = /*#__PURE__*/ _withScopeId(() => /*#__PURE__*/createElementVNode("img", {
+  src: "https://unika-static-dev.oss-ap-southeast-7.aliyuncs.com/components/music2.png",
+  class: "music-icon"
+}, null, -1 /* HOISTED */));
+const _hoisted_3 = { class: "icon-cancel" };
+const _hoisted_4 = {
+  key: 0,
+  class: "icon-h"
+};
+const _hoisted_5 = ["src"];
+
+function render$1(_ctx, _cache, $props, $setup, $data, $options) {
+  return (openBlock(), createElementBlock("div", {
+    style: normalizeStyle(_ctx.styleProps)
+  }, [
+    createElementVNode("div", _hoisted_1$1, [
+      createElementVNode("div", {
+        class: normalizeClass({ mrotate: _ctx.isPlaying, audio: true }),
+        onClick: _cache[0] || (_cache[0] = (...args) => (_ctx.togglePlay && _ctx.togglePlay(...args)))
+      }, [
+        _hoisted_2$1,
+        createElementVNode("div", _hoisted_3, [
+          (!_ctx.isPlaying)
+            ? (openBlock(), createElementBlock("div", _hoisted_4))
+            : createCommentVNode("v-if", true)
+        ])
+      ], 2 /* CLASS */),
+      createElementVNode("audio", {
+        style: {"display":"none"},
+        ref: "audioPlayer",
+        src: _ctx.musicSrc,
+        autoplay: "",
+        controls: "",
+        loop: "",
+        preload: "auto"
+      }, null, 8 /* PROPS */, _hoisted_5)
+    ])
+  ], 4 /* STYLE */))
+}
+
+script$1.render = render$1;
+script$1.__scopeId = "data-v-99922522";
+script$1.__file = "src/components/UniMusic/UniMusic.vue";
+
+script$1.install = (app) => {
+    app.component(script$1.name, script$1);
+};
+
+const defaultProps = transformToComponentProps(componentsDefaultProps['uni-video'].props, isEditingProp);
+// array that contains style props
+var script = defineComponent({
+    name: 'uni-video',
+    props: {
+        ...defaultProps
+    },
+    components: {
+    // FontAwesomeIcon
+    },
+    setup(props) {
+        // 重用并且简化
+        // 抽离并且获得 styleProps
+        const styleProps = useStylePick(props);
+        const handleClick = useComponentClick(props);
+        const showButton = ref(true);
+        const isPlaying = ref(false);
+        const videoPlayer = ref(null);
+        const playOrPauseVideo = () => {
+            if (isPlaying.value) {
+                videoPlayer.value && videoPlayer.value.pause();
+                showButton.value = true;
+            }
+            else {
+                videoPlayer.value && videoPlayer.value.play();
+                setTimeout(() => {
+                    showButton.value = false; // 几秒后隐藏按钮
+                }, 2000);
+            }
+            isPlaying.value = !isPlaying.value;
+        };
+        return {
+            styleProps,
+            isPlaying,
+            showButton,
+            handleClick,
+            playOrPauseVideo
+        };
+    }
+});
+
+const _hoisted_1 = {
+  ref: "videoPlayer",
+  controls: "",
+  style: {"width":"100%","height":"100%"}
+};
+const _hoisted_2 = ["src"];
+
+function render(_ctx, _cache, $props, $setup, $data, $options) {
+  return (openBlock(), createElementBlock("div", {
+    style: normalizeStyle(_ctx.styleProps),
+    class: "uni-video-component"
+  }, [
+    createElementVNode("video", _hoisted_1, [
+      createElementVNode("source", {
+        src: _ctx.videoSrc,
+        type: "video/mp4"
+      }, null, 8 /* PROPS */, _hoisted_2)
+    ], 512 /* NEED_PATCH */)
+  ], 4 /* STYLE */))
+}
+
 script.render = render;
-script.__scopeId = "data-v-04e7238d";
-script.__file = "src/components/UniBackground/UniBackground.vue";
+script.__scopeId = "data-v-03ff4e2f";
+script.__file = "src/components/UniVideo/UniVideo.vue";
 
 script.install = (app) => {
     app.component(script.name, script);
@@ -3755,12 +3954,14 @@ script.install = (app) => {
 
 // export { textDefaultProps , textStylePropNames, TextComponentProps,
 const components = [
+    script$7,
+    script$6,
     script$5,
     script$4,
     script$3,
     script$2,
     script$1,
-    script
+    script,
 ];
 // eslint-disable-next-line @typescript-eslint/explicit-module-boundary-types
 const install = (app) => {
@@ -3772,4 +3973,4 @@ var index = {
     install
 };
 
-export { script$2 as LongPage, script$1 as SwiperPage, script as UniBackground, script$4 as UniImage, script$3 as UniShape, script$5 as UniText, index as default, install };
+export { script$4 as LongPage, script$3 as SwiperPage, script$2 as UniBackground, script$6 as UniImage, script$1 as UniMusic, script$5 as UniShape, script$7 as UniText, script as UniVideo, index as default, install };

package/dist/unika-components.umd.js

@@ -3441,6 +3441,17 @@
       left: '0px',
       top: '0px'
   };
+  const musicDefaultProps = {
+      musicSrc: '',
+      name: '',
+      isPlaying: false,
+      ...commonDefaultProps
+  };
+  const videoDefaultProps = {
+      videoSrc: '',
+      isPlaying: false,
+      ...commonDefaultProps
+  };
   // this contains all default props for all the components
   // useful for inserting new component into the store
   const componentsDefaultProps = {
@@ -3455,6 +3466,12 @@
       },
       'uni-background': {
           props: backgroundDefaultProps
+      },
+      'uni-music': {
+          props: musicDefaultProps
+      },
+      'uni-video': {
+          props: videoDefaultProps
       }
   };
   const isEditingProp = {
@@ -3502,12 +3519,12 @@
       },
       ...isEditingProp
   };
-  const defaultProps$2 = transformToComponentProps(componentsDefaultProps['uni-text'].props, extraProps);
+  const defaultProps$4 = transformToComponentProps(componentsDefaultProps['uni-text'].props, extraProps);
   // array that contains style props
-  var script$5 = vue.defineComponent({
+  var script$7 = vue.defineComponent({
       name: 'uni-text',
       props: {
-          ...defaultProps$2
+          ...defaultProps$4
       },
       setup(props) {
           const styleProps = useStylePick(props);
@@ -3519,7 +3536,7 @@
       }
   });
 
-  function render$5(_ctx, _cache, $props, $setup, $data, $options) {
+  function render$7(_ctx, _cache, $props, $setup, $data, $options) {
     return (vue.openBlock(), vue.createBlock(vue.resolveDynamicComponent(_ctx.tag), {
       onClick: vue.withModifiers(_ctx.handleClick, ["prevent"]),
       style: vue.normalizeStyle(_ctx.styleProps),
@@ -3532,16 +3549,16 @@
     }, 8 /* PROPS */, ["onClick", "style"]))
   }
 
-  script$5.render = render$5;
-  script$5.__scopeId = "data-v-55ed80cb";
-  script$5.__file = "src/components/UniText/UniText.vue";
+  script$7.render = render$7;
+  script$7.__scopeId = "data-v-55ed80cb";
+  script$7.__file = "src/components/UniText/UniText.vue";
 
-  script$5.install = (app) => {
-      app.component(script$5.name, script$5);
+  script$7.install = (app) => {
+      app.component(script$7.name, script$7);
   };
 
   // array that contains style props
-  var script$4 = vue.defineComponent({
+  var script$6 = vue.defineComponent({
       name: 'uni-image',
       props: transformToComponentProps(componentsDefaultProps['uni-image'].props, isEditingProp),
       setup(props) {
@@ -3554,32 +3571,32 @@
       }
   });
 
-  const _hoisted_1$3 = ["src"];
+  const _hoisted_1$5 = ["src"];
 
-  function render$4(_ctx, _cache, $props, $setup, $data, $options) {
+  function render$6(_ctx, _cache, $props, $setup, $data, $options) {
     return (vue.openBlock(), vue.createElementBlock("img", {
       src: _ctx.imageSrc,
       style: vue.normalizeStyle(_ctx.styleProps),
       onClick: _cache[0] || (_cache[0] = vue.withModifiers((...args) => (_ctx.handleClick && _ctx.handleClick(...args)), ["prevent"])),
       class: "uni-image-component",
       draggable: false
-    }, null, 12 /* STYLE, PROPS */, _hoisted_1$3))
+    }, null, 12 /* STYLE, PROPS */, _hoisted_1$5))
   }
 
-  script$4.render = render$4;
-  script$4.__scopeId = "data-v-03caca2f";
-  script$4.__file = "src/components/UniImage/UniImage.vue";
+  script$6.render = render$6;
+  script$6.__scopeId = "data-v-03caca2f";
+  script$6.__file = "src/components/UniImage/UniImage.vue";
 
-  script$4.install = (app) => {
-      app.component(script$4.name, script$4);
+  script$6.install = (app) => {
+      app.component(script$6.name, script$6);
   };
 
-  const defaultProps$1 = transformToComponentProps(componentsDefaultProps['uni-shape'].props, isEditingProp);
+  const defaultProps$3 = transformToComponentProps(componentsDefaultProps['uni-shape'].props, isEditingProp);
   // array that contains style props
-  var script$3 = vue.defineComponent({
+  var script$5 = vue.defineComponent({
       name: 'uni-shape',
       props: {
-          ...defaultProps$1
+          ...defaultProps$3
       },
       setup(props) {
           const styleProps = useStylePick(props);
@@ -3591,7 +3608,7 @@
       }
   });
 
-  function render$3(_ctx, _cache, $props, $setup, $data, $options) {
+  function render$5(_ctx, _cache, $props, $setup, $data, $options) {
     return (vue.openBlock(), vue.createElementBlock("div", {
       onClick: _cache[0] || (_cache[0] = vue.withModifiers((...args) => (_ctx.handleClick && _ctx.handleClick(...args)), ["prevent"])),
       style: vue.normalizeStyle(_ctx.styleProps),
@@ -3600,14 +3617,14 @@
     }, null, 4 /* STYLE */))
   }
 
-  script$3.render = render$3;
-  script$3.__file = "src/components/UniShape/UniShape.vue";
+  script$5.render = render$5;
+  script$5.__file = "src/components/UniShape/UniShape.vue";
 
-  script$3.install = (app) => {
-      app.component(script$3.name, script$3);
+  script$5.install = (app) => {
+      app.component(script$5.name, script$5);
   };
 
-  var script$2 = vue.defineComponent({
+  var script$4 = vue.defineComponent({
       name: 'long-page',
       props: {
           work: {
@@ -3620,9 +3637,9 @@
       }
   });
 
-  const _hoisted_1$2 = ["id"];
+  const _hoisted_1$4 = ["id"];
 
-  function render$2(_ctx, _cache, $props, $setup, $data, $options) {
+  function render$4(_ctx, _cache, $props, $setup, $data, $options) {
     return (vue.openBlock(), vue.createElementBlock("div", {
       class: "final-page",
       style: vue.normalizeStyle(_ctx.work && {width: _ctx.work.width, height: _ctx.work.height} )
@@ -3633,20 +3650,20 @@
           id: `component-${item.id}`
         }, [
           (vue.openBlock(), vue.createBlock(vue.resolveDynamicComponent(item.name), vue.normalizeProps(vue.guardReactiveProps(item.props)), null, 16 /* FULL_PROPS */))
-        ], 8 /* PROPS */, _hoisted_1$2))
+        ], 8 /* PROPS */, _hoisted_1$4))
       }), 128 /* KEYED_FRAGMENT */))
     ], 4 /* STYLE */))
   }
 
-  script$2.render = render$2;
-  script$2.__file = "src/components/LongPage/LongPage.vue";
+  script$4.render = render$4;
+  script$4.__file = "src/components/LongPage/LongPage.vue";
 
   // eslint-disable-next-line @typescript-eslint/no-explicit-any
-  script$2.install = (app) => {
-      app.component(script$2.name, script$2);
+  script$4.install = (app) => {
+      app.component(script$4.name, script$4);
   };
 
-  var script$1 = vue.defineComponent({
+  var script$3 = vue.defineComponent({
       name: 'swiper-page',
       props: {
           page: {
@@ -3659,16 +3676,16 @@
       }
   });
 
-  const _hoisted_1$1 = { class: "swiper-wrapper" };
+  const _hoisted_1$3 = { class: "swiper-wrapper" };
 
-  function render$1(_ctx, _cache, $props, $setup, $data, $options) {
+  function render$3(_ctx, _cache, $props, $setup, $data, $options) {
     const _component_final_page = vue.resolveComponent("final-page");
 
     return (vue.openBlock(), vue.createElementBlock("div", {
       style: vue.normalizeStyle(_ctx.styleProps),
       class: "swiper-container"
     }, [
-      vue.createElementVNode("div", _hoisted_1$1, [
+      vue.createElementVNode("div", _hoisted_1$3, [
         (vue.openBlock(true), vue.createElementBlock(vue.Fragment, null, vue.renderList(_ctx.slides, (slide, index) => {
           return (vue.openBlock(), vue.createElementBlock("div", {
             class: "swiper-slide",
@@ -3683,24 +3700,24 @@
     ], 4 /* STYLE */))
   }
 
-  script$1.render = render$1;
-  script$1.__file = "src/components/SwiperPage/SwiperPage.vue";
+  script$3.render = render$3;
+  script$3.__file = "src/components/SwiperPage/SwiperPage.vue";
 
   // eslint-disable-next-line @typescript-eslint/no-explicit-any
-  script$1.install = (app) => {
-      app.component(script$1.name, script$1);
+  script$3.install = (app) => {
+      app.component(script$3.name, script$3);
   };
 
-  const defaultProps = transformToComponentProps(componentsDefaultProps['uni-background'].props, isEditingProp);
+  const defaultProps$2 = transformToComponentProps(componentsDefaultProps['uni-background'].props, isEditingProp);
   // array that contains style props
-  var script = vue.defineComponent({
+  var script$2 = vue.defineComponent({
       name: 'uni-background',
       props: {
           watermark: {
               type: Boolean,
               default: false
           },
-          ...defaultProps
+          ...defaultProps$2
       },
       components: {},
       setup(props) {
@@ -3716,11 +3733,11 @@
       }
   });
 
-  const _withScopeId = n => (vue.pushScopeId("data-v-04e7238d"),n=n(),vue.popScopeId(),n);
-  const _hoisted_1 = /*#__PURE__*/ _withScopeId(() => /*#__PURE__*/vue.createElementVNode("div", { style: {} }, null, -1 /* HOISTED */));
-  const _hoisted_2 = ["src"];
+  const _withScopeId$1 = n => (vue.pushScopeId("data-v-04e7238d"),n=n(),vue.popScopeId(),n);
+  const _hoisted_1$2 = /*#__PURE__*/ _withScopeId$1(() => /*#__PURE__*/vue.createElementVNode("div", { style: {} }, null, -1 /* HOISTED */));
+  const _hoisted_2$2 = ["src"];
 
-  function render(_ctx, _cache, $props, $setup, $data, $options) {
+  function render$2(_ctx, _cache, $props, $setup, $data, $options) {
     const _component_a_watermark = vue.resolveComponent("a-watermark");
 
     return (vue.openBlock(), vue.createElementBlock("div", {
@@ -3734,7 +3751,7 @@
             class: "watermark"
           }, {
             default: vue.withCtx(() => [
-              _hoisted_1
+              _hoisted_1$2
             ]),
             _: 1 /* STABLE */
           }))
@@ -3744,14 +3761,196 @@
             key: 1,
             src: _ctx.backgroundImage,
             class: "bg-img"
-          }, null, 8 /* PROPS */, _hoisted_2))
+          }, null, 8 /* PROPS */, _hoisted_2$2))
         : vue.createCommentVNode("v-if", true)
     ], 4 /* STYLE */))
   }
 
+  script$2.render = render$2;
+  script$2.__scopeId = "data-v-04e7238d";
+  script$2.__file = "src/components/UniBackground/UniBackground.vue";
+
+  script$2.install = (app) => {
+      app.component(script$2.name, script$2);
+  };
+
+  const defaultProps$1 = transformToComponentProps(componentsDefaultProps['uni-music'].props, isEditingProp);
+  // array that contains style props
+  var script$1 = vue.defineComponent({
+      name: 'uni-music',
+      props: {
+          ...defaultProps$1
+      },
+      setup(props) {
+          // 重用并且简化
+          // 抽离并且获得 styleProps
+          const styleProps = useStylePick(props);
+          const handleClick = useComponentClick(props);
+          const isPlaying = vue.ref(false);
+          const audioPlayer = vue.ref(null);
+          const togglePlay = () => {
+              if (!audioPlayer.value)
+                  return;
+              isPlaying.value = !isPlaying.value;
+              if (isPlaying.value) {
+                  audioPlayer.value && audioPlayer.value.play();
+              }
+              else {
+                  audioPlayer.value && audioPlayer.value.pause();
+              }
+          };
+          vue.onMounted(() => {
+              audioPlayer.value = document.querySelector('audio');
+              if (audioPlayer.value && props.isPlaying) {
+                  audioPlayer.value.load();
+                  audioPlayer.value.play().catch(() => {
+                      const playError = vue.ref(true);
+                      const event = ['click']; // "touchstart"
+                      const pageClick = () => {
+                          if (audioPlayer.value && playError.value) {
+                              playError.value = false;
+                              audioPlayer.value.load();
+                              audioPlayer.value.play().catch(() => {
+                                  playError.value = true;
+                              });
+                              event.forEach((item) => {
+                                  document.removeEventListener(item, pageClick);
+                              });
+                          }
+                      };
+                      event.forEach((item) => {
+                          document.addEventListener(item, pageClick);
+                      });
+                  });
+              }
+          });
+          return {
+              styleProps,
+              handleClick,
+              isPlaying,
+              togglePlay
+          };
+      }
+  });
+
+  const _withScopeId = n => (vue.pushScopeId("data-v-99922522"),n=n(),vue.popScopeId(),n);
+  const _hoisted_1$1 = {
+    id: "audio",
+    class: "uni-music-component"
+  };
+  const _hoisted_2$1 = /*#__PURE__*/ _withScopeId(() => /*#__PURE__*/vue.createElementVNode("img", {
+    src: "https://unika-static-dev.oss-ap-southeast-7.aliyuncs.com/components/music2.png",
+    class: "music-icon"
+  }, null, -1 /* HOISTED */));
+  const _hoisted_3 = { class: "icon-cancel" };
+  const _hoisted_4 = {
+    key: 0,
+    class: "icon-h"
+  };
+  const _hoisted_5 = ["src"];
+
+  function render$1(_ctx, _cache, $props, $setup, $data, $options) {
+    return (vue.openBlock(), vue.createElementBlock("div", {
+      style: vue.normalizeStyle(_ctx.styleProps)
+    }, [
+      vue.createElementVNode("div", _hoisted_1$1, [
+        vue.createElementVNode("div", {
+          class: vue.normalizeClass({ mrotate: _ctx.isPlaying, audio: true }),
+          onClick: _cache[0] || (_cache[0] = (...args) => (_ctx.togglePlay && _ctx.togglePlay(...args)))
+        }, [
+          _hoisted_2$1,
+          vue.createElementVNode("div", _hoisted_3, [
+            (!_ctx.isPlaying)
+              ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_4))
+              : vue.createCommentVNode("v-if", true)
+          ])
+        ], 2 /* CLASS */),
+        vue.createElementVNode("audio", {
+          style: {"display":"none"},
+          ref: "audioPlayer",
+          src: _ctx.musicSrc,
+          autoplay: "",
+          controls: "",
+          loop: "",
+          preload: "auto"
+        }, null, 8 /* PROPS */, _hoisted_5)
+      ])
+    ], 4 /* STYLE */))
+  }
+
+  script$1.render = render$1;
+  script$1.__scopeId = "data-v-99922522";
+  script$1.__file = "src/components/UniMusic/UniMusic.vue";
+
+  script$1.install = (app) => {
+      app.component(script$1.name, script$1);
+  };
+
+  const defaultProps = transformToComponentProps(componentsDefaultProps['uni-video'].props, isEditingProp);
+  // array that contains style props
+  var script = vue.defineComponent({
+      name: 'uni-video',
+      props: {
+          ...defaultProps
+      },
+      components: {
+      // FontAwesomeIcon
+      },
+      setup(props) {
+          // 重用并且简化
+          // 抽离并且获得 styleProps
+          const styleProps = useStylePick(props);
+          const handleClick = useComponentClick(props);
+          const showButton = vue.ref(true);
+          const isPlaying = vue.ref(false);
+          const videoPlayer = vue.ref(null);
+          const playOrPauseVideo = () => {
+              if (isPlaying.value) {
+                  videoPlayer.value && videoPlayer.value.pause();
+                  showButton.value = true;
+              }
+              else {
+                  videoPlayer.value && videoPlayer.value.play();
+                  setTimeout(() => {
+                      showButton.value = false; // 几秒后隐藏按钮
+                  }, 2000);
+              }
+              isPlaying.value = !isPlaying.value;
+          };
+          return {
+              styleProps,
+              isPlaying,
+              showButton,
+              handleClick,
+              playOrPauseVideo
+          };
+      }
+  });
+
+  const _hoisted_1 = {
+    ref: "videoPlayer",
+    controls: "",
+    style: {"width":"100%","height":"100%"}
+  };
+  const _hoisted_2 = ["src"];
+
+  function render(_ctx, _cache, $props, $setup, $data, $options) {
+    return (vue.openBlock(), vue.createElementBlock("div", {
+      style: vue.normalizeStyle(_ctx.styleProps),
+      class: "uni-video-component"
+    }, [
+      vue.createElementVNode("video", _hoisted_1, [
+        vue.createElementVNode("source", {
+          src: _ctx.videoSrc,
+          type: "video/mp4"
+        }, null, 8 /* PROPS */, _hoisted_2)
+      ], 512 /* NEED_PATCH */)
+    ], 4 /* STYLE */))
+  }
+
   script.render = render;
-  script.__scopeId = "data-v-04e7238d";
-  script.__file = "src/components/UniBackground/UniBackground.vue";
+  script.__scopeId = "data-v-03ff4e2f";
+  script.__file = "src/components/UniVideo/UniVideo.vue";
 
   script.install = (app) => {
       app.component(script.name, script);
@@ -3759,12 +3958,14 @@
 
   // export { textDefaultProps , textStylePropNames, TextComponentProps,
   const components = [
+      script$7,
+      script$6,
       script$5,
       script$4,
       script$3,
       script$2,
       script$1,
-      script
+      script,
   ];
   // eslint-disable-next-line @typescript-eslint/explicit-module-boundary-types
   const install = (app) => {
@@ -3776,12 +3977,14 @@
       install
   };
 
-  exports.LongPage = script$2;
-  exports.SwiperPage = script$1;
-  exports.UniBackground = script;
-  exports.UniImage = script$4;
-  exports.UniShape = script$3;
-  exports.UniText = script$5;
+  exports.LongPage = script$4;
+  exports.SwiperPage = script$3;
+  exports.UniBackground = script$2;
+  exports.UniImage = script$6;
+  exports.UniMusic = script$1;
+  exports.UniShape = script$5;
+  exports.UniText = script$7;
+  exports.UniVideo = script;
   exports["default"] = index;
   exports.install = install;
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "unika-components",
-  "version": "1.0.4",
+  "version": "1.0.6",
   "private": false,
   "main": "dist/unika-components.umd.js",
   "module": "dist/unika-components.esm.js",
@@ -41,6 +41,10 @@
     "@rollup/plugin-commonjs": "^15.1.0",
     "@rollup/plugin-node-resolve": "^9.0.0",
     "@rollup/plugin-typescript": "^6.1.0",
+    "@fortawesome/fontawesome-svg-core": "^6.4.2",
+    "@fortawesome/free-regular-svg-icons": "^6.4.2",
+    "@fortawesome/free-solid-svg-icons": "^6.4.2",
+    "@fortawesome/vue-fontawesome": "^3.0.0-5",
     "@types/jest": "^26.0.15",
     "@types/lodash-es": "^4.17.3",
     "@typescript-eslint/eslint-plugin": "^4.22.0",
@@ -67,4 +71,4 @@
     "vue": "^3.0.0-0",
     "vue-jest": "^5.0.0-alpha.5"
   }
-}
+}