Merge branch 'iteration_video' into online

src/components/m-image-preview/index.module.less

@@ -24,6 +24,12 @@
     .plyr--fullscreen-fallback {
       height: 100% !important;
       width: var(--window-page-width) !important;
+      left: var(--window-page-position-left) !important;
+    }
+
+    .video-back {
+      // left: 20px;
+      // left: calc(var(--window-page-position-left) + 20px) !important;
     }
   }
 }

src/components/m-image-preview/index.tsx

@@ -97,6 +97,7 @@ export default defineComponent({
       videoRef.value.forEach((item: any, child: any) => {
         if (child !== index) {
           item?.onStop();
+          item?.onExitScreen();
         }
       });
     };
@@ -109,14 +110,26 @@ export default defineComponent({
         (window.document.body.clientWidth || window.document.body.offsetWidth) +
           'px'
       );
+
+      onChnageLeftWidth(forms.index - 1);
     });
 
+    const onChnageLeftWidth = (index: number) => {
+      document.documentElement.style.setProperty(
+        '--window-page-position-left',
+        (window.document.body.clientWidth || window.document.body.offsetWidth) *
+          index +
+          'px'
+      );
+    };
+
     watch(
       () => props.show,
       () => {
         forms.show = props.show;
         forms.index = props.startPosition + 1;
         forms.preLoading = props.show;
+        onChnageLeftWidth(props.startPosition);
         // console.log(forms.preLoading, 'show');
         // nextTick(() => {
         //   // 判断打开的内容是否为视频，是则自动播放
@@ -139,6 +152,7 @@ export default defineComponent({
       () => props.startPosition,
       () => {
         forms.index = props.startPosition + 1;
+        onChnageLeftWidth(props.startPosition);
       }
     );
 
@@ -184,11 +198,11 @@ export default defineComponent({
                         : 'var(--van-padding-md)'
                     }}
                     onClick={() => {
-                      console.log(
-                        forms.index,
-                        'index',
-                        props.images[forms.index - 1]
-                      );
+                      // console.log(
+                      //   forms.index,
+                      //   'index',
+                      //   props.images[forms.index - 1]
+                      // );
 
                       onSave(props.images[forms.index - 1]);
                     }}
@@ -208,6 +222,7 @@ export default defineComponent({
                 forms.index = index + 1;
                 // forms.preLoading = true;
                 onPlay(index);
+                onChnageLeftWidth(index);
               }}
               lazyRender>
               {props.images.map((url: string, index: number) => (
@@ -248,8 +263,8 @@ export default defineComponent({
                         src={url}
                         onPlay={() => onPlay(index)}
                         preLoading={false}
-                        onEnterfullscreen={() => (forms.showButton = false)}
-                        onExitfullscreen={() => (forms.showButton = true)}
+                        // onEnterfullscreen={() => (forms.showButton = false)}
+                        // onExitfullscreen={() => (forms.showButton = true)}
                       />
                     </div>
                   )}

src/components/m-video/index.tsx

@@ -132,29 +132,27 @@ export default defineComponent({
       });
 
       this.player.on('enterfullscreen', () => {
-        console.log('fullscreen');
-        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();
-        });
-        console.log(document.getElementsByClassName('plyr'), i);
-        fragment.appendChild(i);
-        const parentNode = document.getElementsByClassName('plyr')[0];
-        parentNode.insertBefore(fragment, parentNode.firstChild);
-        // document
-        //   .getElementsByClassName('plyr__controls')[0]
-        //   .insertBefore(fragment);
+        // 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();
+        // });
+        // 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();
+        // const i = document.getElementById('fullscreen-back');
+        // i && i.remove();
         this.$emit('exitfullscreen');
       });
     },
@@ -175,6 +173,9 @@ export default defineComponent({
     onStop() {
       this.player.stop();
     },
+    onExitScreen() {
+      this.player.fullscreen.active && this.player.fullscreen.exit();
+    },
     onPlay() {
       this.player?.play();
     }