diff --git a/packages/vant/src/barrage/Barrage.tsx b/packages/vant/src/barrage/Barrage.tsx new file mode 100644 index 000000000..7f5b2c7ac --- /dev/null +++ b/packages/vant/src/barrage/Barrage.tsx @@ -0,0 +1,166 @@ +import { + defineComponent, + onMounted, + ref, + type ExtractPropTypes, + nextTick, + watch, +} from 'vue'; +import { useExpose } from '../composables/use-expose'; +import { + createNamespace, + makeArrayProp, + makeNumberProp, + makeNumericProp, + truthProp, +} from '../utils'; +import { BarrageExpose } from './types'; + +export interface BarrageItem { + id: string | number; + text: string | number; +} + +export const barrageProps = { + top: makeNumericProp(10), + rows: makeNumericProp(4), + speed: makeNumericProp(4000), + autoPlay: truthProp, + delay: makeNumberProp(300), + modelValue: makeArrayProp(), +}; + +export type BarrageProps = ExtractPropTypes; + +const [name, bem] = createNamespace('barrage'); + +export default defineComponent({ + name, + + props: barrageProps, + + emits: ['update:modelValue'], + + setup(props, { emit, slots }) { + const barrageWrapper = ref(); + const className = bem('item') as string; + const total = ref(0); + const barrageItems: HTMLSpanElement[] = []; + + const createBarrageItem = ( + text: string | number, + delay: number = props.delay + ) => { + const item = document.createElement('span'); + item.className = className; + item.innerText = String(text); + + item.style.animationDuration = `${props.speed}ms`; + item.style.animationDelay = `${delay}ms`; + item.style.animationName = 'van-barrage'; + item.style.animationTimingFunction = 'linear'; + + return item; + }; + + const isInitBarrage = ref(true); + const isPlay = ref(props.autoPlay); + + const appendBarrageItem = ({ id, text }: BarrageItem, i: number) => { + const item = createBarrageItem( + text, + isInitBarrage.value ? i * props.delay : undefined + ); + if (!props.autoPlay && isPlay.value === false) { + item.style.animationPlayState = 'paused'; + } + barrageWrapper.value?.append(item); + total.value++; + + const top = + ((total.value - 1) % +props.rows) * item.offsetHeight + +props.top; + item.style.top = `${top}px`; + item.dataset.id = String(id); + barrageItems.push(item); + + item.addEventListener('animationend', () => { + emit( + 'update:modelValue', + [...props.modelValue].filter((v) => String(v.id) !== item.dataset.id) + ); + }); + }; + + const updateBarrages = ( + newValue: BarrageItem[], + oldValue: BarrageItem[] + ) => { + const map = new Map(oldValue.map((item) => [item.id, item])); + + newValue.forEach((item, i) => { + if (map.has(item.id)) { + map.delete(item.id); + } else { + // add + appendBarrageItem(item, i); + } + }); + + map.forEach((item) => { + // remove + const index = barrageItems.findIndex( + (span) => span.dataset.id === String(item.id) + ); + if (index > -1) { + barrageItems[index].remove(); + barrageItems.splice(index, 1); + } + }); + + isInitBarrage.value = false; + }; + + watch( + () => props.modelValue.slice(), + (newValue, oldValue) => updateBarrages(newValue ?? [], oldValue ?? []), + { deep: true } + ); + + const rootStyle = ref<{ + '--move-distance'?: string; + }>({}); + + onMounted(async () => { + rootStyle.value[ + '--move-distance' + ] = `-${barrageWrapper.value?.offsetWidth}px`; + await nextTick(); + updateBarrages(props.modelValue, []); + }); + + const play = () => { + isPlay.value = true; + barrageItems.forEach((item) => { + item.style.animationPlayState = 'running'; + }); + }; + + const pause = () => { + isPlay.value = false; + barrageItems.forEach((item) => { + item.style.animationPlayState = 'paused'; + }); + }; + + useExpose({ + play, + pause, + }); + + return () => ( +
+ {slots.default?.()} +
+ ); + }, +}); diff --git a/packages/vant/src/barrage/README.md b/packages/vant/src/barrage/README.md new file mode 100644 index 000000000..29acaf15f --- /dev/null +++ b/packages/vant/src/barrage/README.md @@ -0,0 +1,148 @@ +# Barrage + +### Intro + +To realize the critical subtitle function when watching the video. + +### Install + +Register component globally via `app.use`, refer to [Component Registration](#/en-US/advanced-usage#zu-jian-zhu-ce) for more registration ways. + +```js +import { createApp } from 'vue'; +import { Barrage } from 'vant'; + +const app = createApp(); +app.use(Barrage); +``` + +## Usage + +### Basic Usage + +```html + +
+ + + barrage + +``` + +```ts +export default { + setup() { + const defaultList = [ + { id: 100, text: 'Lightweight' }, + { id: 101, text: 'Customizable' }, + { id: 102, text: 'Mobile' }, + { id: 103, text: 'Vue' }, + { id: 104, text: 'Library' }, + { id: 105, text: 'VantUI' }, + { id: 106, text: '666' }, + ]; + + const list = ref([...defaultList]); + const add = () => { + list.value.push({ id: Math.random(), text: 'Barrage' }); + }; + return { list, add }; + }, +}; +``` + +### Imitate video barrage + +```html + +
+ + + + barrage + + + {{ isPlay ? 'pause' : 'play' }} + + +``` + +```ts +export default { + setup() { + const defaultList = [ + { id: 100, text: 'Lightweight' }, + { id: 101, text: 'Customizable' }, + { id: 102, text: 'Mobile' }, + { id: 103, text: 'Vue' }, + { id: 104, text: 'Library' }, + { id: 105, text: 'VantUI' }, + { id: 106, text: '666' }, + ]; + + const list = ref([...defaultList]); + const barrage = ref(); + const add = () => { + list.value.push({ id: Math.random(), text: 'Barrage' }); + }; + + const [isPlay, toggle] = useToggle(false); + + watch(isPlay, () => { + if (isPlay.value) barrage.value?.play(); + else barrage.value?.pause(); + }); + + return { list, barrage, isPlay, toggle, add }; + }, +}; +``` + +## API + +### Props + +| Attribute | Description | Type | Default | +| --- | --- | --- | --- | +| v-model | Barrage data | _BarrageItem[]_ | - | +| auto-play | Whether to play the bullet screen automatically | _boolean_ | `true` | +| rows | The number of lines of text | _number \| string_ | `4` | +| top | Spacing between the top of the barrage area, unit `px` | _number \| string_ | `10` | +| speed | Speed of passing, unit `ms` | _number \| string_ | `4000` | +| delay | Barrage animation delay, unit `ms` | _number_ | `300` | + +### Methods + +Use [ref](https://v3.vuejs.org/guide/component-template-refs.html) to get Barrage instance and call instance methods. + +| Name | Description | Attribute | Return value | +| ----- | ------------- | --------- | ------------ | +| play | Play barrage | - | - | +| pause | Pause barrage | - | - | + +### Slots + +| Name | Description | +| ------- | ------------ | +| default | Default slot | + +### Types + +The component exports the following type definitions: + +```ts +import type { BarrageProps, BarrageItem, BarrageInstance } from 'vant'; +``` + +## Theming + +### CSS Variables + +The component provides the following CSS variables, which can be used to customize styles. Please refer to [ConfigProvider component](#/en-US/config-provider). + +| Name | Default Value | Description | +| --- | --- | --- | +| --van-barrage-font-size | _16px_ | - | +| --van-barrage-space | _10px_ | - | +| --van-barrage-color | _var(--van-white)_ | - | +| --van-barrage-font | _-apple-system-font, Helvetica Neue, Arial, sans-serif_ | - | diff --git a/packages/vant/src/barrage/README.zh-CN.md b/packages/vant/src/barrage/README.zh-CN.md new file mode 100644 index 000000000..d8dbbd4ff --- /dev/null +++ b/packages/vant/src/barrage/README.zh-CN.md @@ -0,0 +1,153 @@ +# Barrage 弹幕 + +### 介绍 + +实现观看视频时弹出的评论性字幕功能。 + +### 引入 + +通过以下方式来全局注册组件，更多注册方式请参考[组件注册](#/zh-CN/advanced-usage#zu-jian-zhu-ce)。 + +```js +import { createApp } from 'vue'; +import { Barrage } from 'vant'; + +const app = createApp(); +app.use(Barrage); +``` + +## 代码演示 + +### 基础用法 + +可以通过 `v-model` 双向绑定弹幕数据，`Barrage` 会在组件区域内播放文字弹幕，使用数组数据 `push()` 可以发送弹幕文字。 + +```html + +
+ + + 弹幕 + +``` + +```ts +export default { + setup() { + const defaultList = [ + { id: 100, text: '轻量' }, + { id: 101, text: '可定制的' }, + { id: 102, text: '移动端' }, + { id: 103, text: 'Vue' }, + { id: 104, text: '组件库' }, + { id: 105, text: 'VantUI' }, + { id: 106, text: '666' }, + ]; + + const list = ref([...defaultList]); + const add = () => { + list.value.push({ id: Math.random(), text: 'Barrage' }); + }; + + return { list, add }; + }, +}; +``` + +### 模拟视频弹幕 + +设置 `auto-play` 为 `false` 属性后，需要使用 `play()` 进行弹幕播放，暂停可以使用 `pause()` 实现。 + +```html + +
+ + + + 弹幕 + + + {{ isPlay ? '暂停' : '开始' }} + + +``` + +```ts +export default { + setup() { + const defaultList = [ + { id: 100, text: '轻量' }, + { id: 101, text: '可定制的' }, + { id: 102, text: '移动端' }, + { id: 103, text: 'Vue' }, + { id: 104, text: '组件库' }, + { id: 105, text: 'VantUI' }, + { id: 106, text: '666' }, + ]; + + const list = ref([...defaultList]); + const barrage = ref(); + const add = () => { + list.value.push({ id: Math.random(), text: 'Barrage' }); + }; + + const [isPlay, toggle] = useToggle(false); + + watch(isPlay, () => { + if (isPlay.value) barrage.value?.play(); + else barrage.value?.pause(); + }); + + return { list, barrage, isPlay, toggle, add }; + }, +}; +``` + +## API + +### Props + +| 参数 | 说明 | 类型 | 默认值 | +| --------- | ------------------------------- | ------------------ | ------ | +| v-model | 弹幕数据 | _BarrageItem[]_ | - | +| auto-play | 是否自动播放弹幕 | _boolean_ | `true` | +| rows | 弹幕文字行数 | _number \| string_ | `4` | +| top | 弹幕文字区域顶部间距，单位 `px` | _number \| string_ | `10` | +| speed | 文字滑过容器的时间，单位 `ms` | _number \| string_ | `4000` | +| delay | 弹幕动画延时，单位 `ms` | _number_ | `300` | + +### 方法 + +通过 ref 可以获取到 Barrage 实例并调用实例方法，详见[组件实例方法](#/zh-CN/advanced-usage#zu-jian-shi-li-fang-fa)。 + +| 方法名 | 说明 | 参数 | 返回值 | +| ------ | -------- | ---- | ------ | +| play | 播放弹幕 | - | - | +| pause | 暂停弹幕 | - | - | + +### Slots + +| 名称 | 说明 | +| ------- | -------------- | +| default | 弹幕组件子元素 | + +### 类型定义 + +组件导出以下类型定义： + +```ts +import type { BarrageProps, BarrageItem, BarrageInstance } from 'vant'; +``` + +## 主题定制 + +### 样式变量 + +组件提供了下列 CSS 变量，可用于自定义样式，使用方法请参考 [ConfigProvider 组件](#/zh-CN/config-provider)。 + +| 名称 | 默认值 | 描述 | +| --- | --- | --- | +| --van-barrage-font-size | _16px_ | - | +| --van-barrage-space | _10px_ | - | +| --van-barrage-color | _var(--van-white)_ | - | +| --van-barrage-font | _-apple-system-font, Helvetica Neue, Arial, sans-serif_ | - | diff --git a/packages/vant/src/barrage/demo/index.vue b/packages/vant/src/barrage/demo/index.vue new file mode 100644 index 000000000..680b19f55 --- /dev/null +++ b/packages/vant/src/barrage/demo/index.vue @@ -0,0 +1,103 @@ + + + + + diff --git a/packages/vant/src/barrage/index.less b/packages/vant/src/barrage/index.less new file mode 100644 index 000000000..14eceb1be --- /dev/null +++ b/packages/vant/src/barrage/index.less @@ -0,0 +1,39 @@ +:root { + --van-barrage-font-size: 16px; + --van-barrage-space: 10px; + --van-barrage-font: -apple-system-font, helvetica neue, arial, sans-serif; + --van-barrage-color: var(--van-white); +} + +.van-barrage { + position: relative; + overflow: hidden; + &__item { + position: absolute; + top: 0; + right: 0; + z-index: 99; + padding-bottom: var(--van-barrage-space); + opacity: 0.75; + line-height: 1; + font-size: var(--van-barrage-font-size); + font-family: var(--van-barrage-font); + font-weight: bold; + white-space: nowrap; + color: var(--van-barrage-color); + text-shadow: 1px 0 1px #000000, 0 1px 1px #000000, 0 -1px 1px #000000, + -1px 0 1px #000000; + user-select: none; + will-change: transform; + transform: translateX(110%); + } +} + +@keyframes van-barrage { + from { + transform: translateX(110%); + } + to { + transform: translateX(var(--move-distance)); + } +} diff --git a/packages/vant/src/barrage/index.ts b/packages/vant/src/barrage/index.ts new file mode 100644 index 000000000..9aa44c149 --- /dev/null +++ b/packages/vant/src/barrage/index.ts @@ -0,0 +1,15 @@ +import { withInstall } from '../utils'; +import _Barrage from './Barrage'; + +export const Barrage = withInstall(_Barrage); +export default Barrage; + +export { barrageProps } from './Barrage'; +export type { BarrageProps, BarrageItem } from './Barrage'; +export type { BarrageInstance } from './types'; + +declare module 'vue' { + export interface GlobalComponents { + VanBarrage: typeof Barrage; + } +} diff --git a/packages/vant/src/barrage/test/__snapshots__/demo.spec.ts.snap b/packages/vant/src/barrage/test/__snapshots__/demo.spec.ts.snap new file mode 100644 index 000000000..d6b9d504b --- /dev/null +++ b/packages/vant/src/barrage/test/__snapshots__/demo.spec.ts.snap @@ -0,0 +1,134 @@ +// Jest Snapshot v1, https://goo.gl/fbAQLP + +exports[`should render demo and match snapshot 1`] = ` +
+
+
+
+ + + + + + + + + + + + + + +
+
+
+ +
+
+
+
+
+
+
+ + + + + + + + + + + + + + +
+
+
+ +
+
+ +
+
+
+`; diff --git a/packages/vant/src/barrage/test/__snapshots__/index.spec.tsx.snap b/packages/vant/src/barrage/test/__snapshots__/index.spec.tsx.snap new file mode 100644 index 000000000..bedcce83e --- /dev/null +++ b/packages/vant/src/barrage/test/__snapshots__/index.spec.tsx.snap @@ -0,0 +1,139 @@ +// Jest Snapshot v1, https://goo.gl/fbAQLP + +exports[`should auto play when only list props 1`] = ` +
+
+
+ + + + + + + + + + + + + + +
+`; + +exports[`should emit "update:modelValue" when animationend 1`] = ` +
+
+
+ + + + + + + + + + + + + + +
+`; + +exports[`should not auto play use play function when use play function 1`] = ` +
+
+
+ + + + + + + + + + + + + + +
+`; diff --git a/packages/vant/src/barrage/test/demo.spec.ts b/packages/vant/src/barrage/test/demo.spec.ts new file mode 100644 index 000000000..c0e0c95b9 --- /dev/null +++ b/packages/vant/src/barrage/test/demo.spec.ts @@ -0,0 +1,4 @@ +import Demo from '../demo/index.vue'; +import { snapshotDemo } from '../../../test/demo'; + +snapshotDemo(Demo); diff --git a/packages/vant/src/barrage/test/index.spec.tsx b/packages/vant/src/barrage/test/index.spec.tsx new file mode 100644 index 000000000..707ad484b --- /dev/null +++ b/packages/vant/src/barrage/test/index.spec.tsx @@ -0,0 +1,145 @@ +import { ref } from 'vue'; +import { Barrage, BarrageInstance } from '..'; +import { mount, trigger } from '../../../test'; +import { flushPromises } from '@vue/test-utils'; + +test('should auto play when only list props', async () => { + const wrapper = mount({ + render() { + return ( + +
+ + ); + }, + }); + + await flushPromises(); + expect(wrapper.html()).toMatchSnapshot(); + expect(wrapper.findAll('.van-barrage__item')).toHaveLength(7); +}); + +test('should not auto play use play function when use play function', async () => { + const barrage = ref(); + const wrapper = mount({ + render() { + return ( + +
+ + ); + }, + }); + + await flushPromises(); + expect(wrapper.html()).toMatchSnapshot(); + expect(wrapper.findAll('.van-barrage__item')).toHaveLength(7); + + expect( + (wrapper.find('.van-barrage__item') as HTMLSpanElement).style + .animationPlayState + ).toBe('paused'); + + barrage.value?.play(); + + expect( + (wrapper.find('.van-barrage__item') as HTMLSpanElement).style + .animationPlayState + ).toBe('running'); + + barrage.value?.pause(); + + expect( + (wrapper.find('.van-barrage__item') as HTMLSpanElement).style + .animationPlayState + ).toBe('paused'); +}); + +test('should emit "update:modelValue" when animationend', async () => { + const barrage = ref(); + const wrapper = mount({ + render() { + return ( + this.$emit('change', value)} + > +
+ + ); + }, + }); + + await flushPromises(); + expect(wrapper.html()).toMatchSnapshot(); + expect(wrapper.findAll('.van-barrage__item')).toHaveLength(7); + + barrage.value?.play(); + + expect( + (wrapper.find('.van-barrage__item') as HTMLSpanElement).style + .animationPlayState + ).toBe('running'); + + await wrapper.setProps({ + modelValue: [ + { id: 100, text: '轻量' }, + { id: 101, text: '可定制的' }, + { id: 102, text: '移动端' }, + { id: 103, text: 'Vue' }, + { id: 104, text: '组件库' }, + { id: 105, text: 'VantUI' }, + { id: 106, text: '666' }, + { id: 107, text: 'Barrage' }, + ], + }); + + expect(wrapper.findAll('.van-barrage__item')).toHaveLength(8); + + await trigger( + wrapper.find('.van-barrage__item') as HTMLSpanElement, + 'animationend' + ); + + expect(wrapper.emitted('change')?.[0][0]).toEqual([ + { id: 101, text: '可定制的' }, + { id: 102, text: '移动端' }, + { id: 103, text: 'Vue' }, + { id: 104, text: '组件库' }, + { id: 105, text: 'VantUI' }, + { id: 106, text: '666' }, + { id: 107, text: 'Barrage' }, + ]); +}); diff --git a/packages/vant/src/barrage/types.ts b/packages/vant/src/barrage/types.ts new file mode 100644 index 000000000..79d9efec3 --- /dev/null +++ b/packages/vant/src/barrage/types.ts @@ -0,0 +1,12 @@ +import { ComponentPublicInstance } from 'vue'; +import { BarrageProps } from './Barrage'; + +export type BarrageExpose = { + play(): void; + pause(): void; +}; + +export type BarrageInstance = ComponentPublicInstance< + BarrageProps, + BarrageExpose +>; diff --git a/packages/vant/vant.config.mjs b/packages/vant/vant.config.mjs index bc0d6b3bd..89447bafa 100644 --- a/packages/vant/vant.config.mjs +++ b/packages/vant/vant.config.mjs @@ -239,6 +239,10 @@ location.href = location.href.replace('youzan.github.io', 'vant-ui.github.io'); path: 'action-sheet', title: 'ActionSheet 动作面板', }, + { + path: 'barrage', + title: 'Barrage 弹幕', + }, { path: 'dialog', title: 'Dialog 弹出框', @@ -687,6 +691,10 @@ location.href = location.href.replace('youzan.github.io', 'vant-ui.github.io'); path: 'action-sheet', title: 'ActionSheet', }, + { + path: 'barrage', + title: 'Barrage', + }, { path: 'dialog', title: 'Dialog',