Video Loop Control

WayPresenter gives you complete control over video playback with flexible loop options for both projected content and background videos.

Overview

• Loop Toggle: Enable/disable video looping from the preview player or global settings
• Background Videos: Loop videos used as backgrounds behind text content
• Preview Control: Quick toggle button on the preview media controls
• Global Setting: System-wide default for all video playback
• Unified Control: One setting controls all video loop behavior

Features

1. Preview Player Loop Toggle

Access: Directly on the preview monitor when a video is playing

How to Use:

1. Open a video in the preview monitor
2. Media controls appear below the video
3. Click the loop button (↻ icon) to toggle looping on/off
4. Visual Feedback:
   • Off: Gray icon with slash through it
   • On: Orange icon with glow effect

Benefits:

• Quick access during presentations
• Instant visual feedback
• No need to navigate settings
• Per-session control

2. Global Loop Setting

Access: Settings → Display → Media Settings

How to Use:

1. Open Settings (gear icon)
2. Go to Display tab
3. Find Media Settings section
4. Toggle "Loop Videos" on or off
5. Setting applies to all videos (content and backgrounds)

Default: Off (videos play once and stop)

3. Background Video Loop Control

Access: Same global setting above

How to Use:

1. Set a video as background (via background selector in Monitor)
2. Enable/disable loop using the global Loop Videos setting
3. Video will loop (or not) in the background behind your text content

Perfect For:

• Worship backgrounds with ambient motion
• Animated loops behind lyrics
• Service intro/announcement videos

Use Cases

When to Enable Loop (ON)

Content Videos:

• Background videos for ambient atmosphere
• Motion graphics backgrounds
• Looped visual elements
• Worship service backgrounds

Preview Mode:

• Testing video loops before sending to live
• Reviewing looping behavior
• Setting up ambient backgrounds

When to Disable Loop (OFF)

Content Videos:

• One-time announcements
• Intro videos
• Announcement videos that should play once then hold on final frame
• Videos with clear ending points

Preview Mode:

• Checking video duration
• Analyzing video content
• Testing one-time playback

Technical Details

Loop States

Preview Monitor:

• Uses playbackState.loop from Zustand store
• Persists during preview session
• Resets when switching to different media
• Toggle button in media controls

Live Output:

• Uses settings.theme.loopVideo from theme settings
• Persists across app restarts
• Controlled by global setting

Background Videos:

• Uses settings.theme.loopVideo from theme settings
• Same setting controls both content and background videos
• Unified control for consistency

Video Element Properties

When loop is enabled:

<video loop autoplay muted playsinline>

When loop is disabled:

<video autoplay muted playsinline>

Event Handling

MediaControls Component:

• Syncs loop state on media load
• Updates video element when toggled
• Persists state during playback

Monitor/OutputWindow:

• Reads loop setting from theme/playbackState
• Applies to video elements when rendering
• Automatic sync when setting changes

Performance Considerations

Memory Efficiency

• ✅ Event listeners properly cleaned up
• ✅ No memory leaks when switching videos
• ✅ Efficient state synchronization

Rendering Optimization

• ✅ Conditional checks prevent unnecessary DOM updates
• ✅ React.memo for expensive computations
• ✅ Proper dependency arrays in useEffect

Keyboard Shortcuts

Currently, loop toggle is mouse/touch only via the UI button. Future enhancements may include:

• Keyboard shortcut (e.g., L key)
• MIDI controller mapping
• Voice command integration

Troubleshooting

Loop Toggle Not Working

Check 1: Is the video actually playing?

• Videos must be playing for loop to take effect
• Check if video is paused/stopped

Check 2: Is the loop button visible?

• Media controls only show on preview monitor
• Must have a video loaded in preview

Check 3: Visual confirmation

• OFF state: Gray icon with slash (✗)
• ON state: Orange icon with glow (✓)

Background Video Not Looping

Check 1: Is global setting enabled?

• Go to Settings → Media → Video Playback Settings
• Toggle should be ON (orange)

Check 2: Is background video actually set?

• Background selector should show selected video
• Check if video file is valid

Check 3: Is content displayed as overlay?

• Background videos show behind text content
• Ensure overlay mode is enabled

Loop Toggle Not Persisting

Expected Behavior:

• Preview mode: Loop state resets when switching videos
• Live mode: Loop state persists based on theme setting

Solution: Enable global setting for persistent behavior

Comparison: Loop ON vs Loop OFF

Advanced Configuration

Default Loop State

The default loop state is OFF (false). This means:

• Videos play once and stop by default
• User must explicitly enable looping
• Prevents unwanted repeated playback
• Better for one-time announcements

Per-Media Loop Control (Future)

Currently, loop is a global setting. Future enhancements may include:

• Per-video loop settings
• Playlist-level loop control
• Category-based defaults (e.g., intros don't loop, backgrounds do)

Integration with Other Features

Works With:

• ✅ Text overlay mode (background videos with lyrics on top)
• ✅ Slide transitions (background persists across slides)
• �NDI streaming (loop state carries to network output)
• ✅ Multiple monitors (each maintains own state)
• ✅ Media library (loop setting persists across selections)

Best Practices

For Worship Services

1. Background Videos: Enable loop for ambient backgrounds
2. Service Intros: Disable loop for one-time playback
3. Motion Graphics: Enable loop for continuous motion
4. Announcement Videos: Disable loop to play once

For Content Creators

1. Design loops with purpose: Create seamless loops
2. Test in preview first: Use preview toggle to verify
3. Consider audience: Don't distract with unwanted loops
4. Plan around transitions: Loop vs. static as needed

For Presenters

1. Preview before going live: Verify loop behavior
2. Use visual cues: Check loop icon state (slash = off, orange = on)
3. Plan your content: Know which videos should loop
4. Test flow: Practice transitions with looping content

Video Format Recommendations

Best Formats for Looping

MP4 (H.264):

• ✅ Widest compatibility
• ✅ Good compression
• ✅ Hardware acceleration support
• Recommended for most use cases

WebM:

• ✅ Open source
• ✅ Good compression
• ⚠️ May not work on all systems

Loop Optimization Tips

Seamless Loops:

• Ensure last frame matches first frame
• Use fade transitions at loop point
• Avoid obvious jump cuts
• Test loop multiple times

File Size:

• Smaller files = better performance
• Optimize for web playback
• Consider data caps (if streaming)

Duration:

• Shorter loops (5-30 seconds) work best
• Longer loops are acceptable but use more memory
• Very long loops may impact performance

Related Features

• Background Video Selector: Choose videos for backgrounds
• Text Overlay Mode: Display text over looping videos
• NDI Streaming: Send looped content to vMix/OBS
• Media Controls: Full playback control (play, pause, seek, volume)
• Preview/Live Monitors: Independent loop control per monitor

Support

For issues or questions:

• Check loop icon state (visual feedback is immediate)
• Verify video file format compatibility
• Test in preview mode before going live
• Check Settings → Media → Video Playback Settings
• Review this documentation for troubleshooting tips

Version History

• v1.1 (2026-04-05): Media Settings moved to Media tab

  • Moved from Settings → Display to Settings → Media
  • Enhanced documentation with use cases and examples
  • Added visual feedback indicators (slash overlay when off)

• v1.0 (2026-04-05): Initial release with loop toggle

  • Preview player loop button
  • Global loop setting in Settings
  • Background video loop control
  • Unified control across all video playback