klop51/ShortGenerator
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: Add comprehensive coding pattern and documentation guidelines

Browse Source
This commit is contained in:
klop51 2025-08-11 23:28:39 +02:00
parent a029a670a4
commit 60b9d4038b
2 changed files with 589 additions and 90 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

330
.github/copilot-instructions.md vendored Normal file
View File

@ -0,0 +1,330 @@
# Coding pattern preferences
- Always prefer simple solutions
- Avoid duplication of code whenever possible, which means checking for other areas of the codebase that might already have similar code and functionality
- Write code that takes into account the different environments: dev, test, and prod
- You are careful to only make changes that are requested or you are confident are well understood and related to the change being requested
- When fixing an issue or bug, do not introduce a new pattern or technology without first exhausting all options for the existing implementation. And if you finally do this, make sure to remove the old implementation afterwards so we don’t have duplicate logic.
- Keep the codebase very clean and organized
- Avoid having files over 500 lines of code. Refactor at that point.
- Mocking data is only needed for tests, never mock data for dev or prod
- Never add stubbing or fake data patterns to code that affects the dev or prod environments
- Never overwrite my .env file without first asking and confirming
- Never ask the user to provide the content of a specific file. Just open the file and check it yourself.
- Never create multiple files for sql execution. Always use a single file for all sql execution in a given migration.
- Never fix the symptoms of a problem, always fix the root cause of the problem.
# File Documentation Completion Requirements
**MANDATORY: When updating a file to "match the new copilot instructions", you MUST:**
1. **Complete the ENTIRE file** - Document every method, function, class, and significant code block
2. **Check for syntax errors** - Always verify the file compiles without errors after changes
3. **Test incrementally** - Use the get_errors tool after each major change to catch issues early
4. **Document systematically** - Go through the file from top to bottom, ensuring no method is left undocumented
5. **Maintain functionality** - Never break existing functionality while adding documentation
6. **Use proper comment syntax** - Always use the correct comment format for the programming language
7. **Validate completeness** - Before considering the task complete, review the entire file to ensure every function has documentation
**File Documentation Checklist:**
- [ ] File header with comprehensive description
- [ ] Every class documented with JSDoc
- [ ] Every method/function documented with JSDoc
- [ ] Every significant code block has educational comments
- [ ] Business context explained for complex logic
- [ ] Technical implementation details provided
- [ ] Error handling approaches documented
- [ ] Integration points with other modules explained
- [ ] No syntax errors remain in the file
- [ ] File compiles and functions properly
**If a file is large (>1000 lines):**
- Work in sections but complete ALL sections
- Add section dividers with clear documentation
- Use get_errors tool frequently to catch issues
- Test syntax after each major section
- Document the overall file architecture in the header
**Quality Standards:**
- Documentation should be educational and explain both WHAT and WHY
- Include business context for complex features
- Explain integration points and dependencies
- Use examples where helpful
- Write for developers who are new to the codebase
# Coding workflow preferences
- Focus on the areas of code relevant to the task
- Always use a surgical approach to code changes either removing or adding code while preserving all other functionalities.
- Do not touch code that is unrelated to the task
- Avoid making major changes to the patterns and architecture of how a feature works, after it has shown to work well, unless explicitly instructed
- Always think about what other methods and areas of code might be affected by code changes
## Configuration File Documentation
### For Configuration Files (package.json, tsconfig.json, etc.):
```javascript
/**
* [Configuration Purpose]
* Author: Dario Pascoal
*
* Description: [What this configuration controls and its main purpose]
*
* Important Notes: [Any critical information about changes or compatibility]
*/
```
## Version Control Guidelines
### Commit Message Standards
Follow conventional commit format:
- **feat**: New features or functionality
- **fix**: Bug fixes and corrections
- **docs**: Documentation updates (README, comments, etc.)
- **style**: Code formatting and style changes
- **refactor**: Code restructuring without functionality changes
- **test**: Adding or updating tests
- **chore**: Maintenance tasks, dependency updates
Examples:
- `feat: add SAP connection configuration panel`
- `fix: resolve memory leak in VBS process management`
- `docs: update README with new installation requirements`
# Code Documentation Requirements
## File Headers
Every source code file should include a comprehensive header:
### For TypeScript/JavaScript files:
```javascript
/**
* [File Purpose/Component Name]
* Author: Dario Pascoal
*
* Description: [Detailed explanation of what this file does, its main purpose,
* and how it fits into the overall system. Explain it as if teaching someone
* who is new to programming.]
*/
```
### For HTML/CSS files:
```css
/**
* [File Purpose/Component Name]
* Author: Dario Pascoal
*
* Description: [Detailed explanation of what this file does, its main purpose,
* and how it fits into the overall system. Explain it as if teaching someone
* who is new to programming.]
*/
```
### For VBScript files (.vbs):
```vb
' [File Purpose/Component Name]
' Author: Dario Pascoal
'
' Description: [Detailed explanation of what this file does, its main purpose,
' and how it fits into the overall system. Explain it as if teaching someone
' who is new to programming.]
'
' [Additional sections as needed: Prerequisites, Parameters, Returns, etc.]
```
### For PowerShell files (.ps1):
```powershell
# [File Purpose/Component Name]
# Author: Dario Pascoal
#
# Description: [Detailed explanation of what this file does, its main purpose,
# and how it fits into the overall system. Explain it as if teaching someone
# who is new to programming.]
#
# [Additional sections as needed: Prerequisites, Parameters, Returns, etc.]
```
### CRITICAL: Language-Specific Comment Formatting
**ALWAYS use the correct comment syntax for each programming language:**
- **JavaScript/TypeScript**: Use `/** */` for file headers and `/* */` or `//` for inline comments
- **VBScript (.vbs)**: Use single quotes `'` for ALL comments - NEVER use `/** */` or `/* */`
- **PowerShell (.ps1)**: Use hash symbol `#` for ALL comments
- **HTML/CSS**: Use `/* */` for comments
- **Python**: Use `#` for comments and `"""` for docstrings
- **Batch files (.bat/.cmd)**: Use `REM` or `::` for comments
**This is mandatory** - using incorrect comment syntax will cause syntax errors and prevent scripts from executing properly.
## Function Documentation
Document functions with comprehensive JSDoc comments that explain both what and how:
```javascript
/**
* [Clear description of what the function does and why it exists]
*
* [Detailed explanation of how the function works, step by step,
* written for someone learning to code]
*
* @param {Type} paramName - Detailed explanation of what this parameter is,
* what format it should be in, and how it's used
* @returns {Type} Detailed explanation of what gets returned and when
*/
```
## Essential Comments - Write for Beginners
Focus comments on explaining code as if teaching someone new to programming:
- **Business logic**: Explain WHY certain decisions were made and WHAT the business requirement is
- **Complex algorithms**: Step-by-step explanation of HOW the code works
- **Integration points**: Explain HOW code connects to external systems and WHAT data flows between them
- **Non-obvious code**: Explain WHAT isn't immediately clear and WHY it works that way
- **Workarounds**: Explain WHAT the problem was and HOW this solution addresses it
- **Data structures**: Explain WHAT kind of data is stored and HOW it's organized
- **Control flow**: Explain WHAT conditions trigger different code paths and WHY
## Detailed Comment Guidelines
### Inline Comments - Explain the "What" and "Why"
Write comments that help a beginner understand:
- What each significant line or block of code is doing
- Why certain approaches were chosen
- What the expected input/output is at each step
- How different parts of the code work together
- What would happen if certain conditions are met
Example:
```javascript
// Check if the user has permission to access this feature
// This prevents unauthorized users from seeing sensitive data
if (user.hasPermission("admin")) {
// Load the admin dashboard with all management tools
// This includes user management, system settings, and reports
loadAdminDashboard();
} else {
// Show a basic user dashboard with limited functionality
// Regular users only see their own data and basic features
loadUserDashboard();
}
```
### Complex Logic Comments
For any complex business logic, algorithms, or multi-step processes:
```javascript
/**
* PROCESS EXPLANATION:
*
* This function handles the complete user login workflow:
* 1. First, it validates the username and password format
* 2. Then it checks the credentials against the database
* 3. If successful, it creates a secure session token
* 4. Finally, it redirects the user to their appropriate dashboard
*
* The reason we do this in multiple steps is to provide better
* error messages to the user and to log security events properly.
*/
```
## Comment Quality Standards
- **Be educational**: Write as if teaching a programming student
- **Explain assumptions**: State what the code assumes about inputs/environment
- **Describe data flow**: Explain what data goes in and what comes out
- **Clarify complex conditions**: Break down complicated if/else logic
- **Document error cases**: Explain what can go wrong and how it's handled
- **Use plain language**: Avoid jargon, explain technical terms when used
- **Provide context**: Explain how this code fits into the bigger picture# README Maintenance Requirements
## MANDATORY: README Updates
The project README.md file MUST be updated whenever making significant changes to the codebase. This ensures the documentation stays synchronized with the actual implementation.
### When to Update README:
**ALWAYS update the README when:**
- Adding new features or functionality
- Changing installation or setup procedures
- Modifying configuration requirements
- Adding new dependencies or technologies
- Changing project structure or architecture
- Adding new scripts or build processes
- Modifying environment variables or configuration files
- Updating system requirements or compatibility
- Adding new command-line interfaces or APIs
- Changing deployment procedures
### README Sections to Maintain:
1. **Project Description**: Keep the main purpose and features up-to-date
2. **Technology Stack**: Update when adding new technologies or frameworks
3. **Installation Instructions**: Verify and update setup steps
4. **Configuration**: Document new settings, environment variables, or config files
5. **Usage Examples**: Add examples for new features
6. **API Documentation**: Update when adding new endpoints or methods
7. **Development Setup**: Keep development environment instructions current
8. **Build and Deployment**: Update build scripts and deployment procedures
9. **Troubleshooting**: Add common issues and solutions
10. **Contributing Guidelines**: Update development and contribution processes
### README Update Standards:
- **Be Comprehensive**: Include all necessary information for new team members
- **Keep Examples Current**: Ensure all code examples work with the current version
- **Update Screenshots**: Replace outdated UI screenshots when interface changes
- **Maintain Accuracy**: Verify all instructions work on a clean environment
- **Version Information**: Update version numbers and compatibility information
- **Link Validation**: Ensure all links are current and functional
### README Quality Checklist:
Before committing code changes, verify:
- [ ] README reflects all new features and changes
- [ ] Installation instructions are accurate and complete
- [ ] All code examples are tested and working
- [ ] Configuration documentation is up-to-date
- [ ] System requirements are current
- [ ] Links and references are valid
- [ ] Screenshots and diagrams reflect current state
- [ ] Troubleshooting section addresses known issues
### Automatic README Triggers:
**High Priority Updates** - Always update README for:
- New major features or modules
- Changes to package.json dependencies
- Environment variable additions/changes
- New configuration files or formats
- Changes to build/deployment processes
- New user-facing functionality
**Medium Priority Updates** - Consider updating README for:
- Internal architecture changes that affect setup
- New development tools or workflows
- Performance improvements with user impact
- Security enhancements with configuration changes
The README should serve as the single source of truth for project onboarding, setup, and usage. Keep it comprehensive, accurate, and user-friendly.

