A comprehensive Fusion.js feature for integrating Mediastream video content into Arc XP pages. This feature provides a PowerUp component that allows content editors to search, select, and embed Mediastream videos and live streams through the page builder interface.

• Search & Browse: Search and browse Mediastream content (videos and live streams)
• Pagination: Efficient pagination with configurable items per page
• Live Stream Support: Special handling for live streams with online status indicators
• Configuration Management: Configurable API credentials via CMS
• Error Handling: Comprehensive error handling with user-friendly messages
• Loading States: Proper loading indicators during data fetching
• Responsive Design: Modern, responsive UI with smooth interactions

components/features/mediastream/
├── children/
│   ├── components/          # Reusable UI components
│   │   ├── ActionButtons.jsx
│   │   ├── ConfigurationError.jsx
│   │   ├── ContentGrid.jsx
│   │   ├── ContentItem.jsx
│   │   ├── CurrentSelection.jsx
│   │   ├── EmptyState.jsx
│   │   ├── ErrorState.jsx
│   │   ├── Header.jsx
│   │   ├── LoadingState.jsx
│   │   ├── Pagination.jsx
│   │   ├── SearchBar.jsx
│   │   ├── SelectedPreview.jsx
│   │   ├── Tabs.jsx
│   │   └── index.js          # Barrel exports
│   ├── context/             # React Context
│   │   └── MediastreamConfigContext.jsx
│   ├── hooks/               # Custom React hooks
│   │   ├── useComposerHandler.js
│   │   ├── useMediastreamData.js
│   │   ├── usePagination.js
│   │   ├── useTemplateBase.js
│   │   └── index.js
│   ├── template-edit.jsx    # Edit mode component
│   ├── template-search.jsx  # Search mode component
│   ├── template-view.jsx   # View mode component
│   ├── template.scss        # Styles
│   └── utils.js             # Utility functions
└── powerup.jsx              # Main PowerUp component

content/sources/
└── mediastream.js           # Content source for API integration

Generate a .zip bundle file using the following command:

npm run zip

This will create a .zip file in the /dist directory (e.g., 2025-11-19-21-12-06.zip).

1. Navigate to Themes Settings within Page Builder
2. Go to Arc & Custom Blocks
3. Select Custom Blocks Bundle
4. Click Upload a Bundle
5. Select the .zip file generated in /dist

Important: This repository uses @arcxp/shared-powerup-composer-utils, which requires a .npmrc-encrypted file. Please refer to the Arc XP documentation on using private NPM repositories for instructions on setting up encrypted NPM authentication tokens.

Once the custom block is deployed, create a new page in Page Builder with the following configuration:

• Page Name: Mediastream PowerUp
• Page URI: /mediastream/
• Output Type: mediastream

1. Add the Mediastream Powerup component to the page
2. Configure the following parameters:
   • Mediastream Embed Host: The base URL for the embed player (e.g., https://develop.mdstrm.com or https://mdstrm.com)
   • Mediastream API Host: The base URL for the Mediastream API (e.g., https://dev.platform.mediastre.am)
   • Mediastream Access Token: Your API access token
3. Publish the page

1. Navigate to Composer and go to Configuration
2. Click Add Custom Embed
3. Configure the custom embed:
   • Name: Mediastream
   • Display Type: Mediastream
   • Search URL:

     https://sandbox.partnertraining.arcpublishing.com/pf/mediastream?_website=arcpartnertraining#SEARCH
     

   • View URL:

     https://sandbox.partnertraining.arcpublishing.com/pf/mediastream?_website=arcpartnertraining#VIEW
     

   • Edit URL:

     https://sandbox.partnertraining.arcpublishing.com/pf/mediastream?_website=arcpartnertraining#EDIT
     

4. Select an appropriate icon
5. Save the custom embed configuration
6. Save the Composer configuration

Note: Replace sandbox.partnertraining.arcpublishing.com and arcpartnertraining with your actual ARC domain and website name in the URLs above.

If everything is configured correctly, you should now see the Mediastream icon in Composer, allowing you to embed content from the Mediastream platform.

Note: If any required parameter is missing, empty, or null, the component will display a configuration error message instructing the user to configure the missing parameters in the page builder.

To run the project locally, follow these steps:

1. Prerequisites:

   • Ensure you have Composer installed on your system
   • Docker must be installed and running on your system before starting the project

2. Configuration Files:

   • Configure your .env file with the necessary environment variables
   • Configure .npmrc for Arc dependencies (refer to the Arc XP documentation on using private NPM repositories)

3. Install Dependencies:

   npm install

4. Start the Development Server:

   npm run start

   Note: When you run npm run start, Docker will automatically download Arc XP containers to simulate the CMS locally.

Important: The development server runs on port 80. If you have nginx or Apache running locally, you must stop the service before starting the project.

For more details or if you have questions, you can review the Arc XP documentation on how to run PageBuilder Engine locally.