uview-ultra 4.5.46

package/components/up-video/video-slider.uvue

@@ -0,0 +1,210 @@
+<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"
+		@tap="onTrackTap"
+	>
+		<view class="up-video-slider__track" :style="{ height: barHeight }">
+			<view
+				v-if="bufferedNumber > 0"
+				class="up-video-slider__buffered"
+				:style="{ width: bufferedText }"
+			></view>
+			<view
+				class="up-video-slider__active"
+				:style="activeStyle"
+			></view>
+			<view
+				class="up-video-slider__block"
+				:style="blockStyle"
+			></view>
+		</view>
+	</view>
+</template>
+
+<script setup lang="uts">
+	import { computed, getCurrentInstance, onMounted, ref, watch } from 'vue'
+	import { upGetRect } from '../../libs/function/index.uts'
+	import { clampNumber } from './video-utils.uts'
+
+	defineOptions({
+		styleIsolation: 'app-and-page',
+		name: 'video-slider'
+	})
+
+	const props = defineProps({
+		percent: {
+			type: [Number, String],
+			default: 0
+		},
+		// 已缓冲百分比，仅进度条使用
+		buffered: {
+			type: [Number, String],
+			default: 0
+		},
+		activeColor: {
+			type: String,
+			default: '#2979ff'
+		},
+		barHeight: {
+			type: String,
+			default: '2px'
+		},
+		blockSize: {
+			type: String,
+			default: '10px'
+		},
+		disabled: {
+			type: Boolean,
+			default: false
+		}
+	})
+	const emit = defineEmits(['start', 'changing', 'change'])
+
+	// up-video 内部使用的拖动条，进度与音量共用。
+	// 文件名不以 up- 开头，避免被 easycom 收录成公开组件。
+	const instance = getCurrentInstance()?.proxy
+
+	const dragging = ref(false)
+	const innerPercent = ref(0)
+	const rectLeft = ref(0)
+	const rectWidth = ref(0)
+	const rectReady = ref(false)
+	const touchedAt = ref(0)
+
+	const bufferedNumber = computed((): number => clampNumber(props.buffered, 0, 100))
+	const bufferedText = computed((): string => bufferedNumber.value.toString() + '%')
+	const activeStyle = computed((): UTSJSONObject => {
+		return {
+			width: innerPercent.value.toString() + '%',
+			backgroundColor: props.activeColor
+		} as UTSJSONObject
+	})
+	const blockStyle = computed((): UTSJSONObject => {
+		const size = parseFloat(props.blockSize)
+		const unit = props.blockSize.replace(/[\d.]/g, '') != '' ? props.blockSize.replace(/[\d.]/g, '') : 'px'
+		const half = (size / 2).toString() + unit
+		return {
+			left: innerPercent.value.toString() + '%',
+			width: props.blockSize,
+			height: props.blockSize,
+			marginLeft: '-' + half,
+			marginTop: '-' + half,
+			backgroundColor: props.activeColor
+		} as UTSJSONObject
+	})
+
+	const ensureRect = async (): Promise<void> => {
+		if (rectReady.value) return
+		const rect = await upGetRect('.up-video-slider__track', false, instance)
+		if (rect != null && (rect.width ?? 0) > 0) {
+			rectLeft.value = rect.left ?? 0
+			rectWidth.value = rect.width ?? 0
+			rectReady.value = true
+		}
+	}
+
+	const percentFromPageX = (pageX: number): number => {
+		if (!rectReady.value || rectWidth.value <= 0) return innerPercent.value
+		return clampNumber(((pageX - rectLeft.value) / rectWidth.value) * 100, 0, 100)
+	}
+
+	const firstPageX = (event: UniTouchEvent): number => {
+		if (event.touches.length > 0) return event.touches[0].pageX
+		if (event.changedTouches.length > 0) return event.changedTouches[0].pageX
+		return -1
+	}
+
+	const onTouchStart = async (event: UniTouchEvent): Promise<void> => {
+		if (props.disabled) return
+		dragging.value = true
+		await ensureRect()
+		emit('start')
+		onTouchMove(event)
+	}
+
+	const onTouchMove = (event: UniTouchEvent): void => {
+		if (props.disabled || !dragging.value) return
+		const pageX = firstPageX(event)
+		if (pageX < 0) return
+		innerPercent.value = percentFromPageX(pageX)
+		emit('changing', innerPercent.value)
+	}
+
+	const onTouchEnd = (): void => {
+		if (props.disabled || !dragging.value) return
+		dragging.value = false
+		touchedAt.value = Date.now()
+		emit('change', innerPercent.value)
+	}
+
+	// 触摸设备上 touchend 后还会补一个 tap，这里只服务鼠标点击
+	const onTrackTap = async (event: UniPointerEvent): Promise<void> => {
+		if (props.disabled || dragging.value) return
+		if (touchedAt.value > 0 && Date.now() - touchedAt.value < 400) return
+		await ensureRect()
+		innerPercent.value = percentFromPageX(event.x)
+		emit('change', innerPercent.value)
+	}
+
+	watch((): number => clampNumber(props.percent, 0, 100), (value: number) => {
+		// 拖动过程中不接受外部回写，否则手指会被播放进度拽走
+		if (!dragging.value) innerPercent.value = value
+	})
+
+	onMounted(() => {
+		innerPercent.value = clampNumber(props.percent, 0, 100)
+	})
+
+	defineExpose({
+		onTouchStart,
+		onTouchMove,
+		onTouchEnd,
+		onTrackTap
+	})
+</script>
+
+<style lang="scss" scoped>
+	@import "../../libs/css/components.scss";
+
+	.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/up-video/video-slider.vue

