gemercheung 1 år sedan
förälder
incheckning
cd44e667c8
2 ändrade filer med 26 tillägg och 4 borttagningar
  1. 2 2
      src/App.jsx
  2. 24 2
      src/components/Viewer.jsx

+ 2 - 2
src/App.jsx

@@ -76,8 +76,8 @@ function App() {
   if (document.querySelector("#page-process")) {
     document.querySelector("#page-process").innerHTML = "100%";
   }
-  document.body.style.overflow = "auto";
-  let timer = null;
+  // document.body.style.overflow = "auto";
+
   function showStats() {
     const statsInstance = new Stats();
     statsInstance.dom.className = "stats";

+ 24 - 2
src/components/Viewer.jsx

@@ -53,12 +53,13 @@ class ViewerInner extends Component {
     this.containerRef = createRef(null);
     this.viewerRef = createRef(null);
     this.canvasContainerRef = createRef(null);
-    this.loadingWrap = createRef(null);
+
     this.viewerOffsetRef = createRef(null);
     this.canvasRef = createRef(null);
+
+    this.processBarRef = createRef(null);
     this.processingRef = createRef(null);
     this.preProcessingRef = createRef(null);
-    this.processBarRef = createRef(null);
 
     this.sequence = [];
     this.loadedRenderPool = [];
@@ -91,6 +92,9 @@ class ViewerInner extends Component {
     this.props = props;
     props.debug && console.log("init", props.name);
     this.fullFrameCount = props.frameCount;
+    this.notLoadedTween = {
+      isActive: false,
+    };
     this.frame = props.startFrame || 0;
     if (this.props.pause) {
       Object.keys(this.props.pause).forEach((index) => {
@@ -211,6 +215,7 @@ class ViewerInner extends Component {
   initializeTimeline() {
     this.props.debug && console.log(this.props.path, "initializeTimeline");
     this.leaveHideElements();
+    let timer = null;
     this.timeline = gsap.timeline({
       scrollTrigger: {
         trigger: this.containerRef.current,
@@ -230,6 +235,23 @@ class ViewerInner extends Component {
               this.lastProgress = trigger.progress;
             }
           }
+          clearTimeout(timer),
+            (timer = setTimeout(() => {
+              if (
+                this.frame > this.loadedCount &&
+                !this.notLoadedTween.isActive
+              ) {
+                // this.props.debug && console.warn("not load flash");
+                console.warn("not load flash");
+                this.enterShowElements();
+                this.notLoadedTween = gsap.to(this.processBarRef.current, {
+                  backgroundColor: "#8888a0",
+                  duration: 0.33,
+                  repeat: 1,
+                  yoyo: !0,
+                });
+              }
+            }, 100));
         },
         onScrubComplete: () => {
           this.justScrolled = true;