uview-plus 3.8.127 → 3.8.129

package/components/u-video/video-danmaku.vue

@@ -0,0 +1,273 @@
+<template>
+    <view class="up-video-danmaku" :style="{ opacity: opacity }">
+        <view
+            v-for="item in items"
+            :key="item.id"
+            class="up-video-danmaku__item"
+            :style="itemStyle(item)"
+        >
+            <text class="up-video-danmaku__text" :style="{ color: item.color, fontSize: fontSizePx }">{{ item.text }}</text>
+        </view>
+    </view>
+</template>
+
+<script>
+    import { upGetRect } from '../../libs/function/index'
+    import {
+        acquireDanmuTrack,
+        createDanmuState,
+        estimateDanmuWidth,
+        findDanmuCursor,
+        normalizeDanmuItem,
+        normalizeDanmuList,
+        resetDanmuState
+    } from './danmaku'
+
+    // 顶部/底部固定弹幕的停留毫秒数
+    const STATIC_HOLD = 4000
+
+    /**
+     * u-video 的弹幕层。父组件在 timeupdate 里调用 sync(currentTime) 投放弹幕，
+     * 发送弹幕走 push()。文件名不以 u- 开头，避免被 easycom 当成公开组件。
+     */
+    export default {
+        name: 'video-danmaku',
+        props: {
+            list: {
+                type: Array,
+                default: () => []
+            },
+            open: {
+                type: Boolean,
+                default: true
+            },
+            color: {
+                type: String,
+                default: '#ffffff'
+            },
+            fontSize: {
+                type: [String, Number],
+                default: 14
+            },
+            duration: {
+                type: [String, Number],
+                default: 8
+            },
+            // full 全屏 / half 上半屏 / top 顶部三行
+            area: {
+                type: String,
+                default: 'full'
+            },
+            opacity: {
+                type: [String, Number],
+                default: 1
+            },
+            max: {
+                type: [String, Number],
+                default: 30
+            }
+        },
+        data() {
+            return {
+                items: [],
+                containerWidth: 0,
+                containerHeight: 0,
+                cursor: 0,
+                lastTime: 0,
+                seq: 0,
+                timers: []
+            }
+        },
+        computed: {
+            fontSizePx() {
+                return `${Number(this.fontSize) || 14}px`
+            },
+            trackHeight() {
+                return Math.round((Number(this.fontSize) || 14) * 1.6)
+            },
+            sortedList() {
+                return normalizeDanmuList(this.list)
+            }
+        },
+        watch: {
+            list() {
+                // 换集/换弹幕源后重新对齐游标
+                this.reset(this.lastTime)
+            },
+            open(value) {
+                if (!value) this.clear()
+            }
+        },
+        created() {
+            this.state = createDanmuState()
+        },
+        mounted() {
+            this.measure()
+        },
+        beforeUnmount() {
+            this.clear()
+        },
+        // #ifdef VUE2
+        beforeDestroy() {
+            this.clear()
+        },
+        // #endif
+        methods: {
+            async measure() {
+                const rect = await upGetRect('.up-video-danmaku', false, this)
+                if (rect && rect.width) {
+                    this.containerWidth = rect.width
+                    this.containerHeight = rect.height
+                }
+                return rect
+            },
+            trackCount() {
+                const height = this.containerHeight || 0
+                let usable = height
+                if (this.area === 'half') usable = height / 2
+                if (this.area === 'top') usable = this.trackHeight * 3
+                return Math.max(1, Math.floor(usable / this.trackHeight) || 1)
+            },
+            // 拖动进度条、切集后调用，清空在屏弹幕并把游标移到新时间点
+            reset(time = 0) {
+                this.clear()
+                this.lastTime = Number(time) || 0
+                this.cursor = findDanmuCursor(this.sortedList, this.lastTime)
+            },
+            clear() {
+                this.timers.forEach((timer) => clearTimeout(timer))
+                this.timers = []
+                this.items = []
+                resetDanmuState(this.state)
+            },
+            // 播放进度推进时投放到点的弹幕，跳转超过 2 秒视为 seek
+            sync(currentTime) {
+                const time = Number(currentTime) || 0
+                if (!this.open) {
+                    this.lastTime = time
+                    return
+                }
+                if (time < this.lastTime || time - this.lastTime > 2) {
+                    this.reset(time)
+                }
+                this.lastTime = time
+                const list = this.sortedList
+                // 宽度还没量到（首帧或隐藏中）时先不投放，避免弹幕从左边冒出来
+                if (!this.containerWidth) {
+                    this.measure()
+                    return
+                }
+                while (this.cursor < list.length && list[this.cursor].time <= time) {
+                    this.spawn(list[this.cursor])
+                    this.cursor += 1
+                }
+            },
+            // 主动发送一条弹幕（输入框、外部调用）
+            push(danmu) {
+                const item = normalizeDanmuItem(danmu)
+                if (!item.text) return null
+                item.time = this.lastTime
+                this.spawn(item)
+                return item
+            },
+            spawn(danmu) {
+                if (!this.open || !danmu || !danmu.text) return
+                if (this.items.length >= Number(this.max)) return
+                if (!this.containerWidth) this.measure()
+                const width = estimateDanmuWidth(danmu.text, this.fontSize)
+                const isStatic = danmu.type === 'top' || danmu.type === 'bottom'
+                const track = acquireDanmuTrack(this.state, {
+                    now: Date.now(),
+                    itemWidth: width,
+                    containerWidth: this.containerWidth,
+                    duration: Number(this.duration) || 8,
+                    trackCount: this.trackCount(),
+                    hold: isStatic ? STATIC_HOLD : 0
+                })
+                if (track < 0) return
+                this.mount(danmu, track, width, isStatic)
+            },
+            mount(danmu, track, width, isStatic) {
+                this.seq += 1
+                const life = isStatic ? STATIC_HOLD : (Number(this.duration) || 8) * 1000
+                const item = {
+                    id: this.seq,
+                    text: danmu.text,
+                    color: danmu.color || this.color,
+                    width,
+                    type: danmu.type,
+                    offset: track * this.trackHeight,
+                    x: isStatic ? Math.max(0, (this.containerWidth - width) / 2) : this.containerWidth,
+                    moving: false,
+                    life
+                }
+                this.items.push(item)
+                if (!isStatic) {
+                    // 必须等节点带着初始 transform 上屏，再改终点值，transition 才会跑起来
+                    this.$nextTick(() => {
+                        this.timers.push(setTimeout(() => {
+                            const target = this.items.find((current) => current.id === item.id)
+                            if (target) {
+                                target.x = -width
+                                target.moving = true
+                            }
+                        }, 20))
+                    })
+                }
+                this.timers.push(setTimeout(() => this.remove(item.id), life + 200))
+            },
+            remove(id) {
+                const index = this.items.findIndex((item) => item.id === id)
+                if (index > -1) this.items.splice(index, 1)
+            },
+            itemStyle(item) {
+                const style = {
+                    transform: `translateX(${item.x}px)`
+                }
+                if (item.type === 'bottom') {
+                    style.bottom = `${item.offset}px`
+                } else {
+                    style.top = `${item.offset}px`
+                }
+                if (item.moving) {
+                    style.transitionProperty = 'transform'
+                    style.transitionDuration = `${item.life}ms`
+                    style.transitionTimingFunction = 'linear'
+                }
+                return style
+            }
+        }
+    }
+</script>
+
+<style lang="scss" scoped>
+    .up-video-danmaku {
+        position: absolute;
+        top: 0;
+        left: 0;
+        right: 0;
+        bottom: 0;
+        overflow: hidden;
+        /* #ifndef APP-NVUE */
+        pointer-events: none;
+        /* #endif */
+    }
+
+    .up-video-danmaku__item {
+        position: absolute;
+        left: 0;
+        flex-direction: row;
+        /* #ifndef APP-NVUE */
+        white-space: nowrap;
+        will-change: transform;
+        /* #endif */
+    }
+
+    .up-video-danmaku__text {
+        /* #ifndef APP-NVUE */
+        white-space: nowrap;
+        text-shadow: 0 1px 2px rgba(0, 0, 0, 0.6);
+        /* #endif */
+        line-height: 1.6;
+    }
+</style>

