vhall-mini-sdk 0.1.0 → 0.1.1

package/dist/components/player/extensions/methods.js

@@ -1,406 +0,0 @@
-import { getUnixTimeMs, getCurrentTimeZoneOffset, convertTimeZone } from '../../../shared/dateUtil'
-import { safeJsonParse } from '../../../shared/utils'
-
-export function createMethods() {
-  return {
-    async initVhallPlayer(option) {
-      this.vhallPlayerCore.init(
-        Object.assign({}, option, {
-          componetVersion: this.data.componetVersion,
-          defaultDefinition: this.data.defaultDefinition,
-        })
-      );
-      const data = await this.vhallPlayerCore.initVhallPlayer();
-      this.setData(data);
-    },
-
-    async initVhallyun() {
-      if (this.data.type == 'live') {
-        try {
-          const livePlayInfo = await this.vhallPlayerCore.initVhallyunLive();
-          this.setData({
-            videoSrc: livePlayInfo.videoSrc,
-            qualitys: livePlayInfo.qualitys,
-            currentQuality: livePlayInfo.currentQuality,
-            subtitles: livePlayInfo.subtitles,
-            currentSubtitle: livePlayInfo.currentSubtitle,
-          });
-          this.triggerEvent('ready', null);
-        } catch (e) {
-          console.error(e);
-        }
-      } else if (this.data.type == 'vod') {
-        try {
-          const vodPlayInfo = await this.vhallPlayerCore.initVhallyunVod();
-          this.setData({
-            videoSrc: vodPlayInfo.videoSrc,
-            qualitys: vodPlayInfo.qualitys,
-            currentQuality: vodPlayInfo.currentQuality,
-          });
-          this.triggerEvent('ready', null);
-        } catch (e) {
-          console.error(e);
-        }
-      } else {
-        this.triggerEvent('ready', null);
-        console.warn('当前活动状态不支持播放');
-      }
-    },
-
-    getVideoSrc(quality, subtitle) {
-      return this.vhallPlayerCore.getVideoSrc(quality, subtitle);
-    },
-
-    onToggleControls() {
-      const controlsHiddenFlag = this.data.controlsHiddenFlag;
-      this.setData({
-        controlsHiddenFlag: !controlsHiddenFlag,
-      });
-    },
-
-    /**
-     * 控制栏 - 播放/暂停按钮
-     */
-    handleControlsPlayPause() {
-      const playStatus = this.data.playStatus;
-      if (playStatus == 'playing') {
-        this.pause();
-        // this.setData({
-        //   playStatus: "paused",
-        //   pausedFlag: true,
-        // });
-      } else {
-        this.play();
-        if (this.data.type == 'live') {
-          this.resume();
-        }
-        // this.setData({
-        //   playStatus: "playing",
-        //   pausedFlag: false,
-        // });
-      }
-    },
-    /**
-     * 控制栏 - 重新播放按钮
-     */
-    handleControlsReplay() {
-      // this.playerMain.stop();
-      // this.playerMain.play();
-      this.replay();
-    },
-    /**
-     * 控制栏 - 静音按钮
-     */
-    handleControlsMute() {
-      this.setData({
-        muted: !this.data.muted,
-      });
-    },
-    /**
-     * 控制栏 - 全屏按钮
-     */
-    handleControlsFullScreen() {
-      const fullscreenFlag = this.data.fullscreenFlag;
-      if (fullscreenFlag) {
-        this.exitFullScreen();
-      } else {
-        this.requestFullScreen({
-          direction: 90,
-        });
-      }
-    },
-    /**
-     * 控制栏 - 切换清晰度
-     * @param {*} e
-     */
-    handleControlsSetQuality(e) {
-      const quality = e.detail;
-      this.setCurrentQuality(quality);
-    },
-    /**
-     * error组件，点击重试
-     */
-    handleErrorAndRetry() {
-      console.log('error组件，点击重试');
-      this.setData({
-        showLoading: true,
-        showError: false,
-      });
-      this.replay();
-    },
-
-    /**
-     * 全屏变化事件
-     * 对外事件名： fullscreenchange
-     * 事件参数：{fullScreen: true/false}
-     */
-    onfullscreenchange(e) {
-      console.log('fullscreenchange事件:', e.detail);
-      this.triggerEvent('fullscreenchange', e.detail);
-      this.setData({
-        fullscreenFlag: e.detail.fullScreen,
-      });
-    },
-    /**
-     * 小窗模式变化事件
-     * 对外事件名： pictureinpicturechange
-     * 事件参数：{pictureInPicture: true/false}
-     */
-    onpictureinpicturechange(e) {
-      console.log('pictureinpicturechange事件:', e.detail);
-      this.triggerEvent('pictureinpicturechange', e.detail);
-    },
-    /**
-     * 播放进度变化事件（仅点播）
-     * 对外事件名： vodtimeupdate
-     * 事件参数：{currentTime: number, duration: number}
-     */
-    ontimeupdate(e) {
-      const currentTime = e.detail.currentTime;
-      this.setData({
-        showLoading: false,
-        currentVodPlayTime: currentTime,
-      });
-      this.triggerEvent('currentvodplaytime', { currentTime });
-    },
-    /**
-     * 播放事件
-     * @param {*} e
-     */
-    onplay(e) {
-      console.log(`播放play事件：`, e);
-      this.triggerEvent('play', e.detail);
-      this.setData({
-        playStatus: 'playing',
-        pausedFlag: false,
-        showLoading: false,
-        showError: false,
-        showPoster: false,
-      });
-    },
-    /**
-     * 暂停事件
-     * @param {*} e
-     */
-    onpause(e) {
-      console.log(`暂停pause事件：`, e.detail);
-      this.triggerEvent('pause', e.detail);
-      this.setData({
-        playStatus: 'paused',
-        pausedFlag: true,
-      });
-    },
-    /**
-     * 结束事件（仅点播）
-     * @param {*} e
-     */
-    onended(e) {
-      console.log(`播放ended事件：`, e.detail);
-      this.triggerEvent('ended', e.detail);
-    },
-    /**
-     * loadedmetadata事件（仅点播）
-     * @param {*} e
-     */
-    onloadedmetadata(e) {
-      console.log(`播放loadedmetadata事件：`, e.detail);
-      this.triggerEvent('loadedmetadata', e.detail);
-      const { duration, width, height } = e.detail;
-      this.setData({
-        vodDuration: duration,
-      });
-    },
-    /**
-     * error事件
-     * @param {*} e
-     */
-    onerror(e) {
-      console.log(`播放error事件：`, e.detail);
-      this.triggerEvent('error', e.detail);
-      this.setData({
-        showError: true,
-        showLoading: false,
-      });
-    },
-    /**
-     * 加载事件
-     * @param {*} e
-     */
-    onwaiting(e) {
-      console.log(`播放waiting事件：`, e.detail);
-      this.triggerEvent('waiting', e.detail);
-      this.setData({
-        showLoading: true,
-      });
-    },
-    /**
-     * 开始连接事件（仅直播）
-     * @param {*} e
-     */
-    onloadStart(e) {
-      this.setData({
-        showLoading: true,
-      });
-    },
-    /**
-     * 自动重连事件（仅直播）
-     * @param {*} e
-     */
-    onreconnecting(e) {
-      this.triggerEvent('reconnecting', e.detail);
-    },
-    startWatchExpire(info) {
-      if (!info) return;
-      const webinar = this.sdkInstance.store.get('watchInitData.webinar');
-      if (webinar && (webinar.type == 4 || webinar.type == 5)) {
-        // 点播或回放
-        const expireObj = typeof info === 'string' ? JSON.parse(info) : info;
-        if (expireObj && expireObj?.status == 1) {
-          let currentZoneSystemTime = null
-          if (expireObj.system_time) {
-            const bjSysT = (expireObj.system_time || '').replace(/-/g, '/'); // 消息返回的是 当前服务器北京时间
-            // 将北京时间转换成当前时区时间
-            const currentZoneOffset = getCurrentTimeZoneOffset();
-            currentZoneSystemTime = convertTimeZone(getUnixTimeMs(bjSysT), 8, currentZoneOffset);
-          }
-          this.setData({
-            recordWatchExpireObj: {
-              status: expireObj.status, //回放有效期开关 1: 开启  0: 关闭
-              type: expireObj.type, //类型：1.全天，2.部分时段
-              start_date: (expireObj.start_date || '').replace(/-/g, '/'), //开始日期 2024-06-10 00:00:00  type=1时此项必填，格式为 yyyy-MM-dd HH:mm:ss；type=2时此项非必填，格式为 yyyy-MM-dd
-              end_date: (expireObj.end_date || '').replace(/-/g, '/'), //结束日期 2024-06-28 23:59:59  同上
-              start_time: (expireObj.start_time || '').replace(/-/g, '/'), //开始时间 08:10:00  type=2时此项必填，type=1时不接收此值
-              end_time: (expireObj.end_time || '').replace(/-/g, '/'), //结束时间 09:10:00  同上
-              currentZoneSystemTime
-            }
-          })
-          console.log('this.recordWatchExpireObj:', this.data.recordWatchExpireObj)
-          this.clearVhDepClientDateTimeInternalTask();
-          this.handleVhDepClientDateTime();
-        } else {
-          this.clearVhDepClientDateTimeInternalTask();
-        }
-      }
-    },
-    clearVhDepClientDateTimeInternalTask() {
-      if (this.vh_dep_client_date_time_intervalId) {
-        clearInterval(this.vh_dep_client_date_time_intervalId);
-        this.vh_dep_client_date_time_intervalId = null;
-      }
-    },
-    handleVhDepClientDateTime() {
-      const watchInitData = this.sdkInstance.store.get('watchInitData');
-      // console.log('watchInitData:', watchInitData)
-      const webinar = watchInitData?.webinar;
-      if (webinar && (webinar.type == 4 || webinar.type == 5) && this.data.recordWatchExpireObj.status == 1) {
-        // 优先级：消息返回服务器时间 > 页面加载返回的服务器时间 > 当前客户端时间
-        const currentZoneSystemTime = this.data.recordWatchExpireObj.currentZoneSystemTime || (watchInitData?.system_time || '').replace(/-/g, '/');
-        if (!currentZoneSystemTime) return;
-        this.vh_dep_client_date_time = new Date(currentZoneSystemTime);
-        // console.log('this.vh_dep_client_date_time:', this.vh_dep_client_date_time)
-        // 使用setInterval每秒调用incrementTime函数
-        this.vh_dep_client_date_time_intervalId = setInterval(() => {
-          // 使用Date对象的setSeconds方法来增加一
-          this.vh_dep_client_date_time.setSeconds(this.vh_dep_client_date_time.getSeconds() + 1);
-          if (this.data.playStatus === 'playing' && !this.checkPlaybackExpiredDateTime()) {
-            this.pause();
-            // 展示提示弹窗
-            this.sdkInstance.emit(this.sdkInstance.EVENT.RECORD_WATCH_EXPIRE_ALERT)
-            this.clearVhDepClientDateTimeInternalTask();
-          }
-          // 打印更新后的时间
-          // console.log(
-          //   'handleVhDepClientDateTime vh_dep_client_date_time: ',
-          //   this.vh_dep_client_date_time.toLocaleTimeString()
-          // );
-        }, 1000);
-      }
-    },
-    checkPlaybackExpiredDateTime() {
-      if (this.data.type === 'vod' && this.data.recordWatchExpireObj.status == 1) {
-        const record_watch_expire = this.data.recordWatchExpireObj;
-        if (this.data.recordWatchExpireObj?.type == 1) {
-          // 全天时段
-          // console.log(`全天时段 范围：${this.data.recordWatchExpireObj?.start_date} - ${this.data.recordWatchExpireObj?.end_date}`)
-          if (this.data.recordWatchExpireObj?.start_date && this.data.recordWatchExpireObj?.end_date) {
-            const currentDate = new Date(this.vh_dep_client_date_time);
-            const start_date = new Date(this.data.recordWatchExpireObj.start_date);
-            const end_date = new Date(this.data.recordWatchExpireObj.end_date);
-            if (!(currentDate.getTime() >= start_date.getTime() && currentDate.getTime() <= end_date.getTime())) {
-              return false;
-            }
-          } else {
-            // 未配置开始日期和结束日期，不做有效期校验
-            return true;
-          }
-        } else if (this.data.recordWatchExpireObj?.type == 2) {
-          // 部分时段
-          if (record_watch_expire?.start_time && record_watch_expire?.end_time) {
-            if (record_watch_expire?.start_date && record_watch_expire?.end_date) {
-              // 部分时段，配置了 开始日期、结束日期、开始时间、结束时间
-              const currentDate = new Date(this.vh_dep_client_date_time);
-              const newStartDate = record_watch_expire.start_date.split(' ')[0] + ' ' + record_watch_expire.start_time;
-              const start_date = new Date(newStartDate);
-              const newEndDate = record_watch_expire.end_date.split(' ')[0] + ' ' + record_watch_expire.end_time;
-              const end_date = new Date(newEndDate);
-              if (!(currentDate.getTime() >= start_date.getTime() && currentDate.getTime() <= end_date.getTime())) {
-                // console.log(`部分时段 currentDate 不在 start_date 和 end_date 范围内 currentDate:${currentDate} start_date:${start_date} end_date:${end_date}`);
-                return false;
-              } else {
-                // console.log('部分时段 currentDate 在 start_date 和 end_date 范围内');
-              }
-            } else {
-              // 部分时段，仅配置了 开始时间、结束时间
-              const currentDate = new Date(this.vh_dep_client_date_time);
-              let year = currentDate.getFullYear();
-              let month = currentDate.getMonth() + 1;
-              let date = currentDate.getDate();
-              const start_date = new Date(`${year}/${month}/${date} ${record_watch_expire.start_time}`);
-              const end_date = new Date(`${year}/${month}/${date} ${record_watch_expire.end_time}`);
-              if (!(currentDate.getTime() >= start_date.getTime() && currentDate.getTime() <= end_date.getTime())) {
-                // console.log(`部分时段，仅配置了 开始时间、结束时间 currentDate 不在 start_date 和 end_date 范围内   currentDate:${currentDate} start_date:${start_date} end_date:${end_date}`);
-                return false;
-              } else {
-                // console.log('部分时段，仅配置了 开始时间、结束时间 currentDate 在 start_date 和 end_date 范围内');
-              }
-            }
-          }
-        }
-      }
-      return true
-    },
-
-    // 检查在线人数和热度是否示
-    setHot(scence, msg) {
-      if (scence === 'join') {
-        // 上线
-        const msgContext = safeJsonParse(msg.context);
-        this.setData({
-          personValue: msg.uv,
-          hotValue: msgContext.pv >= this.data.hotValue ? msgContext.pv + 1 : this.data.hotValue
-        })
-      } else if (scence === 'leave') {
-        // 下线
-        this.setData({
-          personValue: msg.uv
-        })
-      } else {
-        // 初始化
-        const liveInfo = this.sdkInstance.store.get('liveInfo');
-        const watchInitData = this.sdkInstance.store.get('watchInitData');
-        // 非预约 + 开关显示
-        const showPerson = liveInfo?.status != 2 && !!watchInitData?.online?.show;
-        const showHot = liveInfo?.status != 2 && !!watchInitData?.pv?.show;
-        this.setData({
-          showPerson,
-          personValue: 1,
-          showHot,
-          hotValue: watchInitData.pv.num2 ?? watchInitData.pv.real
-        })
-      }
-    },
-    destroy() {
-      this.vhallPlayerCore?.destroy();
-    }
-  };
-}

