Custom Episode Views

MediaMagic CRM includes highly customized episode detail and edit views with workstream panels and inline editing capabilities.

Overview

Episodes have three main custom views:

Detail View: Comprehensive episode display with workstream tracking
Edit View: Inline editing with panels and progress tracking
Kanban View: Visual pipeline management

Detail View

Layout Structure

The episode detail view uses a custom template with:

Top Section:

Episode header with title and metadata
Quick action buttons (Edit, Publish, Archive)
Status indicators and progress bars

Workstream Panels:

┌─────────────────────────────────────────────────────┐
│ 📋 PLANNING                              [Completed] │
├─────────────────────────────────────────────────────┤
│ ✓ Episode concept defined                           │
│ ✓ Guests confirmed                                  │
│ ✓ Show notes prepared                               │
└─────────────────────────────────────────────────────┘

┌─────────────────────────────────────────────────────┐
│ 🎬 PRODUCTION                            [In Progress]│
├─────────────────────────────────────────────────────┤
│ ⏺ Recording Status: Complete                         │
│ 📝 Transcript Status: Generated                      │
│ ✂️ Edit Status: In Progress                          │
│ 🎞️ Clips Cut: 3 of 5                                 │
└─────────────────────────────────────────────────────┘

┌─────────────────────────────────────────────────────┐
│ 📡 DISTRIBUTION                          [Queued]    │
├─────────────────────────────────────────────────────┤
│ YouTube: Queued                                      │
│ Rumble: Queued                                       │
│ Boxcast: Not Set                                     │
└─────────────────────────────────────────────────────┘

Related Records:

Guest appearances
Related videos
Social posts
Clips generated

Workstream Panel Features

Each workstream panel includes:

Progress Indicator: Visual progress bar
Status Fields: Current status for each workflow step
Checklist Items: Actionable tasks
Quick Actions: Buttons for common actions
Related Records: Linked content

Custom Template

Location: espocrm/custom/client/res/templates/cepisode/record/detail.tpl

handlebars

