oxy-uni-ui 1.2.0 → 2.0.0

package/components/oxy-voice-player/types.ts

@@ -0,0 +1,567 @@
+import type { ComponentPublicInstance, ExtractPropTypes, PropType } from 'vue'
+import { baseProps, makeBooleanProp, makeNumberProp, makeStringProp, makeNumericProp } from '../common/props'
+
+/**
+ * 内部音频上下文接口
+ */
+export interface InnerAudioContext {
+  /**
+   * 音频地址
+   */
+  src: string
+  /**
+   * 是否循环播放
+   */
+  loop: boolean
+  /**
+   * 音量
+   */
+  volume: number
+  /**
+   * 总时长
+   */
+  duration: number
+  /**
+   * 自动
+   */
+  autoPlay: boolean
+  /**
+   * 当前播放时间
+   */
+  currentTime: number
+  /**
+   * 缓冲时间
+   */
+  buffered: number
+  /**
+   * 开始播放时间
+   */
+  startTime: number
+  /**
+   * 播放
+   */
+  play: () => void
+  /**
+   * 暂停
+   */
+  pause: () => void
+  /**
+   * 停止
+   */
+  stop: () => void
+  /**
+   * 跳转
+   */
+  seek: (position: number) => void
+  /**
+   * 销毁
+   */
+  destroy: () => void
+  /**
+   * 监听可以播放事件
+   */
+  onCanplay: (callback: () => void) => void
+  /**
+   * 监听播放事件
+   */
+  onPlay: (callback: () => void) => void
+  /**
+   * 监听暂停事件
+   */
+  onPause: (callback: () => void) => void
+  /**
+   * 监听停止事件
+   */
+  onStop: (callback: () => void) => void
+  /**
+   * 监听播放结束事件
+   */
+  onEnded: (callback: () => void) => void
+  /**
+   * 监听错误事件
+   */
+  onError: (callback: (error: { errMsg: string; errCode: number }) => void) => void
+  /**
+   * 监听时间更新事件
+   */
+  onTimeUpdate: (callback: () => void) => void
+  /**
+   * 取消监听可以播放事件
+   */
+  offCanplay: (callback?: () => void) => void
+  /**
+   * 取消监听播放事件
+   */
+  offPlay: (callback?: () => void) => void
+  /**
+   * 取消监听暂停事件
+   */
+  offPause: (callback?: () => void) => void
+  /**
+   * 取消监听停止事件
+   */
+  offStop: (callback?: () => void) => void
+  /**
+   * 取消监听播放结束事件
+   */
+  offEnded: (callback?: () => void) => void
+  /**
+   * 取消监听错误事件
+   */
+  offError: (callback?: (error: { errMsg: string; errCode: number }) => void) => void
+  /**
+   * 取消监听时间更新事件
+   */
+  offTimeUpdate: (callback?: () => void) => void
+}
+
+/**
+ * 播放器模式
+ */
+export type VoicePlayerMode = 'list' | 'single' | 'random'
+
+/**
+ * 播放器主题
+ */
+export type VoicePlayerTheme = 'light' | 'dark'
+
+/**
+ * 播放器视图模式
+ */
+export type VoicePlayerViewMode = 'normal' | 'mini' | 'simple' | 'hideView'
+
+/**
+ * 播放器额外控制按钮
+ */
+export type VoicePlayerExtraControl = 'playMode' | 'favorite' | 'mini' | 'volume'
+
+/**
+ * 歌曲信息
+ */
+export interface VoicePlayerSongInfo {
+  /**
+   * 音频地址
+   */
+  src: string
+  /**
+   * 标题
+   */
+  title?: string
+  /**
+   * 歌手
+   */
+  artist?: string
+  /**
+   * 专辑
+   */
+  album?: string
+  /**
+   * 封面
+   */
+  cover?: string
+  /**
+   * 歌词
+   */
+  lyrics?: VoicePlayerLyricLine[]
+  /**
+   * 总时长
+   */
+  duration?: number
+  [key: string]: any
+}
+
+/**
+ * 歌词行
+ */
+export interface VoicePlayerLyricLine {
+  /**
+   * 时间
+   */
+  time: number
+  /**
+   * 文本
+   */
+  text: string
+  /**
+   * 翻译
+   */
+  translation?: string
+}
+
+/**
+ * 时间更新事件
+ */
+export interface VoicePlayerTimeUpdateEvent {
+  /**
+   * 当前播放时间
+   */
+  currentTime: number
+  /**
+   * 总时长
+   */
+  duration: number
+  /**
+   * 缓冲时间
+   */
+  buffered?: number
+}
+
+/**
+ * 歌曲切换事件
+ */
+export interface VoicePlayerSongChangeEvent {
+  /**
+   * 索引
+   */
+  index: number
+  /**
+   * 歌曲信息
+   */
+  song: VoicePlayerSongInfo
+}
+
+/**
+ * 音量变化事件
+ */
+export interface VoicePlayerVolumeChangeEvent {
+  /**
+   * 音量
+   */
+  volume: number
+}
+
+/**
+ * 跳转事件
+ */
+export interface VoicePlayerSeekEvent {
+  /**
+   * 时间
+   */
+  time: number
+}
+
+/**
+ * 错误事件
+ */
+export interface VoicePlayerErrorEvent {
+  /**
+   * 错误信息
+   */
+  message: string
+  /**
+   * 错误对象
+   */
+  error: any
+}
+
+/**
+ * 滑块变化事件
+ */
+export interface SliderChangeEvent {
+  detail: {
+    /**
+     * 值
+     */
+    value: number
+  }
+}
+
+/**
+ * 触摸点
+ */
+export interface TouchPoint {
+  /**
+   * 触点相对于视口的 X 坐标
+   */
+  clientX?: number
+  /**
+   * 触点相对于视口的 Y 坐标
+   */
+  clientY?: number
+  /**
+   * 触点相对于文档的 X 坐标
+   */
+  pageX?: number
+  /**
+   * 触点相对于文档的 Y 坐标
+   */
+  pageY?: number
+  /**
+   * 触点相对于屏幕的 X 坐标
+   */
+  x?: number
+  /**
+   * 触点相对于屏幕的 Y 坐标
+   */
+  y?: number
+}
+
+/**
+ * 触摸事件
+ */
+export interface TouchEvent {
+  /**
+   * 当前触点列表
+   */
+  touches?: TouchPoint[]
+  /**
+   * 变化后的触点列表
+   */
+  changedTouches?: TouchPoint[]
+}
+
+export const voicePlayerProps = {
+  ...baseProps,
+
+  /**
+   * 音频地址
+   */
+  src: makeStringProp(''),
+
+  /**
+   * 标题
+   */
+  title: makeStringProp(''),
+
+  /**
+   * 歌手
+   */
+  artist: makeStringProp(''),
+
+  /**
+   * 专辑
+   */
+  album: makeStringProp(''),
+
+  /**
+   * 封面
+   */
+  cover: makeStringProp(''),
+
+  /**
+   * 是否循环播放
+   */
+  loop: makeBooleanProp(false),
+
+  /**
+   * 音量
+   */
+  volume: makeNumericProp(1),
+
+  /**
+   * 播放列表
+   */
+  playlist: {
+    type: Array as PropType<VoicePlayerSongInfo[]>,
+    default: () => []
+  },
+
+  /**
+   * 播放模式
+   */
+  playMode: makeStringProp<VoicePlayerMode>('list'),
+
+  /**
+   * 主题
+   */
+  theme: makeStringProp<VoicePlayerTheme>('light'),
+
+  /**
+   * 是否显示封面
+   */
+  showCover: makeBooleanProp(true),
+
+  /**
+   * 是否显示信息
+   */
+  showInfo: makeBooleanProp(true),
+
+  /**
+   * 是否显示进度条
+   */
+  showProgress: makeBooleanProp(true),
+
+  /**
+   * 是否显示上一首/下一首按钮
+   */
+  showPrevNext: makeBooleanProp(true),
+
+  /**
+   * 额外控制按钮
+   */
+  extraControls: {
+    type: Array as PropType<VoicePlayerExtraControl[]>,
+    default: () => []
+  },
+
+  /**
+   * 是否显示歌词
+   */
+  showLyrics: makeBooleanProp(false),
+
+  /**
+   * 歌词
+   */
+  lyrics: {
+    type: Array as PropType<VoicePlayerLyricLine[]>,
+    default: () => []
+  },
+
+  /**
+   * 是否显示翻译
+   */
+  showTranslation: makeBooleanProp(false),
+
+  /**
+   * 视图模式
+   */
+  viewMode: makeStringProp<VoicePlayerViewMode>('normal'),
+
+  /**
+   * 是否启用旋转
+   */
+  enableRotation: makeBooleanProp(true),
+
+  /**
+   * 是否可以跳转
+   */
+  canSeek: makeBooleanProp(true),
+
+  /**
+   * 默认封面
+   */
+  defaultCover: makeStringProp('')
+}
+
+/**
+ * 语音播放器事件
+ */
+export type VoicePlayerEmits = {
+  /**
+   * 播放事件
+   */
+  play: []
+  /**
+   * 暂停事件
+   */
+  pause: []
+  /**
+   * 停止事件
+   */
+  stop: []
+  /**
+   * 播放结束事件
+   */
+  ended: []
+  /**
+   * 可以播放事件
+   */
+  canplay: [event: { duration: number }]
+  /**
+   * 时间更新事件
+   */
+  timeupdate: [event: VoicePlayerTimeUpdateEvent]
+  /**
+   * 上一首事件
+   */
+  prev: [event: VoicePlayerSongChangeEvent | null]
+  /**
+   * 下一首事件
+   */
+  next: [event: VoicePlayerSongChangeEvent | null]
+  /**
+   * 歌曲切换事件
+   */
+  'song-change': [event: VoicePlayerSongChangeEvent | null]
+  /**
+   * 播放模式变化事件
+   */
+  'play-mode-change': [mode: VoicePlayerMode]
+  /**
+   * 视图模式变化事件
+   */
+  'mode-change': [mode: VoicePlayerViewMode]
+  /**
+   * 音量变化事件
+   */
+  'volume-change': [vol: number]
+  /**
+   * 收藏变化事件
+   */
+  'favorite-change': [isFavorited: boolean, song?: VoicePlayerSongInfo]
+  /**
+   * 跳转事件
+   */
+  seek: [event: VoicePlayerSeekEvent]
+  /**
+   * 封面错误事件
+   */
+  'cover-error': []
+  /**
+   * 错误事件
+   */
+  error: [event: VoicePlayerErrorEvent]
+}
+
+/**
+ * 语音播放器暴露方法
+ */
+export type VoicePlayerExpose = {
+  /**
+   * 播放
+   */
+  play: () => void
+  /**
+   * 暂停
+   */
+  pause: () => void
+  /**
+   * 停止
+   */
+  stop: () => void
+  /**
+   * 跳转到指定时间
+   */
+  seek: (time: number) => void
+  /**
+   * 设置音量
+   */
+  setVolume: (volume: number) => void
+  /**
+   * 上一首
+   */
+  prev: () => void
+  /**
+   * 下一首
+   */
+  next: () => void
+  /**
+   * 切换到指定歌曲
+   */
+  switchToSong: (index: number) => void
+  /**
+   * 获取播放状态
+   */
+  getPlayState: () => {
+    /**
+     * 是否正在播放
+     */
+    isPlaying: boolean
+    /**
+     * 当前播放时间
+     */
+    currentTime: number
+    /**
+     * 总时长
+     */
+    duration: number
+    /**
+     * 当前歌曲
+     */
+    currentSong: VoicePlayerSongInfo | null
+  }
+}
+
+export type VoicePlayerProps = ExtractPropTypes<typeof voicePlayerProps>
+
+export type VoicePlayerInstance = ComponentPublicInstance<VoicePlayerProps, VoicePlayerExpose>

package/components/oxy-waterfall/index.scss

@@ -0,0 +1,18 @@
+@import '../common/abstracts/variable';
+@import '../common/abstracts/mixin';
+
+@include b(waterfall) {
+  overflow: hidden;
+  @include e(wrapper) {
+    height: 100%;
+    overflow: hidden;
+  }
+  @include e(container) {
+    display: flex;
+    flex-direction: row;
+    overflow: hidden;
+  }
+  @include e(column) {
+    flex: 1;
+  }
+}