a few

## [7.5.0](https://github.com/mediacms-io/mediacms/compare/v7.4.0...v7.5.0) (2026-02-06)

### Features

* bump version ([36d815c](36d815c0cf))

.github/workflows/semantic-pull-request.yaml

@@ -0,0 +1,22 @@
+name: "Lint PR"
+
+on:
+  pull_request_target:
+    types:
+      - opened
+      - edited
+      - synchronize
+      - reopened
+
+permissions:
+  pull-requests: read
+
+jobs:
+  main:
+    name: Validate PR title
+    runs-on: ubuntu-latest
+    environment: dev
+    steps:
+      - uses: amannn/action-semantic-pull-request@v5
+        env:
+          GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}

.github/workflows/semantic-release.yaml

@@ -0,0 +1,47 @@
+name: Semantic Release
+
+on:
+  push:
+    branches:
+      - main
+
+permissions:
+  contents: write
+  issues: write
+
+jobs:
+  semantic-release:
+    runs-on: ubuntu-latest
+    environment: dev
+    steps:
+      - name: Checkout
+        uses: actions/checkout@v4
+        with:
+          fetch-depth: 0
+          persist-credentials: false
+
+      - name: Setup SSH
+        uses: webfactory/ssh-agent@v0.8.0
+        with:
+          ssh-private-key: ${{ secrets.GA_DEPLOY_KEY }}
+
+      # use SSH url to ensure git commit using a deploy key bypasses the main
+      # branch protection rule
+      - name: Configure Git for SSH Push
+        run: git remote set-url origin "git@github.com:${{ github.repository }}.git"
+
+      - name: Setup Node.js
+        uses: actions/setup-node@v4
+        with:
+          node-version: "lts/*"
+
+      - name: Install Dependencies
+        run: npm clean-install
+
+      - name: Verify the integrity of provenance attestations and registry signatures for installed dependencies
+        run: npm audit signatures
+
+      - name: Run Semantic Release
+        run: npx semantic-release
+        env:
+          GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}

.prettierignore

@@ -1,3 +1,4 @@
 /templates/cms/*
 /templates/*.html
-*.scss
+*.scss
+/frontend/

.releaserc.json

@@ -0,0 +1,100 @@
+{
+  "branches": [
+    "main"
+  ],
+  "plugins": [
+    [
+      "@semantic-release/commit-analyzer",
+      {
+        "preset": "conventionalcommits"
+      }
+    ],
+    [
+      "@semantic-release/release-notes-generator",
+      {
+        "preset": "conventionalcommits",
+        "presetConfig": {
+          "types": [
+            {
+              "type": "feat",
+              "section": "Features"
+            },
+            {
+              "type": "fix",
+              "section": "Bug Fixes"
+            },
+            {
+              "type": "chore",
+              "hidden": true
+            },
+            {
+              "type": "docs",
+              "section": "Documentation"
+            },
+            {
+              "type": "style",
+              "hidden": true
+            },
+            {
+              "type": "refactor",
+              "section": "Refactors"
+            },
+            {
+              "type": "perf",
+              "section": "Performance"
+            },
+            {
+              "type": "test",
+              "hidden": true
+            },
+            {
+              "type": "depr",
+              "section": "Deprecations"
+            }
+          ]
+        }
+      }
+    ],
+    [
+      "semantic-release-replace-plugin",
+      {
+        "replacements": [
+          {
+            "files": [
+              "package.json"
+            ],
+            "from": "\"version\": \".*\"",
+            "to": "\"version\": \"${nextRelease.version}\"",
+            "results": [
+              {
+                "file": "package.json",
+                "hasChanged": true,
+                "numMatches": 1,
+                "numReplacements": 1
+              }
+            ],
+            "countMatches": true
+          }
+        ]
+      }
+    ],
+    [
+      "@semantic-release/changelog",
+      {
+        "changelogFile": "CHANGELOG.md",
+        "changelogTitle": "# Changelog"
+      }
+    ],
+    "@semantic-release/github",
+    [
+      "@semantic-release/git",
+      {
+        "assets": [
+          "package.json",
+          "CHANGELOG.md"
+        ],
+        "message": "chore(release): ${nextRelease.version} [skip ci]\n\n${nextRelease.notes}"
+      }
+    ]
+  ]
+}

CHANGELOG.md

@@ -0,0 +1,37 @@
+# Changelog
+
+## [7.5.0](https://github.com/mediacms-io/mediacms/compare/v7.4.0...v7.5.0) (2026-02-06)
+
+### Features
+
+* bump version ([36d815c](https://github.com/mediacms-io/mediacms/commit/36d815c0cfbe21d3136541d410d545742b9ebecd))
+
+## [7.4.0](https://github.com/mediacms-io/mediacms/compare/v7.3.0...v7.4.0) (2026-02-06)
+
+### Features
+
+* Add video player context menu with share/embed options ([#1472](https://github.com/mediacms-io/mediacms/issues/1472)) ([74952f6](https://github.com/mediacms-io/mediacms/commit/74952f68d79bc67617edb38eac62d2f5e7457565))
+
+## [7.3.0](https://github.com/mediacms-io/mediacms/compare/v7.2.0...v7.3.0) (2026-02-06)
+
+### Features
+
+* add package json for semantic release ([b405a04](https://github.com/mediacms-io/mediacms/commit/b405a04e346ca81b7d3f4e099eb984e7785cdd0f))
+* add semantic release github actions ([76a27ae](https://github.com/mediacms-io/mediacms/commit/76a27ae25609178c1bd47c947b9f1a082c791d61))
+* frontend unit tests ([1c15880](https://github.com/mediacms-io/mediacms/commit/1c15880ae3ef1ce77f53d5b473dfc0cc448b4977))
+* Implement persistent "Embed Mode" to hide UI shell via Session Storage ([#1484](https://github.com/mediacms-io/mediacms/issues/1484)) ([223e870](https://github.com/mediacms-io/mediacms/commit/223e87073f7d5e44130c9976854cac670db0ae66))
+* Improve Visual Distinction Between Trim and Chapters Editors ([#1445](https://github.com/mediacms-io/mediacms/issues/1445)) ([d9b1d6c](https://github.com/mediacms-io/mediacms/commit/d9b1d6cab1d2bdfc16f799a0a27b64313e2e0d22))
+* semantic release ([b76282f](https://github.com/mediacms-io/mediacms/commit/b76282f9e465a39c2da5e9a22184d1db23de3f56))
+
+### Bug Fixes
+
+* add delay to task creation ([1b3cdfd](https://github.com/mediacms-io/mediacms/commit/1b3cdfd302abc5e69ebe01ca52b5091f3b24c0b2))
+* Add regex denoter and improve celerybeat gitignore ([#1446](https://github.com/mediacms-io/mediacms/issues/1446)) ([90331f3](https://github.com/mediacms-io/mediacms/commit/90331f3b4a2a5737de9dd75ab45c096944813c42))
+* adjust poster url for audio ([01912ea](https://github.com/mediacms-io/mediacms/commit/01912ea1f99ef43793a65712539d6264f1f6410f))
+* Chapter numbering and preserve custom titles on segment reorder ([#1435](https://github.com/mediacms-io/mediacms/issues/1435)) ([cd7dd4f](https://github.com/mediacms-io/mediacms/commit/cd7dd4f72c9f0bac466c680f686a9ecfdd3a38dd))
+* Show default chapter names in textarea instead of placeholder text ([#1428](https://github.com/mediacms-io/mediacms/issues/1428)) ([5eb6faf](https://github.com/mediacms-io/mediacms/commit/5eb6fafb8c6928b8bc3fe5f0c7af315273f78a55))
+* static files ([#1429](https://github.com/mediacms-io/mediacms/issues/1429)) ([ba2c31b](https://github.com/mediacms-io/mediacms/commit/ba2c31b1e65b7f508dee598b1f2d86f01f9bf036))
+
+### Documentation
+
+* update page link ([aeef828](https://github.com/mediacms-io/mediacms/commit/aeef8284bfba2a9a7f69c684f96c54f0e0e0cf92))

LTI_SETUP.md

@@ -1,253 +0,0 @@
-# MediaCMS LTI 1.3 Integration Setup Guide
-
-This guide walks you through integrating MediaCMS with a Learning Management System (LMS) like Moodle using LTI 1.3.
-
-## 1. Configure MediaCMS Settings
-
-Add these settings to `cms/local_settings.py`:
-
-```python
-# Enable LTI integration
-USE_LTI = True
-
-# Enable RBAC for course-based access control
-USE_RBAC = True
-
-# Your production domain
-FRONTEND_HOST = 'https://your-mediacms-domain.com'
-ALLOWED_HOSTS = ['your-mediacms-domain.com', 'localhost']
-```
-
-**Note:** LTI-specific cookie settings (SESSION_COOKIE_SAMESITE='None', etc.) are automatically applied when `USE_LTI=True`.
-
-## 2. MediaCMS Configuration
-
-### A. Verify HTTPS Setup
-
-Ensure your MediaCMS server is running on HTTPS. LTI 1.3 requires HTTPS for security and iframe embedding.
-
-### B. Register Your LMS Platform
-
-1. Access Django Admin: `https://your-mediacms-domain.com/admin/lti/ltiplatform/`
-2. Add new LTI Platform with these settings:
-
-**Basic Info:**
-- **Name:** My LMS (or any descriptive name)
-- **Platform ID (Issuer):** Get this from your LMS (e.g., `https://mylms.example.com`)
-- **Client ID:** You'll get this from your LMS after registering MediaCMS as an external tool
-
-**OIDC Endpoints (get from your LMS):**
-- **Auth Login URL:** `https://mylms.example.com/mod/lti/auth.php`
-- **Auth Token URL:** `https://mylms.example.com/mod/lti/token.php`
-- **Key Set URL:** `https://mylms.example.com/mod/lti/certs.php`
-
-**Deployment IDs:** Add the deployment ID(s) provided by your LMS as a JSON list, e.g., `["1"]`
-
-**Features:**
-- ✓ Enable NRPS (Names and Role Provisioning)
-- ✓ Enable Deep Linking
-- ✓ Auto-create categories
-- ✓ Auto-create users
-- ✓ Auto-sync roles
-
-### C. Note MediaCMS URLs for LMS Configuration
-
-You'll need these URLs when configuring your LMS:
-
-- **Tool URL:** `https://your-mediacms-domain.com/lti/launch/`
-- **OIDC Login URL:** `https://your-mediacms-domain.com/lti/oidc/login/`
-- **JWK Set URL:** `https://your-mediacms-domain.com/lti/jwks/`
-- **Redirection URI:** `https://your-mediacms-domain.com/lti/launch/`
-- **Deep Linking URL:** `https://your-mediacms-domain.com/lti/select-media/`
-
-## 3. LMS Configuration (Moodle Example)
-
-### A. Register MediaCMS as External Tool
-
-1. Navigate to: **Site administration → Plugins → Activity modules → External tool → Manage tools**
-2. Click **Configure a tool manually** or add new tool
-
-**Basic Settings:**
-- **Tool name:** MediaCMS
-- **Tool URL:** `https://your-mediacms-domain.com/lti/launch/`
-- **LTI version:** LTI 1.3
-- **Tool configuration usage:** Show in activity chooser
-
-**URLs:**
-- **Public keyset URL:** `https://your-mediacms-domain.com/lti/jwks/`
-- **Initiate login URL:** `https://your-mediacms-domain.com/lti/oidc/login/`
-- **Redirection URI(s):** `https://your-mediacms-domain.com/lti/launch/`
-
-**Launch Settings:**
-- **Default launch container:** Embed (without blocks) or New window
-- **Accept grades from tool:** Optional
-- **Share launcher's name:** Always ⚠️ **REQUIRED for user names**
-- **Share launcher's email:** Always ⚠️ **REQUIRED for user emails**
-
-> **Important:** MediaCMS creates user accounts automatically on first LTI launch. To ensure users have proper names and email addresses in MediaCMS, you **must** set both "Share launcher's name with tool" and "Share launcher's email with tool" to **Always** in the Privacy settings. Without these settings, users will be created with only a username based on their LTI user ID.
-
-**Services:**
-- ✓ IMS LTI Names and Role Provisioning (for roster sync)
-- ✓ IMS LTI Deep Linking (for media selection)
-
-**Tool Settings (Important for Deep Linking):**
-- ✓ **Supports Deep Linking (Content-Item Message)** - Enable this to allow instructors to browse and select media from MediaCMS when adding activities
-
-3. Save the tool configuration
-
-### B. Copy Platform Details to MediaCMS
-
-After saving, your LMS will provide:
-- Platform ID (Issuer URL)
-- Client ID
-- Deployment ID
-
-Copy these values back to the LTIPlatform configuration in MediaCMS admin (step 2B above).
-
-### C. Using MediaCMS in Courses
-
-**Option 1: Embed "My Media" view (Default)**
-- In a course, add activity → External tool → MediaCMS
-- Leave the custom URL blank (uses default launch URL)
-- Students/teachers will see their MediaCMS profile in an iframe
-
-**Option 2: Link to a Specific Video**
-- Add activity → External tool → MediaCMS
-- Activity name: "November 2020 Video" (or any descriptive name)
-- In the activity settings, find **"Custom parameters"** (may be under "Privacy" or "Additional Settings")
-- Add this parameter:
-  ```
-  media_friendly_token=abc123def
-  ```
-- Replace `abc123def` with your video's token from MediaCMS (found in the URL: `/view?m=abc123def`)
-- Students clicking this activity will go directly to that specific video
-
-**Option 3: Link to Any MediaCMS Page**
-- Add activity → External tool → MediaCMS
-- In **"Custom parameters"**, add:
-  ```
-  redirect_path=/featured
-  ```
-- Supported paths:
-  - `/featured` - Featured videos page
-  - `/latest` - Latest videos
-  - `/search/?q=keyword` - Search results
-  - `/category/category-name` - Specific category
-  - `/user/username` - User's profile
-  - Any other MediaCMS page path
-
-**Option 4: Embed Specific Media via Deep Linking (Interactive)**
-
-⚠️ **Prerequisite:** Ensure "Supports Deep Linking (Content-Item Message)" is enabled in the External Tool configuration (see section 3.A above)
-
-When adding the activity to your course:
-1. Add activity → External tool → MediaCMS
-2. In the activity settings, enable **"Supports Deep Linking"** checkbox (may be under "Tool settings" or "Privacy" section)
-3. Click **"Select content"** button → This launches the MediaCMS media browser
-4. Browse and select media from MediaCMS (you can select multiple)
-5. Click **"Add to course"** → Returns to Moodle with selected media configured
-6. The activity will be automatically configured with the selected media's title and embed URL
-7. Students clicking this activity will go directly to the selected media
-
-### D. Custom Parameters - Complete Examples
-
-**Example 1: Link to a specific video titled "Lecture 1 - Introduction"**
-```
-Activity Name: Lecture 1 - Introduction
-Custom Parameters:
-media_friendly_token=a1b2c3d4e5
-```
-
-**Example 2: Link to course-specific videos**
-```
-Activity Name: Course Videos
-Custom Parameters:
-redirect_path=/category/biology101
-```
-
-**Example 3: Link to search results for "genetics"**
-```
-Activity Name: Genetics Videos
-Custom Parameters:
-redirect_path=/search/?q=genetics
-```
-
-**Example 4: Link to featured content**
-```
-Activity Name: Featured Videos
-Custom Parameters:
-redirect_path=/featured
-```
-
-**Where to find Custom Parameters in Moodle:**
-1. When creating/editing the External Tool activity
-2. Expand **"Privacy"** section, or look for **"Additional Settings"**
-3. Find the **"Custom parameters"** text field
-4. Enter one parameter per line in the format: `key=value`
-
-## 4. Testing Checklist
-
-- [ ] HTTPS is working on MediaCMS
-- [ ] `USE_LTI = True` in local_settings.py
-- [ ] LTIPlatform configured in Django admin
-- [ ] External tool registered in LMS
-- [ ] Launch from LMS creates new user in MediaCMS
-- [ ] Course is mapped to MediaCMS category
-- [ ] Users are added to RBAC group with correct roles
-- [ ] Media from course category is visible to course members
-- [ ] Public media is accessible
-- [ ] Private media from other courses is not accessible
-
-## 5. Default Role Mappings
-
-The system automatically maps LMS roles to MediaCMS:
-
-- **Instructor/Teacher** → advancedUser (global) + manager (course group)
-- **Student/Learner** → user (global) + member (course group)
-- **Teaching Assistant** → user (global) + contributor (course group)
-- **Administrator** → manager (global) + manager (course group)
-
-You can customize these in Django admin under **LTI Role Mappings**.
-
-## 6. User Creation and Authentication
-
-### User Creation via LTI
-
-When a user launches MediaCMS from your LMS for the first time, a MediaCMS account is automatically created with:
-- **Username:** Generated from email (preferred) or name, or a unique ID if neither is available
-- **Email:** From LTI claim (if shared by LMS)
-- **Name:** From LTI given_name/family_name claims (if shared by LMS)
-- **Roles:** Mapped from LTI roles to MediaCMS permissions
-- **Course membership:** Automatically added to the RBAC group for the course
-
-### Privacy Settings Are Critical
-
-⚠️ **For proper user accounts, you must configure the LTI tool's privacy settings in Moodle:**
-
-1. Edit the External Tool configuration in Moodle
-2. Go to the **Privacy** section
-3. Set **"Share launcher's name with tool"** to **Always**
-4. Set **"Share launcher's email with tool"** to **Always**
-
-Without these settings:
-- Users will not have proper names in MediaCMS
-- Users will not have email addresses
-- Usernames will be generic hashes (e.g., `lti_user_abc123def`)
-
-### Authentication
-
-Users created through LTI integration do **not** have a password set. They can only access MediaCMS through LTI launches from your LMS. This is intentional for security.
-
-If you need a user to have both LTI access and direct login capability, manually set a password using:
-```bash
-python manage.py changepassword <username>
-```
-
-## Need Help?
-
-If you encounter issues, check:
-- `/admin/lti/ltilaunchlog/` for launch attempt logs
-- Django logs for detailed error messages
-- Ensure HTTPS is properly configured (required for iframe cookies)
-- Verify all URLs are correct and accessible
-- Check that the Client ID and Deployment ID match between MediaCMS and your LMS

cms/settings.py

@@ -665,6 +665,5 @@ if USE_LTI:
     SESSION_COOKIE_SECURE = True
     CSRF_COOKIE_SAMESITE = 'None'
     CSRF_COOKIE_SECURE = True
-    SESSION_ENGINE = "django.contrib.sessions.backends.cached_db"
-# Use cached_db for reliability - stores in both cache AND database
-# This prevents session loss during multiple simultaneous LTI launches
+    # SESSION_ENGINE = "django.contrib.sessions.backends.cached_db"
+    # Consider using cached_db for reliability if sessions are lost between many LTI launches

cms/version.py

@@ -1 +1 @@
-VERSION = "7.8124"
+VERSION = "7.ki"

files/admin.py

@@ -146,6 +146,8 @@ class CategoryAdmin(admin.ModelAdmin):
             list_filter.insert(0, "is_rbac_category")
         if getattr(settings, 'USE_IDENTITY_PROVIDERS', False):
             list_filter.insert(-1, "identity_provider")
+        if getattr(settings, 'USE_LTI', False):
+            list_filter.append("is_lms_course")
 
         return list_filter
 
@@ -155,6 +157,8 @@ class CategoryAdmin(admin.ModelAdmin):
             list_display.insert(-1, "is_rbac_category")
         if getattr(settings, 'USE_IDENTITY_PROVIDERS', False):
             list_display.insert(-1, "identity_provider")
+        if getattr(settings, 'USE_LTI', False):
+            list_display.insert(-1, "is_lms_course")
 
         return list_display
 

files/forms.py

@@ -127,6 +127,7 @@ class MediaPublishForm(forms.ModelForm):
 
     def __init__(self, user, *args, **kwargs):
         self.user = user
+        self.request = kwargs.pop('request', None)
         super(MediaPublishForm, self).__init__(*args, **kwargs)
 
         self.has_custom_permissions = self.instance.permissions.exists() if self.instance.pk else False
@@ -169,6 +170,16 @@ class MediaPublishForm(forms.ModelForm):
 
                 self.fields['category'].queryset = Category.objects.filter(id__in=combined_category_ids).order_by('title')
 
+        # Filter for LMS courses only when in embed mode
+        if self.request and 'category' in self.fields:
+            is_embed_mode = self._check_embed_mode()
+            if is_embed_mode:
+                current_queryset = self.fields['category'].queryset
+                self.fields['category'].queryset = current_queryset.filter(is_lms_course=True)
+                self.fields['category'].label = 'Course'
+                self.fields['category'].help_text = 'Media can be shared with one or more courses'
+                self.fields['category'].widget.is_lms_mode = True
+
         self.helper = FormHelper()
         self.helper.form_tag = True
         self.helper.form_class = 'post-form'
@@ -186,6 +197,22 @@ class MediaPublishForm(forms.ModelForm):
 
         self.helper.layout.append(FormActions(Submit('submit', 'Publish Media', css_class='primaryAction')))
 
+    def _check_embed_mode(self):
+        """Check if the current request is in embed mode"""
+        if not self.request:
+            return False
+
+        # Check query parameter
+        mode = self.request.GET.get('mode', '')
+        if mode == 'lms_embed_mode':
+            return True
+
+        # Check session storage
+        if self.request.session.get('lms_embed_mode') == 'true':
+            return True
+
+        return False
+
     def clean(self):
         cleaned_data = super().clean()
         state = cleaned_data.get("state")

files/models/media.py

@@ -736,7 +736,7 @@ class Media(models.Model):
 
         ret = []
         for cat in self.category.all():
-            ret.append({"title": cat.title, "url": cat.get_absolute_url()})
+            ret.append({"title": cat.title, "url": cat.get_absolute_url(), "is_lms_course": cat.is_lms_course})
         return ret
 
     @property

files/serializers.py

@@ -226,6 +226,7 @@ class CategorySerializer(serializers.ModelSerializer):
             "media_count",
             "user",
             "thumbnail_url",
+            "is_lms_course",
         )
 
 

files/views/categories.py

@@ -47,7 +47,14 @@ class CategoryListContributor(APIView):
     """List categories where user has contributor access"""
 
     @swagger_auto_schema(
-        manual_parameters=[],
+        manual_parameters=[
+            openapi.Parameter(
+                name='lms_courses_only',
+                type=openapi.TYPE_BOOLEAN,
+                in_=openapi.IN_QUERY,
+                description='Filter to show only LMS courses (categories with is_lms_course=True)',
+            ),
+        ],
         tags=['Categories'],
         operation_summary='Lists Categories for Contributors',
         operation_description='Lists all categories where the user has contributor access',
@@ -61,15 +68,17 @@ class CategoryListContributor(APIView):
 
         categories = Category.objects.none()
 
-        # Get global/public categories (non-RBAC)
-        public_categories = Category.objects.filter(is_rbac_category=False).prefetch_related("user")
+        # Filter for LMS courses only if requested
+        lms_courses_only = request.GET.get('lms_courses_only', '').lower() in ['true', '1', 'yes']
+        if lms_courses_only:
+            categories = categories.filter(is_lms_course=True)
+        else:
+            categories = Category.objects.filter(is_rbac_category=False).prefetch_related("user")
 
         # Get RBAC categories where user has contributor access
         if getattr(settings, 'USE_RBAC', False):
             rbac_categories = request.user.get_rbac_categories_as_contributor()
-            categories = public_categories.union(rbac_categories)
-        else:
-            categories = public_categories
+            categories = categories.union(rbac_categories)
 
         categories = categories.order_by("title")
 

files/views/media.py

@@ -178,7 +178,7 @@ class MediaList(APIView):
                     rbac_categories = request.user.get_rbac_categories_as_member()
                     conditions |= Q(category__in=rbac_categories)
 
-                media = base_queryset.filter(conditions).distinct()
+                media = base_queryset.filter(conditions).exclude(user=request.user).distinct()
         elif author_param:
             user_queryset = User.objects.all()
             user = get_object_or_404(user_queryset, username=author_param)
@@ -574,12 +574,31 @@ class MediaBulkUserActions(APIView):
 
         elif action == "add_to_category":
             category_uids = request.data.get('category_uids', [])
-            if not category_uids:
-                return Response({"detail": "category_uids is required for add_to_category action"}, status=status.HTTP_400_BAD_REQUEST)
+            lti_context_id = request.data.get('lti_context_id')
+
+            if not category_uids and not lti_context_id:
+                return Response({"detail": "category_uids or lti_context_id is required for add_to_category action"}, status=status.HTTP_400_BAD_REQUEST)
+
+            categories = Category.objects.none()
+
+            # Prioritize category_uids
+            if category_uids:
+                categories = Category.objects.filter(uid__in=category_uids)
+            elif lti_context_id:
+                # Filter categories by lti_context_id and ensure they ARE RBAC categories
+                potential_categories = Category.objects.filter(lti_context_id=lti_context_id, is_rbac_category=True)
+
+                # Check user access (must have contributor access)
+                valid_category_ids = []
+                for cat in potential_categories:
+                    if request.user.has_contributor_access_to_category(cat):
+                        valid_category_ids.append(cat.id)
+
+                if valid_category_ids:
+                    categories = Category.objects.filter(id__in=valid_category_ids)
 
-            categories = Category.objects.filter(uid__in=category_uids)
             if not categories:
-                return Response({"detail": "No matching categories found"}, status=status.HTTP_400_BAD_REQUEST)
+                return Response({"detail": "No matching categories found or access denied"}, status=status.HTTP_400_BAD_REQUEST)
 
             added_count = 0
             for category in categories:
@@ -697,12 +716,9 @@ class MediaDetail(APIView):
             return media
 
         serializer = SingleMediaSerializer(media, context={"request": request})
-        if media.state == "private":
-            related_media = []
-        else:
-            related_media = show_related_media(media, request=request, limit=100)
-            related_media_serializer = MediaSerializer(related_media, many=True, context={"request": request})
-            related_media = related_media_serializer.data
+        related_media = show_related_media(media, request=request, limit=100)
+        related_media_serializer = MediaSerializer(related_media, many=True, context={"request": request})
+        related_media = related_media_serializer.data
         ret = serializer.data
 
         # update rattings info with user specific ratings

files/views/pages.py

@@ -350,13 +350,13 @@ def publish_media(request):
         return HttpResponseRedirect(media.get_absolute_url())
 
     if request.method == "POST":
-        form = MediaPublishForm(request.user, request.POST, request.FILES, instance=media)
+        form = MediaPublishForm(request.user, request.POST, request.FILES, instance=media, request=request)
         if form.is_valid():
             media = form.save()
             messages.add_message(request, messages.INFO, translate_string(request.LANGUAGE_CODE, "Media was edited"))
             return HttpResponseRedirect(media.get_absolute_url())
     else:
-        form = MediaPublishForm(request.user, instance=media)
+        form = MediaPublishForm(request.user, instance=media, request=request)
 
     return render(
         request,

files/widgets.py

@@ -3,6 +3,8 @@ import json
 from django import forms
 from django.utils.safestring import mark_safe
 
+from .models import Category
+
 
 class CategoryModalWidget(forms.SelectMultiple):
     """Two-panel category selector with modal"""
@@ -12,28 +14,42 @@ class CategoryModalWidget(forms.SelectMultiple):
         js = ('js/category_modal.js',)
 
     def render(self, name, value, attrs=None, renderer=None):
+        is_lms_mode = getattr(self, 'is_lms_mode', False)
+
         # Get all categories as JSON
         categories = []
         for opt_value, opt_label in self.choices:
             if opt_value:  # Skip empty choice
-                categories.append({'id': str(opt_value), 'title': str(opt_label)})
+                # Extract the actual ID value from ModelChoiceIteratorValue if needed
+                category_id = opt_value.value if hasattr(opt_value, 'value') else opt_value
+
+                # Get is_lms_course info from the Category object
+                try:
+                    cat_obj = Category.objects.get(id=category_id)
+                    categories.append({'id': str(category_id), 'title': str(opt_label), 'is_lms_course': cat_obj.is_lms_course})
+                except Category.DoesNotExist:
+                    categories.append({'id': str(category_id), 'title': str(opt_label), 'is_lms_course': False})
 
         all_categories_json = json.dumps(categories)
         selected_ids_json = json.dumps([str(v) for v in (value or [])])
+        lms_mode_json = json.dumps(is_lms_mode)
+
+        search_placeholder = "Search courses..." if is_lms_mode else "Search categories..."
+        selected_header = "Selected Courses" if is_lms_mode else "Selected Categories"
 
         html = f'''<div class="category-widget" data-name="{name}">
   <div class="category-content">
     <div class="category-panel">
-      <input type="text" class="category-search" placeholder="Search categories...">
+      <input type="text" class="category-search" placeholder="{search_placeholder}">
       <div class="category-list scrollable" data-panel="left"></div>
     </div>
     <div class="category-panel">
-      <h3>Selected Categories</h3>
+      <h3>{selected_header}</h3>
       <div class="category-list scrollable" data-panel="right"></div>
     </div>
   </div>
   <div class="hidden-inputs"></div>
-  <script type="application/json" class="category-data">{{"all":{all_categories_json},"selected":{selected_ids_json}}}</script>
+  <script type="application/json" class="category-data">{{"all":{all_categories_json},"selected":{selected_ids_json},"lms_mode":{lms_mode_json}}}</script>
 </div>'''
 
         return mark_safe(html)

frontend-tools/video-js/examples/full-screen-video.html

@@ -0,0 +1,34 @@
+<!DOCTYPE html>
+<html lang="en" style="height: 100%">
+    <head>
+        <meta charset="UTF-8" />
+        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+        <title>Embedded Video - Full Screen</title>
+        <style>
+            body {
+                margin: 0;
+                padding: 0;
+                min-height: 100vh;
+                display: flex;
+                align-items: center;
+                justify-content: center;
+                background-color: #000;
+                overflow: hidden;
+            }
+        </style>
+    </head>
+    <body>
+        <iframe
+            src="https://demo.mediacms.io/embed?m=zK2nirNLC"
+            style="
+                width: 100%;
+                max-width: calc(100vh * 16 / 9);
+                aspect-ratio: 16 / 9;
+                display: block;
+                margin: auto;
+                border: 0;
+            "
+            allowfullscreen
+        ></iframe>
+    </body>
+</html>

frontend-tools/video-js/src/components/controls/SeekIndicator.js

@@ -204,6 +204,54 @@ class SeekIndicator extends Component {
     </div>
   `;
             textEl.textContent = 'Pause';
+        } else if (direction === 'copy-url') {
+            iconEl.innerHTML = `
+    <div style="display: flex; align-items: center; justify-content: center; animation: youtubeSeekPulse 0.3s ease-out;">
+      <div style="
+          width: ${circleSize};
+          height: ${circleSize};
+          border-radius: 50%;
+          background: rgba(0, 0, 0, 0.3);
+          display: flex;
+          align-items: center;
+          justify-content: center;
+          border: none;
+          outline: none;
+          box-sizing: border-box;
+          overflow: hidden;
+      ">
+        <svg viewBox="0 0 24 24" width="${iconSize}" height="${iconSize}" fill="none" stroke="white" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" style="filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.5));">
+          <path d="M10 13a5 5 0 0 0 7.54.54l3-3a5 5 0 0 0-7.07-7.07l-1.72 1.71"/>
+          <path d="M14 11a5 5 0 0 0-7.54-.54l-3 3a5 5 0 0 0 7.07 7.07l1.71-1.71"/>
+        </svg>
+      </div>
+    </div>
+  `;
+            textEl.textContent = '';
+        } else if (direction === 'copy-embed') {
+            iconEl.innerHTML = `
+    <div style="display: flex; align-items: center; justify-content: center; animation: youtubeSeekPulse 0.3s ease-out;">
+      <div style="
+          width: ${circleSize};
+          height: ${circleSize};
+          border-radius: 50%;
+          background: rgba(0, 0, 0, 0.3);
+          display: flex;
+          align-items: center;
+          justify-content: center;
+          border: none;
+          outline: none;
+          box-sizing: border-box;
+          overflow: hidden;
+      ">
+        <svg viewBox="0 0 24 24" width="${iconSize}" height="${iconSize}" fill="none" stroke="white" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" style="filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.5));">
+          <path d="M16 18l6-6-6-6"/>
+          <path d="M8 6l-6 6 6 6"/>
+        </svg>
+      </div>
+    </div>
+  `;
+            textEl.textContent = '';
         }
 
         // Clear any text content in the text element
@@ -239,6 +287,11 @@ class SeekIndicator extends Component {
             this.showTimeout = setTimeout(() => {
                 this.hide();
             }, 500);
+        } else if (direction === 'copy-url' || direction === 'copy-embed') {
+            // Copy operations: 500ms (same as play/pause)
+            this.showTimeout = setTimeout(() => {
+                this.hide();
+            }, 500);
         }
     }
 

frontend-tools/video-js/src/components/overlays/EmbedInfoOverlay.js

@@ -14,10 +14,22 @@ class EmbedInfoOverlay extends Component {
         this.authorThumbnail = options.authorThumbnail || '';
         this.videoTitle = options.videoTitle || 'Video';
         this.videoUrl = options.videoUrl || '';
+        this.showTitle = options.showTitle !== undefined ? options.showTitle : true;
+        this.showRelated = options.showRelated !== undefined ? options.showRelated : true;
+        this.showUserAvatar = options.showUserAvatar !== undefined ? options.showUserAvatar : true;
+        this.linkTitle = options.linkTitle !== undefined ? options.linkTitle : true;
 
         // Initialize after player is ready
         this.player().ready(() => {
-            this.createOverlay();
+            if (this.showTitle) {
+                this.createOverlay();
+            } else {
+                // Hide overlay element if showTitle is false
+                const overlay = this.el();
+                overlay.style.display = 'none';
+                overlay.style.opacity = '0';
+                overlay.style.visibility = 'hidden';
+            }
         });
     }
 
@@ -49,7 +61,7 @@ class EmbedInfoOverlay extends Component {
         `;
 
         // Create avatar container
-        if (this.authorThumbnail) {
+        if (this.authorThumbnail && this.showUserAvatar) {
             const avatarContainer = document.createElement('div');
             avatarContainer.className = 'embed-avatar-container';
             avatarContainer.style.cssText = `
@@ -125,7 +137,7 @@ class EmbedInfoOverlay extends Component {
             overflow: hidden;
         `;
 
-        if (this.videoUrl) {
+        if (this.videoUrl && this.linkTitle) {
             const titleLink = document.createElement('a');
             titleLink.href = this.videoUrl;
             titleLink.target = '_blank';
@@ -186,10 +198,16 @@ class EmbedInfoOverlay extends Component {
         const player = this.player();
         const overlay = this.el();
 
+        // If showTitle is false, ensure overlay is hidden
+        if (!this.showTitle) {
+            overlay.style.display = 'none';
+            overlay.style.opacity = '0';
+            overlay.style.visibility = 'hidden';
+            return;
+        }
+
         // Sync overlay visibility with control bar visibility
         const updateOverlayVisibility = () => {
-            const controlBar = player.getChild('controlBar');
-
             if (!player.hasStarted()) {
                 // Show overlay when video hasn't started (poster is showing) - like before
                 overlay.style.opacity = '1';

frontend-tools/video-js/src/components/overlays/VideoContextMenu.css

@@ -0,0 +1,47 @@
+.video-context-menu {
+    position: fixed;
+    background-color: #282828;
+    border-radius: 4px;
+    padding: 4px 0;
+    min-width: 240px;
+    z-index: 10000;
+    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
+    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif;
+}
+
+.video-context-menu-item {
+    display: flex;
+    align-items: center;
+    padding: 10px 16px;
+    color: #ffffff;
+    cursor: pointer;
+    transition: background-color 0.15s ease;
+    font-size: 14px;
+    user-select: none;
+}
+
+.video-context-menu-item:hover {
+    background-color: #3d3d3d;
+}
+
+.video-context-menu-item:active {
+    background-color: #4a4a4a;
+}
+
+.video-context-menu-icon {
+    width: 18px;
+    height: 18px;
+    margin-right: 12px;
+    flex-shrink: 0;
+    stroke: currentColor;
+    fill: none;
+    stroke-width: 2;
+    stroke-linecap: round;
+    stroke-linejoin: round;
+}
+
+.video-context-menu-item span {
+    flex: 1;
+    white-space: nowrap;
+}
+

frontend-tools/video-js/src/components/overlays/VideoContextMenu.jsx

@@ -0,0 +1,85 @@
+import React, { useEffect, useRef } from 'react';
+import './VideoContextMenu.css';
+
+function VideoContextMenu({ visible, position, onClose, onCopyVideoUrl, onCopyVideoUrlAtTime, onCopyEmbedCode }) {
+    const menuRef = useRef(null);
+
+    useEffect(() => {
+        if (visible && menuRef.current) {
+            // Position the menu
+            menuRef.current.style.left = `${position.x}px`;
+            menuRef.current.style.top = `${position.y}px`;
+
+            // Adjust if menu goes off screen
+            const rect = menuRef.current.getBoundingClientRect();
+            const windowWidth = window.innerWidth;
+            const windowHeight = window.innerHeight;
+
+            if (rect.right > windowWidth) {
+                menuRef.current.style.left = `${position.x - rect.width}px`;
+            }
+            if (rect.bottom > windowHeight) {
+                menuRef.current.style.top = `${position.y - rect.height}px`;
+            }
+        }
+    }, [visible, position]);
+
+    useEffect(() => {
+        const handleClickOutside = (e) => {
+            if (visible && menuRef.current && !menuRef.current.contains(e.target)) {
+                onClose();
+            }
+        };
+
+        const handleEscape = (e) => {
+            if (e.key === 'Escape' && visible) {
+                onClose();
+            }
+        };
+
+        if (visible) {
+            // Use capture phase to catch events earlier, before they can be stopped
+            // Listen to both mousedown and click to ensure we catch all clicks
+            document.addEventListener('mousedown', handleClickOutside, true);
+            document.addEventListener('click', handleClickOutside, true);
+            document.addEventListener('keydown', handleEscape);
+        }
+
+        return () => {
+            document.removeEventListener('mousedown', handleClickOutside, true);
+            document.removeEventListener('click', handleClickOutside, true);
+            document.removeEventListener('keydown', handleEscape);
+        };
+    }, [visible, onClose]);
+
+    if (!visible) return null;
+
+    return (
+        <div ref={menuRef} className="video-context-menu" onClick={(e) => e.stopPropagation()}>
+            <div className="video-context-menu-item" onClick={onCopyVideoUrl}>
+                <svg className="video-context-menu-icon" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+                    <path d="M10 13a5 5 0 0 0 7.54.54l3-3a5 5 0 0 0-7.07-7.07l-1.72 1.71" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"/>
+                    <path d="M14 11a5 5 0 0 0-7.54-.54l-3 3a5 5 0 0 0 7.07 7.07l1.71-1.71" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"/>
+                </svg>
+                <span>Copy video URL</span>
+            </div>
+            <div className="video-context-menu-item" onClick={onCopyVideoUrlAtTime}>
+                <svg className="video-context-menu-icon" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+                    <path d="M10 13a5 5 0 0 0 7.54.54l3-3a5 5 0 0 0-7.07-7.07l-1.72 1.71" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"/>
+                    <path d="M14 11a5 5 0 0 0-7.54-.54l-3 3a5 5 0 0 0 7.07 7.07l1.71-1.71" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"/>
+                </svg>
+                <span>Copy video URL at current time</span>
+            </div>
+            <div className="video-context-menu-item" onClick={onCopyEmbedCode}>
+                <svg className="video-context-menu-icon" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+                    <path d="M16 18l6-6-6-6" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"/>
+                    <path d="M8 6l-6 6 6 6" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"/>
+                </svg>
+                <span>Copy embed code</span>
+            </div>
+        </div>
+    );
+}
+
+export default VideoContextMenu;
+

frontend-tools/video-js/src/components/video-player/VideoJSPlayer.jsx

@@ -1,4 +1,4 @@
-import React, { useEffect, useRef, useMemo } from 'react';
+import React, { useEffect, useRef, useMemo, useState, useCallback } from 'react';
 import videojs from 'video.js';
 import 'video.js/dist/video-js.css';
 import '../../styles/embed.css';
@@ -17,6 +17,7 @@ import CustomRemainingTime from '../controls/CustomRemainingTime';
 import CustomChaptersOverlay from '../controls/CustomChaptersOverlay';
 import CustomSettingsMenu from '../controls/CustomSettingsMenu';
 import SeekIndicator from '../controls/SeekIndicator';
+import VideoContextMenu from '../overlays/VideoContextMenu';
 import UserPreferences from '../../utils/UserPreferences';
 import PlayerConfig from '../../config/playerConfig';
 import { AutoplayHandler } from '../../utils/AutoplayHandler';
@@ -169,7 +170,7 @@ const enableStandardButtonTooltips = (player) => {
     }, 500); // Delay to ensure all components are ready
 };
 
-function VideoJSPlayer({ videoId = 'default-video' }) {
+function VideoJSPlayer({ videoId = 'default-video', showTitle = true, showRelated = true, showUserAvatar = true, linkTitle = true, urlTimestamp = null }) {
     const videoRef = useRef(null);
     const playerRef = useRef(null); // Track the player instance
     const userPreferences = useRef(new UserPreferences()); // User preferences instance
@@ -177,25 +178,17 @@ function VideoJSPlayer({ videoId = 'default-video' }) {
     const keyboardHandler = useRef(null); // Keyboard handler instance
     const playbackEventHandler = useRef(null); // Playback event handler instance
 
+    // Context menu state
+    const [contextMenuVisible, setContextMenuVisible] = useState(false);
+    const [contextMenuPosition, setContextMenuPosition] = useState({ x: 0, y: 0 });
+
     // Check if this is an embed player (disable next video and autoplay features)
     const isEmbedPlayer = videoId === 'video-embed';
 
-    // Utility function to detect touch devices
-    const isTouchDevice = useMemo(() => {
-        return 'ontouchstart' in window || navigator.maxTouchPoints > 0 || navigator.msMaxTouchPoints > 0;
-    }, []);
-
-    // Utility function to detect iOS devices
-    const isIOS = useMemo(() => {
-        return (
-            /iPad|iPhone|iPod/.test(navigator.userAgent) ||
-            (navigator.platform === 'MacIntel' && navigator.maxTouchPoints > 1)
-        );
-    }, []);
-
     // Environment-based development mode configuration
     const isDevMode = import.meta.env.VITE_DEV_MODE === 'true' || window.location.hostname.includes('vercel.app');
-    // Safely access window.MEDIA_DATA with fallback using useMemo
+
+    // Read options from window.MEDIA_DATA if available (for consistency with embed logic)
     const mediaData = useMemo(
         () =>
             typeof window !== 'undefined' && window.MEDIA_DATA
@@ -214,12 +207,37 @@ function VideoJSPlayer({ videoId = 'default-video' }) {
                       },
                       siteUrl: 'https://deic.mediacms.io',
                       nextLink: 'https://deic.mediacms.io/view?m=elygiagorgechania',
-                      urlAutoplay: true,
-                      urlMuted: false,
                   },
         []
     );
 
+    // Helper to get effective value (prop or MEDIA_DATA or default)
+    const getOption = (propKey, mediaDataKey, defaultValue) => {
+        if (isEmbedPlayer) {
+            if (mediaData[mediaDataKey] !== undefined) return mediaData[mediaDataKey];
+        }
+        return propKey !== undefined ? propKey : defaultValue;
+    };
+
+    const finalShowTitle = getOption(showTitle, 'showTitle', true);
+    const finalShowRelated = getOption(showRelated, 'showRelated', true);
+    const finalShowUserAvatar = getOption(showUserAvatar, 'showUserAvatar', true);
+    const finalLinkTitle = getOption(linkTitle, 'linkTitle', true);
+    const finalTimestamp = getOption(urlTimestamp, 'urlTimestamp', null);
+
+    // Utility function to detect touch devices
+    const isTouchDevice = useMemo(() => {
+        return 'ontouchstart' in window || navigator.maxTouchPoints > 0 || navigator.msMaxTouchPoints > 0;
+    }, []);
+
+    // Utility function to detect iOS devices
+    const isIOS = useMemo(() => {
+        return (
+            /iPad|iPhone|iPod/.test(navigator.userAgent) ||
+            (navigator.platform === 'MacIntel' && navigator.maxTouchPoints > 1)
+        );
+    }, []);
+
     // Define chapters as JSON object
     // Note: The sample-chapters.vtt file is no longer needed as chapters are now loaded from this JSON
     // CONDITIONAL LOGIC:
@@ -531,8 +549,6 @@ function VideoJSPlayer({ videoId = 'default-video' }) {
             isPlayList: mediaData?.isPlayList,
             related_media: mediaData.data?.related_media || [],
             nextLink: mediaData?.nextLink || null,
-            urlAutoplay: mediaData?.urlAutoplay || true,
-            urlMuted: mediaData?.urlMuted || false,
             sources: getVideoSources(),
         };
 
@@ -738,6 +754,212 @@ function VideoJSPlayer({ videoId = 'default-video' }) {
         }
     };
 
+    // Context menu handlers
+    const handleContextMenu = useCallback((e) => {
+        // Only handle if clicking on video player area
+        const target = e.target;
+        const isVideoPlayerArea =
+            target.closest('.video-js') ||
+            target.classList.contains('vjs-tech') ||
+            target.tagName === 'VIDEO' ||
+            target.closest('video');
+
+        if (isVideoPlayerArea) {
+            e.preventDefault();
+            e.stopPropagation();
+
+            setContextMenuPosition({ x: e.clientX, y: e.clientY });
+            setContextMenuVisible(true);
+        }
+    }, []);
+
+    const closeContextMenu = () => {
+        setContextMenuVisible(false);
+    };
+
+    // Helper function to get media ID
+    const getMediaId = () => {
+        if (typeof window !== 'undefined' && window.MEDIA_DATA?.data?.friendly_token) {
+            return window.MEDIA_DATA.data.friendly_token;
+        }
+        if (mediaData?.data?.friendly_token) {
+            return mediaData.data.friendly_token;
+        }
+        // Try to get from URL (works for both main page and embed page)
+        if (typeof window !== 'undefined') {
+            const urlParams = new URLSearchParams(window.location.search);
+            const mediaIdFromUrl = urlParams.get('m');
+            if (mediaIdFromUrl) {
+                return mediaIdFromUrl;
+            }
+            // Also check if we're on an embed page with media ID in path
+            const pathMatch = window.location.pathname.match(/\/embed\/([^/?]+)/);
+            if (pathMatch) {
+                return pathMatch[1];
+            }
+        }
+        return currentVideo.id || 'default-video';
+    };
+
+    // Helper function to get base origin URL (handles embed mode)
+    const getBaseOrigin = () => {
+        if (typeof window !== 'undefined') {
+            // In embed mode, try to get origin from parent window if possible
+            // Otherwise use current window origin
+            try {
+                // Check if we're in an iframe and can access parent
+                if (window.parent !== window && window.parent.location.origin) {
+                    return window.parent.location.origin;
+                }
+            } catch {
+                // Cross-origin iframe, use current origin
+            }
+            return window.location.origin;
+        }
+        return mediaData.siteUrl || 'https://deic.mediacms.io';
+    };
+
+    // Helper function to get embed URL
+    const getEmbedUrl = () => {
+        const mediaId = getMediaId();
+        const origin = getBaseOrigin();
+
+        // Try to get embed URL from config or construct it
+        if (typeof window !== 'undefined' && window.MediaCMS?.config?.url?.embed) {
+            return window.MediaCMS.config.url.embed + mediaId;
+        }
+
+        // Fallback: construct embed URL (check if current URL is embed format)
+        if (typeof window !== 'undefined' && window.location.pathname.includes('/embed')) {
+            // If we're already on an embed page, use current URL format
+            const currentUrl = new URL(window.location.href);
+            currentUrl.searchParams.set('m', mediaId);
+            return currentUrl.toString();
+        }
+
+        // Default embed URL format
+        return `${origin}/embed?m=${mediaId}`;
+    };
+
+    // Copy video URL to clipboard
+    const handleCopyVideoUrl = async () => {
+        const mediaId = getMediaId();
+        const origin = getBaseOrigin();
+        const videoUrl = `${origin}/view?m=${mediaId}`;
+
+        // Show copy icon
+        if (customComponents.current?.seekIndicator) {
+            customComponents.current.seekIndicator.show('copy-url');
+        }
+
+        try {
+            await navigator.clipboard.writeText(videoUrl);
+            closeContextMenu();
+            // You can add a notification here if needed
+        } catch (err) {
+            console.error('Failed to copy video URL:', err);
+            // Fallback for older browsers
+            const textArea = document.createElement('textarea');
+            textArea.value = videoUrl;
+            document.body.appendChild(textArea);
+            textArea.select();
+            document.execCommand('copy');
+            document.body.removeChild(textArea);
+            closeContextMenu();
+        }
+    };
+
+    // Copy video URL at current time to clipboard
+    const handleCopyVideoUrlAtTime = async () => {
+        if (!playerRef.current) {
+            closeContextMenu();
+            return;
+        }
+
+        const currentTime = Math.floor(playerRef.current.currentTime() || 0);
+        const mediaId = getMediaId();
+        const origin = getBaseOrigin();
+        const videoUrl = `${origin}/view?m=${mediaId}&t=${currentTime}`;
+
+        // Show copy icon
+        if (customComponents.current?.seekIndicator) {
+            customComponents.current.seekIndicator.show('copy-url');
+        }
+
+        try {
+            await navigator.clipboard.writeText(videoUrl);
+            closeContextMenu();
+        } catch (err) {
+            console.error('Failed to copy video URL at time:', err);
+            // Fallback for older browsers
+            const textArea = document.createElement('textarea');
+            textArea.value = videoUrl;
+            document.body.appendChild(textArea);
+            textArea.select();
+            document.execCommand('copy');
+            document.body.removeChild(textArea);
+            closeContextMenu();
+        }
+    };
+
+    // Copy embed code to clipboard
+    const handleCopyEmbedCode = async () => {
+        const embedUrl = getEmbedUrl();
+        const embedCode = `<iframe width="560" height="315" src="${embedUrl}" frameborder="0" allowfullscreen></iframe>`;
+
+        // Show copy embed icon
+        if (customComponents.current?.seekIndicator) {
+            customComponents.current.seekIndicator.show('copy-embed');
+        }
+
+        try {
+            await navigator.clipboard.writeText(embedCode);
+            closeContextMenu();
+        } catch (err) {
+            console.error('Failed to copy embed code:', err);
+            // Fallback for older browsers
+            const textArea = document.createElement('textarea');
+            textArea.value = embedCode;
+            document.body.appendChild(textArea);
+            textArea.select();
+            document.execCommand('copy');
+            document.body.removeChild(textArea);
+            closeContextMenu();
+        }
+    };
+
+    // Add context menu handler directly to video element and document (works before and after Video.js initialization)
+    useEffect(() => {
+        const videoElement = videoRef.current;
+
+        // Attach to document with capture to catch all contextmenu events, then filter
+        const documentHandler = (e) => {
+            // Check if the event originated from within the video player
+            const target = e.target;
+            const playerWrapper =
+                videoElement?.closest('.video-js') || document.querySelector(`#${videoId}`)?.closest('.video-js');
+
+            if (playerWrapper && (playerWrapper.contains(target) || target === playerWrapper)) {
+                handleContextMenu(e);
+            }
+        };
+
+        // Use capture phase on document to catch before anything else
+        document.addEventListener('contextmenu', documentHandler, true);
+
+        // Also attach directly to video element
+        if (videoElement) {
+            videoElement.addEventListener('contextmenu', handleContextMenu, true);
+        }
+
+        return () => {
+            document.removeEventListener('contextmenu', documentHandler, true);
+            if (videoElement) {
+                videoElement.removeEventListener('contextmenu', handleContextMenu, true);
+            }
+        };
+    }, [handleContextMenu, videoId]);
+
     useEffect(() => {
         // Only initialize if we don't already have a player and element exists
         if (videoRef.current && !playerRef.current) {
@@ -1078,6 +1300,9 @@ function VideoJSPlayer({ videoId = 'default-video' }) {
                         currentVideo,
                         relatedVideos,
                         goToNextVideo,
+                        showRelated: finalShowRelated,
+                        showUserAvatar: finalShowUserAvatar,
+                        linkTitle: finalLinkTitle,
                     });
                     customComponents.current.endScreenHandler = endScreenHandler; // Store for cleanup
 
@@ -1098,8 +1323,8 @@ function VideoJSPlayer({ videoId = 'default-video' }) {
                     }
 
                     // Handle URL timestamp parameter
-                    if (mediaData.urlTimestamp !== null && mediaData.urlTimestamp >= 0) {
-                        const timestamp = mediaData.urlTimestamp;
+                    if (finalTimestamp !== null && finalTimestamp >= 0) {
+                        const timestamp = finalTimestamp;
 
                         // Wait for video metadata to be loaded before seeking
                         if (playerRef.current.readyState() >= 1) {
@@ -1997,6 +2222,10 @@ function VideoJSPlayer({ videoId = 'default-video' }) {
                             authorThumbnail: currentVideo.author_thumbnail,
                             videoTitle: currentVideo.title,
                             videoUrl: currentVideo.url,
+                            showTitle: finalShowTitle,
+                            showRelated: finalShowRelated,
+                            showUserAvatar: finalShowUserAvatar,
+                            linkTitle: finalLinkTitle,
                         });
                     }
                     // END: Add Embed Info Overlay Component
@@ -2083,52 +2312,113 @@ function VideoJSPlayer({ videoId = 'default-video' }) {
                         // Make the video element focusable
                         const videoElement = playerRef.current.el();
                         videoElement.setAttribute('tabindex', '0');
-                        videoElement.focus();
+                        
+                        if (!isEmbedPlayer) {
+                            videoElement.focus();
+                        }
+
+                        // Add context menu (right-click) handler to the player wrapper and video element
+                        // Attach to player wrapper (this catches all clicks on the player)
+                        videoElement.addEventListener('contextmenu', handleContextMenu, true);
+
+                        // Also try to attach to the actual video tech element
+                        const attachContextMenu = () => {
+                            const techElement =
+                                playerRef.current.el().querySelector('.vjs-tech') ||
+                                playerRef.current.el().querySelector('video') ||
+                                (playerRef.current.tech() && playerRef.current.tech().el());
+
+                            if (techElement && techElement !== videoRef.current && techElement !== videoElement) {
+                                // Use capture phase to catch before Video.js might prevent it
+                                techElement.addEventListener('contextmenu', handleContextMenu, true);
+                                return true;
+                            }
+                            return false;
+                        };
+
+                        // Try to attach immediately
+                        attachContextMenu();
+
+                        // Also try after a short delay in case elements aren't ready yet
+                        setTimeout(() => {
+                            attachContextMenu();
+                        }, 100);
+
+                        // Also try when video is loaded
+                        playerRef.current.one('loadedmetadata', () => {
+                            attachContextMenu();
+                        });
                     }
                 });
             }
             //}, 0);
         }
+
+        // Cleanup: Remove context menu event listener
+        return () => {
+            if (playerRef.current && playerRef.current.el()) {
+                const playerEl = playerRef.current.el();
+                playerEl.removeEventListener('contextmenu', handleContextMenu, true);
+
+                const techElement =
+                    playerEl.querySelector('.vjs-tech') ||
+                    playerEl.querySelector('video') ||
+                    (playerRef.current.tech() && playerRef.current.tech().el());
+                if (techElement) {
+                    techElement.removeEventListener('contextmenu', handleContextMenu, true);
+                }
+            }
+        };
     }, []);
 
     return (
-        <video
-            ref={videoRef}
-            id={videoId}
-            controls={true}
-            className={`video-js vjs-fluid vjs-default-skin${currentVideo.useRoundedCorners ? ' video-js-rounded-corners' : ''}`}
-            preload="auto"
-            poster={currentVideo.poster}
-            tabIndex="0"
-        >
-            {/* <source src="/videos/sample-video.mp4" type="video/mp4" />
-            <source src="/videos/sample-video.webm" type="video/webm" /> */}
-            <p className="vjs-no-js">
-                To view this video please enable JavaScript, and consider upgrading to a web browser that
-                <a href="https://videojs.com/html5-video-support/" target="_blank">
-                    supports HTML5 video
-                </a>
-            </p>
+        <>
+            <video
+                ref={videoRef}
+                id={videoId}
+                controls={true}
+                className={`video-js ${isEmbedPlayer ? 'vjs-fill' : 'vjs-fluid'} vjs-default-skin${currentVideo.useRoundedCorners ? ' video-js-rounded-corners' : ''}`}
+                preload="auto"
+                poster={currentVideo.poster}
+                tabIndex="0"
+            >
+                {/* <source src="/videos/sample-video.mp4" type="video/mp4" />
+                <source src="/videos/sample-video.webm" type="video/webm" /> */}
+                <p className="vjs-no-js">
+                    To view this video please enable JavaScript, and consider upgrading to a web browser that
+                    <a href="https://videojs.com/html5-video-support/" target="_blank">
+                        supports HTML5 video
+                    </a>
+                </p>
 
-            {/* Add subtitle tracks */}
-            {/* {subtitleTracks &&
-                subtitleTracks.map((track, index) => (
-                    <track
-                        key={index}
-                        kind={track.kind}
-                        src={track.src}
-                        srcLang={track.srclang}
-                        label={track.label}
-                        default={track.default}
-                    />
-                ))} */}
-            {/* 
-            <track kind="chapters" src="/sample-chapters.vtt" /> */}
-            {/* Add chapters track */}
-            {/*  {chaptersData &&
-                chaptersData.length > 0 &&
-                (console.log('chaptersData', chaptersData), (<track kind="chapters" src="/sample-chapters.vtt" />))} */}
-        </video>
+                {/* Add subtitle tracks */}
+                {/* {subtitleTracks &&
+                    subtitleTracks.map((track, index) => (
+                        <track
+                            key={index}
+                            kind={track.kind}
+                            src={track.src}
+                            srcLang={track.srclang}
+                            label={track.label}
+                            default={track.default}
+                        />
+                    ))} */}
+                {/* 
+                <track kind="chapters" src="/sample-chapters.vtt" /> */}
+                {/* Add chapters track */}
+                {/*  {chaptersData &&
+                    chaptersData.length > 0 &&
+                    (console.log('chaptersData', chaptersData), (<track kind="chapters" src="/sample-chapters.vtt" />))} */}
+            </video>
+            <VideoContextMenu
+                visible={contextMenuVisible}
+                position={contextMenuPosition}
+                onClose={closeContextMenu}
+                onCopyVideoUrl={handleCopyVideoUrl}
+                onCopyVideoUrlAtTime={handleCopyVideoUrlAtTime}
+                onCopyEmbedCode={handleCopyEmbedCode}
+            />
+        </>
     );
 }
 

frontend-tools/video-js/src/utils/EndScreenHandler.js

@@ -63,7 +63,17 @@ export class EndScreenHandler {
     }
 
     handleVideoEnded() {
-        const { isEmbedPlayer, userPreferences, mediaData, currentVideo, relatedVideos, goToNextVideo } = this.options;
+        const {
+            isEmbedPlayer,
+            userPreferences,
+            mediaData,
+            currentVideo,
+            relatedVideos,
+            goToNextVideo,
+            showRelated,
+            showUserAvatar,
+            linkTitle,
+        } = this.options;
 
         // For embed players, show big play button when video ends
         if (isEmbedPlayer) {
@@ -73,6 +83,34 @@ export class EndScreenHandler {
             }
         }
 
+        // If showRelated is false, we don't show the end screen or autoplay countdown
+        if (showRelated === false) {
+            // But we still want to keep the control bar visible and hide the poster
+            setTimeout(() => {
+                if (this.player && !this.player.isDisposed()) {
+                    const playerEl = this.player.el();
+                    if (playerEl) {
+                        // Hide poster elements
+                        const posterElements = playerEl.querySelectorAll('.vjs-poster');
+                        posterElements.forEach((posterEl) => {
+                            posterEl.style.display = 'none';
+                            posterEl.style.visibility = 'hidden';
+                            posterEl.style.opacity = '0';
+                        });
+
+                        // Keep control bar visible
+                        const controlBar = this.player.getChild('controlBar');
+                        if (controlBar) {
+                            controlBar.show();
+                            controlBar.el().style.opacity = '1';
+                            controlBar.el().style.pointerEvents = 'auto';
+                        }
+                    }
+                }
+            }, 50);
+            return;
+        }
+
         // Keep controls active after video ends
         setTimeout(() => {
             if (this.player && !this.player.isDisposed()) {

frontend/src/static/js/components/BulkActionCategoryModal.tsx

@@ -1,6 +1,7 @@
 import React, { useState, useEffect } from 'react';
 import './BulkActionCategoryModal.scss';
 import { translateString } from '../utils/helpers/';
+import { inEmbeddedApp } from '../utils/helpers/embeddedApp';
 
 interface Category {
   title: string;
@@ -24,6 +25,7 @@ export const BulkActionCategoryModal: React.FC<BulkActionCategoryModalProps> = (
   onError,
   csrfToken,
 }) => {
+  const isLmsMode = inEmbeddedApp();
   const [existingCategories, setExistingCategories] = useState<Category[]>([]);
   const [allCategories, setAllCategories] = useState<Category[]>([]);
   const [categoriesToAdd, setCategoriesToAdd] = useState<Category[]>([]);
@@ -66,20 +68,27 @@ export const BulkActionCategoryModal: React.FC<BulkActionCategoryModalProps> = (
       const existingData = await existingResponse.json();
       const existing = existingData.results || [];
 
-      // Fetch all categories
-      const allResponse = await fetch('/api/v1/categories');
+      // Fetch all categories (or LMS courses only in embed mode)
+      const categoriesUrl = isLmsMode
+        ? '/api/v1/categories/contributor?lms_courses_only=true'
+        : '/api/v1/categories';
+      const allResponse = await fetch(categoriesUrl);
       if (!allResponse.ok) {
-        throw new Error(translateString('Failed to fetch all categories'));
+        throw new Error(isLmsMode ? translateString('Failed to fetch courses') : translateString('Failed to fetch all categories'));
       }
 
       const allData = await allResponse.json();
       const all = allData.results || allData;
 
-      setExistingCategories(existing);
+      // In LMS mode, filter existing to only show LMS course categories
+      const allUids = new Set(all.map((c: Category) => c.uid));
+      const filteredExisting = isLmsMode ? existing.filter((c: Category) => allUids.has(c.uid)) : existing;
+
+      setExistingCategories(filteredExisting);
       setAllCategories(all);
     } catch (error) {
       console.error('Error fetching categories:', error);
-      onError(translateString('Failed to load categories'));
+      onError(isLmsMode ? translateString('Failed to load courses') : translateString('Failed to load categories'));
     } finally {
       setIsLoading(false);
     }
@@ -126,7 +135,7 @@ export const BulkActionCategoryModal: React.FC<BulkActionCategoryModalProps> = (
         });
 
         if (!addResponse.ok) {
-          throw new Error(translateString('Failed to add categories'));
+          throw new Error(isLmsMode ? translateString('Failed to add courses') : translateString('Failed to add categories'));
         }
       }
 
@@ -147,15 +156,15 @@ export const BulkActionCategoryModal: React.FC<BulkActionCategoryModalProps> = (
         });
 
         if (!removeResponse.ok) {
-          throw new Error(translateString('Failed to remove categories'));
+          throw new Error(isLmsMode ? translateString('Failed to remove courses') : translateString('Failed to remove categories'));
         }
       }
 
-      onSuccess(translateString('Successfully updated categories'));
+      onSuccess(isLmsMode ? translateString('Successfully updated courses') : translateString('Successfully updated categories'));
       onCancel();
     } catch (error) {
       console.error('Error processing categories:', error);
-      onError(translateString('Failed to update categories. Please try again.'));
+      onError(isLmsMode ? translateString('Failed to update courses. Please try again.') : translateString('Failed to update categories. Please try again.'));
     } finally {
       setIsProcessing(false);
     }
@@ -184,7 +193,7 @@ export const BulkActionCategoryModal: React.FC<BulkActionCategoryModalProps> = (
     <div className="category-modal-overlay">
       <div className="category-modal">
         <div className="category-modal-header">
-          <h2>{translateString('Add / Remove from Categories')}</h2>
+          <h2>{isLmsMode ? translateString('Share with Course') : translateString('Add / Remove from Categories')}</h2>
           <button className="category-modal-close" onClick={onCancel}>
             ×
           </button>
@@ -192,14 +201,14 @@ export const BulkActionCategoryModal: React.FC<BulkActionCategoryModalProps> = (
 
         <div className="category-modal-content">
           <div className="category-panel">
-            <h3>{translateString('Categories')}</h3>
+            <h3>{isLmsMode ? translateString('Courses') : translateString('Categories')}</h3>
 
             {isLoading ? (
-              <div className="loading-message">{translateString('Loading categories...')}</div>
+              <div className="loading-message">{isLmsMode ? translateString('Loading courses...') : translateString('Loading categories...')}</div>
             ) : (
               <div className="category-list scrollable">
                 {leftPanelCategories.length === 0 ? (
-                  <div className="empty-message">{translateString('All categories already added')}</div>
+                  <div className="empty-message">{isLmsMode ? translateString('All courses already added') : translateString('All categories already added')}</div>
                 ) : (
                   leftPanelCategories.map((category) => (
                     <div
@@ -227,11 +236,11 @@ export const BulkActionCategoryModal: React.FC<BulkActionCategoryModalProps> = (
             </h3>
 
             {isLoading ? (
-              <div className="loading-message">{translateString('Loading categories...')}</div>
+              <div className="loading-message">{isLmsMode ? translateString('Loading courses...') : translateString('Loading categories...')}</div>
             ) : (
               <div className="category-list scrollable">
                 {rightPanelCategories.length === 0 ? (
-                  <div className="empty-message">{translateString('No categories')}</div>
+                  <div className="empty-message">{isLmsMode ? translateString('No courses') : translateString('No categories')}</div>
                 ) : (
                   rightPanelCategories.map((category) => {
                     const isExisting = existingCategories.some((c) => c.uid === category.uid);
@@ -251,7 +260,7 @@ export const BulkActionCategoryModal: React.FC<BulkActionCategoryModalProps> = (
                               removeCategoryFromAddList(category);
                             }
                           }}
-                          title={isMarkedForRemoval ? translateString('Undo removal') : isExisting ? translateString('Remove category') : translateString('Remove from list')}
+                          title={isMarkedForRemoval ? translateString('Undo removal') : isExisting ? (isLmsMode ? translateString('Remove course') : translateString('Remove category')) : translateString('Remove from list')}
                         >
                           {isMarkedForRemoval ? '↺' : '×'}
                         </button>

frontend/src/static/js/components/BulkActionsDropdown.tsx

@@ -1,6 +1,7 @@
 import React from 'react';
 import './BulkActionsDropdown.scss';
 import { translateString } from '../utils/helpers/';
+import { inEmbeddedApp } from '../utils/helpers/embeddedApp';
 
 interface BulkActionsDropdownProps {
   selectedCount: number;
@@ -12,7 +13,7 @@ const BULK_ACTIONS = [
   { value: 'add-remove-coeditors', label: translateString('Add / Remove Co-Editors'), enabled: true },
   { value: 'add-remove-coowners', label: translateString('Add / Remove Co-Owners'), enabled: true },
   { value: 'add-remove-playlist', label: translateString('Add to / Remove from Playlist'), enabled: true },
-  { value: 'add-remove-category', label: translateString('Add to / Remove from Category'), enabled: true },
+  { value: 'add-remove-category', label: inEmbeddedApp() ? translateString('Share with Course') : translateString('Add to / Remove from Category'), enabled: true },
   { value: 'add-remove-tags', label: translateString('Add / Remove Tags'), enabled: true },
   { value: 'enable-comments', label: translateString('Enable Comments'), enabled: true },
   { value: 'disable-comments', label: translateString('Disable Comments'), enabled: true },

frontend/src/static/js/components/MediaListHeader.tsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import { translateString } from '../utils/helpers/';
+import { translateString, inSelectMediaEmbedMode } from '../utils/helpers/';
 
 interface MediaListHeaderProps {
   title?: string;
@@ -11,10 +11,12 @@ interface MediaListHeaderProps {
 
 export const MediaListHeader: React.FC<MediaListHeaderProps> = (props) => {
   const viewAllText = props.viewAllText || translateString('VIEW ALL');
+  const isSelectMediaMode = inSelectMediaEmbedMode();
+
   return (
     <div className={(props.className ? props.className + ' ' : '') + 'media-list-header'} style={props.style}>
       <h2>{props.title}</h2>
-      {props.viewAllLink ? (
+      {!isSelectMediaMode && props.viewAllLink ? (
         <h3>
           {' '}
           <a href={props.viewAllLink} title={viewAllText}>

frontend/src/static/js/components/VideoJS/VideoJSEmbed.jsx

@@ -31,8 +31,11 @@ const VideoJSEmbed = ({
     poster,
     previewSprite,
     subtitlesInfo,
-    enableAutoplay,
     inEmbed,
+    showTitle,
+    showRelated,
+    showUserAvatar,
+    linkTitle,
     hasTheaterMode,
     hasNextLink,
     nextLink,
@@ -62,8 +65,10 @@ const VideoJSEmbed = ({
         if (typeof window !== 'undefined') {
             // Get URL parameters for autoplay, muted, and timestamp
             const urlTimestamp = getUrlParameter('t');
-            const urlAutoplay = getUrlParameter('autoplay');
             const urlMuted = getUrlParameter('muted');
+            const urlShowRelated = getUrlParameter('showRelated');
+            const urlShowUserAvatar = getUrlParameter('showUserAvatar');
+            const urlLinkTitle = getUrlParameter('linkTitle');
             
             window.MEDIA_DATA = {
                 data: data || {}, 
@@ -71,7 +76,7 @@ const VideoJSEmbed = ({
                 version: version,
                 isPlayList: isPlayList,
                 playerVolume: playerVolume || 0.5,
-                playerSoundMuted: playerSoundMuted || (urlMuted === '1'),
+                playerSoundMuted: urlMuted === '1',
                 videoQuality: videoQuality || 'auto',
                 videoPlaybackSpeed: videoPlaybackSpeed || 1,
                 inTheaterMode: inTheaterMode || false,
@@ -83,8 +88,11 @@ const VideoJSEmbed = ({
                 poster: poster || '',
                 previewSprite: previewSprite || null,
                 subtitlesInfo: subtitlesInfo || [],
-                enableAutoplay: enableAutoplay || (urlAutoplay === '1'),
                 inEmbed: inEmbed || false,
+                showTitle: showTitle || false,
+                showRelated: showRelated !== undefined ? showRelated : (urlShowRelated === '1' || urlShowRelated === 'true' || urlShowRelated === null),
+                showUserAvatar: showUserAvatar !== undefined ? showUserAvatar : (urlShowUserAvatar === '1' || urlShowUserAvatar === 'true' || urlShowUserAvatar === null),
+                linkTitle: linkTitle !== undefined ? linkTitle : (urlLinkTitle === '1' || urlLinkTitle === 'true' || urlLinkTitle === null),
                 hasTheaterMode: hasTheaterMode || false,
                 hasNextLink: hasNextLink || false,
                 nextLink: nextLink || null,
@@ -92,8 +100,10 @@ const VideoJSEmbed = ({
                 errorMessage: errorMessage || '',
                 // URL parameters
                 urlTimestamp: urlTimestamp ? parseInt(urlTimestamp, 10) : null,
-                urlAutoplay: urlAutoplay === '1',
                 urlMuted: urlMuted === '1',
+                urlShowRelated: urlShowRelated === '1' || urlShowRelated === 'true',
+                urlShowUserAvatar: urlShowUserAvatar === '1' || urlShowUserAvatar === 'true',
+                urlLinkTitle: urlLinkTitle === '1' || urlLinkTitle === 'true',
                 onClickNextCallback: onClickNextCallback || null,
                 onClickPreviousCallback: onClickPreviousCallback || null,
                 onStateUpdateCallback: onStateUpdateCallback || null,
@@ -176,11 +186,17 @@ const VideoJSEmbed = ({
                     // Scroll to the video player with smooth behavior
                     const videoElement = document.querySelector(inEmbedRef.current ? '#video-embed' : '#video-main');
                     if (videoElement) {
-                        videoElement.scrollIntoView({ 
-                            behavior: 'smooth', 
-                            block: 'center',
-                            inline: 'nearest'
-                        });
+                        const urlScroll = getUrlParameter('scroll');
+                        const isIframe = window.parent !== window;
+                        
+                        // Only scroll if not in an iframe, OR if explicitly requested via scroll=1 parameter
+                        if (!isIframe || urlScroll === '1' || urlScroll === 'true') {
+                            videoElement.scrollIntoView({ 
+                                behavior: 'smooth', 
+                                block: 'center',
+                                inline: 'nearest'
+                            });
+                        }
                     }
                 } else {
                     console.warn('VideoJS player not found for timestamp navigation');
@@ -220,7 +236,14 @@ const VideoJSEmbed = ({
 
     return (
         <div className="video-js-wrapper" ref={containerRef}>
-            {inEmbed ? <div id="video-js-root-embed" className="video-js-root-embed" /> : <div id="video-js-root-main" className="video-js-root-main" />}
+            {inEmbed ? (
+                <div 
+                    id="video-js-root-embed" 
+                    className="video-js-root-embed"
+                />
+            ) : (
+                <div id="video-js-root-main" className="video-js-root-main" />
+            )}
         </div>
     );
 };

frontend/src/static/js/components/list-item/MediaItem.jsx

@@ -1,18 +1,50 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import { useMediaItem } from '../../utils/hooks/';
-import { PositiveInteger, PositiveIntegerOrZero } from '../../utils/helpers/';
+import { PositiveInteger, PositiveIntegerOrZero, inSelectMediaEmbedMode } from '../../utils/helpers/';
 import { MediaItemThumbnailLink, itemClassname } from './includes/items/';
 import { Item } from './Item';
 
 export function MediaItem(props) {
   const type = props.type;
+  const isSelectMediaMode = inSelectMediaEmbedMode();
 
-  const [titleComponent, descriptionComponent, thumbnailUrl, UnderThumbWrapper, editMediaComponent, metaComponents, viewMediaComponent] =
+  const [titleComponentOrig, descriptionComponent, thumbnailUrl, UnderThumbWrapperOrig, editMediaComponent, metaComponents, viewMediaComponent] =
     useMediaItem({ ...props, type });
 
+  // In embed mode, override components to remove links
+  const ItemTitle = ({ title }) => (
+    <h3>
+      <span>{title}</span>
+    </h3>
+  );
+
+  const ItemMain = ({ children }) => <div className="item-main">{children}</div>;
+
+  const titleComponent = isSelectMediaMode
+    ? () => <ItemTitle title={props.title} />
+    : titleComponentOrig;
+
+  const UnderThumbWrapper = isSelectMediaMode ? ItemMain : UnderThumbWrapperOrig;
 
   function thumbnailComponent() {
+    if (isSelectMediaMode) {
+      // In embed mode, render thumbnail without link
+      const thumbStyle = thumbnailUrl ? { backgroundImage: "url('" + thumbnailUrl + "')" } : null;
+      return (
+        <div
+          key="item-thumb"
+          className={'item-thumb' + (!thumbnailUrl ? ' no-thumb' : '')}
+          style={thumbStyle}
+        >
+          {thumbnailUrl ? (
+            <div key="item-type-icon" className="item-type-icon">
+              <div></div>
+            </div>
+          ) : null}
+        </div>
+      );
+    }
     return <MediaItemThumbnailLink src={thumbnailUrl} title={props.title} link={props.link} />;
   }
 
@@ -25,11 +57,13 @@ export function MediaItem(props) {
   const finalClassname = containerClassname +
     (props.showSelection ? ' with-selection' : '') +
     (props.isSelected ? ' selected' : '') +
-    (props.hasAnySelection ? ' has-any-selection' : '');
+    (props.hasAnySelection || isSelectMediaMode ? ' has-any-selection' : '');
 
   const handleItemClick = (e) => {
-    // If there's any selection active, clicking the item should toggle selection
-    if (props.hasAnySelection && props.onCheckboxChange) {
+    const isSelectMediaMode = inSelectMediaEmbedMode();
+
+    // In select media mode or if there's any selection active, clicking the item should toggle selection
+    if ((isSelectMediaMode || props.hasAnySelection) && props.onCheckboxChange) {
       // Check if clicking on the checkbox itself, edit icon, or view icon
       if (e.target.closest('.item-selection-checkbox') ||
           e.target.closest('.item-edit-icon') ||
@@ -59,16 +93,24 @@ export function MediaItem(props) {
           </div>
         )}
 
-        {editMediaComponent()}
-        {viewMediaComponent()}
+        {!isSelectMediaMode && editMediaComponent()}
+        {!isSelectMediaMode && viewMediaComponent()}
 
         {thumbnailComponent()}
 
-        <UnderThumbWrapper title={props.title} link={props.link}>
-          {titleComponent()}
-          {metaComponents()}
-          {descriptionComponent()}
-        </UnderThumbWrapper>
+        {isSelectMediaMode ? (
+          <UnderThumbWrapper>
+            {titleComponent()}
+            {metaComponents()}
+            {descriptionComponent()}
+          </UnderThumbWrapper>
+        ) : (
+          <UnderThumbWrapper title={props.title} link={props.link}>
+            {titleComponent()}
+            {metaComponents()}
+            {descriptionComponent()}
+          </UnderThumbWrapper>
+        )}
       </div>
     </div>
   );

frontend/src/static/js/components/list-item/MediaItemAudio.jsx

@@ -1,7 +1,7 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import { useMediaItem } from '../../utils/hooks/';
-import { PositiveIntegerOrZero } from '../../utils/helpers/';
+import { PositiveIntegerOrZero, inSelectMediaEmbedMode } from '../../utils/helpers/';
 import { MediaDurationInfo } from '../../utils/classes/';
 import { MediaPlaylistOptions } from '../media-playlist-options/MediaPlaylistOptions';
 import { MediaItemDuration, MediaItemPlaylistIndex, itemClassname } from './includes/items/';
@@ -9,10 +9,26 @@ import { MediaItem } from './MediaItem';
 
 export function MediaItemAudio(props) {
   const type = props.type;
+  const isSelectMediaMode = inSelectMediaEmbedMode();
 
-  const [titleComponent, descriptionComponent, thumbnailUrl, UnderThumbWrapper, editMediaComponent, metaComponents, viewMediaComponent] =
+  const [titleComponentOrig, descriptionComponent, thumbnailUrl, UnderThumbWrapperOrig, editMediaComponent, metaComponents, viewMediaComponent] =
     useMediaItem({ ...props, type });
 
+  // In embed mode, override components to remove links
+  const ItemTitle = ({ title }) => (
+    <h3>
+      <span>{title}</span>
+    </h3>
+  );
+
+  const ItemMain = ({ children }) => <div className="item-main">{children}</div>;
+
+  const titleComponent = isSelectMediaMode
+    ? () => <ItemTitle title={props.title} />
+    : titleComponentOrig;
+
+  const UnderThumbWrapper = isSelectMediaMode ? ItemMain : UnderThumbWrapperOrig;
+
   const _MediaDurationInfo = new MediaDurationInfo();
 
   _MediaDurationInfo.update(props.duration);
@@ -22,6 +38,21 @@ export function MediaItemAudio(props) {
   const durationISO8601 = _MediaDurationInfo.ISO8601();
 
   function thumbnailComponent() {
+    if (isSelectMediaMode) {
+      // In embed mode, render thumbnail without link
+      return (
+        <div
+          key="item-thumb"
+          className={'item-thumb' + (!thumbnailUrl ? ' no-thumb' : '')}
+          style={!thumbnailUrl ? null : { backgroundImage: "url('" + thumbnailUrl + "')" }}
+        >
+          {props.inPlaylistView ? null : (
+            <MediaItemDuration ariaLabel={duration} time={durationISO8601} text={durationStr} />
+          )}
+        </div>
+      );
+    }
+
     const attr = {
       key: 'item-thumb',
       href: props.link,
@@ -68,11 +99,11 @@ export function MediaItemAudio(props) {
   const finalClassname = containerClassname +
     (props.showSelection ? ' with-selection' : '') +
     (props.isSelected ? ' selected' : '') +
-    (props.hasAnySelection ? ' has-any-selection' : '');
+    (props.hasAnySelection || isSelectMediaMode ? ' has-any-selection' : '');
 
   const handleItemClick = (e) => {
-    // If there's any selection active, clicking the item should toggle selection
-    if (props.hasAnySelection && props.onCheckboxChange) {
+    // In embed mode or if there's any selection active, clicking the item should toggle selection
+    if ((isSelectMediaMode || props.hasAnySelection) && props.onCheckboxChange) {
       // Check if clicking on the checkbox itself, edit icon, or view icon
       if (e.target.closest('.item-selection-checkbox') ||
           e.target.closest('.item-edit-icon') ||
@@ -104,16 +135,24 @@ export function MediaItemAudio(props) {
           </div>
         )}
 
-        {editMediaComponent()}
-        {viewMediaComponent()}
+        {!isSelectMediaMode && editMediaComponent()}
+        {!isSelectMediaMode && viewMediaComponent()}
 
         {thumbnailComponent()}
 
-        <UnderThumbWrapper title={props.title} link={props.link}>
-          {titleComponent()}
-          {metaComponents()}
-          {descriptionComponent()}
-        </UnderThumbWrapper>
+        {isSelectMediaMode ? (
+          <UnderThumbWrapper>
+            {titleComponent()}
+            {metaComponents()}
+            {descriptionComponent()}
+          </UnderThumbWrapper>
+        ) : (
+          <UnderThumbWrapper title={props.title} link={props.link}>
+            {titleComponent()}
+            {metaComponents()}
+            {descriptionComponent()}
+          </UnderThumbWrapper>
+        )}
 
         {playlistOptionsComponent()}
       </div>

frontend/src/static/js/components/list-item/MediaItemVideo.jsx

@@ -1,7 +1,7 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import { useMediaItem } from '../../utils/hooks/';
-import { PositiveIntegerOrZero } from '../../utils/helpers/';
+import { PositiveIntegerOrZero, inSelectMediaEmbedMode } from '../../utils/helpers/';
 import { MediaDurationInfo } from '../../utils/classes/';
 import { MediaPlaylistOptions } from '../media-playlist-options/MediaPlaylistOptions.jsx';
 import { MediaItemVideoPlayer, MediaItemDuration, MediaItemVideoPreviewer, MediaItemPlaylistIndex, itemClassname } from './includes/items/';
@@ -9,10 +9,26 @@ import { MediaItem } from './MediaItem';
 
 export function MediaItemVideo(props) {
   const type = props.type;
+  const isSelectMediaMode = inSelectMediaEmbedMode();
 
-  const [titleComponent, descriptionComponent, thumbnailUrl, UnderThumbWrapper, editMediaComponent, metaComponents, viewMediaComponent] =
+  const [titleComponentOrig, descriptionComponent, thumbnailUrl, UnderThumbWrapperOrig, editMediaComponent, metaComponents, viewMediaComponent] =
     useMediaItem({ ...props, type });
 
+  // In embed mode, override components to remove links
+  const ItemTitle = ({ title }) => (
+    <h3>
+      <span>{title}</span>
+    </h3>
+  );
+
+  const ItemMain = ({ children }) => <div className="item-main">{children}</div>;
+
+  const titleComponent = isSelectMediaMode
+    ? () => <ItemTitle title={props.title} />
+    : titleComponentOrig;
+
+  const UnderThumbWrapper = isSelectMediaMode ? ItemMain : UnderThumbWrapperOrig;
+
   const _MediaDurationInfo = new MediaDurationInfo();
 
   _MediaDurationInfo.update(props.duration);
@@ -26,6 +42,24 @@ export function MediaItemVideo(props) {
   }
 
   function thumbnailComponent() {
+    if (isSelectMediaMode) {
+      // In select media mode, render thumbnail without link
+      return (
+        <div
+          key="item-thumb"
+          className={'item-thumb' + (!thumbnailUrl ? ' no-thumb' : '')}
+          style={!thumbnailUrl ? null : { backgroundImage: "url('" + thumbnailUrl + "')" }}
+        >
+          {props.inPlaylistView ? null : (
+            <MediaItemDuration ariaLabel={duration} time={durationISO8601} text={durationStr} />
+          )}
+          {props.inPlaylistView || props.inPlaylistPage ? null : (
+            <MediaItemVideoPreviewer url={props.preview_thumbnail} />
+          )}
+        </div>
+      );
+    }
+
     const attr = {
       key: 'item-thumb',
       href: props.link,
@@ -75,11 +109,11 @@ export function MediaItemVideo(props) {
   const finalClassname = containerClassname +
     (props.showSelection ? ' with-selection' : '') +
     (props.isSelected ? ' selected' : '') +
-    (props.hasAnySelection ? ' has-any-selection' : '');
+    (props.hasAnySelection || isSelectMediaMode ? ' has-any-selection' : '');
 
   const handleItemClick = (e) => {
-    // If there's any selection active, clicking the item should toggle selection
-    if (props.hasAnySelection && props.onCheckboxChange) {
+    // In select media mode or if there's any selection active, clicking the item should toggle selection
+    if ((isSelectMediaMode || props.hasAnySelection) && props.onCheckboxChange) {
       // Check if clicking on the checkbox itself, edit icon, or view icon
       if (e.target.closest('.item-selection-checkbox') ||
           e.target.closest('.item-edit-icon') ||
@@ -111,19 +145,27 @@ export function MediaItemVideo(props) {
           </div>
         )}
 
-        {editMediaComponent()}
-        {viewMediaComponent()}
+        {!isSelectMediaMode && editMediaComponent()}
+        {!isSelectMediaMode && viewMediaComponent()}
 
         {props.hasMediaViewer ? videoViewerComponent() : thumbnailComponent()}
 
-        <UnderThumbWrapper title={props.title} link={props.link}>
-          {titleComponent()}
-          {metaComponents()}
-          {descriptionComponent()}
-        </UnderThumbWrapper>
-      </div>
+        {isSelectMediaMode ? (
+          <UnderThumbWrapper>
+            {titleComponent()}
+            {metaComponents()}
+            {descriptionComponent()}
+          </UnderThumbWrapper>
+        ) : (
+          <UnderThumbWrapper title={props.title} link={props.link}>
+            {titleComponent()}
+            {metaComponents()}
+            {descriptionComponent()}
+          </UnderThumbWrapper>
+        )}
 
-      {playlistOptionsComponent()}
+        {playlistOptionsComponent()}
+      </div>
     </div>
   );
 }

frontend/src/static/js/components/media-actions/MediaShareEmbed.jsx

@@ -4,10 +4,32 @@ import { LinksContext, SiteConsumer } from '../../utils/contexts/';
 import { PageStore, MediaPageStore } from '../../utils/stores/';
 import { PageActions, MediaPageActions } from '../../utils/actions/';
 import { CircleIconButton, MaterialIcon, NumericInputWithUnit } from '../_shared/';
-import VideoViewer from '../media-viewer/VideoViewer';
+
+const EMBED_OPTIONS_STORAGE_KEY = 'mediacms_embed_options';
+
+function loadEmbedOptions() {
+  try {
+    const saved = localStorage.getItem(EMBED_OPTIONS_STORAGE_KEY);
+    if (saved) {
+      return JSON.parse(saved);
+    }
+  } catch (e) {
+    // Ignore localStorage errors
+  }
+  return null;
+}
+
+function saveEmbedOptions(options) {
+  try {
+    localStorage.setItem(EMBED_OPTIONS_STORAGE_KEY, JSON.stringify(options));
+  } catch (e) {
+    // Ignore localStorage errors
+  }
+}
 
 export function MediaShareEmbed(props) {
   const embedVideoDimensions = PageStore.get('config-options').embedded.video.dimensions;
+  const savedOptions = loadEmbedOptions();
 
   const links = useContext(LinksContext);
 
@@ -18,12 +40,19 @@ export function MediaShareEmbed(props) {
   const onRightBottomRef = useRef(null);
 
   const [maxHeight, setMaxHeight] = useState(window.innerHeight - 144 + 56);
-  const [keepAspectRatio, setKeepAspectRatio] = useState(false);
-  const [aspectRatio, setAspectRatio] = useState('16:9');
-  const [embedWidthValue, setEmbedWidthValue] = useState(embedVideoDimensions.width);
-  const [embedWidthUnit, setEmbedWidthUnit] = useState(embedVideoDimensions.widthUnit);
-  const [embedHeightValue, setEmbedHeightValue] = useState(embedVideoDimensions.height);
-  const [embedHeightUnit, setEmbedHeightUnit] = useState(embedVideoDimensions.heightUnit);
+  const [keepAspectRatio, setKeepAspectRatio] = useState(savedOptions?.keepAspectRatio ?? true);
+  const [showTitle, setShowTitle] = useState(savedOptions?.showTitle ?? true);
+  const [showRelated, setShowRelated] = useState(savedOptions?.showRelated ?? true);
+  const [showUserAvatar, setShowUserAvatar] = useState(savedOptions?.showUserAvatar ?? true);
+  const [linkTitle, setLinkTitle] = useState(savedOptions?.linkTitle ?? true);
+  const [responsive, setResponsive] = useState(savedOptions?.responsive ?? false);
+  const [startAt, setStartAt] = useState(false);
+  const [startTime, setStartTime] = useState('0:00');
+  const [aspectRatio, setAspectRatio] = useState(savedOptions?.aspectRatio ?? '16:9');
+  const [embedWidthValue, setEmbedWidthValue] = useState(savedOptions?.embedWidthValue ?? embedVideoDimensions.width);
+  const [embedWidthUnit, setEmbedWidthUnit] = useState(savedOptions?.embedWidthUnit ?? embedVideoDimensions.widthUnit);
+  const [embedHeightValue, setEmbedHeightValue] = useState(savedOptions?.embedHeightValue ?? embedVideoDimensions.height);
+  const [embedHeightUnit, setEmbedHeightUnit] = useState(savedOptions?.embedHeightUnit ?? embedVideoDimensions.heightUnit);
   const [rightMiddlePositionTop, setRightMiddlePositionTop] = useState(60);
   const [rightMiddlePositionBottom, setRightMiddlePositionBottom] = useState(60);
   const [unitOptions, setUnitOptions] = useState([
@@ -71,36 +100,65 @@ export function MediaShareEmbed(props) {
     setEmbedHeightUnit(newVal);
   }
 
-  function onKeepAspectRatioChange() {
-    const newVal = !keepAspectRatio;
+  function onShowTitleChange() {
+    setShowTitle(!showTitle);
+  }
 
-    const arr = aspectRatio.split(':');
-    const x = arr[0];
-    const y = arr[1];
+  function onShowRelatedChange() {
+    setShowRelated(!showRelated);
+  }
 
-    setKeepAspectRatio(newVal);
-    setEmbedWidthUnit(newVal ? 'px' : embedWidthUnit);
-    setEmbedHeightUnit(newVal ? 'px' : embedHeightUnit);
-    setEmbedHeightValue(newVal ? parseInt((embedWidthValue * y) / x, 10) : embedHeightValue);
-    setUnitOptions(
-      newVal
-        ? [{ key: 'px', label: 'px' }]
-        : [
-          { key: 'px', label: 'px' },
-          { key: 'percent', label: '%' },
-        ]
-    );
+  function onShowUserAvatarChange() {
+    setShowUserAvatar(!showUserAvatar);
+  }
+
+  function onLinkTitleChange() {
+    setLinkTitle(!linkTitle);
+  }
+
+  function onResponsiveChange() {
+    const nextResponsive = !responsive;
+    setResponsive(nextResponsive);
+
+    if (!nextResponsive) {
+      if (aspectRatio !== 'custom') {
+        const arr = aspectRatio.split(':');
+        const x = arr[0];
+        const y = arr[1];
+
+        setKeepAspectRatio(true);
+        setEmbedHeightValue(parseInt((embedWidthValue * y) / x, 10));
+      } else {
+        setKeepAspectRatio(false);
+      }
+    } else {
+      setKeepAspectRatio(false);
+    }
+  }
+
+  function onStartAtChange() {
+    setStartAt(!startAt);
+  }
+
+  function onStartTimeChange(e) {
+    setStartTime(e.target.value);
   }
 
   function onAspectRatioChange() {
     const newVal = aspectRatioValueRef.current.value;
 
-    const arr = newVal.split(':');
-    const x = arr[0];
-    const y = arr[1];
+    if (newVal === 'custom') {
+      setAspectRatio(newVal);
+      setKeepAspectRatio(false);
+    } else {
+      const arr = newVal.split(':');
+      const x = arr[0];
+      const y = arr[1];
 
-    setAspectRatio(newVal);
-    setEmbedHeightValue(keepAspectRatio ? parseInt((embedWidthValue * y) / x, 10) : embedHeightValue);
+      setAspectRatio(newVal);
+      setKeepAspectRatio(true);
+      setEmbedHeightValue(parseInt((embedWidthValue * y) / x, 10));
+    }
   }
 
   function onWindowResize() {
@@ -130,13 +188,88 @@ export function MediaShareEmbed(props) {
     };
   }, []);
 
+  // Save embed options to localStorage when they change (except startAt/startTime)
+  useEffect(() => {
+    saveEmbedOptions({
+      showTitle,
+      showRelated,
+      showUserAvatar,
+      linkTitle,
+      responsive,
+      aspectRatio,
+      embedWidthValue,
+      embedWidthUnit,
+      embedHeightValue,
+      embedHeightUnit,
+      keepAspectRatio,
+    });
+  }, [showTitle, showRelated, showUserAvatar, linkTitle, responsive, aspectRatio, embedWidthValue, embedWidthUnit, embedHeightValue, embedHeightUnit, keepAspectRatio]);
+
+  function getEmbedCode() {
+    const mediaId = MediaPageStore.get('media-id');
+    const params = new URLSearchParams();
+    if (showTitle) params.set('showTitle', '1');
+    else params.set('showTitle', '0');
+    
+    if (showRelated) params.set('showRelated', '1');
+    else params.set('showRelated', '0');
+    
+    if (showUserAvatar) params.set('showUserAvatar', '1');
+    else params.set('showUserAvatar', '0');
+    
+    if (linkTitle) params.set('linkTitle', '1');
+    else params.set('linkTitle', '0');
+
+    if (startAt && startTime) {
+      const parts = startTime.split(':').reverse();
+      let seconds = 0;
+      if (parts[0]) seconds += parseInt(parts[0], 10) || 0;
+      if (parts[1]) seconds += (parseInt(parts[1], 10) || 0) * 60;
+      if (parts[2]) seconds += (parseInt(parts[2], 10) || 0) * 3600;
+      if (seconds > 0) params.set('t', seconds);
+    }
+
+    const separator = links.embed.includes('?') ? '&' : '?';
+    const finalUrl = `${links.embed}${mediaId}${separator}${params.toString()}`;
+
+    if (responsive) {
+      if (aspectRatio === 'custom') {
+        // Use current width/height values to calculate aspect ratio for custom
+        const ratio = `${embedWidthValue} / ${embedHeightValue}`;
+        const maxWidth = `calc(100vh * ${embedWidthValue} / ${embedHeightValue})`;
+        return `<iframe src="${finalUrl}" style="width:100%;max-width:${maxWidth};aspect-ratio:${ratio};display:block;margin:auto;border:0;" allowFullScreen></iframe>`;
+      }
+      const arr = aspectRatio.split(':');
+      const ratio = `${arr[0]} / ${arr[1]}`;
+      const maxWidth = `calc(100vh * ${arr[0]} / ${arr[1]})`;
+      return `<iframe src="${finalUrl}" style="width:100%;max-width:${maxWidth};aspect-ratio:${ratio};display:block;margin:auto;border:0;" allowFullScreen></iframe>`;
+    }
+
+    const width = 'percent' === embedWidthUnit ? embedWidthValue + '%' : embedWidthValue;
+    const height = 'percent' === embedHeightUnit ? embedHeightValue + '%' : embedHeightValue;
+    return `<iframe width="${width}" height="${height}" src="${finalUrl}" frameBorder="0" allowFullScreen></iframe>`;
+  }
+
   return (
     <div className="share-embed" style={{ maxHeight: maxHeight + 'px' }}>
       <div className="share-embed-inner">
         <div className="on-left">
           <div className="media-embed-wrap">
             <SiteConsumer>
-              {(site) => <VideoViewer data={MediaPageStore.get('media-data')} siteUrl={site.url} inEmbed={true} />}
+              {(site) => {
+                const previewUrl = `${links.embed + MediaPageStore.get('media-id')}&showTitle=${showTitle ? '1' : '0'}&showRelated=${showRelated ? '1' : '0'}&showUserAvatar=${showUserAvatar ? '1' : '0'}&linkTitle=${linkTitle ? '1' : '0'}${startAt ? '&t=' + (startTime.split(':').reverse().reduce((acc, cur, i) => acc + (parseInt(cur, 10) || 0) * Math.pow(60, i), 0)) : ''}`;
+                
+                const style = {};
+                style.width = '100%';
+                style.height = '480px';
+                style.overflow = 'hidden';
+
+                return (
+                  <div style={style}>
+                    <iframe width="100%" height="100%" src={previewUrl} frameBorder="0" allowFullScreen></iframe>
+                  </div>
+                );
+              }}
             </SiteConsumer>
           </div>
         </div>
@@ -158,16 +291,7 @@ export function MediaShareEmbed(props) {
           >
             <textarea
               readOnly
-              value={
-                '<iframe width="' +
-                ('percent' === embedWidthUnit ? embedWidthValue + '%' : embedWidthValue) +
-                '" height="' +
-                ('percent' === embedHeightUnit ? embedHeightValue + '%' : embedHeightValue) +
-                '" src="' +
-                links.embed +
-                MediaPageStore.get('media-id') +
-                '" frameborder="0" allowfullscreen></iframe>'
-              }
+              value={getEmbedCode()}
             ></textarea>
 
             <div className="iframe-config">
@@ -179,59 +303,106 @@ export function MediaShareEmbed(props) {
 									</div>*/}
 
                 <div className="option-content">
-                  <div className="ratio-options">
+                  <div className="ratio-options" style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: '0 10px' }}>
                     <div className="options-group">
-                      <label style={{ minHeight: '36px' }}>
-                        <input type="checkbox" checked={keepAspectRatio} onChange={onKeepAspectRatioChange} />
-                        Keep aspect ratio
+                      <label style={{ minHeight: '36px', whiteSpace: 'nowrap' }}>
+                        <input type="checkbox" checked={showTitle} onChange={onShowTitleChange} />
+                        Show title
                       </label>
                     </div>
 
-                    {!keepAspectRatio ? null : (
-                      <div className="options-group">
-                        <select ref={aspectRatioValueRef} onChange={onAspectRatioChange} value={aspectRatio}>
-                          <optgroup label="Horizontal orientation">
-                            <option value="16:9">16:9</option>
-                            <option value="4:3">4:3</option>
-                            <option value="3:2">3:2</option>
-                          </optgroup>
-                          <optgroup label="Vertical orientation">
-                            <option value="9:16">9:16</option>
-                            <option value="3:4">3:4</option>
-                            <option value="2:3">2:3</option>
-                          </optgroup>
+                    <div className="options-group">
+                      <label style={{ minHeight: '36px', whiteSpace: 'nowrap', opacity: showTitle ? 1 : 0.5 }}>
+                        <input type="checkbox" checked={linkTitle} onChange={onLinkTitleChange} disabled={!showTitle} />
+                        Link title
+                      </label>
+                    </div>
+
+                    <div className="options-group">
+                      <label style={{ minHeight: '36px', whiteSpace: 'nowrap' }}>
+                        <input type="checkbox" checked={showRelated} onChange={onShowRelatedChange} />
+                        Show related
+                      </label>
+                    </div>
+
+                    <div className="options-group">
+                      <label style={{ minHeight: '36px', whiteSpace: 'nowrap', opacity: showTitle ? 1 : 0.5 }}>
+                        <input type="checkbox" checked={showUserAvatar} onChange={onShowUserAvatarChange} disabled={!showTitle} />
+                        Show user avatar
+                      </label>
+                    </div>
+
+                    <div className="options-group" style={{ display: 'flex', alignItems: 'center' }}>
+                      <label style={{ minHeight: '36px', whiteSpace: 'nowrap', display: 'flex', alignItems: 'center', marginRight: '10px' }}>
+                        <input type="checkbox" checked={responsive} onChange={onResponsiveChange} />
+                        Responsive
+                      </label>
+                    </div>
+
+                    <div className="options-group" style={{ display: 'flex', alignItems: 'center' }}>
+                      <label style={{ minHeight: '36px', whiteSpace: 'nowrap', display: 'flex', alignItems: 'center', marginRight: '10px' }}>
+                        <input type="checkbox" checked={startAt} onChange={onStartAtChange} />
+                        Start at
+                      </label>
+                      {startAt && (
+                        <input 
+                          type="text" 
+                          value={startTime} 
+                          onChange={onStartTimeChange} 
+                          style={{ width: '60px', height: '28px', fontSize: '12px', padding: '2px 5px' }} 
+                        />
+                      )}
+                    </div>
+
+                    <div className="options-group" style={{ display: 'flex', flexDirection: 'column', justifyContent: 'center' }}>
+                      <div style={{ fontSize: '12px', marginBottom: '4px', color: 'rgba(0,0,0,0.6)' }}>Aspect Ratio</div>
+                      <div style={{ display: 'flex', alignItems: 'center' }}>
+                        <select 
+                          ref={aspectRatioValueRef} 
+                          onChange={onAspectRatioChange} 
+                          value={aspectRatio}
+                          style={{ height: '28px', fontSize: '12px' }}
+                        >
+                          <option value="16:9">16:9</option>
+                          <option value="4:3">4:3</option>
+                          <option value="3:2">3:2</option>
+                          <option value="custom">Custom</option>
                         </select>
                       </div>
-                    )}
+                    </div>
                   </div>
 
                   <br />
 
-                  <div className="options-group">
-                    <NumericInputWithUnit
-                      valueCallback={onEmbedWidthValueChange}
-                      unitCallback={onEmbedWidthUnitChange}
-                      label={'Width'}
-                      defaultValue={parseInt(embedWidthValue, 10)}
-                      defaultUnit={embedWidthUnit}
-                      minValue={1}
-                      maxValue={99999}
-                      units={unitOptions}
-                    />
-                  </div>
+                  {!responsive && (
+                    <>
+                      <div className="options-group">
+                        <NumericInputWithUnit
+                          valueCallback={onEmbedWidthValueChange}
+                          unitCallback={onEmbedWidthUnitChange}
+                          label={'Width'}
+                          defaultValue={parseInt(embedWidthValue, 10)}
+                          defaultUnit={embedWidthUnit}
+                          minValue={1}
+                          maxValue={99999}
+                          units={unitOptions}
+                        />
+                      </div>
 
-                  <div className="options-group">
-                    <NumericInputWithUnit
-                      valueCallback={onEmbedHeightValueChange}
-                      unitCallback={onEmbedHeightUnitChange}
-                      label={'Height'}
-                      defaultValue={parseInt(embedHeightValue, 10)}
-                      defaultUnit={embedHeightUnit}
-                      minValue={1}
-                      maxValue={99999}
-                      units={unitOptions}
-                    />
-                  </div>
+                      <div className="options-group">
+                        <NumericInputWithUnit
+                          valueCallback={onEmbedHeightValueChange}
+                          unitCallback={onEmbedHeightUnitChange}
+                          label={'Height'}
+                          defaultValue={parseInt(embedHeightValue, 10)}
+                          defaultUnit={embedHeightUnit}
+                          minValue={1}
+                          maxValue={99999}
+                          units={unitOptions}
+                        />
+                      </div>
+                    </>
+                  )}
                 </div>
               </div>
             </div>

frontend/src/static/js/components/media-page/ViewerInfoContent.js

@@ -3,343 +3,293 @@ import { SiteContext } from '../../utils/contexts/';
 import { useUser, usePopup } from '../../utils/hooks/';
 import { PageStore, MediaPageStore } from '../../utils/stores/';
 import { PageActions, MediaPageActions } from '../../utils/actions/';
-import { formatInnerLink, publishedOnDate } from '../../utils/helpers/';
-import { PopupMain, CircleIconButton, MaterialIcon, NavigationMenuList, NavigationContentApp } from '../_shared/';
+import { formatInnerLink, inEmbeddedApp, publishedOnDate } from '../../utils/helpers/';
+import { PopupMain } from '../_shared/';
 import CommentsList from '../comments/Comments';
 import { replaceString } from '../../utils/helpers/';
 import { translateString } from '../../utils/helpers/';
 
 function metafield(arr) {
-  let i;
-  let sep;
-  let ret = [];
+    let i;
+    let sep;
+    let ret = [];
 
-  if (arr && arr.length) {
-    i = 0;
-    sep = 1 < arr.length ? ', ' : '';
-    while (i < arr.length) {
-      ret[i] = (
-        <div key={i}>
-          <a href={arr[i].url} title={arr[i].title}>
-            {arr[i].title}
-          </a>
-          {i < arr.length - 1 ? sep : ''}
-        </div>
-      );
-      i += 1;
+    if (arr && arr.length) {
+        i = 0;
+        sep = 1 < arr.length ? ', ' : '';
+        while (i < arr.length) {
+            ret[i] = (
+                <div key={i}>
+                    <a href={arr[i].url} title={arr[i].title}>
+                        {arr[i].title}
+                    </a>
+                    {i < arr.length - 1 ? sep : ''}
+                </div>
+            );
+            i += 1;
+        }
     }
-  }
 
-  return ret;
+    return ret;
 }
 
 function MediaAuthorBanner(props) {
-  return (
-    <div className="media-author-banner">
-      <div>
-        <a className="author-banner-thumb" href={props.link || null} title={props.name}>
-          <span style={{ backgroundImage: 'url(' + props.thumb + ')' }}>
-            <img src={props.thumb} loading="lazy" alt={props.name} title={props.name} />
-          </span>
-        </a>
-      </div>
-      <div>
-        <span>
-          <a href={props.link} className="author-banner-name" title={props.name}>
-            <span>{props.name}</span>
-          </a>
-        </span>
-        {PageStore.get('config-media-item').displayPublishDate && props.published ? (
-          <span className="author-banner-date">
-            {translateString('Published on')} {replaceString(publishedOnDate(new Date(props.published)))}
-          </span>
-        ) : null}
-      </div>
-    </div>
-  );
+    return (
+        <div className="media-author-banner">
+            <div>
+                <a className="author-banner-thumb" href={props.link || null} title={props.name}>
+                    <span style={{ backgroundImage: 'url(' + props.thumb + ')' }}>
+                        <img src={props.thumb} loading="lazy" alt={props.name} title={props.name} />
+                    </span>
+                </a>
+            </div>
+            <div>
+                <span>
+                    <a href={props.link} className="author-banner-name" title={props.name}>
+                        <span>{props.name}</span>
+                    </a>
+                </span>
+                {PageStore.get('config-media-item').displayPublishDate && props.published ? (
+                    <span className="author-banner-date">
+                        {translateString('Published on')} {replaceString(publishedOnDate(new Date(props.published)))}
+                    </span>
+                ) : null}
+            </div>
+        </div>
+    );
 }
 
 function MediaMetaField(props) {
-  return (
-    <div className={props.id.trim() ? 'media-content-' + props.id.trim() : null}>
-      <div className="media-content-field">
-        <div className="media-content-field-label">
-          <h4>{props.title}</h4>
+    return (
+        <div className={props.id.trim() ? 'media-content-' + props.id.trim() : null}>
+            <div className="media-content-field">
+                <div className="media-content-field-label">
+                    <h4>{props.title}</h4>
+                </div>
+                <div className="media-content-field-content">{props.value}</div>
+            </div>
         </div>
-        <div className="media-content-field-content">{props.value}</div>
-      </div>
-    </div>
-  );
-}
-
-function getEditMenuItems() {
-  const items = [];
-  const friendlyToken = window.MediaCMS.mediaId;
-  const mediaData = MediaPageStore.get('media-data');
-  const mediaType = mediaData ? mediaData.media_type : null;
-  const isVideoOrAudio = mediaType === 'video' || mediaType === 'audio';
-  const allowMediaReplacement = window.MediaCMS.features.media.actions.allowMediaReplacement;
-
-  // Edit metadata - always available
-  items.push({
-    itemType: 'link',
-    link: `/edit?m=${friendlyToken}`,
-    text: translateString('Edit metadata'),
-    icon: 'edit',
-  });
-
-  // Trim - only for video/audio
-  if (isVideoOrAudio) {
-    items.push({
-      itemType: 'link',
-      link: `/edit_video?m=${friendlyToken}`,
-      text: translateString('Trim'),
-      icon: 'content_cut',
-    });
-  }
-
-  // Captions - only for video/audio
-  if (isVideoOrAudio) {
-    items.push({
-      itemType: 'link',
-      link: `/add_subtitle?m=${friendlyToken}`,
-      text: translateString('Captions'),
-      icon: 'closed_caption',
-    });
-  }
-
-  // Chapters - only for video/audio
-  if (isVideoOrAudio) {
-    items.push({
-      itemType: 'link',
-      link: `/edit_chapters?m=${friendlyToken}`,
-      text: 'Chapters',
-      icon: 'menu_book',
-    });
-  }
-
-  // Publish - always available
-  items.push({
-    itemType: 'link',
-    link: `/publish?m=${friendlyToken}`,
-    text: translateString('Publish'),
-    icon: 'publish',
-  });
-
-  // Replace - only if enabled
-  if (allowMediaReplacement) {
-    items.push({
-      itemType: 'link',
-      link: `/replace_media?m=${friendlyToken}`,
-      text: translateString('Replace'),
-      icon: 'swap_horiz',
-    });
-  }
-
-  return items;
+    );
 }
 
 function EditMediaButton(props) {
-  const [popupContentRef, PopupContent, PopupTrigger] = usePopup();
+    let link = props.link;
 
-  const menuItems = getEditMenuItems();
+    if (window.MediaCMS.site.devEnv) {
+        link = '/edit-media.html';
+    }
 
-  const popupPages = {
-    main: (
-      <div className="edit-options">
-        <PopupMain>
-          <NavigationMenuList items={menuItems} />
-        </PopupMain>
-      </div>
-    ),
-  };
+    if (link && inEmbeddedApp()) {
+        link += '&mode=lms_embed_mode';
+    }
 
-  return (
-    <div className="edit-media-dropdown">
-      <PopupTrigger contentRef={popupContentRef}>
-        <button className="edit-media-icon" title={translateString('Edit media')}>
-          <i className="material-icons">edit</i>
-        </button>
-      </PopupTrigger>
-      <PopupContent contentRef={popupContentRef}>
-        <NavigationContentApp
-          initPage="main"
-          focusFirstItemOnPageChange={false}
-          pages={popupPages}
-        />
-      </PopupContent>
-    </div>
-  );
+    return (
+        <a href={link} rel="nofollow" title={translateString('Edit media')} className="edit-media-icon">
+            <i className="material-icons">edit</i>
+        </a>
+    );
 }
 
 export default function ViewerInfoContent(props) {
-  const { userCan } = useUser();
+    const { userCan } = useUser();
 
-  const description = props.description.trim();
-  const tagsContent =
-    !PageStore.get('config-enabled').taxonomies.tags || PageStore.get('config-enabled').taxonomies.tags.enabled
-      ? metafield(MediaPageStore.get('media-tags'))
-      : [];
-  const categoriesContent = PageStore.get('config-options').pages.media.categoriesWithTitle
-    ? []
-    : !PageStore.get('config-enabled').taxonomies.categories ||
-      PageStore.get('config-enabled').taxonomies.categories.enabled
-    ? metafield(MediaPageStore.get('media-categories'))
-    : [];
+    const description = props.description.trim();
+    const tagsContent =
+        !PageStore.get('config-enabled').taxonomies.tags || PageStore.get('config-enabled').taxonomies.tags.enabled
+            ? metafield(MediaPageStore.get('media-tags'))
+            : [];
+    let mediaCategories = MediaPageStore.get('media-categories');
 
-  let summary = MediaPageStore.get('media-summary');
-
-  summary = summary ? summary.trim() : '';
-
-  const [popupContentRef, PopupContent, PopupTrigger] = usePopup();
-
-  const [hasSummary, setHasSummary] = useState('' !== summary);
-  const [isContentVisible, setIsContentVisible] = useState('' == summary);
-
-  function proceedMediaRemoval() {
-    MediaPageActions.removeMedia();
-    popupContentRef.current.toggle();
-  }
-
-  function cancelMediaRemoval() {
-    popupContentRef.current.toggle();
-  }
-
-  function onMediaDelete(mediaId) {
-    // FIXME: Without delay creates conflict [ Uncaught Error: Dispatch.dispatch(...): Cannot dispatch in the middle of a dispatch. ].
-    setTimeout(function () {
-      PageActions.addNotification('Media removed. Redirecting...', 'mediaDelete');
-      setTimeout(function () {
-        window.location.href =
-          SiteContext._currentValue.url + '/' + MediaPageStore.get('media-data').author_profile.replace(/^\//g, '');
-      }, 2000);
-    }, 100);
-
-    if (void 0 !== mediaId) {
-      console.info("Removed media '" + mediaId + '"');
-    }
-  }
-
-  function onMediaDeleteFail(mediaId) {
-    // FIXME: Without delay creates conflict [ Uncaught Error: Dispatch.dispatch(...): Cannot dispatch in the middle of a dispatch. ].
-    setTimeout(function () {
-      PageActions.addNotification('Media removal failed', 'mediaDeleteFail');
-    }, 100);
-
-    if (void 0 !== mediaId) {
-      console.info('Media "' + mediaId + '"' + ' removal failed');
-    }
-  }
-
-  function onClickLoadMore() {
-    setIsContentVisible(!isContentVisible);
-  }
-
-  useEffect(() => {
-    MediaPageStore.on('media_delete', onMediaDelete);
-    MediaPageStore.on('media_delete_fail', onMediaDeleteFail);
-    return () => {
-      MediaPageStore.removeListener('media_delete', onMediaDelete);
-      MediaPageStore.removeListener('media_delete_fail', onMediaDeleteFail);
-    };
-  }, []);
-
-  const authorLink = formatInnerLink(props.author.url, SiteContext._currentValue.url);
-  const authorThumb = formatInnerLink(props.author.thumb, SiteContext._currentValue.url);
-
-  function setTimestampAnchors(text) {
-    function wrapTimestampWithAnchor(match, string) {
-      let split = match.split(':'),
-        s = 0,
-        m = 1;
-
-      while (split.length > 0) {
-        s += m * parseInt(split.pop(), 10);
-        m *= 60;
-      }
-
-      const wrapped = `<a href="#" data-timestamp="${s}" class="video-timestamp">${match}</a>`;
-      return wrapped;
+    // Filter to show only LMS courses when in embed mode
+    if (inEmbeddedApp()) {
+        mediaCategories = mediaCategories.filter(cat => cat.is_lms_course === true);
     }
 
-    const timeRegex = new RegExp('((\\d)?\\d:)?(\\d)?\\d:\\d\\d', 'g');
-    return text.replace(timeRegex, wrapTimestampWithAnchor);
-  }
+    const categoriesContent = PageStore.get('config-options').pages.media.categoriesWithTitle
+        ? []
+        : !PageStore.get('config-enabled').taxonomies.categories ||
+            PageStore.get('config-enabled').taxonomies.categories.enabled
+          ? metafield(mediaCategories)
+          : [];
 
-  return (
-    <div className="media-info-content">
-      {void 0 === PageStore.get('config-media-item').displayAuthor ||
-      null === PageStore.get('config-media-item').displayAuthor ||
-      !!PageStore.get('config-media-item').displayAuthor ? (
-        <MediaAuthorBanner link={authorLink} thumb={authorThumb} name={props.author.name} published={props.published} />
-      ) : null}
+    let summary = MediaPageStore.get('media-summary');
 
-      <div className="media-content-banner">
-        <div className="media-content-banner-inner">
-          {hasSummary ? <div className="media-content-summary">{summary}</div> : null}
-          {(!hasSummary || isContentVisible) && description ? (
-            <div
-              className="media-content-description"
-              dangerouslySetInnerHTML={{ __html: setTimestampAnchors(description) }}
-            ></div>
-          ) : null}
-          {hasSummary ? (
-            <button className="load-more" onClick={onClickLoadMore}>
-              {isContentVisible ? 'SHOW LESS' : 'SHOW MORE'}
-            </button>
-          ) : null}
-          {tagsContent.length ? (
-            <MediaMetaField
-              value={tagsContent}
-              title={1 < tagsContent.length ? translateString('Tags') : translateString('Tag')}
-              id="tags"
-            />
-          ) : null}
-          {categoriesContent.length ? (
-            <MediaMetaField
-              value={categoriesContent}
-              title={1 < categoriesContent.length ? translateString('Categories') : translateString('Category')}
-              id="categories"
-            />
-          ) : null}
+    summary = summary ? summary.trim() : '';
 
-          {userCan.editMedia ? (
-            <div className="media-author-actions">
-              {userCan.editMedia ? <EditMediaButton /> : null}
+    const [popupContentRef, PopupContent, PopupTrigger] = usePopup();
 
-              {userCan.deleteMedia ? (
-                <PopupTrigger contentRef={popupContentRef}>
-                  <button className="remove-media-icon" title={translateString('Delete media')}>
-                    <i className="material-icons">delete</i>
-                  </button>
-                </PopupTrigger>
-              ) : null}
+    const [hasSummary, setHasSummary] = useState('' !== summary);
+    const [isContentVisible, setIsContentVisible] = useState('' == summary);
 
-              {userCan.deleteMedia ? (
-                <PopupContent contentRef={popupContentRef}>
-                  <PopupMain>
-                    <div className="popup-message">
-                      <span className="popup-message-title">Media removal</span>
-                      <span className="popup-message-main">You're willing to remove media permanently?</span>
-                    </div>
-                    <hr />
-                    <span className="popup-message-bottom">
-                      <button className="button-link cancel-comment-removal" onClick={cancelMediaRemoval}>
-                        CANCEL
-                      </button>
-                      <button className="button-link proceed-comment-removal" onClick={proceedMediaRemoval}>
-                        PROCEED
-                      </button>
-                    </span>
-                  </PopupMain>
-                </PopupContent>
-              ) : null}
+    function proceedMediaRemoval() {
+        MediaPageActions.removeMedia();
+        popupContentRef.current.toggle();
+    }
+
+    function cancelMediaRemoval() {
+        popupContentRef.current.toggle();
+    }
+
+    function onMediaDelete(mediaId) {
+        // FIXME: Without delay creates conflict [ Uncaught Error: Dispatch.dispatch(...): Cannot dispatch in the middle of a dispatch. ].
+        setTimeout(function () {
+            PageActions.addNotification('Media removed. Redirecting...', 'mediaDelete');
+            setTimeout(function () {
+                window.location.href =
+                    SiteContext._currentValue.url +
+                    '/' +
+                    MediaPageStore.get('media-data').author_profile.replace(/^\//g, '');
+            }, 2000);
+        }, 100);
+
+        if (void 0 !== mediaId) {
+            console.info("Removed media '" + mediaId + '"');
+        }
+    }
+
+    function onMediaDeleteFail(mediaId) {
+        // FIXME: Without delay creates conflict [ Uncaught Error: Dispatch.dispatch(...): Cannot dispatch in the middle of a dispatch. ].
+        setTimeout(function () {
+            PageActions.addNotification('Media removal failed', 'mediaDeleteFail');
+        }, 100);
+
+        if (void 0 !== mediaId) {
+            console.info('Media "' + mediaId + '"' + ' removal failed');
+        }
+    }
+
+    function onClickLoadMore() {
+        setIsContentVisible(!isContentVisible);
+    }
+
+    useEffect(() => {
+        MediaPageStore.on('media_delete', onMediaDelete);
+        MediaPageStore.on('media_delete_fail', onMediaDeleteFail);
+        return () => {
+            MediaPageStore.removeListener('media_delete', onMediaDelete);
+            MediaPageStore.removeListener('media_delete_fail', onMediaDeleteFail);
+        };
+    }, []);
+
+    const authorLink = formatInnerLink(props.author.url, SiteContext._currentValue.url);
+    const authorThumb = formatInnerLink(props.author.thumb, SiteContext._currentValue.url);
+
+    function setTimestampAnchors(text) {
+        function wrapTimestampWithAnchor(match, string) {
+            let split = match.split(':'),
+                s = 0,
+                m = 1;
+
+            while (split.length > 0) {
+                s += m * parseInt(split.pop(), 10);
+                m *= 60;
+            }
+
+            const wrapped = `<a href="#" data-timestamp="${s}" class="video-timestamp">${match}</a>`;
+            return wrapped;
+        }
+
+        const timeRegex = new RegExp('((\\d)?\\d:)?(\\d)?\\d:\\d\\d', 'g');
+        return text.replace(timeRegex, wrapTimestampWithAnchor);
+    }
+
+    return (
+        <div className="media-info-content">
+            {void 0 === PageStore.get('config-media-item').displayAuthor ||
+            null === PageStore.get('config-media-item').displayAuthor ||
+            !!PageStore.get('config-media-item').displayAuthor ? (
+                <MediaAuthorBanner
+                    link={authorLink}
+                    thumb={authorThumb}
+                    name={props.author.name}
+                    published={props.published}
+                />
+            ) : null}
+
+            <div className="media-content-banner">
+                <div className="media-content-banner-inner">
+                    {hasSummary ? <div className="media-content-summary">{summary}</div> : null}
+                    {(!hasSummary || isContentVisible) && description ? (
+                        <div
+                            className="media-content-description"
+                            dangerouslySetInnerHTML={{ __html: setTimestampAnchors(description) }}
+                        ></div>
+                    ) : null}
+                    {hasSummary ? (
+                        <button className="load-more" onClick={onClickLoadMore}>
+                            {isContentVisible ? 'SHOW LESS' : 'SHOW MORE'}
+                        </button>
+                    ) : null}
+                    {tagsContent.length ? (
+                        <MediaMetaField
+                            value={tagsContent}
+                            title={1 < tagsContent.length ? translateString('Tags') : translateString('Tag')}
+                            id="tags"
+                        />
+                    ) : null}
+                    {categoriesContent.length ? (
+                        <MediaMetaField
+                            value={categoriesContent}
+                            title={
+                                inEmbeddedApp()
+                                    ? (1 < categoriesContent.length
+                                        ? translateString('Courses')
+                                        : translateString('Course'))
+                                    : (1 < categoriesContent.length
+                                        ? translateString('Categories')
+                                        : translateString('Category'))
+                            }
+                            id="categories"
+                        />
+                    ) : null}
+
+                    {userCan.editMedia ? (
+                        <div className="media-author-actions">
+                            {userCan.editMedia ? (
+                                <EditMediaButton link={MediaPageStore.get('media-data').edit_url} />
+                            ) : null}
+
+                            {userCan.deleteMedia ? (
+                                <PopupTrigger contentRef={popupContentRef}>
+                                    <button className="remove-media-icon" title={translateString('Delete media')}>
+                                        <i className="material-icons">delete</i>
+                                    </button>
+                                </PopupTrigger>
+                            ) : null}
+
+                            {userCan.deleteMedia ? (
+                                <PopupContent contentRef={popupContentRef}>
+                                    <PopupMain>
+                                        <div className="popup-message">
+                                            <span className="popup-message-title">Media removal</span>
+                                            <span className="popup-message-main">
+                                                You're willing to remove media permanently?
+                                            </span>
+                                        </div>
+                                        <hr />
+                                        <span className="popup-message-bottom">
+                                            <button
+                                                className="button-link cancel-comment-removal"
+                                                onClick={cancelMediaRemoval}
+                                            >
+                                                CANCEL
+                                            </button>
+                                            <button
+                                                className="button-link proceed-comment-removal"
+                                                onClick={proceedMediaRemoval}
+                                            >
+                                                PROCEED
+                                            </button>
+                                        </span>
+                                    </PopupMain>
+                                </PopupContent>
+                            ) : null}
+                        </div>
+                    ) : null}
+                </div>
             </div>
-          ) : null}
-        </div>
-      </div>
 
-      <CommentsList />
-    </div>
-  );
+            <CommentsList />
+        </div>
+    );
 }

frontend/src/static/js/components/media-page/ViewerInfoVideoTitleBanner.js

@@ -1,107 +1,119 @@
 import React from 'react';
-import { formatViewsNumber } from '../../utils/helpers/';
+import { formatViewsNumber, inEmbeddedApp } from '../../utils/helpers/';
 import { PageStore, MediaPageStore } from '../../utils/stores/';
 import { MemberContext, PlaylistsContext } from '../../utils/contexts/';
-import { MediaLikeIcon, MediaDislikeIcon, OtherMediaDownloadLink, VideoMediaDownloadLink, MediaSaveButton, MediaShareButton, MediaMoreOptionsIcon } from '../media-actions/';
+import {
+    MediaLikeIcon,
+    MediaDislikeIcon,
+    OtherMediaDownloadLink,
+    VideoMediaDownloadLink,
+    MediaSaveButton,
+    MediaShareButton,
+    MediaMoreOptionsIcon,
+} from '../media-actions/';
 import ViewerInfoTitleBanner from './ViewerInfoTitleBanner';
 import { translateString } from '../../utils/helpers/';
 
 export default class ViewerInfoVideoTitleBanner extends ViewerInfoTitleBanner {
-  render() {
-    const displayViews = PageStore.get('config-options').pages.media.displayViews && void 0 !== this.props.views;
+    render() {
+        const displayViews = PageStore.get('config-options').pages.media.displayViews && void 0 !== this.props.views;
 
-    const mediaData = MediaPageStore.get('media-data');
-    const mediaState = mediaData.state;
-    const isShared = mediaData.is_shared;
+        const mediaData = MediaPageStore.get('media-data');
+        const mediaState = mediaData.state;
+        const isShared = mediaData.is_shared;
 
-    let stateTooltip = '';
+        let stateTooltip = '';
 
-    switch (mediaState) {
-      case 'private':
-        stateTooltip = 'The site admins have to make its access public';
-        break;
-      case 'unlisted':
-        stateTooltip = 'The site admins have to make it appear on listings';
-        break;
+        switch (mediaState) {
+            case 'private':
+                stateTooltip = 'The site admins have to make its access public';
+                break;
+            case 'unlisted':
+                stateTooltip = 'The site admins have to make it appear on listings';
+                break;
+        }
+
+        const sharedTooltip = 'This media is shared with specific users or categories';
+
+        return (
+            <div className="media-title-banner">
+                {displayViews && PageStore.get('config-options').pages.media.categoriesWithTitle
+                    ? this.mediaCategories(true)
+                    : null}
+
+                {void 0 !== this.props.title ? <h1>{this.props.title}</h1> : null}
+
+                {isShared || 'public' !== mediaState ? (
+                    <div className="media-labels-area">
+                        <div className="media-labels-area-inner">
+                            {isShared ? (
+                                <>
+                                    <span className="media-label-state">
+                                        <span>shared</span>
+                                    </span>
+                                    <span className="helper-icon" data-tooltip={sharedTooltip}>
+                                        <i className="material-icons">help_outline</i>
+                                    </span>
+                                </>
+                            ) : 'public' !== mediaState ? (
+                                <>
+                                    <span className="media-label-state">
+                                        <span>{mediaState}</span>
+                                    </span>
+                                    <span className="helper-icon" data-tooltip={stateTooltip}>
+                                        <i className="material-icons">help_outline</i>
+                                    </span>
+                                </>
+                            ) : null}
+                        </div>
+                    </div>
+                ) : null}
+
+                <div
+                    className={
+                        'media-views-actions' +
+                        (this.state.likedMedia ? ' liked-media' : '') +
+                        (this.state.dislikedMedia ? ' disliked-media' : '')
+                    }
+                >
+                    {!displayViews && PageStore.get('config-options').pages.media.categoriesWithTitle
+                        ? this.mediaCategories()
+                        : null}
+
+                    {displayViews ? (
+                        <div className="media-views">
+                            {formatViewsNumber(this.props.views, true)}{' '}
+                            {1 >= this.props.views ? translateString('view') : translateString('views')}
+                        </div>
+                    ) : null}
+
+                    <div className="media-actions">
+                        <div>
+                            {MemberContext._currentValue.can.likeMedia ? <MediaLikeIcon /> : null}
+                            {MemberContext._currentValue.can.dislikeMedia ? <MediaDislikeIcon /> : null}
+                            {!inEmbeddedApp() && MemberContext._currentValue.can.shareMedia ? (
+                                <MediaShareButton isVideo={true} />
+                            ) : null}
+
+                            {!inEmbeddedApp() &&
+                            !MemberContext._currentValue.is.anonymous &&
+                            MemberContext._currentValue.can.saveMedia &&
+                            -1 < PlaylistsContext._currentValue.mediaTypes.indexOf(MediaPageStore.get('media-type')) ? (
+                                <MediaSaveButton />
+                            ) : null}
+
+                            {!this.props.allowDownload || !MemberContext._currentValue.can.downloadMedia ? null : !this
+                                  .downloadLink ? (
+                                <VideoMediaDownloadLink />
+                            ) : (
+                                <OtherMediaDownloadLink link={this.downloadLink} title={this.downloadFilename} />
+                            )}
+
+                            <MediaMoreOptionsIcon allowDownload={this.props.allowDownload} />
+                        </div>
+                    </div>
+                </div>
+            </div>
+        );
     }
-
-    const sharedTooltip = 'This media is shared with specific users or categories';
-
-    return (
-      <div className="media-title-banner">
-        {displayViews && PageStore.get('config-options').pages.media.categoriesWithTitle
-          ? this.mediaCategories(true)
-          : null}
-
-        {void 0 !== this.props.title ? <h1>{this.props.title}</h1> : null}
-
-        {isShared || 'public' !== mediaState ? (
-          <div className="media-labels-area">
-            <div className="media-labels-area-inner">
-              {isShared ? (
-                <>
-                  <span className="media-label-state">
-                    <span>shared</span>
-                  </span>
-                  <span className="helper-icon" data-tooltip={sharedTooltip}>
-                    <i className="material-icons">help_outline</i>
-                  </span>
-                </>
-              ) : 'public' !== mediaState ? (
-                <>
-                  <span className="media-label-state">
-                    <span>{mediaState}</span>
-                  </span>
-                  <span className="helper-icon" data-tooltip={stateTooltip}>
-                    <i className="material-icons">help_outline</i>
-                  </span>
-                </>
-              ) : null}
-            </div>
-          </div>
-        ) : null}
-
-        <div
-          className={
-            'media-views-actions' +
-            (this.state.likedMedia ? ' liked-media' : '') +
-            (this.state.dislikedMedia ? ' disliked-media' : '')
-          }
-        >
-          {!displayViews && PageStore.get('config-options').pages.media.categoriesWithTitle
-            ? this.mediaCategories()
-            : null}
-
-          {displayViews ? (
-            <div className="media-views">
-              {formatViewsNumber(this.props.views, true)} {1 >= this.props.views ? translateString('view') : translateString('views')}
-            </div>
-          ) : null}
-
-          <div className="media-actions">
-            <div>
-              {MemberContext._currentValue.can.likeMedia ? <MediaLikeIcon /> : null}
-              {MemberContext._currentValue.can.dislikeMedia ? <MediaDislikeIcon /> : null}
-              {MemberContext._currentValue.can.shareMedia ? <MediaShareButton isVideo={true} /> : null}
-
-              {!MemberContext._currentValue.is.anonymous &&
-                MemberContext._currentValue.can.saveMedia &&
-                -1 < PlaylistsContext._currentValue.mediaTypes.indexOf(MediaPageStore.get('media-type')) ? (
-                <MediaSaveButton />
-              ) : null}
-
-              {!this.props.allowDownload || !MemberContext._currentValue.can.downloadMedia ? null : !this
-                .downloadLink ? (
-                <VideoMediaDownloadLink />
-              ) : (
-                <OtherMediaDownloadLink link={this.downloadLink} title={this.downloadFilename} />
-              )}
-
-              <MediaMoreOptionsIcon allowDownload={this.props.allowDownload} />
-            </div>
-          </div>
-        </div>
-      </div>
-    );
-  }
 }

frontend/src/static/js/components/media-viewer/VideoViewer/index.js

@@ -3,7 +3,7 @@ import PropTypes from 'prop-types';
 import { VideoViewerActions } from '../../../utils/actions/';
 import { SiteContext, SiteConsumer } from '../../../utils/contexts/';
 import { PageStore, MediaPageStore, VideoViewerStore } from '../../../utils/stores/';
-import { addClassname, removeClassname, formatInnerLink } from '../../../utils/helpers/';
+import { addClassname, removeClassname, formatInnerLink, inEmbeddedApp } from '../../../utils/helpers/';
 import { BrowserCache, UpNextLoaderView, MediaDurationInfo } from '../../../utils/classes/';
 import {
     orderedSupportedVideoFormats,
@@ -176,11 +176,13 @@ export default class VideoViewer extends React.PureComponent {
                 topLeftHtml = document.createElement('div');
                 topLeftHtml.setAttribute('class', 'media-links-top-left');
 
+                const linkTarget = inEmbeddedApp() || window.location.href.indexOf('lms_embed_mode') > -1 ? '_self' : '_blank';
+
                 if (titleLink) {
                     titleLink.setAttribute('class', 'title-link');
                     titleLink.setAttribute('href', this.props.data.url);
                     titleLink.setAttribute('title', this.props.data.title);
-                    titleLink.setAttribute('target', '_blank');
+                    titleLink.setAttribute('target', linkTarget);
                     titleLink.innerHTML = this.props.data.title;
                 }
 
@@ -191,7 +193,7 @@ export default class VideoViewer extends React.PureComponent {
                         formatInnerLink(this.props.data.author_profile, this.props.siteUrl)
                     );
                     userThumbLink.setAttribute('title', this.props.data.author_name);
-                    userThumbLink.setAttribute('target', '_blank');
+                    userThumbLink.setAttribute('target', linkTarget);
                     userThumbLink.setAttribute(
                         'style',
                         'background-image:url(' +
@@ -410,8 +412,12 @@ export default class VideoViewer extends React.PureComponent {
                                             poster: this.videoPoster,
                                             previewSprite: previewSprite,
                                             subtitlesInfo: this.props.data.subtitles_info,
-                                            enableAutoplay: !this.props.inEmbed,
                                             inEmbed: this.props.inEmbed,
+                                            showTitle: this.props.showTitle,
+                                            showRelated: this.props.showRelated,
+                                            showUserAvatar: this.props.showUserAvatar,
+                                            linkTitle: this.props.linkTitle,
+                                            urlTimestamp: this.props.timestamp,
                                             hasTheaterMode: !this.props.inEmbed,
                                             hasNextLink: !!nextLink,
                                             nextLink: nextLink,
@@ -435,9 +441,19 @@ export default class VideoViewer extends React.PureComponent {
 
 VideoViewer.defaultProps = {
     inEmbed: !0,
+    showTitle: !0,
+    showRelated: !0,
+    showUserAvatar: !0,
+    linkTitle: !0,
+    timestamp: null,
     siteUrl: PropTypes.string.isRequired,
 };
 
 VideoViewer.propTypes = {
     inEmbed: PropTypes.bool,
+    showTitle: PropTypes.bool,
+    showRelated: PropTypes.bool,
+    showUserAvatar: PropTypes.bool,
+    linkTitle: PropTypes.bool,
+    timestamp: PropTypes.number,
 };

frontend/src/static/js/components/page-layout/PageMain.scss

@@ -1,28 +1,33 @@
 .page-main-wrap {
-  padding-top: var(--header-height);
-  will-change: padding-left;
+    padding-top: var(--header-height);
+    will-change: padding-left;
+
+    @media (min-width: 768px) {
+        .visible-sidebar & {
+            padding-left: var(--sidebar-width);
+            opacity: 1;
+        }
+    }
+
+    .visible-sidebar #page-media & {
+        padding-left: 0;
+    }
 
-  @media (min-width: 768px) {
     .visible-sidebar & {
-      padding-left: var(--sidebar-width);
-      opacity: 1;
+        #page-media {
+            padding-left: 0;
+        }
     }
-  }
 
-  .visible-sidebar #page-media & {
-    padding-left: 0;
-  }
-
-  .visible-sidebar & {
-    #page-media {
-      padding-left: 0;
+    body.sliding-sidebar & {
+        transition-property: padding-left;
+        transition-duration: 0.2s;
     }
-  }
 
-  body.sliding-sidebar & {
-    transition-property: padding-left;
-    transition-duration: 0.2s;
-  }
+    .embedded-app & {
+        padding-top: 0;
+        padding-left: 0;
+    }
 }
 
 #page-profile-media,
@@ -30,20 +35,20 @@
 #page-profile-about,
 #page-liked.profile-page-liked,
 #page-history.profile-page-history {
-  .page-main {
-    min-height: calc(100vh - var(--header-height));
-  }
+    .page-main {
+        min-height: calc(100vh - var(--header-height));
+    }
 }
 
 .page-main {
-  position: relative;
-  width: 100%;
-  padding-bottom: 16px;
+    position: relative;
+    width: 100%;
+    padding-bottom: 16px;
 }
 
 .page-main-inner {
-  display: block;
-  margin: 1em 1em 0 1em;
+    display: block;
+    margin: 1em 1em 0 1em;
 }
 
 #page-profile-media,
@@ -51,7 +56,7 @@
 #page-profile-about,
 #page-liked.profile-page-liked,
 #page-history.profile-page-history {
-  .page-main-wrap {
-    background-color: var(--body-bg-color);
-  }
+    .page-main-wrap {
+        background-color: var(--body-bg-color);
+    }
 }

frontend/src/static/js/components/profile-page/ProfilePage.scss

@@ -656,30 +656,6 @@
     }
   }
 
-  &.fixed-nav {
-    .profile-info-nav-wrap {
-      padding-bottom: $_authorPage-navHeight;
-    }
-
-    .profile-nav {
-      z-index: 3;
-      position: fixed;
-      top: var(--header-height);
-      left: 0;
-      right: 0;
-
-      @media screen and (min-width: 768px) {
-        .visible-sidebar & {
-          padding-left: var(--sidebar-width);
-        }
-
-        .sliding-sidebar & {
-          transition-property: padding-left;
-          transition-duration: 0.2s;
-        }
-      }
-    }
-  }
 }
 
 .page-main {

frontend/src/static/js/pages/CategoriesPage.tsx

@@ -3,14 +3,14 @@ import { ApiUrlConsumer } from '../utils/contexts/';
 import { MediaListWrapper } from '../components/MediaListWrapper';
 import { LazyLoadItemListAsync } from '../components/item-list/LazyLoadItemListAsync.jsx';
 import { Page } from './Page';
-import { translateString } from '../utils/helpers/';
+import { translateString, inEmbeddedApp } from '../utils/helpers/';
 
 interface CategoriesPageProps {
   id?: string;
   title?: string;
 }
 
-export const CategoriesPage: React.FC<CategoriesPageProps> = ({ id = 'categories', title = translateString('Categories') }) => (
+export const CategoriesPage: React.FC<CategoriesPageProps> = ({ id = 'categories', title = inEmbeddedApp() ? translateString('Courses') : translateString('Categories') }) => (
   <Page id={id}>
     <ApiUrlConsumer>
       {(apiUrl) => (

frontend/src/static/js/pages/EmbedPage.tsx

@@ -41,7 +41,7 @@ export const EmbedPage: React.FC = () => {
   }, []);
 
   return (
-    <div className="embed-wrap" style={wrapperStyles}>
+    <div className="embed-wrap media-embed-wrap" style={wrapperStyles}>
       {failedMediaLoad && (
         <div className="player-container player-container-error" style={containerStyles}>
           <div className="player-container-inner" style={containerStyles}>
@@ -59,9 +59,32 @@ export const EmbedPage: React.FC = () => {
 
       {loadedVideo && (
         <SiteConsumer>
-        {(site) => (
-            <VideoViewer data={MediaPageStore.get('media-data')} siteUrl={site.url} containerStyles={containerStyles} />
-          )} 
+        {(site) => {
+            const urlParams = new URLSearchParams(window.location.search);
+            const urlShowTitle = urlParams.get('showTitle');
+            const showTitle = urlShowTitle !== '0';
+            const urlShowRelated = urlParams.get('showRelated');
+            const showRelated = urlShowRelated !== '0';
+            const urlShowUserAvatar = urlParams.get('showUserAvatar');
+            const showUserAvatar = urlShowUserAvatar !== '0';
+            const urlLinkTitle = urlParams.get('linkTitle');
+            const linkTitle = urlLinkTitle !== '0';
+            const urlTimestamp = urlParams.get('t');
+            const timestamp = urlTimestamp ? parseInt(urlTimestamp, 10) : null;
+
+            return (
+              <VideoViewer 
+                data={MediaPageStore.get('media-data')} 
+                siteUrl={site.url} 
+                containerStyles={containerStyles} 
+                showTitle={showTitle}
+                showRelated={showRelated}
+                showUserAvatar={showUserAvatar}
+                linkTitle={linkTitle}
+                timestamp={timestamp}
+              />
+            );
+          }} 
         </SiteConsumer>
       )}
     </div>

frontend/src/static/js/pages/ProfileAboutPage.js

@@ -2,7 +2,7 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import UrlParse from 'url-parse';
 import { ApiUrlContext, MemberContext, SiteContext } from '../utils/contexts/';
-import { formatInnerLink, csrfToken, postRequest } from '../utils/helpers/';
+import { formatInnerLink, csrfToken, postRequest, inEmbeddedApp } from '../utils/helpers/';
 import { PageActions } from '../utils/actions/';
 import { PageStore, ProfilePageStore } from '../utils/stores/';
 import ProfilePagesHeader from '../components/profile-page/ProfilePagesHeader';
@@ -268,7 +268,7 @@ export class ProfileAboutPage extends ProfileMediaPage {
 
     return [
       this.state.author ? (
-        <ProfilePagesHeader key="ProfilePagesHeader" author={this.state.author} type="about" />
+        <ProfilePagesHeader key="ProfilePagesHeader" author={this.state.author} type="about" hideChannelBanner={inEmbeddedApp()} />
       ) : null,
       this.state.author ? (
         <ProfilePagesContent key="ProfilePagesContent" enabledContactForm={this.enabledContactForm}>

frontend/src/static/js/pages/ProfileHistoryPage.js

@@ -2,6 +2,7 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import { ApiUrlConsumer } from '../utils/contexts/';
 import { PageStore } from '../utils/stores/';
+import { inEmbeddedApp } from '../utils/helpers/';
 import { MediaListWrapper } from '../components/MediaListWrapper';
 import ProfilePagesHeader from '../components/profile-page/ProfilePagesHeader';
 import ProfilePagesContent from '../components/profile-page/ProfilePagesContent';
@@ -28,7 +29,7 @@ export class ProfileHistoryPage extends ProfileMediaPage {
   pageContent() {
     return [
       this.state.author ? (
-        <ProfilePagesHeader key="ProfilePagesHeader" author={this.state.author} type="history" />
+        <ProfilePagesHeader key="ProfilePagesHeader" author={this.state.author} type="history" hideChannelBanner={inEmbeddedApp()} />
       ) : null,
       this.state.author ? (
         <ProfilePagesContent key="ProfilePagesContent">

frontend/src/static/js/pages/ProfileLikedPage.js

@@ -2,6 +2,7 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import { ApiUrlConsumer } from '../utils/contexts/';
 import { PageStore } from '../utils/stores/';
+import { inEmbeddedApp } from '../utils/helpers/';
 import { MediaListWrapper } from '../components/MediaListWrapper';
 import ProfilePagesHeader from '../components/profile-page/ProfilePagesHeader';
 import ProfilePagesContent from '../components/profile-page/ProfilePagesContent';
@@ -28,7 +29,7 @@ export class ProfileLikedPage extends ProfileMediaPage {
   pageContent() {
     return [
       this.state.author ? (
-        <ProfilePagesHeader key="ProfilePagesHeader" author={this.state.author} type="liked" />
+        <ProfilePagesHeader key="ProfilePagesHeader" author={this.state.author} type="liked" hideChannelBanner={inEmbeddedApp()} />
       ) : null,
       this.state.author ? (
         <ProfilePagesContent key="ProfilePagesContent">

frontend/src/static/js/pages/ProfilePlaylistsPage.js

@@ -1,6 +1,7 @@
 import React from 'react';
 import { ApiUrlConsumer } from '../utils/contexts/';
 import { PageStore } from '../utils/stores/';
+import { inEmbeddedApp } from '../utils/helpers/';
 import { MediaListWrapper } from '../components/MediaListWrapper';
 import ProfilePagesHeader from '../components/profile-page/ProfilePagesHeader';
 import ProfilePagesContent from '../components/profile-page/ProfilePagesContent';
@@ -30,7 +31,7 @@ export class ProfilePlaylistsPage extends ProfileMediaPage {
   pageContent() {
     return [
       this.state.author ? (
-        <ProfilePagesHeader key="ProfilePagesHeader" author={this.state.author} type="playlists" />
+        <ProfilePagesHeader key="ProfilePagesHeader" author={this.state.author} type="playlists" hideChannelBanner={inEmbeddedApp()} />
       ) : null,
       this.state.author ? (
         <ProfilePagesContent key="ProfilePagesContent">

frontend/src/static/js/pages/ProfileSharedByMePage.js

@@ -11,7 +11,7 @@ import { ProfileMediaFilters } from '../components/search-filters/ProfileMediaFi
 import { ProfileMediaTags } from '../components/search-filters/ProfileMediaTags';
 import { ProfileMediaSorting } from '../components/search-filters/ProfileMediaSorting';
 import { BulkActionsModals } from '../components/BulkActionsModals';
-import { translateString } from '../utils/helpers';
+import { inEmbeddedApp, inSelectMediaEmbedMode } from '../utils/helpers';
 import { withBulkActions } from '../utils/hoc/withBulkActions';
 
 import { Page } from './_Page';
@@ -19,400 +19,491 @@ import { Page } from './_Page';
 import '../components/profile-page/ProfilePage.scss';
 
 function EmptySharedByMe(props) {
-  return (
-    <LinksConsumer>
-      {(links) => (
-        <div className="empty-media empty-channel-media">
-          <div className="welcome-title">No shared media</div>
-          <div className="start-uploading">
-            Media that you have shared with others will show up here.
-          </div>
-        </div>
-      )}
-    </LinksConsumer>
-  );
+    return (
+        <LinksConsumer>
+            {(links) => (
+                <div className="empty-media empty-channel-media">
+                    <div className="welcome-title">No shared media</div>
+                    <div className="start-uploading">Media that you have shared with others will show up here.</div>
+                </div>
+            )}
+        </LinksConsumer>
+    );
 }
 
 class ProfileSharedByMePage extends Page {
-  constructor(props, pageSlug) {
-    super(props, 'string' === typeof pageSlug ? pageSlug : 'author-shared-by-me');
+    constructor(props, pageSlug) {
+        super(props, 'string' === typeof pageSlug ? pageSlug : 'author-shared-by-me');
 
-    this.profilePageSlug = 'string' === typeof pageSlug ? pageSlug : 'author-shared-by-me';
+        this.profilePageSlug = 'string' === typeof pageSlug ? pageSlug : 'author-shared-by-me';
 
-    this.state = {
-      channelMediaCount: -1,
-      author: ProfilePageStore.get('author-data'),
-      uploadsPreviewItemsCount: 0,
-      title: this.props.title,
-      query: ProfilePageStore.get('author-query'),
-      requestUrl: null,
-      hiddenFilters: true,
-      hiddenTags: true,
-      hiddenSorting: true,
-      filterArgs: '',
-      availableTags: [],
-      selectedTag: 'all',
-      selectedSort: 'date_added_desc',
-    };
+        this.state = {
+            channelMediaCount: -1,
+            author: ProfilePageStore.get('author-data'),
+            uploadsPreviewItemsCount: 0,
+            title: this.props.title,
+            query: ProfilePageStore.get('author-query'),
+            requestUrl: null,
+            hiddenFilters: true,
+            hiddenTags: true,
+            hiddenSorting: true,
+            filterArgs: '',
+            availableTags: [],
+            selectedTag: 'all',
+            selectedSort: 'date_added_desc',
+            selectedMedia: new Set(), // For select media mode
+        };
 
-    this.authorDataLoad = this.authorDataLoad.bind(this);
-    this.onAuthorPreviewItemsCountCallback = this.onAuthorPreviewItemsCountCallback.bind(this);
-    this.getCountFunc = this.getCountFunc.bind(this);
-    this.changeRequestQuery = this.changeRequestQuery.bind(this);
-    this.onToggleFiltersClick = this.onToggleFiltersClick.bind(this);
-    this.onToggleTagsClick = this.onToggleTagsClick.bind(this);
-    this.onToggleSortingClick = this.onToggleSortingClick.bind(this);
-    this.onFiltersUpdate = this.onFiltersUpdate.bind(this);
-    this.onTagSelect = this.onTagSelect.bind(this);
-    this.onSortSelect = this.onSortSelect.bind(this);
-    this.onResponseDataLoaded = this.onResponseDataLoaded.bind(this);
+        this.authorDataLoad = this.authorDataLoad.bind(this);
+        this.onAuthorPreviewItemsCountCallback = this.onAuthorPreviewItemsCountCallback.bind(this);
+        this.getCountFunc = this.getCountFunc.bind(this);
+        this.changeRequestQuery = this.changeRequestQuery.bind(this);
+        this.onToggleFiltersClick = this.onToggleFiltersClick.bind(this);
+        this.onToggleTagsClick = this.onToggleTagsClick.bind(this);
+        this.onToggleSortingClick = this.onToggleSortingClick.bind(this);
+        this.onFiltersUpdate = this.onFiltersUpdate.bind(this);
+        this.onTagSelect = this.onTagSelect.bind(this);
+        this.onSortSelect = this.onSortSelect.bind(this);
+        this.onResponseDataLoaded = this.onResponseDataLoaded.bind(this);
+        this.handleMediaSelection = this.handleMediaSelection.bind(this);
 
-    ProfilePageStore.on('load-author-data', this.authorDataLoad);
-  }
-
-  componentDidMount() {
-    ProfilePageActions.load_author_data();
-  }
-
-  authorDataLoad() {
-    const author = ProfilePageStore.get('author-data');
-
-    let requestUrl = this.state.requestUrl;
-
-    if (author) {
-      if (this.state.query) {
-        requestUrl = ApiUrlContext._currentValue.media + '?author=' + author.id + '&show=shared_by_me&q=' + encodeURIComponent(this.state.query) + this.state.filterArgs;
-      } else {
-        requestUrl = ApiUrlContext._currentValue.media + '?author=' + author.id + '&show=shared_by_me' + this.state.filterArgs;
-      }
+        ProfilePageStore.on('load-author-data', this.authorDataLoad);
     }
 
-    this.setState({
-      author: author,
-      requestUrl: requestUrl,
-    });
-  }
+    componentDidMount() {
+        ProfilePageActions.load_author_data();
+    }
 
-  onAuthorPreviewItemsCountCallback(totalAuthorPreviewItems) {
-    this.setState({
-      uploadsPreviewItemsCount: totalAuthorPreviewItems,
-    });
-  }
+    authorDataLoad() {
+        const author = ProfilePageStore.get('author-data');
 
-  getCountFunc(count) {
-    this.setState(
-      {
-        channelMediaCount: count,
-      },
-      () => {
-        if (this.state.query) {
-          let title = '';
+        let requestUrl = this.state.requestUrl;
 
-          if (!count) {
-            title = 'No results for "' + this.state.query + '"';
-          } else if (1 === count) {
-            title = '1 result for "' + this.state.query + '"';
-          } else {
-            title = count + ' results for "' + this.state.query + '"';
-          }
-
-          this.setState({
-            title: title,
-          });
+        if (author) {
+            if (this.state.query) {
+                requestUrl =
+                    ApiUrlContext._currentValue.media +
+                    '?author=' +
+                    author.id +
+                    '&show=shared_by_me&q=' +
+                    encodeURIComponent(this.state.query) +
+                    this.state.filterArgs;
+            } else {
+                requestUrl =
+                    ApiUrlContext._currentValue.media +
+                    '?author=' +
+                    author.id +
+                    '&show=shared_by_me' +
+                    this.state.filterArgs;
+            }
         }
-      }
-    );
-  }
 
-  changeRequestQuery(newQuery) {
-    if (!this.state.author) {
-      return;
+        this.setState({
+            author: author,
+            requestUrl: requestUrl,
+        });
     }
 
-    let requestUrl;
-
-    if (newQuery) {
-      requestUrl = ApiUrlContext._currentValue.media + '?author=' + this.state.author.id + '&show=shared_by_me&q=' + encodeURIComponent(newQuery) + this.state.filterArgs;
-    } else {
-      requestUrl = ApiUrlContext._currentValue.media + '?author=' + this.state.author.id + '&show=shared_by_me' + this.state.filterArgs;
+    onAuthorPreviewItemsCountCallback(totalAuthorPreviewItems) {
+        this.setState({
+            uploadsPreviewItemsCount: totalAuthorPreviewItems,
+        });
     }
 
-    let title = this.state.title;
+    getCountFunc(count) {
+        this.setState(
+            {
+                channelMediaCount: count,
+            },
+            () => {
+                if (this.state.query) {
+                    let title = '';
 
-    if ('' === newQuery) {
-      title = this.props.title;
+                    if (!count) {
+                        title = 'No results for "' + this.state.query + '"';
+                    } else if (1 === count) {
+                        title = '1 result for "' + this.state.query + '"';
+                    } else {
+                        title = count + ' results for "' + this.state.query + '"';
+                    }
+
+                    this.setState({
+                        title: title,
+                    });
+                }
+            }
+        );
     }
 
-    this.setState({
-      requestUrl: requestUrl,
-      query: newQuery,
-      title: title,
-    });
-  }
-
-  onToggleFiltersClick() {
-    this.setState({
-      hiddenFilters: !this.state.hiddenFilters,
-      hiddenTags: true,
-      hiddenSorting: true,
-    });
-  }
-
-  onToggleTagsClick() {
-    this.setState({
-      hiddenFilters: true,
-      hiddenTags: !this.state.hiddenTags,
-      hiddenSorting: true,
-    });
-  }
-
-  onToggleSortingClick() {
-    this.setState({
-      hiddenFilters: true,
-      hiddenTags: true,
-      hiddenSorting: !this.state.hiddenSorting,
-    });
-  }
-
-  onTagSelect(tag) {
-    this.setState({ selectedTag: tag }, () => {
-      this.onFiltersUpdate({
-        media_type: this.state.filterArgs.match(/media_type=([^&]+)/)?.[1],
-        upload_date: this.state.filterArgs.match(/upload_date=([^&]+)/)?.[1],
-        duration: this.state.filterArgs.match(/duration=([^&]+)/)?.[1],
-        publish_state: this.state.filterArgs.match(/publish_state=([^&]+)/)?.[1],
-        sort_by: this.state.selectedSort,
-        tag: tag,
-      });
-    });
-  }
-
-  onSortSelect(sortBy) {
-    this.setState({ selectedSort: sortBy }, () => {
-      this.onFiltersUpdate({
-        media_type: this.state.filterArgs.match(/media_type=([^&]+)/)?.[1],
-        upload_date: this.state.filterArgs.match(/upload_date=([^&]+)/)?.[1],
-        duration: this.state.filterArgs.match(/duration=([^&]+)/)?.[1],
-        publish_state: this.state.filterArgs.match(/publish_state=([^&]+)/)?.[1],
-        sort_by: sortBy,
-        tag: this.state.selectedTag,
-      });
-    });
-  }
-
-  onFiltersUpdate(updatedArgs) {
-    const args = {
-      media_type: null,
-      upload_date: null,
-      duration: null,
-      publish_state: null,
-      sort_by: null,
-      ordering: null,
-      t: null,
-    };
-
-    switch (updatedArgs.media_type) {
-      case 'video':
-      case 'audio':
-      case 'image':
-      case 'pdf':
-        args.media_type = updatedArgs.media_type;
-        break;
-    }
-
-    switch (updatedArgs.upload_date) {
-      case 'today':
-      case 'this_week':
-      case 'this_month':
-      case 'this_year':
-        args.upload_date = updatedArgs.upload_date;
-        break;
-    }
-
-    // Handle duration filter
-    if (updatedArgs.duration && updatedArgs.duration !== 'all') {
-      args.duration = updatedArgs.duration;
-    }
-
-    // Handle publish state filter
-    if (updatedArgs.publish_state && updatedArgs.publish_state !== 'all') {
-      args.publish_state = updatedArgs.publish_state;
-    }
-
-    switch (updatedArgs.sort_by) {
-      case 'date_added_desc':
-        // Default sorting, no need to add parameters
-        break;
-      case 'date_added_asc':
-        args.ordering = 'asc';
-        break;
-      case 'alphabetically_asc':
-        args.sort_by = 'title_asc';
-        break;
-      case 'alphabetically_desc':
-        args.sort_by = 'title_desc';
-        break;
-      case 'plays_least':
-        args.sort_by = 'views_asc';
-        break;
-      case 'plays_most':
-        args.sort_by = 'views_desc';
-        break;
-      case 'likes_least':
-        args.sort_by = 'likes_asc';
-        break;
-      case 'likes_most':
-        args.sort_by = 'likes_desc';
-        break;
-    }
-
-    if (updatedArgs.tag && updatedArgs.tag !== 'all') {
-      args.t = updatedArgs.tag;
-    }
-
-    const newArgs = [];
-
-    for (let arg in args) {
-      if (null !== args[arg]) {
-        newArgs.push(arg + '=' + args[arg]);
-      }
-    }
-
-    this.setState(
-      {
-        filterArgs: newArgs.length ? '&' + newArgs.join('&') : '',
-      },
-      function () {
+    changeRequestQuery(newQuery) {
         if (!this.state.author) {
-          return;
+            return;
         }
 
         let requestUrl;
 
-        if (this.state.query) {
-          requestUrl = ApiUrlContext._currentValue.media + '?author=' + this.state.author.id + '&show=shared_by_me&q=' + encodeURIComponent(this.state.query) + this.state.filterArgs;
+        if (newQuery) {
+            requestUrl =
+                ApiUrlContext._currentValue.media +
+                '?author=' +
+                this.state.author.id +
+                '&show=shared_by_me&q=' +
+                encodeURIComponent(newQuery) +
+                this.state.filterArgs;
         } else {
-          requestUrl = ApiUrlContext._currentValue.media + '?author=' + this.state.author.id + '&show=shared_by_me' + this.state.filterArgs;
+            requestUrl =
+                ApiUrlContext._currentValue.media +
+                '?author=' +
+                this.state.author.id +
+                '&show=shared_by_me' +
+                this.state.filterArgs;
+        }
+
+        let title = this.state.title;
+
+        if ('' === newQuery) {
+            title = this.props.title;
         }
 
         this.setState({
-          requestUrl: requestUrl,
+            requestUrl: requestUrl,
+            query: newQuery,
+            title: title,
         });
-      }
-    );
-  }
-
-  onResponseDataLoaded(responseData) {
-    if (responseData && responseData.tags) {
-      const tags = responseData.tags.split(',').map((tag) => tag.trim()).filter((tag) => tag);
-      this.setState({ availableTags: tags });
     }
-  }
 
-  pageContent() {
-    const authorData = ProfilePageStore.get('author-data');
+    onToggleFiltersClick() {
+        this.setState({
+            hiddenFilters: !this.state.hiddenFilters,
+            hiddenTags: true,
+            hiddenSorting: true,
+        });
+    }
 
-    const isMediaAuthor = authorData && authorData.username === MemberContext._currentValue.username;
+    onToggleTagsClick() {
+        this.setState({
+            hiddenFilters: true,
+            hiddenTags: !this.state.hiddenTags,
+            hiddenSorting: true,
+        });
+    }
 
-    // Check if any filters are active
-    const hasActiveFilters = this.state.filterArgs && (
-      this.state.filterArgs.includes('media_type=') ||
-      this.state.filterArgs.includes('upload_date=') ||
-      this.state.filterArgs.includes('duration=') ||
-      this.state.filterArgs.includes('publish_state=')
-    );
+    onToggleSortingClick() {
+        this.setState({
+            hiddenFilters: true,
+            hiddenTags: true,
+            hiddenSorting: !this.state.hiddenSorting,
+        });
+    }
 
-    return [
-      this.state.author ? (
-        <ProfilePagesHeader
-          key="ProfilePagesHeader"
-          author={this.state.author}
-          type="shared_by_me"
-          onQueryChange={this.changeRequestQuery}
-          onToggleFiltersClick={this.onToggleFiltersClick}
-          onToggleTagsClick={this.onToggleTagsClick}
-          onToggleSortingClick={this.onToggleSortingClick}
-          hasActiveFilters={hasActiveFilters}
-          hasActiveTags={this.state.selectedTag !== 'all'}
-          hasActiveSort={this.state.selectedSort !== 'date_added_desc'}
-        />
-      ) : null,
-      this.state.author ? (
-        <ProfilePagesContent key="ProfilePagesContent">
-          <MediaListWrapper
-            title={this.state.title}
-            className="items-list-ver"
-            showBulkActions={isMediaAuthor}
-            selectedCount={this.props.bulkActions.selectedMedia.size}
-            totalCount={this.props.bulkActions.availableMediaIds.length}
-            onBulkAction={this.props.bulkActions.handleBulkAction}
-            onSelectAll={this.props.bulkActions.handleSelectAll}
-            onDeselectAll={this.props.bulkActions.handleDeselectAll}
-          >
-            <ProfileMediaFilters hidden={this.state.hiddenFilters} tags={this.state.availableTags} onFiltersUpdate={this.onFiltersUpdate} />
-            <ProfileMediaTags hidden={this.state.hiddenTags} tags={this.state.availableTags} onTagSelect={this.onTagSelect} />
-            <ProfileMediaSorting hidden={this.state.hiddenSorting} onSortSelect={this.onSortSelect} />
-            <LazyLoadItemListAsync
-              key={`${this.state.requestUrl}-${this.props.bulkActions.listKey}`}
-              requestUrl={this.state.requestUrl}
-              hideAuthor={true}
-              itemsCountCallback={this.state.requestUrl ? this.getCountFunc : null}
-              hideViews={!PageStore.get('config-media-item').displayViews}
-              hideDate={!PageStore.get('config-media-item').displayPublishDate}
-              canEdit={isMediaAuthor}
-              onResponseDataLoaded={this.onResponseDataLoaded}
-              showSelection={isMediaAuthor}
-              hasAnySelection={this.props.bulkActions.selectedMedia.size > 0}
-              selectedMedia={this.props.bulkActions.selectedMedia}
-              onMediaSelection={this.props.bulkActions.handleMediaSelection}
-              onItemsUpdate={this.props.bulkActions.handleItemsUpdate}
-            />
-            {isMediaAuthor && 0 === this.state.channelMediaCount && !this.state.query ? (
-              <EmptySharedByMe name={this.state.author.name} />
-            ) : null}
-          </MediaListWrapper>
-        </ProfilePagesContent>
-      ) : null,
-      this.state.author && isMediaAuthor ? (
-        <BulkActionsModals
-          key="BulkActionsModals"
-          {...this.props.bulkActions}
-          selectedMediaIds={Array.from(this.props.bulkActions.selectedMedia)}
-          csrfToken={this.props.bulkActions.getCsrfToken()}
-          username={this.state.author.username}
-          onConfirmCancel={this.props.bulkActions.handleConfirmCancel}
-          onConfirmProceed={this.props.bulkActions.handleConfirmProceed}
-          onPermissionModalCancel={this.props.bulkActions.handlePermissionModalCancel}
-          onPermissionModalSuccess={this.props.bulkActions.handlePermissionModalSuccess}
-          onPermissionModalError={this.props.bulkActions.handlePermissionModalError}
-          onPlaylistModalCancel={this.props.bulkActions.handlePlaylistModalCancel}
-          onPlaylistModalSuccess={this.props.bulkActions.handlePlaylistModalSuccess}
-          onPlaylistModalError={this.props.bulkActions.handlePlaylistModalError}
-          onChangeOwnerModalCancel={this.props.bulkActions.handleChangeOwnerModalCancel}
-          onChangeOwnerModalSuccess={this.props.bulkActions.handleChangeOwnerModalSuccess}
-          onChangeOwnerModalError={this.props.bulkActions.handleChangeOwnerModalError}
-          onPublishStateModalCancel={this.props.bulkActions.handlePublishStateModalCancel}
-          onPublishStateModalSuccess={this.props.bulkActions.handlePublishStateModalSuccess}
-          onPublishStateModalError={this.props.bulkActions.handlePublishStateModalError}
-          onCategoryModalCancel={this.props.bulkActions.handleCategoryModalCancel}
-          onCategoryModalSuccess={this.props.bulkActions.handleCategoryModalSuccess}
-          onCategoryModalError={this.props.bulkActions.handleCategoryModalError}
-          onTagModalCancel={this.props.bulkActions.handleTagModalCancel}
-          onTagModalSuccess={this.props.bulkActions.handleTagModalSuccess}
-          onTagModalError={this.props.bulkActions.handleTagModalError}
-        />
-      ) : null,
-    ];
-  }
+    onTagSelect(tag) {
+        this.setState({ selectedTag: tag }, () => {
+            this.onFiltersUpdate({
+                media_type: this.state.filterArgs.match(/media_type=([^&]+)/)?.[1],
+                upload_date: this.state.filterArgs.match(/upload_date=([^&]+)/)?.[1],
+                duration: this.state.filterArgs.match(/duration=([^&]+)/)?.[1],
+                publish_state: this.state.filterArgs.match(/publish_state=([^&]+)/)?.[1],
+                sort_by: this.state.selectedSort,
+                tag: tag,
+            });
+        });
+    }
+
+    onSortSelect(sortBy) {
+        this.setState({ selectedSort: sortBy }, () => {
+            this.onFiltersUpdate({
+                media_type: this.state.filterArgs.match(/media_type=([^&]+)/)?.[1],
+                upload_date: this.state.filterArgs.match(/upload_date=([^&]+)/)?.[1],
+                duration: this.state.filterArgs.match(/duration=([^&]+)/)?.[1],
+                publish_state: this.state.filterArgs.match(/publish_state=([^&]+)/)?.[1],
+                sort_by: sortBy,
+                tag: this.state.selectedTag,
+            });
+        });
+    }
+
+    onFiltersUpdate(updatedArgs) {
+        const args = {
+            media_type: null,
+            upload_date: null,
+            duration: null,
+            publish_state: null,
+            sort_by: null,
+            ordering: null,
+            t: null,
+        };
+
+        switch (updatedArgs.media_type) {
+            case 'video':
+            case 'audio':
+            case 'image':
+            case 'pdf':
+                args.media_type = updatedArgs.media_type;
+                break;
+        }
+
+        switch (updatedArgs.upload_date) {
+            case 'today':
+            case 'this_week':
+            case 'this_month':
+            case 'this_year':
+                args.upload_date = updatedArgs.upload_date;
+                break;
+        }
+
+        // Handle duration filter
+        if (updatedArgs.duration && updatedArgs.duration !== 'all') {
+            args.duration = updatedArgs.duration;
+        }
+
+        // Handle publish state filter
+        if (updatedArgs.publish_state && updatedArgs.publish_state !== 'all') {
+            args.publish_state = updatedArgs.publish_state;
+        }
+
+        switch (updatedArgs.sort_by) {
+            case 'date_added_desc':
+                // Default sorting, no need to add parameters
+                break;
+            case 'date_added_asc':
+                args.ordering = 'asc';
+                break;
+            case 'alphabetically_asc':
+                args.sort_by = 'title_asc';
+                break;
+            case 'alphabetically_desc':
+                args.sort_by = 'title_desc';
+                break;
+            case 'plays_least':
+                args.sort_by = 'views_asc';
+                break;
+            case 'plays_most':
+                args.sort_by = 'views_desc';
+                break;
+            case 'likes_least':
+                args.sort_by = 'likes_asc';
+                break;
+            case 'likes_most':
+                args.sort_by = 'likes_desc';
+                break;
+        }
+
+        if (updatedArgs.tag && updatedArgs.tag !== 'all') {
+            args.t = updatedArgs.tag;
+        }
+
+        const newArgs = [];
+
+        for (let arg in args) {
+            if (null !== args[arg]) {
+                newArgs.push(arg + '=' + args[arg]);
+            }
+        }
+
+        this.setState(
+            {
+                filterArgs: newArgs.length ? '&' + newArgs.join('&') : '',
+            },
+            function () {
+                if (!this.state.author) {
+                    return;
+                }
+
+                let requestUrl;
+
+                if (this.state.query) {
+                    requestUrl =
+                        ApiUrlContext._currentValue.media +
+                        '?author=' +
+                        this.state.author.id +
+                        '&show=shared_by_me&q=' +
+                        encodeURIComponent(this.state.query) +
+                        this.state.filterArgs;
+                } else {
+                    requestUrl =
+                        ApiUrlContext._currentValue.media +
+                        '?author=' +
+                        this.state.author.id +
+                        '&show=shared_by_me' +
+                        this.state.filterArgs;
+                }
+
+                this.setState({
+                    requestUrl: requestUrl,
+                });
+            }
+        );
+    }
+
+    onResponseDataLoaded(responseData) {
+        if (responseData && responseData.tags) {
+            const tags = responseData.tags
+                .split(',')
+                .map((tag) => tag.trim())
+                .filter((tag) => tag);
+            this.setState({ availableTags: tags });
+        }
+    }
+
+    handleMediaSelection(mediaId, isSelected) {
+        const isSelectMediaMode = inSelectMediaEmbedMode();
+
+        this.setState((prevState) => {
+            const newSelectedMedia = new Set();
+
+            // In select media mode, only allow single selection
+            if (isSelectMediaMode) {
+                if (isSelected) {
+                    newSelectedMedia.add(mediaId);
+                    console.log('Selected media item:', mediaId);
+
+                    // Send postMessage to parent window (Moodle TinyMCE plugin)
+                    if (window.parent !== window) {
+                        // Construct the embed URL
+                        const baseUrl = window.location.origin;
+                        const embedUrl = `${baseUrl}/embed?m=${mediaId}`;
+
+                        // Send message in the format expected by the Moodle plugin
+                        window.parent.postMessage({
+                            type: 'videoSelected',
+                            embedUrl: embedUrl,
+                            videoId: mediaId
+                        }, '*');
+
+                        console.log('Sent postMessage to parent:', { embedUrl, videoId: mediaId });
+                    }
+                }
+            } else {
+                // Normal mode: should not reach here as bulk actions handle this
+                newSelectedMedia.clear();
+                prevState.selectedMedia.forEach((id) => newSelectedMedia.add(id));
+
+                if (isSelected) {
+                    newSelectedMedia.add(mediaId);
+                } else {
+                    newSelectedMedia.delete(mediaId);
+                }
+            }
+
+            return { selectedMedia: newSelectedMedia };
+        });
+    }
+
+    pageContent() {
+        const authorData = ProfilePageStore.get('author-data');
+
+        const isMediaAuthor = authorData && authorData.username === MemberContext._currentValue.username;
+        const isSelectMediaMode = inSelectMediaEmbedMode();
+
+        // Check if any filters are active
+        const hasActiveFilters =
+            this.state.filterArgs &&
+            (this.state.filterArgs.includes('media_type=') ||
+                this.state.filterArgs.includes('upload_date=') ||
+                this.state.filterArgs.includes('duration=') ||
+                this.state.filterArgs.includes('publish_state='));
+
+        return [
+            this.state.author ? (
+                <ProfilePagesHeader
+                    key="ProfilePagesHeader"
+                    author={this.state.author}
+                    type="shared_by_me"
+                    onQueryChange={this.changeRequestQuery}
+                    onToggleFiltersClick={this.onToggleFiltersClick}
+                    onToggleTagsClick={this.onToggleTagsClick}
+                    onToggleSortingClick={this.onToggleSortingClick}
+                    hasActiveFilters={hasActiveFilters}
+                    hasActiveTags={this.state.selectedTag !== 'all'}
+                    hasActiveSort={this.state.selectedSort !== 'date_added_desc'}
+                    hideChannelBanner={inEmbeddedApp()}
+                />
+            ) : null,
+            this.state.author ? (
+                <ProfilePagesContent key="ProfilePagesContent">
+                    <MediaListWrapper
+                        title={inEmbeddedApp() ? undefined : this.state.title}
+                        className="items-list-ver"
+                        style={inEmbeddedApp() ? { marginTop: '24px' } : undefined}
+                        showBulkActions={!isSelectMediaMode && isMediaAuthor}
+                        selectedCount={isSelectMediaMode ? this.state.selectedMedia.size : this.props.bulkActions.selectedMedia.size}
+                        totalCount={isSelectMediaMode ? 0 : this.props.bulkActions.availableMediaIds.length}
+                        onBulkAction={this.props.bulkActions.handleBulkAction}
+                        onSelectAll={this.props.bulkActions.handleSelectAll}
+                        onDeselectAll={this.props.bulkActions.handleDeselectAll}
+                    >
+                        <ProfileMediaFilters
+                            hidden={this.state.hiddenFilters}
+                            tags={this.state.availableTags}
+                            onFiltersUpdate={this.onFiltersUpdate}
+                        />
+                        <ProfileMediaTags
+                            hidden={this.state.hiddenTags}
+                            tags={this.state.availableTags}
+                            onTagSelect={this.onTagSelect}
+                        />
+                        <ProfileMediaSorting hidden={this.state.hiddenSorting} onSortSelect={this.onSortSelect} />
+                        <LazyLoadItemListAsync
+                            key={isSelectMediaMode ? this.state.requestUrl : `${this.state.requestUrl}-${this.props.bulkActions.listKey}`}
+                            requestUrl={this.state.requestUrl}
+                            hideAuthor={true}
+                            itemsCountCallback={this.state.requestUrl ? this.getCountFunc : null}
+                            hideViews={!PageStore.get('config-media-item').displayViews}
+                            hideDate={!PageStore.get('config-media-item').displayPublishDate}
+                            canEdit={!isSelectMediaMode && isMediaAuthor}
+                            onResponseDataLoaded={this.onResponseDataLoaded}
+                            showSelection={isMediaAuthor || isSelectMediaMode}
+                            hasAnySelection={isSelectMediaMode ? this.state.selectedMedia.size > 0 : this.props.bulkActions.selectedMedia.size > 0}
+                            selectedMedia={isSelectMediaMode ? this.state.selectedMedia : this.props.bulkActions.selectedMedia}
+                            onMediaSelection={isSelectMediaMode ? this.handleMediaSelection : this.props.bulkActions.handleMediaSelection}
+                            onItemsUpdate={!isSelectMediaMode ? this.props.bulkActions.handleItemsUpdate : undefined}
+                        />
+                        {isMediaAuthor && 0 === this.state.channelMediaCount && !this.state.query ? (
+                            <EmptySharedByMe name={this.state.author.name} />
+                        ) : null}
+                    </MediaListWrapper>
+                </ProfilePagesContent>
+            ) : null,
+            this.state.author && isMediaAuthor && !isSelectMediaMode ? (
+                <BulkActionsModals
+                    key="BulkActionsModals"
+                    {...this.props.bulkActions}
+                    selectedMediaIds={Array.from(this.props.bulkActions.selectedMedia)}
+                    csrfToken={this.props.bulkActions.getCsrfToken()}
+                    username={this.state.author.username}
+                    onConfirmCancel={this.props.bulkActions.handleConfirmCancel}
+                    onConfirmProceed={this.props.bulkActions.handleConfirmProceed}
+                    onPermissionModalCancel={this.props.bulkActions.handlePermissionModalCancel}
+                    onPermissionModalSuccess={this.props.bulkActions.handlePermissionModalSuccess}
+                    onPermissionModalError={this.props.bulkActions.handlePermissionModalError}
+                    onPlaylistModalCancel={this.props.bulkActions.handlePlaylistModalCancel}
+                    onPlaylistModalSuccess={this.props.bulkActions.handlePlaylistModalSuccess}
+                    onPlaylistModalError={this.props.bulkActions.handlePlaylistModalError}
+                    onChangeOwnerModalCancel={this.props.bulkActions.handleChangeOwnerModalCancel}
+                    onChangeOwnerModalSuccess={this.props.bulkActions.handleChangeOwnerModalSuccess}
+                    onChangeOwnerModalError={this.props.bulkActions.handleChangeOwnerModalError}
+                    onPublishStateModalCancel={this.props.bulkActions.handlePublishStateModalCancel}
+                    onPublishStateModalSuccess={this.props.bulkActions.handlePublishStateModalSuccess}
+                    onPublishStateModalError={this.props.bulkActions.handlePublishStateModalError}
+                    onCategoryModalCancel={this.props.bulkActions.handleCategoryModalCancel}
+                    onCategoryModalSuccess={this.props.bulkActions.handleCategoryModalSuccess}
+                    onCategoryModalError={this.props.bulkActions.handleCategoryModalError}
+                    onTagModalCancel={this.props.bulkActions.handleTagModalCancel}
+                    onTagModalSuccess={this.props.bulkActions.handleTagModalSuccess}
+                    onTagModalError={this.props.bulkActions.handleTagModalError}
+                />
+            ) : null,
+        ];
+    }
 }
 
 ProfileSharedByMePage.propTypes = {
-  title: PropTypes.string.isRequired,
-  bulkActions: PropTypes.object.isRequired,
+    title: PropTypes.string.isRequired,
+    bulkActions: PropTypes.object.isRequired,
 };
 
 ProfileSharedByMePage.defaultProps = {
-  title: 'Shared by me',
+    title: 'Shared by me',
 };
 
 // Wrap with HOC and export as named export for compatibility

frontend/src/static/js/pages/ProfileSharedWithMePage.js

@@ -10,364 +10,459 @@ import { LazyLoadItemListAsync } from '../components/item-list/LazyLoadItemListA
 import { ProfileMediaFilters } from '../components/search-filters/ProfileMediaFilters';
 import { ProfileMediaTags } from '../components/search-filters/ProfileMediaTags';
 import { ProfileMediaSorting } from '../components/search-filters/ProfileMediaSorting';
-import { translateString } from '../utils/helpers';
+import { inEmbeddedApp, inSelectMediaEmbedMode } from '../utils/helpers';
 
 import { Page } from './_Page';
 
 import '../components/profile-page/ProfilePage.scss';
 
 function EmptySharedWithMe(props) {
-  return (
-    <LinksConsumer>
-      {(links) => (
-        <div className="empty-media empty-channel-media">
-          <div className="welcome-title">No shared media</div>
-          <div className="start-uploading">
-            Media that others have shared with you will show up here.
-          </div>
-        </div>
-      )}
-    </LinksConsumer>
-  );
+    return (
+        <LinksConsumer>
+            {(links) => (
+                <div className="empty-media empty-channel-media">
+                    <div className="welcome-title">No shared media</div>
+                    <div className="start-uploading">Media that others have shared with you will show up here.</div>
+                </div>
+            )}
+        </LinksConsumer>
+    );
 }
 
 export class ProfileSharedWithMePage extends Page {
-  constructor(props, pageSlug) {
-    super(props, 'string' === typeof pageSlug ? pageSlug : 'author-shared-with-me');
+    constructor(props, pageSlug) {
+        super(props, 'string' === typeof pageSlug ? pageSlug : 'author-shared-with-me');
 
-    this.profilePageSlug = 'string' === typeof pageSlug ? pageSlug : 'author-shared-with-me';
+        this.profilePageSlug = 'string' === typeof pageSlug ? pageSlug : 'author-shared-with-me';
 
-    this.state = {
-      channelMediaCount: -1,
-      author: ProfilePageStore.get('author-data'),
-      uploadsPreviewItemsCount: 0,
-      title: this.props.title,
-      query: ProfilePageStore.get('author-query'),
-      requestUrl: null,
-      hiddenFilters: true,
-      hiddenTags: true,
-      hiddenSorting: true,
-      filterArgs: '',
-      availableTags: [],
-      selectedTag: 'all',
-      selectedSort: 'date_added_desc',
-    };
+        this.state = {
+            channelMediaCount: -1,
+            author: ProfilePageStore.get('author-data'),
+            uploadsPreviewItemsCount: 0,
+            title: this.props.title,
+            query: ProfilePageStore.get('author-query'),
+            requestUrl: null,
+            hiddenFilters: true,
+            hiddenTags: true,
+            hiddenSorting: true,
+            filterArgs: '',
+            availableTags: [],
+            selectedTag: 'all',
+            selectedSort: 'date_added_desc',
+            selectedMedia: new Set(), // For select media mode
+        };
 
-    this.authorDataLoad = this.authorDataLoad.bind(this);
-    this.onAuthorPreviewItemsCountCallback = this.onAuthorPreviewItemsCountCallback.bind(this);
-    this.getCountFunc = this.getCountFunc.bind(this);
-    this.changeRequestQuery = this.changeRequestQuery.bind(this);
-    this.onToggleFiltersClick = this.onToggleFiltersClick.bind(this);
-    this.onToggleTagsClick = this.onToggleTagsClick.bind(this);
-    this.onToggleSortingClick = this.onToggleSortingClick.bind(this);
-    this.onFiltersUpdate = this.onFiltersUpdate.bind(this);
-    this.onTagSelect = this.onTagSelect.bind(this);
-    this.onSortSelect = this.onSortSelect.bind(this);
-    this.onResponseDataLoaded = this.onResponseDataLoaded.bind(this);
+        this.authorDataLoad = this.authorDataLoad.bind(this);
+        this.onAuthorPreviewItemsCountCallback = this.onAuthorPreviewItemsCountCallback.bind(this);
+        this.getCountFunc = this.getCountFunc.bind(this);
+        this.changeRequestQuery = this.changeRequestQuery.bind(this);
+        this.onToggleFiltersClick = this.onToggleFiltersClick.bind(this);
+        this.onToggleTagsClick = this.onToggleTagsClick.bind(this);
+        this.onToggleSortingClick = this.onToggleSortingClick.bind(this);
+        this.onFiltersUpdate = this.onFiltersUpdate.bind(this);
+        this.onTagSelect = this.onTagSelect.bind(this);
+        this.onSortSelect = this.onSortSelect.bind(this);
+        this.onResponseDataLoaded = this.onResponseDataLoaded.bind(this);
+        this.handleMediaSelection = this.handleMediaSelection.bind(this);
 
-    ProfilePageStore.on('load-author-data', this.authorDataLoad);
-  }
-
-  componentDidMount() {
-    ProfilePageActions.load_author_data();
-  }
-
-  authorDataLoad() {
-    const author = ProfilePageStore.get('author-data');
-
-    let requestUrl = this.state.requestUrl;
-
-    if (author) {
-      if (this.state.query) {
-        requestUrl = ApiUrlContext._currentValue.media + '?author=' + author.id + '&show=shared_with_me&q=' + encodeURIComponent(this.state.query) + this.state.filterArgs;
-      } else {
-        requestUrl = ApiUrlContext._currentValue.media + '?author=' + author.id + '&show=shared_with_me' + this.state.filterArgs;
-      }
+        ProfilePageStore.on('load-author-data', this.authorDataLoad);
     }
 
-    this.setState({
-      author: author,
-      requestUrl: requestUrl,
-    });
-  }
+    componentDidMount() {
+        ProfilePageActions.load_author_data();
+    }
 
-  onAuthorPreviewItemsCountCallback(totalAuthorPreviewItems) {
-    this.setState({
-      uploadsPreviewItemsCount: totalAuthorPreviewItems,
-    });
-  }
+    authorDataLoad() {
+        const author = ProfilePageStore.get('author-data');
 
-  getCountFunc(count) {
-    this.setState(
-      {
-        channelMediaCount: count,
-      },
-      () => {
-        if (this.state.query) {
-          let title = '';
+        let requestUrl = this.state.requestUrl;
 
-          if (!count) {
-            title = 'No results for "' + this.state.query + '"';
-          } else if (1 === count) {
-            title = '1 result for "' + this.state.query + '"';
-          } else {
-            title = count + ' results for "' + this.state.query + '"';
-          }
-
-          this.setState({
-            title: title,
-          });
+        if (author) {
+            if (this.state.query) {
+                requestUrl =
+                    ApiUrlContext._currentValue.media +
+                    '?author=' +
+                    author.id +
+                    '&show=shared_with_me&q=' +
+                    encodeURIComponent(this.state.query) +
+                    this.state.filterArgs;
+            } else {
+                requestUrl =
+                    ApiUrlContext._currentValue.media +
+                    '?author=' +
+                    author.id +
+                    '&show=shared_with_me' +
+                    this.state.filterArgs;
+            }
         }
-      }
-    );
-  }
 
-  changeRequestQuery(newQuery) {
-    if (!this.state.author) {
-      return;
+        this.setState({
+            author: author,
+            requestUrl: requestUrl,
+        });
     }
 
-    let requestUrl;
-
-    if (newQuery) {
-      requestUrl = ApiUrlContext._currentValue.media + '?author=' + this.state.author.id + '&show=shared_with_me&q=' + encodeURIComponent(newQuery) + this.state.filterArgs;
-    } else {
-      requestUrl = ApiUrlContext._currentValue.media + '?author=' + this.state.author.id + '&show=shared_with_me' + this.state.filterArgs;
+    onAuthorPreviewItemsCountCallback(totalAuthorPreviewItems) {
+        this.setState({
+            uploadsPreviewItemsCount: totalAuthorPreviewItems,
+        });
     }
 
-    let title = this.state.title;
+    getCountFunc(count) {
+        this.setState(
+            {
+                channelMediaCount: count,
+            },
+            () => {
+                if (this.state.query) {
+                    let title = '';
 
-    if ('' === newQuery) {
-      title = this.props.title;
+                    if (!count) {
+                        title = 'No results for "' + this.state.query + '"';
+                    } else if (1 === count) {
+                        title = '1 result for "' + this.state.query + '"';
+                    } else {
+                        title = count + ' results for "' + this.state.query + '"';
+                    }
+
+                    this.setState({
+                        title: title,
+                    });
+                }
+            }
+        );
     }
 
-    this.setState({
-      requestUrl: requestUrl,
-      query: newQuery,
-      title: title,
-    });
-  }
-
-  onToggleFiltersClick() {
-    this.setState({
-      hiddenFilters: !this.state.hiddenFilters,
-      hiddenTags: true,
-      hiddenSorting: true,
-    });
-  }
-
-  onToggleTagsClick() {
-    this.setState({
-      hiddenFilters: true,
-      hiddenTags: !this.state.hiddenTags,
-      hiddenSorting: true,
-    });
-  }
-
-  onToggleSortingClick() {
-    this.setState({
-      hiddenFilters: true,
-      hiddenTags: true,
-      hiddenSorting: !this.state.hiddenSorting,
-    });
-  }
-
-  onTagSelect(tag) {
-    this.setState({ selectedTag: tag }, () => {
-      this.onFiltersUpdate({
-        media_type: this.state.filterArgs.match(/media_type=([^&]+)/)?.[1],
-        upload_date: this.state.filterArgs.match(/upload_date=([^&]+)/)?.[1],
-        duration: this.state.filterArgs.match(/duration=([^&]+)/)?.[1],
-        publish_state: this.state.filterArgs.match(/publish_state=([^&]+)/)?.[1],
-        sort_by: this.state.selectedSort,
-        tag: tag,
-      });
-    });
-  }
-
-  onSortSelect(sortBy) {
-    this.setState({ selectedSort: sortBy }, () => {
-      this.onFiltersUpdate({
-        media_type: this.state.filterArgs.match(/media_type=([^&]+)/)?.[1],
-        upload_date: this.state.filterArgs.match(/upload_date=([^&]+)/)?.[1],
-        duration: this.state.filterArgs.match(/duration=([^&]+)/)?.[1],
-        publish_state: this.state.filterArgs.match(/publish_state=([^&]+)/)?.[1],
-        sort_by: sortBy,
-        tag: this.state.selectedTag,
-      });
-    });
-  }
-
-  onFiltersUpdate(updatedArgs) {
-    const args = {
-      media_type: null,
-      upload_date: null,
-      duration: null,
-      publish_state: null,
-      sort_by: null,
-      ordering: null,
-      t: null,
-    };
-
-    switch (updatedArgs.media_type) {
-      case 'video':
-      case 'audio':
-      case 'image':
-      case 'pdf':
-        args.media_type = updatedArgs.media_type;
-        break;
-    }
-
-    switch (updatedArgs.upload_date) {
-      case 'today':
-      case 'this_week':
-      case 'this_month':
-      case 'this_year':
-        args.upload_date = updatedArgs.upload_date;
-        break;
-    }
-
-    // Handle duration filter
-    if (updatedArgs.duration && updatedArgs.duration !== 'all') {
-      args.duration = updatedArgs.duration;
-    }
-
-    // Handle publish state filter
-    if (updatedArgs.publish_state && updatedArgs.publish_state !== 'all') {
-      args.publish_state = updatedArgs.publish_state;
-    }
-
-    switch (updatedArgs.sort_by) {
-      case 'date_added_desc':
-        // Default sorting, no need to add parameters
-        break;
-      case 'date_added_asc':
-        args.ordering = 'asc';
-        break;
-      case 'alphabetically_asc':
-        args.sort_by = 'title_asc';
-        break;
-      case 'alphabetically_desc':
-        args.sort_by = 'title_desc';
-        break;
-      case 'plays_least':
-        args.sort_by = 'views_asc';
-        break;
-      case 'plays_most':
-        args.sort_by = 'views_desc';
-        break;
-      case 'likes_least':
-        args.sort_by = 'likes_asc';
-        break;
-      case 'likes_most':
-        args.sort_by = 'likes_desc';
-        break;
-    }
-
-    if (updatedArgs.tag && updatedArgs.tag !== 'all') {
-      args.t = updatedArgs.tag;
-    }
-
-    const newArgs = [];
-
-    for (let arg in args) {
-      if (null !== args[arg]) {
-        newArgs.push(arg + '=' + args[arg]);
-      }
-    }
-
-    this.setState(
-      {
-        filterArgs: newArgs.length ? '&' + newArgs.join('&') : '',
-      },
-      function () {
+    changeRequestQuery(newQuery) {
         if (!this.state.author) {
-          return;
+            return;
         }
 
         let requestUrl;
 
-        if (this.state.query) {
-          requestUrl = ApiUrlContext._currentValue.media + '?author=' + this.state.author.id + '&show=shared_with_me&q=' + encodeURIComponent(this.state.query) + this.state.filterArgs;
+        if (newQuery) {
+            requestUrl =
+                ApiUrlContext._currentValue.media +
+                '?author=' +
+                this.state.author.id +
+                '&show=shared_with_me&q=' +
+                encodeURIComponent(newQuery) +
+                this.state.filterArgs;
         } else {
-          requestUrl = ApiUrlContext._currentValue.media + '?author=' + this.state.author.id + '&show=shared_with_me' + this.state.filterArgs;
+            requestUrl =
+                ApiUrlContext._currentValue.media +
+                '?author=' +
+                this.state.author.id +
+                '&show=shared_with_me' +
+                this.state.filterArgs;
+        }
+
+        let title = this.state.title;
+
+        if ('' === newQuery) {
+            title = this.props.title;
         }
 
         this.setState({
-          requestUrl: requestUrl,
+            requestUrl: requestUrl,
+            query: newQuery,
+            title: title,
         });
-      }
-    );
-  }
-
-  onResponseDataLoaded(responseData) {
-    if (responseData && responseData.tags) {
-      const tags = responseData.tags.split(',').map((tag) => tag.trim()).filter((tag) => tag);
-      this.setState({ availableTags: tags });
     }
-  }
 
-  pageContent() {
-    const authorData = ProfilePageStore.get('author-data');
+    onToggleFiltersClick() {
+        this.setState({
+            hiddenFilters: !this.state.hiddenFilters,
+            hiddenTags: true,
+            hiddenSorting: true,
+        });
+    }
 
-    const isMediaAuthor = authorData && authorData.username === MemberContext._currentValue.username;
+    onToggleTagsClick() {
+        this.setState({
+            hiddenFilters: true,
+            hiddenTags: !this.state.hiddenTags,
+            hiddenSorting: true,
+        });
+    }
 
-    // Check if any filters are active
-    const hasActiveFilters = this.state.filterArgs && (
-      this.state.filterArgs.includes('media_type=') ||
-      this.state.filterArgs.includes('upload_date=') ||
-      this.state.filterArgs.includes('duration=') ||
-      this.state.filterArgs.includes('publish_state=')
-    );
+    onToggleSortingClick() {
+        this.setState({
+            hiddenFilters: true,
+            hiddenTags: true,
+            hiddenSorting: !this.state.hiddenSorting,
+        });
+    }
 
-    return [
-      this.state.author ? (
-        <ProfilePagesHeader
-          key="ProfilePagesHeader"
-          author={this.state.author}
-          type="shared_with_me"
-          onQueryChange={this.changeRequestQuery}
-          onToggleFiltersClick={this.onToggleFiltersClick}
-          onToggleTagsClick={this.onToggleTagsClick}
-          onToggleSortingClick={this.onToggleSortingClick}
-          hasActiveFilters={hasActiveFilters}
-          hasActiveTags={this.state.selectedTag !== 'all'}
-          hasActiveSort={this.state.selectedSort !== 'date_added_desc'}
-        />
-      ) : null,
-      this.state.author ? (
-        <ProfilePagesContent key="ProfilePagesContent">
-          <MediaListWrapper
-            title={this.state.title}
-            className="items-list-ver"
-          >
-            <ProfileMediaFilters hidden={this.state.hiddenFilters} tags={this.state.availableTags} onFiltersUpdate={this.onFiltersUpdate} />
-            <ProfileMediaTags hidden={this.state.hiddenTags} tags={this.state.availableTags} onTagSelect={this.onTagSelect} />
-            <ProfileMediaSorting hidden={this.state.hiddenSorting} onSortSelect={this.onSortSelect} />
-            <LazyLoadItemListAsync
-              key={this.state.requestUrl}
-              requestUrl={this.state.requestUrl}
-              hideAuthor={true}
-              itemsCountCallback={this.state.requestUrl ? this.getCountFunc : null}
-              hideViews={!PageStore.get('config-media-item').displayViews}
-              hideDate={!PageStore.get('config-media-item').displayPublishDate}
-              canEdit={false}
-              onResponseDataLoaded={this.onResponseDataLoaded}
-            />
-            {isMediaAuthor && 0 === this.state.channelMediaCount && !this.state.query ? (
-              <EmptySharedWithMe name={this.state.author.name} />
-            ) : null}
-          </MediaListWrapper>
-        </ProfilePagesContent>
-      ) : null,
-    ];
-  }
+    onTagSelect(tag) {
+        this.setState({ selectedTag: tag }, () => {
+            this.onFiltersUpdate({
+                media_type: this.state.filterArgs.match(/media_type=([^&]+)/)?.[1],
+                upload_date: this.state.filterArgs.match(/upload_date=([^&]+)/)?.[1],
+                duration: this.state.filterArgs.match(/duration=([^&]+)/)?.[1],
+                publish_state: this.state.filterArgs.match(/publish_state=([^&]+)/)?.[1],
+                sort_by: this.state.selectedSort,
+                tag: tag,
+            });
+        });
+    }
+
+    onSortSelect(sortBy) {
+        this.setState({ selectedSort: sortBy }, () => {
+            this.onFiltersUpdate({
+                media_type: this.state.filterArgs.match(/media_type=([^&]+)/)?.[1],
+                upload_date: this.state.filterArgs.match(/upload_date=([^&]+)/)?.[1],
+                duration: this.state.filterArgs.match(/duration=([^&]+)/)?.[1],
+                publish_state: this.state.filterArgs.match(/publish_state=([^&]+)/)?.[1],
+                sort_by: sortBy,
+                tag: this.state.selectedTag,
+            });
+        });
+    }
+
+    onFiltersUpdate(updatedArgs) {
+        const args = {
+            media_type: null,
+            upload_date: null,
+            duration: null,
+            publish_state: null,
+            sort_by: null,
+            ordering: null,
+            t: null,
+        };
+
+        switch (updatedArgs.media_type) {
+            case 'video':
+            case 'audio':
+            case 'image':
+            case 'pdf':
+                args.media_type = updatedArgs.media_type;
+                break;
+        }
+
+        switch (updatedArgs.upload_date) {
+            case 'today':
+            case 'this_week':
+            case 'this_month':
+            case 'this_year':
+                args.upload_date = updatedArgs.upload_date;
+                break;
+        }
+
+        // Handle duration filter
+        if (updatedArgs.duration && updatedArgs.duration !== 'all') {
+            args.duration = updatedArgs.duration;
+        }
+
+        // Handle publish state filter
+        if (updatedArgs.publish_state && updatedArgs.publish_state !== 'all') {
+            args.publish_state = updatedArgs.publish_state;
+        }
+
+        switch (updatedArgs.sort_by) {
+            case 'date_added_desc':
+                // Default sorting, no need to add parameters
+                break;
+            case 'date_added_asc':
+                args.ordering = 'asc';
+                break;
+            case 'alphabetically_asc':
+                args.sort_by = 'title_asc';
+                break;
+            case 'alphabetically_desc':
+                args.sort_by = 'title_desc';
+                break;
+            case 'plays_least':
+                args.sort_by = 'views_asc';
+                break;
+            case 'plays_most':
+                args.sort_by = 'views_desc';
+                break;
+            case 'likes_least':
+                args.sort_by = 'likes_asc';
+                break;
+            case 'likes_most':
+                args.sort_by = 'likes_desc';
+                break;
+        }
+
+        if (updatedArgs.tag && updatedArgs.tag !== 'all') {
+            args.t = updatedArgs.tag;
+        }
+
+        const newArgs = [];
+
+        for (let arg in args) {
+            if (null !== args[arg]) {
+                newArgs.push(arg + '=' + args[arg]);
+            }
+        }
+
+        this.setState(
+            {
+                filterArgs: newArgs.length ? '&' + newArgs.join('&') : '',
+            },
+            function () {
+                if (!this.state.author) {
+                    return;
+                }
+
+                let requestUrl;
+
+                if (this.state.query) {
+                    requestUrl =
+                        ApiUrlContext._currentValue.media +
+                        '?author=' +
+                        this.state.author.id +
+                        '&show=shared_with_me&q=' +
+                        encodeURIComponent(this.state.query) +
+                        this.state.filterArgs;
+                } else {
+                    requestUrl =
+                        ApiUrlContext._currentValue.media +
+                        '?author=' +
+                        this.state.author.id +
+                        '&show=shared_with_me' +
+                        this.state.filterArgs;
+                }
+
+                this.setState({
+                    requestUrl: requestUrl,
+                });
+            }
+        );
+    }
+
+    onResponseDataLoaded(responseData) {
+        if (responseData && responseData.tags) {
+            const tags = responseData.tags
+                .split(',')
+                .map((tag) => tag.trim())
+                .filter((tag) => tag);
+            this.setState({ availableTags: tags });
+        }
+    }
+
+    handleMediaSelection(mediaId, isSelected) {
+        const isSelectMediaMode = inSelectMediaEmbedMode();
+
+        this.setState((prevState) => {
+            const newSelectedMedia = new Set();
+
+            // In select media mode, only allow single selection
+            if (isSelectMediaMode) {
+                if (isSelected) {
+                    newSelectedMedia.add(mediaId);
+                    console.log('Selected media item:', mediaId);
+
+                    // Send postMessage to parent window (Moodle TinyMCE plugin)
+                    if (window.parent !== window) {
+                        // Construct the embed URL
+                        const baseUrl = window.location.origin;
+                        const embedUrl = `${baseUrl}/embed?m=${mediaId}`;
+
+                        // Send message in the format expected by the Moodle plugin
+                        window.parent.postMessage({
+                            type: 'videoSelected',
+                            embedUrl: embedUrl,
+                            videoId: mediaId
+                        }, '*');
+
+                        console.log('Sent postMessage to parent:', { embedUrl, videoId: mediaId });
+                    }
+                }
+            } else {
+                // Normal mode: no selection UI in this page normally
+                newSelectedMedia.clear();
+                prevState.selectedMedia.forEach((id) => newSelectedMedia.add(id));
+
+                if (isSelected) {
+                    newSelectedMedia.add(mediaId);
+                } else {
+                    newSelectedMedia.delete(mediaId);
+                }
+            }
+
+            return { selectedMedia: newSelectedMedia };
+        });
+    }
+
+    pageContent() {
+        const authorData = ProfilePageStore.get('author-data');
+
+        const isMediaAuthor = authorData && authorData.username === MemberContext._currentValue.username;
+        const isSelectMediaMode = inSelectMediaEmbedMode();
+
+        // Check if any filters are active
+        const hasActiveFilters =
+            this.state.filterArgs &&
+            (this.state.filterArgs.includes('media_type=') ||
+                this.state.filterArgs.includes('upload_date=') ||
+                this.state.filterArgs.includes('duration=') ||
+                this.state.filterArgs.includes('publish_state='));
+
+        return [
+            this.state.author ? (
+                <ProfilePagesHeader
+                    key="ProfilePagesHeader"
+                    author={this.state.author}
+                    type="shared_with_me"
+                    onQueryChange={this.changeRequestQuery}
+                    onToggleFiltersClick={this.onToggleFiltersClick}
+                    onToggleTagsClick={this.onToggleTagsClick}
+                    onToggleSortingClick={this.onToggleSortingClick}
+                    hasActiveFilters={hasActiveFilters}
+                    hasActiveTags={this.state.selectedTag !== 'all'}
+                    hasActiveSort={this.state.selectedSort !== 'date_added_desc'}
+                    hideChannelBanner={inEmbeddedApp()}
+                />
+            ) : null,
+            this.state.author ? (
+                <ProfilePagesContent key="ProfilePagesContent">
+                    <MediaListWrapper
+                        title={inEmbeddedApp() ? undefined : this.state.title}
+                        className="items-list-ver"
+                        style={inEmbeddedApp() ? { marginTop: '24px' } : undefined}
+                    >
+                        <ProfileMediaFilters
+                            hidden={this.state.hiddenFilters}
+                            tags={this.state.availableTags}
+                            onFiltersUpdate={this.onFiltersUpdate}
+                        />
+                        <ProfileMediaTags
+                            hidden={this.state.hiddenTags}
+                            tags={this.state.availableTags}
+                            onTagSelect={this.onTagSelect}
+                        />
+                        <ProfileMediaSorting hidden={this.state.hiddenSorting} onSortSelect={this.onSortSelect} />
+                        <LazyLoadItemListAsync
+                            key={this.state.requestUrl}
+                            requestUrl={this.state.requestUrl}
+                            hideAuthor={true}
+                            itemsCountCallback={this.state.requestUrl ? this.getCountFunc : null}
+                            hideViews={!PageStore.get('config-media-item').displayViews}
+                            hideDate={!PageStore.get('config-media-item').displayPublishDate}
+                            canEdit={false}
+                            onResponseDataLoaded={this.onResponseDataLoaded}
+                            showSelection={isSelectMediaMode}
+                            hasAnySelection={this.state.selectedMedia.size > 0}
+                            selectedMedia={this.state.selectedMedia}
+                            onMediaSelection={this.handleMediaSelection}
+                        />
+                        {isMediaAuthor && 0 === this.state.channelMediaCount && !this.state.query ? (
+                            <EmptySharedWithMe name={this.state.author.name} />
+                        ) : null}
+                    </MediaListWrapper>
+                </ProfilePagesContent>
+            ) : null,
+        ];
+    }
 }
 
 ProfileSharedWithMePage.propTypes = {
-  title: PropTypes.string.isRequired,
+    title: PropTypes.string.isRequired,
 };
 
 ProfileSharedWithMePage.defaultProps = {
-  title: 'Shared with me',
+    title: 'Shared with me',
 };

frontend/src/static/js/pages/SearchPage.js

@@ -7,7 +7,7 @@ import { LazyLoadItemListAsync } from '../components/item-list/LazyLoadItemListA
 import { SearchMediaFiltersRow } from '../components/search-filters/SearchMediaFiltersRow';
 import { SearchResultsFilters } from '../components/search-filters/SearchResultsFilters';
 import { Page } from './_Page';
-import { translateString } from '../utils/helpers/';
+import { translateString, inEmbeddedApp } from '../utils/helpers/';
 
 export class SearchPage extends Page {
   constructor(props) {
@@ -115,7 +115,7 @@ export class SearchPage extends Page {
       } else {
         if (this.state.searchCategories) {
           title = null === this.state.resultsCount || 0 === this.state.resultsCount ? 'No' : this.state.resultsCount;
-          title += ' ' + translateString('media in category') + ' "' + this.state.searchCategories + '"';
+          title += ' ' + translateString(inEmbeddedApp() ? 'media in course' : 'media in category') + ' "' + this.state.searchCategories + '"';
         } else if (this.state.searchTags) {
           title = null === this.state.resultsCount || 0 === this.state.resultsCount ? 'No' : this.state.resultsCount;
           title += ' ' + translateString('media in tag') + ' "' + this.state.searchTags + '"';

frontend/src/static/js/pages/_MediaPage.js

@@ -1,6 +1,7 @@
 import React from 'react';
 import { PageStore, MediaPageStore } from '../utils/stores/';
 import { MediaPageActions } from '../utils/actions/';
+import { inEmbeddedApp } from '../utils/helpers/';
 import ViewerError from '../components/media-page/ViewerError';
 import ViewerInfo from '../components/media-page/ViewerInfo';
 import ViewerSidebar from '../components/media-page/ViewerSidebar';
@@ -10,102 +11,102 @@ import '../components/media-page/MediaPage.scss';
 const wideLayoutBreakpoint = 1216;
 
 export class _MediaPage extends Page {
-  constructor(props) {
-    super(props, 'media');
+    constructor(props) {
+        super(props, 'media');
 
-    const isWideLayout = wideLayoutBreakpoint <= window.innerWidth;
+        const isWideLayout = wideLayoutBreakpoint <= window.innerWidth;
 
-    this.state = {
-      mediaLoaded: false,
-      mediaLoadFailed: false,
-      wideLayout: isWideLayout,
-      infoAndSidebarViewType: !isWideLayout ? 0 : 1,
-      viewerClassname: 'cf viewer-section viewer-wide',
-      viewerNestedClassname: 'viewer-section-nested',
-      pagePlaylistLoaded: false,
-    };
+        this.state = {
+            mediaLoaded: false,
+            mediaLoadFailed: false,
+            wideLayout: isWideLayout,
+            infoAndSidebarViewType: !isWideLayout ? 0 : 1,
+            viewerClassname: 'cf viewer-section viewer-wide',
+            viewerNestedClassname: 'viewer-section-nested',
+            pagePlaylistLoaded: false,
+        };
 
-    this.onWindowResize = this.onWindowResize.bind(this);
-    this.onMediaLoad = this.onMediaLoad.bind(this);
-    this.onMediaLoadError = this.onMediaLoadError.bind(this);
-    this.onPagePlaylistLoad = this.onPagePlaylistLoad.bind(this);
+        this.onWindowResize = this.onWindowResize.bind(this);
+        this.onMediaLoad = this.onMediaLoad.bind(this);
+        this.onMediaLoadError = this.onMediaLoadError.bind(this);
+        this.onPagePlaylistLoad = this.onPagePlaylistLoad.bind(this);
 
-    MediaPageStore.on('loaded_media_data', this.onMediaLoad);
-    MediaPageStore.on('loaded_media_error', this.onMediaLoadError);
-    MediaPageStore.on('loaded_page_playlist_data', this.onPagePlaylistLoad);
-  }
+        MediaPageStore.on('loaded_media_data', this.onMediaLoad);
+        MediaPageStore.on('loaded_media_error', this.onMediaLoadError);
+        MediaPageStore.on('loaded_page_playlist_data', this.onPagePlaylistLoad);
+    }
 
-  componentDidMount() {
-    MediaPageActions.loadMediaData();
-    // FIXME: Is not neccessary to check on every window dimension for changes...
-    PageStore.on('window_resize', this.onWindowResize);
-  }
+    componentDidMount() {
+        MediaPageActions.loadMediaData();
+        // FIXME: Is not neccessary to check on every window dimension for changes...
+        PageStore.on('window_resize', this.onWindowResize);
+    }
 
-  onPagePlaylistLoad() {
-    this.setState({
-      pagePlaylistLoaded: true,
-    });
-  }
+    onPagePlaylistLoad() {
+        this.setState({
+            pagePlaylistLoaded: true,
+        });
+    }
 
-  onWindowResize() {
-    const isWideLayout = wideLayoutBreakpoint <= window.innerWidth;
+    onWindowResize() {
+        const isWideLayout = wideLayoutBreakpoint <= window.innerWidth;
 
-    this.setState({
-      wideLayout: isWideLayout,
-      infoAndSidebarViewType: !isWideLayout || (MediaPageStore.isVideo() && this.state.theaterMode) ? 0 : 1,
-    });
-  }
+        this.setState({
+            wideLayout: isWideLayout,
+            infoAndSidebarViewType: !isWideLayout || (MediaPageStore.isVideo() && this.state.theaterMode) ? 0 : 1,
+        });
+    }
 
-  onMediaLoad() {
-    this.setState({ mediaLoaded: true });
-  }
+    onMediaLoad() {
+        this.setState({ mediaLoaded: true });
+    }
 
-  onMediaLoadError() {
-    this.setState({ mediaLoadFailed: true });
-  }
+    onMediaLoadError() {
+        this.setState({ mediaLoadFailed: true });
+    }
 
-  viewerContainerContent() {
-    return null;
-  }
+    viewerContainerContent() {
+        return null;
+    }
 
-  mediaType() {
-    return null;
-  }
+    mediaType() {
+        return null;
+    }
 
-  pageContent() {
-    return this.state.mediaLoadFailed ? (
-      <div className={this.state.viewerClassname}>
-        <ViewerError />
-      </div>
-    ) : (
-      <div className={this.state.viewerClassname}>
-        <div className="viewer-container" key="viewer-container">
-          {this.state.mediaLoaded ? this.viewerContainerContent() : null}
-        </div>
-        <div key="viewer-section-nested" className={this.state.viewerNestedClassname}>
-          {!this.state.infoAndSidebarViewType
-            ? [
-                <ViewerInfo key="viewer-info" />,
-                this.state.pagePlaylistLoaded ? (
-                  <ViewerSidebar
-                    key="viewer-sidebar"
-                    mediaId={MediaPageStore.get('media-id')}
-                    playlistData={MediaPageStore.get('playlist-data')}
-                  />
-                ) : null,
-              ]
-            : [
-                this.state.pagePlaylistLoaded ? (
-                  <ViewerSidebar
-                    key="viewer-sidebar"
-                    mediaId={MediaPageStore.get('media-id')}
-                    playlistData={MediaPageStore.get('playlist-data')}
-                  />
-                ) : null,
-                <ViewerInfo key="viewer-info" />,
-              ]}
-        </div>
-      </div>
-    );
-  }
+    pageContent() {
+        return this.state.mediaLoadFailed ? (
+            <div className={this.state.viewerClassname}>
+                <ViewerError />
+            </div>
+        ) : (
+            <div className={this.state.viewerClassname}>
+                <div className="viewer-container" key="viewer-container">
+                    {this.state.mediaLoaded ? this.viewerContainerContent() : null}
+                </div>
+                <div key="viewer-section-nested" className={this.state.viewerNestedClassname}>
+                    {!this.state.infoAndSidebarViewType
+                        ? [
+                              <ViewerInfo key="viewer-info" />,
+                              !inEmbeddedApp() && this.state.pagePlaylistLoaded ? (
+                                  <ViewerSidebar
+                                      key="viewer-sidebar"
+                                      mediaId={MediaPageStore.get('media-id')}
+                                      playlistData={MediaPageStore.get('playlist-data')}
+                                  />
+                              ) : null,
+                          ]
+                        : [
+                              !inEmbeddedApp() && this.state.pagePlaylistLoaded ? (
+                                  <ViewerSidebar
+                                      key="viewer-sidebar"
+                                      mediaId={MediaPageStore.get('media-id')}
+                                      playlistData={MediaPageStore.get('playlist-data')}
+                                  />
+                              ) : null,
+                              <ViewerInfo key="viewer-info" />,
+                          ]}
+                </div>
+            </div>
+        );
+    }
 }

frontend/src/static/js/pages/_VideoMediaPage.js

@@ -2,6 +2,7 @@ import React from 'react';
 // FIXME: 'VideoViewerStore' is used only in case of video media, but is included in every media page code.
 import { PageStore, MediaPageStore, VideoViewerStore } from '../utils/stores/';
 import { MediaPageActions } from '../utils/actions/';
+import { inEmbeddedApp } from '../utils/helpers/';
 import ViewerInfoVideo from '../components/media-page/ViewerInfoVideo';
 import ViewerError from '../components/media-page/ViewerError';
 import ViewerSidebar from '../components/media-page/ViewerSidebar';
@@ -11,118 +12,119 @@ import _MediaPage from './_MediaPage';
 const wideLayoutBreakpoint = 1216;
 
 export class _VideoMediaPage extends Page {
-  constructor(props) {
-    super(props, 'media');
+    constructor(props) {
+        super(props, 'media');
 
-    this.state = {
-      wideLayout: wideLayoutBreakpoint <= window.innerWidth,
-      mediaLoaded: false,
-      mediaLoadFailed: false,
-      isVideoMedia: false,
-      theaterMode: false, // FIXME: Used only in case of video media, but is included in every media page code.
-      pagePlaylistLoaded: false,
-      pagePlaylistData: MediaPageStore.get('playlist-data'),
-    };
+        this.state = {
+            wideLayout: wideLayoutBreakpoint <= window.innerWidth,
+            mediaLoaded: false,
+            mediaLoadFailed: false,
+            isVideoMedia: false,
+            theaterMode: false, // FIXME: Used only in case of video media, but is included in every media page code.
+            pagePlaylistLoaded: false,
+            pagePlaylistData: MediaPageStore.get('playlist-data'),
+        };
 
-    this.onWindowResize = this.onWindowResize.bind(this);
-    this.onMediaLoad = this.onMediaLoad.bind(this);
-    this.onMediaLoadError = this.onMediaLoadError.bind(this);
-    this.onPagePlaylistLoad = this.onPagePlaylistLoad.bind(this);
+        this.onWindowResize = this.onWindowResize.bind(this);
+        this.onMediaLoad = this.onMediaLoad.bind(this);
+        this.onMediaLoadError = this.onMediaLoadError.bind(this);
+        this.onPagePlaylistLoad = this.onPagePlaylistLoad.bind(this);
 
-    MediaPageStore.on('loaded_media_data', this.onMediaLoad);
-    MediaPageStore.on('loaded_media_error', this.onMediaLoadError);
-    MediaPageStore.on('loaded_page_playlist_data', this.onPagePlaylistLoad);
-  }
-
-  componentDidMount() {
-    MediaPageActions.loadMediaData();
-    // FIXME: Is not neccessary to check on every window dimension for changes...
-    PageStore.on('window_resize', this.onWindowResize);
-  }
-
-  onWindowResize() {
-    this.setState({
-      wideLayout: wideLayoutBreakpoint <= window.innerWidth,
-    });
-  }
-
-  onPagePlaylistLoad() {
-    this.setState({
-      pagePlaylistLoaded: true,
-      pagePlaylistData: MediaPageStore.get('playlist-data'),
-    });
-  }
-
-  onMediaLoad() {
-    const isVideoMedia = 'video' === MediaPageStore.get('media-type') || 'audio' === MediaPageStore.get('media-type');
-
-    if (isVideoMedia) {
-      this.onViewerModeChange = this.onViewerModeChange.bind(this);
-
-      VideoViewerStore.on('changed_viewer_mode', this.onViewerModeChange);
-
-      this.setState({
-        mediaLoaded: true,
-        isVideoMedia: isVideoMedia,
-        theaterMode: VideoViewerStore.get('in-theater-mode'),
-      });
-    } else {
-      this.setState({
-        mediaLoaded: true,
-        isVideoMedia: isVideoMedia,
-      });
+        MediaPageStore.on('loaded_media_data', this.onMediaLoad);
+        MediaPageStore.on('loaded_media_error', this.onMediaLoadError);
+        MediaPageStore.on('loaded_page_playlist_data', this.onPagePlaylistLoad);
     }
-  }
 
-  onViewerModeChange() {
-    this.setState({ theaterMode: VideoViewerStore.get('in-theater-mode') });
-  }
+    componentDidMount() {
+        MediaPageActions.loadMediaData();
+        // FIXME: Is not neccessary to check on every window dimension for changes...
+        PageStore.on('window_resize', this.onWindowResize);
+    }
 
-  onMediaLoadError(a) {
-    this.setState({ mediaLoadFailed: true });
-  }
+    onWindowResize() {
+        this.setState({
+            wideLayout: wideLayoutBreakpoint <= window.innerWidth,
+        });
+    }
 
-  pageContent() {
-    const viewerClassname = 'cf viewer-section' + (this.state.theaterMode ? ' theater-mode' : ' viewer-wide');
-    const viewerNestedClassname = 'viewer-section-nested' + (this.state.theaterMode ? ' viewer-section' : '');
+    onPagePlaylistLoad() {
+        this.setState({
+            pagePlaylistLoaded: true,
+            pagePlaylistData: MediaPageStore.get('playlist-data'),
+        });
+    }
 
-    return this.state.mediaLoadFailed ? (
-      <div className={viewerClassname}>
-        <ViewerError />
-      </div>
-    ) : (
-      <div className={viewerClassname}>
-        {[
-          <div className="viewer-container" key="viewer-container">
-            {this.state.mediaLoaded && this.state.pagePlaylistLoaded
-              ? this.viewerContainerContent(MediaPageStore.get('media-data'))
-              : null}
-          </div>,
-          <div key="viewer-section-nested" className={viewerNestedClassname}>
-            {!this.state.wideLayout || (this.state.isVideoMedia && this.state.theaterMode)
-              ? [
-                  <ViewerInfoVideo key="viewer-info" />,
-                  this.state.pagePlaylistLoaded ? (
-                    <ViewerSidebar
-                      key="viewer-sidebar"
-                      mediaId={MediaPageStore.get('media-id')}
-                      playlistData={MediaPageStore.get('playlist-data')}
-                    />
-                  ) : null,
-                ]
-              : [
-                  this.state.pagePlaylistLoaded ? (
-                    <ViewerSidebar
-                      key="viewer-sidebar"
-                      mediaId={MediaPageStore.get('media-id')}
-                      playlistData={MediaPageStore.get('playlist-data')}
-                    />
-                  ) : null,
-                  <ViewerInfoVideo key="viewer-info" />,
+    onMediaLoad() {
+        const isVideoMedia =
+            'video' === MediaPageStore.get('media-type') || 'audio' === MediaPageStore.get('media-type');
+
+        if (isVideoMedia) {
+            this.onViewerModeChange = this.onViewerModeChange.bind(this);
+
+            VideoViewerStore.on('changed_viewer_mode', this.onViewerModeChange);
+
+            this.setState({
+                mediaLoaded: true,
+                isVideoMedia: isVideoMedia,
+                theaterMode: VideoViewerStore.get('in-theater-mode'),
+            });
+        } else {
+            this.setState({
+                mediaLoaded: true,
+                isVideoMedia: isVideoMedia,
+            });
+        }
+    }
+
+    onViewerModeChange() {
+        this.setState({ theaterMode: VideoViewerStore.get('in-theater-mode') });
+    }
+
+    onMediaLoadError(a) {
+        this.setState({ mediaLoadFailed: true });
+    }
+
+    pageContent() {
+        const viewerClassname = 'cf viewer-section' + (this.state.theaterMode ? ' theater-mode' : ' viewer-wide');
+        const viewerNestedClassname = 'viewer-section-nested' + (this.state.theaterMode ? ' viewer-section' : '');
+
+        return this.state.mediaLoadFailed ? (
+            <div className={viewerClassname}>
+                <ViewerError />
+            </div>
+        ) : (
+            <div className={viewerClassname}>
+                {[
+                    <div className="viewer-container" key="viewer-container">
+                        {this.state.mediaLoaded && this.state.pagePlaylistLoaded
+                            ? this.viewerContainerContent(MediaPageStore.get('media-data'))
+                            : null}
+                    </div>,
+                    <div key="viewer-section-nested" className={viewerNestedClassname}>
+                        {!this.state.wideLayout || (this.state.isVideoMedia && this.state.theaterMode)
+                            ? [
+                                  <ViewerInfoVideo key="viewer-info" />,
+                                  !inEmbeddedApp() && this.state.pagePlaylistLoaded ? (
+                                      <ViewerSidebar
+                                          key="viewer-sidebar"
+                                          mediaId={MediaPageStore.get('media-id')}
+                                          playlistData={MediaPageStore.get('playlist-data')}
+                                      />
+                                  ) : null,
+                              ]
+                            : [
+                                  !inEmbeddedApp() && this.state.pagePlaylistLoaded ? (
+                                      <ViewerSidebar
+                                          key="viewer-sidebar"
+                                          mediaId={MediaPageStore.get('media-id')}
+                                          playlistData={MediaPageStore.get('playlist-data')}
+                                      />
+                                  ) : null,
+                                  <ViewerInfoVideo key="viewer-info" />,
+                              ]}
+                    </div>,
                 ]}
-          </div>,
-        ]}
-      </div>
-    );
-  }
+            </div>
+        );
+    }
 }

frontend/src/static/js/utils/contexts/LayoutContext.js

@@ -1,101 +1,103 @@
-import React, { createContext, useContext, useEffect, useState } from 'react';
+import React, { createContext, useContext, useEffect, useMemo, useState } from 'react';
 import { BrowserCache } from '../classes/';
 import { PageStore } from '../stores/';
-import { addClassname, removeClassname } from '../helpers/';
+import { addClassname, removeClassname, inEmbeddedApp } from '../helpers/';
 import SiteContext from './SiteContext';
 
 let slidingSidebarTimeout;
 
 function onSidebarVisibilityChange(visibleSidebar) {
-  clearTimeout(slidingSidebarTimeout);
+    clearTimeout(slidingSidebarTimeout);
 
-  addClassname(document.body, 'sliding-sidebar');
-
-  slidingSidebarTimeout = setTimeout(function () {
-    if ('media' === PageStore.get('current-page')) {
-      if (visibleSidebar) {
-        addClassname(document.body, 'overflow-hidden');
-      } else {
-        removeClassname(document.body, 'overflow-hidden');
-      }
-    } else {
-      if (!visibleSidebar || 767 < window.innerWidth) {
-        removeClassname(document.body, 'overflow-hidden');
-      } else {
-        addClassname(document.body, 'overflow-hidden');
-      }
-    }
-
-    if (visibleSidebar) {
-      addClassname(document.body, 'visible-sidebar');
-    } else {
-      removeClassname(document.body, 'visible-sidebar');
-    }
+    addClassname(document.body, 'sliding-sidebar');
 
     slidingSidebarTimeout = setTimeout(function () {
-      slidingSidebarTimeout = null;
-      removeClassname(document.body, 'sliding-sidebar');
-    }, 220);
-  }, 20);
+        if ('media' === PageStore.get('current-page')) {
+            if (visibleSidebar) {
+                addClassname(document.body, 'overflow-hidden');
+            } else {
+                removeClassname(document.body, 'overflow-hidden');
+            }
+        } else {
+            if (!visibleSidebar || 767 < window.innerWidth) {
+                removeClassname(document.body, 'overflow-hidden');
+            } else {
+                addClassname(document.body, 'overflow-hidden');
+            }
+        }
+
+        if (visibleSidebar) {
+            addClassname(document.body, 'visible-sidebar');
+        } else {
+            removeClassname(document.body, 'visible-sidebar');
+        }
+
+        slidingSidebarTimeout = setTimeout(function () {
+            slidingSidebarTimeout = null;
+            removeClassname(document.body, 'sliding-sidebar');
+        }, 220);
+    }, 20);
 }
 
 export const LayoutContext = createContext();
 
 export const LayoutProvider = ({ children }) => {
-  const site = useContext(SiteContext);
-  const cache = new BrowserCache('MediaCMS[' + site.id + '][layout]', 86400);
+    const site = useContext(SiteContext);
+    const cache = new BrowserCache('MediaCMS[' + site.id + '][layout]', 86400);
 
-  const enabledSidebar = !!(document.getElementById('app-sidebar') || document.querySelector('.page-sidebar'));
+    const isMediaPage = useMemo(() => PageStore.get('current-page') === 'media', []);
+    const isEmbeddedApp = useMemo(() => inEmbeddedApp(), []);
 
-  const [visibleSidebar, setVisibleSidebar] = useState(cache.get('visible-sidebar'));
-  const [visibleMobileSearch, setVisibleMobileSearch] = useState(false);
+    const enabledSidebar = Boolean(document.getElementById('app-sidebar') || document.querySelector('.page-sidebar'));
 
-  const toggleMobileSearch = () => {
-    setVisibleMobileSearch(!visibleMobileSearch);
-  };
+    const [visibleSidebar, setVisibleSidebar] = useState(cache.get('visible-sidebar'));
+    const [visibleMobileSearch, setVisibleMobileSearch] = useState(false);
 
-  const toggleSidebar = () => {
-    const newval = !visibleSidebar;
-    onSidebarVisibilityChange(newval);
-    setVisibleSidebar(newval);
-  };
+    const toggleMobileSearch = () => {
+        setVisibleMobileSearch(!visibleMobileSearch);
+    };
 
-  useEffect(() => {
-    if (visibleSidebar) {
-      addClassname(document.body, 'visible-sidebar');
-    } else {
-      removeClassname(document.body, 'visible-sidebar');
-    }
-    if ('media' !== PageStore.get('current-page') && 1023 < window.innerWidth) {
-      cache.set('visible-sidebar', visibleSidebar);
-    }
-  }, [visibleSidebar]);
+    const toggleSidebar = () => {
+        const newval = !visibleSidebar;
+        onSidebarVisibilityChange(newval);
+        setVisibleSidebar(newval);
+    };
 
-  useEffect(() => {
-    PageStore.once('page_init', () => {
-      if ('media' === PageStore.get('current-page')) {
-        setVisibleSidebar(false);
-        removeClassname(document.body, 'visible-sidebar');
-      }
-    });
+    useEffect(() => {
+        if (!isEmbeddedApp && visibleSidebar) {
+            addClassname(document.body, 'visible-sidebar');
+        } else {
+            removeClassname(document.body, 'visible-sidebar');
+        }
 
-    setVisibleSidebar(
-      'media' !== PageStore.get('current-page') &&
-        1023 < window.innerWidth &&
-        (null === visibleSidebar || visibleSidebar)
-    );
-  }, []);
+        if (!isEmbeddedApp && !isMediaPage && 1023 < window.innerWidth) {
+            cache.set('visible-sidebar', visibleSidebar);
+        }
+    }, [isEmbeddedApp, isMediaPage, visibleSidebar]);
 
-  const value = {
-    enabledSidebar,
-    visibleSidebar,
-    setVisibleSidebar,
-    visibleMobileSearch,
-    toggleMobileSearch,
-    toggleSidebar,
-  };
+    useEffect(() => {
+        PageStore.once('page_init', () => {
+            if (isEmbeddedApp || isMediaPage) {
+                setVisibleSidebar(false);
+                removeClassname(document.body, 'visible-sidebar');
+            }
+        });
 
-  return <LayoutContext.Provider value={value}>{children}</LayoutContext.Provider>;
+        setVisibleSidebar(
+            !isEmbeddedApp && !isMediaPage && 1023 < window.innerWidth && (null === visibleSidebar || visibleSidebar)
+        );
+    }, []);
+
+    const value = {
+        enabledSidebar,
+        visibleSidebar,
+        setVisibleSidebar,
+        visibleMobileSearch,
+        toggleMobileSearch,
+        toggleSidebar,
+    };
+
+    return <LayoutContext.Provider value={value}>{children}</LayoutContext.Provider>;
 };
 
 export const LayoutConsumer = LayoutContext.Consumer;

frontend/src/static/js/utils/helpers/embeddedApp.ts

@@ -0,0 +1,51 @@
+export function inEmbeddedApp() {
+    try {
+        const params = new URL(globalThis.location.href).searchParams;
+        const mode = params.get('mode');
+
+        if (mode === 'lms_embed_mode') {
+            sessionStorage.setItem('lms_embed_mode', 'true');
+            return true;
+        }
+
+        if (mode === 'standard') {
+            sessionStorage.removeItem('lms_embed_mode');
+            return false;
+        }
+
+        return sessionStorage.getItem('lms_embed_mode') === 'true';
+    } catch (e) {
+        return false;
+    }
+}
+
+export function isSelectMediaMode() {
+    try {
+        const params = new URL(globalThis.location.href).searchParams;
+        const action = params.get('action');
+
+        return action === 'select_media';
+    } catch (e) {
+        return false;
+    }
+}
+
+export function inSelectMediaEmbedMode() {
+    return inEmbeddedApp() && isSelectMediaMode();
+}
+
+export function getLtiContextId(): string | null {
+    try {
+        const params = new URL(globalThis.location.href).searchParams;
+        const contextId = params.get('lti_context_id');
+
+        if (contextId) {
+            sessionStorage.setItem('lti_context_id', contextId);
+            return contextId;
+        }
+
+        return sessionStorage.getItem('lti_context_id');
+    } catch (e) {
+        return null;
+    }
+}

frontend/src/static/js/utils/helpers/index.js

@@ -14,3 +14,4 @@ export * from './quickSort';
 export * from './requests';
 export { translateString } from './translate';
 export { replaceString } from './replacementStrings';
+export { inEmbeddedApp, inSelectMediaEmbedMode, isSelectMediaMode } from './embeddedApp';

frontend/src/static/js/utils/renderer.js

@@ -3,64 +3,83 @@ import ReactDOM from 'react-dom';
 import { ThemeProvider } from './contexts/ThemeContext';
 import { LayoutProvider } from './contexts/LayoutContext';
 import { UserProvider } from './contexts/UserContext';
+import { inEmbeddedApp } from './helpers';
 
 const AppProviders = ({ children }) => (
-  <LayoutProvider>
-    <ThemeProvider>
-      <UserProvider>{children}</UserProvider>
-    </ThemeProvider>
-  </LayoutProvider>
+    <LayoutProvider>
+        <ThemeProvider>
+            <UserProvider>{children}</UserProvider>
+        </ThemeProvider>
+    </LayoutProvider>
 );
 
 import { PageHeader, PageSidebar } from '../components/page-layout';
 
 export function renderPage(idSelector, PageComponent) {
-  const appHeader = document.getElementById('app-header');
-  const appSidebar = document.getElementById('app-sidebar');
-  const appContent = idSelector ? document.getElementById(idSelector) : undefined;
+    if (inEmbeddedApp()) {
+        globalThis.document.body.classList.add('embedded-app');
+        globalThis.document.body.classList.remove('visible-sidebar');
 
-  if (appContent && PageComponent) {
-    ReactDOM.render(
-      <AppProviders>
-        {appHeader ? ReactDOM.createPortal(<PageHeader />, appHeader) : null}
-        {appSidebar ? ReactDOM.createPortal(<PageSidebar />, appSidebar) : null}
-        <PageComponent />
-      </AppProviders>,
-      appContent
-    );
-  } else if (appHeader && appSidebar) {
-    ReactDOM.render(
-      <AppProviders>
-        {ReactDOM.createPortal(<PageHeader />, appHeader)}
-        <PageSidebar />
-      </AppProviders>,
-      appSidebar
-    );
-  } else if (appHeader) {
-    ReactDOM.render(
-      <LayoutProvider>
-        <ThemeProvider>
-          <UserProvider>
-            <PageHeader />
-          </UserProvider>
-        </ThemeProvider>
-      </LayoutProvider>,
-      appSidebar
-    );
-  } else if (appSidebar) {
-    ReactDOM.render(
-      <AppProviders>
-        <PageSidebar />
-      </AppProviders>,
-      appSidebar
-    );
-  }
+        const appContent = idSelector ? document.getElementById(idSelector) : undefined;
+
+        if (appContent && PageComponent) {
+            ReactDOM.render(
+                <AppProviders>
+                    <PageComponent />
+                </AppProviders>,
+                appContent
+            );
+        }
+
+        return;
+    }
+
+    const appContent = idSelector ? document.getElementById(idSelector) : undefined;
+    const appHeader = document.getElementById('app-header');
+    const appSidebar = document.getElementById('app-sidebar');
+
+    if (appContent && PageComponent) {
+        ReactDOM.render(
+            <AppProviders>
+                {appHeader ? ReactDOM.createPortal(<PageHeader />, appHeader) : null}
+                {appSidebar ? ReactDOM.createPortal(<PageSidebar />, appSidebar) : null}
+                <PageComponent />
+            </AppProviders>,
+            appContent
+        );
+    } else if (appHeader && appSidebar) {
+        ReactDOM.render(
+            <AppProviders>
+                {ReactDOM.createPortal(<PageHeader />, appHeader)}
+                <PageSidebar />
+            </AppProviders>,
+            appSidebar
+        );
+    } else if (appHeader) {
+        ReactDOM.render(
+            <LayoutProvider>
+                <ThemeProvider>
+                    <UserProvider>
+                        <PageHeader />
+                    </UserProvider>
+                </ThemeProvider>
+            </LayoutProvider>,
+            appSidebar
+        );
+    } else if (appSidebar) {
+        ReactDOM.render(
+            <AppProviders>
+                <PageSidebar />
+            </AppProviders>,
+            appSidebar
+        );
+    }
 }
 
 export function renderEmbedPage(idSelector, PageComponent) {
-  const appContent = idSelector ? document.getElementById(idSelector) : undefined;
+    const appContent = idSelector ? document.getElementById(idSelector) : undefined;
 
-  if (appContent && PageComponent) {
-    ReactDOM.render(<PageComponent />, appContent);
-  }
+    if (appContent && PageComponent) {
+        ReactDOM.render(<PageComponent />, appContent);
+    }
 }

frontend/src/static/js/utils/stores/MediaPageStore.js

@@ -195,13 +195,18 @@ class MediaPageStore extends EventEmitter {
       this.emit('loaded_media_data');
     }
 
-    this.loadPlaylists();
-    if (MediaCMS.features.media.actions.comment_mention === true) {
-      this.loadUsers();
-    }
+    // Skip loading playlists and comments when in embed mode (to reduce API calls)
+    const isEmbedMode = window.location.pathname.startsWith('/embed');
 
-    if (this.mediacms_config.member.can.readComment) {
-      this.loadComments();
+    if (!isEmbedMode) {
+      this.loadPlaylists();
+      if (MediaCMS.features.media.actions.comment_mention === true) {
+        this.loadUsers();
+      }
+
+      if (this.mediacms_config.member.can.readComment) {
+        this.loadComments();
+      }
     }
   }
 

lms-plugins/mediacms-moodle/Gruntfile.js

@@ -0,0 +1,49 @@
+module.exports = function(grunt) {
+    var path = require('path');
+
+    grunt.initConfig({
+        babel: {
+            options: {
+                sourceMap: true,
+                presets: ['@babel/preset-env'],
+                plugins: ['@babel/plugin-transform-modules-amd'],
+                moduleIds: true,
+                getModuleId: function(moduleName) {
+                    // moduleName is the absolute or relative path to the file.
+                    // We need to convert 'tiny/mediacms/amd/src/filename' to 'tiny_mediacms/filename'
+                    var filename = path.basename(moduleName);
+                    return 'tiny_mediacms/' + filename;
+                }
+            },
+            dist: {
+                files: [{
+                    expand: true,
+                    cwd: 'tiny/mediacms/amd/src',
+                    src: ['*.js'],
+                    dest: 'tiny/mediacms/amd/build',
+                    ext: '.js'
+                }]
+            }
+        },
+        uglify: {
+            options: {
+                sourceMap: true,
+                output: { comments: false }
+            },
+            dist: {
+                files: [{
+                    expand: true,
+                    cwd: 'tiny/mediacms/amd/build',
+                    src: ['*.js', '!*.min.js'],
+                    dest: 'tiny/mediacms/amd/build',
+                    ext: '.min.js'
+                }]
+            }
+        }
+    });
+
+    grunt.loadNpmTasks('grunt-babel');
+    grunt.loadNpmTasks('grunt-contrib-uglify');
+
+    grunt.registerTask('default', ['babel', 'uglify']);
+};

lms-plugins/mediacms-moodle/INSTALL.txt

@@ -0,0 +1,72 @@
+================================================================================
+MediaCMS Moodle Plugin Suite v1.0.0
+Installation Guide
+================================================================================
+
+Requirements
+------------
+- Moodle 4.5 or later
+- MediaCMS instance
+- MediaCMS set as External Tool
+
+
+Installation
+------------------
+
+1. Extract zip file to Moodle root public directory:
+
+   cd /var/www/moodle/public
+   unzip mediacms-moodle-v1.0.0.zip
+
+   This will place files in:
+   - filter/mediacms/
+   - lib/editor/tiny/plugins/mediacms/
+
+2. Set permissions
+   chown -R www-data:www-data filter/mediacms
+   chown -R www-data:www-data lib/editor/tiny/plugins/mediacms
+
+3. Install through Moodle
+   - Log in as Administrator
+   - Go to: Site Administration → Notifications
+   - Click "Upgrade Moodle database now"
+   - Both plugins will be installed automatically
+   - Set the MediaCMS tool under the LTI Tool
+
+4. Make sure Filter is enabled
+   - As Administrator, visit Plugins, 'Manage Filters', find MediaCMS filter and enable it.
+   Then place it at the top of the filter. This is important, otherwise embeds won't load.
+
+5. Enter 'My Media' on top navigation.
+   - Log in as Administrator
+   - Go to: Site Administration → Appearance → Advanced Theme settings -> Custom menu items:
+      add: My Media|/filter/mediacms/my_media.php
+   Notes: User needs to be enrolled on one course at least, otherwise visiting My Media won't show anything.
+   The plugin needs to use the ID of an existing course to the 'My Media' page and thus it is going to use it
+   and create a 'my media' page on the course, if it doesn't already exist. This is happening automatically the
+   first time a user visits the global 'my media' link, if a 'my media' page activity does not exist in the course, the
+   plugin will create it. If you don't want the 'my media' page to show up on the course, you can place it to a hidden part
+   Create a part (eg 'Hidden Links'), select the Edit options (three vertical dots) and Hide it.
+   Then place the 'My Media' activity there, select the three dots for the activity, Availability, and set "Make available but don't show on course page: Available to students if you provide a link."
+   This option won't appear if the part is not hidden, so first you want to create the part, hide it, and then edit the setting for 'my media'
+
+   To summarize, for the 'my media' global link on top, a 'my media' is also required in each course, and you can either
+   create it (as MediaCMS activity with any name) or let the first user that visits the global 'my media' have it created automatically.
+   If you don't want this activity to be visible in the course, place it under a hidden part and set it's availability as "Make available but don't show on course page", which is only possible for items inside hidden parts.
+   
+
+
+What to expect
+-------
+
+1. Create a test course
+2. Add a page or label
+3. Click MediaCMS button in TinyMCE editor
+4. Try inserting from video library or pasting a URL
+
+SUPPORT
+-------
+Issues: https://github.com/mediacms-io/mediacms/issues
+Docs: https://docs.mediacms.io
+
+================================================================================

lms-plugins/mediacms-moodle/README.md

@@ -0,0 +1,90 @@
+# MediaCMS for Moodle
+
+**Version:** 1.0.0 | **Release Date:** 2026-02-12 | **Moodle:** 4.5+
+
+This package provides complete MediaCMS integration for Moodle, consisting of two plugins that work together with **unified settings**:
+
+1.  **Filter Plugin (filter_mediacms):**
+    *   Handles LTI 1.3 authentication and secure video launches
+    *   Auto-converts MediaCMS URLs to embedded players
+    *   **Provides core settings** (MediaCMS URL, LTI Tool ID) used by both plugins
+    *   **Location:** `filter/mediacms`
+
+2.  **Editor Plugin (tiny_mediacms):**
+    *   Adds MediaCMS button to TinyMCE editor
+    *   Browse authenticated video library via LTI Deep Linking
+    *   Configure embed options (dimensions, display, start time)
+    *   **Reads core settings** from filter plugin
+    *   **Location:** `lib/editor/tiny/plugins/mediacms`
+
+## Installation
+
+This package is distributed as a single repository but contains two distinct Moodle plugins that must be installed in their respective directories.
+
+### 1. Copy Files
+
+Copy the directories into your Moodle installation as follows (example assuming Moodle is at `/var/www/moodle/public`):
+
+*   Copy `filter/mediacms` to `/var/www/moodle/public/filter/mediacms`.
+*   Copy `tiny/mediacms` to `/var/www/moodle/public/lib/editor/tiny/plugins/mediacms`.
+
+### 2. Set Permissions
+
+Ensure the web server user (typically `www-data`) has ownership of the new directories:
+
+```bash
+# Example for Ubuntu/Debian systems
+chown -R www-data:www-data /var/www/moodle/public/filter/mediacms
+chown -R www-data:www-data /var/www/moodle/public/lib/editor/tiny/plugins/mediacms
+chmod -R 755 /var/www/moodle/public/filter/mediacms
+chmod -R 755 /var/www/moodle/public/lib/editor/tiny/plugins/mediacms
+```
+
+### 3. Install Plugins
+
+1.  Log in to Moodle as an Administrator.
+2.  Go to **Site administration > Notifications**.
+3.  Follow the prompts to upgrade the database and install the new plugins.
+
+## Configuration
+
+### Step 1: Core Settings (Required) - Configure Once
+
+Go to **Site administration > Plugins > Filters > MediaCMS** (Settings)
+
+*   **MediaCMS URL:** Enter your MediaCMS instance URL (e.g., `https://lti.mediacms.io`)
+*   **LTI Tool:** Select the External Tool configuration for MediaCMS
+    *   *First create an LTI 1.3 tool at: Site administration > Plugins > Activity modules > External tool > Manage tools*
+
+> **✨ Note:** These core settings are automatically used by **both** the filter and TinyMCE editor plugin.
+
+### Step 2: Enable Filter
+
+1.  Go to **Site administration > Plugins > Filters > Manage filters**
+2.  Set **MediaCMS** to "On"
+
+### Step 3: Configure Auto-convert Defaults (Optional)
+
+Go to **Site administration > Plugins > Text editors > TinyMCE editor > MediaCMS settings**
+
+Configure default display options for auto-converted URLs:
+*   Show video title
+*   Link video title
+*   Show related videos
+*   Show user avatar
+
+> **Note:** The core settings (URL, LTI Tool) are managed in the filter plugin settings.
+
+## Usage
+
+### For Teachers (Editor)
+
+1.  In any text editor (TinyMCE), click the **MediaCMS** icon (or "Insert MediaCMS Media" from the Insert menu).
+2.  You can:
+    *   **Paste a URL:** Paste a View or Embed URL.
+    *   **Video Library:** Click the "Video Library" tab to browse and select videos (requires LTI Deep Linking configuration).
+3.  The video will appear as a placeholder or iframe in the editor.
+
+### For Students (Display)
+
+When content is viewed, the Filter will ensure the video is loaded securely via LTI 1.3, authenticating the user with MediaCMS automatically.

lms-plugins/mediacms-moodle/build.sh

@@ -0,0 +1,89 @@
+#!/bin/bash
+
+# MediaCMS Moodle Plugin Suite - Build Script
+# Creates distributable ZIP package
+
+set -e  # Exit on error
+
+# Colors for output
+RED='\033[0;31m'
+GREEN='\033[0;32m'
+YELLOW='\033[1;33m'
+NC='\033[0m' # No Color
+
+echo -e "${GREEN}======================================${NC}"
+echo -e "${GREEN}MediaCMS Moodle Plugin Suite Builder${NC}"
+echo -e "${GREEN}======================================${NC}"
+echo
+
+# Configuration
+VERSION="1.0.0"
+BUILD_DATE=$(date +%Y%m%d)
+PACKAGE_NAME="mediacms-moodle-v${VERSION}"
+DIST_DIR="dist"
+BUILD_DIR="${DIST_DIR}/${PACKAGE_NAME}"
+
+# Create clean dist directory
+echo -e "${YELLOW}→${NC} Cleaning dist directory..."
+rm -rf "${DIST_DIR}"
+mkdir -p "${BUILD_DIR}"
+
+# Copy filter plugin
+echo -e "${YELLOW}→${NC} Copying filter plugin..."
+mkdir -p "${BUILD_DIR}/filter"
+cp -r filter/mediacms "${BUILD_DIR}/filter/"
+
+# Copy TinyMCE plugin
+echo -e "${YELLOW}→${NC} Copying TinyMCE plugin..."
+mkdir -p "${BUILD_DIR}/lib/editor/tiny/plugins"
+cp -r tiny/mediacms "${BUILD_DIR}/lib/editor/tiny/plugins/"
+
+# Copy documentation
+echo -e "${YELLOW}→${NC} Copying documentation..."
+cp README.md "${BUILD_DIR}/filter/mediacms/"
+cp INSTALL.txt "${BUILD_DIR}/filter/mediacms/"
+
+# Clean up development files
+echo -e "${YELLOW}→${NC} Removing development files..."
+find "${BUILD_DIR}" -type d -name "node_modules" -exec rm -rf {} + 2>/dev/null || true
+find "${BUILD_DIR}" -type f -name ".DS_Store" -delete 2>/dev/null || true
+find "${BUILD_DIR}" -type f -name "*.log" -delete 2>/dev/null || true
+find "${BUILD_DIR}" -type d -name ".git" -exec rm -rf {} + 2>/dev/null || true
+find "${BUILD_DIR}" -type f -name ".gitignore" -delete 2>/dev/null || true
+
+# Remove AMD source files (keep only built versions)
+echo -e "${YELLOW}→${NC} Cleaning AMD source files..."
+find "${BUILD_DIR}/lib/editor/tiny/plugins/mediacms/amd" -type f -name "*.js" ! -name "*-lazy.js" ! -path "*/build/*" -delete 2>/dev/null || true
+
+# Create ZIP archive
+echo -e "${YELLOW}→${NC} Creating ZIP archive..."
+cd "${BUILD_DIR}"
+zip -r "../${PACKAGE_NAME}.zip" . -q
+cd ../..
+
+# Create checksum
+echo -e "${YELLOW}→${NC} Generating checksum..."
+cd "${DIST_DIR}"
+sha256sum "${PACKAGE_NAME}.zip" > "${PACKAGE_NAME}.zip.sha256"
+cd ..
+
+# Display results
+ZIP_SIZE=$(du -h "${DIST_DIR}/${PACKAGE_NAME}.zip" | cut -f1)
+echo
+echo -e "${GREEN}✓ Build complete!${NC}"
+echo
+echo "Package: ${DIST_DIR}/${PACKAGE_NAME}.zip"
+echo "Size: ${ZIP_SIZE}"
+echo "Checksum: ${DIST_DIR}/${PACKAGE_NAME}.zip.sha256"
+echo
+echo -e "${YELLOW}Contents:${NC}"
+echo "  - filter/mediacms/ (includes docs)"
+echo "  - lib/editor/tiny/plugins/mediacms/"
+echo
+echo -e "${GREEN}Ready for distribution!${NC}"
+echo
+
+# Show checksum
+echo -e "${YELLOW}SHA256 Checksum:${NC}"
+cat "${DIST_DIR}/${PACKAGE_NAME}.zip.sha256"
+echo

lms-plugins/mediacms-moodle/filter/mediacms/classes/hook_listener.php

@@ -0,0 +1,49 @@
+<?php
+/**
+ * Hook listener for filter_mediacms navigation hooks (Moodle 4.3+)
+ *
+ * @package    filter_mediacms
+ * @copyright  2026 MediaCMS
+ * @license    http://www.gnu.org/copyleft/gpl.html GNU GPL v3 or later
+ */
+
+namespace filter_mediacms;
+
+/**
+ * Extends the primary (top) navigation bar with a My Media link.
+ */
+class hook_listener {
+
+    /**
+     * Called by the \core\hook\navigation\primary_extend hook.
+     * Adds the My Media link to the primary nav bar when placement = 'top'.
+     */
+    public static function extend_primary_navigation(
+        \core\hook\navigation\primary_extend $hook
+    ): void {
+        $placement = get_config('filter_mediacms', 'mymedia_placement');
+        if ($placement !== 'top') {
+            return;
+        }
+
+        if (!isloggedin() || isguestuser()) {
+            return;
+        }
+
+        $url  = new \moodle_url('/filter/mediacms/my_media.php');
+        $node = \navigation_node::create(
+            get_string('mymedia', 'filter_mediacms'),
+            $url,
+            \navigation_node::TYPE_CUSTOM,
+            null,
+            'mediacms_mymedia',
+            new \pix_icon('i/media', '')
+        );
+
+        $primarynav = $hook->get_primarynav();
+        if ($primarynav === null) {
+            return;
+        }
+        $primarynav->add_node($node);
+    }
+}

lms-plugins/mediacms-moodle/filter/mediacms/classes/privacy/provider.php

@@ -0,0 +1,10 @@
+<?php
+namespace filter_mediacms\privacy;
+
+defined('MOODLE_INTERNAL') || die();
+
+class provider implements \core_privacy\local\metadata\null_provider {
+    public static function get_reason(): string {
+        return 'privacy:metadata';
+    }
+}

lms-plugins/mediacms-moodle/filter/mediacms/classes/text_filter.php

@@ -0,0 +1,240 @@
+<?php
+
+namespace filter_mediacms;
+
+use moodle_url;
+use html_writer;
+
+defined('MOODLE_INTERNAL') || die();
+
+/**
+ * MediaCMS text filter.
+ *
+ * @package    filter_mediacms
+ * @copyright  2026 MediaCMS
+ * @license    http://www.gnu.org/copyleft/gpl.html GNU GPL v3 or later
+ */
+class text_filter extends \core_filters\text_filter {
+
+    /**
+     * Filter method.
+     *
+     * @param string $text The text to filter.
+     * @param array $options Filter options.
+     * @return string The filtered text.
+     */
+    public function filter($text, array $options = array()) {
+        if (!is_string($text) or empty($text)) {
+            return $text;
+        }
+
+        $mediacmsurl = get_config('filter_mediacms', 'mediacmsurl');
+        if (empty($mediacmsurl)) {
+            return $text;
+        }
+
+        $newtext = $text;
+
+        // 1. Handle [mediacms:TOKEN] tag
+        $pattern_tag = '/\[mediacms:([a-zA-Z0-9]+)\]/';
+        $newtext = preg_replace_callback($pattern_tag, [$this, 'callback_tag'], $newtext);
+
+        // 2. Auto-convert MediaCMS URLs to embedded players
+        // First, protect text-only links from being converted
+        // by temporarily replacing them with placeholders
+        $textlink_placeholders = [];
+        $textlink_pattern = '/<a\s+[^>]*data-mediacms-textlink=["\']true["\'][^>]*>.*?<\/a>/is';
+
+        $newtext = preg_replace_callback($textlink_pattern, function($matches) use (&$textlink_placeholders) {
+            $placeholder = '###MEDIACMS_TEXTLINK_' . count($textlink_placeholders) . '###';
+            $textlink_placeholders[$placeholder] = $matches[0];
+            return $placeholder;
+        }, $newtext);
+
+        // Regex for MediaCMS view URLs: https://domain/view?m=TOKEN
+        // We need to be careful to match the configured domain
+        $parsed_url = parse_url($mediacmsurl);
+        $host = preg_quote($parsed_url['host'] ?? '', '/');
+        $scheme = preg_quote($parsed_url['scheme'] ?? 'https', '/');
+
+        // Allow http or https, and optional path prefix
+        $path_prefix = preg_quote(rtrim($parsed_url['path'] ?? '', '/'), '/');
+
+        // Pattern: https://HOST/PREFIX/view?m=TOKEN
+        // Also handle /embed?m=TOKEN
+        $pattern_url = '/(' . $scheme . ':\/\/' . $host . $path_prefix . '\/(view|embed)\?m=([a-zA-Z0-9]+)(?:&[^\s<]*)?)/';
+
+        $newtext = preg_replace_callback($pattern_url, [$this, 'callback_url'], $newtext);
+
+        // Restore protected text-only links as modal launchers
+        foreach ($textlink_placeholders as $placeholder => $original) {
+            $newtext = str_replace($placeholder, $this->transform_textlink($original), $newtext);
+        }
+
+        return $newtext;
+    }
+
+    /**
+     * Callback for [mediacms:TOKEN]
+     */
+    public function callback_tag($matches) {
+        return $this->generate_iframe($matches[1], []);
+    }
+
+    /**
+     * Callback for URLs
+     */
+    public function callback_url($matches) {
+        // matches[0] is the full matched string
+        // matches[1] is full URL, matches[3] is token
+
+        // Check if this URL is inside a text-only link
+        // by looking at the context around the match
+        $fullmatch = $matches[0];
+
+        // If this is already inside an <a> tag with data-mediacms-textlink="true",
+        // return the original URL unchanged
+        // We'll check this in the main filter method instead
+
+        $token = $matches[3];
+
+        // Extract additional embed parameters from the URL
+        $embed_params = [];
+        $full_url = $matches[1];
+
+        // Decode HTML entities (&amp; -> &) before parsing
+        $full_url = html_entity_decode($full_url, ENT_QUOTES | ENT_HTML5);
+
+        $parsed_url = parse_url($full_url);
+
+        if (isset($parsed_url['query'])) {
+            parse_str($parsed_url['query'], $query_params);
+
+            // Extract embed-related parameters
+            $supported_params = ['showTitle', 'showRelated', 'showUserAvatar', 'linkTitle', 't', 'width', 'height'];
+            foreach ($supported_params as $param) {
+                if (isset($query_params[$param])) {
+                    $embed_params[$param] = $query_params[$param];
+                }
+            }
+        }
+
+        return $this->generate_iframe($token, $embed_params);
+    }
+
+    /**
+     * Generate the Iframe pointing to launch.php
+     */
+    private function generate_iframe($token, $embed_params = []) {
+        global $CFG, $COURSE;
+
+        // Use width/height from embed params if provided, no defaults
+        $width = isset($embed_params['width']) ? $embed_params['width'] : null;
+        $height = isset($embed_params['height']) ? $embed_params['height'] : null;
+        $courseid = $COURSE->id ?? 0;
+
+        // Build launch URL parameters
+        $launch_params = [
+            'token' => $token,
+            'courseid' => $courseid
+        ];
+
+        // Add width/height only if provided
+        if ($width !== null) {
+            $launch_params['width'] = $width;
+        }
+        if ($height !== null) {
+            $launch_params['height'] = $height;
+        }
+
+        // Add other embed parameters if provided (excluding width/height as they're already handled)
+        foreach ($embed_params as $key => $value) {
+            if ($key !== 'width' && $key !== 'height') {
+                $launch_params[$key] = $value;
+            }
+        }
+
+        $launchurl = new moodle_url('/filter/mediacms/launch.php', $launch_params);
+
+        // Build iframe attributes
+        $iframe_attrs = [
+            'src' => $launchurl->out(false),
+            'frameborder' => 0,
+            'allowfullscreen' => 'allowfullscreen',
+            'class' => 'mediacms-embed',
+            'title' => 'MediaCMS Video'
+        ];
+
+        // Add width/height attributes only if provided
+        if ($width !== null) {
+            $iframe_attrs['width'] = $width;
+        }
+        if ($height !== null) {
+            $iframe_attrs['height'] = $height;
+        }
+
+        $iframe = html_writer::tag('iframe', '', $iframe_attrs);
+
+        return $iframe;
+    }
+
+    /**
+     * Transform a text-only link into a link that replaces itself with an inline iframe on click.
+     *
+     * @param string $anchor_html  Original <a ...>...</a> HTML
+     * @return string  Transformed HTML (or original if token cannot be extracted)
+     */
+    private function transform_textlink($anchor_html) {
+        global $COURSE, $PAGE;
+
+        // Extract href.
+        if (!preg_match('/href=["\']([^"\']+)["\']/', $anchor_html, $href_matches)) {
+            return $anchor_html;
+        }
+        $href = html_entity_decode($href_matches[1], ENT_QUOTES | ENT_HTML5);
+
+        // Extract ?m=TOKEN.
+        parse_str(parse_url($href, PHP_URL_QUERY) ?? '', $query_params);
+        $token = $query_params['m'] ?? null;
+        if (!$token || !preg_match('/^[a-zA-Z0-9]+$/', $token)) {
+            return $anchor_html;
+        }
+
+        // Extract inner link text.
+        if (!preg_match('/<a[^>]*>(.*?)<\/a>/is', $anchor_html, $text_matches)) {
+            return $anchor_html;
+        }
+
+        $launch_url = new moodle_url('/filter/mediacms/launch.php', [
+            'token'    => $token,
+            'courseid' => isset($COURSE->id) ? (int)$COURSE->id : 0,
+            'show_media_page' => 'true',
+        ]);
+
+        if (!self::$textlink_js_added) {
+            self::$textlink_js_added = true;
+            $PAGE->requires->js_init_code(
+                'document.addEventListener("click",function(e){'
+                . 'var a=e.target.closest("a.mediacms-textlink-launch");if(!a)return;'
+                . 'e.preventDefault();'
+                . 'var f=document.createElement("iframe");'
+                . 'f.src=a.dataset.launchUrl;'
+                . 'f.style.cssText="width:100%;height:480px;border:none;display:block;";'
+                . 'f.allowFullscreen=true;'
+                . 'f.setAttribute("allow","autoplay *; fullscreen *; encrypted-media *;");'
+                . 'a.parentNode.replaceChild(f,a);'
+                . '});',
+                false
+            );
+        }
+
+        return html_writer::tag('a', $text_matches[1], [
+            'href'            => '#',
+            'class'           => 'mediacms-textlink-launch',
+            'data-launch-url' => $launch_url->out(false),
+        ]);
+    }
+
+    /** @var bool  Whether the inline-iframe JS has already been added to the page. */
+    private static $textlink_js_added = false;
+}

lms-plugins/mediacms-moodle/filter/mediacms/db/hooks.php

@@ -0,0 +1,13 @@
+<?php
+/**
+ * Hook registrations for filter_mediacms.
+ * Primary navigation is handled via extend_navigation() in lib.php instead.
+ *
+ * @package    filter_mediacms
+ * @copyright  2026 MediaCMS
+ * @license    http://www.gnu.org/copyleft/gpl.html GNU GPL v3 or later
+ */
+
+defined('MOODLE_INTERNAL') || die();
+
+$callbacks = [];

lms-plugins/mediacms-moodle/filter/mediacms/db/install.php

@@ -0,0 +1,45 @@
+<?php
+
+defined('MOODLE_INTERNAL') || die();
+
+/**
+ * Post-installation hook.
+ */
+function xmldb_filter_mediacms_install() {
+    global $CFG, $DB;
+    require_once($CFG->libdir . '/filterlib.php');
+
+    // Enable the filter globally.
+    filter_set_global_state('filter_mediacms', TEXTFILTER_ON);
+
+    // Move to top priority (lowest sortorder).
+    $syscontextid = context_system::instance()->id;
+    $filters = $DB->get_records('filter_active', ['contextid' => $syscontextid], 'sortorder ASC');
+
+    if (empty($filters)) {
+        return;
+    }
+
+    // Separate mediacms from other filters by inspecting the record property,
+    // not the array key (get_records indexes by id, not by filter name).
+    $mediacmsrecord = null;
+    $otherrecords = [];
+    foreach ($filters as $record) {
+        if ($record->filter === 'filter_mediacms') {
+            $mediacmsrecord = $record;
+        } else {
+            $otherrecords[] = $record;
+        }
+    }
+
+    // Reassign sortorders: mediacms first, then everyone else.
+    $sortorder = 1;
+    if ($mediacmsrecord) {
+        $mediacmsrecord->sortorder = $sortorder++;
+        $DB->update_record('filter_active', $mediacmsrecord);
+    }
+    foreach ($otherrecords as $record) {
+        $record->sortorder = $sortorder++;
+        $DB->update_record('filter_active', $record);
+    }
+}

lms-plugins/mediacms-moodle/filter/mediacms/lang/en/filter_mediacms.php

@@ -0,0 +1,29 @@
+<?php
+defined('MOODLE_INTERNAL') || die();
+
+$string['filtername'] = 'MediaCMS';
+$string['pluginname'] = 'MediaCMS';
+$string['coresettings'] = 'Core MediaCMS Settings';
+$string['coresettings_desc'] = 'These settings are shared with the TinyMCE MediaCMS editor plugin.';
+$string['mediacmsurl'] = 'MediaCMS URL';
+$string['mediacmsurl_desc'] = 'The base URL of your MediaCMS instance (e.g., https://lti.mediacms.io). This setting is used by both the filter and the TinyMCE editor plugin.';
+$string['ltitoolid'] = 'LTI Tool';
+$string['ltitoolid_desc'] = 'Select the External Tool configuration for MediaCMS. This enables the video library in the TinyMCE editor and LTI authentication. To set up an LTI tool, go to Site Administration > Plugins > Activity modules > External tool > Manage tools.';
+$string['noltitoolsfound'] = 'No LTI tools found';
+$string['iframewidth'] = 'Default Width';
+$string['iframewidth_desc'] = 'Default width for embedded videos (pixels).';
+$string['iframeheight'] = 'Default Height';
+$string['iframeheight_desc'] = 'Default height for embedded videos (pixels).';
+$string['enableautoconvert'] = 'Auto-convert URLs';
+$string['enableautoconvert_desc'] = 'Automatically convert MediaCMS URLs (e.g., /view?m=xyz) in text to embedded players.';
+$string['privacy:metadata'] = 'The MediaCMS filter does not store any personal data.';
+
+// My Media page.
+$string['mymedia'] = 'My Media';
+$string['mymedia_placement'] = 'My Media link placement';
+$string['mymedia_placement_desc'] = 'Where to display the My Media link in the Moodle interface.';
+$string['mymedia_placement_top'] = 'Top navigation';
+$string['mymedia_placement_user'] = 'User navigation';
+$string['notconfigured'] = 'MediaCMS is not fully configured. Please set the MediaCMS URL and LTI Tool in Site Administration → Plugins → Filters → MediaCMS.';
+$string['ltitoolnotfound'] = 'The configured LTI tool could not be found. Please check the MediaCMS filter settings.';
+$string['cannotcreatedummyactivity'] = 'Could not create the MediaCMS launcher activity. Please check course permissions.';

lms-plugins/mediacms-moodle/filter/mediacms/launch.php

@@ -0,0 +1,173 @@
+<?php
+/**
+ * LTI Launch for MediaCMS Filter
+ *
+ * @package    filter_mediacms
+ * @copyright  2026 MediaCMS
+ * @license    http://www.gnu.org/copyleft/gpl.html GNU GPL v3 or later
+ */
+
+require_once(__DIR__ . '/../../config.php');
+require_once($CFG->dirroot . '/mod/lti/lib.php');
+require_once($CFG->dirroot . '/mod/lti/locallib.php');
+require_once($CFG->dirroot . '/course/modlib.php');
+require_once(__DIR__ . '/locallib.php');
+
+global $SITE, $DB, $PAGE, $OUTPUT, $CFG;
+
+require_login();
+
+$mediatoken = required_param('token', PARAM_ALPHANUMEXT);
+$courseid = optional_param('courseid', 0, PARAM_INT);
+$height = optional_param('height', 0, PARAM_INT);
+$width = optional_param('width', 0, PARAM_INT);
+
+// Extract embed parameters
+$showTitle = optional_param('showTitle', '', PARAM_TEXT);
+$showRelated = optional_param('showRelated', '', PARAM_TEXT);
+$showUserAvatar = optional_param('showUserAvatar', '', PARAM_TEXT);
+$linkTitle = optional_param('linkTitle', '', PARAM_TEXT);
+$startTime = optional_param('t', '', PARAM_TEXT);
+$show_media_page = optional_param('show_media_page', '', PARAM_TEXT);
+
+// Get configuration
+$mediacmsurl = get_config('filter_mediacms', 'mediacmsurl');
+$ltitoolid = get_config('filter_mediacms', 'ltitoolid');
+
+// No default dimensions - use what's provided or nothing
+
+if (empty($mediacmsurl)) {
+    die('MediaCMS URL not configured');
+}
+
+// Tool Selection Logic
+$type = false;
+if (!empty($ltitoolid)) {
+    $type = $DB->get_record('lti_types', ['id' => $ltitoolid]);
+}
+
+if (!$type) {
+    die('LTI tool not found or not configured.');
+}
+
+// Set up context
+if ($courseid && $courseid != SITEID) {
+    $context = context_course::instance($courseid);
+    $course = get_course($courseid);
+} else {
+    $context = context_system::instance();
+    $course = $SITE;
+}
+
+// Get or create the dummy activity (visible, non-stealth).
+try {
+    $dummy_cmid = filter_mediacms_get_dummy_activity($courseid, $type->id);
+} catch (Exception $e) {
+    if (!has_capability('moodle/course:manageactivities', $context)) {
+        die('No MediaCMS activity found. Please ask a teacher to add one first.');
+    }
+    throw $e;
+}
+
+$cm       = get_coursemodule_from_id('lti', $dummy_cmid, 0, false, MUST_EXIST);
+$instance = $DB->get_record('lti', ['id' => $cm->instance], '*', MUST_EXIST);
+
+$custom_params = ["media_friendly_token=" . $mediatoken];
+
+// Add embed parameters if provided (check !== '' instead of !empty() because '0' is a valid value)
+if ($showTitle !== '') {
+    $custom_params[] = "embed_show_title=" . $showTitle;
+}
+if ($showRelated !== '') {
+    $custom_params[] = "embed_show_related=" . $showRelated;
+}
+if ($showUserAvatar !== '') {
+    $custom_params[] = "embed_show_user_avatar=" . $showUserAvatar;
+}
+if ($linkTitle !== '') {
+    $custom_params[] = "embed_link_title=" . $linkTitle;
+}
+if ($startTime !== '') {
+    $custom_params[] = "embed_start_time=" . $startTime;
+}
+if ($show_media_page === 'true') {
+    $custom_params[] = "show_media_page=true";
+}
+
+$instance->instructorcustomparameters = implode("\n", $custom_params);
+$instance->name = 'MediaCMS Video: ' . $mediatoken;
+
+// Set up page
+$page_params = [
+    'token' => $mediatoken,
+    'courseid' => $courseid,
+    'width' => $width,
+    'height' => $height
+];
+
+// Add embed parameters to page URL if provided (check !== '' because '0' is valid)
+if ($showTitle !== '') {
+    $page_params['showTitle'] = $showTitle;
+}
+if ($showRelated !== '') {
+    $page_params['showRelated'] = $showRelated;
+}
+if ($showUserAvatar !== '') {
+    $page_params['showUserAvatar'] = $showUserAvatar;
+}
+if ($linkTitle !== '') {
+    $page_params['linkTitle'] = $linkTitle;
+}
+if ($startTime !== '') {
+    $page_params['t'] = $startTime;
+}
+if ($show_media_page === 'true') {
+    $page_params['show_media_page'] = 'true';
+}
+
+$PAGE->set_url(new moodle_url('/filter/mediacms/launch.php', $page_params));
+$PAGE->set_context($context);
+$PAGE->set_pagelayout('embedded');
+$PAGE->set_title('MediaCMS');
+
+// Get type config
+$typeconfig = lti_get_type_type_config($type->id);
+
+// Initiate LTI Login with proper cmid (for permissions) and custom token
+$content = lti_initiate_login($course->id, $dummy_cmid, $instance, $typeconfig, null, $instance->name);
+
+// CRITICAL: Inject media_token and embed parameters as hidden fields in OIDC form
+// MediaCMS will encode them in state and inject into custom claims (fallback mechanism)
+$hidden_fields = '<input type="hidden" name="media_token" value="' . htmlspecialchars($mediatoken, ENT_QUOTES) . '" />';
+
+// Add embed parameters as hidden fields
+if ($showTitle !== '') {
+    $hidden_fields .= '<input type="hidden" name="embed_show_title" value="' . htmlspecialchars($showTitle, ENT_QUOTES) . '" />';
+}
+if ($showRelated !== '') {
+    $hidden_fields .= '<input type="hidden" name="embed_show_related" value="' . htmlspecialchars($showRelated, ENT_QUOTES) . '" />';
+}
+if ($showUserAvatar !== '') {
+    $hidden_fields .= '<input type="hidden" name="embed_show_user_avatar" value="' . htmlspecialchars($showUserAvatar, ENT_QUOTES) . '" />';
+}
+if ($linkTitle !== '') {
+    $hidden_fields .= '<input type="hidden" name="embed_link_title" value="' . htmlspecialchars($linkTitle, ENT_QUOTES) . '" />';
+}
+if ($startTime !== '') {
+    $hidden_fields .= '<input type="hidden" name="embed_start_time" value="' . htmlspecialchars($startTime, ENT_QUOTES) . '" />';
+}
+if ($show_media_page === 'true') {
+    $hidden_fields .= '<input type="hidden" name="show_media_page" value="true" />';
+}
+if ($width) {
+    $hidden_fields .= '<input type="hidden" name="embed_width" value="' . htmlspecialchars($width, ENT_QUOTES) . '" />';
+}
+if ($height) {
+    $hidden_fields .= '<input type="hidden" name="embed_height" value="' . htmlspecialchars($height, ENT_QUOTES) . '" />';
+}
+
+$content = str_replace('</form>', $hidden_fields . '</form>', $content);
+
+echo $OUTPUT->header();
+echo $content;
+echo $OUTPUT->footer();

lms-plugins/mediacms-moodle/filter/mediacms/lib.php

@@ -0,0 +1,72 @@
+<?php
+/**
+ * Navigation callbacks for filter_mediacms
+ *
+ * @package    filter_mediacms
+ * @copyright  2026 MediaCMS
+ * @license    http://www.gnu.org/copyleft/gpl.html GNU GPL v3 or later
+ */
+
+defined('MOODLE_INTERNAL') || die();
+
+/**
+ * Add My Media to the global / flat navigation (nav drawer).
+ * Fires on every page when placement is set to 'top'.
+ * In Moodle 4.x Boost the nav drawer is opened via the hamburger icon
+ * and the node appears as a top-level item alongside Home / My courses.
+ */
+function filter_mediacms_extend_navigation(global_navigation $navigation): void {
+    $placement = get_config('filter_mediacms', 'mymedia_placement');
+    if ($placement !== 'top') {
+        return;
+    }
+
+    if (!isloggedin() || isguestuser()) {
+        return;
+    }
+
+    $url  = new moodle_url('/filter/mediacms/my_media.php');
+    $node = navigation_node::create(
+        get_string('mymedia', 'filter_mediacms'),
+        $url,
+        navigation_node::TYPE_CUSTOM,
+        null,
+        'mediacms_mymedia',
+        new pix_icon('i/media', '')
+    );
+    // showinflatnavigation = true makes it visible in the Boost nav drawer.
+    $node->showinflatnavigation = true;
+    $navigation->add_node($node);
+}
+
+/**
+ * Add My Media to the user account / settings navigation.
+ * Fires when placement is set to 'user'.
+ * In Moodle 4.x Boost this section is reachable via avatar → Preferences.
+ */
+function filter_mediacms_extend_navigation_user_settings(
+    navigation_node $navigation,
+    stdClass $user,
+    context_user $usercontext,
+    stdClass $course,
+    context_course $coursecontext
+): void {
+    $placement = get_config('filter_mediacms', 'mymedia_placement');
+    if ($placement !== 'user') {
+        return;
+    }
+
+    if (!isloggedin() || isguestuser()) {
+        return;
+    }
+
+    $url = new moodle_url('/filter/mediacms/my_media.php');
+    $navigation->add(
+        get_string('mymedia', 'filter_mediacms'),
+        $url,
+        navigation_node::TYPE_SETTING,
+        null,
+        'mediacms_mymedia',
+        new pix_icon('i/media', '')
+    );
+}

lms-plugins/mediacms-moodle/filter/mediacms/locallib.php

@@ -0,0 +1,64 @@
+<?php
+/**
+ * Local helper functions for filter_mediacms
+ *
+ * @package    filter_mediacms
+ * @copyright  2026 MediaCMS
+ * @license    http://www.gnu.org/copyleft/gpl.html GNU GPL v3 or later
+ */
+
+defined('MOODLE_INTERNAL') || die();
+
+/**
+ * Find the first LTI activity for the MediaCMS tool in a course, or create a
+ * visible dummy one if none exists. Repairs any existing stealth/hidden activity.
+ *
+ * @param int $courseid
+ * @param int $typeid  LTI tool type ID
+ * @return int  course-module ID
+ */
+function filter_mediacms_get_dummy_activity($courseid, $typeid) {
+    global $DB;
+
+    $sql = "SELECT cm.id
+              FROM {course_modules} cm
+              JOIN {modules} m ON m.id = cm.module
+              JOIN {lti} lti    ON lti.id = cm.instance
+             WHERE cm.course = :courseid
+               AND m.name = 'lti'
+               AND lti.typeid = :typeid
+               AND cm.deletioninprogress = 0
+          ORDER BY cm.visible DESC, cm.visibleoncoursepage DESC
+             LIMIT 1";
+
+    $existing = $DB->get_record_sql($sql, ['courseid' => $courseid, 'typeid' => $typeid]);
+    if ($existing) {
+        return $existing->id;
+    }
+
+    // Create the dummy activity then immediately force visibleoncoursepage=0,
+    // because add_moduleinfo() always defaults it to 1.
+    $moduleinfo = new stdClass();
+    $moduleinfo->course              = $courseid;
+    $moduleinfo->module              = $DB->get_field('modules', 'id', ['name' => 'lti']);
+    $moduleinfo->modulename          = 'lti';
+    $moduleinfo->section             = 0;
+    $moduleinfo->visible             = 1;
+    $moduleinfo->visibleoncoursepage = 1;
+    $moduleinfo->availability        = null;
+    $moduleinfo->showdescription     = 0;
+    $moduleinfo->name                = 'My Media';
+    $moduleinfo->intro               = '';
+    $moduleinfo->introformat         = FORMAT_HTML;
+    $moduleinfo->typeid              = $typeid;
+    $moduleinfo->instructorchoiceacceptgrades  = 0;
+    $moduleinfo->grade               = 0;
+    $moduleinfo->instructorchoicesendname      = 1;
+    $moduleinfo->instructorchoicesendemailaddr = 1;
+    $moduleinfo->launchcontainer     = LTI_LAUNCH_CONTAINER_EMBED_NO_BLOCKS;
+    $moduleinfo->instructorcustomparameters    = '';
+
+    $result = add_moduleinfo($moduleinfo, get_course($courseid));
+
+    return $result->coursemodule;
+}

lms-plugins/mediacms-moodle/filter/mediacms/lti_launch.php

@@ -0,0 +1,97 @@
+<?php
+/**
+ * My Media LTI launch page — runs inside the iframe from my_media.php.
+ *
+ * Builds custom_publishdata (enrolled courses + roles) and initiates
+ * the LTI 1.3 OIDC login flow, outputting the auto-submit form directly.
+ *
+ * @package    filter_mediacms
+ * @copyright  2026 MediaCMS
+ * @license    http://www.gnu.org/copyleft/gpl.html GNU GPL v3 or later
+ */
+
+require_once(__DIR__ . '/../../config.php');
+require_once($CFG->dirroot . '/mod/lti/lib.php');
+require_once($CFG->dirroot . '/mod/lti/locallib.php');
+require_once($CFG->dirroot . '/course/modlib.php');
+require_once(__DIR__ . '/locallib.php');
+
+global $SITE, $DB, $CFG, $USER;
+
+require_login();
+
+$mediacmsurl = get_config('filter_mediacms', 'mediacmsurl');
+$ltitoolid   = get_config('filter_mediacms', 'ltitoolid');
+
+if (empty($mediacmsurl) || empty($ltitoolid)) {
+    throw new moodle_exception('notconfigured', 'filter_mediacms');
+}
+
+$type = $DB->get_record('lti_types', ['id' => $ltitoolid]);
+if (!$type) {
+    throw new moodle_exception('ltitoolnotfound', 'filter_mediacms');
+}
+
+// Build custom_publishdata: all courses the user is enrolled in + role.
+$enrolled_courses = enrol_get_users_courses($USER->id, true, ['id', 'shortname', 'fullname']);
+
+$publish_data = [];
+foreach ($enrolled_courses as $enrolled_course) {
+    if ((int)$enrolled_course->id === SITEID) {
+        continue;
+    }
+
+    $course_context = context_course::instance($enrolled_course->id);
+    $roles          = get_user_roles($course_context, $USER->id, false);
+
+    $role_shortname = 'student';
+    if (!empty($roles)) {
+        $role           = reset($roles);
+        $role_shortname = $role->shortname;
+    }
+
+    $publish_data[] = [
+        'id'        => (int)$enrolled_course->id,
+        'shortname' => $enrolled_course->shortname,
+        'fullname'  => $enrolled_course->fullname,
+        'role'      => $role_shortname,
+    ];
+}
+
+$publishdata_b64 = base64_encode(json_encode($publish_data));
+
+// Use a course the user is actually enrolled in so they have mod/lti:view during
+// the OIDC flow. Fall back to SITEID only for admins with no course enrolments.
+$launch_courseid = SITEID;
+$launch_course   = $SITE;
+foreach ($enrolled_courses as $ec) {
+    if ((int)$ec->id !== SITEID) {
+        $launch_courseid = (int)$ec->id;
+        $launch_course   = get_course($launch_courseid);
+        break;
+    }
+}
+
+// Get or create the dummy activity (visible, non-stealth).
+try {
+    $dummy_cmid = filter_mediacms_get_dummy_activity($launch_courseid, $type->id);
+} catch (Exception $e) {
+    throw new moodle_exception('cannotcreatedummyactivity', 'filter_mediacms');
+}
+
+$cm       = get_coursemodule_from_id('lti', $dummy_cmid, 0, false, MUST_EXIST);
+$instance = $DB->get_record('lti', ['id' => $cm->instance], '*', MUST_EXIST);
+
+// DEBUG: log enrolled courses retrieved.
+error_log('MediaCMS My Media publishdata courses (' . count($publish_data) . '): ' . json_encode($publish_data));
+
+// Write publishdata to DB — Moodle's auth.php re-reads the instance from DB
+// when building the LTI launch JWT, so in-memory changes are ignored.
+$DB->set_field('lti', 'instructorcustomparameters', 'publishdata=' . $publishdata_b64, ['id' => $cm->instance]);
+$instance->instructorcustomparameters = 'publishdata=' . $publishdata_b64;
+$instance->name = 'MediaCMS My Media';
+
+$typeconfig = lti_get_type_type_config($type->id);
+$content    = lti_initiate_login($launch_course->id, $dummy_cmid, $instance, $typeconfig, null, $instance->name);
+
+echo $content;

lms-plugins/mediacms-moodle/filter/mediacms/my_media.php

@@ -0,0 +1,36 @@
+<?php
+/**
+ * My Media page — renders the Moodle shell with an LTI iframe.
+ *
+ * @package    filter_mediacms
+ * @copyright  2026 MediaCMS
+ * @license    http://www.gnu.org/copyleft/gpl.html GNU GPL v3 or later
+ */
+
+require_once(__DIR__ . '/../../config.php');
+
+global $SITE, $PAGE, $OUTPUT, $USER;
+
+require_login();
+
+$context = context_system::instance();
+
+$PAGE->set_context($context);
+$PAGE->set_url(new moodle_url('/filter/mediacms/my_media.php'));
+$PAGE->set_course($SITE);
+$PAGE->set_pagelayout('mydashboard');
+$PAGE->set_title(get_string('mymedia', 'filter_mediacms'));
+$PAGE->set_heading(get_string('mymedia', 'filter_mediacms'));
+
+echo $OUTPUT->header();
+
+$attr = [
+    'id'              => 'contentframe',
+    'src'             => (new moodle_url('/filter/mediacms/lti_launch.php'))->out(false),
+    'allowfullscreen' => 'true',
+    'allow'           => 'autoplay *; fullscreen *; encrypted-media *; camera *; microphone *;',
+    'style'           => 'border:none;display:block;width:100%;height:calc(100vh - 120px);',
+];
+echo html_writer::tag('iframe', '', $attr);
+
+echo $OUTPUT->footer();

lms-plugins/mediacms-moodle/filter/mediacms/settings.php

@@ -0,0 +1,54 @@
+<?php
+defined('MOODLE_INTERNAL') || die;
+
+if ($ADMIN->fulltree) {
+    // Info heading
+    $settings->add(new admin_setting_heading(
+        'filter_mediacms/coresettings',
+        get_string('coresettings', 'filter_mediacms'),
+        get_string('coresettings_desc', 'filter_mediacms')
+    ));
+
+    // MediaCMS URL
+    $settings->add(new admin_setting_configtext(
+        'filter_mediacms/mediacmsurl',
+        get_string('mediacmsurl', 'filter_mediacms'),
+        get_string('mediacmsurl_desc', 'filter_mediacms'),
+        'https://lti.mediacms.io',
+        PARAM_URL
+    ));
+
+    // LTI Tool Selector
+    $ltioptions = [0 => get_string('noltitoolsfound', 'filter_mediacms')];
+    try {
+        $tools = $DB->get_records('lti_types', null, 'name ASC', 'id, name, baseurl');
+        if (!empty($tools)) {
+            $ltioptions = [0 => get_string('choose')];
+            foreach ($tools as $tool) {
+                $ltioptions[$tool->id] = $tool->name . ' (' . $tool->baseurl . ')';
+            }
+        }
+    } catch (Exception $e) {
+        // Database might not be ready during install
+    }
+
+    $settings->add(new admin_setting_configselect(
+        'filter_mediacms/ltitoolid',
+        get_string('ltitoolid', 'filter_mediacms'),
+        get_string('ltitoolid_desc', 'filter_mediacms'),
+        0,
+        $ltioptions
+    ));
+
+    // My Media link placement.
+    $settings->add(new admin_setting_configselect(
+        'filter_mediacms/mymedia_placement',
+        get_string('mymedia_placement', 'filter_mediacms'),
+        get_string('mymedia_placement_desc', 'filter_mediacms'),
+        'top',
+        [
+            'top'  => get_string('mymedia_placement_top', 'filter_mediacms'),
+            'user' => get_string('mymedia_placement_user', 'filter_mediacms'),
+        ]
+    ));
+}

lms-plugins/mediacms-moodle/filter/mediacms/version.php

@@ -0,0 +1,8 @@
+<?php
+defined('MOODLE_INTERNAL') || die();
+
+$plugin->version   = 2026021200; // 2026-02-12
+$plugin->requires  = 2024100700; // Requires Moodle 4.5+
+$plugin->component = 'filter_mediacms';
+$plugin->maturity  = MATURITY_STABLE;
+$plugin->release   = 'v1.0.0';

lms-plugins/mediacms-moodle/package.json

@@ -0,0 +1,89 @@
+{
+  "name": "mediacms-moodle",
+  "version": "1.0.0",
+  "description": "This package provides the integration between MediaCMS and Moodle (versions 4.x and 5.x). It consists of two components that work together to provide a seamless video experience:",
+  "main": "index.js",
+  "scripts": {
+    "test": "echo \"Error: no test specified\" && exit 1"
+  },
+  "keywords": [],
+  "author": "",
+  "license": "ISC",
+  "devDependencies": {
+    "@babel/cli": "^7.28.6",
+    "@babel/core": "^7.29.0",
+    "@babel/plugin-transform-modules-amd": "^7.27.1",
+    "@babel/preset-env": "^7.29.0"
+  },
+  "dependencies": {
+    "anymatch": "^3.1.3",
+    "babel-plugin-polyfill-corejs2": "^0.4.15",
+    "babel-plugin-polyfill-corejs3": "^0.14.0",
+    "babel-plugin-polyfill-regenerator": "^0.6.6",
+    "balanced-match": "^1.0.2",
+    "baseline-browser-mapping": "^2.9.19",
+    "binary-extensions": "^2.3.0",
+    "brace-expansion": "^1.1.12",
+    "braces": "^3.0.3",
+    "browserslist": "^4.28.1",
+    "caniuse-lite": "^1.0.30001766",
+    "chokidar": "^3.6.0",
+    "commander": "^6.2.1",
+    "concat-map": "^0.0.1",
+    "convert-source-map": "^2.0.0",
+    "core-js-compat": "^3.48.0",
+    "debug": "^4.4.3",
+    "electron-to-chromium": "^1.5.283",
+    "escalade": "^3.2.0",
+    "esutils": "^2.0.3",
+    "fill-range": "^7.1.1",
+    "fs-readdir-recursive": "^1.1.0",
+    "fs.realpath": "^1.0.0",
+    "function-bind": "^1.1.2",
+    "gensync": "^1.0.0-beta.2",
+    "glob": "^7.2.3",
+    "glob-parent": "^5.1.2",
+    "hasown": "^2.0.2",
+    "inflight": "^1.0.6",
+    "inherits": "^2.0.4",
+    "is-binary-path": "^2.1.0",
+    "is-core-module": "^2.16.1",
+    "is-extglob": "^2.1.1",
+    "is-glob": "^4.0.3",
+    "is-number": "^7.0.0",
+    "js-tokens": "^4.0.0",
+    "jsesc": "^3.1.0",
+    "json5": "^2.2.3",
+    "lodash.debounce": "^4.0.8",
+    "lru-cache": "^5.1.1",
+    "make-dir": "^2.1.0",
+    "minimatch": "^3.1.2",
+    "ms": "^2.1.3",
+    "node-releases": "^2.0.27",
+    "normalize-path": "^3.0.0",
+    "once": "^1.4.0",
+    "path-is-absolute": "^1.0.1",
+    "path-parse": "^1.0.7",
+    "picocolors": "^1.1.1",
+    "picomatch": "^2.3.1",
+    "pify": "^4.0.1",
+    "readdirp": "^3.6.0",
+    "regenerate": "^1.4.2",
+    "regenerate-unicode-properties": "^10.2.2",
+    "regexpu-core": "^6.4.0",
+    "regjsgen": "^0.8.0",
+    "regjsparser": "^0.13.0",
+    "resolve": "^1.22.11",
+    "semver": "^6.3.1",
+    "slash": "^2.0.0",
+    "supports-preserve-symlinks-flag": "^1.0.0",
+    "to-regex-range": "^5.0.1",
+    "unicode-canonical-property-names-ecmascript": "^2.0.1",
+    "unicode-match-property-ecmascript": "^2.0.0",
+    "unicode-match-property-value-ecmascript": "^2.2.1",
+    "unicode-property-aliases-ecmascript": "^2.2.0",
+    "update-browserslist-db": "^1.2.3",
+    "wrappy": "^1.0.2",
+    "yallist": "^3.1.1"
+  }
+}

lms-plugins/mediacms-moodle/tiny/mediacms/AUTOCONVERT.md

@@ -0,0 +1,206 @@
+# MediaCMS URL Auto-Convert Feature
+
+This feature automatically converts pasted MediaCMS video URLs into embedded video players within the TinyMCE editor.
+
+## Overview
+
+When a user pastes a MediaCMS video URL like:
+```
+https://deic.mediacms.io/view?m=JpBd1Zvdl
+```
+
+It is automatically converted to an embedded video player:
+```html
+<div class="tiny-iframe-responsive" contenteditable="false">
+  <iframe 
+    style="width: 100%; max-width: calc(100vh * 16 / 9); aspect-ratio: 16 / 9; display: block; margin: auto; border: 0;" 
+    src="https://deic.mediacms.io/embed?m=JpBd1Zvdl&showTitle=1&showRelated=1&showUserAvatar=1&linkTitle=1" 
+    allowfullscreen="allowfullscreen">
+  </iframe>
+</div>
+```
+
+## Supported URL Formats
+
+The auto-convert feature recognizes MediaCMS view URLs in this format:
+- `https://[domain]/view?m=[VIDEO_ID]`
+
+Examples:
+- `https://deic.mediacms.io/view?m=JpBd1Zvdl`
+- `https://your-mediacms-instance.com/view?m=abc123`
+
+## Configuration
+
+### Accessing Settings
+
+1. Log in to Moodle as an administrator
+2. Navigate to: **Site administration** → **Plugins** → **Text editors** → **TinyMCE editor** → **MediaCMS**
+3. Scroll to the **Auto-convert MediaCMS URLs** section
+
+### Available Settings
+
+| Setting | Description | Default |
+|---------|-------------|---------|
+| **Enable auto-convert** | Turn the auto-convert feature on or off | Enabled |
+| **MediaCMS base URL** | Restrict auto-conversion to a specific MediaCMS domain | Empty (allow all) |
+| **Show video title** | Display the video title in the embedded player | Enabled |
+| **Link video title** | Make the video title clickable, linking to the original video page | Enabled |
+| **Show related videos** | Display related videos after the current video ends | Enabled |
+| **Show user avatar** | Display the uploader's avatar in the embedded player | Enabled |
+
+### Settings Location in Moodle
+
+The settings are stored in the Moodle database under the `tiny_mediacms` plugin configuration:
+
+- `tiny_mediacms/autoconvertenabled` - Enable/disable auto-convert
+- `tiny_mediacms/autoconvert_baseurl` - MediaCMS base URL (e.g., https://deic.mediacms.io)
+- `tiny_mediacms/autoconvert_showtitle` - Show title option
+- `tiny_mediacms/autoconvert_linktitle` - Link title option
+- `tiny_mediacms/autoconvert_showrelated` - Show related option
+- `tiny_mediacms/autoconvert_showuseravatar` - Show user avatar option
+
+### Base URL Configuration
+
+The **MediaCMS base URL** setting controls which MediaCMS instances are recognized for auto-conversion:
+
+- **Empty (default)**: Any MediaCMS URL will be auto-converted (e.g., URLs from any `*/view?m=*` pattern)
+- **Specific URL**: Only URLs from the specified domain will be auto-converted
+
+Example configurations:
+- `https://deic.mediacms.io` - Only convert URLs from deic.mediacms.io
+- `https://media.myuniversity.edu` - Only convert URLs from your institution's MediaCMS
+
+## Technical Details
+
+### File Structure
+
+```
+amd/src/
+├── autoconvert.js      # Main auto-convert module
+├── plugin.js           # Plugin initialization (imports autoconvert)
+└── options.js          # Configuration options definition
+
+classes/
+└── plugininfo.php      # Passes PHP settings to JavaScript
+
+settings.php            # Admin settings page definition
+
+lang/en/
+└── tiny_mediacms.php   # Language strings for settings
+```
+
+### How It Works
+
+1. **Paste Detection**: The `autoconvert.js` module listens for `paste` events on the TinyMCE editor
+2. **URL Validation**: When text is pasted, it checks if it matches the MediaCMS URL pattern
+3. **HTML Generation**: If valid, it generates the responsive iframe HTML with configured options
+4. **Content Insertion**: The original URL is replaced with the embedded video
+
+### JavaScript Configuration
+
+The settings are passed from PHP to JavaScript via the `plugininfo.php` class:
+
+```php
+protected static function get_autoconvert_configuration(): array {
+    $baseurl = get_config('tiny_mediacms', 'autoconvert_baseurl');
+
+    return [
+        'data' => [
+            'autoConvertEnabled' => (bool) get_config('tiny_mediacms', 'autoconvertenabled'),
+            'autoConvertBaseUrl' => !empty($baseurl) ? $baseurl : '',
+            'autoConvertOptions' => [
+                'showTitle' => (bool) get_config('tiny_mediacms', 'autoconvert_showtitle'),
+                'linkTitle' => (bool) get_config('tiny_mediacms', 'autoconvert_linktitle'),
+                'showRelated' => (bool) get_config('tiny_mediacms', 'autoconvert_showrelated'),
+                'showUserAvatar' => (bool) get_config('tiny_mediacms', 'autoconvert_showuseravatar'),
+            ],
+        ],
+    ];
+}
+```
+
+### Default Values (in options.js)
+
+If PHP settings are not configured, the JavaScript uses these defaults:
+
+```javascript
+registerOption(dataName, {
+    processor: 'object',
+    "default": {
+        autoConvertEnabled: true,
+        autoConvertBaseUrl: '', // Empty = allow all MediaCMS domains
+        autoConvertOptions: {
+            showTitle: true,
+            linkTitle: true,
+            showRelated: true,
+            showUserAvatar: true,
+        },
+    },
+});
+```
+
+## Customization
+
+### Disabling Auto-Convert
+
+To disable the feature entirely:
+1. Go to the plugin settings (see "Accessing Settings" above)
+2. Uncheck **Enable auto-convert**
+3. Save changes
+
+### Programmatic Configuration
+
+You can also set these values directly in the database using Moodle's `set_config()` function:
+
+```php
+// Disable auto-convert
+set_config('autoconvertenabled', 0, 'tiny_mediacms');
+
+// Set the MediaCMS base URL (restrict to specific domain)
+set_config('autoconvert_baseurl', 'https://deic.mediacms.io', 'tiny_mediacms');
+
+// Customize embed options
+set_config('autoconvert_showtitle', 1, 'tiny_mediacms');
+set_config('autoconvert_linktitle', 0, 'tiny_mediacms');
+set_config('autoconvert_showrelated', 0, 'tiny_mediacms');
+set_config('autoconvert_showuseravatar', 1, 'tiny_mediacms');
+```
+
+### CLI Configuration
+
+Using Moodle CLI:
+
+```bash
+# Enable auto-convert
+php admin/cli/cfg.php --component=tiny_mediacms --name=autoconvertenabled --set=1
+
+# Set the MediaCMS base URL
+php admin/cli/cfg.php --component=tiny_mediacms --name=autoconvert_baseurl --set=https://deic.mediacms.io
+
+# Disable showing related videos
+php admin/cli/cfg.php --component=tiny_mediacms --name=autoconvert_showrelated --set=0
+```
+
+## Troubleshooting
+
+### Auto-convert not working
+
+1. **Check if enabled**: Verify the setting is enabled in plugin settings
+2. **Clear caches**: Purge all caches (Site administration → Development → Purge all caches)
+3. **Check URL format**: Ensure the URL matches the pattern `https://[domain]/view?m=[VIDEO_ID]`
+4. **Browser console**: Check for JavaScript errors in the browser developer console
+
+### Rebuilding JavaScript
+
+If you modify the source files, rebuild using:
+
+```bash
+cd /path/to/moodle
+npx grunt amd --root=public/lib/editor/tiny/plugins/mediacms
+```
+
+Note: Requires Node.js 22.x or compatible version as specified in Moodle's requirements.
+
+## Version History
+
+- **1.0.0** - Initial implementation of auto-convert feature

lms-plugins/mediacms-moodle/tiny/mediacms/README.md

@@ -0,0 +1,20 @@
+# TinyMCE MediaCMS Plugin for Moodle
+
+A TinyMCE editor plugin for Moodle that provides media embedding capabilities with MediaCMS/LTI integration.
+
+## Build Information
+
+### Preparation
+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
+
+### Actual build
+4. cd lib/editor/tiny/plugins/mediacms && npx grunt amd
+
+### Test the output
+5. To test the output:
+cp * ../../../../../../../lms-plugins/mediacms-moodle/tiny/mediacms/ -r
+
+6. Then copy to Moodle server and purge caches
+

lms-plugins/mediacms-moodle/tiny/mediacms/amd/build/autoconvert.min.js

@@ -0,0 +1,15 @@
+define("tiny_mediacms/autoconvert",["exports","./options"],(function(_exports,_options){Object.defineProperty(_exports,"__esModule",{value:!0}),_exports.setupAutoConvert=_exports.isMediaCMSUrl=_exports.convertToEmbed=void 0;
+/**
+   * Tiny MediaCMS Auto-convert module.
+   *
+   * This module automatically converts pasted MediaCMS URLs into embedded videos.
+   * When a user pastes a MediaCMS video URL (e.g., https://deic.mediacms.io/view?m=JpBd1Zvdl),
+   * it will be automatically converted to an iframe embed.
+   *
+   * @module      tiny_mediacms/autoconvert
+   * @copyright   2024
+   * @license     http://www.gnu.org/copyleft/gpl.html GNU GPL v3 or later
+   */
+const MEDIACMS_VIEW_URL_PATTERN=/^(https?:\/\/[^\/]+)\/view\?m=([a-zA-Z0-9_-]+)$/,parseMediaCMSUrl=text=>{if(!text||"string"!=typeof text)return null;const trimmed=text.trim(),match=trimmed.match(MEDIACMS_VIEW_URL_PATTERN);return match?{baseUrl:match[1],videoId:match[2],originalUrl:trimmed}:null},isDomainAllowed=(parsed,config)=>{const configuredBaseUrl=config.autoConvertBaseUrl||config.mediacmsBaseUrl;if(!configuredBaseUrl)return!0;try{const configuredUrl=new URL(configuredBaseUrl),pastedUrl=new URL(parsed.baseUrl);return configuredUrl.host===pastedUrl.host}catch(e){return!0}},generateEmbedHtml=function(parsed){let options=arguments.length>1&&void 0!==arguments[1]?arguments[1]:{};const embedUrl=new URL("".concat(parsed.baseUrl,"/embed"));embedUrl.searchParams.set("m",parsed.videoId),embedUrl.searchParams.set("showTitle",!1!==options.showTitle?"1":"0"),embedUrl.searchParams.set("showRelated",!1!==options.showRelated?"1":"0"),embedUrl.searchParams.set("showUserAvatar",!1!==options.showUserAvatar?"1":"0"),embedUrl.searchParams.set("linkTitle",!1!==options.linkTitle?"1":"0");const html='<iframe src="'.concat(embedUrl.toString(),'" ')+'style="width: 100%; aspect-ratio: 16 / 9; display: block; border: 0;" allowfullscreen="allowfullscreen"></iframe>';return html};_exports.setupAutoConvert=editor=>{const config=(0,_options.getData)(editor)||{};!1!==config.autoConvertEnabled&&(editor.on("paste",(e=>{handlePasteEvent(editor,e,config)})),editor.on("input",(e=>{handleInputEvent(editor,e,config)})))};const handlePasteEvent=(editor,e,config)=>{const clipboardData=e.clipboardData||window.clipboardData;if(!clipboardData)return;const text=clipboardData.getData("text/plain")||clipboardData.getData("text");if(!text)return;const parsed=parseMediaCMSUrl(text);if(!parsed)return;if(!isDomainAllowed(parsed,config))return;e.preventDefault(),e.stopPropagation();const embedHtml=generateEmbedHtml(parsed,config.autoConvertOptions||{});setTimeout((()=>{editor.insertContent(embedHtml),editor.selection.collapse(!1)}),0)},handleInputEvent=(editor,e,config)=>{if("insertFromPaste"!==e.inputType&&"insertText"!==e.inputType)return;const node=editor.selection.getNode();if(!node||"P"!==node.nodeName)return;const text=node.textContent||"",parsed=parseMediaCMSUrl(text);if(!parsed||!isDomainAllowed(parsed,config))return;const trimmedHtml=node.innerHTML.trim();if(trimmedHtml!==text.trim()&&!trimmedHtml.startsWith(text.trim()))return;const embedHtml=generateEmbedHtml(parsed,config.autoConvertOptions||{});setTimeout((()=>{const currentText=node.textContent||"",currentParsed=parseMediaCMSUrl(currentText);currentParsed&&currentParsed.originalUrl===parsed.originalUrl&&(editor.selection.select(node),editor.insertContent(embedHtml))}),100)};_exports.isMediaCMSUrl=text=>null!==parseMediaCMSUrl(text);_exports.convertToEmbed=function(url){let options=arguments.length>1&&void 0!==arguments[1]?arguments[1]:{};const parsed=parseMediaCMSUrl(url);return parsed?generateEmbedHtml(parsed,options):null}}));
+
+//# sourceMappingURL=autoconvert.min.js.map

lms-plugins/mediacms-moodle/tiny/mediacms/amd/build/commands.min.js

@@ -0,0 +1,10 @@
+define("tiny_mediacms/commands",["exports","core/str","./common","./iframeembed","editor_tiny/utils"],(function(_exports,_str,_common,_iframeembed,_utils){var obj;
+/**
+   * Tiny Media commands.
+   *
+   * @module      tiny_mediacms/commands
+   * @copyright   2022 Huong Nguyen <huongnv13@gmail.com>
+   * @license     http://www.gnu.org/copyleft/gpl.html GNU GPL v3 or later
+   */Object.defineProperty(_exports,"__esModule",{value:!0}),_exports.getSetup=void 0,_iframeembed=(obj=_iframeembed)&&obj.__esModule?obj:{default:obj};const isIframe=node=>"iframe"===node.nodeName.toLowerCase()||node.classList&&node.classList.contains("tiny-iframe-responsive")||node.classList&&node.classList.contains("tiny-mediacms-iframe-wrapper")||"a"===node.nodeName.toLowerCase()&&"true"===node.getAttribute("data-mediacms-textlink"),setupIframeOverlays=(editor,handleIframeAction)=>{const processIframes=()=>{const editorBody=editor.getBody();if(!editorBody)return;editorBody.querySelectorAll("iframe").forEach((iframe=>{var _iframe$parentElement;if(null!==(_iframe$parentElement=iframe.parentElement)&&void 0!==_iframe$parentElement&&_iframe$parentElement.classList.contains("tiny-mediacms-iframe-wrapper"))return;if(iframe.hasAttribute("data-mce-object")||iframe.hasAttribute("data-mce-placeholder"))return;const wrapper=editor.getDoc().createElement("div");wrapper.className="tiny-mediacms-iframe-wrapper",wrapper.setAttribute("contenteditable","false");const editBtn=editor.getDoc().createElement("button");editBtn.className="tiny-mediacms-edit-btn",editBtn.setAttribute("type","button"),editBtn.setAttribute("title","Edit media embed options"),editBtn.textContent="EDIT",iframe.parentNode.insertBefore(wrapper,iframe),wrapper.appendChild(iframe),wrapper.appendChild(editBtn)}))},handleOverlayClick=e=>{const editBtn=e.target.closest(".tiny-mediacms-edit-btn");if(!editBtn)return;e.preventDefault(),e.stopPropagation();const wrapper=editBtn.closest(".tiny-mediacms-iframe-wrapper");if(!wrapper)return;wrapper.querySelector("iframe")&&(editor.selection.select(wrapper),handleIframeAction())};editor.on("init",(()=>{(()=>{const editorDoc=editor.getDoc();if(!editorDoc)return;if(editorDoc.getElementById("tiny-mediacms-overlay-styles"))return;const style=editorDoc.createElement("style");style.id="tiny-mediacms-overlay-styles",style.textContent="\n            .tiny-mediacms-iframe-wrapper {\n                display: inline-block;\n                position: relative;\n                line-height: 0;\n                vertical-align: top;\n                margin-top: 40px;\n            }\n            .tiny-mediacms-iframe-wrapper iframe {\n                display: block;\n            }\n            .tiny-mediacms-edit-btn {\n                position: absolute;\n                top: -15px;\n                left: 50%;\n                transform: translateX(-50%);\n                background: rgba(0, 0, 0, 0.7);\n                color: #ffffff;\n                border: none;\n                border-radius: 3px;\n                cursor: pointer;\n                z-index: 10;\n                padding: 4px 12px;\n                margin: 0;\n                font-size: 12px;\n                font-weight: bold;\n                text-decoration: none;\n                box-shadow: 0 2px 4px rgba(0,0,0,0.3);\n                transition: background 0.15s, box-shadow 0.15s;\n                display: inline-block;\n                box-sizing: border-box;\n            }\n            .tiny-mediacms-edit-btn:hover {\n                background: rgba(0, 0, 0, 0.85);\n                box-shadow: 0 3px 6px rgba(0,0,0,0.4);\n            }\n        ",editorDoc.head.appendChild(style)})(),processIframes(),editor.getBody().addEventListener("click",handleOverlayClick)})),editor.on("SetContent",(()=>{processIframes()})),editor.on("PastePostProcess",(()=>{setTimeout(processIframes,100)})),editor.on("Undo Redo",(()=>{processIframes()})),editor.on("Change",(()=>{setTimeout(processIframes,50)})),editor.on("NodeChange",(()=>{processIframes()}))};_exports.getSetup=async()=>{const[iframeButtonText]=await(0,_str.getStrings)(["iframebuttontitle"].map((key=>({key:key,component:_common.component})))),[iframeButtonImage]=await Promise.all([(0,_utils.getButtonImage)("icon",_common.component)]);return editor=>{((editor,iframeButtonText,iframeButtonImage)=>{const handleIframeAction=()=>{new _iframeembed.default(editor).displayDialogue()};editor.ui.registry.addIcon(_common.iframeIcon,iframeButtonImage.html),editor.ui.registry.addToggleButton(_common.iframeButtonName,{icon:_common.iframeIcon,tooltip:iframeButtonText,onAction:handleIframeAction,onSetup:api=>{const selector=["iframe:not([data-mce-object]):not([data-mce-placeholder])",".tiny-iframe-responsive",".tiny-mediacms-iframe-wrapper",'a[data-mediacms-textlink="true"]'].join(",");return editor.selection.selectorChangedWithUnbind(selector,api.setActive).unbind}}),editor.ui.registry.addMenuItem(_common.iframeMenuItemName,{icon:_common.iframeIcon,text:iframeButtonText,onAction:handleIframeAction}),editor.ui.registry.addContextToolbar(_common.iframeButtonName,{predicate:isIframe,items:_common.iframeButtonName,position:"node",scope:"node"}),editor.ui.registry.addContextMenu(_common.iframeButtonName,{update:isIframe}),setupIframeOverlays(editor,handleIframeAction)})(editor,iframeButtonText,iframeButtonImage)}}}));
+
+//# sourceMappingURL=commands.min.js.map

lms-plugins/mediacms-moodle/tiny/mediacms/amd/build/common.min.js

@@ -0,0 +1,3 @@
+define("tiny_mediacms/common",["exports"],(function(_exports){Object.defineProperty(_exports,"__esModule",{value:!0}),_exports.default=void 0;return _exports.default={pluginName:"tiny_mediacms/plugin",component:"tiny_mediacms",iframeButtonName:"tiny_mediacms_iframe",iframeMenuItemName:"tiny_mediacms_iframe",iframeIcon:"tiny_mediacms_iframe"},_exports.default}));
+
+//# sourceMappingURL=common.min.js.map

lms-plugins/mediacms-moodle/tiny/mediacms/amd/build/common.min.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"common.min.js","sources":["../src/common.js"],"sourcesContent":["// This file is part of Moodle - http://moodle.org/\n//\n// Moodle is free software: you can redistribute it and/or modify\n// it under the terms of the GNU General Public License as published by\n// the Free Software Foundation, either version 3 of the License, or\n// (at your option) any later version.\n//\n// Moodle is distributed in the hope that it will be useful,\n// but WITHOUT ANY WARRANTY; without even the implied warranty of\n// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the\n// GNU General Public License for more details.\n//\n// You should have received a copy of the GNU General Public License\n// along with Moodle.  If not, see <http://www.gnu.org/licenses/>.\n\n/**\n * Tiny Media common values.\n *\n * @module      tiny_mediacms/common\n * @copyright   2022 Huong Nguyen <huongnv13@gmail.com>\n * @license     http://www.gnu.org/copyleft/gpl.html GNU GPL v3 or later\n */\n\nexport default {\n    pluginName: 'tiny_mediacms/plugin',\n    component: 'tiny_mediacms',\n    iframeButtonName: 'tiny_mediacms_iframe',\n    iframeMenuItemName: 'tiny_mediacms_iframe',\n    iframeIcon: 'tiny_mediacms_iframe',\n};\n"],"names":["pluginName","component","iframeButtonName","iframeMenuItemName","iframeIcon"],"mappings":"sKAuBe,CACXA,WAAY,uBACZC,UAAW,gBACXC,iBAAkB,uBAClBC,mBAAoB,uBACpBC,WAAY"}

lms-plugins/mediacms-moodle/tiny/mediacms/amd/build/configuration.min.js

@@ -0,0 +1,3 @@
+define("tiny_mediacms/configuration",["exports","./common","editor_tiny/utils"],(function(_exports,_common,_utils){Object.defineProperty(_exports,"__esModule",{value:!0}),_exports.configure=void 0;_exports.configure=instanceConfig=>{return{contextmenu:(0,_utils.addContextmenuItem)(instanceConfig.contextmenu,_common.iframeButtonName),menu:(menu=instanceConfig.menu,menu.insert.items="".concat(_common.iframeMenuItemName," ").concat(menu.insert.items),menu),toolbar:(toolbar=instanceConfig.toolbar,toolbar.map((section=>("content"===section.name&&section.items.unshift(_common.iframeButtonName),section))))};var toolbar,menu}}));
+
+//# sourceMappingURL=configuration.min.js.map

lms-plugins/mediacms-moodle/tiny/mediacms/amd/build/configuration.min.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"configuration.min.js","sources":["../src/configuration.js"],"sourcesContent":["// This file is part of Moodle - http://moodle.org/\n//\n// Moodle is free software: you can redistribute it and/or modify\n// it under the terms of the GNU General Public License as published by\n// the Free Software Foundation, either version 3 of the License, or\n// (at your option) any later version.\n//\n// Moodle is distributed in the hope that it will be useful,\n// but WITHOUT ANY WARRANTY; without even the implied warranty of\n// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the\n// GNU General Public License for more details.\n//\n// You should have received a copy of the GNU General Public License\n// along with Moodle.  If not, see <http://www.gnu.org/licenses/>.\n\n/**\n * Tiny Media configuration.\n *\n * @module      tiny_mediacms/configuration\n * @copyright   2022 Huong Nguyen <huongnv13@gmail.com>\n * @license     http://www.gnu.org/copyleft/gpl.html GNU GPL v3 or later\n */\n\nimport {\n    iframeButtonName,\n    iframeMenuItemName,\n} from './common';\nimport {\n    addContextmenuItem,\n} from 'editor_tiny/utils';\n\nconst configureMenu = (menu) => {\n    // Add the Iframe Embed to the insert menu.\n    menu.insert.items = `${iframeMenuItemName} ${menu.insert.items}`;\n\n    return menu;\n};\n\nconst configureToolbar = (toolbar) => {\n    // The toolbar contains an array of named sections.\n    // The Moodle integration ensures that there is a section called 'content'.\n\n    return toolbar.map((section) => {\n        if (section.name === 'content') {\n            // Insert the iframe button at the start of it.\n            section.items.unshift(iframeButtonName);\n        }\n\n        return section;\n    });\n};\n\nexport const configure = (instanceConfig) => {\n    // Update the instance configuration to add the Iframe Embed menu option to the menus and toolbars.\n    return {\n        contextmenu: addContextmenuItem(instanceConfig.contextmenu, iframeButtonName),\n        menu: configureMenu(instanceConfig.menu),\n        toolbar: configureToolbar(instanceConfig.toolbar),\n    };\n};\n"],"names":["instanceConfig","contextmenu","iframeButtonName","menu","insert","items","iframeMenuItemName","toolbar","map","section","name","unshift"],"mappings":"wNAoD0BA,uBAEf,CACHC,aAAa,6BAAmBD,eAAeC,YAAaC,0BAC5DC,MAzBeA,KAyBKH,eAAeG,KAvBvCA,KAAKC,OAAOC,gBAAWC,uCAAsBH,KAAKC,OAAOC,OAElDF,MAsBHI,SAnBkBA,QAmBQP,eAAeO,QAftCA,QAAQC,KAAKC,UACK,YAAjBA,QAAQC,MAERD,QAAQJ,MAAMM,QAAQT,0BAGnBO,aAVWF,IAAAA,QAPHJ"}

lms-plugins/mediacms-moodle/tiny/mediacms/amd/build/embedmodal.min.js

@@ -0,0 +1,3 @@
+define("tiny_mediacms/embedmodal",["exports","core/modal","./common"],(function(_exports,_modal,_common){var obj;function _defineProperty(obj,key,value){return key in obj?Object.defineProperty(obj,key,{value:value,enumerable:!0,configurable:!0,writable:!0}):obj[key]=value,obj}Object.defineProperty(_exports,"__esModule",{value:!0}),_exports.default=void 0,_modal=(obj=_modal)&&obj.__esModule?obj:{default:obj};class EmbedModal extends _modal.default{registerEventListeners(){super.registerEventListeners(),this.registerCloseOnSave(),this.registerCloseOnCancel()}configure(modalConfig){modalConfig.large=!0,modalConfig.removeOnClose=!0,modalConfig.show=!0,super.configure(modalConfig)}}return _exports.default=EmbedModal,_defineProperty(EmbedModal,"TYPE","".concat(_common.component,"/modal")),_defineProperty(EmbedModal,"TEMPLATE","".concat(_common.component,"/embed_media_modal")),_exports.default}));
+
+//# sourceMappingURL=embedmodal.min.js.map

lms-plugins/mediacms-moodle/tiny/mediacms/amd/build/embedmodal.min.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"embedmodal.min.js","sources":["../src/embedmodal.js"],"sourcesContent":["// This file is part of Moodle - http://moodle.org/\n//\n// Moodle is free software: you can redistribute it and/or modify\n// it under the terms of the GNU General Public License as published by\n// the Free Software Foundation, either version 3 of the License, or\n// (at your option) any later version.\n//\n// Moodle is distributed in the hope that it will be useful,\n// but WITHOUT ANY WARRANTY; without even the implied warranty of\n// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the\n// GNU General Public License for more details.\n//\n// You should have received a copy of the GNU General Public License\n// along with Moodle.  If not, see <http://www.gnu.org/licenses/>.\n\n/**\n * Embedded Media Management Modal for Tiny.\n *\n * @module      tiny_mediacms/embedmodal\n * @copyright   2022 Andrew Lyons <andrew@nicols.co.uk>\n * @license     http://www.gnu.org/copyleft/gpl.html GNU GPL v3 or later\n */\n\nimport Modal from 'core/modal';\nimport {component} from './common';\n\nexport default class EmbedModal extends Modal {\n    static TYPE = `${component}/modal`;\n    static TEMPLATE = `${component}/embed_media_modal`;\n\n    registerEventListeners() {\n        // Call the parent registration.\n        super.registerEventListeners();\n\n        // Register to close on save/cancel.\n        this.registerCloseOnSave();\n        this.registerCloseOnCancel();\n    }\n\n    configure(modalConfig) {\n        modalConfig.large = true;\n        modalConfig.removeOnClose = true;\n        modalConfig.show = true;\n\n        super.configure(modalConfig);\n    }\n}\n"],"names":["EmbedModal","Modal","registerEventListeners","registerCloseOnSave","registerCloseOnCancel","configure","modalConfig","large","removeOnClose","show","component"],"mappings":"iaA0BqBA,mBAAmBC,eAIpCC,+BAEUA,8BAGDC,2BACAC,wBAGTC,UAAUC,aACNA,YAAYC,OAAQ,EACpBD,YAAYE,eAAgB,EAC5BF,YAAYG,MAAO,QAEbJ,UAAUC,iEAlBHN,4BACAU,6CADAV,gCAEIU"}

lms-plugins/mediacms-moodle/tiny/mediacms/amd/build/iframemodal.min.js

@@ -0,0 +1,3 @@
+define("tiny_mediacms/iframemodal",["exports","core/modal","./common"],(function(_exports,_modal,_common){var obj;function _defineProperty(obj,key,value){return key in obj?Object.defineProperty(obj,key,{value:value,enumerable:!0,configurable:!0,writable:!0}):obj[key]=value,obj}Object.defineProperty(_exports,"__esModule",{value:!0}),_exports.default=void 0,_modal=(obj=_modal)&&obj.__esModule?obj:{default:obj};class IframeModal extends _modal.default{registerEventListeners(){super.registerEventListeners(),this.registerCloseOnSave(),this.registerCloseOnCancel()}configure(modalConfig){modalConfig.large=!0,modalConfig.removeOnClose=!0,modalConfig.show=!0,super.configure(modalConfig)}}return _exports.default=IframeModal,_defineProperty(IframeModal,"TYPE","".concat(_common.component,"/iframemodal")),_defineProperty(IframeModal,"TEMPLATE","".concat(_common.component,"/iframe_embed_modal")),_exports.default}));
+
+//# sourceMappingURL=iframemodal.min.js.map

lms-plugins/mediacms-moodle/tiny/mediacms/amd/build/iframemodal.min.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"iframemodal.min.js","sources":["../src/iframemodal.js"],"sourcesContent":["// This file is part of Moodle - http://moodle.org/\n//\n// Moodle is free software: you can redistribute it and/or modify\n// it under the terms of the GNU General Public License as published by\n// the Free Software Foundation, either version 3 of the License, or\n// (at your option) any later version.\n//\n// Moodle is distributed in the hope that it will be useful,\n// but WITHOUT ANY WARRANTY; without even the implied warranty of\n// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the\n// GNU General Public License for more details.\n//\n// You should have received a copy of the GNU General Public License\n// along with Moodle.  If not, see <http://www.gnu.org/licenses/>.\n\n/**\n * Iframe Embed Modal for Tiny Media2.\n *\n * @module      tiny_mediacms/iframemodal\n * @copyright   2024\n * @license     http://www.gnu.org/copyleft/gpl.html GNU GPL v3 or later\n */\n\nimport Modal from 'core/modal';\nimport {component} from './common';\n\nexport default class IframeModal extends Modal {\n    static TYPE = `${component}/iframemodal`;\n    static TEMPLATE = `${component}/iframe_embed_modal`;\n\n    registerEventListeners() {\n        // Call the parent registration.\n        super.registerEventListeners();\n\n        // Register to close on save/cancel.\n        this.registerCloseOnSave();\n        this.registerCloseOnCancel();\n    }\n\n    configure(modalConfig) {\n        modalConfig.large = true;\n        modalConfig.removeOnClose = true;\n        modalConfig.show = true;\n\n        super.configure(modalConfig);\n    }\n}\n"],"names":["IframeModal","Modal","registerEventListeners","registerCloseOnSave","registerCloseOnCancel","configure","modalConfig","large","removeOnClose","show","component"],"mappings":"kaA0BqBA,oBAAoBC,eAIrCC,+BAEUA,8BAGDC,2BACAC,wBAGTC,UAAUC,aACNA,YAAYC,OAAQ,EACpBD,YAAYE,eAAgB,EAC5BF,YAAYG,MAAO,QAEbJ,UAAUC,kEAlBHN,6BACAU,mDADAV,iCAEIU"}

lms-plugins/mediacms-moodle/tiny/mediacms/amd/build/imagehelpers.min.js

@@ -0,0 +1,10 @@
+define("tiny_mediacms/imagehelpers",["exports","core/templates"],(function(_exports,_templates){var obj;
+/**
+   * Tiny media plugin image helpers.
+   *
+   * @module      tiny_mediacms/imagehelpers
+   * @copyright   2024 Meirza <meirza.arson@moodle.com>
+   * @license     http://www.gnu.org/copyleft/gpl.html GNU GPL v3 or later
+   */Object.defineProperty(_exports,"__esModule",{value:!0}),_exports.showElements=_exports.isPercentageValue=_exports.hideElements=_exports.footerImageInsert=_exports.footerImageDetails=_exports.bodyImageInsert=_exports.bodyImageDetails=void 0,_templates=(obj=_templates)&&obj.__esModule?obj:{default:obj};_exports.bodyImageInsert=async(templateContext,root)=>_templates.default.renderForPromise("tiny_mediacms/insert_image_modal_insert",{...templateContext}).then((_ref=>{let{html:html,js:js}=_ref;_templates.default.replaceNodeContents(root.querySelector(".tiny_imagecms_body_template"),html,js)})).catch((error=>{window.console.log(error)}));_exports.footerImageInsert=async(templateContext,root)=>_templates.default.renderForPromise("tiny_mediacms/insert_image_modal_insert_footer",{...templateContext}).then((_ref2=>{let{html:html,js:js}=_ref2;_templates.default.replaceNodeContents(root.querySelector(".tiny_imagecms_footer_template"),html,js)})).catch((error=>{window.console.log(error)}));_exports.bodyImageDetails=async(templateContext,root)=>_templates.default.renderForPromise("tiny_mediacms/insert_image_modal_details",{...templateContext}).then((_ref3=>{let{html:html,js:js}=_ref3;_templates.default.replaceNodeContents(root.querySelector(".tiny_imagecms_body_template"),html,js)})).catch((error=>{window.console.log(error)}));_exports.footerImageDetails=async(templateContext,root)=>_templates.default.renderForPromise("tiny_mediacms/insert_image_modal_details_footer",{...templateContext}).then((_ref4=>{let{html:html,js:js}=_ref4;_templates.default.replaceNodeContents(root.querySelector(".tiny_imagecms_footer_template"),html,js)})).catch((error=>{window.console.log(error)}));_exports.showElements=(elements,root)=>{if(elements instanceof Array)elements.forEach((elementSelector=>{const element=root.querySelector(elementSelector);element&&element.classList.remove("d-none")}));else{const element=root.querySelector(elements);element&&element.classList.remove("d-none")}};_exports.hideElements=(elements,root)=>{if(elements instanceof Array)elements.forEach((elementSelector=>{const element=root.querySelector(elementSelector);element&&element.classList.add("d-none")}));else{const element=root.querySelector(elements);element&&element.classList.add("d-none")}};_exports.isPercentageValue=value=>value.match(/\d+%/)}));
+
+//# sourceMappingURL=imagehelpers.min.js.map