Inject plugin CSS in embed too

author: Chocobozzz <me@florianbigard.com> 2020-08-24 11:25:40 +0200
committer: Chocobozzz <me@florianbigard.com> 2020-08-24 11:25:40 +0200
commit: cf649c2ed918b3cc6bd4c92f38c7752174ac1e9a (patch)
tree: 11f3be3a12ee6f717d1e814e26fa802a8ac871bc /server
parent: 5505981154195131f961beeba355cc1d173983f7 (diff)
download: PeerTube-cf649c2ed918b3cc6bd4c92f38c7752174ac1e9a.tar.gz
PeerTube-cf649c2ed918b3cc6bd4c92f38c7752174ac1e9a.tar.zst
PeerTube-cf649c2ed918b3cc6bd4c92f38c7752174ac1e9a.zip
3 files changed, 61 insertions, 11 deletions
diff --git a/server/controllers/client.ts b/server/controllers/client.ts
index 39a198b59..335a0e082 100644
--- a/server/controllers/client.ts
+++ b/server/controllers/client.ts
@@ -12,7 +12,6 @@ import { asyncMiddleware, embedCSP } from '../middlewares'
 const clientsRouter = express.Router()
 const distPath = join(root(), 'client', 'dist')
-const embedPath = join(distPath, 'standalone', 'videos', 'embed.html')
 const testEmbedPath = join(distPath, 'standalone', 'videos', 'test-embed.html')
 // Special route that add OpenGraph and oEmbed tags
@@ -27,11 +26,16 @@ const embedMiddlewares = [
    ? embedCSP
    : (req: express.Request, res: express.Response, next: express.NextFunction) => next(),
-  (req: express.Request, res: express.Response) => {
+  (req: express.Request, res: express.Response, next: express.NextFunction) => {
    res.removeHeader('X-Frame-Options')
    // Don't cache HTML file since it's an index to the immutable JS/CSS files
-    res.sendFile(embedPath, { maxAge: 0 })
+    res.setHeader('Cache-Control', 'public, max-age=0')
-  }
+    next()
+  },
+  asyncMiddleware(generateEmbedHtmlPage)
 ]
 clientsRouter.use('/videos/embed', ...embedMiddlewares)
@@ -125,6 +129,12 @@ async function serveIndexHTML (req: express.Request, res: express.Response) {
  return res.status(404).end()
 }
