fixes video not played from defined parameters in embed service (#5023)

* fixes video not played from defined parameters in embed service

* adds parameters to the oembed services

* Styling

Co-authored-by: Chocobozzz <me@florianbigard.com>

2 files changed, 64 insertions, 14 deletions

diff --git a/server/controllers/services.ts b/server/controllers/services.ts
index 9151e1b04..70d08ab69 100644
--- a/server/controllers/services.ts
+++ b/server/controllers/services.ts
@@ -1,9 +1,9 @@
 import express from 'express'
-import { EMBED_SIZE, PREVIEWS_SIZE, WEBSERVER, THUMBNAILS_SIZE } from '../initializers/constants'
-import { asyncMiddleware, oembedValidator } from '../middlewares'
-import { accountNameWithHostGetValidator } from '../middlewares/validators'
 import { MChannelSummary } from '@server/types/models'
 import { escapeHTML } from '@shared/core-utils/renderer'
+import { EMBED_SIZE, PREVIEWS_SIZE, THUMBNAILS_SIZE, WEBSERVER } from '../initializers/constants'
+import { asyncMiddleware, oembedValidator } from '../middlewares'
+import { accountNameWithHostGetValidator } from '../middlewares/validators'
 
 const servicesRouter = express.Router()
 
@@ -36,7 +36,7 @@ function generatePlaylistOEmbed (req: express.Request, res: express.Response) {
   const json = buildOEmbed({
     channel: playlist.VideoChannel,
     title: playlist.name,
-    embedPath: playlist.getEmbedStaticPath(),
+    embedPath: playlist.getEmbedStaticPath() + buildPlayerURLQuery(req.query.url),
     previewPath: playlist.getThumbnailStaticPath(),
     previewSize: THUMBNAILS_SIZE,
     req
@@ -51,7 +51,7 @@ function generateVideoOEmbed (req: express.Request, res: express.Response) {
   const json = buildOEmbed({
     channel: video.VideoChannel,
     title: video.name,
-    embedPath: video.getEmbedStaticPath(),
+    embedPath: video.getEmbedStaticPath() + buildPlayerURLQuery(req.query.url),
     previewPath: video.getPreviewStaticPath(),
     previewSize: PREVIEWS_SIZE,
     req
@@ -60,6 +60,40 @@ function generateVideoOEmbed (req: express.Request, res: express.Response) {
   return res.json(json)
 }
 
+function buildPlayerURLQuery (inputQueryUrl: string) {
+  const allowedParameters = new Set([
+    'start',
+    'stop',
+    'loop',
+    'autoplay',
+    'muted',
+    'controls',
+    'controlBar',
+    'title',
+    'api',
+    'warningTitle',
+    'peertubeLink',
+    'p2p',
+    'subtitle',
+    'bigPlayBackgroundColor',
+    'mode',
+    'foregroundColor'
+  ])
+
+  const params = new URLSearchParams()
+
+  new URL(inputQueryUrl).searchParams.forEach((v, k) => {
+    if (allowedParameters.has(k)) {
+      params.append(k, v)
+    }
+  })
+
+  const stringQuery = params.toString()
+  if (!stringQuery) return ''
+
+  return '?' + stringQuery
+}
+
 function buildOEmbed (options: {
   req: express.Request
   title: string
diff --git a/server/tests/api/server/services.ts b/server/tests/api/server/services.ts
index 5fd2abda4..2f95f953b 100644
--- a/server/tests/api/server/services.ts
+++ b/server/tests/api/server/services.ts
@@ -13,6 +13,21 @@ describe('Test services', function () {
   let playlistDisplayName: string
   let video: Video
 
+  const urlSuffixes = [
+    {
+      input: '',
+      output: ''
+    },
+    {
+      input: '?param=1',
+      output: ''
+    },
+    {
+      input: '?muted=1&warningTitle=0&toto=1',
+      output: '?muted=1&warningTitle=0'
+    }
+  ]
+
   before(async function () {
     this.timeout(30000)
 
@@ -52,14 +67,15 @@ describe('Test services', function () {
 
   it('Should have a valid oEmbed video response', async function () {
     for (const basePath of [ '/videos/watch/', '/w/' ]) {
-      for (const suffix of [ '', '?param=1' ]) {
-        const oembedUrl = server.url + basePath + video.uuid + suffix
+      for (const suffix of urlSuffixes) {
+        const oembedUrl = server.url + basePath + video.uuid + suffix.input
 
         const res = await server.services.getOEmbed({ oembedUrl })
         const expectedHtml = '<iframe width="560" height="315" sandbox="allow-same-origin allow-scripts allow-popups" ' +
-          `title="${video.name}" src="http://localhost:${server.port}/videos/embed/${video.uuid}" ` +
+          `title="${video.name}" src="http://${server.host}/videos/embed/${video.uuid}${suffix.output}" ` +
           'frameborder="0" allowfullscreen></iframe>'
-        const expectedThumbnailUrl = 'http://localhost:' + server.port + video.previewPath
+
+        const expectedThumbnailUrl = 'http://' + server.host + video.previewPath
 
         expect(res.body.html).to.equal(expectedHtml)
         expect(res.body.title).to.equal(video.name)
@@ -75,12 +91,12 @@ describe('Test services', function () {
 
   it('Should have a valid playlist oEmbed response', async function () {
     for (const basePath of [ '/videos/watch/playlist/', '/w/p/' ]) {
-      for (const suffix of [ '', '?param=1' ]) {
-        const oembedUrl = server.url + basePath + playlistUUID + suffix
+      for (const suffix of urlSuffixes) {
+        const oembedUrl = server.url + basePath + playlistUUID + suffix.input
 
         const res = await server.services.getOEmbed({ oembedUrl })
         const expectedHtml = '<iframe width="560" height="315" sandbox="allow-same-origin allow-scripts allow-popups" ' +
-          `title="${playlistDisplayName}" src="http://localhost:${server.port}/video-playlists/embed/${playlistUUID}" ` +
+          `title="${playlistDisplayName}" src="http://${server.host}/video-playlists/embed/${playlistUUID}${suffix.output}" ` +
           'frameborder="0" allowfullscreen></iframe>'
 
         expect(res.body.html).to.equal(expectedHtml)
@@ -97,14 +113,14 @@ describe('Test services', function () {
 
   it('Should have a valid oEmbed response with small max height query', async function () {
     for (const basePath of [ '/videos/watch/', '/w/' ]) {
-      const oembedUrl = 'http://localhost:' + server.port + basePath + video.uuid
+      const oembedUrl = 'http://' + server.host + basePath + video.uuid
       const format = 'json'
       const maxHeight = 50
       const maxWidth = 50
 
       const res = await server.services.getOEmbed({ oembedUrl, format, maxHeight, maxWidth })
       const expectedHtml = '<iframe width="50" height="50" sandbox="allow-same-origin allow-scripts allow-popups" ' +
-        `title="${video.name}" src="http://localhost:${server.port}/videos/embed/${video.uuid}" ` +
+        `title="${video.name}" src="http://${server.host}/videos/embed/${video.uuid}" ` +
         'frameborder="0" allowfullscreen></iframe>'
 
       expect(res.body.html).to.equal(expectedHtml)