-Old PR: Fix UI regression of asciinema player https://github.com/go-gitea/gitea/pull/26159 */
-.ap-term {
- overflow: hidden !important;
-}
diff --git a/web_src/css/repo.css b/web_src/css/repo.css
index ad9a43b098c..16337a9eadb 100644
--- a/web_src/css/repo.css
+++ b/web_src/css/repo.css
@@ -210,10 +210,6 @@ td .commit-summary {
overflow: auto;
}
-.non-diff-file-content .asciicast {
- padding: 0 !important;
-}
-
.repo-editor-header {
/* it should match ".repo-button-row" so the tree toggle button stays aligned */
margin: 8px 0;
diff --git a/web_src/js/external-render-frontend.ts b/web_src/js/external-render-frontend.ts
index 9d969bcf900..e7e3f4f1be9 100644
--- a/web_src/js/external-render-frontend.ts
+++ b/web_src/js/external-render-frontend.ts
@@ -8,6 +8,7 @@ type LazyLoadFunc = () => Promise<{frontendRender: FrontendRenderFunc}>;
const frontendPlugins: Record
= {
'viewer-3d': () => import('./render/plugins/frontend-viewer-3d.ts'),
'openapi-swagger': () => import('./render/plugins/frontend-openapi-swagger.ts'),
+ 'asciicast': () => import('./render/plugins/frontend-asciicast.ts'),
};
class Options implements FrontendRenderOptions {
@@ -44,23 +45,28 @@ async function initFrontendExternalRender() {
const viewerContainer = document.querySelector('#frontend-render-viewer')!;
const renderNames = viewerContainer.getAttribute('data-frontend-renders')!.split(' ');
const fileTreePath = viewerContainer.getAttribute('data-file-tree-path')!;
+ viewerContainer.setAttribute('data-window-origin', window.origin); // mainly for testing purpose
const fileDataElem = document.querySelector('#frontend-render-data')!;
fileDataElem.remove();
const fileDataContent = fileDataElem.value;
const fileDataEncoding = fileDataElem.getAttribute('data-content-encoding')!;
const opts = new Options(viewerContainer, fileTreePath, fileDataEncoding, fileDataContent);
-
- let found = false;
+ let renderName = '', rendered = false;
for (const name of renderNames) {
if (!(name in frontendPlugins)) continue;
const plugin = await frontendPlugins[name]();
- found = true;
- if (await plugin.frontendRender(opts)) break;
+ renderName = name;
+ rendered = await plugin.frontendRender(opts);
+ if (rendered) break;
}
- if (!found) {
+ if (!renderName) {
viewerContainer.textContent = 'No frontend render plugin found for this file, but backend declares that there must be one, there must be a bug';
+ } else if (!rendered) {
+ viewerContainer.textContent = `Failed to render by ${renderName}`;
+ } else {
+ viewerContainer.setAttribute('data-frontend-render-name', renderName); // succeeded render, mainly for testing purpose
}
}
diff --git a/web_src/js/external-render-helper.test.ts b/web_src/js/external-render-helper.test.ts
index 452d7f8f2d5..3bb524a0115 100644
--- a/web_src/js/external-render-helper.test.ts
+++ b/web_src/js/external-render-helper.test.ts
@@ -1,7 +1,7 @@
import './external-render-helper.ts';
test('isValidCssColor', async () => {
- const isValidCssColor = window.testModules.externalRenderHelper!.isValidCssColor;
+ const isValidCssColor = window.giteaExternalRenderHelper!.isValidCssColor;
expect(isValidCssColor(null)).toBe(false);
expect(isValidCssColor('')).toBe(false);
diff --git a/web_src/js/external-render-helper.ts b/web_src/js/external-render-helper.ts
index f92aeb9c6c9..8a5122fe99c 100644
--- a/web_src/js/external-render-helper.ts
+++ b/web_src/js/external-render-helper.ts
@@ -50,12 +50,12 @@ body { background: ${backgroundColor}; }
}
const iframeId = queryParams.get('gitea-iframe-id');
-if (iframeId) {
- // iframe is in different origin, so we need to use postMessage to communicate
- const postIframeMsg = (cmd: string, data: Record = {}) => {
- window.parent.postMessage({giteaIframeCmd: cmd, giteaIframeId: iframeId, ...data}, '*');
- };
+// iframe is in different origin, so we need to use postMessage to communicate
+const postIframeMsg = (cmd: string, data: Record = {}) => {
+ window.parent.postMessage({giteaIframeCmd: cmd, giteaIframeId: iframeId, ...data}, '*');
+};
+if (iframeId) {
const updateIframeHeight = () => {
if (!document.body) return; // the body might not be available when this function is called
// Use scrollHeight to get the full content height, even when CSS sets html/body to height:100%
@@ -90,6 +90,4 @@ if (iframeId) {
});
}
-if (window.testModules) {
- window.testModules.externalRenderHelper = {isValidCssColor};
-}
+window.giteaExternalRenderHelper = {isValidCssColor, queryParams, postIframeMsg};
diff --git a/web_src/js/globals.d.ts b/web_src/js/globals.d.ts
index 5398d407d1d..6579bb22037 100644
--- a/web_src/js/globals.d.ts
+++ b/web_src/js/globals.d.ts
@@ -68,13 +68,13 @@ interface Window {
turnstile: any,
hcaptcha: any,
- // Make IIFE private functions can be tested in unit tests, without exposing the IIFE module to global scope.
+ // Make IIFE private functions can be managed by us in our scope, without exposing the IIFE module to global scope.
// Otherwise, when using "export" in IIFE code, the compiled JS will inject global "var externalRenderHelper = ..."
// which is not expected and may cause conflicts with other modules.
- testModules: {
- externalRenderHelper?: {
- isValidCssColor(s: string | null): boolean,
- }
+ giteaExternalRenderHelper?: {
+ isValidCssColor(s: string | null): boolean,
+ queryParams: URLSearchParams,
+ postIframeMsg(cmd: string, data: Record = {}),
}
// do not add more properties here unless it is a must
diff --git a/web_src/js/markup/asciicast.ts b/web_src/js/markup/asciicast.ts
deleted file mode 100644
index 90515e1363c..00000000000
--- a/web_src/js/markup/asciicast.ts
+++ /dev/null
@@ -1,16 +0,0 @@
-import {queryElems} from '../utils/dom.ts';
-
-export async function initMarkupRenderAsciicast(elMarkup: HTMLElement): Promise {
- queryElems(elMarkup, '.asciinema-player-container', async (el) => {
- const [player] = await Promise.all([
- import('asciinema-player'),
- import('asciinema-player/dist/bundle/asciinema-player.css'),
- ]);
-
- player.create(el.getAttribute('data-asciinema-player-src')!, el, {
- // poster (a preview frame) to display until the playback is started.
- // Set it to 1 hour (also means the end if the video is shorter) to make the preview frame show more.
- poster: 'npt:1:0:0',
- });
- });
-}
diff --git a/web_src/js/markup/content.ts b/web_src/js/markup/content.ts
index 44c005a7c82..09dee98754d 100644
--- a/web_src/js/markup/content.ts
+++ b/web_src/js/markup/content.ts
@@ -1,7 +1,6 @@
import {initMarkupCodeMermaid} from './mermaid.ts';
import {initMarkupCodeMath} from './math.ts';
import {initMarkupCodeCopy} from './codecopy.ts';
-import {initMarkupRenderAsciicast} from './asciicast.ts';
import {initMarkupTasklist} from './tasklist.ts';
import {registerGlobalInitFunc, registerGlobalSelectorFunc} from '../modules/observer.ts';
import {initExternalRenderIframe} from './render-iframe.ts';
@@ -24,6 +23,5 @@ export function initMarkupContent(): void {
initMarkupTasklist(el);
initMarkupCodeMermaid(el);
initMarkupCodeMath(el);
- initMarkupRenderAsciicast(el);
});
}
diff --git a/web_src/js/markup/render-iframe.ts b/web_src/js/markup/render-iframe.ts
index f05523943a8..6a191ac5c66 100644
--- a/web_src/js/markup/render-iframe.ts
+++ b/web_src/js/markup/render-iframe.ts
@@ -1,7 +1,6 @@
import {generateElemId} from '../utils/dom.ts';
import {errorMessage} from '../modules/errors.ts';
import {isDarkTheme} from '../utils.ts';
-import {GET} from '../modules/fetch.ts';
function safeRenderIframeLink(link: any): string | null {
try {
@@ -65,9 +64,31 @@ export async function initExternalRenderIframe(iframe: HTMLIFrameElement) {
u.searchParams.set('gitea-iframe-id', iframe.id);
u.searchParams.set('gitea-iframe-bgcolor', getRealBackgroundColor(iframe));
- // It must use "srcdoc" here, because our backend always sends CSP sandbox directive for the rendered content
- // (to protect from XSS risks), so we can't use "src" to load the content directly, otherwise there will be console errors like:
- // Unsafe attempt to load URL http://localhost:3000/test from frame with URL http://localhost:3000/test
- const resp = await GET(u.href);
- iframe.srcdoc = await resp.text();
+ // There are 3 kinds of external render modes:
+ // * external frontend render:
+ // * parent page creates iframe, iframe navigates to render page
+ // * render generates frame page with external-render-helper (injected), external-render-frontend and file content (hidden textarea)
+ // * frame page executes external-render-frontend JS code to finds a frontend plugin to render
+ // * external backend render (HTML)
+ // * parent page creates iframe, iframe navigates to render page
+ // * render executes command to generate rendered HTML content with external-render-helper (injected)
+ // * frame page displays the rendered content
+ // * external backend render (non-HTML, e.g.: PDF, image)
+ // * parent page creates iframe, iframe navigates to render page
+ // * render executes command to generate rendered content
+ // * response header is automatically detected from rendered content
+
+ // It must use "src" here, because the frame content should not inherit parent's CSP.
+ // Otherwise, "srcdoc" makes the frame content inherit the parent's CSP,
+ // then some renders like "asciicast (asciinema)" which require "unsafe-eval" won't work.
+ //
+ // When using "src", Chrome can report false-alarm error like:
+ // * Unsafe attempt to load URL http://localhost/owner/repo/render/branch/main/file from frame with URL http://localhost/owner/repo/render/branch/main/file. Domains, protocols and ports must match.
+ // (only for the first time that the developer opens the browser console)
+ // Such error log can also appear even if you access the link "http://.../owner/repo/render/branch/main/file" directly.
+ // Everything just works, it is just a false-alarm caused by Chrome's Developer Tools, so such error log can be ignored.
+ //
+ // Another reason for why "src" is a must: if the render outputs non-HTML contents like PDF or image,
+ // Only "src" can correctly load and display the rendered content, "srcdoc" won't work.
+ iframe.src = u.href;
}
diff --git a/web_src/js/render/plugins/frontend-asciicast.ts b/web_src/js/render/plugins/frontend-asciicast.ts
new file mode 100644
index 00000000000..f8bdefb316a
--- /dev/null
+++ b/web_src/js/render/plugins/frontend-asciicast.ts
@@ -0,0 +1,23 @@
+import type {FrontendRenderFunc} from '../plugin.ts';
+
+export const frontendRender: FrontendRenderFunc = async (opts): Promise => {
+ try {
+ const [player] = await Promise.all([
+ import('asciinema-player'),
+ import('asciinema-player/dist/bundle/asciinema-player.css'),
+ ]);
+ player.create({data: opts.contentString()}, opts.container, {
+ // poster (a preview frame) to display until the playback is started.
+ // Set it to 1 hour (also means the end if the video is shorter) to make the preview frame show more.
+ poster: 'npt:1:0:0',
+ });
+ // Related: https://github.com/asciinema/asciinema-player/blob/develop/src/components/Terminal.js :
+ // Old PR: Fix UI regression of asciinema player https://github.com/go-gitea/gitea/pull/26159
+ opts.container.querySelector('.ap-term')!.style.overflow = 'hidden';
+ opts.container.querySelector('.ap-player')!.style.borderRadius = '0';
+ return true;
+ } catch (error) {
+ console.error(error);
+ return false;
+ }
+};
diff --git a/web_src/js/vitest.setup.ts b/web_src/js/vitest.setup.ts
index a6ec019ff8a..1c0c27a667e 100644
--- a/web_src/js/vitest.setup.ts
+++ b/web_src/js/vitest.setup.ts
@@ -14,5 +14,3 @@ window.config = {
i18n: {},
frontendInited: false,
};
-
-window.testModules = {};