package/components/u-video/video-slider.vue

@@ -0,0 +1,179 @@
+<template>
+    <view
+        class="up-video-slider"
+        :class="[disabled ? 'up-video-slider--disabled' : '']"
+        @touchstart.stop.prevent="onTouchStart"
+        @touchmove.stop.prevent="onTouchMove"
+        @touchend.stop="onTouchEnd"
+        @touchcancel.stop="onTouchEnd"
+        @click.stop="onTrackClick"
+    >
+        <view class="up-video-slider__track" :style="{ height: barHeight }">
+            <view
+                v-if="buffered > 0"
+                class="up-video-slider__buffered"
+                :style="{ width: buffered + '%' }"
+            ></view>
+            <view
+                class="up-video-slider__active"
+                :style="{ width: innerPercent + '%', backgroundColor: activeColor }"
+            ></view>
+            <view
+                class="up-video-slider__block"
+                :style="{
+                    left: innerPercent + '%',
+                    width: blockSize,
+                    height: blockSize,
+                    marginLeft: '-' + halfBlock,
+                    marginTop: '-' + halfBlock,
+                    backgroundColor: activeColor
+                }"
+            ></view>
+        </view>
+    </view>
+</template>
+
+<script>
+    import { upGetRect } from '../../libs/function/index'
+    import { clampNumber } from './video-utils'
+
+    /**
+     * u-video 内部使用的拖动条，进度与音量共用。
+     * 独立成组件是为了让触摸计算只写一遍，文件名不以 u- 开头以免被 easycom 收录。
+     */
+    export default {
+        name: 'video-slider',
+        props: {
+            percent: {
+                type: [String, Number],
+                default: 0
+            },
+            // 已缓冲百分比，仅进度条使用
+            buffered: {
+                type: [String, Number],
+                default: 0
+            },
+            activeColor: {
+                type: String,
+                default: '#2979ff'
+            },
+            barHeight: {
+                type: String,
+                default: '2px'
+            },
+            blockSize: {
+                type: String,
+                default: '10px'
+            },
+            disabled: {
+                type: Boolean,
+                default: false
+            }
+        },
+        emits: ['start', 'changing', 'change'],
+        data() {
+            return {
+                dragging: false,
+                innerPercent: 0,
+                rect: null,
+                touchedAt: 0
+            }
+        },
+        computed: {
+            halfBlock() {
+                const size = parseFloat(this.blockSize)
+                const unit = String(this.blockSize).replace(/[\d.]/g, '') || 'px'
+                return `${size / 2}${unit}`
+            }
+        },
+        watch: {
+            percent(value) {
+                // 拖动过程中不接受外部回写，否则手指会被播放进度拽走
+                if (!this.dragging) this.innerPercent = clampNumber(value, 0, 100)
+            }
+        },
+        mounted() {
+            this.innerPercent = clampNumber(this.percent, 0, 100)
+        },
+        methods: {
+            async ensureRect() {
+                const rect = await upGetRect('.up-video-slider__track', false, this)
+                if (rect && rect.width) this.rect = rect
+                return this.rect
+            },
+            percentFromPageX(pageX) {
+                if (!this.rect || !this.rect.width) return this.innerPercent
+                return clampNumber(((pageX - this.rect.left) / this.rect.width) * 100, 0, 100)
+            },
+            async onTouchStart(event) {
+                if (this.disabled) return
+                this.dragging = true
+                await this.ensureRect()
+                this.$emit('start')
+                this.onTouchMove(event)
+            },
+            onTouchMove(event) {
+                if (this.disabled || !this.dragging) return
+                const touch = event.touches && event.touches[0] ? event.touches[0] : event.changedTouches && event.changedTouches[0]
+                if (!touch) return
+                this.innerPercent = this.percentFromPageX(touch.pageX)
+                this.$emit('changing', this.innerPercent)
+            },
+            onTouchEnd() {
+                if (this.disabled || !this.dragging) return
+                this.dragging = false
+                this.touchedAt = Date.now()
+                this.$emit('change', this.innerPercent)
+            },
+            async onTrackClick(event) {
+                // 触摸设备上 touchend 后浏览器还会补一个 click，这里只服务鼠标点击
+                if (this.disabled || this.dragging) return
+                if (this.touchedAt && Date.now() - this.touchedAt < 400) return
+                const pageX = event.detail && event.detail.x !== undefined ? event.detail.x : event.pageX
+                if (pageX === undefined) return
+                await this.ensureRect()
+                this.innerPercent = this.percentFromPageX(pageX)
+                this.$emit('change', this.innerPercent)
+            }
+        }
+    }
+</script>
+
+<style lang="scss" scoped>
+    .up-video-slider {
+        flex: 1;
+        padding-top: 8px;
+        padding-bottom: 8px;
+        justify-content: center;
+    }
+
+    .up-video-slider--disabled {
+        opacity: 0.5;
+    }
+
+    .up-video-slider__track {
+        position: relative;
+        width: 100%;
+        border-radius: 4px;
+        background-color: rgba(255, 255, 255, 0.3);
+    }
+
+    .up-video-slider__buffered,
+    .up-video-slider__active {
+        position: absolute;
+        top: 0;
+        bottom: 0;
+        left: 0;
+        border-radius: 4px;
+    }
+
+    .up-video-slider__buffered {
+        background-color: rgba(255, 255, 255, 0.45);
+    }
+
+    .up-video-slider__block {
+        position: absolute;
+        top: 50%;
+        border-radius: 50%;
+    }
+</style>

