Skip to content

development.mdx

Latest commit

 

History

History
189 lines (138 loc) · 4.54 KB

development.mdx

File metadata and controls

189 lines (138 loc) · 4.54 KB
title Development
description Build and run YouTube-Floater locally for development
**Prerequisites**: - Node.js version 14 or higher - npm or yarn package manager - macOS (for testing the app) - Git

Follow these steps to set up YouTube-Floater for local development.

Getting Started

Clone the YouTube-Floater repository from GitHub:

git clone https://github.com/jimbrend/YouTube-Floater.git
cd YouTube-Floater

Install all required Node.js packages:

npm install

This will install Electron.js and all other dependencies needed to run the app.

Run the app in development mode:

npm start

The YouTube-Floater application will launch in development mode with hot-reloading enabled.

Project Structure

Understanding the codebase structure:

YouTube-Floater/
├── main.js           # Electron main process
├── renderer.js       # Renderer process (UI logic)
├── index.html        # Main window HTML
├── styles.css        # Application styles
├── package.json      # Dependencies and scripts
└── assets/          # Icons and images

Building for Distribution

To create a distributable .dmg file for macOS:

If not already installed:

npm install electron-packager --save-dev

Create a production build:

npm run build

This will generate a distributable application in the dist/ directory.

Technical Implementation

Key Technologies

Electron.js Framework

  • BrowserWindow: Creates the floating window with always-on-top capability
  • IPC: Handles communication between main and renderer processes
  • webPreferences: Configures security and node integration

YouTube Integration

  • YouTube Embed Player API for video playback
  • URL parsing to extract video IDs
  • Embed parameters for custom controls

Window Management

  • Custom drag handlers for repositioning
  • Corner-snapping algorithm for quick positioning
  • Opacity control using CSS and Electron APIs

Development Tips

Open Developer Tools while running the app: - macOS: `Cmd + Option + I` - Or add to main.js: `mainWindow.webContents.openDevTools()` The app supports hot-reloading in development mode. Simply save your changes and the app will automatically reload. Be aware of YouTube's CORS restrictions. The app uses the official YouTube Embed Player API which has some limitations on rapid reloads.

Contributing

Want to contribute to YouTube-Floater?

  1. Fork the repository on GitHub
  2. Create a feature branch: git checkout -b feature/your-feature-name
  3. Make your changes and test thoroughly
  4. Commit your changes: git commit -m "Add your feature"
  5. Push to your fork: git push origin feature/your-feature-name
  6. Open a Pull Request on the main repository

Roadmap Features

Current development priorities (95% complete):

Completed:

  • Always-on-top floating window
  • Drag and reposition functionality
  • Corner snapping
  • Volume and opacity controls
  • Browser integration

Planned:

  • Playlist support
  • Persistent window state (remember position/size)
  • Dark/light theme toggle
  • AI-powered video synopsis
  • Auto-update functionality

Troubleshooting

1. Ensure you're running Node.js v14 or higher: `node --version` 2. Delete `node_modules/` and reinstall: `rm -rf node_modules && npm install` 3. Clear npm cache: `npm cache clean --force` This may be due to YouTube's CORS restrictions. Try: - Using a different video URL - Clearing the app cache - Checking your internet connection Ensure you have the latest Xcode Command Line Tools: ```bash xcode-select --install ```

Resources