bri-components 1.5.22 → 1.6.1

package/src/components/other/DshVideoPlayer.vue

@@ -0,0 +1,184 @@
+<template>
+    <div class="video-container">
+        <video
+            ref="videoPlayer"
+            id="videoPlayer"
+            class="video-js vjs-big-play-centered"
+            controls
+            preload="auto"
+            width="100%"
+            height="100%"
+        >
+            <!-- <source
+                :src="src"
+                type="application/x-mpegURL"
+            /> -->
+        </video>
+
+        <!-- <div v-else>
+            <video
+                id="video"
+                width="640"
+                height="360"
+                poster="/video/cover.png"
+                controls
+                autoplay
+                loop
+                preload="auto"
+                playsinline="true"
+                webkit-playsinline="true"
+                x5-video-player-type="h5"
+                x5-video-player-fullscreen="true"
+                x5-video-orientation="portraint"
+                οnclick="play()"
+            >
+                <source
+                    :src="attachmentLink"
+                    type="video/mp4"
+                >
+                <source
+                    src="/video/text.ogg"
+                    type="video/ogg; codecs=dirac, speex"
+                >
+
+                <div class="fallback">
+                    <p>You must have an HTML5 capable browser.</p>
+                </div>
+            </video>
+        </div> -->
+    </div>
+</template>
+
+<script>
+    import videojs from "video.js"; // 视频播放器插件
+    import "video.js/dist/video-js.css";
+    import "videojs-contrib-hls"; // 播放hls流插件
+
+    export default {
+        name: "DshVideoPlayer",
+        props: {
+            // 默认mp4
+            videoType: {
+                type: String
+            },
+            src: {
+                type: String,
+                required: true
+            },
+            options: {
+                type: Object,
+                default: () => ({})
+            }
+        },
+        data () {
+            return {
+                player: null
+                // attachmentLink: "https://e-sign.dms.t.cn-np.com/files/m3u8_file/c4b94118-3c8d-4410-9987-985c2b44c278/c4b94118-3c8d-4410-9987-985c2b44c278.m3u8"
+                // attachmentLink: "http://10.233.0.231:801/gs/66322263001320007102.m3u8" // 十二师治超站门口
+                // attachmentLink: "http://10.233.0.231:801/gs/66322263001320007101.m3u8" // 十二师治超站称重位
+                // attachmentLink: "http://10.233.0.231:801/gs/66322263001320007128.m3u8" // 石火山隧道
+                // attachmentLink: "http://staging.bridata.com:6203/api/ossfile/apaas-local/56a2725229d6e59440f77ce47dbd67ab.mp4"
+                // attachmentLink: "http://staging.bridata.com:6203/api/ossfile/apaas-local/6f9f0f4a42be671a47cc31343aef9a20.mp4"
+            };
+        },
+        computed: {
+            sourceType () {
+                return this.videoType === "m3u8"
+                    ? "application/x-mpegURL" // 告诉videojs,这是一个hls流
+                    : "video/mp4";
+            },
+            finalOptions () {
+                return {
+                    autoplay: false, // 设置自动播放
+                    // controls: true, // 显示播放的控件
+                    sources: [
+                        {
+                            // src: this.src || this.attachmentLink, // 地址
+                            src: this.src, // 地址
+                            type: this.sourceType
+                        }
+                    ],
+                    fluid: true,
+                    liveui: true,
+                    html5: {
+                        hls: {
+                            overrideNative: true,
+                            debug: true
+                        }
+                    },
+                    playbackRates: [0.7, 1.0, 1.5, 2.0], // 播放速度
+                    aspectRatio: "16:9",
+                    notSupportedMessage: "此视频暂无法播放，请稍后再试", // 允许覆盖Video.js无法播放媒体源时显示的默认信息。
+                    preload: "auto", // 预加载
+                    muted: true, // 是否静音，设置了它为true，才可实现自动播放,同时视频也被静音（Chrome66及以上版本，禁止音视频的自动播放）
+                    volume: 0.5, // 初始音量 (0-1)
+                    // audioOnlyMode: false, // 是否仅音频模式
+                    // audioPosterMode: false, // 音频海报模式
+                    // breakpoints: {
+                    //     audio: {
+                    //         width: 300 // 音频模式下的播放器宽度
+                    //     }
+                    // },
+
+                    ...this.options
+                };
+            }
+        },
+        watch: {
+            src (newSrc) {
+                if (this.player) {
+                    this.player.src({
+                        src: newSrc,
+                        type: this.sourceType
+                    });
+                }
+            }
+        },
+        mounted () {
+            this.initPlayer();
+            // // 使用 $nextTick 解决vedio报错  The element or ID supplied is not valid. (videojs)
+            // this.$nextTick(() => {
+            //     this.initPlayer();
+            // });
+        },
+        beforeDestroy () {
+            if (this.player) {
+                this.player.dispose();
+            }
+        },
+        methods: {
+            initPlayer () {
+                this.player = videojs(this.$refs.videoPlayer, this.finalOptions, this.onPlayerReady);
+                // this.player = videojs("videoPlayer", this.finalOptions, this.onPlayerReady);
+            },
+            onPlayerReady () {
+                // console.log("Player ready", this.finalOptions);
+            },
+
+            playVideo () {
+                let video = document.getElementById("video");
+                video.play();
+            }
+        }
+    };
+</script>
+
+<style lang="less" scoped>
+    .video-container {
+        width: 100%;
+        height: 100%;
+        background-color: #000;
+    }
+</style>
+<style lang="less">
+    .video-js {
+        width: 100%;
+        // height: 100%!important; // 放开也不管用
+    }
+    // 暂停播放按钮居中
+    ::v-deep .video-js .vjs-big-play-button {
+        top: 50%;
+        left: 50%;
+        transform: translate(-50%, -50%);
+    }
+</style>