package/components/u-video/video-utils.js

@@ -0,0 +1,98 @@
+/**
+ * u-video 的纯逻辑辅助方法。
+ * 这里不允许引入 uni / vue，Node 端的校验脚本会直接 import 本文件做行为断言。
+ */
+
+// 把数值限制在 [min, max] 之间
+export function clampNumber(value, min, max) {
+    const number = Number(value)
+    if (!Number.isFinite(number)) return min
+    if (number < min) return min
+    if (number > max) return max
+    return number
+}
+
+// 秒数格式化为 mm:ss，超过一小时输出 hh:mm:ss
+export function formatVideoTime(seconds) {
+    const total = Math.floor(Number(seconds))
+    if (!Number.isFinite(total) || total <= 0) return '00:00'
+    const pad = (value) => (value < 10 ? `0${value}` : `${value}`)
+    const hour = Math.floor(total / 3600)
+    const minute = Math.floor((total % 3600) / 60)
+    const second = total % 60
+    if (hour > 0) return `${pad(hour)}:${pad(minute)}:${pad(second)}`
+    return `${pad(minute)}:${pad(second)}`
+}
+
+// 倍速列表去重、去掉非法值并升序排列，兜底为 [1]
+export function normalizeRateList(list) {
+    if (!Array.isArray(list)) return [1]
+    const rates = []
+    list.forEach((item) => {
+        const rate = Number(item)
+        if (Number.isFinite(rate) && rate > 0 && !rates.includes(rate)) {
+            rates.push(rate)
+        }
+    })
+    if (!rates.length) return [1]
+    return rates.sort((a, b) => a - b)
+}
+
+// 选集支持直接传地址字符串，默认标题为集数序号
+export function normalizeEpisodes(list) {
+    if (!Array.isArray(list)) return []
+    return list.map((item, index) => {
+        const episode = typeof item === 'string' ? { src: item } : (item || {})
+        return {
+            src: episode.src || '',
+            title: episode.title === undefined || episode.title === '' ? String(index + 1) : episode.title,
+            poster: episode.poster || '',
+            danmuList: Array.isArray(episode.danmuList) ? episode.danmuList : null
+        }
+    })
+}
+
+// 广告归一化：type 默认前置贴片，图片广告没有时长时给 5 秒
+export function normalizeAds(list) {
+    if (!Array.isArray(list)) return []
+    return list.map((item) => {
+        const ad = item || {}
+        const type = ['preroll', 'pause', 'postroll'].includes(ad.type) ? ad.type : 'preroll'
+        const src = ad.src || ''
+        const duration = Number(ad.duration) > 0 ? Number(ad.duration) : (src ? 0 : 5)
+        return {
+            type,
+            src,
+            image: ad.image || '',
+            link: ad.link || '',
+            text: ad.text || '',
+            duration,
+            skipAfter: Number.isFinite(Number(ad.skipAfter)) ? Number(ad.skipAfter) : -1
+        }
+    })
+}
+
+export function pickAds(ads, type) {
+    if (!Array.isArray(ads)) return []
+    return ads.filter((ad) => ad && ad.type === type)
+}
+
+// skipAfter: -1 不可跳过，0 立即可跳过，n 播放 n 秒后可跳过
+export function adSkippable(ad, elapsed) {
+    if (!ad) return false
+    const skipAfter = Number(ad.skipAfter)
+    if (!Number.isFinite(skipAfter) || skipAfter < 0) return false
+    return Number(elapsed) >= skipAfter
+}
+
+export function timeToProgress(time, duration) {
+    const total = Number(duration)
+    if (!Number.isFinite(total) || total <= 0) return 0
+    return clampNumber((Number(time) / total) * 100, 0, 100)
+}
+
+export function progressToTime(percent, duration) {
+    const total = Number(duration)
+    if (!Number.isFinite(total) || total <= 0) return 0
+    return clampNumber((clampNumber(percent, 0, 100) / 100) * total, 0, total)
+}

