Tana
Bringing the Picture-in-Picture experience to the desktop. Lets you keep a window in front of everything, whether it is a webpage or a video.
Story time 🙌
A few months ago I started looking for a program that let me have a Picture-in-Picture mode on a Windows machine, primarily to watch Netflix and YouTube/Twitch streams (mainly e-sports) while coding, found nothing that met my needs. Reading on electron's reddit I came across with this post, it's about the process of publishing an Electron app to the App Store, turns out that app was about what I've been looking for, but sadly it's only available on MacOS (Can't afford a Mac 😔) so I decided to give it try at developing my own.
Current state of the project
The project it's in a very ALPHA state as I started this project just for myself and most of it's code was done in a "hurry" just to have something working up.
The whole reason of open sourcing it is to learn while other people collaborate. I'm not very experienced on working with JavaScript or Electron so bear with my coding skills, and if you want to mentor me just let me now ✌️. I'm really looking forward to improve my self as a developer with this project, meaning coding patterns, testing and automated build releases in the future.
Features
- Open any link with the Browser extension
- Local Video support
- Click-through and See-through
- Hide window to menu tray
- Mute window
- View recently open links
- More to come...
Usage
Change Log
Contribute
As I'm trying to improve this project overall, PRs are more than welcome!.
Ideas/Suggestions
I'm completely open to new ideas and suggestions! Put up an issue or send me an email.
Future Features
Check out the Feature tag in Issues to see all in progress and upcoming ideas.
Development/Running
Currently there's no installers for each platform so here's what you need to do:
- Install using
yarn. - Then run
yarn install:ffmpeg(just the first time you clone the repository). - Finally run
yarn build:devand in a separate terminal runyarn start.
UPDATE: Windows installer is coming soon! Other OSs will come eventually, still trying to make some time to work on this.
Chrome Extension
To open any link from your Chrome Browser you need to add the chrome-extension, which is not available on the store just yet but, you can add it manually:
- Go to
chrome://extensionson your Chrome Browser. - Check
Developer modeon the top-right corner. - Click on
Load unpacked, search forchrome-extensionfolder located at the root of this project and open it.
Special thanks ❤
- @yoannmoinet The creator of Fenêtre. Thank you for some insights and for the awesome post.
- @ssnjrthegr8 Logo designer. Thank you so much!