349
video_editor.py
View File

@ -1,6 +1,33 @@
"""
Professional Video Editor for Generated Shorts
Standalone application for editing video clips with timeline controls and video synchronization
Author: Dario Pascoal
Description: This is a comprehensive video editing application designed specifically for editing
short-form video content. The application provides a professional timeline-based interface
similar to industry-standard video editing software, with features including:
- Multi-track timeline with visual track roads for professional editing workflow
- Real-time video preview with frame-accurate scrubbing
- Professional editing tools: trim, speed adjustment, volume control, fade effects
- Text overlay capabilities with customizable styling
- Export functionality with multiple format support
- Tabbed interface organizing tools into logical categories
- Dark theme optimized for video editing work
- Support for multiple video formats (MP4, AVI, MOV, MKV, etc.)
The application is built using Python's Tkinter for the GUI, OpenCV for basic video processing,
and optionally MoviePy for advanced video editing features. It's designed to be educational,
showing how professional video editing interfaces work while remaining accessible to beginners.
Technical Architecture:
- Uses threading for non-blocking video playback and processing
- Implements canvas-based timeline with precise time-to-pixel calculations
- Supports both MoviePy (full features) and OpenCV (basic features) backends
- Maintains professional video editing workflow patterns
- Provides real-time preview updates during editing operations
This file serves as the main entry point for the video editing functionality and can be
integrated into larger applications or run as a standalone tool.
"""
import tkinter as tk
@ -35,196 +62,336 @@ except ImportError:
raise ImportError("MoviePy not available")
class ShortsEditorGUI:
"""Professional video editing interface with timeline controls and real-time preview"""
"""
Professional Video Editing Interface
This class provides a complete video editing interface with timeline controls,
real-time preview, and professional editing tools. It's designed to mimic the
workflow of professional video editing software while remaining accessible
to beginners.
Key Features:
- Multi-track timeline with visual separation (road lines)
- Frame-accurate video scrubbing and playback
- Professional editing tools (trim, speed, volume, effects)
- Real-time preview with synchronized timeline
- Tabbed tool interface for organized workflow
- Support for multiple video formats
- Export functionality with timestamp-based naming
The interface uses a dark theme optimized for video editing work and provides
both mouse and keyboard controls for efficient editing workflow.
Attributes:
parent: Parent window or None for standalone operation
shorts_folder: Directory path for video files
current_video: Path to currently loaded video file
current_clip: Video clip object (MoviePy or OpenCV)
timeline_*: Various timeline state and control variables
colors: Dictionary defining the dark theme color scheme
fonts: Dictionary defining typography for different UI elements
"""
def __init__(self, parent=None, shorts_folder="shorts"):
"""
Initialize the Professional Video Editor Interface
Sets up all the necessary state variables, UI theme, and data structures
needed for professional video editing. This includes timeline management,
video playback state, track configuration, and UI styling.
The initialization process:
1. Stores parent window reference and shorts folder path
2. Initializes video playback state variables
3. Sets up timeline state and interaction controls
4. Configures professional editing features (snap, magnetic timeline)
5. Defines track structure for multi-track editing
6. Establishes dark theme color scheme optimized for video work
7. Sets up typography for different UI elements
Args:
parent: Parent tkinter window (None for standalone operation)
shorts_folder: String path to directory containing video files
"""
# Store parent window reference and video directory path
self.parent = parent
self.shorts_folder = shorts_folder
# Video state
self.current_video = None
self.current_clip = None
self.current_time = 0.0
self.video_duration = 0.0
self.is_playing = False
self.timeline_is_playing = False
self.play_thread = None
# Video playback state management
# These variables track the current state of video loading and playback
self.current_video = None # File path to currently loaded video
self.current_clip = None # Video clip object (MoviePy VideoFileClip or OpenCV VideoCapture)
self.current_time = 0.0 # Current playback position in seconds
self.video_duration = 0.0 # Total video duration in seconds
self.is_playing = False # Whether video is currently playing
self.timeline_is_playing = False # Whether timeline playback is active
self.play_thread = None # Background thread for video playback
# Timeline state
self.timeline_position = 0.0
self.timeline_scale = 1.0 # Pixels per second
self.timeline_width = 800
# Timeline display and interaction state
# Controls how the timeline is rendered and how users interact with it
self.timeline_position = 0.0 # Current scroll position of timeline view
self.timeline_scale = 1.0 # Zoom level: pixels per second of video
self.timeline_width = 800 # Width of timeline canvas in pixels
# Professional timeline features
self.timeline_clips = []
self.selected_clip = None
self.markers = []
# Professional timeline editing features
# These lists store timeline content and user-created elements
self.timeline_clips = [] # List of video/audio clips on timeline
self.selected_clip = None # Currently selected clip for editing
self.markers = [] # User-placed timeline markers for navigation
# Multi-track system
# Multi-track system for professional video editing workflow
# Each track has its own properties and can hold different types of media
# This structure allows for layered editing with video and audio tracks
self.tracks = {
'video_1': {'y_offset': 40, 'height': 60, 'color': '#3498db', 'name': 'Video 1', 'muted': False, 'locked': False, 'solo': False, 'visible': True, 'type': 'video'},
'video_2': {'y_offset': 105, 'height': 60, 'color': '#2ecc71', 'name': 'Video 2', 'muted': False, 'locked': False, 'solo': False, 'visible': True, 'type': 'video'},
'video_3': {'y_offset': 170, 'height': 60, 'color': '#9b59b6', 'name': 'Video 3', 'muted': False, 'locked': False, 'solo': False, 'visible': True, 'type': 'video'},
'audio_1': {'y_offset': 235, 'height': 40, 'color': '#e74c3c', 'name': 'Audio 1', 'muted': False, 'locked': False, 'solo': False, 'visible': True, 'type': 'audio'},
'audio_2': {'y_offset': 280, 'height': 40, 'color': '#f39c12', 'name': 'Audio 2', 'muted': False, 'locked': False, 'solo': False, 'visible': True, 'type': 'audio'}
# Video tracks - higher tracks appear on top in the final composition
'video_1': {'y_offset': 40, 'height': 60, 'color': '#3498db', 'name': 'Video 1',
'muted': False, 'locked': False, 'solo': False, 'visible': True, 'type': 'video'},
'video_2': {'y_offset': 105, 'height': 60, 'color': '#2ecc71', 'name': 'Video 2',
'muted': False, 'locked': False, 'solo': False, 'visible': True, 'type': 'video'},
'video_3': {'y_offset': 170, 'height': 60, 'color': '#9b59b6', 'name': 'Video 3',
'muted': False, 'locked': False, 'solo': False, 'visible': True, 'type': 'video'},
# Audio tracks - for background music, sound effects, voiceovers
'audio_1': {'y_offset': 235, 'height': 40, 'color': '#e74c3c', 'name': 'Audio 1',
'muted': False, 'locked': False, 'solo': False, 'visible': True, 'type': 'audio'},
'audio_2': {'y_offset': 280, 'height': 40, 'color': '#f39c12', 'name': 'Audio 2',
'muted': False, 'locked': False, 'solo': False, 'visible': True, 'type': 'audio'}
}
# Timeline interaction state
self.dragging_clip = None
self.drag_start_x = None
self.drag_start_time = None
self.drag_offset = 0
self.snap_enabled = True
self.magnetic_timeline = True
self.grid_size = 1.0 # Snap grid in seconds
# Timeline interaction state for drag-and-drop editing
# These variables track the current state of user interactions with timeline elements
self.dragging_clip = None # Clip currently being dragged by user
self.drag_start_x = None # Mouse X position when drag started
self.drag_start_time = None # Original time position of dragged clip
self.drag_offset = 0 # Offset from clip start to mouse position
self.snap_enabled = True # Whether clips snap to grid/other clips
self.magnetic_timeline = True # Whether clips magnetically attract to each other
self.grid_size = 1.0 # Snap grid size in seconds (for precise alignment)
# Timeline editing modes
self.edit_mode = 'select' # 'select', 'cut', 'trim', 'ripple'
# Timeline editing modes for different types of operations
# This affects how mouse interactions behave on the timeline
self.edit_mode = 'select' # Current editing mode: 'select', 'cut', 'trim', 'ripple'
# Visual enhancements
self.show_thumbnails = True
self.show_waveforms = True
self.clip_thumbnails = {}
self.audio_waveforms = {}
# Visual enhancement options for better user experience
# These can be toggled on/off based on performance and user preference
self.show_thumbnails = True # Show video thumbnail previews on timeline clips
self.show_waveforms = True # Show audio waveform visualization
# Track widgets for UI
self.track_widgets = {}
# Cached visual data for performance optimization
# Storing thumbnails and waveforms prevents repeated generation
self.clip_thumbnails = {} # Dictionary storing thumbnail images by clip ID
self.audio_waveforms = {} # Dictionary storing waveform data by clip ID
# Modern color scheme
# Track control widget references for dynamic updates
# This allows us to update track control buttons when states change
self.track_widgets = {} # Dictionary storing widget references by track ID
# Professional dark color scheme optimized for video editing
# Dark themes reduce eye strain during long editing sessions and help
# focus attention on the video content rather than the interface
self.colors = {
'bg_primary': '#1a1a1a',
'bg_secondary': '#2d2d2d',
'bg_tertiary': '#3d3d3d',
'text_primary': '#ffffff',
'text_secondary': '#b8b8b8',
'accent_blue': '#007acc',
'accent_green': '#28a745',
'accent_orange': '#fd7e14',
'accent_red': '#dc3545',
'border': '#404040'
'bg_primary': '#1a1a1a', # Main background - darkest for maximum contrast
'bg_secondary': '#2d2d2d', # Secondary panels - slightly lighter
'bg_tertiary': '#3d3d3d', # Buttons and controls - interactive elements
'text_primary': '#ffffff', # Main text - high contrast for readability
'text_secondary': '#b8b8b8', # Secondary text - lower contrast for hierarchy
'accent_blue': '#007acc', # Primary actions - professional blue
'accent_green': '#28a745', # Success/positive actions - natural green
'accent_orange': '#fd7e14', # Warning/attention - energetic orange
'accent_red': '#dc3545', # Destructive/negative actions - clear red
'border': '#404040' # Subtle borders - defines sections without distraction
}
# Modern fonts
# Typography system for consistent text hierarchy
# Font choices prioritize readability and professional appearance
# Segoe UI provides excellent readability across different screen sizes
self.fonts = {
'title': ('Segoe UI', 16, 'bold'),
'heading': ('Segoe UI', 11, 'bold'),
'body': ('Segoe UI', 10),
'caption': ('Segoe UI', 9),
'button': ('Segoe UI', 10, 'bold')
'title': ('Segoe UI', 16, 'bold'), # Main window titles and headers
'heading': ('Segoe UI', 11, 'bold'), # Section headings and tool categories
'body': ('Segoe UI', 10), # Regular text and input fields
'caption': ('Segoe UI', 9), # Small labels and descriptions
'button': ('Segoe UI', 10, 'bold') # Button text for clear action indicators
}
def open_editor(self):
"""Open the video editor window"""
# Create editor window
"""
Open the Professional Video Editor Window
Creates and displays the main video editing interface window. This method
sets up the window properties, makes it responsive, and initializes the
complete editor interface.
The window creation process:
1. Creates either a new Tkinter window (standalone) or Toplevel window (child)
2. Sets window title, size, and minimum dimensions for usability
3. Applies the dark theme background color
4. Configures responsive layout with proper weight distribution
5. Calls create_editor_interface() to build the complete UI
6. Starts the main event loop if running standalone
Window Properties:
- Title: "Professional Shorts Editor"
- Size: 1200x800 pixels (optimal for video editing workflow)
- Minimum: 900x600 pixels (ensures UI remains functional when resized)
- Theme: Dark background optimized for video editing
- Layout: Responsive with proper weight distribution for resizing
"""
# Create the main editor window - either standalone or child window
# If parent exists, create as child window; otherwise create root window
self.editor_window = tk.Toplevel(self.parent) if self.parent else tk.Tk()
self.editor_window.title("Professional Shorts Editor")
self.editor_window.geometry("1200x800")
self.editor_window.minsize(900, 600)
self.editor_window.configure(bg=self.colors['bg_primary'])
self.editor_window.geometry("1200x800") # Optimal size for video editing
self.editor_window.minsize(900, 600) # Minimum usable size
self.editor_window.configure(bg=self.colors['bg_primary']) # Apply dark theme
# Make window responsive
# Configure responsive layout for window resizing
# Row 1 gets all extra vertical space (main content area)
# Column 0 gets all extra horizontal space (full width utilization)
self.editor_window.rowconfigure(1, weight=1)
self.editor_window.columnconfigure(0, weight=1)
# Create interface
# Build the complete editor interface
self.create_editor_interface()
# Start the editor
# Start the application main loop if running as standalone application
if not self.parent:
self.editor_window.mainloop()
def create_editor_interface(self):
"""Create the main editor interface"""
# Header with file selection
"""
Create the Complete Professional Video Editor Interface
Builds the entire user interface for the video editor, organizing it into
logical sections that mirror professional video editing software. The
interface uses a three-panel layout with header, main content, and tools.
Interface Structure:
1. Header: Title, current file display, and file selection controls
2. Main Content: Split into left panel (video/timeline) and right panel (tools)
3. Left Panel: Video preview, playback controls, and professional timeline
4. Right Panel: Tabbed tool interface with editing functions
5. Timeline: Multi-track workspace with road lines and interactive controls
The layout is designed to be intuitive for users familiar with professional
video editing software while remaining accessible to beginners. Dark theme
reduces eye strain during long editing sessions.
"""
# Header section - contains title and file management controls
# Fixed height prevents layout shifts when content changes
header_frame = tk.Frame(self.editor_window, bg=self.colors['bg_secondary'], height=60)
header_frame.pack(fill="x", padx=10, pady=(10, 0))
header_frame.pack_propagate(False)
header_frame.pack_propagate(False) # Maintain fixed height
# Title
# Application title with professional icon and branding
title_label = tk.Label(header_frame, text="✏️ Professional Shorts Editor",
font=self.fonts['title'], bg=self.colors['bg_secondary'],
fg=self.colors['text_primary'])
title_label.pack(side="left", padx=20, pady=15)
# File selection
# File selection area - shows current file and provides selection control
file_frame = tk.Frame(header_frame, bg=self.colors['bg_secondary'])
file_frame.pack(side="right", padx=20, pady=15)
# Current file display - shows filename or "No video selected" status
self.current_file_label = tk.Label(file_frame, text="No video selected",
font=self.fonts['body'], bg=self.colors['bg_tertiary'],
fg=self.colors['text_secondary'], padx=15, pady=8)
self.current_file_label.pack(side="left", padx=(0, 10))
# File selection button - opens file browser or shows available videos
select_btn = tk.Button(file_frame, text="📁 Select Video",
command=self.select_video_file, font=self.fonts['button'],
bg=self.colors['accent_blue'], fg='white', padx=20, pady=8,
relief="flat", bd=0, cursor="hand2")
select_btn.pack(side="left")
# Main content area
# Main content area - contains the primary editing workspace
# Uses a two-column grid layout with weighted columns for responsive design
# Left column (weight=2) is larger for video preview and timeline
# Right column (weight=1) is smaller for tools and controls
main_frame = tk.Frame(self.editor_window, bg=self.colors['bg_primary'])
main_frame.pack(fill="both", expand=True, padx=10, pady=10)
main_frame.rowconfigure(0, weight=1)
main_frame.columnconfigure(0, weight=2)
main_frame.columnconfigure(1, weight=1)
main_frame.rowconfigure(0, weight=1) # Single row takes all vertical space
main_frame.columnconfigure(0, weight=2) # Left column gets 2/3 of width
main_frame.columnconfigure(1, weight=1) # Right column gets 1/3 of width
# Left panel - Video player and timeline
# Left panel - Video preview and timeline workspace
# This is the main editing area where users see their video and timeline
# Organized vertically with video preview on top and timeline below
player_frame = tk.Frame(main_frame, bg=self.colors['bg_secondary'])
player_frame.grid(row=0, column=0, sticky="nsew", padx=(0, 5))
player_frame.rowconfigure(0, weight=1)
player_frame.rowconfigure(1, weight=0)
player_frame.columnconfigure(0, weight=1)
player_frame.rowconfigure(0, weight=1) # Video preview area (expandable)
player_frame.rowconfigure(1, weight=0) # Timeline area (fixed height)
player_frame.columnconfigure(0, weight=1) # Full width utilization
# Video display area
# Video Display Area - The main preview window for video content
# This section provides real-time video preview with proper aspect ratio maintenance
# Dark border provides visual separation and professional appearance
video_container = tk.Frame(player_frame, bg=self.colors['bg_tertiary'])
video_container.grid(row=0, column=0, sticky="nsew", padx=15, pady=15)
video_container.rowconfigure(0, weight=1)
video_container.columnconfigure(0, weight=1)
video_container.rowconfigure(0, weight=1) # Video canvas expands to fill space
video_container.columnconfigure(0, weight=1) # Full width utilization
# Video canvas
# Video canvas - displays the actual video frames
# Black background provides professional video preview appearance
# No highlight thickness removes the default canvas border for cleaner look
self.video_canvas = tk.Canvas(video_container, bg='black', highlightthickness=0)
self.video_canvas.grid(row=0, column=0, sticky="nsew")
# Professional Timeline Workspace
# Professional Timeline Workspace - Multi-track editing environment
# Fixed height prevents timeline from shrinking when window is resized
# This is where users perform the majority of their editing work
timeline_workspace = tk.Frame(player_frame, bg=self.colors['bg_secondary'], height=380)
timeline_workspace.grid(row=1, column=0, sticky="ew", padx=15, pady=(0, 15))
timeline_workspace.pack_propagate(False)
timeline_workspace.pack_propagate(False) # Maintain fixed height for consistent layout
# Timeline header with editing tools
# Timeline header - contains editing mode controls and timeline options
# These controls affect how the user interacts with timeline elements
header_frame = tk.Frame(timeline_workspace, bg=self.colors['bg_secondary'])
header_frame.pack(fill="x", pady=(10, 5))
# Left side - Timeline controls
# Left side timeline controls - editing modes and interaction options
left_controls = tk.Frame(header_frame, bg=self.colors['bg_secondary'])
left_controls.pack(side="left")
# Editing mode selector
# Editing mode selector - determines how mouse interactions behave
# Different modes enable different types of editing operations
tk.Label(left_controls, text="Mode:", font=self.fonts['caption'],
bg=self.colors['bg_secondary'], fg=self.colors['text_secondary']).pack(side="left")
# Mode selection dropdown with professional editing modes
# select: Default mode for selecting and moving clips
# cut: Razor tool for splitting clips at specific points
# trim: For adjusting clip start/end points
# ripple: Moves clips and automatically adjusts following clips
self.mode_var = tk.StringVar(value="select")
mode_combo = ttk.Combobox(left_controls, textvariable=self.mode_var, width=8,
values=["select", "cut", "trim", "ripple"], state="readonly")
mode_combo.pack(side="left", padx=(5, 10))
mode_combo.bind('<<ComboboxSelected>>', self.on_mode_change)
# Snap and magnetic timeline toggles
# Professional timeline assistance features
# These options help users align and position clips precisely
self.snap_var = tk.BooleanVar(value=True)
snap_check = tk.Checkbutton(left_controls, text="Snap", variable=self.snap_var,
bg=self.colors['bg_secondary'], fg=self.colors['text_primary'],
selectcolor=self.colors['accent_blue'], command=self.toggle_snap)
snap_check.pack(side="left", padx=5)
# Magnetic timeline - clips automatically attract to align with other clips
# This feature helps maintain precise timing relationships between clips
self.magnetic_var = tk.BooleanVar(value=True)
magnetic_check = tk.Checkbutton(left_controls, text="Magnetic", variable=self.magnetic_var,
bg=self.colors['bg_secondary'], fg=self.colors['text_primary'],
selectcolor=self.colors['accent_blue'], command=self.toggle_magnetic)
magnetic_check.pack(side="left", padx=5)
# Center - Playback controls
# Center - Professional playback controls for timeline
# These controls manage video playback synchronized with timeline position
# Color-coded for immediate recognition: Green=Play, Orange=Pause, Red=Stop
center_controls = tk.Frame(header_frame, bg=self.colors['bg_secondary'])
center_controls.pack(side="left", padx=20)
# Play button - starts video playback from current timeline position
self.timeline_play_btn = tk.Button(center_controls, text="▶️",
command=self.timeline_play,
bg=self.colors['accent_green'], fg='white',
@ -232,6 +399,7 @@ class ShortsEditorGUI:
relief="flat", bd=0, cursor="hand2")
self.timeline_play_btn.pack(side="left", padx=2)
# Pause button - temporarily stops playback, maintains current position
self.timeline_pause_btn = tk.Button(center_controls, text="⏸️",
command=self.timeline_pause,
bg=self.colors['accent_orange'], fg='white',
@ -239,6 +407,7 @@ class ShortsEditorGUI:
relief="flat", bd=0, cursor="hand2")
self.timeline_pause_btn.pack(side="left", padx=2)
# Stop button - stops playback and returns to beginning of timeline
self.timeline_stop_btn = tk.Button(center_controls, text="⏹️",
command=self.timeline_stop,
bg=self.colors['accent_red'], fg='white',