### Install and Run Project

Source: https://github.com/mediacms-io/mediacms/blob/main/frontend-tools/video-js/README.md

Install project dependencies and start the development server.

```bash
npm install

npm run dev
```

--------------------------------

### Prepare Moodle for Plugin Installation

Source: https://github.com/mediacms-io/mediacms/blob/main/lms-plugins/mediacms-moodle/dist/tiny_mediacms-v1.0.0/mediacms/README.md

Steps to prepare the Moodle environment before installing the MediaCMS plugin. This involves getting Moodle, copying the plugin, and installing dependencies.

```bash
1. Get and extract Moodle 5.1
2. cp -r lms-plugins/mediacms-moodle/tiny/mediacms/ moodle/public/lib/editor/tiny/plugins/
3. nvm use 22 && cd moodle/public && npm install
```

--------------------------------

### Install Dependencies

Source: https://github.com/mediacms-io/mediacms/blob/main/frontend/README.md

Run this command to install all necessary project dependencies.

```bash
npm install
```

--------------------------------

### Install Docker on Ubuntu

Source: https://github.com/mediacms-io/mediacms/blob/main/docs/admins_docs.md

Installs Docker on Ubuntu systems using the official convenience script. Ensure Docker and Docker Compose are installed before proceeding.

```bash
curl -fsSL https://get.docker.com -o get-docker.sh
sudo sh get-docker.sh
```

--------------------------------

### Prepare Moodle for Plugin Installation

Source: https://github.com/mediacms-io/mediacms/blob/main/lms-plugins/mediacms-moodle/tiny/mediacms/README.md

Steps to prepare the Moodle environment before installing the TinyMCE MediaCMS plugin. This involves copying plugin files and installing Node.js dependencies.

```bash
cp -r lms-plugins/mediacms-moodle/tiny/mediacms/ moodle/public/lib/editor/tiny/plugins/
```

```bash
nvm use 22 && cd moodle/public && npm install
```

--------------------------------

### Start Development Server

Source: https://github.com/mediacms-io/mediacms/blob/main/frontend/README.md

Starts the development server for local development. Access the application at http://localhost:8088.

```bash
npm run start
```

--------------------------------

### Manual Plugin Permissions Setup

Source: https://github.com/mediacms-io/mediacms/blob/main/lms-plugins/mediacms-moodle/dist/tiny_mediacms-v1.0.0/mediacms/INSTALL.txt

Commands to set the correct ownership and permissions for the manually installed MediaCMS plugins. Replace 'www-data:www-data' if your web server user/group differs.

```bash
chown -R www-data:www-data filter/mediacms
chown -R www-data:www-data lib/editor/tiny/plugins/mediacms
```

--------------------------------

### Install Dependencies

Source: https://github.com/mediacms-io/mediacms/blob/main/frontend-tools/chapters-editor/README.md

Navigate to the Chapters Editor directory and install project dependencies using Yarn or npm.

```bash
cd frontend-tools/chapters-editor

yarn install

# Or with npm
npm install
```

--------------------------------

### Start Docker Compose

Source: https://github.com/mediacms-io/mediacms/blob/main/docs/developers_docs.md

Use this command to start all services defined in the docker-compose.yml file.

```bash
docker compose up
```

--------------------------------

### Start Development Environment with Docker Compose

Source: https://github.com/mediacms-io/mediacms/blob/main/docs/dev_exp.md

Use this command to build and start all necessary services for local development, including backend, frontend, database, and task queues. The application will be available at http://localhost.

```bash
user@user:~/mediacms$ docker compose -f docker-compose-dev.yaml up
```

--------------------------------

### Start MediaCMS with Docker Compose

Source: https://github.com/mediacms-io/mediacms/blob/main/docs/admins_docs.md

Starts all MediaCMS containers using Docker Compose. MediaCMS will be available on http://localhost or the server's IP address after installation.

```bash
docker compose up
```

--------------------------------

### Start Standalone Development Server

Source: https://github.com/mediacms-io/mediacms/blob/main/frontend-tools/video-editor/README.md

Starts a local development server with hot reloading for standalone development. Use either Yarn or npm.

