Skip to content

Commit ae63207

Browse files
TrySoundTrySound
committed
fix: support videos in self-hosted websites
Ref https://discord.com/channels/955905230107738152/955905231227609158/1400561168648638576 User tried to self hosted a website with video component which got converted to /cgi/video which does not exist in self hosted targets. Here moved the logic into own custom loader and fall back to original url.
1 parent ac6b649 commit ae63207

File tree

31 files changed

+228
-241
lines changed

31 files changed

+228
-241
lines changed

‎apps/builder/app/canvas/canvas.tsx

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,7 @@ import { useStore } from "@nanostores/react";
44
import { type Instances, coreMetas } from "@webstudio-is/sdk";
55
import { coreTemplates } from "@webstudio-is/sdk/core-templates";
66
import type { Components } from "@webstudio-is/react-sdk";
7-
import { wsImageLoader } from "@webstudio-is/image";
7+
import { wsImageLoader, wsVideoLoader } from "@webstudio-is/image";
88
import { ReactSdkContext } from "@webstudio-is/react-sdk/runtime";
99
import * as baseComponents from "@webstudio-is/sdk-components-react";
1010
import * as baseComponentMetas from "@webstudio-is/sdk-components-react/metas";
@@ -133,6 +133,7 @@ const useElementsTree = (components: Components, instances: Instances) => {
133133
renderer: isPreviewMode ? "preview" : "canvas",
134134
assetBaseUrl,
135135
imageLoader: wsImageLoader,
136+
videoLoader: wsVideoLoader,
136137
resources: {},
137138
breakpoints,
138139
// error reporting

‎fixtures/react-router-cloudflare/app/routes/[another-page]._index.tsx

Lines changed: 8 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -36,7 +36,7 @@ import {
3636
getRemixParams,
3737
contactEmail,
3838
} from "../__generated__/[another-page]._index.server";
39-
import { assetBaseUrl, imageLoader } from "../constants.mjs";
39+
import * as constants from "../constants.mjs";
4040
import css from "../__generated__/index.css?url";
4141
import { sitemap } from "../__generated__/$resources.sitemap.xml";
4242

@@ -150,8 +150,8 @@ export const links: LinksFunction = () => {
150150
if (favIconAsset) {
151151
result.push({
152152
rel: "icon",
153-
href: imageLoader({
154-
src: `${assetBaseUrl}${favIconAsset}`,
153+
href: constants.imageLoader({
154+
src: `${constants.assetBaseUrl}${favIconAsset}`,
155155
// width,height must be multiple of 48 https://developers.google.com/search/docs/appearance/favicon-in-search
156156
width: 144,
157157
height: 144,
@@ -166,7 +166,7 @@ export const links: LinksFunction = () => {
166166
for (const asset of pageFontAssets) {
167167
result.push({
168168
rel: "preload",
169-
href: `${assetBaseUrl}${asset}`,
169+
href: `${constants.assetBaseUrl}${asset}`,
170170
as: "font",
171171
crossOrigin: "anonymous",
172172
});
@@ -175,7 +175,7 @@ export const links: LinksFunction = () => {
175175
for (const backgroundImageAsset of pageBackgroundImageAssets) {
176176
result.push({
177177
rel: "preload",
178-
href: `${assetBaseUrl}${backgroundImageAsset}`,
178+
href: `${constants.assetBaseUrl}${backgroundImageAsset}`,
179179
as: "image",
180180
});
181181
}
@@ -270,8 +270,7 @@ const Outlet = () => {
270270
return (
271271
<ReactSdkContext.Provider
272272
value={{
273-
imageLoader,
274-
assetBaseUrl,
273+
...constants,
275274
resources,
276275
breakpoints,
277276
onError: console.error,
@@ -284,8 +283,8 @@ const Outlet = () => {
284283
pageMeta={pageMeta}
285284
host={host}
286285
siteName={siteName}
287-
imageLoader={imageLoader}
288-
assetBaseUrl={assetBaseUrl}
286+
imageLoader={constants.imageLoader}
287+
assetBaseUrl={constants.assetBaseUrl}
289288
/>
290289
<PageSettingsTitle>{pageMeta.title}</PageSettingsTitle>
291290
</ReactSdkContext.Provider>

‎fixtures/react-router-cloudflare/app/routes/_index.tsx

Lines changed: 8 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -36,7 +36,7 @@ import {
3636
getRemixParams,
3737
contactEmail,
3838
} from "../__generated__/_index.server";
39-
import { assetBaseUrl, imageLoader } from "../constants.mjs";
39+
import * as constants from "../constants.mjs";
4040
import css from "../__generated__/index.css?url";
4141
import { sitemap } from "../__generated__/$resources.sitemap.xml";
4242

@@ -150,8 +150,8 @@ export const links: LinksFunction = () => {
150150
if (favIconAsset) {
151151
result.push({
152152
rel: "icon",
153-
href: imageLoader({
154-
src: `${assetBaseUrl}${favIconAsset}`,
153+
href: constants.imageLoader({
154+
src: `${constants.assetBaseUrl}${favIconAsset}`,
155155
// width,height must be multiple of 48 https://developers.google.com/search/docs/appearance/favicon-in-search
156156
width: 144,
157157
height: 144,
@@ -166,7 +166,7 @@ export const links: LinksFunction = () => {
166166
for (const asset of pageFontAssets) {
167167
result.push({
168168
rel: "preload",
169-
href: `${assetBaseUrl}${asset}`,
169+
href: `${constants.assetBaseUrl}${asset}`,
170170
as: "font",
171171
crossOrigin: "anonymous",
172172
});
@@ -175,7 +175,7 @@ export const links: LinksFunction = () => {
175175
for (const backgroundImageAsset of pageBackgroundImageAssets) {
176176
result.push({
177177
rel: "preload",
178-
href: `${assetBaseUrl}${backgroundImageAsset}`,
178+
href: `${constants.assetBaseUrl}${backgroundImageAsset}`,
179179
as: "image",
180180
});
181181
}
@@ -270,8 +270,7 @@ const Outlet = () => {
270270
return (
271271
<ReactSdkContext.Provider
272272
value={{
273-
imageLoader,
274-
assetBaseUrl,
273+
...constants,
275274
resources,
276275
breakpoints,
277276
onError: console.error,
@@ -284,8 +283,8 @@ const Outlet = () => {
284283
pageMeta={pageMeta}
285284
host={host}
286285
siteName={siteName}
287-
imageLoader={imageLoader}
288-
assetBaseUrl={assetBaseUrl}
286+
imageLoader={constants.imageLoader}
287+
assetBaseUrl={constants.assetBaseUrl}
289288
/>
290289
<PageSettingsTitle>{pageMeta.title}</PageSettingsTitle>
291290
</ReactSdkContext.Provider>

‎fixtures/react-router-docker/app/routes/[another-page]._index.tsx

Lines changed: 8 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -36,7 +36,7 @@ import {
3636
getRemixParams,
3737
contactEmail,
3838
} from "../__generated__/[another-page]._index.server";
39-
import { assetBaseUrl, imageLoader } from "../constants.mjs";
39+
import * as constants from "../constants.mjs";
4040
import css from "../__generated__/index.css?url";
4141
import { sitemap } from "../__generated__/$resources.sitemap.xml";
4242

@@ -150,8 +150,8 @@ export const links: LinksFunction = () => {
150150
if (favIconAsset) {
151151
result.push({
152152
rel: "icon",
153-
href: imageLoader({
154-
src: `${assetBaseUrl}${favIconAsset}`,
153+
href: constants.imageLoader({
154+
src: `${constants.assetBaseUrl}${favIconAsset}`,
155155
// width,height must be multiple of 48 https://developers.google.com/search/docs/appearance/favicon-in-search
156156
width: 144,
157157
height: 144,
@@ -166,7 +166,7 @@ export const links: LinksFunction = () => {
166166
for (const asset of pageFontAssets) {
167167
result.push({
168168
rel: "preload",
169-
href: `${assetBaseUrl}${asset}`,
169+
href: `${constants.assetBaseUrl}${asset}`,
170170
as: "font",
171171
crossOrigin: "anonymous",
172172
});
@@ -175,7 +175,7 @@ export const links: LinksFunction = () => {
175175
for (const backgroundImageAsset of pageBackgroundImageAssets) {
176176
result.push({
177177
rel: "preload",
178-
href: `${assetBaseUrl}${backgroundImageAsset}`,
178+
href: `${constants.assetBaseUrl}${backgroundImageAsset}`,
179179
as: "image",
180180
});
181181
}
@@ -270,8 +270,7 @@ const Outlet = () => {
270270
return (
271271
<ReactSdkContext.Provider
272272
value={{
273-
imageLoader,
274-
assetBaseUrl,
273+
...constants,
275274
resources,
276275
breakpoints,
277276
onError: console.error,
@@ -284,8 +283,8 @@ const Outlet = () => {
284283
pageMeta={pageMeta}
285284
host={host}
286285
siteName={siteName}
287-
imageLoader={imageLoader}
288-
assetBaseUrl={assetBaseUrl}
286+
imageLoader={constants.imageLoader}
287+
assetBaseUrl={constants.assetBaseUrl}
289288
/>
290289
<PageSettingsTitle>{pageMeta.title}</PageSettingsTitle>
291290
</ReactSdkContext.Provider>

‎fixtures/react-router-docker/app/routes/_index.tsx

Lines changed: 8 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -36,7 +36,7 @@ import {
3636
getRemixParams,
3737
contactEmail,
3838
} from "../__generated__/_index.server";
39-
import { assetBaseUrl, imageLoader } from "../constants.mjs";
39+
import * as constants from "../constants.mjs";
4040
import css from "../__generated__/index.css?url";
4141
import { sitemap } from "../__generated__/$resources.sitemap.xml";
4242

@@ -150,8 +150,8 @@ export const links: LinksFunction = () => {
150150
if (favIconAsset) {
151151
result.push({
152152
rel: "icon",
153-
href: imageLoader({
154-
src: `${assetBaseUrl}${favIconAsset}`,
153+
href: constants.imageLoader({
154+
src: `${constants.assetBaseUrl}${favIconAsset}`,
155155
// width,height must be multiple of 48 https://developers.google.com/search/docs/appearance/favicon-in-search
156156
width: 144,
157157
height: 144,
@@ -166,7 +166,7 @@ export const links: LinksFunction = () => {
166166
for (const asset of pageFontAssets) {
167167
result.push({
168168
rel: "preload",
169-
href: `${assetBaseUrl}${asset}`,
169+
href: `${constants.assetBaseUrl}${asset}`,
170170
as: "font",
171171
crossOrigin: "anonymous",
172172
});
@@ -175,7 +175,7 @@ export const links: LinksFunction = () => {
175175
for (const backgroundImageAsset of pageBackgroundImageAssets) {
176176
result.push({
177177
rel: "preload",
178-
href: `${assetBaseUrl}${backgroundImageAsset}`,
178+
href: `${constants.assetBaseUrl}${backgroundImageAsset}`,
179179
as: "image",
180180
});
181181
}
@@ -270,8 +270,7 @@ const Outlet = () => {
270270
return (
271271
<ReactSdkContext.Provider
272272
value={{
273-
imageLoader,
274-
assetBaseUrl,
273+
...constants,
275274
resources,
276275
breakpoints,
277276
onError: console.error,
@@ -284,8 +283,8 @@ const Outlet = () => {
284283
pageMeta={pageMeta}
285284
host={host}
286285
siteName={siteName}
287-
imageLoader={imageLoader}
288-
assetBaseUrl={assetBaseUrl}
286+
imageLoader={constants.imageLoader}
287+
assetBaseUrl={constants.assetBaseUrl}
289288
/>
290289
<PageSettingsTitle>{pageMeta.title}</PageSettingsTitle>
291290
</ReactSdkContext.Provider>

‎fixtures/react-router-netlify/app/routes/[another-page]._index.tsx

Lines changed: 8 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -36,7 +36,7 @@ import {
3636
getRemixParams,
3737
contactEmail,
3838
} from "../__generated__/[another-page]._index.server";
39-
import { assetBaseUrl, imageLoader } from "../constants.mjs";
39+
import * as constants from "../constants.mjs";
4040
import css from "../__generated__/index.css?url";
4141
import { sitemap } from "../__generated__/$resources.sitemap.xml";
4242

@@ -150,8 +150,8 @@ export const links: LinksFunction = () => {
150150
if (favIconAsset) {
151151
result.push({
152152
rel: "icon",
153-
href: imageLoader({
154-
src: `${assetBaseUrl}${favIconAsset}`,
153+
href: constants.imageLoader({
154+
src: `${constants.assetBaseUrl}${favIconAsset}`,
155155
// width,height must be multiple of 48 https://developers.google.com/search/docs/appearance/favicon-in-search
156156
width: 144,
157157
height: 144,
@@ -166,7 +166,7 @@ export const links: LinksFunction = () => {
166166
for (const asset of pageFontAssets) {
167167
result.push({
168168
rel: "preload",
169-
href: `${assetBaseUrl}${asset}`,
169+
href: `${constants.assetBaseUrl}${asset}`,
170170
as: "font",
171171
crossOrigin: "anonymous",
172172
});
@@ -175,7 +175,7 @@ export const links: LinksFunction = () => {
175175
for (const backgroundImageAsset of pageBackgroundImageAssets) {
176176
result.push({
177177
rel: "preload",
178-
href: `${assetBaseUrl}${backgroundImageAsset}`,
178+
href: `${constants.assetBaseUrl}${backgroundImageAsset}`,
179179
as: "image",
180180
});
181181
}
@@ -270,8 +270,7 @@ const Outlet = () => {
270270
return (
271271
<ReactSdkContext.Provider
272272
value={{
273-
imageLoader,
274-
assetBaseUrl,
273+
...constants,
275274
resources,
276275
breakpoints,
277276
onError: console.error,
@@ -284,8 +283,8 @@ const Outlet = () => {
284283
pageMeta={pageMeta}
285284
host={host}
286285
siteName={siteName}
287-
imageLoader={imageLoader}
288-
assetBaseUrl={assetBaseUrl}
286+
imageLoader={constants.imageLoader}
287+
assetBaseUrl={constants.assetBaseUrl}
289288
/>
290289
<PageSettingsTitle>{pageMeta.title}</PageSettingsTitle>
291290
</ReactSdkContext.Provider>

‎fixtures/react-router-netlify/app/routes/_index.tsx

Lines changed: 8 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -36,7 +36,7 @@ import {
3636
getRemixParams,
3737
contactEmail,
3838
} from "../__generated__/_index.server";
39-
import { assetBaseUrl, imageLoader } from "../constants.mjs";
39+
import * as constants from "../constants.mjs";
4040
import css from "../__generated__/index.css?url";
4141
import { sitemap } from "../__generated__/$resources.sitemap.xml";
4242

@@ -150,8 +150,8 @@ export const links: LinksFunction = () => {
150150
if (favIconAsset) {
151151
result.push({
152152
rel: "icon",
153-
href: imageLoader({
154-
src: `${assetBaseUrl}${favIconAsset}`,
153+
href: constants.imageLoader({
154+
src: `${constants.assetBaseUrl}${favIconAsset}`,
155155
// width,height must be multiple of 48 https://developers.google.com/search/docs/appearance/favicon-in-search
156156
width: 144,
157157
height: 144,
@@ -166,7 +166,7 @@ export const links: LinksFunction = () => {
166166
for (const asset of pageFontAssets) {
167167
result.push({
168168
rel: "preload",
169-
href: `${assetBaseUrl}${asset}`,
169+
href: `${constants.assetBaseUrl}${asset}`,
170170
as: "font",
171171
crossOrigin: "anonymous",
172172
});
@@ -175,7 +175,7 @@ export const links: LinksFunction = () => {
175175
for (const backgroundImageAsset of pageBackgroundImageAssets) {
176176
result.push({
177177
rel: "preload",
178-
href: `${assetBaseUrl}${backgroundImageAsset}`,
178+
href: `${constants.assetBaseUrl}${backgroundImageAsset}`,
179179
as: "image",
180180
});
181181
}
@@ -270,8 +270,7 @@ const Outlet = () => {
270270
return (
271271
<ReactSdkContext.Provider
272272
value={{
273-
imageLoader,
274-
assetBaseUrl,
273+
...constants,
275274
resources,
276275
breakpoints,
277276
onError: console.error,
@@ -284,8 +283,8 @@ const Outlet = () => {
284283
pageMeta={pageMeta}
285284
host={host}
286285
siteName={siteName}
287-
imageLoader={imageLoader}
288-
assetBaseUrl={assetBaseUrl}
286+
imageLoader={constants.imageLoader}
287+
assetBaseUrl={constants.assetBaseUrl}
289288
/>
290289
<PageSettingsTitle>{pageMeta.title}</PageSettingsTitle>
291290
</ReactSdkContext.Provider>

0 commit comments

Comments
 (0)