Skip to content

ItsMarwan/ZenView

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

10 Commits
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

ZenView - The Focused Viewer

ZenView is a free, open-source, distraction-free YouTube viewer. No sidebar. No autoplay queue. No ads injected by the player. Just the video.

⚠️ Non-commercial license. ZenView may not be used to charge users money, run ads, or generate any form of revenue. See License for details.


✨ Features

  • 🔍 YouTube Search — Search videos directly inside ZenView using the YouTube Data API v3
  • 📈 Trending Feed — See what's trending on YouTube, refreshed on every visit with Load More pagination
  • 🔖 Save Videos — Save videos locally in your browser or to Firebase for cross-device access
  • 🕐 Watch History — Automatically tracks what you've watched with timestamps
  • 💡 Lights Off Mode — Dims everything except the video for a true cinema feel
  • 🌗 Dark & Light Mode — Full black/white theme, saved to your device preferences
  • 🔎 Search Suggestions — Live autocomplete suggestions as you type
  • ⚙️ Settings Modal — Configure your YouTube API key and Firebase in-app, no code needed
  • 📄 labels.json — Every string and toast on the site is editable from a single JSON file
  • 🚫 No tracking, no monetization, no ads

🚀 Deploy

You can deploy ZenView to any static hosting provider in one click. It's just HTML, CSS, and JavaScript. no build step required.

Vercel

Deploy with Vercel

Netlify

Deploy to Netlify

Render

Deploy to Render

GitHub Pages

  1. Fork this repository
  2. Go to Settings → Pages
  3. Set source to Deploy from a branch, pick main and / (root)
  4. Your site will be live at https://yourusername.github.io/ZenView

Cloudflare Pages

  1. Log in to Cloudflare Pages
  2. Click Create a project → Connect to Git
  3. Select your fork of this repo
  4. Set build command to (empty) and output directory to /
  5. Click Save and Deploy

⚙️ Setup

1. Get a YouTube API Key (required for search, trending videos & video player)

  1. Go to console.cloud.google.com
  2. Create a new project
  3. Enable YouTube Data API v3 under APIs & Services → Library
  4. Create an API key under APIs & Services → Credentials
  5. Restrict the key to your domain and to the YouTube Data API v3
  6. Paste the key into ZenView's Settings (gear icon), or add it to config.js:
window.ZENVIEW_CONFIG = {
  defaultYoutubeApiKey: "YOUR_KEY_HERE",
  firebase: { ... }
};

The free quota is 10,000 units/day — more than enough for personal use.

2. Set Up Firebase (optional — for cloud save)

  1. Go to console.firebase.google.com
  2. Create a project and add a Web App
  3. Copy the firebaseConfig values
  4. Paste them into ZenView's Settings → Firebase Configuration
  5. Create a Firestore database in test mode

🗂 Project Structure

ZenView/
├── index.html       # App shell, modals, header, footer
├── main.js          # All application logic and routing
├── style.css        # Black & white theme, dark/light mode variables
├── config.js        # Default API key configuration
├── labels.json      # All site text, icons, and toast settings
└── README.md

Customizing Text & Toasts

Every piece of user-facing text — headings, button labels, error messages, toast notifications — lives in labels.json. You can also disable toasts entirely:

"toasts": {
  "enabled": false
}

🖼 Screenshots

Dark Mode Light Mode
Pure black background, white text Pure white background, black text

🛠 Tech Stack

Layer Technology
Frontend Vanilla JavaScript (ES modules)
Styling CSS custom properties + Tailwind CDN
Video YouTube IFrame API (youtube-nocookie.com)
Search YouTube Data API v3
Suggestions Google Suggest API via allorigins proxy
Cloud Save Firebase Firestore (optional)
Fonts Inter (Google Fonts)

📜 License

MIT License — with Non-Commercial Restriction

Copyright (c) 2025 ZenView Contributors

Permission is hereby granted, free of charge, to any person obtaining a copy
of this software to use, copy, modify, merge, publish, and distribute it,
subject to the following conditions:

1. NON-COMMERCIAL: You may not use this software or any derivative of it to
   charge users money, display advertisements, accept donations in exchange
   for features, or generate revenue of any kind — directly or indirectly.
   ZenView must always be free for end users.

2. ATTRIBUTION: The above copyright notice and this permission notice must be
   included in all copies or substantial portions of the software.

3. NO WARRANTY: The software is provided "as is", without warranty of any kind.

🤝 Contributing

Contributions are welcome! To contribute:

  1. Fork the repo
  2. Create a feature branch: git checkout -b feature/my-feature
  3. Commit your changes: git commit -m 'Add my feature'
  4. Push to the branch: git push origin feature/my-feature
  5. Open a Pull Request

Please keep contributions in the spirit of the project: free, focused, and distraction-free.


⚠️ Legal Disclaimer

ZenView is a non-monetized, open-source prototype for educational purposes. It provides a focused viewing experience using standard public YouTube embedding. ZenView does not host any videos, does not generate revenue from embedded content, and all content rights belong to their respective creators on YouTube.


Made with ❤️ · Open Source · Free Forever

About

**ZenView** is a free, open-source, distraction-free YouTube viewer. No sidebar. No autoplay queue. No ads injected by the player. Just the video.

Topics

Resources

Stars

Watchers

Forks

Sponsor this project

Contributors