```bash
yarn dev
```

```bash
npm run dev
```

--------------------------------

### Install Dependencies

Source: https://github.com/mediacms-io/mediacms/blob/main/frontend-tools/video-editor/README.md

Installs project dependencies using either Yarn or npm. Ensure Node.js v20+ is installed.

```bash
cd frontend-tools/video-editor

yarn install
```

```bash
cd frontend-tools/video-editor

npm install
```

--------------------------------

### Start Standalone Development Server

Source: https://github.com/mediacms-io/mediacms/blob/main/frontend-tools/chapters-editor/README.md

Run the local development server with hot reloading for the Chapters Editor using Yarn or npm.

```bash
yarn dev

# Or with npm
npm run dev
```

--------------------------------

### Start Development Server with Debug Logging

Source: https://github.com/mediacms-io/mediacms/blob/main/frontend-tools/chapters-editor/README.md

Enable debug logging for the development server by setting the DEBUG environment variable to true.

```bash
# Start with debug logging
DEBUG=true yarn dev
```

--------------------------------

### Start Frontend-only Development Server

Source: https://github.com/mediacms-io/mediacms/blob/main/frontend-tools/video-editor/README.md

Starts a local development server for frontend-only development, useful when working with a separate MediaCMS backend. Use either Yarn or npm.

```bash
yarn dev:frontend
```

```bash
npm run dev:frontend
```

--------------------------------

### Example MediaCMS View URLs

Source: https://github.com/mediacms-io/mediacms/blob/main/lms-plugins/mediacms-moodle/tiny/mediacms/AUTOCONVERT.md

These are examples of MediaCMS view URLs in the supported format.

```url
https://deic.mediacms.io/view?m=JpBd1Zvdl
```

```url
https://your-mediacms-instance.com/view?m=abc123
```

--------------------------------

### Manual Plugin Installation Commands

Source: https://github.com/mediacms-io/mediacms/blob/main/lms-plugins/mediacms-moodle/dist/tiny_mediacms-v1.0.0/mediacms/INSTALL.txt

Commands to manually extract plugin ZIP files into the Moodle directory structure. Ensure you are in the Moodle root public directory before executing.

```bash
cd /var/www/moodle/public
unzip filter_mediacms-v1.0.0.zip -d filter/
unzip tiny_mediacms-v1.0.0.zip -d lib/editor/tiny/plugins/
```

--------------------------------

### Manual Plugin Installation - Extract Filter Plugin

Source: https://github.com/mediacms-io/mediacms/blob/main/lms-plugins/mediacms-moodle/README.md

Manually extract the filter plugin to the Moodle public directory. This should be installed first.

```bash
cd /var/www/moodle/public
unzip filter_mediacms-v1.0.0.zip -d filter/
```

--------------------------------

### Install Development Requirements

Source: https://github.com/mediacms-io/mediacms/blob/main/docs/developers_docs.md

Installs the necessary Python packages for development and testing within the web container. Ensure Docker Compose is running before executing.

```bash
docker compose exec -T web pip install -r requirements-dev.txt
```

--------------------------------

### Get Media Queryset for User

Source: https://github.com/mediacms-io/mediacms/blob/main/docs/media_permissions.md

This simplified view logic demonstrates how to construct a queryset of media accessible to a user, considering public media, direct user permissions, and RBAC.

```python
# Simplified example from files/views/media.py
def _get_media_queryset(self, request, user=None):
    # 1. Public media
    listable_media = Media.objects.filter(listable=True)

    if not request.user.is_authenticated:
        return listable_media

    # 2. User permissions for authenticated users
    user_media = Media.objects.filter(permissions__user=request.user)

    # 3. RBAC for authenticated users
    if getattr(settings, 'USE_RBAC', False):
        rbac_categories = request.user.get_rbac_categories_as_member()
        rbac_media = Media.objects.filter(category__in=rbac_categories)

    # Combine all accessible media
    return listable_media.union(user_media, rbac_media)
```

--------------------------------

### Example MediaCMS Base URL Configurations

Source: https://github.com/mediacms-io/mediacms/blob/main/lms-plugins/mediacms-moodle/tiny/mediacms/AUTOCONVERT.md