package/dist/components/player/extensions/observers.js

@@ -1,114 +0,0 @@
-export function createObservers() {
-  return {
-    sdkInstance(_sdkInstance) {
-      if (!_sdkInstance) return;
-      this.sdkInstance = _sdkInstance;
-      this.store = _sdkInstance.store;
-      const _that = this;
-      this.unsub = this.store.get({
-        liveInfo: function (liveInfo) {
-          _that.setData({
-            liveInfo,
-          });
-          const options = _that.store.get('');
-          // console.log('liveInfo:', JSON.stringify(options));
-          _that.initVhallPlayer(options);
-          _that.setHot();
-        },
-        'liveInfo.status': (status) => {
-          _that.setData({
-            ['liveInfo.status']: status,
-          });
-          _that.setHot();
-          // 直播结束
-          if (status === 3) {
-            _that.destroy();
-          }
-        },
-        permissionValue: function (_permissionValue) {
-          if (_permissionValue.record_watch_expire) {
-            _that.startWatchExpire(_permissionValue.record_watch_expire);
-          }
-        },
-      });
-
-      this.unlistener && this.unlistener();
-      const obj = {
-        // 回放有效期校验
-        [this.sdkInstance.EVENT.RECORD_WATCH_EXPIRE_SET]: (msgData) => {
-          this.startWatchExpire(msgData?.msg_data);
-        },
-        // 上线消息
-        [this.sdkInstance.EVENT.JOIN_MSG]: (msg) => {
-          this.setHot('join', msg);
-        },
-        // 下线消息
-        [this.sdkInstance.EVENT.LEAVE_MSG]: (msg) => {
-          this.setHot('leave', msg);
-        },
-      };
-
-      this.unlistener = this.sdkInstance.on(obj);
-    },
-    checkPlaybackExpiredDateTime() {},
-    autoplay(autoplay) {
-      if (!autoplay) {
-        this.setData({
-          playStatus: 'paused',
-          // pausedFlag: true,
-        });
-      }
-    },
-    'type, paasAppId, paasRoomId, paasVodId': function (type, paasAppId, paasRoomId, paasVodId) {
-      this.initVhallyun();
-    },
-    muted: function (muted) {
-      this.setData({
-        mutedFlag: muted,
-      });
-    },
-    'watermarkOption.**': function (watermarkOption) {
-      if (watermarkOption.enable) {
-        this.setData({
-          showWatermark: true,
-        });
-      }
-    },
-    'marqueeOption.**': function (marqueeOption) {
-      if (marqueeOption.enable) {
-        this.setData({
-          showMarquee: true,
-        });
-      }
-    },
-    // 封面图片
-    'posterOption.**': function (option) {
-      const { enable, url } = option;
-      if (enable && url.length > 0) {
-        this.setData({
-          showPoster: true,
-          posterUrl: url,
-        });
-      }
-    },
-    audioMode: function (audioMode) {
-      this.setData({
-        showAudioCover: audioMode,
-      });
-    },
-    currentQuality: function (currentQuality) {
-      if (!this.data.audioMode && currentQuality) {
-        this.setData({
-          showAudioCover: Boolean(currentQuality == 'a'),
-        });
-      }
-    },
-    verticalMode: function (verticalMode) {
-      // this.setData({
-      //   _style: verticalMode
-      //     ? 'height: calc(100vw * 16 / 9)'
-      //     : 'height: calc(100vw * 9 / 16)',
-      // });
-    },
-  };
-}

