tencent.jquery.pix.component 1.0.74 → 1.0.76

package/components/video/videocss.scss

@@ -1,3 +1,6 @@
+$jqpix-video-progress-bold-scale: 2 !default;
+$jqpix-video-primary-color: #ff6429 !default;
+
 .myplayer-shrink1 {
   flex-shrink: 1;
 }
@@ -239,6 +242,10 @@
   flex-grow: 1;
   border-radius: 0.06rem;
   margin-top: 0.03rem;
+
+  &.myplayer-progress-bold {
+    transform: scaleY($jqpix-video-progress-bold-scale);
+  }
 }
 
 .myplayer-container .myplayer-progress-bg,
@@ -258,7 +265,7 @@
 
 .myplayer-container .myplayer-subprogress {
   width: 0;
-  background-color: #ff6429;
+  background-color: $jqpix-video-primary-color;
   /*transition: width 1s linear;*/
   max-width: 100%;
 }
@@ -396,7 +403,7 @@
 }
 
 .myplayer-container .myplayer-volume-subline {
-  background-color: #ff6429;
+  background-color: $jqpix-video-primary-color;
 }
 
 .myplayer-container .myplayer-volume-subline div {
@@ -407,7 +414,7 @@
   left: 50%;
   top: -0.25rem;
   margin-left: -0.25rem;
-  background-color: #ff6429;
+  background-color: $jqpix-video-primary-color;
   border-radius: 0.25rem;
 }
 

package/components/video/videoplayer.js

@@ -227,7 +227,7 @@ VideoPlayer.prototype.play = function () {
     this.$container.find('.myplayer-btn-play').hide();
     this.$container.find('.myplayer-btn-big-play').addClass('myplayer-transparent');
     this.$container.find('.myplayer-btn-pause').show();
-    this.$container.find('.myplayer-progress').css('transform', 'none');
+    this.$container.find('.myplayer-progress').removeClass('myplayer-progress-bold');
     this.startUpdatingProgress();
     this.hideControlsWithDelay();
     this.options.stateChanged.call(this, 'play');
@@ -241,7 +241,7 @@ VideoPlayer.prototype.pause = function () {
     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.$container.find('.myplayer-progress').addClass('myplayer-progress-bold');
     this.state.controlsDelayStart = Date.now();
     this.options.stateChanged.call(this, 'pause');
 }
@@ -255,7 +255,7 @@ VideoPlayer.prototype.stop = function () {
     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.$container.find('.myplayer-progress').addClass('myplayer-progress-bold');
     this.state.controlsDelayStart = Date.now();
     this.$container.find('.myplayer-video-cover,.myplayer-video-preview').show();
     this.state.firstPlay = true;

package/package.json

@@ -1,11 +1,12 @@
 {
   "name": "tencent.jquery.pix.component",
-  "version": "1.0.74",
+  "version": "1.0.76",
   "description": "",
   "main": "index.js",
   "files": [
     "components",
-    "utils"
+    "utils",
+    "style"
   ],
   "scripts": {
     "test": "echo \"Error: no test specified\" && exit 1"

package/style/animation.scss

@@ -0,0 +1,40 @@
+@mixin define-fade-in-animation(
+  $name: 'fadeIn',
+  $start-x: 0px,
+  $start-y: 0px,
+  $mid-x: 0px,
+  $mid-y: 0px,
+  $end-x: 0px,
+  $end-y: 0px
+) {
+  @keyframes #{$name} {
+    0% {
+      opacity: 0;
+      transform: translate($start-x, $start-y);
+    }
+
+    25% {
+      transform: translate($mid-x, $mid-y);
+      opacity: 0;
+    }
+
+    100% {
+      opacity: 1;
+      transform: translate($end-x, $end-y);
+    }
+  }
+}
+
+@mixin apply-fade-in-animation(
+  $name: 'fadeIn',
+  $duration: 0.7s,
+  $timing-function: ease,
+  $fill-mode: both,
+  $delay: 0s
+) {
+  animation-name: #{$name};
+  animation-duration: $duration;
+  animation-timing-function: $timing-function;
+  animation-fill-mode: $fill-mode;
+  animation-delay: $delay;
+}