These examples show how to configure the MediaCMS base URL setting to control auto-conversion scope.

```url
https://deic.mediacms.io
```

```url
https://media.myuniversity.edu
```

--------------------------------

### Copy Plugin Files to Moodle

Source: https://github.com/mediacms-io/mediacms/blob/main/lms-plugins/mediacms-moodle/README.md

Use this command to copy the built plugin files from the development directory to the Moodle installation's public library.

```bash
sudo cp -r ~/mediacms/lms-plugins/mediacms-moodle/tiny/mediacms/ -r ~/mediacms/moodle/public/lib/editor/tiny/plugins/
```

--------------------------------

### Build and Run Docker Development Environment

Source: https://github.com/mediacms-io/mediacms/blob/main/docs/developers_docs.md

Commands to build and start the development environment using Docker Compose. This sets up the frontend on port 8088 and the Django application on port 80.

```bash
docker compose -f docker-compose-dev.yaml build
docker compose -f docker-compose-dev.yaml up
```

--------------------------------

### Start Frontend-only Development Mode

Source: https://github.com/mediacms-io/mediacms/blob/main/frontend-tools/chapters-editor/README.md

Initiate the frontend-only development mode, useful when working exclusively on the frontend with a MediaCMS backend. Available for Yarn and npm.

```bash
yarn dev:frontend

# Or with npm
npm run dev:frontend
```

--------------------------------

### Run MediaCMS with Full Features

Source: https://github.com/mediacms-io/mediacms/blob/main/docs/admins_docs.md

Starts MediaCMS using both the default and full Docker Compose configurations to enable features like automatic transcriptions. Requires editing docker-compose.yaml to set the celery_worker image and USE_WHISPER_TRANSCRIBE in settings.py.

```bash
docker-compose -f docker-compose.yaml -f docker-compose.full.yaml up
```

--------------------------------

### Initialize Media Recorder and Event Listeners

Source: https://github.com/mediacms-io/mediacms/blob/main/templates/cms/record_screen.html

Sets up the MediaRecorder, handles data availability, and manages the start/stop button states. It also includes logic for uploading the recorded blob.

```javascript
let mediaRecorder;
let recordedChunks = [];
let stream;
startBtn.addEventListener('click', async () => {
    try {
        if (isMobileDevice()) {
            stream = await navigator.mediaDevices.getUserMedia({ video: true, audio: true });
        } else {
            const displayStream = await navigator.mediaDevices.getDisplayMedia({ video: true });
            const audioStream = await navigator.mediaDevices.getUserMedia({ audio: true });
            audioStream.getAudioTracks().forEach(track => displayStream.addTrack(track));
            stream = displayStream;
        }

        stream.getVideoTracks()[0].addEventListener('ended', () => {
            if (mediaRecorder && mediaRecorder.state === 'recording') {
                mediaRecorder.stop();
            }
        });

        const mimeTypes = [
            'video/mp4',
            'video/webm;codecs=vp9',
            'video/webm;codecs=vp8',
            'video/webm'
        ];
        let supportedMimeType = '';
        for (const mimeType of mimeTypes) {
            if (MediaRecorder.isTypeSupported(mimeType)) {
                supportedMimeType = mimeType;
                break;
            }
        }

        if (!supportedMimeType) {
            console.error("No supported mimeType found for MediaRecorder");
            alert("Your browser doesn't support any suitable video recording format.");
            return;
        }

        mediaRecorder = new MediaRecorder(stream, {
            mimeType: supportedMimeType
        });

        mediaRecorder.ondataavailable = event => {
            if (event.data.size > 0) {
                recordedChunks.push(event.data);
            }
        };

        mediaRecorder.onstart = () => {
            stopBtn.disabled = false;
            startBtn.disabled = true;
        };

        mediaRecorder.onstop = () => {
            stopBtn.disabled = true;
            startBtn.disabled = false;
            if(stream) {
                stream.getTracks().forEach(track => track.stop());
            }
            const blob = new Blob(recordedChunks, { type: supportedMimeType });
            recordedChunks = [];
            uploadFile(blob);
        };

        mediaRecorder.start();
    } catch (err) {
        console.error("Error starting screen recording:", err);
    }
});

stopBtn.addEventListener('click', () => {
    if (mediaRecorder && mediaRecorder.state === 'recording') {
        mediaRecorder.stop();
    }
});
```

