Video Upload to YouTube and Vimeo using Theme Component

theme-component
1

This new theme component enables video uploads from the Discourse composer to YouTube and Vimeo. For those already familiar with the plugin I developed recently, the same is now available in this Theme Component which can be added to any theme. This makes for a much easier installation and works in exactly the same way as the plugin.

Features

All forum members can upload videos to Vimeo or YouTube (admins can choose to enable either or both).

Admins can control the view and embed privacy of the videos uploaded to Vimeo using admin settings.

User can control view privacy of the videos uploaded to YouTube from the upload modal.

You can watch a demo of the plugin here (everything is same in the component except for the settings page. The component settings page is found under Admin > Customize > Components > Video Upload):

Configuration

Important: For theme components, you need to make sure you activate the component for the themes used on your instance (either click Add all themes or choose the themes you want).

image
image810Ă—260 27.5 KB

The developer setup for enabling uploads to YouTube and Vimeo are listed below. If you prefer someone to do it for you, you can request support by contacting me, @ti0.

For YouTube Uploads

YouTube uploads go to the uploaders account, unlike Vimeo uploads which go to a common account.

View steps

  • Create an account and project at https://console.developers.google.com

  • Enable the YouTube Data API v3

  • Setup the OAuth consent screen for External users (unless all users on your Discourse forum belong to one Google organization).

image
image1117Ă—766 48.9 KB

  • Setup your credentials:

    • Create an OAuth client ID
    • Choose Web Application type
    • Add your Discourse instance URL in the Authorized Javascript origins section

  • Copy the generated client ID only

  • Go to the component settings page in Discourse Admin, and paste the client ID in the youtube api client id field.

  • Enable Youtube uploads by enabling this setting: youtube upload enabled

  • Adjust the default view privacy options for Youtube if required.

  • You should now be able to upload videos from the Discourse topic composer directly to YouTube.

For Vimeo Uploads

Once you setup the component with the steps below, all community users will be able to upload videos to your Vimeo account.

You are responsible for limits and usage of your Vimeo account.

View steps

  • Create an account and app on Vimeo Developers:
    Log in to Vimeo

  • Generate an access token with Upload permissions

  • Go to the component settings page on your Discourse Admin, and add the generated access token in the vimeo api access token setting, and save

  • Enable Vimeo uploads by enabling the vimeo upload enabled setting.

  • Adjust view and embed privacy options

  • You should now be able to upload videos from the Discourse topic composer directly to Vimeo

Posting a video

  • To post a video, create a new Topic or reply to an existing
    topic.

  • Click the new Upload to Video button in the composer toolbar (the video icon). This button is only visible if you have enabled either YouTube or Vimeo (or both) in the plugin settings.

  • Choose a video file and edit the details such as title and description, if you wish.

  • Click the Upload to Vimeo or Upload to YouTube button.

    • The buttons shown will depend on whether you have enabled YouTube / Vimeo uploads (either or both).

    • It will show you upload progress, and then it will wait till the video completes the transcoding process.

    • The modal will remain open till the transcoding is complete.

    • Once transcoding is complete, the video link will be added to the composer (unless there was a transcoding error).

  • Save the post, and your video can be viewed by all other community users
    (depending on privacy options you selected).

Feature Requests

You can request additional features or support by contacting me @ti0.

Contributions

If you found this theme component helpful, please consider donating to the developer using this Paypal link: PayPal.Me

Big and small contributions are equally welcome :slight_smile:

If you would like to enhance the component / plugin, PRs are welcome.
:eyeglasses: Preview Theme creator preview
:hammer_and_wrench: Repository discourse-video-upload
:question: Install Guide How to install a theme or theme component
:open_book: New to Discourse Themes? Beginner’s guide to using Discourse Themes
29 Likes
2

Will the plugin be discontinued then?

1 Like
3

Not right now, but I think it will be much easier just to maintain the theme component. I will keep the plugin around for now, but recommend migrating to the theme component.

10 Likes
4

Thank you @ti0 :heart: This is awesome again :slightly_smiling_face::heart: Much easier to use a theme component then a plugin.

One question. Can you add these text to translate? Uploading , Transcoding Video and the video details title, description etc? Thank you! :slightly_smiling_face:

3 Likes
5

@Don all labels in the component can be customized now :slight_smile:

5 Likes
6

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
7

Hello @Don, 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.

6 Likes
8

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

9

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
10

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.

11

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.

12

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

1 Like
13

@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

14

@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
15

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.

2 Likes
16

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.

3 Likes
17

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

3 Likes
18

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!

2 Likes
19

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
20

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

1 Like