Video Upload to YouTube and Vimeo using Theme Component

Hello

I really like your component thank you again to make it. :heart:

It worked super good but now we have some problem :confused:
Sometimes we have error while transcoding video (only mp4 files) status.error.transcode. The video is upload correctly but only shown on Vimeo and not place the link in composer.

The other problem is we cannot upload mp4 files from MacOS Safari browser.

Is that possible to solve these problems somehow?

Thank you for your answer! :slight_smile:

1 Like

Hello @dodesz, thanks for catching this edge case on MacOS Safari. It looks like an issue in Safari (a reference on SO), I have fixed this issue in the theme component, so once you update it, then refresh the page, you should be able to upload mp4 from Safari. I just tested on my own machine and it works now.

Regarding transcode errors, that happens on the Vimeo end, no way to do anything on our side.

4 Likes

Thank you for the quick fix! Now it works great on Safari :slight_smile:

Hello @ti0 ,

It seems to the Vimeo upload mechanism changed. When place the link on forum composer. Then on Vimeo they start converting the video. So the video cannot oneboxed and play on the forum because not ready. Thank you for your help! :slight_smile:

1 Like

Same here, but the issue now seems to affect Mozilla Firefox on all platforms.

There were a few other issues that occurred in Mozilla Firefox, but I will have to check back on those issues to provide further clarification.

So I think the problem is this. On Vimeo there is Waiting for convert section after Upload but before Convert.

On the Component there is a :arrow_down:
const STATUS_POLLING_INTERVAL_MILLIS = 10000;

If I am correct it means after the Upload process it send a request to Vimeo every 10 sec which is while the Waiting process comes back as the video complete. Because Vimeo Api not support Webhooks etc… So we need to send request periodically to find out the Transcoding process still processing or it is done.

I changed this to 60sec for us until comes a better solution this will enough most of the uploads to skip the Waiting process request. I tested with small ~10mb , medium ~500mb and large uploads ~ 2gb.
With small uploads the waiting time is few sec ~4-5sec, medium is ~10-15sec, large is ~40-45sec. I think it is depending how big is the uploaded file.
It seems works but if Waiting to convert process take more time than 60sec it will paste the link same as before. If we can skip this Waiting process it will be good.

i’d prefer Vimeo uploads go to uploader’s account rather than my common account… possible?

1 Like

@ti0 I don’t know if it’s just me, but I think something is broken. The upload is stuck at Authenticating and the following error is shown in Chrome Console

Some resources are blocked because their origin is not listed in your site’s Content Security Policy (CSP). Your site’s CSP is allowlist-based, so resources must be listed in the allowlist in order to be accessed.

A site’s Content Security Policy is set either as via an HTTP header (recommended), or via a meta HTML tag.

To fix this issue do one of the following:

1. (Recommended) If you're using an allowlist for `'script-src'` , consider switching from an allowlist CSP to a strict CSP, because strict CSPs are more robust against XSS . See how to set a strict CSP .
2. Or carefully check that all of the blocked resources are trustworthy; if they are, include their sources in the CSP of your site. ⚠️Never add a source you don't trust to your site's CSP. If you don't trust the source, consider hosting resources on your own site instead.

AFFECTED RESOURCES
https://apis.google.com//scs/apps-static//js/k=oz.gapi.en_US.bnEFfFZ9cyI.O/m=auth2,client/rt=j/sv=1/d=1/ed=1/am=AQ/rs=AGLTcCNaq8ri2P66tzK7chsKcRiE1CsLyQ/cb=gapi.loaded_0?le=ili,ipu,ili,ipu`

blocked script-src-elem api.js:12

@linzo this is a CSP issue, it has nothing to do with the theme component. Please read about Discourse CSP here: Mitigate XSS Attacks with Content Security Policy

@Zup, this is an additional feature request - possible of course but it is additional work which will have to be paid if you want it implemented. Let me know if you want that.