@@ -0,0 +1,201 @@
+<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="blockStyle"
+            ></view>
+        </view>
+    </view>
+</template>
+
+<script setup>
+    import { computed, getCurrentInstance, onMounted, ref, watch } from 'vue'
+    import { upGetRect } from '../../libs/function/index.js'
+    import { clampNumber } from './video-utils.js'
+
+    defineOptions({
+        name: 'video-slider',
+        styleIsolation: 'app-and-page'
+    })
+
+    const props = defineProps({
+        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
+        }
+    })
+    const emit = defineEmits(['start', 'changing', 'change'])
+
+    // up-video 内部使用的拖动条，进度与音量共用。
+    // 文件名不以 up- 开头，避免被 easycom 收录成公开组件。
+    const instance = getCurrentInstance()?.proxy
+
+    const dragging = ref(false)
+    const innerPercent = ref(0)
+    const rectLeft = ref(0)
+    const rectWidth = ref(0)
+    const rectReady = ref(false)
+    const touchedAt = ref(0)
+
+    const halfBlock = computed(() => {
+        const size = parseFloat(props.blockSize)
+        const unit = String(props.blockSize).replace(/[\d.]/g, '') || 'px'
+        return `${size / 2}${unit}`
+    })
+
+    const blockStyle = computed(() => {
+        return {
+            left: innerPercent.value + '%',
+            width: props.blockSize,
+            height: props.blockSize,
+            marginLeft: '-' + halfBlock.value,
+            marginTop: '-' + halfBlock.value,
+            backgroundColor: props.activeColor
+        }
+    })
+
+    const ensureRect = async () => {
+        if (rectReady.value) return
+        const rect = await upGetRect('.up-video-slider__track', false, instance)
+        if (rect && rect.width) {
+            rectLeft.value = rect.left
+            rectWidth.value = rect.width
+            rectReady.value = true
+        }
+    }
+
+    const percentFromPageX = (pageX) => {
+        if (!rectReady.value || !rectWidth.value) return innerPercent.value
+        return clampNumber(((pageX - rectLeft.value) / rectWidth.value) * 100, 0, 100)
+    }
+
+    const onTouchStart = async (event) => {
+        if (props.disabled) return
+        dragging.value = true
+        await ensureRect()
+        emit('start')
+        onTouchMove(event)
+    }
+
+    const onTouchMove = (event) => {
+        if (props.disabled || !dragging.value) return
+        const touch = event.touches && event.touches[0]
+            ? event.touches[0]
+            : event.changedTouches && event.changedTouches[0]
+        if (!touch) return
+        innerPercent.value = percentFromPageX(touch.pageX)
+        emit('changing', innerPercent.value)
+    }
+
+    const onTouchEnd = () => {
+        if (props.disabled || !dragging.value) return
+        dragging.value = false
+        touchedAt.value = Date.now()
+        emit('change', innerPercent.value)
+    }
+
+    const onTrackClick = async (event) => {
+        // 触摸设备上 touchend 后浏览器还会补一个 click，这里只服务鼠标点击
+        if (props.disabled || dragging.value) return
+        if (touchedAt.value && Date.now() - touchedAt.value < 400) return
+        const pageX = event.detail && event.detail.x !== undefined ? event.detail.x : event.pageX
+        if (pageX === undefined) return
+        await ensureRect()
+        innerPercent.value = percentFromPageX(pageX)
+        emit('change', innerPercent.value)
+    }
+
+    watch(() => props.percent, (value) => {
+        // 拖动过程中不接受外部回写，否则手指会被播放进度拽走
+        if (!dragging.value) innerPercent.value = clampNumber(value, 0, 100)
+    })
+
+    onMounted(() => {
+        innerPercent.value = clampNumber(props.percent, 0, 100)
+    })
+
+    defineExpose({
+        onTouchStart,
+        onTouchMove,
+        onTouchEnd,
+        onTrackClick
+    })
+</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/up-video/video-utils.js