--------------------------------

### Example MediaCMS View URL

Source: https://github.com/mediacms-io/mediacms/blob/main/lms-plugins/mediacms-moodle/tiny/mediacms/AUTOCONVERT.md

This is an example of a MediaCMS video URL that the auto-convert feature recognizes.

```url
https://deic.mediacms.io/view?m=JpBd1Zvdl
```

--------------------------------

### Manual Deployment

Source: https://github.com/mediacms-io/mediacms/blob/main/frontend-tools/video-editor/README.md

Manually deploys the video editor after building. Use either Yarn or npm.

```bash
yarn deploy
```

```bash
npm run deploy
```

--------------------------------

### Configure Live Streaming Player

Source: https://github.com/mediacms-io/mediacms/blob/main/frontend-tools/video-js/README.md

Set up a Video.js player for live streaming with UI controls and tracking.

```jsx
<VideoPlayer
    options={{
        controls: true,
        fluid: true,
        liveui: true,
        liveTracker: {
            trackingThreshold: 30,
            liveTolerance: 15,
        },
        controlBar: {
            liveDisplay: true,
            seekToLive: true,
        },
        sources: [{ src: 'stream.m3u8', type: 'application/x-mpegURL' }],
    }}
/>
```

--------------------------------

### Build for Production

Source: https://github.com/mediacms-io/mediacms/blob/main/frontend/README.md

Generates a production-ready build of the frontend in the _frontend/dist folder.

```bash
npm run dist
```

--------------------------------

### Enable SAML Authentication Settings

Source: https://github.com/mediacms-io/mediacms/blob/main/docs/admins_docs.md

Configure these settings in local_settings.py to enable SAML support and related features. Ensure proxy settings are correctly configured if MediaCMS is behind a proxy.

```python
USE_RBAC = True
USE_SAML = True
USE_IDENTITY_PROVIDERS = True

USE_X_FORWARDED_HOST = True
SECURE_PROXY_SSL_HEADER = ('HTTP_X_FORWARDED_PROTO', 'https')
SECURE_SSL_REDIRECT = True
CSRF_COOKIE_SECURE = True
SESSION_COOKIE_SECURE = True

SOCIALACCOUNT_ADAPTER = 'saml_auth.adapter.SAMLAccountAdapter'
SOCIALACCOUNT_PROVIDERS = {
    "saml": {
        "provider_class": "saml_auth.custom.provider.CustomSAMLProvider",
    }
}
```

--------------------------------

### Navigate to Plugin Directory

Source: https://github.com/mediacms-io/mediacms/blob/main/lms-plugins/mediacms-moodle/dist/filter_mediacms-v1.0.0/mediacms/README.md

Change your current directory to the MediaCMS plugin's location within the Moodle installation.

```bash
cd ~/mediacms/moodle/public/lib/editor/tiny/plugins/mediacms/
```

--------------------------------

### Copy Plugin Output for Testing

Source: https://github.com/mediacms-io/mediacms/blob/main/lms-plugins/mediacms-moodle/tiny/mediacms/README.md

Command to copy the built plugin files to the source directory for testing purposes. This is a preparatory step before deploying to the Moodle server.

```bash
cp * ../../../../../../../lms-plugins/mediacms-moodle/tiny/mediacms/ -r
```

--------------------------------

### Update MediaCMS Docker Images

Source: https://github.com/mediacms-io/mediacms/blob/main/docs/admins_docs.md

Updates MediaCMS to the latest version by pulling the newest Docker image and restarting the containers. Ensure you are in the installation directory.

```bash
cd /path/to/mediacms/installation
docker pull mediacms/mediacms
docker compose down
docker compose up
```

--------------------------------

### Manual Plugin Extraction and Placement

Source: https://github.com/mediacms-io/mediacms/blob/main/lms-plugins/mediacms-moodle/INSTALL.txt

