Authenticate Sponsorware Videos via GitHub

With Github’s new Github Sponsors program, Github developers can choose to sponsor open source projects.

This plugin is designed to help those wishing to monetize according to the ‘sponsorware’ pattern specified by Caleb Porzio:
https://calebporzio.com/i-just-hit-dollar-100000yr-on-github-sponsors-heres-how-i-did-it

Specifically it is to help with “Phase 3: Sponsored Screencasts”.

This plugin utilizes Github OAuth and calls the Github API to gatekeep specified videos to only Github Users, with the option to require sponsorship to a particular organization or user.
The plugin utilizes the built-in HTML5 video player, by embedding (when the user is authorized) a video and source element.

The plugin adds an editor block to include in posts and a custom post type that specifies the necessary information for each video.

• The “Installation” section has information on setting up the plugin properly, as well as plugin-wide settings.
• The “FAQ” is empty currently. This will grow as we get actual questions from the community upon release.
• The “Creating an Authenticated Video” section covers adding a video that is behind Github authentication.
• The “Screenshots” section shows the admin section pages as well default examples of the video and auth screens.
• The “Limitations/Future Features” section contains info on some features that are desirable and their relative priority, as well as current limitations of the plugin.

About Us

We have developed the open-source Opensheetmusicdisplay: A library for rendering MusicXML in the browser using Vexflow.
We developed this plugin to help us more easily create sponsor-specific screencasts.
We are making it available here free to give back to the sponsorware community and pay it forward.
We hope you find this plugin useful, and if so, please consider sponsoring us or donating at our link above.
Thank you!

Creating an Authenticated Video

There are two broad steps to creating an authenticated video, covered here.

Creating the Video

1. Navigate to Github Video -> All Github Sponsor Videos from the admin dashboard sidebar. 2. Select the "Add Github Sponsor Video" button at the top of this page 3. Fill out the information for the post (covered in detail below) 4. Click Publish 

Sponsor Video Fields

The video title will be rendered above the embedded video itself.

Media ID or Video Location URI

Specifies the actual video file. You can select “Upload” to the right to pick a video from the media library (or upload one), and it will automatically fill out the ID upon selection.
You can also enter a URL (e.g. http://commondatastorage.googleapis.com/gtv-videos-bucket/sample/Sintel.mp4)
or even file URI for a locally stored file (e.g. file:///var/www-content/video.mp4)

NOTE
It is highly recommended to not use the ‘http’, URL hosted version of locally stored media; You should instead prefer to use the WordPress media ID or the file:// schema.
This is because the video gatekeeping script will read and serve locally stored files directly, whereas for any URL hosted files it will read them as a web-client would, potentially using up your server bandwidth.
If it’s being hosted on a seperate CDN or server where that isn’t an issue, then have at it.

Github Organization or User Login

This is the organization or user ‘login’ from github to check against. This appears as the slug in the URL, e.g.: https://github.com/opensheetmusicdisplay/

This will also be the slug used when displaying the “Become a Sponsor Now” message to the user if they are not currently a sponsor but are authenticated with github, e.g.: https://github.com/sponsors/opensheetmusicdisplay

Splash Screen

This is another media field which can accept a URI (file or http/s) or a WordPress media item can be selected.
This is the image that is rendered as the background for the placeholder/dummy video when the user is not authenticated (or is not a sponsor) and it is also set as the ‘poster’ for the video.

Unauthenticated Video Description

This is a rich text editor field and will be rendered underneath the video placeholder as the description when a user is not authenticated or is not a sponsor.

Authenticated Video Description

This is the same as the previous field, but is rendered when the user is authenticated and permitted to view the video.

Including the Video in a Post

The video post type can be thought of as only a data mapping and will not render as a user facing post.
It must then be included in an actual WordPress post or page to show up.

1. Navigate to Posts -> Add New from the admin dashboard sidebar
2. Select the ‘+’ icon within the editor to choose a block
3. Select the “Github Authenticated Video” block.
4. With the block selected in the editor, use the “Select Video” dropdown on the right to select your previously created video.

You should see a mock-up of your video now rendered in the editor, with the title, splash screen and description.
If you save and publish this, the video should now render appropriately (either login splash screen, sponsor message, or actual video) on the front-end.

Limitations/Future Features

This section is to briefly address known limitations and features that are either planned, or we’d like to see.
NOTE: None of these are guaranteed. We will work on them as we can.

Limitations

• We do not specify any JS library to render the video, so older browsers that don’t support HTML5 will not work out of the box. At the present, you can use a library like videojs to render on the video element. So this seems best left as a choice for plugin users.
• We utilize very minimal CSS styling on the video block, instead preferring to leave it up to the theme/site styling.

Possible Future or Premium Features

• Specifying a sponsorship tier per-video. Asterisk (*) will indicate any tier.
• Size attribute for the video block. Currently we leave it up to CSS, but it might be nice to have the basic WordPress size dropdown.
• Nice-to-have: More tightly integrating Github API for the Organization (or User) slug field; It would be nice to be able to have some sort of typeahead or selection here.
• Nice-to-have: Same typeahead/selection for the Sponsorship Tier.
• Nice-to-have: Include auto-generation option for the Private Session Key field.