Red Alert Extension - Setup & Fixes

Key Fixes Applied

1. Sidebar Visibility Issue - FIXED

• Added a new command errorDj.showSidebar to easily reopen the sidebar
• Added keyboard shortcut: Ctrl+Alt+E (Windows/Linux) or Cmd+Alt+E (Mac)
• The sidebar now automatically shows when the extension activates
• You can also access it via Command Palette: "Error DJ: Show Sidebar"

2. Audio Playback Issue - FIXED

The audio wasn't playing due to browser autoplay policies in webviews. Fixed by:

• Adding proper audio initialization on user interaction
• Implementing retry logic for audio playback
• Adding volume control for better user experience
• Preloading audio files for faster response
• Enhanced Content Security Policy to allow media sources

Folder Structure Required

Make sure your extension has this folder structure:

your-extension/
├── src/
│   └── extension.ts
├── images/
│   ├── icon.svg
│   ├── icon.png
│   ├── image1.jpg
│   ├── image2.jpg
│   └── image3.jpg
├── media/           # Note: Changed from "medias" to "media"
│   ├── track1.mp3
│   ├── track2.mp3
│   └── track3.mp3
├── package.json
└── tsconfig.json

Important Notes

1. Media Folder: The original code had medias/ but I've changed it to media/ (more conventional). Make sure to rename your folder or adjust the path in the code.

2. Audio Files: Ensure your MP3 files are:

   • Properly encoded
   • Not too large (< 10MB recommended)
   • Actually present in the media folder

3. First-time Audio: Due to browser security, audio might not play automatically the first time. Click any button in the sidebar to initialize audio playback.

How to Test

1. Compile the extension: npm run compile
2. Press F5 to launch a new VSCode window with your extension
3. The Error DJ sidebar should appear automatically
4. If you close it, use:
   • Keyboard shortcut: Ctrl+Alt+E (or Cmd+Alt+E on Mac)
   • Command Palette: "Error DJ: Show Sidebar"
   • Click the Error DJ icon in the Activity Bar

Troubleshooting

If audio still doesn't play:

1. Click the "Pause" button once, then click "Play" to manually trigger audio
2. Check the browser console in VSCode (Help > Toggle Developer Tools)
3. Verify your MP3 files are valid and in the correct location
4. Try adjusting the volume slider

Additional Features Added

• Volume Control: Slider to adjust playback volume
• Better Visual Feedback: Improved button styling using VSCode theme colors
• Auto-retry Logic: Audio will attempt to play multiple times if initially blocked
• Keyboard Shortcut: Quick access to the sidebar