tencent.jquery.pix.component 1.0.53 → 1.0.61

package/components/banner/banner.js

@@ -24,6 +24,9 @@ export function Banner(options = {}){
     this.options.durationMs = Number(options.durationMs || 0) || 0;
     this.options.dragThreshold = Number(options.dragThreshold || 0.2) || 0.2;
     this.index = Number(options.index || 0) || 0;
+    if (typeof options.renderCallback === 'function') {
+        this.options.isTitleEnabled = false;
+    }
     this.init();
 }
 
@@ -148,6 +151,9 @@ Banner.prototype.startAutoPlay = function() {
 }
 
 Banner.prototype.pauseAutoPlay = function() {
+    if (this.timer == null) {
+        return;
+    }
     clearInterval(this.timer);
     this.timer = null;
 }
@@ -442,6 +448,7 @@ Banner.prototype.loadBackground = function (pos) {
 }
 
 Banner.prototype.remove = function () {
+    this.pauseAutoPlay();
     $(this.options.container).empty();
     removeResizeFunc({
         obj: this,

package/components/video/videoplayer.js

@@ -2,6 +2,11 @@ import { $, windowEnv } from "../config";
 import VideoHTML from "./videohtml";
 import './videocss.scss'
 
+/**
+ * @typedef {"play" | "pause" | "stop" | "enterFullScreen" | "exitFullScreen"} VideoPlayerState
+ * 视频播放器状态
+ */
+
 /**
  * 在页面上放置一个视频播放器组件（腾讯视频）
  * @constructor
@@ -12,9 +17,14 @@ import './videocss.scss'
  * @param {0|1} [options.videoType=1] 视频类型选项，0: 标清，1: 高清
  * @param {number} [options.autoHideControlsDelayMs=5000] 自动隐藏控制条延迟时间，单位ms
  * @param {boolean} [options.showProgressBar=true] 是否显示进度条
+ * @param {boolean} [options.clickToPause=false] 点击播放区域是否直接暂停，true: 直接暂停，false: 先展示控制条
+ * @param {(this: VideoPlayer, type: VideoPlayerState) => any} [options.stateChanged] 状态变化回调
  */
 export function VideoPlayer(options) {
     this.options = options
+    if (typeof this.options.stateChanged !== 'function') {
+        this.options.stateChanged = () => {};
+    }
     this.init()
 }
 
@@ -38,6 +48,7 @@ VideoPlayer.prototype.init = async function() {
         videoType: 1,
         autoHideControlsDelayMs: 5000,
         showProgressBar: true,
+        clickToPause: false,
         ...this.options
     }
 
@@ -48,7 +59,8 @@ VideoPlayer.prototype.init = async function() {
         playing: false,
         controlsVisible: false,
         updatingProgress: false,
-        controlsDelayStart: 0
+        controlsDelayStart: 0,
+        firstPlay: true,
     }
 
     // 根据showProgressBar选项控制进度条显示
@@ -63,8 +75,6 @@ VideoPlayer.prototype.bindEvent = function() {
     const container = this.$container;
     container.off()
         .on('click', '.myplayer-video-cover', () => {
-            container.find('.myplayer-video-cover,.myplayer-video-preview').remove();
-            this.updateTotalTime();
             this.play();
         })
         .on('click', '.myplayer-video-mask', () => {
@@ -90,6 +100,10 @@ VideoPlayer.prototype.bindEvent = function() {
     // 只有在显示进度条时才绑定进度条相关事件
     if (this.options.showProgressBar) {
         container
+            .on('dragstart', () => { console.log('video container dragstart') }, true)
+            .on('drag', () => { console.log('video container drag') }, true)
+            .on('dragend', () => { console.log('video container dragend') }, true)
+            .on('click', () => { console.log('video container click') }, true)
             .on('dragstart', '.myplayer-progress', (e) => {
                 if (e.originalEvent) {
                     this.progressDragStart(e.originalEvent);
@@ -122,6 +136,11 @@ VideoPlayer.prototype.bindEvent = function() {
 }
 
 VideoPlayer.prototype.play = function() {
+    if (this.state.firstPlay) {
+        this.state.firstPlay = false;
+        this.$container.find('.myplayer-video-cover,.myplayer-video-preview').hide();
+        this.updateTotalTime();
+    }
     const video = this.$container.find('video')[0];
     video.play();
     this.state.playing = true;
@@ -131,9 +150,11 @@ VideoPlayer.prototype.play = function() {
     this.$container.find('.myplayer-progress').css('transform', 'none');
     this.startUpdatingProgress();
     this.hideControlsWithDelay();
+    this.options.stateChanged.call(this, 'play');
 }
 
 VideoPlayer.prototype.pause = function() {
+    this.showControls();
     const video = this.$container.find('video')[0];
     video.pause();
     this.state.playing = false;
@@ -142,9 +163,26 @@ VideoPlayer.prototype.pause = function() {
     this.$container.find('.myplayer-btn-pause').hide();
     this.$container.find('.myplayer-progress').css('transform', 'scaleY(2)');
     this.state.controlsDelayStart = Date.now();
+    this.options.stateChanged.call(this, 'pause');
+}
+
+VideoPlayer.prototype.stop = function() {
+    const video = this.$container.find('video')[0];
+    video.pause();
+    video.currentTime = 0;
+    this.state.playing = false;
+    this.$container.find('.myplayer-btn-play').show();
+    this.$container.find('.myplayer-btn-big-play').removeClass('myplayer-transparent');
+    this.$container.find('.myplayer-btn-pause').hide();
+    this.$container.find('.myplayer-progress').css('transform', 'scaleY(2)');
+    this.state.controlsDelayStart = Date.now();
+    this.$container.find('.myplayer-video-cover,.myplayer-video-preview').show();
+    this.state.firstPlay = true;
+    this.options.stateChanged.call(this, 'stop');
 }
 
 VideoPlayer.prototype.maskClicked = function() {
+    console.log('maskClicked')
     if (this.state.controlsVisible === true) {
         if (this.state.playing === true) {
             this.pause();
@@ -152,7 +190,13 @@ VideoPlayer.prototype.maskClicked = function() {
             this.play();
         }
     } else {
-        this.showControls();
+        if (this.options.clickToPause && this.state.playing === true) {
+            // 如果配置了点击直接暂停，且正在播放，则直接暂停
+            this.pause();
+        } else {
+            // 否则先展示控制条
+            this.showControls();
+        }
     }
 }
 
@@ -230,11 +274,37 @@ VideoPlayer.prototype.toggleFullScreen = function() {
         bottom.removeClass('myplayer-full-screen');
         fullScreenBtn.show();
         exitFullScreenBtn.hide();
+        this.options.stateChanged.call(this, 'exitFullScreen');
     } else {
         innerContainer.addClass('myplayer-full-screen');
         bottom.addClass('myplayer-full-screen');
         fullScreenBtn.hide();
         exitFullScreenBtn.show();
+        this.options.stateChanged.call(this, 'enterFullScreen');
+    }
+
+    this.hideControlsWithDelay();
+}
+
+VideoPlayer.prototype.setFullScreen = function (target = true) {
+    const $container = this.$container;
+    const fullScreenBtn = $container.find('.myplayer-btn-full-screen');
+    const exitFullScreenBtn = $container.find('.myplayer-btn-exit-full-screen');
+    const bottom = $container.find('.myplayer-bottom');
+    const innerContainer = $container.find('.myplayer-container');
+
+    if (!target && innerContainer.hasClass('myplayer-full-screen')) {
+        innerContainer.removeClass('myplayer-full-screen');
+        bottom.removeClass('myplayer-full-screen');
+        fullScreenBtn.show();
+        exitFullScreenBtn.hide();
+        this.options.stateChanged.call(this, 'exitFullScreen');
+    } else if (target && !innerContainer.hasClass('myplayer-full-screen')) {
+        innerContainer.addClass('myplayer-full-screen');
+        bottom.addClass('myplayer-full-screen');
+        fullScreenBtn.hide();
+        exitFullScreenBtn.show();
+        this.options.stateChanged.call(this, 'enterFullScreen');
     }
 
     this.hideControlsWithDelay();

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "tencent.jquery.pix.component",
-  "version": "1.0.53",
+  "version": "1.0.61",
   "description": "",
   "main": "index.js",
   "files": [