@amedia/brick-mcp 0.1.2 → 0.1.4

package/data/components/brick-player.md

@@ -0,0 +1,331 @@
+---
+name: brick-player
+version: 2.0.0
+selector: brick-player-v2
+category: Media
+tags: [video, audio, player, flowplayer, media, streaming, ads, autoplay]
+use_cases: [video-playback, audio-playback, video-article, media-streaming, reels, front-page-videos]
+related: [brick-button, brick-tokens, brick-teaser-player]
+---
+
+# Brick Player
+
+A web component wrapper for Flowplayer that provides video and audio playback with advanced features including ad integration, analytics tracking, and responsive UI controls.
+
+## Key Capabilities
+
+- Plays both video and audio files using Flowplayer library
+- Integrated ad support with prebid and IMA3 (Google ads)
+- ADP analytics integration for video tracking
+- Autoplay with configurable behavior (true, false, or trueIfInteractive)
+- Floating player mode when scrolling outside viewport
+- Next video queueing for playlist functionality
+- Custom UI flags for control customization
+- Responsive aspect ratio control via CSS custom properties
+- Server-side rendering support
+
+## Props/Attributes
+
+| Attribute             | Type                                              | Default                              | Required | Description                                                      |
+| --------------------- | ------------------------------------------------- | ------------------------------------ | -------- | ---------------------------------------------------------------- |
+| `mediaid`             | string (UUID)                                     | `3689c16b-4cb9-4a36-baf4-2c3aa7fcc811` | yes      | Flowplayer media UUID (video or audio)                           |
+| `playerid`            | string (UUID)                                     | -                                    | no       | Flowplayer configuration UUID from workspace/publication         |
+| `audio`               | string                                            | `"false"`                            | no       | Toggles audio player UI when set to "true"                       |
+| `autoplay`            | `"true" \| "false" \| "trueIfInteractive"`        | `"false"`                            | no       | Automatically start playback                                     |
+| `muted`               | string                                            | `"false"`                            | no       | Mute sound when set to "true"                                    |
+| `loop`                | string                                            | `"false"`                            | no       | Loop video playback when set to "true"                           |
+| `title`               | string                                            | -                                    | no       | Displayed video title (also used as tooltip)                     |
+| `poster`              | string (URL)                                      | From player config                   | no       | Poster image URL (empty string "" hides default)                 |
+| `logo`                | string (URL)                                      | From player config                   | no       | Logo URL (empty string "" hides default)                         |
+| `aspectratio`         | string                                            | `"16:9"`                             | no       | Force aspect ratio (e.g., "16:9", "1:1")                         |
+| `adsdisabled`         | string                                            | `"false"`                            | no       | Disable ads when set to "true"                                   |
+| `scrollenabled`       | string                                            | `"false"`                            | no       | Float video on top when scrolled outside viewport                |
+| `playoutsideviewport` | string                                            | `"false"`                            | no       | Continue playback when scrolled outside viewport                 |
+| `teasertitle`         | string                                            | `"false"`                            | no       | Front page teaser title emphasis when set to "true"              |
+| `context`             | `"article" \| "videoArticle" \| "frontPage" \| "reels"` | -                                    | no       | Page context for ADP analytics (productFeature)                  |
+| `start`               | string (number)                                   | `"0"`                                | no       | Start offset for media playback in seconds (supports decimals)   |
+| `startquality`        | `"LOW" \| "MEDIUM" \| "HIGH"`                     | `"LOW"`                              | no       | Initial playback quality                                         |
+| `ui`                  | string (comma-separated flags)                    | -                                    | no       | UI config flags (e.g., "NO_FULLSCREEN,USE_PLAY_3")               |
+| `nextvideo`           | string (JSON)                                     | -                                    | no       | Enqueue next video as JSON object with title and mediaid         |
+
+## Examples
+
+### Basic Video Player
+
+```html
+<brick-player-v2
+  mediaid="b4ff4781-d507-49fd-b615-0cc12cc89856"
+>
+</brick-player-v2>
+```
+
+### Video with Player Configuration
+
+```html
+<brick-player-v2
+  mediaid="b4ff4781-d507-49fd-b615-0cc12cc89856"
+  playerid="your-flowplayer-config-uuid"
+  title="Breaking News Video"
+>
+</brick-player-v2>
+```
+
+### Audio Player
+
+```html
+<brick-player-v2
+  mediaid="audio-uuid-here"
+  audio="true"
+  title="Podcast Episode 42"
+>
+</brick-player-v2>
+```
+
+### Autoplay with Muted Sound
+
+```html
+<brick-player-v2
+  mediaid="b4ff4781-d507-49fd-b615-0cc12cc89856"
+  autoplay="true"
+  muted="true"
+  loop="true"
+>
+</brick-player-v2>
+```
+
+### Floating Player on Scroll
+
+```html
+<brick-player-v2
+  mediaid="b4ff4781-d507-49fd-b615-0cc12cc89856"
+  scrollenabled="true"
+  playoutsideviewport="true"
+>
+</brick-player-v2>
+```
+
+### Video with Next Video Queue
+
+```html
+<brick-player-v2
+  mediaid="b4ff4781-d507-49fd-b615-0cc12cc89856"
+  title="First Video"
+  nextvideo='{"title":"Second Video","mediaid":"150cc113-edfe-46ab-992f-f660c01c664f"}'
+>
+</brick-player-v2>
+```
+
+### Custom Aspect Ratio and Quality
+
+```html
+<brick-player-v2
+  mediaid="b4ff4781-d507-49fd-b615-0cc12cc89856"
+  aspectratio="1:1"
+  startquality="HIGH"
+>
+</brick-player-v2>
+```
+
+### Disable Ads
+
+```html
+<brick-player-v2
+  mediaid="b4ff4781-d507-49fd-b615-0cc12cc89856"
+  adsdisabled="true"
+>
+</brick-player-v2>
+```
+
+## Programmatic Usage
+
+### Control Playback
+
+```javascript
+// Get player element
+const player = document.querySelector('brick-player-v2');
+
+// Play video
+player.play();
+
+// Pause video
+player.pause();
+
+// Replay from beginning
+player.replay();
+
+// Skip to end
+player.skip();
+
+// Mute/unmute
+player.setMute(true);
+player.setMute(false);
+```
+
+### Listen to Events
+
+```javascript
+// Listen for time remaining updates (fires every second during playback)
+window.addEventListener('brick-player:timeleft', (e) => {
+  const { id, timeleft } = e.detail;
+  console.log(`${timeleft.next} seconds remaining`);
+});
+
+// Listen for playback state changes
+window.addEventListener('brick-player:playingstate', (e) => {
+  const { id, state } = e.detail;
+  console.log(`Player state: ${state}`); // 'play' | 'pause' | 'seek' | 'end'
+});
+
+// Listen for next video events
+window.addEventListener('brick-player:nextvideo', (e) => {
+  const { id, nextvideo } = e.detail;
+  console.log('Next video:', JSON.parse(nextvideo.next));
+});
+```
+
+## Event Reference
+
+### brick-player:timeleft
+
+Fires every second during playback with remaining time.
+
+```javascript
+{
+  type: 'brick-player:timeleft',
+  detail: {
+    id: string,           // Player instance ID
+    timeleft: {
+      prev: number,       // Previous seconds left
+      next: number,       // Current seconds left
+    },
+  },
+}
+```
+
+### brick-player:playingstate
+
+Fires when playback state changes.
+
+```javascript
+{
+  type: 'brick-player:playingstate',
+  detail: {
+    id: string,           // Player instance ID
+    state: 'play' | 'pause' | 'seek' | 'end'
+  },
+}
+```
+
+### brick-player:nextvideo
+
+Fires when next video is consumed or changed.
+
+```javascript
+{
+  type: 'brick-player:nextvideo',
+  detail: {
+    id: string,           // Player instance ID
+    nextvideo: {
+      prev: string,       // JSON string of previous next video
+      next: string,       // JSON string of current next video
+    },
+  },
+}
+```
+
+## Styling and CSS Properties
+
+### Override Aspect Ratio
+
+Force all videos to a specific aspect ratio regardless of original format:
+
+```css
+brick-player-v2 {
+  --brick-player-ar-container: 1/1;  /* Force 1:1 aspect ratio */
+}
+```
+
+Or apply inline:
+
+```html
+<div style="--brick-player-ar-container: 16/9;">
+  <brick-player-v2 mediaid="..."></brick-player-v2>
+</div>
+```
+
+## Analytics Integration
+
+The player integrates with ADP (Amedia Data Platform) for video analytics. Specify the page context:
+
+```html
+<brick-player-v2
+  mediaid="b4ff4781-d507-49fd-b615-0cc12cc89856"
+  context="article"
+>
+</brick-player-v2>
+```
+
+Valid context values: `article`, `videoArticle`, `frontPage`, `reels`
+
+## Ads Configuration
+
+### Disable Ads Completely
+
+```html
+<brick-player-v2 mediaid="..." adsdisabled="true"></brick-player-v2>
+```
+
+### Testing Flowplayer Versions
+
+Test different Flowplayer versions in production using query parameters:
+
+```
+?flowplayer_test=test           # Load 3/canary version
+?flowplayer_test=3/v3.0.7       # Load specific version
+?flowplayer_test=4/v1.0.0       # Load major version 4
+```
+
+### Important Ads Notes
+
+- Ads plugin and IMA3 are not loaded when `adsdisabled="true"`
+- Ads are automatically disabled for audio players (`audio="true"`)
+- Ad blocking detection is automatic
+- Ads can be disabled via Flowplayer keywords set to `no_ads`
+
+## Accessibility
+
+- Keyboard navigation support via Flowplayer controls
+- Play/pause with Space or Enter key
+- Volume control with arrow keys
+- Full-screen toggle with F key
+- Title attribute provides video description for screen readers
+
+## Technical Details
+
+- **Custom Element**: `brick-player-v2`
+- **Base Library**: Flowplayer 3.34.1
+- **Dependencies**:
+  - @flowplayer/player (video player engine)
+  - @amedia/adplogger-sdk (analytics)
+  - @amedia/brick-button (UI controls)
+  - @amedia/brick-tokens (design tokens)
+  - lit-html (rendering)
+- **Renders as**: Custom shadow DOM web component
+- **Attribute Observation**: All attributes are reactive after initialization
+
+## Important Notes
+
+- The component uses Flowplayer library for video/audio playback
+- Media IDs are UUIDs from Flowplayer workspace/publication
+- Player IDs reference pre-configured players in Flowplayer UI
+- Attributes are parsed into typed properties on initialization
+- Changes to attributes after initialization are reactive
+- Audio players do not load ads plugin (ads are disabled automatically)
+- The `nextvideo` attribute accepts JSON string format
+- Events bubble as regular DOM events (can be listened on window or element)
+- ADP analytics integration requires valid context value for proper tracking
+- Known issue: ADP logger may fail if ads plugin not loaded and user has ad blocker
+
+## Version
+
+Current version: 2.0.0