Use these commands to manually extract the plugin ZIP files into the Moodle directory. Ensure you have the correct paths and permissions.

```bash
cd /var/www/moodle/public
unzip filter_mediacms-v1.0.0.zip -d filter/
unzip tiny_mediacms-v1.0.0.zip -d lib/editor/tiny/plugins/
```

```bash
chown -R www-data:www-data filter/mediacms
chown -R www-data:www-data lib/editor/tiny/plugins/mediacms
```

--------------------------------

### Development Commands

Source: https://github.com/mediacms-io/mediacms/blob/main/frontend-tools/video-js/README.md

Run these commands in the terminal to manage the development server and build the project.

```bash
# Start dev server
npm run dev

# Build for production
npm run build

# Preview production build
npm run preview
```

--------------------------------

### Run Deployment Script

Source: https://github.com/mediacms-io/mediacms/blob/main/frontend-tools/video-editor/README.md

Executes the build and deploy script, which handles compiling and deploying the editor to MediaCMS.

```bash
sh deploy/scripts/build_and_deploy.sh
```

--------------------------------

### Manual Plugin Installation - Extract Editor Plugin

Source: https://github.com/mediacms-io/mediacms/blob/main/lms-plugins/mediacms-moodle/README.md

Manually extract the TinyMCE editor plugin to the Moodle public directory. This plugin depends on the filter plugin.

```bash
cd /var/www/moodle/public
unzip tiny_mediacms-v1.0.0.zip   -d lib/editor/tiny/plugins/
```

--------------------------------

### Initialize FineUploader for Media Uploads

Source: https://github.com/mediacms-io/mediacms/blob/main/templates/cms/add-media.html

Initializes FineUploader with configurations for endpoint, CSRF token, retry, validation, and chunking. Handles LMS embed mode styling and post-upload actions.

```javascript
document.addEventListener("DOMContentLoaded", function(event) {
var urlParams = new URLSearchParams(window.location.search);
var isLmsEmbedMode = sessionStorage.getItem('lms_embed_mode') === 'true' && urlParams.get('action') === 'select_media'; // Add compact styles if in LMS embed mode
if (isLmsEmbedMode) {
var wrap = document.getElementById('media-uploader-wrap');
if (wrap) {
wrap.classList.add('is-lms-embed');
}
document.body.classList.add('lms-embed-mode');
}

function getCSRFToken() {
var i, cookies, cookie, cookieVal = null;
if ( document.cookie && '' !== document.cookie ) {
cookies = document.cookie.split(';');
i = 0;
while( i < cookies.length ){
cookie = cookies[i].trim();
if ( 'csrftoken=' === cookie.substring(0, 10) ) {
cookieVal = decodeURIComponent( cookie.substring(10) );
break;
}
i += 1;
}
}
return cookieVal;
}

var default_concurrent_chunked_uploader = new qq.FineUploader({
    debug: true,
    element: document.querySelector('.media-uploader'),
    request: {
        endpoint: '{% url 'uploader:upload' %}',
        params: {},
        customHeaders: {
            'X-CSRFToken': getCSRFToken('csrftoken'),
        },
    },
    retry: {
        enableAuto: true,
        maxAutoAttempts: 2,
    },
    validation: {
        itemLimit: isLmsEmbedMode ? 1 : {{UPLOAD_MAX_FILES_NUMBER}},
        sizeLimit: {{UPLOAD_MAX_SIZE}},
    },
    chunking: {
        enabled: true,
        concurrent: {
            enabled: true,
        },
        success: {
            endpoint: '{% url 'uploader:upload' %}?done',
        },
    },
    callbacks: {
        onError: function(id, name, errorReason, xhrOrXdr) {
            console.warn(qq.format("Error on file number {} - {}. Reason: {}", id, name, errorReason));
        },
        onComplete: function( id, name, response, request ) {
            if ( response.success ) {
                if ( response.media_url ) {
                    if ( 1 === this._currentItemLimit ) {
                        if (isLmsEmbedMode && window.parent !== window) {
                            var mediaUrl = response.media_url;
                            var mediaId = '';
                            if (mediaUrl.indexOf('m=') > -1) {
                                mediaId = mediaUrl.split('m=')[1].split('&')[0];
                            } else {
                                var parts = mediaUrl.split('/').filter(Boolean);
                                mediaId = parts[parts.length - 1];
                            }
                            var baseUrl = window.location.origin;
                            var embedUrl = baseUrl + '/embed?m=' + mediaId;
                            var sendPostMsg = function() {
                                window.parent.postMessage({ type: 'videoSelected', embedUrl: embedUrl, videoId: mediaId }, '*');
                            };
                            sendPostMsg();
                            return;
                        }
                        setTimeout(function(){
                            window.location.href = response.media_url;
                        }, 500);
                        return;
                    }
                }
                var listEl = document.querySelector( '.qq-file-id-' + id );
                var viewFileEl = listEl.querySelector( '.view-uploaded-media-link' );
                if ( listEl ) {
                    var fileUrl = response.media_url;
                    listEl.style.cursor = 'pointer';
                    listEl.addEventListener( 'click', function(ev) {
                        ev.preventDefault();
                        ev.stopPropagation();
                        window.location.href = fileUrl;
                    });
                }
                if ( viewFileEl ) {
                    viewFileEl.setAttribute( 'href', response.media_url );
                    viewFileEl.setAttribute( 'class', 'view-uploaded-media-link' );
                }
            }
        },
    },
});
});
```