package/src/components/small/BriButton.vue

@@ -1,71 +1,71 @@
-<template>
-    <Button
-        class="BriButton"
-        :class="selfPropsObj.class"
-        :type="selfPropsObj.btnType"
-        :shape="selfPropsObj.shape || shape"
-        :size="selfPropsObj.size || size"
-        :loading="selfPropsObj.loading"
-        :disabled="selfPropsObj.disabled"
-        :htmlType="selfPropsObj.htmlType"
-        :icon="(selfPropsObj.customIcon || customIcon) ? undefined : (selfPropsObj.icon || icon)"
-        :customIcon="selfPropsObj.customIcon || customIcon"
-        :long="selfPropsObj.long"
-        :ghost="selfPropsObj.ghost"
-        @click="dispatchEvent"
-    >
-        <slot></slot>
-    </Button>
-</template>
-
-<script>
-    export default {
-        name: "BriButton",
-        props: {
-            type: {
-                type: String,
-                default: "primary"
-            },
-            icon: String,
-            shape: String,
-            size: String,
-            customIcon: String,
-
-            propsObj: {
-                type: Object,
-                default () {
-                    return {};
-                }
-            }
-        },
-        data () {
-            return {};
-        },
-        computed: {
-            selfPropsObj () {
-                const originBtnType = this.propsObj.btnType || this.type;
-                let btnType = originBtnType;
-                if (["cancel"].includes(originBtnType)) {
-                    btnType = "primary";
-                } else if (["errorLine", "primaryLine"].includes(originBtnType)) {
-                    btnType = "default";
-                } else if (["linkText", "primaryText", "errorText", "successText"].includes(originBtnType)) {
-                    btnType = "text";
-                }
-
-                return {
-                    class: ["cancel", "errorLine", "primaryLine", "linkText", "primaryText", "errorText", "successText"].includes(originBtnType) ? `ivu-btn-${originBtnType}` : "",
-                    ...this.propsObj,
-                    btnType: btnType,
-                    customIcon: this.propsObj.customIcon ? `bico-font ${this.propsObj.customIcon}` : undefined
-                };
-            }
-        },
-        created () {},
-        methods: {
-            dispatchEvent () {
-                this.$emit("click", this.selfPropsObj);
-            }
-        }
-    };
-</script>
+<template>
+    <Button
+        class="BriButton"
+        :class="selfPropsObj.class"
+        :type="selfPropsObj.btnType"
+        :shape="selfPropsObj.shape || shape"
+        :size="selfPropsObj.size || size"
+        :loading="selfPropsObj.loading"
+        :disabled="selfPropsObj.disabled"
+        :htmlType="selfPropsObj.htmlType"
+        :icon="(selfPropsObj.customIcon || customIcon) ? undefined : (selfPropsObj.icon || icon)"
+        :customIcon="selfPropsObj.customIcon || customIcon"
+        :long="selfPropsObj.long"
+        :ghost="selfPropsObj.ghost"
+        @click="dispatchEvent"
+    >
+        <slot></slot>
+    </Button>
+</template>
+
+<script>
+    export default {
+        name: "BriButton",
+        props: {
+            type: {
+                type: String,
+                default: "primary"
+            },
+            icon: String,
+            shape: String,
+            size: String,
+            customIcon: String,
+
+            propsObj: {
+                type: Object,
+                default () {
+                    return {};
+                }
+            }
+        },
+        data () {
+            return {};
+        },
+        computed: {
+            selfPropsObj () {
+                const originBtnType = this.propsObj.btnType || this.type;
+                let btnType = originBtnType;
+                if (["cancel"].includes(originBtnType)) {
+                    btnType = "primary";
+                } else if (["errorLine", "primaryLine"].includes(originBtnType)) {
+                    btnType = "default";
+                } else if (["linkText", "primaryText", "errorText", "successText"].includes(originBtnType)) {
+                    btnType = "text";
+                }
+
+                return {
+                    class: ["cancel", "errorLine", "primaryLine", "linkText", "primaryText", "errorText", "successText"].includes(originBtnType) ? `ivu-btn-${originBtnType}` : "",
+                    ...this.propsObj,
+                    btnType: btnType,
+                    customIcon: this.propsObj.customIcon ? `bico-font ${this.propsObj.customIcon}` : undefined
+                };
+            }
+        },
+        created () {},
+        methods: {
+            dispatchEvent () {
+                this.$emit("click", this.selfPropsObj);
+            }
+        }
+    };
+</script>