package/data/components/brick-published.md

@@ -0,0 +1,219 @@
+---
+name: brick-published
+version: 4.0.7
+selector: brick-published-v4
+category: Data Display
+tags: [date, time, datetime, published, modified, timestamp, metadata, semantic]
+use_cases: [article-metadata, blog-posts, news-articles, content-timestamp, seo]
+related: [brick-byline, brick-card, brick-teaser]
+---
+
+# Brick Published
+
+A semantic HTML component for displaying published or modified dates with proper datetime markup and Schema.org metadata support.
+
+## Key Capabilities
+
+- Displays formatted publication or modification dates
+- Semantic `<time>` element with proper datetime attribute
+- Schema.org itemprop support for SEO (datePublished/dateModified)
+- Customizable label prefix (e.g., "Published:", "Updated:")
+- ISO 8601 datetime format support
+- Lightweight, dependency-minimal component
+- Server-side rendering support
+
+## Props/Attributes
+
+| Attribute           | Type   | Default | Required | Description                                                           |
+| ------------------- | ------ | ------- | -------- | --------------------------------------------------------------------- |
+| `data-display-date` | string | -       | yes      | The formatted date string to display (e.g., "22.04.25 12:10")         |
+| `data-datetime`     | string | -       | yes      | ISO 8601 formatted datetime for `<time>` element datetime attribute   |
+| `data-label`        | string | -       | no       | Label prefix displayed before the date (e.g., "Published: ")          |
+| `data-itemprop`     | string | -       | no       | Schema.org itemprop value: "datePublished" or "dateModified"          |
+
+## Examples
+
+### Basic Published Date
+
+```html
+<brick-published-v4
+  data-display-date="22.04.25 12:10"
+  data-datetime="2025-04-22T12:10:00.000+0200"
+>
+</brick-published-v4>
+```
+
+### Published Date with Label
+
+```html
+<brick-published-v4
+  data-display-date="22.04.25 12:10"
+  data-datetime="2025-04-22T12:10:00.000+0200"
+  data-label="Publisert: "
+  data-itemprop="datePublished"
+>
+</brick-published-v4>
+```
+
+### Modified Date
+
+```html
+<brick-published-v4
+  data-display-date="22.04.22 12:01"
+  data-datetime="2022-04-22T12:00:01.000+0200"
+  data-label="Oppdatert: "
+  data-itemprop="dateModified"
+>
+</brick-published-v4>
+```
+
+### Article Metadata
+
+```html
+<article>
+  <h1>Breaking News Article</h1>
+  <brick-published-v4
+    data-display-date="08.01.26 14:30"
+    data-datetime="2026-01-08T14:30:00.000+0100"
+    data-label="Published: "
+    data-itemprop="datePublished"
+  >
+  </brick-published-v4>
+</article>
+```
+
+### Different Date Formats
+
+```html
+<!-- Norwegian format -->
+<brick-published-v4
+  data-display-date="8. januar 2026"
+  data-datetime="2026-01-08T14:30:00.000+0100"
+  data-label="Publisert "
+  data-itemprop="datePublished"
+>
+</brick-published-v4>
+
+<!-- Short format -->
+<brick-published-v4
+  data-display-date="08.01.26"
+  data-datetime="2026-01-08T14:30:00.000+0100"
+>
+</brick-published-v4>
+
+<!-- Time ago format -->
+<brick-published-v4
+  data-display-date="2 timer siden"
+  data-datetime="2026-01-08T12:30:00.000+0100"
+  data-label="Oppdatert "
+>
+</brick-published-v4>
+```
+
+## Server-Side Rendering
+
+```javascript
+import { renderBrickPublished } from '@amedia/brick-published/template';
+
+const html = renderBrickPublished({
+  dataDisplayDate: '22.04.25 12:10',
+  dataDatetime: '2025-04-22T12:10:00.000+0200',
+  dataLabel: 'Publisert: ',
+  dataItemprop: 'datePublished',
+});
+```
+
+## Accessibility
+
+- Uses semantic `<time>` element for proper date/time markup
+- Machine-readable datetime attribute for assistive technologies
+- Human-readable display format for all users
+- Proper text contrast for readability
+
+## SEO and Schema.org
+
+The component supports Schema.org metadata through the `data-itemprop` attribute:
+
+```html
+<!-- For published date -->
+<brick-published-v4
+  data-itemprop="datePublished"
+  ...
+>
+</brick-published-v4>
+
+<!-- For modified date -->
+<brick-published-v4
+  data-itemprop="dateModified"
+  ...
+>
+</brick-published-v4>
+```
+
+This helps search engines understand when content was published or last modified, which can affect search result displays and ranking.
+
+## Common Patterns
+
+### Article Header with Multiple Dates
+
+```html
+<header>
+  <h1>Article Title</h1>
+  <brick-published-v4
+    data-display-date="08.01.26 10:00"
+    data-datetime="2026-01-08T10:00:00.000+0100"
+    data-label="Publisert: "
+    data-itemprop="datePublished"
+  >
+  </brick-published-v4>
+  <brick-published-v4
+    data-display-date="08.01.26 14:30"
+    data-datetime="2026-01-08T14:30:00.000+0100"
+    data-label="Oppdatert: "
+    data-itemprop="dateModified"
+  >
+  </brick-published-v4>
+</header>
+```
+
+### With Byline Component
+
+```html
+<div class="article-meta">
+  <brick-byline-v3
+    data-author-name="John Doe"
+    data-author-link="/authors/john-doe"
+  >
+  </brick-byline-v3>
+  <brick-published-v4
+    data-display-date="08.01.26 14:30"
+    data-datetime="2026-01-08T14:30:00.000+0100"
+    data-label="Publisert: "
+    data-itemprop="datePublished"
+  >
+  </brick-published-v4>
+</div>
+```
+
+## Technical Details
+
+- **Custom Element**: `brick-published-v4`
+- **Base Class**: BrickElement
+- **Dependencies**:
+  - @amedia/brick-template (base class)
+  - @amedia/brick-tokens (design tokens)
+- **Renders as**: `<time>` element with optional label
+- **SSR Compatible**: Yes, with template function
+
+## Important Notes
+
+- The `data-datetime` attribute should always be in ISO 8601 format for proper semantic markup
+- The `data-display-date` can be formatted however you prefer for display purposes
+- The component does not format dates automatically - you must provide pre-formatted strings
+- For SEO benefits, use `data-itemprop="datePublished"` on the first published date
+- Use `data-itemprop="dateModified"` when showing update timestamps
+- The component is purely presentational - it does not calculate relative time or format dates
+
+## Version
+
+Current version: 4.0.7