--------------------------------

### Rebuild JavaScript for MediaCMS Moodle Plugin

Source: https://github.com/mediacms-io/mediacms/blob/main/lms-plugins/mediacms-moodle/tiny/mediacms/AUTOCONVERT.md

Rebuild the JavaScript files for the MediaCMS Moodle plugin after modifying source files. Ensure Node.js 22.x or a compatible version is installed.

```bash
cd /path/to/moodle
npx grunt amd --root=public/lib/editor/tiny/plugins/mediacms
```

--------------------------------

### Implement Player Event Handling

Source: https://github.com/mediacms-io/mediacms/blob/main/frontend-tools/video-js/README.md

Set up event listeners for common player actions like play, pause, and volume changes.

```javascript
const handlePlayerReady = (player) => {
    // Set up comprehensive event listeners
    player.on('play', () => console.log('Video started'));
    player.on('pause', () => console.log('Video paused'));
    player.on('volumechange', () => console.log('Volume:', player.volume()));
    player.on('fullscreenchange', () => console.log('Fullscreen:', player.isFullscreen()));
    player.on('ratechange', () => console.log('Speed:', player.playbackRate()));
    player.on('seeking', () => console.log('Seeking to:', player.currentTime()));
};
```

--------------------------------

### Configure User Notifications

Source: https://github.com/mediacms-io/mediacms/blob/main/docs/admins_docs.md

Control user notifications by setting boolean values within the `USERS_NOTIFICATIONS` dictionary. For example, set 'MEDIA_ADDED' to False to disable notifications for new media.

```python
USERS_NOTIFICATIONS = {
    'MEDIA_ADDED': True,
}
```

--------------------------------

### Get Current Language and Display Title

Source: https://github.com/mediacms-io/mediacms/blob/main/templates/cms/set_language.html

Retrieves the current language code using the `get_current_language` template tag and displays a translated title. This is useful for setting context for the user.

```html
{% get_current_language as LANGUAGE_CODE %}

{{"Change Language"| custom_translate:LANGUAGE_CODE}}
=======================================================

* * *

{{"Select"| custom_translate:LANGUAGE_CODE}}
----------------------------------------------
```

--------------------------------

### Test TinyMCE MediaCMS Plugin Output

Source: https://github.com/mediacms-io/mediacms/blob/main/lms-plugins/mediacms-moodle/dist/tiny_mediacms-v1.0.0/mediacms/README.md

Instructions to copy the built plugin to its source location for testing and then deploy to the Moodle server. Remember to purge caches after deployment.

```bash
5. To test the output:
cp * ../../../../../../../lms-plugins/mediacms-moodle/tiny/mediacms/ -r

6. Then copy to Moodle server and purge caches
```

--------------------------------

### Import Individual Video.js Components

