Merge branch 'iteration-upload-works'

src/components/m-img-code/index.tsx

@@ -82,7 +82,7 @@ export default defineComponent({
           hideLoading: true,
           data: {
             clientId: this.clientId,
-            type: 'REGISTER',
+            type: 'LOGIN',
             mobile: this.phone
           }
         });
@@ -95,7 +95,7 @@ export default defineComponent({
         this.code = '';
         setTimeout(() => {
           this.updateIdentifyingCode();
-        }, 500)
+        }, 500);
       }
     }
   },

src/components/m-video/index.module.less

@@ -1,7 +1,8 @@
 .video-container {
   position: relative;
   width: 100%;
-  --plyr-color-main: var(--k-primary);
+  --plyr-color-main: #FF8057;
+  height: 210px;
 
   video {
     width: 100%;
@@ -36,14 +37,20 @@
       background-color: transparent !important;
     }
 
-    .plyr--fullscreen-fallback {
-      height: 100% !important;
+    .video-js {
+      width: 100%;
+      height: 100%;
+    }
+
+    .tcp-skin .vjs-play-progress {
+      background-color: var(--van-primary) !important;
     }
   }
 
   .video {
     position: relative;
   }
+
 }
 
 .loadingVideo {
@@ -54,4 +61,41 @@
   right: 0;
   background: rgba(0, 0, 0, 0.9);
   z-index: 10;
+}
+
+.playOver {
+  background: rgba(0, 0, 0, 0.5);
+  color: #fff;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  flex-direction: column;
+
+  .tips {
+    font-size: 15px;
+    color: #ffffff;
+  }
+
+  .btn {
+    margin: 10px 0;
+    min-width: 94px;
+    font-size: 14px;
+    height: 28px;
+    line-height: 28px;
+  }
+
+  .replay {
+    padding-top: 12px;
+  }
+}
+
+.freeTxt {
+  font-size: 15px;
+  color: #ffffff;
+  line-height: 21px;
+  padding-top: 10px;
+}
+
+.freeRate {
+  color: #32ffd8;
 }

src/components/m-video/index.tsx

@@ -2,16 +2,23 @@ import { defineComponent, PropType } from 'vue';
 import styles from './index.module.less';
 import Plyr from 'plyr';
 import 'plyr/dist/plyr.css';
