# Example Output - How the Filter Works

## Input (What users paste)

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

## Output (What gets rendered)

### HTML Generated by Filter

```html
<div class="mediacms-lti-embed">
    <!-- The iframe where the video will load -->
    <iframe
        id="mediacms_lti_65b8f9a3e4c21"
        width="960"
        height="540"
        frameborder="0"
        allowfullscreen
        style="max-width: 100%;">
    </iframe>

    <!-- Auto-submit form that initiates LTI authentication -->
    <form
        id="mediacms_lti_65b8f9a3e4c21_form"
        action="https://deic.mediacms.io/lti/oidc/login/"
        method="POST"
        target="mediacms_lti_65b8f9a3e4c21"
        style="display: none;">

        <!-- LTI Platform Issuer (your Moodle URL) -->
        <input type="hidden" name="iss" value="https://your-moodle-site.com" />

        <!-- LTI Client ID from tool configuration -->
        <input type="hidden" name="client_id" value="ABC123XYZ" />

        <!-- Current user's Moodle ID -->
        <input type="hidden" name="login_hint" value="42" />

        <!-- Where to go after authentication, with video token -->
        <input type="hidden" name="target_link_uri" value="https://deic.mediacms.io/lti/launch/?media_friendly_token=KmITliaUC" />
    </form>

    <!-- JavaScript to auto-submit the form immediately -->
    <script>
        document.getElementById('mediacms_lti_65b8f9a3e4c21_form').submit();
    </script>
</div>
```

## What Happens Step-by-Step

### 1. User Views Page
```
User opens Moodle page containing the MediaCMS URL
↓
Filter detects: https://deic.mediacms.io/view?m=KmITliaUC
↓
Extracts video token: KmITliaUC
```

### 2. HTML Generation
```
Filter generates:
- Iframe with unique ID
- Hidden form with LTI parameters
- JavaScript to auto-submit
```

### 3. LTI Authentication Flow
```
Form submits to MediaCMS OIDC endpoint
↓
MediaCMS receives:
  - iss: https://your-moodle-site.com
  - client_id: ABC123XYZ
  - login_hint: 42 (user's Moodle ID)
  - target_link_uri: https://deic.mediacms.io/lti/launch/?media_friendly_token=KmITliaUC
↓
MediaCMS redirects to Moodle's auth endpoint
↓
Moodle validates and creates JWT token
↓
Moodle POSTs JWT back to MediaCMS
↓
MediaCMS validates JWT and creates session
↓
MediaCMS redirects to /lti/embed/KmITliaUC/
↓
MediaCMS checks permissions and redirects to /view?m=KmITliaUC
↓
Video loads in iframe!
```

### 4. User Experience
```
User sees:
1. Page loads
2. Empty iframe appears briefly (< 1 second)
3. Video player loads inside iframe
4. Video starts playing
```

## Real-World Examples

### Example 1: Course Page

**Input:**
```html
<p>Welcome to the course! Watch this introduction:</p>
<p>https://deic.mediacms.io/view?m=KmITliaUC</p>
```

**Output:**
```html
<p>Welcome to the course! Watch this introduction:</p>
<div class="mediacms-lti-embed">
    <iframe id="mediacms_lti_..." width="960" height="540" ...></iframe>
    <form id="mediacms_lti_..._form" ...>...</form>
    <script>...</script>
</div>
```

### Example 2: Multiple Videos

**Input:**
```html
<h2>Week 1 Videos</h2>
<p>Lecture 1: https://deic.mediacms.io/view?m=ABC123</p>
<p>Lecture 2: https://deic.mediacms.io/view?m=XYZ789</p>
```

**Output:**
```html
<h2>Week 1 Videos</h2>
<p>Lecture 1:
    <div class="mediacms-lti-embed">
        <iframe id="mediacms_lti_abc_..." ...></iframe>
        ...
    </div>
</p>
<p>Lecture 2:
    <div class="mediacms-lti-embed">
        <iframe id="mediacms_lti_xyz_..." ...></iframe>
        ...
    </div>
</p>
```

Each video gets its own iframe with its own LTI authentication!

### Example 3: Mixed Content

**Input:**
```html
<p>Check out this resource:</p>
<p><a href="https://example.com">Regular link</a></p>
<p>https://deic.mediacms.io/view?m=KmITliaUC</p>
<p>Another link: https://google.com</p>
```

**Output:**
```html
<p>Check out this resource:</p>
<p><a href="https://example.com">Regular link</a></p>
<div class="mediacms-lti-embed">
    <iframe id="mediacms_lti_..." ...></iframe>
    ...
</div>
<p>Another link: https://google.com</p>
```

Only MediaCMS URLs are converted! Other URLs remain unchanged.

## Performance Notes

- **Fast Detection**: Regex-based URL matching is extremely fast
- **No Database Queries**: Configuration is cached
- **Lazy Loading**: Videos only load when iframe initiates LTI flow
- **Minimal Overhead**: Each conversion adds ~500 bytes of HTML

## Security Notes

- **User Context**: Each iframe uses the current user's Moodle ID
- **CSRF Protected**: LTI flow includes state/nonce validation
- **Domain Restricted**: Only configured MediaCMS domain is processed
- **Guest Users**: Filter doesn't run for guest users (returns original text)

## Browser Compatibility

Works in all modern browsers:
- ✅ Chrome/Edge (Chromium)
- ✅ Firefox
- ✅ Safari
- ✅ Mobile browsers (iOS Safari, Chrome Mobile)

## Troubleshooting Examples

### If URL Doesn't Convert

**Check these patterns:**
```
✅ https://deic.mediacms.io/view?m=KmITliaUC
✅ https://deic.mediacms.io/embed?m=KmITliaUC
❌ https://deic.mediacms.io/view/KmITliaUC (no ?m= parameter)
❌ http://other-domain.com/view?m=KmITliaUC (wrong domain)
```

### If Video Doesn't Load

**Check browser console:**
```javascript
// Expected: No errors
// If you see CORS errors: Check MediaCMS iframe settings
// If you see 403 Forbidden: Check LTI configuration
// If you see 404: Check MediaCMS URL in settings
```

---

**This is what makes the transparent LTI authentication possible!**
