Lazy load 3rdparty libraries

src/components/PsVideo.ts

@@ -6,13 +6,13 @@ import { showError } from "@nextcloud/dialogs";
 import { translate as t } from "@nextcloud/l10n";
 import { getCurrentUser } from "@nextcloud/auth";
 
-import Plyr from "plyr";
+import "video.js/dist/video-js.min.css";
 import "plyr/dist/plyr.css";
 import plyrsvg from "../assets/plyr.svg";
 
-import videojs from "video.js";
-import "video.js/dist/video-js.min.css";
-import "videojs-contrib-quality-levels";
+// Lazy loading
+let videojs: any;
+let Plyr: typeof import("plyr");
 
 const config_noTranscode = loadState(
   "memories",
@@ -126,11 +126,24 @@ class VideoContentSetup {
     });
   }
 
-  initVideo(content: any) {
+  async initVideo(content: any) {
     if (!isVideoContent(content) || content.videojs) {
       return;
     }
 
+    // Prevent double loading
+    content.videojs = {};
+
+    // Load videojs scripts
+    if (!videojs) {
+      videojs = (await import("video.js")).default;
+      await Promise.all([
+        import("plyr").then((m) => (Plyr = m.default)),
+        import("videojs-contrib-quality-levels"),
+      ]);
+    }
+
+    // Create video element
     content.videoElement = document.createElement("video");
     content.videoElement.className = "video-js";
     content.videoElement.setAttribute("poster", content.data.msrc);

src/components/Viewer.vue

@@ -126,8 +126,6 @@ import { subscribe, unsubscribe } from "@nextcloud/event-bus";
 import { generateUrl } from "@nextcloud/router";
 import { showError } from "@nextcloud/dialogs";
 
-import ImageEditor from "./ImageEditor.vue";
-
 import * as dav from "../services/DavRequests";
 import * as utils from "../services/Utils";
 import { getPreviewUrl } from "../services/FileUtils";
@@ -148,6 +146,8 @@ import InfoIcon from "vue-material-design-icons/InformationOutline.vue";
 import OpenInNewIcon from "vue-material-design-icons/OpenInNew.vue";
 import TuneIcon from "vue-material-design-icons/Tune.vue";
 
+const ImageEditor = () => import("./ImageEditor.vue");
+
 @Component({
   components: {
     NcActions,

src/main.ts

@@ -29,6 +29,8 @@ import "vue-virtual-scroller/dist/vue-virtual-scroller.css";
 
 import App from "./App.vue";
 import router from "./router";
+import { generateFilePath } from "@nextcloud/router";
+import { getRequestToken } from "@nextcloud/auth";
 import { IPhoto } from "./types";
 
 // Global exposed variables
@@ -42,6 +44,9 @@ declare global {
 
   var windowInnerWidth: number; // cache
   var windowInnerHeight: number; // cache
+
+  var __webpack_nonce__: string;
+  var __webpack_public_path__: string;
 }
 
 globalThis.vuerouter = router;
@@ -51,6 +56,15 @@ globalThis.windowInnerHeight = window.innerHeight;
 
 Vue.use(VueVirtualScroller);
 
+// CSP config for webpack dynamic chunk loading
+__webpack_nonce__ = window.btoa(getRequestToken());
+
+// Correct the root of the app for chunk loading
+// OC.linkTo matches the apps folders
+// OC.generateUrl ensure the index.php (or not)
+// We do not want the index.php since we're loading files
+__webpack_public_path__ = generateFilePath("memories", "", "js/");
+
 // https://github.com/nextcloud/photos/blob/156f280c0476c483cb9ce81769ccb0c1c6500a4e/src/main.js
 // TODO: remove when we have a proper fileinfo standalone library
 // original scripts are loaded from

tsconfig.json

@@ -1,13 +1,13 @@
 {
-    "compilerOptions": {
-      "lib": ["dom", "es2017"],
-      "target": "ES2017",
-      "module": "es2015",
-      "moduleResolution": "node",
-      "sourceMap": true,
-      "allowSyntheticDefaultImports": true,
-      "experimentalDecorators": true,
-      "emitDecoratorMetadata": true,
-      "jsx": "preserve"
-    }
-}
+  "compilerOptions": {
+    "lib": ["dom", "es2017"],
+    "target": "ES2017",
+    "module": "es2020",
+    "moduleResolution": "node",
+    "sourceMap": true,
+    "allowSyntheticDefaultImports": true,
+    "experimentalDecorators": true,
+    "emitDecoratorMetadata": true,
+    "jsx": "preserve"
+  }
+}

webpack.js

@@ -18,7 +18,6 @@ webpackConfig.resolve.alias = {
     'vue$': 'vue/dist/vue.esm.js',
 }
 webpackConfig.entry.main = path.resolve(path.join('src', 'main'));
-delete webpackConfig.optimization.splitChunks;
 
 webpackConfig.watchOptions = {
     ignored: /node_modules/,