@brightspace-ui-labs/video-producer v0.1.1

d2l-labs-video-producer

Note: this is a "labs" component. While functional, these tasks are prerequisites to promotion to BrightspaceUI "official" status:

• Design organization buy-in
• design.d2l entry
• Architectural sign-off
• Continuous integration
• Cross-browser testing
• Unit tests (if applicable)
• Accessibility tests
• Visual diff tests
• Localization with Serge (if applicable)
• Demo page
• README documentation

Installation

To install from NPM:

npm install @brightspace-ui-labs/video-producer

video-producer

Usage

(See demo page for a more detailed example)

import '@brightspace-ui-labs/video-producer/video-producer.js';

const defaultLanguage = { code: 'en-us', name: 'English' };
let selectedLanguage = { code: 'fr-fr', name: 'French' };
const metadata = { cuts: [], chapters: [] };
const handleMetadataChanged = e => (metadata = e.detail);

class MyComponent {
	// ...
	render() {
		return html`
			<d2l-labs-video-producer
				.defaultLanguage="${defaultLanguage}"
				.metadata="${metadata}"
				.selectedLanguage="${selectedLanguage}"
				@metadata-changed="${handleMetadataChanged}"
				src="..."
			></d2l-labs-video-producer>
		`;
	}
}

Properties:

Events:

video-producer-language-selector

Usage

import '@brightspace-ui-labs/video-producer/video-producer-language-selector.js';

const languages = [
	{ code: 'en-us', name: 'English' },
	{ code: 'fr-fr', name: 'French' },
];
let selectedLanguage = { code: 'fr-fr', name: 'French' };
const handleSelectedLanguageChanged = e => (selectedLanguage = e.detail.selectedLanguage);

class MyComponent {
	// ...
	render() {
		return html`
			<d2l-labs-video-producer-language-selector
				.languages="${languages}"
				.selectedLanguage="${selectedLanguage}"
				@selected-language-changed="${handleSelectedLanguageChanged}"
			></d2l-labs-video-producer-language-selector>
		`;
	}
}

Properties:

Events:

Developing, Testing and Contributing

After cloning the repo, run npm install to install dependencies.

Running the demos

To start an es-dev-server that hosts the demo page and tests:

npm start

Linting

# eslint and lit-analyzer
npm run lint

# eslint only
npm run lint:eslint

# lit-analyzer only
npm run lint:lit

Testing

# lint, unit test and visual-diff test
npm test

# lint only
npm run lint

# unit tests only
npm run test:headless

# debug or run a subset of local unit tests
# then navigate to `http://localhost:9876/debug.html`
npm run test:headless:watch

Visual Diff Testing

This repo uses the @brightspace-ui/visual-diff utility to compare current snapshots against a set of golden snapshots stored in source control.

# run visual-diff tests
npm run test:diff

# subset of visual-diff tests:
npm run test:diff -- -g some-pattern

# update visual-diff goldens
npm run test:diff:golden

Golden snapshots in source control must be updated by Travis CI. To trigger an update, press the "Regenerate Goldens" button in the pull request visual-difference test run.

Versioning, Releasing & Deploying

All version changes should obey semantic versioning rules.

Releases use the semantic-release tooling and the angular preset for commit message syntax. Upon release, the version in package.json is updated, a tag and GitHub release is created and a new package will be deployed to NPM.

Commits prefixed with feat will trigger a minor release, while fix or perf will trigger a patch release. A commit containing BREAKING CHANGE will cause a major release to occur.

Other useful prefixes that will not trigger a release: build, ci, docs, refactor, style and test. More details in the Angular Contribution Guidelines.