package/dist/components/player/extensions/props.js

@@ -1,162 +0,0 @@
-const DEFAULT_QUALITY_ALIAS = {
-  'same': '原画',
-  'origin': '原画质',
-  '720p': '超清',
-  '720sp': '超清',
-  '480p': '高清',
-  '480sp': '高清',
-  '360p': '标清',
-  '360sp': '标清',
-  'a': '音频'
-}
-
-export const props = {
-  sdkInstance: {
-    type: Object,
-    value: {},
-  },
-  uid: {
-    type: String,
-    value: undefined,
-  },
-  type: {
-    type: String,
-    value: 'unknown',
-  },
-  paasAppId: {
-    type: String,
-    value: undefined,
-  },
-  paasRoomId: {
-    type: String,
-    value: undefined,
-  },
-  paasVodId: {
-    type: String,
-    value: undefined,
-  },
-  paasAccessToken: {
-    type: String,
-    value: undefined,
-  },
-  defaultDefinition: {
-    type: String,
-    value: '480p',
-  },
-  autoplay: {
-    type: Boolean,
-    value: true,
-  },
-  showProgress: {
-    type: Boolean,
-    value: false,
-  },
-  audioMode: {
-    type: Boolean,
-    value: false,
-  },
-  verticalMode: {
-    type: Boolean,
-    value: false,
-  },
-  /**
-   * 填充模式：
-   * contain: 比例不变，图像长边填满屏幕，短边区域会被填充⿊⾊
-   * fillCrop: 比例不变，图像铺满屏幕，超出显示区域的部分将被截掉
-   * fill: 不保证保持原有的比例，内容拉伸填充整个内容容器
-   */
-  objectFit: {
-    type: String,
-    value: 'contain',
-  },
-  ignores: {
-    type: Array,
-    value: [],
-  },
-
-  liveDelayMode: {
-    type: String,
-    value: 'live',
-  },
-
-  muted: {
-    type: Boolean,
-    value: false,
-  },
-
-  controls: {
-    type: Boolean,
-    value: true,
-  },
-  loop: {
-    type: Boolean,
-    value: false
-  },
-  /**
-   * 指定初始播放进度（仅点播）
-   */
-  initialSeekTime: Number,
-
-  pictureInPictureMode: {
-    type: Array,
-    value: [],
-  },
-  // 水印配置
-  watermarkOption: {
-    type: Object,
-    value: {
-      enable: false, // 是否启用, 默认false
-      url: undefined, // 水印图片的路径
-      align: 'tr', // 水印图片的对其方式， tl | tr | bl | br 分别对应：左上，右上，左下，右下
-      position: ['0px', '0px'], // 对应的横纵位置，支持px,vh,vw,%
-      size: ['0px', '0px'], // 水印大小，支持px,vh,vw,%
-      alpha: 100, // 水印透明度 100完全显示  0隐藏
-    },
-  },
-  // 封面配置
-  posterOption: {
-    type: Object,
-    value: {
-      enable: false, // 是否启用, 默认false
-      url: undefined, // 封面图片的路径
-    },
-  },
-  // 跑马灯配置
-  marqueeOption: {
-    type: Object,
-    value: {},
-  },
-  // 点播打点配置
-  markPointsOption: {
-    type: Object,
-    value: {
-      enable: false, // 是否启用, 默认false
-    },
-  },
-  // 弹幕配置
-  danmakuOption: {
-    type: Object,
-    value: {
-      enable: false, // 是否启用, 默认false
-    },
-  },
-  // 直播字幕配置
-  liveSubtitleOption: {
-    type: Object,
-    value: {
-      enable: false, // 是否启用, 默认false
-    },
-  },
-  // 异常切线配置
-  thornOption: {
-    type: Object,
-    value: {
-      enable: false, // 是否启用, 默认false
-    },
-  },
-  // 清晰度对应显示词
-  qualityAlias: {
-    type: Object,
-    value: DEFAULT_QUALITY_ALIAS,
-  },
-};