SvelteKit SSR fix in screenfull.js

example/package.json

@@ -20,16 +20,16 @@
     "rollup": "^2.36.1",
     "rollup-plugin-css-only": "^3.1.0",
     "rollup-plugin-livereload": "^2.0.0",
-    "rollup-plugin-svelte": "^7.0.0",
+    "rollup-plugin-svelte": "^7.1.5",
     "rollup-plugin-terser": "^7.0.2",
-    "svelte": "^3.31.2",
-    "svelte-check": "^1.0.0",
-    "svelte-preprocess": "^4.0.0",
+    "svelte": "^4.0.0",
+    "svelte-check": "^3.4.3",
+    "svelte-preprocess": "^5.0.3",
     "svelte-video-player": "^1.2.5",
     "tslib": "^2.0.0",
-    "typescript": "^3.9.3"
+    "typescript": "^5.0.0"
   },
   "dependencies": {
     "sirv-cli": "^1.0.10"
   }
-}
+}

package.json

@@ -23,10 +23,10 @@
     "rollup": "^2.55.1",
     "rollup-plugin-css-only": "^3.1.0",
     "rollup-plugin-delete": "^2.0.0",
-    "rollup-plugin-svelte": "^7.1.0",
+    "rollup-plugin-svelte": "^7.1.5",
     "rollup-plugin-terser": "^7.0.2",
-    "svelte": "^3.41.0",
-    "svelte-preprocess": "^4.7.4"
+    "svelte": "^4.0.0",
+    "svelte-preprocess": "^5.0.3"
   },
   "keywords": [
     "svelte",
@@ -38,4 +38,4 @@
     "dist",
     "types"
   ]
-}
+}

src/PlayIconCenter.svelte

@@ -24,7 +24,7 @@
   <div
     class="player-icon"
     style="background-color:{$cfg.color}; border-color:{$cfg.focusColor};"
-    transition:fade={{ duration: 500 }}>
+    transition:fade|global={{ duration: 500 }}>
     <PlayPauseIcon paused />
   </div>
 {/if}

src/Spinner.svelte

@@ -46,8 +46,8 @@
   <div
     class="spinner"
     style="width:{size}; height:{size};"
-    in:fade={{ delay: 500, duration: 500 }}
-    out:fade={{ duration: 100 }}>
+    in:fade|global={{ delay: 500, duration: 500 }}
+    out:fade|global={{ duration: 100 }}>
     <div class="circle bg" style="border-color:{color};" />
     <div
       class="circle rotating"

src/libs/screenfull.js

@@ -8,6 +8,7 @@
 
   var document = typeof window !== 'undefined' && typeof window.document !== 'undefined' ? window.document : {};
   var isCommonjs = typeof module !== 'undefined' && module.exports;
+  var isClient = typeof window !== 'undefined' ? true : false;
 
   var fn = (function () {
     var val;
@@ -150,7 +151,7 @@
   if (!fn) {
     if (isCommonjs) {
       module.exports = { isEnabled: false };
-    } else {
+    } else if (isClient) {
       window.screenfull = { isEnabled: false };
     }
 
@@ -180,7 +181,7 @@
 
   if (isCommonjs) {
     module.exports = screenfull;
-  } else {
+  } else if (isClient) {
     window.screenfull = screenfull;
   }
 })();

types/VideoPlayer.d.ts

@@ -1,5 +1,5 @@
 /// <reference types="svelte" />
-import { SvelteComponentTyped } from 'svelte';
+import { SvelteComponent } from 'svelte';
 
 export interface VideoPlayerProps {
   /**
@@ -123,4 +123,4 @@ export interface VideoPlayerProps {
   timeDisplay?: boolean;
 }
 
-export default class VideoPlayer extends SvelteComponentTyped<VideoPlayerProps, {}, {}> {}
+export default class VideoPlayer extends SvelteComponent<VideoPlayerProps, {}, {}> {}