FIX #740, Disable 'Autoplay' on videos recorded into Milestones

[nadirlaskar]

Issue
Problem is that the milestone's description is stored in db as iframe element
<iframe class="ql-video" frameborder="0" allowfullscreen="true" src="https://ipfs.giveth.io/ipfs/xxxxxxxxxxx"></iframe><p><br /></p>"

( back-end solution )

Which can be solved by converting the back-end code to store and return as video tag
<video controls="" autoplay="false" name="media"><source src="https://ipfs.giveth.io/ipfs/xxxxxxxxxxx" type="video/webm"></video>

or ( front-end solution )

we can transform that description to video element here like this by extracting the source from the iframe source and assign it to the video source

renderDescription() {
    // Convert the iframe to video element
    let description = this.state.milestone.description;
    let src = description.match(/(?<=\bsrc=")[^"]*/)[0];
    if(src){
      description = `<video controls="" autoplay="false" name="media">
                  <source src=${src} type="video/webm">
      </video>`;
    }
    // Pass the transformed description
    return ReactHtmlParser(description, {
      transform(node, index) {
        if (node.attribs && node.attribs.class === 'ql-video') {
          return (
            <div className="video-wrapper" key={index}>
              {convertNodeToElement(node, index)}
            </div>
          );
        }
        return undefined;
      },
    });
  }

In this pull request, I changed files required to fix from the front-end side solution.

[netlify]

Deploy preview for giveth-dapp processing.

Building with commit a697336

https://app.netlify.com/sites/giveth-dapp/deploys/5cedf9b4b8fa3b0009dbf494

[nadirlaskar]

There seems to be some error with CI due to following files,

Giveth/giveth-dapp/src/components/BackupWalletButton.jsx
Giveth/giveth-dapp/src/components/Balances.jsx
Giveth/giveth-dapp/src/components/ChangeMilestoneRecipientButton.jsx

...