package/components/u-video/video.js

@@ -0,0 +1,72 @@
+export default {
+    video: {
+        // 视频地址
+        src: '',
+        // 封面图，首次播放前展示
+        poster: '',
+        // 标题，显示在顶部信息栏
+        title: '',
+        width: '100%',
+        height: '211px',
+        radius: '',
+        objectFit: 'contain',
+        autoplay: false,
+        loop: false,
+        muted: false,
+        // 指定开始播放的位置，单位秒
+        initialTime: 0,
+        // 是否显示自绘控制层
+        controls: true,
+        // 未播放时是否显示中间的大播放按钮
+        showCenterPlayBtn: true,
+        showFullscreenBtn: true,
+        // 顶部返回按钮，只在全屏时有意义
+        showBack: false,
+        backIcon: 'arrow-left',
+        // 播放中控制层自动隐藏的毫秒数，0 表示不自动隐藏
+        autoHide: 4000,
+        // 是否显示锁屏按钮
+        showLock: true,
+        // 倍速
+        showRate: true,
+        rate: 1,
+        rateList: [0.5, 0.75, 1, 1.25, 1.5, 2],
+        // 音量，取值 0-1
+        showVolume: true,
+        volume: 1,
+        // 弹幕
+        enableDanmu: false,
+        danmuList: [],
+        danmuBtn: true,
+        danmuOpen: true,
+        danmuColor: '#ffffff',
+        danmuFontSize: 14,
+        // 一条滚动弹幕走完全屏所需秒数
+        danmuDuration: 8,
+        // full 全屏 / half 上半屏 / top 顶部三行
+        danmuArea: 'full',
+        danmuOpacity: 1,
+        // 同屏最大弹幕数
+        danmuMax: 30,
+        // 选集
+        episodes: [],
+        episodeIndex: 0,
+        episodeColumns: 5,
+        // 播完自动跳下一集
+        autoNext: true,
+        // 广告：[{ type: 'preroll'|'pause'|'postroll', src, image, duration, skipAfter, link, text }]
+        ads: [],
+        // 原生手势，自绘进度条时默认关闭，避免与拖动冲突
+        enableProgressGesture: false,
+        pageGesture: false,
+        vslideGesture: false,
+        // 全屏方向，-1 表示由系统根据视频宽高决定
+        direction: -1,
+        autoPauseIfNavigate: true,
+        autoPauseIfOpenNative: true,
+        // 自定义 video 节点 id，留空则自动生成
+        videoId: '',
+        // 进度条与选中态颜色
+        activeColor: '#2979ff'
+    }
+}