Source: https://github.com/mediacms-io/mediacms/blob/main/frontend-tools/video-js/src/components/README.md

Demonstrates how to import specific Video.js components from their respective paths.

```javascript
import EndScreenOverlay from './components/overlays/EndScreenOverlay';
import ChapterMarkers from './components/markers/ChapterMarkers';
import NextVideoButton from './components/controls/NextVideoButton';
```

--------------------------------

### Enable Whisper Transcribe for Subtitles

Source: https://github.com/mediacms-io/mediacms/blob/main/docs/admins_docs.md

Set USE_WHISPER_TRANSCRIBE to True in your local_settings.py to enable automatic subtitle generation using OpenAI's Whisper. This feature requires a Docker installation with the full configuration.

```python
USE_WHISPER_TRANSCRIBE = True
```

--------------------------------

### Run Formatted Code with Yarn or npm

Source: https://github.com/mediacms-io/mediacms/blob/main/frontend-tools/chapters-editor/README.md

Execute the Prettier formatting script added to `package.json` using either Yarn or npm.

```bash
yarn format
# or
npm run format
```

--------------------------------

### Chapter Data JSON Format

Source: https://github.com/mediacms-io/mediacms/blob/main/frontend-tools/chapters-editor/README.md

Defines the structure for storing video chapter data, including ID, title, start and end times, and an optional description. This format is used for integration with MediaCMS.

```json
{
    "chapters": [
        {
            "id": "chapter-1",
            "title": "Introduction",
            "startTime": 0,
            "endTime": 120,
            "description": "Opening remarks and overview"
        },
        {
            "id": "chapter-2",
            "title": "Main Content",
            "startTime": 120,
            "endTime": 600,
            "description": "Core educational material"
        }
    ]
}
```

--------------------------------

### Entra ID Application Details for MediaCMS SAML Configuration

Source: https://github.com/mediacms-io/mediacms/blob/main/docs/saml_entraid_setup.md

Example values for unique AppID and URLs provided by Azure Entra ID. These are used in MediaCMS's ID Provider settings.

```text
Example unique AppID: 123456ab-1234-12ab-ab12-abc123abc123

-- Example URLs --
Login URL: https://login.microsoftonline.com/123456ab-1234-12ab-ab12-abc123abc123/saml2
Microsoft Entra Identifier: https://sts.windows.net/123456ab-1234-12ab-ab12-abc123abc123/
Logout URL: https://login.microsoftonline.com/123456ab-1234-12ab-ab12-abc123abc123/saml2
```

--------------------------------

### PostgreSQL Version Incompatibility Error

Source: https://github.com/mediacms-io/mediacms/blob/main/docs/admins_docs.md

Example of a PostgreSQL version incompatibility error when updating from version 2 to version 3. This occurs because version 3 uses PostgreSQL 15, which is not compatible with data initialized by PostgreSQL 13.

```log
db_1              | 2023-06-27 11:07:42.959 UTC [1] FATAL:  database files are incompatible with server
db_1              | 2023-06-27 11:07:42.959 UTC [1] DETAIL:  The data directory was initialized by PostgreSQL version 13, which is not compatible with this version 15.2.
```

--------------------------------

### Build Frontend Production Assets

Source: https://github.com/mediacms-io/mediacms/blob/main/docs/developers_docs.md

Execute this command within the frontend container to build production-ready assets after making changes. This is typically followed by copying the assets to the static directory.

```bash
docker compose -f docker-compose-dev.yaml exec -T frontend npm run dist
```

--------------------------------

### Build Standalone Application

Source: https://github.com/mediacms-io/mediacms/blob/main/frontend-tools/video-editor/README.md

Builds the video editor as a standalone application for production. Use either Yarn or npm.

```bash
yarn build
```

```bash
npm run build
```

--------------------------------

### Import Video.js Components from Index

Source: https://github.com/mediacms-io/mediacms/blob/main/frontend-tools/video-js/src/components/README.md

Shows how to import multiple Video.js components by exporting them from a central index file.

```javascript
import {
    VideoJSPlayer,
    EndScreenOverlay,
    ChapterMarkers,
    NextVideoButton,
} from './components';
```

--------------------------------