package/src/components/small/BriDrawer.vue

@@ -1,169 +1,169 @@
-<template>
-    <Drawer
-        class="BriDrawer"
-        v-model="showModal"
-        :title="selfPropsObj.title"
-        :width="selfPropsObj.width"
-        :height="selfPropsObj.height"
-        :closable="selfPropsObj.closable"
-        :mask-closable="selfPropsObj.maskClosable"
-        :mask="selfPropsObj.mask"
-        :mask-style="selfPropsObj.maskStyle"
-        :styles="selfPropsObj.styles"
-        :scrollable="selfPropsObj.scrollable"
-        :placement="selfPropsObj.placement"
-        :transfer="selfPropsObj.transfer"
-        :class-name="selfPropsObj.className"
-        :inner="selfPropsObj.inner"
-        :draggable="selfPropsObj.draggable"
-        :before-close="selfPropsObj.beforeClose"
-        :lock-scroll="selfPropsObj.lockScroll"
-        @on-close="close"
-        @on-visible-change="visibleChange"
-        @on-resize-width="resizeChange"
-    >
-        <div
-            slot="header"
-            class="BriDrawer-header"
-        >
-            <slot name="header">
-                {{ selfPropsObj.title }}
-            </slot>
-        </div>
-
-        <!-- 删除按钮 -->
-        <Icon
-            v-if="selfPropsObj.closable"
-            slot="close"
-            class="BriDrawer-close"
-            type="md-close"
-            size="20"
-            @click.stop="clickClose"
-        />
-
-        <slot
-            slot="trigger"
-            name="trigger"
-        ></slot>
-
-        <div class="BriDrawer-main">
-            <div class="BriDrawer-body">
-                <slot></slot>
-            </div>
-
-            <div
-                v-if="selfPropsObj.footer"
-                class="BriDrawer-footer"
-            >
-                <slot name="footer">
-                    <dsh-buttons
-                        :list="list"
-                        @click="$dshEmit($event)"
-                    ></dsh-buttons>
-                </slot>
-            </div>
-        </div>
-    </Drawer>
-</template>
-
-<script>
-    export default {
-        name: "BriDrawer",
-        props: {
-            value: Boolean,
-            propsObj: {
-                type: Object,
-                default () {
-                    return {};
-                }
-            },
-            list: {
-                type: Array,
-                default () {
-                    return [];
-                }
-            }
-        },
-        data () {
-            return {};
-        },
-        computed: {
-            showModal: {
-                get () {
-                    return this.value;
-                },
-                set (bool) {
-                    this.$emit("input", bool);
-                }
-            },
-            selfPropsObj () {
-                return {
-                    width: 320,
-                    closable: true,
-                    transfer: true,
-                    footer: true,
-                    maskClosable: false,
-                    draggable: true,
-                    ...this.propsObj
-                };
-            }
-        },
-        created () {},
-        methods: {
-            clickClose () {
-                this.showModal = false;
-            },
-            close (...parmas) {
-                this.$emit("on-close", ...parmas);
-            },
-            resizeChange (...parmas) {
-                this.$emit("on-resize-change", ...parmas);
-            },
-            visibleChange (bool = false) {
-                this.$emit("on-visible-change", bool);
-            }
-        }
-    };
-</script>
-
-<style lang="less">
-    .BriDrawer {
-        &-header {
-            color: @textColor;
-            font-weight: 500;
-            font-size: @smallTitleSize;
-            line-height: @smallTitleHeight;
-        }
-
-        &-close {
-            color: @contentColor;
-        }
-
-        &-main {
-            height: 100%;
-            display: flex;
-            flex-direction: column;
-        }
-
-        &-body {
-            flex: 1;
-            overflow: auto;
-        }
-
-        &-footer {
-            border-top: 1px solid @borderColor;
-            padding: 11px 16px 12px;
-        }
-
-        .ivu-drawer-header {
-            padding: 16px 16px 15px;
-        }
-        .ivu-drawer-body {
-            padding: 0px;
-        }
-        .ivu-drawer-close {
-            top: 18px;
-            right: 18px
-        }
-    }
-</style>
+<template>
+    <Drawer
+        class="BriDrawer"
+        v-model="showModal"
+        :title="selfPropsObj.title"
+        :width="selfPropsObj.width"
+        :height="selfPropsObj.height"
+        :closable="selfPropsObj.closable"
+        :mask-closable="selfPropsObj.maskClosable"
+        :mask="selfPropsObj.mask"
+        :mask-style="selfPropsObj.maskStyle"
+        :styles="selfPropsObj.styles"
+        :scrollable="selfPropsObj.scrollable"
+        :placement="selfPropsObj.placement"
+        :transfer="selfPropsObj.transfer"
+        :class-name="selfPropsObj.className"
+        :inner="selfPropsObj.inner"
+        :draggable="selfPropsObj.draggable"
+        :before-close="selfPropsObj.beforeClose"
+        :lock-scroll="selfPropsObj.lockScroll"
+        @on-close="close"
+        @on-visible-change="visibleChange"
+        @on-resize-width="resizeChange"
+    >
+        <div
+            slot="header"
+            class="BriDrawer-header"
+        >
+            <slot name="header">
+                {{ selfPropsObj.title }}
+            </slot>
+        </div>
+
+        <!-- 删除按钮 -->
+        <Icon
+            v-if="selfPropsObj.closable"
+            slot="close"
+            class="BriDrawer-close"
+            type="md-close"
+            size="20"
+            @click.stop="clickClose"
+        />
+
+        <slot
+            slot="trigger"
+            name="trigger"
+        ></slot>
+
+        <div class="BriDrawer-main">
+            <div class="BriDrawer-body">
+                <slot></slot>
+            </div>
+
+            <div
+                v-if="selfPropsObj.footer"
+                class="BriDrawer-footer"
+            >
+                <slot name="footer">
+                    <dsh-buttons
+                        :list="list"
+                        @click="$dshEmit($event)"
+                    ></dsh-buttons>
+                </slot>
+            </div>
+        </div>
+    </Drawer>
+</template>
+
+<script>
+    export default {
+        name: "BriDrawer",
+        props: {
+            value: Boolean,
+            propsObj: {
+                type: Object,
+                default () {
+                    return {};
+                }
+            },
+            list: {
+                type: Array,
+                default () {
+                    return [];
+                }
+            }
+        },
+        data () {
+            return {};
+        },
+        computed: {
+            showModal: {
+                get () {
+                    return this.value;
+                },
+                set (bool) {
+                    this.$emit("input", bool);
+                }
+            },
+            selfPropsObj () {
+                return {
+                    width: 320,
+                    closable: true,
+                    transfer: true,
+                    footer: true,
+                    maskClosable: false,
+                    draggable: true,
+                    ...this.propsObj
+                };
+            }
+        },
+        created () {},
+        methods: {
+            clickClose () {
+                this.showModal = false;
+            },
+            close (...parmas) {
+                this.$emit("on-close", ...parmas);
+            },
+            resizeChange (...parmas) {
+                this.$emit("on-resize-change", ...parmas);
+            },
+            visibleChange (bool = false) {
+                this.$emit("on-visible-change", bool);
+            }
+        }
+    };
+</script>
+
+<style lang="less">
+    .BriDrawer {
+        &-header {
+            color: @textColor;
+            font-weight: 500;
+            font-size: @smallTitleSize;
+            line-height: @smallTitleHeight;
+        }
+
+        &-close {
+            color: @contentColor;
+        }
+
+        &-main {
+            height: 100%;
+            display: flex;
+            flex-direction: column;
+        }
+
+        &-body {
+            flex: 1;
+            overflow: auto;
+        }
+
+        &-footer {
+            border-top: 1px solid @borderColor;
+            padding: 11px 16px 12px;
+        }
+
+        .ivu-drawer-header {
+            padding: 16px 16px 15px;
+        }
+        .ivu-drawer-body {
+            padding: 0px;
+        }
+        .ivu-drawer-close {
+            top: 18px;
+            right: 18px
+        }
+    }
+</style>