Sorry for the delayed response - yes there is a transcoding process after the upload, and the upload dialog will show that before it embeds the video. This is working as expected on my side. It waits till the transcoding completes, only then it closes the dialog and embeds the video. Here is a demo:

1 Like

I’m really excited for the potential of this theme component. Does this theme component also work from mobile? As in, if I’m on my phone can I upload a video from my photo library?

I tried viewing it in the Theme creator preview and received an Access Denied notice.

1 Like

Hi Deborah,

We use it on our forum with Vimeo uploads and works really well on every device. :slightly_smiling_face: The choosing process is same like Discourse but after you select the video you have to click the upload vimeo or youtube button to start the uploading.

2 Likes

Is your forum public? Could I check it out? Would love to see it in action! What’s the url?

2 Likes

This is working great! A nice feature would be the ability to have the videos upload to a particular folder on vimeo so I could keep the user’s uploads separate from my own. Thanks for this!

1 Like

Glad you like it :slight_smile: If you are willing to contribute for this feature request I can implement it or you can submit a PR, let me know.

2 Likes

Can videos be auto-captioned and the captions displayed by default? That’s really important for us for accessibility.

I’m on this step

It’s asking me what scopes to select for OAuth. Out of the 34 available, which ones need to be selected?

Screenshot of the Update selected scopes screen

You should only need upload related permissions. These are the only ones required for the plugin, you can add anything you want though better not to unless you really need them.

1 Like

Thanks @ti0 !

Google is now asking us to do the following

  1. Answer: How will the scopes be used? Explain to Google why you need these scopes, how you will use them, and why more limited scopes aren’t sufficient.

  2. Demo video: how will the scopes will be used? A YouTube video link is required when selecting sensitive or restricted scopes. Your YouTube video should demonstrate the OAuth grant process by users and explain, in detail, how you’ll use sensitive and restricted scopes within the app’s functionality for each OAuth client belonging to the project. Learn more The video should clearly show the app’s details such as the app name, OAuth client ID, and so on.

Could we create a template answer that is then added to this documentation?

I’ll try my best with #1 and definitely need help with #2.

  1. Users of our app will be able to upload videos directly to their Youtube account via our online forum at hub.youthpowercoalition.org. We need to be able to view their YouTube account and manage their YouTube videos in order to upload the video. Users choose their desired privacy level.

What do you think?

This sounds a bit dangerous because you don’t actually need to be able to view their account. The permissions give the app the ability to list their existing videos and add new ones.
I think just mentioning the first line is sufficient, and additionally you can put:

The permissions will give users the ability to upload and embed videos directly within our private instance of the open source forum software called Discourse (htttps://discourse.org). The app uses plugins to enable different functionality, the open source plugin for uploading videos is listed here: Video Upload to YouTube and Vimeo using Theme Component

I think this should be sufficient for #1.
For #2 you can make a quick demo of the upload process or use this one :

1 Like

The language and video link you provided worked well, @ti0, thank you!

Here’s the next message I got from the Google Cloud Trust & Safety Team regarding consent.

We reviewed your project and found that your privacy policy Privacy - Youth Power Hub doesn’t meet our requirements for the Google API Service: User Data Policy. If you want to continue with the verification process, please make sure the privacy policy linked to your project follows these requirements:

Privacy Policy Requirements

  • The URL in your project points to a privacy policy on a publicly accessible domain.
  • The privacy policy is hosted and accessible in the domain of your website.
  • The privacy policy is accessible from the app’s home page.
  • Users can view the privacy policy.
  • The privacy policy clearly describes the way your application accesses, uses, stores, or shares Google user data.
  • The privacy policy is linked to the OAuth Consent Screen on the Google API Console.
  • You only use Google user data in the ways described in your published privacy policy.

Limited Use Requirements

If your app uses restricted scopes, we’ll check that your privacy policy follows our Limited Use requirements.

You can find more information in the OAuth Application Verification FAQ.

Is there recommended language for the privacy policy?

1 Like