<div class="episode-detail-container">
  {{#if showHeader}}
    <div class="episode-header">
      <h1>{{episodeTitle}}</h1>
      <div class="episode-meta">
        <span class="show-name">{{showName}}</span>
        <span class="episode-number">{{episodeNumber}}</span>
        <span class="scheduled-date">{{scheduledDate}}</span>
      </div>
    </div>
  {{/if}}
  
  <div class="workstream-panels">
    {{> episode-workstreams}}
  </div>
  
  <div class="episode-content">
    {{{body}}}
  </div>
</div>

Edit View

Inline Editing

The edit view provides inline editing capabilities:

Panel-Based Layout: Organized by workflow stage
Inline Field Editing: Click to edit individual fields
Auto-Save: Changes save automatically
Validation: Real-time field validation
Undo/Redo: Track changes

Edit Panels

The edit view is divided into panels:

┌─────────────────────────────────────────┐
│ 📋 Basic Information                    │
│ ┌─────────────────────────────────────┐ │
│ │ Title: [Episode Title Here]         │ │
│ │ Show: [Dropdown: Select Show]       │ │
│ │ Number: [42]                        │ │
│ │ Date: [2026-02-09 10:00 AM]        │ │
│ └─────────────────────────────────────┘ │
└─────────────────────────────────────────┘

┌─────────────────────────────────────────┐
│ 🎙️ Production Details                   │
│ ┌─────────────────────────────────────┐ │
│ │ Recording URL: [URL here]           │ │
│ │ Transcript: [Generated ✓]          │ │
│ │ AI Analysis: [View/Edit]           │ │
│ └─────────────────────────────────────┘ │
└─────────────────────────────────────────┘

┌─────────────────────────────────────────┐
│ 🎯 Publishing                           │
│ ┌─────────────────────────────────────┐ │
│ │ Platforms: [☑ YouTube ☑ Rumble]    │ │
│ │ Publish Date: [2026-02-10]         │ │
│ │ Thumbnail: [Upload/Edit]           │ │
│ └─────────────────────────────────────┘ │
└─────────────────────────────────────────┘

Custom Edit Template

Location: espocrm/custom/client/res/templates/cepisode/record/edit.tpl

Features:

Tabbed interface for different sections
Collapsible panels
Drag-and-drop file upload
Rich text editor for show notes
Guest selector with search
Platform multi-select with priorities

Workstream Panel View

The workstream panel is a reusable component used in both detail and edit views.

View Class

Location: espocrm/custom/client/src/views/cepisode/record/detail-workstreams.js

javascript

define('custom:views/cepisode/record/detail-workstreams', 
  ['view'], function (Dep) {
  
  return Dep.extend({
    template: 'cepisode/record/detail-workstreams',
    
    data: function() {
      return {
        planningProgress: this.calculateProgress('planning'),
        productionProgress: this.calculateProgress('production'),
        distributionProgress: this.calculateProgress('distribution'),
        
        recordingStatus: this.model.get('ampRecordingStatus'),
        transcriptStatus: this.model.get('ampTranscriptStatus'),
        editStatus: this.model.get('ampEditStatus'),
        clipsCut: this.model.get('ampClipsCut') || 0
      };
    },
    
    calculateProgress: function(workstream) {
      // Calculate completion percentage for workstream
      const fields = this.getWorkstreamFields(workstream);
      const completed = fields.filter(f => this.isComplete(f));
      return (completed.length / fields.length) * 100;
    },
    
    setup: function() {
      this.listenTo(this.model, 'change', () => {
        this.reRender();
      });
    }
  });
});

Progress Calculation

Workstream progress is calculated based on field completion:

Workstream	Progress Fields	Calculation
Planning	concept, guests, notes, thumbnail	% complete
Production	recording, transcript, edit, clips	% complete
Distribution	platform records, social posts	% published

A modal dialog for quick episode updates without full page navigation.

Features

Popup Edit Form: Edit without leaving current page
Key Fields Only: Focus on most-changed fields
Quick Save: Save with validation
Used In: Kanban cards, list views, calendars

Trigger Locations

The quick edit modal can be triggered from:

Kanban Board: Click episode card → Quick Edit
List View: Row action menu → Quick Edit
Calendar View: Click event → Quick Edit
Related Panels: Linked episodes → Quick Edit

Location: espocrm/custom/client/src/views/modals/episode-quick-edit.js

javascript

define('custom:views/modals/episode-quick-edit', 
  ['views/modal'], function (Dep) {
  
  return Dep.extend({
    template: 'modals/episode-quick-edit',
    className: 'dialog dialog-record quick-edit-modal',
    
    setup: function() {
      this.header = 'Quick Edit: ' + this.model.get('name');
      
      // Only show key fields
      this.fieldList = [
        'stage',
        'scheduledDate',
        'recordingUrl',
        'platforms'
      ];
      
      this.createFieldViews();
    },
    
    actionSave: function() {
      this.save().then(() => {
        this.trigger('after:save');
        this.close();
      });
    }
  });
});

Calendar View

Episodes can be viewed in a calendar format showing scheduled recordings and publish dates.

Calendar Features

Month/Week/Day Views: Multiple time scales
Drag-and-Drop: Reschedule by dragging
Color Coding: By stage or show
Quick Preview: Hover for episode details
Quick Edit: Click to edit inline

View Class

Location: espocrm/custom/client/src/views/cepisode/record/calendar.js

The calendar view integrates with FullCalendar and shows:

Scheduled recordings
Publish dates
Guest appearances
Livestream events

Custom Styling

Episode Detail CSS

Location: espocrm/custom/client/css/cepisode-detail.css

Key style sections:

css

/* Episode header styling */
.episode-header {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  padding: 2rem;
  color: white;
}

/* Workstream panels */
.workstream-panel {
  border: 1px solid #e5e7eb;
  border-radius: 8px;
  margin-bottom: 1.5rem;
  background: white;
}

.workstream-panel.planning { border-left: 4px solid #3b82f6; }
.workstream-panel.production { border-left: 4px solid #f59e0b; }
.workstream-panel.distribution { border-left: 4px solid #10b981; }

/* Progress bars */
.progress-bar {
  height: 8px;
  background: #e5e7eb;
  border-radius: 4px;
  overflow: hidden;
}

.progress-bar-fill {
  height: 100%;
  background: #3b82f6;
  transition: width 0.3s ease;
}

Episode Edit CSS

Location: espocrm/custom/client/css/cepisode-edit.css

Features:

Panel styling
Inline editing states
Field validation indicators
Auto-save status

JavaScript Utilities

Episode Controller

Location: espocrm/custom/client/src/controllers/cepisode.js

javascript

define('custom:controllers/cepisode', ['controller'], function (Dep) {
  
  return Dep.extend({
    defaultAction: 'list',
    
    // Custom actions
    actionQuickEdit: function(options) {
      const id = options.id;
      this.getModel(id).then(model => {
        this.createView('quickEdit', 
          'custom:views/modals/episode-quick-edit', {
          model: model
        }).render();
      });
    },
    
    actionGenerateClips: function(options) {
      // Trigger clip generation workflow
    },
    
    actionPublishAll: function(options) {
      // Publish to all platforms
    }
  });
});

Access Control

Episode views respect EspoCRM access control:

Read: Can view detail and list
Edit: Can use edit view and quick edit
Delete: Can remove episodes
Create: Can create new episodes

Field-level security is enforced per user role.

ContentProduction Entity — Episode schema
HyperDeck Integration — Recording integration
Bridge API — Core API documentation
Platform Management — Distribution entities

Custom Episode Views ​

Overview ​

Detail View ​

Layout Structure ​

Workstream Panel Features ​

Custom Template ​

Edit View ​

Inline Editing ​

Edit Panels ​

Custom Edit Template ​

Workstream Panel View ​

View Class ​

Progress Calculation ​

Episode Quick Edit Modal ​

Features ​

Trigger Locations ​

Modal View ​

Calendar View ​

Calendar Features ​

View Class ​

Custom Styling ​

Episode Detail CSS ​

Episode Edit CSS ​

JavaScript Utilities ​

Episode Controller ​

Access Control ​

Related Documentation ​

Custom Episode Views

Overview

Detail View

Layout Structure

Workstream Panel Features

Custom Template

Edit View

Inline Editing

Edit Panels

Custom Edit Template

Workstream Panel View

View Class

Progress Calculation

Episode Quick Edit Modal

Features

Trigger Locations

Modal View

Calendar View

Calendar Features

View Class

Custom Styling

Episode Detail CSS

Episode Edit CSS

JavaScript Utilities

Episode Controller

Access Control

Related Documentation