+async function generateEmbedHtmlPage (req: express.Request, res: express.Response) {
+  const html = await ClientHtml.getEmbedHTML()
+  return sendHTML(html, res)
+}
 async function generateHTMLPage (req: express.Request, res: express.Response, paramLang?: string) {
  const html = await ClientHtml.getDefaultHTMLPage(req, res, paramLang)
diff --git a/server/lib/client-html.ts b/server/lib/client-html.ts
index 6bc48b5df..9f668dedb 100644
--- a/server/lib/client-html.ts
+++ b/server/lib/client-html.ts
@@ -171,6 +171,23 @@ export class ClientHtml {
    return this.getAccountOrChannelHTMLPage(() => VideoChannelModel.loadByNameWithHostAndPopulateAccount(nameWithHost), req, res)
  }
+  static async getEmbedHTML () {
+    const path = ClientHtml.getEmbedPath()
+    console.log('coucu')
+    console.log(path)
+    if (ClientHtml.htmlCache[path]) return ClientHtml.htmlCache[path]
+    const buffer = await readFile(path)
+    let html = buffer.toString()
+    html = await ClientHtml.addAsyncPluginCSS(html)
+    ClientHtml.htmlCache[path] = html
+    return html
+  }
  private static async getAccountOrChannelHTMLPage (
    loader: () => Bluebird<MAccountActor | MChannelActor>,
    req: express.Request,
@@ -252,6 +269,10 @@ export class ClientHtml {
    return join(__dirname, '../../../client/dist/' + buildFileLocale(lang) + '/index.html')
  }
+  private static getEmbedPath () {
+    return join(__dirname, '../../../client/dist/standalone/videos/embed.html')
+  }
  private static addHtmlLang (htmlStringPage: string, paramLang: string) {
    return htmlStringPage.replace('<html>', `<html lang="${paramLang}">`)
  }
diff --git a/server/tests/api/server/plugins.ts b/server/tests/api/server/plugins.ts
index 9885be4e8..ad0a5139b 100644
--- a/server/tests/api/server/plugins.ts
+++ b/server/tests/api/server/plugins.ts
@@ -28,7 +28,8 @@ import {
  updatePluginPackageJSON,
  updatePluginSettings,
  wait,
-  waitUntilLog
+  waitUntilLog,
+  makeHTMLRequest
 } from '../../../../shared/extra-utils'
 import { PluginType } from '../../../../shared/models/plugins/plugin.type'
 import { PeerTubePluginIndex } from '../../../../shared/models/plugins/peertube-plugin-index.model'
@@ -119,9 +120,15 @@ describe('Test plugins', function () {
  })
  it('Should have an empty global css', async function () {
-    const res = await getPluginsCSS(server.url)
+    {
+      const res = await getPluginsCSS(server.url)
+      expect(res.text).to.be.empty
+    }
-    expect(res.text).to.be.empty
+    for (const path of [ '/', '/videos/embed/1', '/video-playlists/embed/1' ]) {
+      const res = await makeHTMLRequest(server.url, path)
+      expect(res.text).to.not.include('link rel="stylesheet" href="/plugins/global.css')
+    }
  })
  it('Should install a plugin and a theme', async function () {
@@ -141,9 +148,15 @@ describe('Test plugins', function () {
  })
  it('Should have the correct global css', async function () {
-    const res = await getPluginsCSS(server.url)
+    {
+      const res = await getPluginsCSS(server.url)
+      expect(res.text).to.contain('background-color: red')
+    }
-    expect(res.text).to.contain('background-color: red')
+    for (const path of [ '/', '/videos/embed/1', '/video-playlists/embed/1' ]) {
+      const res = await makeHTMLRequest(server.url, path)
+      expect(res.text).to.include('link rel="stylesheet" href="/plugins/global.css')
+    }
  })
  it('Should have the plugin loaded in the configuration', async function () {
@@ -388,9 +401,15 @@ describe('Test plugins', function () {
  })
  it('Should have an empty global css', async function () {
-    const res = await getPluginsCSS(server.url)
+    {
+      const res = await getPluginsCSS(server.url)
+      expect(res.text).to.be.empty
+    }
-    expect(res.text).to.be.empty
+    for (const path of [ '/', '/videos/embed/1', '/video-playlists/embed/1' ]) {
+      const res = await makeHTMLRequest(server.url, path)
+      expect(res.text).to.not.include('link rel="stylesheet" href="/plugins/global.css')
+    }
  })
  it('Should list uninstalled plugins', async function () {
author	Chocobozzz <me@florianbigard.com>	2020-08-24 11:25:40 +0200
committer	Chocobozzz <me@florianbigard.com>	2020-08-24 11:25:40 +0200
commit	cf649c2ed918b3cc6bd4c92f38c7752174ac1e9a (patch)
tree	11f3be3a12ee6f717d1e814e26fa802a8ac871bc /server
parent	5505981154195131f961beeba355cc1d173983f7 (diff)
download	PeerTube-cf649c2ed918b3cc6bd4c92f38c7752174ac1e9a.tar.gz PeerTube-cf649c2ed918b3cc6bd4c92f38c7752174ac1e9a.tar.zst PeerTube-cf649c2ed918b3cc6bd4c92f38c7752174ac1e9a.zip

diff --git a/server/controllers/client.ts b/server/controllers/client.ts index 39a198b59..335a0e082 100644 --- a/server/controllers/client.ts +++ b/server/controllers/client.ts
@@ -12,7 +12,6 @@ import { asyncMiddleware, embedCSP } from '../middlewares'
12	const clientsRouter = express.Router()	12	const clientsRouter = express.Router()
13		13
14	const distPath = join(root(), 'client', 'dist')	14	const distPath = join(root(), 'client', 'dist')
15	const embedPath = join(distPath, 'standalone', 'videos', 'embed.html')
16	const testEmbedPath = join(distPath, 'standalone', 'videos', 'test-embed.html')	15	const testEmbedPath = join(distPath, 'standalone', 'videos', 'test-embed.html')
17		16
18	// Special route that add OpenGraph and oEmbed tags	17	// Special route that add OpenGraph and oEmbed tags
@@ -27,11 +26,16 @@ const embedMiddlewares = [
27	? embedCSP	26	? embedCSP
28	: (req: express.Request, res: express.Response, next: express.NextFunction) => next(),	27	: (req: express.Request, res: express.Response, next: express.NextFunction) => next(),
29		28
30	(req: express.Request, res: express.Response) => {	29	(req: express.Request, res: express.Response, next: express.NextFunction) => {
31	res.removeHeader('X-Frame-Options')	30	res.removeHeader('X-Frame-Options')
		31
32	// Don't cache HTML file since it's an index to the immutable JS/CSS files	32	// Don't cache HTML file since it's an index to the immutable JS/CSS files
33	res.sendFile(embedPath, { maxAge: 0 })	33	res.setHeader('Cache-Control', 'public, max-age=0')
34	}	34
		35	next()
		36	},
		37
		38	asyncMiddleware(generateEmbedHtmlPage)
35	]	39	]
36		40
37	clientsRouter.use('/videos/embed', ...embedMiddlewares)	41	clientsRouter.use('/videos/embed', ...embedMiddlewares)
@@ -125,6 +129,12 @@ async function serveIndexHTML (req: express.Request, res: express.Response) {
125	return res.status(404).end()	129	return res.status(404).end()
126	}	130	}
127		131
		132	async function generateEmbedHtmlPage (req: express.Request, res: express.Response) {
		133	const html = await ClientHtml.getEmbedHTML()
		134
		135	return sendHTML(html, res)
		136	}
		137
128	async function generateHTMLPage (req: express.Request, res: express.Response, paramLang?: string) {	138	async function generateHTMLPage (req: express.Request, res: express.Response, paramLang?: string) {
129	const html = await ClientHtml.getDefaultHTMLPage(req, res, paramLang)	139	const html = await ClientHtml.getDefaultHTMLPage(req, res, paramLang)
130		140


diff --git a/server/lib/client-html.ts b/server/lib/client-html.ts index 6bc48b5df..9f668dedb 100644 --- a/server/lib/client-html.ts +++ b/server/lib/client-html.ts
@@ -171,6 +171,23 @@ export class ClientHtml {
171	return this.getAccountOrChannelHTMLPage(() => VideoChannelModel.loadByNameWithHostAndPopulateAccount(nameWithHost), req, res)	171	return this.getAccountOrChannelHTMLPage(() => VideoChannelModel.loadByNameWithHostAndPopulateAccount(nameWithHost), req, res)
172	}	172	}
173		173
		174	static async getEmbedHTML () {
		175	const path = ClientHtml.getEmbedPath()
		176	console.log('coucu')
		177	console.log(path)
		178
		179	if (ClientHtml.htmlCache[path]) return ClientHtml.htmlCache[path]
		180
		181	const buffer = await readFile(path)
		182
		183	let html = buffer.toString()
		184	html = await ClientHtml.addAsyncPluginCSS(html)
		185
		186	ClientHtml.htmlCache[path] = html
		187
		188	return html
		189	}
		190
174	private static async getAccountOrChannelHTMLPage (	191	private static async getAccountOrChannelHTMLPage (
175	loader: () => Bluebird<MAccountActor \| MChannelActor>,	192	loader: () => Bluebird<MAccountActor \| MChannelActor>,
176	req: express.Request,	193	req: express.Request,
@@ -252,6 +269,10 @@ export class ClientHtml {
252	return join(__dirname, '../../../client/dist/' + buildFileLocale(lang) + '/index.html')	269	return join(__dirname, '../../../client/dist/' + buildFileLocale(lang) + '/index.html')
253	}	270	}
254		271
		272	private static getEmbedPath () {
		273	return join(__dirname, '../../../client/dist/standalone/videos/embed.html')
		274	}
		275
255	private static addHtmlLang (htmlStringPage: string, paramLang: string) {	276	private static addHtmlLang (htmlStringPage: string, paramLang: string) {
256	return htmlStringPage.replace('<html>', `<html lang="${paramLang}">`)	277	return htmlStringPage.replace('<html>', `<html lang="${paramLang}">`)
257	}	278	}


diff --git a/server/tests/api/server/plugins.ts b/server/tests/api/server/plugins.ts index 9885be4e8..ad0a5139b 100644 --- a/server/tests/api/server/plugins.ts +++ b/server/tests/api/server/plugins.ts
@@ -28,7 +28,8 @@ import {
28	updatePluginPackageJSON,	28	updatePluginPackageJSON,
29	updatePluginSettings,	29	updatePluginSettings,
30	wait,	30	wait,
31	waitUntilLog	31	waitUntilLog,
		32	makeHTMLRequest
32	} from '../../../../shared/extra-utils'	33	} from '../../../../shared/extra-utils'
33	import { PluginType } from '../../../../shared/models/plugins/plugin.type'	34	import { PluginType } from '../../../../shared/models/plugins/plugin.type'
34	import { PeerTubePluginIndex } from '../../../../shared/models/plugins/peertube-plugin-index.model'	35	import { PeerTubePluginIndex } from '../../../../shared/models/plugins/peertube-plugin-index.model'
@@ -119,9 +120,15 @@ describe('Test plugins', function () {
119	})	120	})
120		121
121	it('Should have an empty global css', async function () {	122	it('Should have an empty global css', async function () {
122	const res = await getPluginsCSS(server.url)	123	{
		124	const res = await getPluginsCSS(server.url)
		125	expect(res.text).to.be.empty
		126	}
123		127
124	expect(res.text).to.be.empty	128	for (const path of [ '/', '/videos/embed/1', '/video-playlists/embed/1' ]) {
		129	const res = await makeHTMLRequest(server.url, path)
		130	expect(res.text).to.not.include('link rel="stylesheet" href="/plugins/global.css')
		131	}
125	})	132	})
126		133
127	it('Should install a plugin and a theme', async function () {	134	it('Should install a plugin and a theme', async function () {
@@ -141,9 +148,15 @@ describe('Test plugins', function () {
141	})	148	})
142		149
143	it('Should have the correct global css', async function () {	150	it('Should have the correct global css', async function () {
144	const res = await getPluginsCSS(server.url)	151	{
		152	const res = await getPluginsCSS(server.url)
		153	expect(res.text).to.contain('background-color: red')
		154	}
145		155
146	expect(res.text).to.contain('background-color: red')	156	for (const path of [ '/', '/videos/embed/1', '/video-playlists/embed/1' ]) {
		157	const res = await makeHTMLRequest(server.url, path)
		158	expect(res.text).to.include('link rel="stylesheet" href="/plugins/global.css')
		159	}
147	})	160	})
148		161
149	it('Should have the plugin loaded in the configuration', async function () {	162	it('Should have the plugin loaded in the configuration', async function () {
@@ -388,9 +401,15 @@ describe('Test plugins', function () {
388	})	401	})
389		402
390	it('Should have an empty global css', async function () {	403	it('Should have an empty global css', async function () {
391	const res = await getPluginsCSS(server.url)	404	{
		405	const res = await getPluginsCSS(server.url)
		406	expect(res.text).to.be.empty
		407	}
392		408
393	expect(res.text).to.be.empty	409	for (const path of [ '/', '/videos/embed/1', '/video-playlists/embed/1' ]) {
		410	const res = await makeHTMLRequest(server.url, path)
		411	expect(res.text).to.not.include('link rel="stylesheet" href="/plugins/global.css')
		412	}
394	})	413	})
395		414
396	it('Should list uninstalled plugins', async function () {	415	it('Should list uninstalled plugins', async function () {