eqlabs / wmm-components

A web component library for web monetization

A Web Component Library for Web Monetization

wmm-web-components:     wmm-utils:

Web Monetization (WM) is a new technology allowing content creators to easily receive money from their digital goods. wmm-components includes a collection of components, that allow creators of media (whether video, audio or text) to start receiving money with a simple installation and configuration file.

Open documentation

Quickstart

See examples/withoutBackend on how to use the media UI components without backend verification.

For full fledged video and audio example, run:

npm run exampleStreaming

Run text example:

npm run exampleText

Online examples

Online audio and video example

Online text text

wmm-components's Issues

Milestone blog post

Free credits for first time users

Free money for trial users
Pop-up indicating that free money is used

• no money
• no wallet - cta get WM wallet

Milestone / work order?

In the current project plan the main milestones starts with creating libraries for video, audio and text, in this order.

Is this proper order or would it be better to start from simpler like text and go on with more complex topics.

Add a licence

MIT?

Visual and UI elements

WMM logo
Docusaurus basic layout / project visuals
Pop-up design (events)
State indicator, traffic lights etc.

Milestone blog post (Technical scope)

Let's use https://community.webmonetization.org/ as project blog post medium.

First technical blog should be a simple walk-through of findings and insights around web monetization.

Bootstrapping the examples website

What to use for documentation?

GitBook?
Docusaurus? https://docusaurus.io/ https://v2.docusaurus.io/

View multiple videos on same page

Page layout
Pause controls
Payment pointer tracking
Revenue share?

Milestone blog post (project scope)

Posting a blog post from the progress and insights from the Research milestone (1).

Bootstrap the project structure

/src
/docs
package.json
package-lock.json
...

^ Something along these lines

EPIC: A web component for streaming monetized video

• Create epic issues for web component

Backend & SSR bootstrap

It think backend setup needs to do with @JaniAnttonen

Use Lerna for monorepo shenanigans (or don't)

Lerna: Not necessarily an absolute requirement, but would probably ease up any releases.

Package structure: IMO seems a bit wild at the moment, so I'll leave a suggestion:

wmm-components – package.json, enables installing all components as a single package

wmm-video – package.json, individually installable
wmm-audio – package.json, individually installable
wmm-article – package.json, individually installable
wmm-utils – package.json, individually installable, all backend code resides here.

Online examples not working

Video/Audio: http://138.68.84.249:3009
Text: http://138.68.84.249:3008

Both require a working webmonetization-enabled wallet as of now, so the only ways to run the demos now are:

1. Subscribe to Coil
2. ...run them locally

Move backend-related code and dependencies out of frontend component libraries

...to wm-utils or something similar.

Why?

This is because we should separate frontend libraries from any backend code, since all dependencies not marked as devDependencies will add unused code in our libraries.

Suggestions

These individual web component libraries could have a demo folder which would have the demo, utilizing backend code from wmm-utils, or wmm-backend in the future. All dependencies only required in the demo should be marked and installed as devDependencies. Good resource on how to think about frontend library demos is https://open-wc.org/guides/developing-components/going-buildless/#dev-server

This demo code would not get included in any package installs, since it would be not included in the download as it is ignored in .npmignore inside the package folder.

Documentation and tests for the web component

Create cards / issues for milestones

An application example with and without backend integration

Overview of WM plugins, libraries, web components

In the first milestone we focus on research of existing implementations, libraries, plugins and web components.

We can use https://docs.google.com/spreadsheets/d/1rnasMFd1M2l-iaY0a8pEb3UJGi6zFVevNLA44jhbIJo/edit#gid=470254941 until find a way to keep good list and status page in Github

Video component events

Use vmm-video element as event emitter for both video state and monetization state related to this media instance.

Currently implemented:

• bind to all media events in video element https://developer.mozilla.org/en-US/docs/Web/Guide/Events/Media_events
• 'monetized' - backend verifed monetization event (show account balance in the details)
• 'monetizeFailed' - monetization event failed (with reason of failure)
• 'monetizationStopped' - currently fires when wmm-video monetization is replaced by another media monetization
• what else...?

Quick start should focus on usage, not examples

Quick start should be converted to a quick guide on how to:

1. install &
2. import &
3. use

...the web components in a production setting instead of running the ready-made examples

Define tools

• Repo - Github
• Project management - Github
• Ganban - Github
• Documentation - Docusaurus
• Primary communication - Slack
• Reference / link list