From 765cec3ee53c3ae1aefdff36a730764c2db00030 Mon Sep 17 00:00:00 2001 From: Nadir Hussain Laskar Date: Mon, 6 May 2019 23:41:56 +0530 Subject: [PATCH 01/17] Transform description from iframe to video element As server is sending video source of milestone video as description inside iframe tag. Which generates a video element by browser inside iframe having auto-play and other controls enabled by default leading to the auto-play issue. As part of the front-end only fix, here i am converting the iframe to a video tag by reading the iframe source and applying it to the video element. --- src/components/views/ViewMilestone.jsx | 4 ++++ 1 file changed, 4 insertions(+) diff --git a/src/components/views/ViewMilestone.jsx b/src/components/views/ViewMilestone.jsx index 2a538b7d8..e950d794e 100644 --- a/src/components/views/ViewMilestone.jsx +++ b/src/components/views/ViewMilestone.jsx @@ -112,6 +112,10 @@ class ViewMilestone extends Component { } renderDescription() { + // Convert the iframe to video element + this.state.milestone.description = ``; return ReactHtmlParser(this.state.milestone.description, { transform(node, index) { if (node.attribs && node.attribs.class === 'ql-video') { From 063cec9aa026ed36ba03c6e6d93a7f2947d10c6d Mon Sep 17 00:00:00 2001 From: Nadir Hussain Laskar Date: Tue, 7 May 2019 00:02:35 +0530 Subject: [PATCH 02/17] Repalced use of jquery with regex to extract url Instead of using jquery to read iframe src attribute, modified to using regex to extract the attribute. --- src/components/views/ViewMilestone.jsx | 9 ++++++--- 1 file changed, 6 insertions(+), 3 deletions(-) diff --git a/src/components/views/ViewMilestone.jsx b/src/components/views/ViewMilestone.jsx index e950d794e..a991e504b 100644 --- a/src/components/views/ViewMilestone.jsx +++ b/src/components/views/ViewMilestone.jsx @@ -113,9 +113,12 @@ class ViewMilestone extends Component { renderDescription() { // Convert the iframe to video element - this.state.milestone.description = ``; + let src = this.state.milestone.description.match(/(?<=\bsrc=")[^"]*/)[0]; + if(src){ + this.state.milestone.description = ``; + } return ReactHtmlParser(this.state.milestone.description, { transform(node, index) { if (node.attribs && node.attribs.class === 'ql-video') { From dea7101662d947835bc93879a8529f99acb8f5f4 Mon Sep 17 00:00:00 2001 From: Nadir Hussain Laskar Date: Tue, 7 May 2019 00:15:33 +0530 Subject: [PATCH 03/17] Transform a copy of description to video tag In order to not mutate the state of the component, making a copy of description for transforming and passing it to create react node. --- src/components/views/ViewMilestone.jsx | 8 +++++--- 1 file changed, 5 insertions(+), 3 deletions(-) diff --git a/src/components/views/ViewMilestone.jsx b/src/components/views/ViewMilestone.jsx index a991e504b..3ec3dd553 100644 --- a/src/components/views/ViewMilestone.jsx +++ b/src/components/views/ViewMilestone.jsx @@ -113,13 +113,15 @@ class ViewMilestone extends Component { renderDescription() { // Convert the iframe to video element - let src = this.state.milestone.description.match(/(?<=\bsrc=")[^"]*/)[0]; + let description = this.state.milestone.description; + let src = description.match(/(?<=\bsrc=")[^"]*/)[0]; if(src){ - this.state.milestone.description = `