@@ -0,0 +1,105 @@
+/**
+ * up-video 的纯逻辑辅助方法。
+ * 这里不允许引入 uni / vue。
+ */
+
+// 宽松转数字，无法解析时返回 fallback
+export function toNumber(value, fallback = 0) {
+    if (value === null || value === undefined || value === '') return fallback
+    const num = parseFloat(value)
+    return isNaN(num) ? fallback : num
+}
+
+// 把数值限制在 [min, max] 之间
+export function clampNumber(value, min, max) {
+    const number = toNumber(value, min)
+    if (isNaN(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(toNumber(seconds, 0))
+    if (isNaN(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 = toNumber(item, 0)
+        if (!isNaN(rate) && rate > 0 && rates.indexOf(rate) == -1) {
+            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'].indexOf(ad.type) > -1 ? ad.type : 'preroll'
+        const src = ad.src || ''
+        const duration = toNumber(ad.duration, 0) > 0 ? toNumber(ad.duration, 0) : (src ? 0 : 5)
+        return {
+            type,
+            src,
+            image: ad.image || '',
+            link: ad.link || '',
+            text: ad.text || '',
+            duration,
+            skipAfter: isNaN(toNumber(ad.skipAfter, -1)) ? -1 : toNumber(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 = toNumber(ad.skipAfter, -1)
+    if (isNaN(skipAfter) || skipAfter < 0) return false
+    return toNumber(elapsed, 0) >= skipAfter
+}
+
+export function timeToProgress(time, duration) {
+    const total = toNumber(duration, 0)
+    if (isNaN(total) || total <= 0) return 0
+    return clampNumber((toNumber(time, 0) / total) * 100, 0, 100)
+}
+
+export function progressToTime(percent, duration) {
+    const total = toNumber(duration, 0)
+    if (isNaN(total) || total <= 0) return 0
+    return clampNumber((clampNumber(percent, 0, 100) / 100) * total, 0, total)
+}

package/components/up-video/video-utils.uts

@@ -0,0 +1,127 @@
+import { array as testArray } from '../../libs/function/test.uts'
+import { UPVideoAd } from './types.uts'
+
+// 宽松转数字，无法解析时返回 fallback
+export function toNumber(value: any | null, fallback: number = 0): number {
+	if (value == null || value == '') return fallback
+	const num = parseFloat(value.toString())
+	return isNaN(num) ? fallback : num
+}
+
+// 把数值限制在 [min, max] 区间
+export function clampNumber(value: any, min: number, max: number): number {
+	const number = toNumber(value, min)
+	if (isNaN(number)) return min
+	if (number < min) return min
+	if (number > max) return max
+	return number
+}
+
+// 秒数格式化为 mm:ss，超过一小时输出 hh:mm:ss
+export function formatVideoTime(seconds: any): string {
+	const total = Math.floor(toNumber(seconds, 0))
+	if (isNaN(total) || total <= 0) return '00:00'
+	const hour = Math.floor(total / 3600)
+	const minute = Math.floor((total % 3600) / 60)
+	const second = total % 60
+	const pad = (value: number): string => (value < 10 ? '0' + value.toString() : value.toString())
+	if (hour > 0) return pad(hour) + ':' + pad(minute) + ':' + pad(second)
+	return pad(minute) + ':' + pad(second)
+}
+
+// 倍速列表去重、去掉非法值并升序排列，兜底为 [1]
+export function normalizeRateList(list: any): number[] {
+	if (!testArray(list)) return [1] as number[]
+	const source = list as any[]
+	const rates: number[] = [] as number[]
+	source.forEach((item: any) => {
+		const rate = toNumber(item, 0)
+		if (!isNaN(rate) && rate > 0 && rates.indexOf(rate) == -1) {
+			rates.push(rate)
+		}
+	})
+	if (rates.length == 0) return [1] as number[]
+	return rates.sort((a: number, b: number): number => a - b)
+}
+
+// 选集支持直接传地址字符串，默认标题为集数序号
+export function normalizeEpisodes(list: any): Array<UTSJSONObject> {
+	if (!testArray(list)) return [] as Array<UTSJSONObject>
+	const source = list as any[]
+	const result: Array<UTSJSONObject> = [] as Array<UTSJSONObject>
+	for (let i = 0; i < source.length; i++) {
+		const item = source[i]
+		let episode = {} as UTSJSONObject
+		if (typeof item == 'string') {
+			episode['src'] = item
+		} else if (item != null) {
+			episode = item as UTSJSONObject
+		}
+		const rawTitle = episode['title']
+		const title = (rawTitle == null || rawTitle == '') ? (i + 1).toString() : rawTitle as string
+		const rawDanmu = episode['danmuList']
+		result.push({
+			src: (episode['src'] ?? '') as string,
+			title: title,
+			poster: (episode['poster'] ?? '') as string,
+			danmuList: testArray(rawDanmu) ? (rawDanmu as any[]) : null
+		} as UTSJSONObject)
+	}
+	return result
+}
+
+// 广告归一化：type 默认前置贴片，图片广告没有时长时给 5 秒
+export function normalizeAds(list: any): UPVideoAd[] {
+	if (!testArray(list)) return [] as UPVideoAd[]
+	const source = list as any[]
+	const result: UPVideoAd[] = [] as UPVideoAd[]
+	for (let i = 0; i < source.length; i++) {
+		const item = source[i]
+		const ad = (item != null ? item : {}) as UTSJSONObject
+		const rawType = ad['type'] as string
+		const type = (rawType == 'preroll' || rawType == 'pause' || rawType == 'postroll') ? rawType : 'preroll'
+		const src = (ad['src'] ?? '') as string
+		const rawDuration = toNumber(ad['duration'], 0)
+		const duration = rawDuration > 0 ? rawDuration : (src != '' ? 0 : 5)
+		const skipAfter = toNumber(ad['skipAfter'], -1)
+		result.push({
+			type: type,
+			src: src,
+			image: (ad['image'] ?? '') as string,
+			link: (ad['link'] ?? '') as string,
+			text: (ad['text'] ?? '') as string,
+			duration: duration,
+			skipAfter: isNaN(skipAfter) ? -1 : skipAfter
+		} as UPVideoAd)
+	}
+	return result
+}
+
+export function pickAds(ads: UPVideoAd[], type: string): UPVideoAd[] {
+	if (ads == null) return [] as UPVideoAd[]
+	const result: UPVideoAd[] = [] as UPVideoAd[]
+	ads.forEach((ad: UPVideoAd) => {
+		if (ad != null && ad.type == type) result.push(ad)
+	})
+	return result
+}
+
+// skipAfter: -1 不可跳过，0 立即可跳过，n 播放 n 秒后可跳过
+export function adSkippable(ad: UPVideoAd | null, elapsed: any): boolean {
+	if (ad == null) return false
+	const skipAfter = toNumber(ad.skipAfter, -1)
+	if (isNaN(skipAfter) || skipAfter < 0) return false
+	return toNumber(elapsed, 0) >= skipAfter
+}
+
+export function timeToProgress(time: any, duration: any): number {
+	const total = toNumber(duration, 0)
+	if (isNaN(total) || total <= 0) return 0
+	return clampNumber((toNumber(time, 0) / total) * 100, 0, 100)
+}
+
+export function progressToTime(percent: any, duration: any): number {
+	const total = toNumber(duration, 0)
+	if (isNaN(total) || total <= 0) return 0
+	return clampNumber((clampNumber(percent, 0, 100) / 100) * total, 0, total)
+}