Merge pull request #9012 from Tainan404/issue-9011

Add preloading for slides

bigbluebutton-html5/imports/ui/components/presentation/container.jsx

@@ -3,6 +3,7 @@ import { withTracker } from 'meteor/react-meteor-data';
 import MediaService, { getSwapLayout, shouldEnableSwapLayout } from '/imports/ui/components/media/service';
 import { notify } from '/imports/ui/services/notification';
 import PresentationAreaService from './service';
+import { Slides } from '/imports/api/slides';
 import PresentationArea from './component';
 import PresentationToolbarService from './presentation-toolbar/service';
 import Auth from '/imports/ui/services/auth';
@@ -16,6 +17,10 @@ const PresentationAreaContainer = ({ presentationPodIds, mountPresentationArea,
   mountPresentationArea && <PresentationArea {...props} />
 );
 
+const APP_CONFIG = Meteor.settings.public.app;
+const PRELOAD_NEXT_SLIDE = APP_CONFIG.preloadNextSlides;
+const fetchedpresentation = {};
+
 export default withTracker(({ podId }) => {
   const currentSlide = PresentationAreaService.getCurrentSlide(podId);
   const presentationIsDownloadable = PresentationAreaService.isPresentationDownloadable(podId);
@@ -33,6 +38,35 @@ export default withTracker(({ podId }) => {
       id: slideId,
     } = currentSlide;
     slidePosition = PresentationAreaService.getSlidePosition(podId, presentationId, slideId);
+    if (PRELOAD_NEXT_SLIDE && !fetchedpresentation[presentationId]) {
+      fetchedpresentation[presentationId] = {
+        canFetch: true,
+        fetchedSlide: {},
+      };
+    }
+    const currentSlideNum = currentSlide.num;
+    const presentation = fetchedpresentation[presentationId];
+
+    if (PRELOAD_NEXT_SLIDE && !presentation.fetchedSlide[currentSlide.num + PRELOAD_NEXT_SLIDE] && presentation.canFetch) {
+      const slidesToFetch = Slides.find({
+        podId,
+        presentationId,
+        num: {
+          $in: Array(PRELOAD_NEXT_SLIDE).fill(1).map((v, idx) => currentSlideNum + (idx + 1)),
+        },
+      }).fetch();
+
+      const promiseImageGet = slidesToFetch
+        .filter(s => !fetchedpresentation[presentationId].fetchedSlide[s.num])
+        .map(async (slide) => {
+          if (presentation.canFetch) presentation.canFetch = false;
+          const image = await fetch(slide.imageUri);
+          if (image.ok) {
+            presentation.fetchedSlide[slide.num] = true;
+          }
+        });
+      Promise.all(promiseImageGet).then(() => presentation.canFetch = true);
+    }
   }
   return {
     currentSlide,

bigbluebutton-html5/private/config/settings.yml

@@ -27,6 +27,7 @@ public:
     ipv4FallbackDomain: ""
     allowLogout: true
     allowFullscreen: true
+    preloadNextSlides: 2
     mutedAlert:
       enabled: true
       interval: 200