### Manual Deployment Commands

Source: https://github.com/mediacms-io/mediacms/blob/main/frontend-tools/chapters-editor/README.md

Deploy the Chapters Editor manually after building, using either Yarn or npm.

```bash
# With Yarn
yarn deploy

# Or with npm
npm run deploy
```

--------------------------------

### Configure Email Settings

Source: https://github.com/mediacms-io/mediacms/blob/main/docs/admins_docs.md

Set up email sending for MediaCMS by configuring the DEFAULT_FROM_EMAIL, EMAIL_HOST, EMAIL_PORT, EMAIL_HOST_USER, EMAIL_HOST_PASSWORD, EMAIL_USE_TLS, SERVER_EMAIL, and ADMIN_EMAIL_LIST variables.

```python
DEFAULT_FROM_EMAIL = 'info@mediacms.io'
EMAIL_HOST_PASSWORD = 'xyz'
EMAIL_HOST_USER = 'info@mediacms.io'
EMAIL_USE_TLS = True
SERVER_EMAIL = DEFAULT_FROM_EMAIL
EMAIL_HOST = 'mediacms.io'
EMAIL_PORT = 587
ADMIN_EMAIL_LIST = ['info@mediacms.io']
```

--------------------------------

### Build MediaCMS Moodle Plugins

Source: https://github.com/mediacms-io/mediacms/blob/main/lms-plugins/mediacms-moodle/README.md

Use this command to build both the filter and TinyMCE editor plugin ZIP packages.

```bash
./build.sh
```

--------------------------------

### Login to MediaCMS CLI

Source: https://github.com/mediacms-io/mediacms/blob/main/cli-tool/README.md

Authenticate with your MediaCMS instance and store credentials for subsequent commands. This is the first step before using other CLI functionalities.

```bash
python cli.py login
```

--------------------------------

### Enable Auto-Convert via Moodle CLI

Source: https://github.com/mediacms-io/mediacms/blob/main/lms-plugins/mediacms-moodle/tiny/mediacms/AUTOCONVERT.md

Use the Moodle CLI to enable the auto-convert feature for the MediaCMS plugin.

```bash
php admin/cli/cfg.php --component=tiny_mediacms --name=autoconvertenabled --set=1
```

--------------------------------

### Build Standalone Application

Source: https://github.com/mediacms-io/mediacms/blob/main/frontend-tools/chapters-editor/README.md

Create a production-ready build of the Chapters Editor as a standalone application using Yarn or npm.

```bash
yarn build

# Or with npm
npm run build
```

--------------------------------

### Create CSS File for New Page

Source: https://github.com/mediacms-io/mediacms/blob/main/docs/admins_docs.md

Use this command to create a new CSS file for styling your static page.

```bash
touch static/css/volunteer.css
```

--------------------------------

### Build JavaScript Files with Grunt

Source: https://github.com/mediacms-io/mediacms/blob/main/lms-plugins/mediacms-moodle/README.md

Run this command in the Moodle directory to build the JavaScript files after making changes to the plugin's JS assets.

```bash
npx grunt amd
```

--------------------------------

### Copy Plugin Files Back to Development

Source: https://github.com/mediacms-io/mediacms/blob/main/lms-plugins/mediacms-moodle/README.md

After making changes in Moodle, use this command to copy the updated plugin files back to the development directory.

```bash
sudo cp -r /home/user/mediacms/moodle/public/lib/editor/tiny/plugins/mediacms /home/user/mediacms/lms-plugins/mediacms-moodle/tiny/
```

--------------------------------

### Enable Sitemap Generation

Source: https://github.com/mediacms-io/mediacms/blob/main/docs/admins_docs.md

Set `GENERATE_SITEMAP` to True to enable the generation of a sitemap file at http://your_installation/sitemap.xml. The default is False.

```python
GENERATE_SITEMAP = False
```

--------------------------------

### Copy HTML Template for New Page

Source: https://github.com/mediacms-io/mediacms/blob/main/docs/admins_docs.md

Use this command to duplicate an existing HTML template for a new static page.

```bash
sudo cp templates/cms/about.html templates/cms/volunteer.html
```