package/libs/config/props.js

@@ -117,7 +117,8 @@ const componentKeys = [
     'tooltip',
     'tr',
     'transition',
-    'upload'
+    'upload',
+    'video'
 ]
 
 const props = {}

package/libs/function/test.js

@@ -103,6 +103,8 @@ export function idCard(value) {
  * 是否车牌号
  */
 export function carNo(value) {
+    // 空值（如表单字段默认为null/undefined）直接返回false，避免读取length时报错
+    if (!value) return false
     // 新能源车牌
     const xreg = /^[京津沪渝冀豫云辽黑湘皖鲁新苏浙赣鄂桂甘晋蒙陕吉闽贵粤青藏川宁琼使领A-Z]{1}[A-Z]{1}(([0-9]{5}[DF]$)|([DF][A-HJ-NP-Z0-9][0-9]{4}$))/
     // 旧车牌

package/libs/i18n/locales/de.js

@@ -82,5 +82,18 @@ export default {
     "up.goodsSku.price": "Preis",
     "up.goodsSku.amount": "Stück",
     "up.goodsSku.choosed": "Ausgewählt",
-    "up.goodsSku.buyAmount": "Anzahl"
+    "up.goodsSku.buyAmount": "Anzahl",
+    "up.video.rate": "Geschwindigkeit",
+    "up.video.volume": "Lautstärke",
+    "up.video.danmu": "Kommentare",
+    "up.video.danmuPlaceholder": "Kommentar senden",
+    "up.video.send": "Senden",
+    "up.video.episodes": "Folgen",
+    "up.video.lock": "Gesperrt",
+    "up.video.unlock": "Entsperrt",
+    "up.video.ad": "Werbung",
+    "up.video.adCountdown": "Werbung {seconds}s",
+    "up.video.skipAd": "Werbung überspringen",
+    "up.video.adDetail": "Mehr erfahren",
+    "up.video.error": "Wiedergabe fehlgeschlagen"
 }

package/libs/i18n/locales/en.js

@@ -82,5 +82,18 @@ export default {
     "up.goodsSku.price": "Price",
     "up.goodsSku.amount": "Items",
     "up.goodsSku.choosed": "Selected",
-    "up.goodsSku.buyAmount": "Quantity"
+    "up.goodsSku.buyAmount": "Quantity",
+    "up.video.rate": "Speed",
+    "up.video.volume": "Volume",
+    "up.video.danmu": "Danmaku",
+    "up.video.danmuPlaceholder": "Send a danmaku",
+    "up.video.send": "Send",
+    "up.video.episodes": "Episodes",
+    "up.video.lock": "Locked",
+    "up.video.unlock": "Unlocked",
+    "up.video.ad": "Ad",
+    "up.video.adCountdown": "Ad {seconds}s",
+    "up.video.skipAd": "Skip ad",
+    "up.video.adDetail": "Learn more",
+    "up.video.error": "Playback failed"
 }