-import { Loading } from 'vant';
-import { browser } from '@/helpers/utils';
+import { Button, Icon, Loading, Toast } from 'vant';
+
+import TCPlayer from 'tcplayer.js';
+import 'tcplayer.js/dist/tcplayer.css';
+// import iconVideoPlay from '@/common/images/icon_video_play.png';
+// import { browser } from '@/helpers/utils';
 export default defineComponent({
-  name: 'm-video',
+  name: 'o-video',
   props: {
     setting: {
       type: Object,
-      default: () => ({})
+      default: () => {}
+    },
+    controls: {
+      type: Boolean,
+      default: true
     },
-    controls: Boolean,
     height: String,
     src: {
       type: String,
@@ -37,24 +44,20 @@ export default defineComponent({
       type: Boolean,
       default: true
     },
-    preLoading: {
-      type: Boolean,
-      default: true
+    onPlay: {
+      type: Function,
+      default: () => {}
     }
-    // onPlay: {
-    //   type: Function,
-    //   default: () => {}
-    // }
   },
-  emits: ['exitfullscreen', 'play', 'ready', 'enterfullscreen'],
+  emits: ['exitfullscreen'],
   data() {
     return {
+      videoID: 'video' + Date.now() + Math.floor(Math.random() * 100),
       player: null as any,
       loading: true // 首次进入加载中
     };
   },
   mounted() {
-    this.loading = this.preLoading;
     this._init();
   },
   methods: {
@@ -77,90 +80,63 @@ export default defineComponent({
       //   'download ' ,  // 显示一个下载按钮，其中包含指向当前源或您在选项中指定的自定义 URL 的链接
       //   'fullscreen' ,  // 切换全屏
       // ] ;
-      const controls = [
-        'play-large',
-        'play',
-        'progress',
-        'captions',
-        'fullscreen'
-      ];
-      // if (browser().isApp) {
-      //   controls.push('fullscreen');
-      // }
+      const Button = TCPlayer.getComponent('Button');
+      const BigPlayButton = TCPlayer.getComponent('BigPlayButton');
+      BigPlayButton.prototype.createEl = function () {
+        const el = Button.prototype.createEl.call(this);
+        const _html =
+          '<button><svg width="41px"height="41px"viewBox="0 0 41 41"version="1.1"xmlns="http://www.w3.org/2000/svg"xmlns:xlink="http://www.w3.org/1999/xlink"><g stroke="none"stroke-width="1"fill="none"fill-rule="evenodd"><g transform="translate(-167.000000, -155.000000)"><g transform="translate(0.000000, 85.000000)"><g transform="translate(158.000000, 70.000000)"><g transform="translate(9.000000, 0.000000)"><circle id="椭圆形"stroke="#FFFFFF"fill-opacity="0.1"fill="#D8D8D8"cx="20.5"cy="20.5"r="20"></circle><path d="M14.5483871,27.6859997 L14.5483871,13.4342349 C14.5480523,12.8729571 14.8729597,12.356555 15.3949624,12.0887034 C15.9169651,11.8208518 16.5522696,11.8445472 17.0503046,12.1504437 L28.6530473,19.2778563 C29.1119763,19.5602271 29.3887725,20.0426422 29.3887725,20.5601173 C29.3887725,21.0775924 29.1119763,21.5600075 28.6530473,21.8423783 L17.0503046,28.9697909 C16.5522696,29.2756874 15.9169651,29.2993828 15.3949624,29.0315312 C14.8729597,28.7636796 14.5480523,28.2472775 14.5483871,27.6859997 Z"id="路径"fill="#FFFFFF"fill-rule="nonzero"></path></g></g></g></g></g></svg></button>';
 
-      if (this.currentTime) {
-        controls.push('current-time');
-      }
-      const params: any = {
-        controls: controls,
-        ...this.setting,
-        invertTime: false
+        el.appendChild(
+          TCPlayer.dom.createEl('div', {
+            className: 'vjs-button-icon',
+            innerHTML: _html
+          })
+        );
+        return el;
       };
+      this.player = TCPlayer(this.videoID, {
+        appID: '',
+        controls: this.controls
+      }); // player-container-id 为播放器容器 ID，必须与 html 中一致
+      if (this.player) {
+        this.player.src(this.src); // url 播放地址
+        this.player.poster(this.poster || '');
 
-      if (browser().iPhone) {
-        params.fullscreen = {
-          enabled: true,
-          fallback: 'force',
-          iosNative: true
-        };
-      }
-
-      this.player = new Plyr((this as any).$refs.video, params);
-
-      this.player.elements.container
-        ? (this.player.elements.container.style.height = this.height || '210px')
-        : null;
-
-      if (this.preload === 'none') {
-        this.loading = false;
-      }
-      this.player.on('loadedmetadata', () => {
-        this.loading = false;
-        this.domPlayVisibility(false);
-      });
-
-      this.player.on('loadeddata', () => {
-        this.$emit('ready', this.player);
-      });
-
-      this.player.on('play', () => {
-        this.$emit('play', this.player);
-      });
-
-      this.player.on('enterfullscreen', () => {
-        console.log('fullscreen', this.player.elements);
-        const fragment = document.createDocumentFragment();
-        const i = document.createElement('i');
-        i.id = 'fullscreen-back';
-        i.className = 'van-icon van-icon-arrow-left video-back';
-        i.addEventListener('click', () => {
-          this.player.fullscreen.exit();
+        if (this.preload === 'none') {
+          this.loading = false;
+        }
+        this.player.on('loadstart', () => {
+          this.loading = false;
+          this.domPlayVisibility(false);
+        });
+        this.player.on('play', () => {
+          this.onPlay && this.onPlay(this.player);
         });
-        console.log(document.getElementsByClassName('plyr'), i);
-        fragment.appendChild(i);
-        // const parentNode = document.getElementsByClassName('plyr')[0];
-        // parentNode.insertBefore(fragment, parentNode.firstChild);
-        this.player.elements.container.appendChild(fragment);
-
-        this.$emit('enterfullscreen');
-      });
-
-      this.player.on('exitfullscreen', () => {
-        console.log('exitfullscreen');
-        const i = document.getElementById('fullscreen-back');
-        i && i.remove();
-        this.$emit('exitfullscreen');
-      });
 
-      setTimeout(() => {
-        this.loading = false;
-        this.domPlayVisibility(false);
-      }, 3000);
+        this.player.on('fullscreenchange', () => {
+          if (this.player.isFullscreen()) {
+            console.log('fullscreen');
+            const i = document.createElement('i');
+            i.id = 'fullscreen-back';
+            i.className = 'van-icon van-icon-arrow-left video-back';
+            i.addEventListener('click', () => {
+              this.player.exitFullscreen();
+            });
+            // console.log(document.getElementsByClassName('video-js'))
+            document.getElementsByClassName('video-js')[0].appendChild(i);
+          } else {
+            console.log('exitfullscreen');
+            const i = document.getElementById('fullscreen-back');
+            i && i.remove();
+          }
+        });
+      }
     },
     // 操作功能
     domPlayVisibility(hide = true) {
-      const controls = document.querySelector('.plyr__controls');
-      const controls2 = document.querySelector('.plyr__control--overlaid');
+      const controls = document.querySelector('.vjs-big-play-button');
+      const controls2 = document.querySelector('.vjs-control-bar');
       if (hide) {
         controls?.setAttribute('style', 'display:none');
         controls2?.setAttribute('style', 'display:none');
@@ -171,24 +147,28 @@ export default defineComponent({
         }, 200);
       }
     },
-    onStop() {
-      this.player.stop();
-    },
-    onExitScreen() {
-      this.player.fullscreen.active && this.player.fullscreen.exit();
+
+    onReplay() {
+      this.player.currentTime(0);
+      this.player.play();
+      this.domPlayVisibility(false);
     },
-    onPlay() {
-      this.player?.play();
+    onStop() {
+      this.player.currentTime(0);
+      this.player.pause();
     }
   },
   unmounted() {
-    this.player?.destroy();
+    this.player?.pause();
+    this.player?.src('');
+    this.player?.dispose();
   },
   render() {
     return (
       <div class={styles['video-container']}>
         <video
           ref="video"
+          id={this.videoID}
           class={styles['video']}
           src={this.src}
           playsinline={this.playsinline}
@@ -197,7 +177,7 @@ export default defineComponent({
           style={{ ...this.styleValue }}></video>
         {/* </div> */}
         {/* 加载视频使用 */}
-        {this.loading && (
+        {/* {this.loading && (
           <div
             class={styles.loadingVideo}
             style={{
@@ -205,13 +185,13 @@ export default defineComponent({
             }}>
             <Loading
               size={36}
-              color="#1CACF1"
+              color="#FF8057"
               vertical
               style={{ height: '100%', justifyContent: 'center' }}>
               加载中...
             </Loading>
           </div>
-        )}
+        )} */}
       </div>
     );
   }

src/views/creation/index-share.tsx

@@ -267,6 +267,10 @@ export default defineComponent({
     });
     return () => (
       <div class={styles.creation}>
+        {/* <video
+          src={state.musicDetail.videoUrl}
+          style="width: 100%;height: 200px"
+          controls></video> */}
         <div class={styles.playSection}>
           {state.playType === 'Video' && (
             <MVideo

src/views/creation/index.module.less

@@ -524,11 +524,12 @@
       border-radius: 50%;
       overflow: hidden;
       margin-right: 4px;
+      flex-shrink: 0;
     }
 
     .name {
       font-size: 12px;
-      color: #333333;
+      color: #402424;
       line-height: 14px;
     }
   }