search

jaruba / PowderPlayer

Hybrid between a Torrent Client and a Player (torrent streaming) -
https://powder.media/
GNU Lesser General Public License v2.1
586 stars 95 forks source link

Loading screen question #50

Closed oaprograms closed 8 years ago

oaprograms commented 9 years ago

Just a question, how did you make the loading screen, did you use anything special to make it appear before nwjs loads? I could use it for my app, which shows an ugly gray screen for several seconds, but can't figure out what you did from your code.

Thanks

jaruba commented 9 years ago

It's funny how many people like that silly loading screen.

There is no magic behind it though, the animation is 100% CSS, I load the loader.css first in the <head> before all other css and js files: https://github.com/jaruba/PowderPlayer/blob/master/src/mask.html#L24

Then add the HTML to the beginning of the <body> right after the absolutely crucial HTML: https://github.com/jaruba/PowderPlayer/blob/master/src/mask.html#L213-L227

Then just fade it out on the window load event:

win.on('loaded', function() {
    $("#loading").fadeOut(200);
});

There are a ton of CSS only loader animations out there, you could pick some other animation for variety's sake. :)

jaruba commented 9 years ago

Btw, I wonder what my chances are of convincing you to make a simplistic lingo plugin for powder at one point.

Sure enough, I don't have a plugin system made yet, but it's on my to-do list. :)

I'd totally understand if you wouldn't want to though, as your project is also a player. But what your doing there is just so awesome that I had to ask. :))

jaruba commented 9 years ago

Here are some cool CSS loading animations: http://tobiasahlin.com/spinkit/

oaprograms commented 9 years ago

Oh ok... Actually I thought you were using something to delay loading of nwjs (like some sustom c++), and show that loader before actual page loads. But now found my gray screen is mostly because of my Angular loading, not nwjs, so I trust you it's just css :). Also I like these css animations, just bookmarked them. :)

Btw, I wonder what my chances are of convincing you to make a simplistic lingo plugin for powder at one point.

I was thinking about it. I could use most of my existing code for the plugin actually. The plugin could replace Powder's subtitle picker screen with a bigger screen with a couple of tabs. All I would need is (I think) onVideoLoaded(player) function, with WCJS player's instance as an argument, so I could access all of its methods. On your side you would need to implement:

In future you could add more methods, for other kinds of plugins if they appear, but all I need is onVideoLoaded (maybe). There could be some problems:

I'd have to redesign screens also, change some features, etc, but it is possible.

Another option is to make much simpler plugin, which would use Powder's subtitle loading and rendering, and just add Google Translate balloons to existing subtitles, without dual subtitles or word saving features.

Any way, it's possible but may not be easy. Would be cool though.

jaruba commented 9 years ago

Actually I thought you were using something to delay loading of nwjs (like some sustom c++), and show that loader before actual page loads.

NW.js itself loads pretty fast, I actually start it where the mouse position is with the window hidden, then check the screen the window is in (even if hidden), reposition the window to the center of that screen and show it. I did this craziness only to support multiple screens, because if I set NW.js to start the window at "center", it starts half on one screen and half on the second one. :)))

But now found my gray screen is mostly because of my Angular loading, not nwjs

I was expecting that to be your case. :)

if there is 'plugins' folder, with subfolders: loop through subfolders, look for 'main.js' files, require() these files

Pretty much what I was planning, the tricky part is that the plugins will not be able to use any additional node.js modules as I can't really run npm install (because the users will most probably not have node.js and npm installed)

This is the part I'm wondering if there's any quick solution for, I'm hoping there's some standalone version of NPM that I can bundle in the app for this (haven't checked though), as I think it is crucial for plugins to support adding their own node modules too.

whenever new video is loaded in Powder, call their onVideoLoaded() method.

I could just make an event for it, plugins can attach a handler to that event.

For example, if I pause the video from my script, could Powder get confused.

The logic atm is that Powder adapts to what wcjs-player does, so the entire wcjs-player api is functional and will never confuse the app.

The plugin could replace Powder's subtitle picker screen with a bigger screen with a couple of tabs.

I'm not sure how to load Angular page from node.js context, I don't understand the connection between node.js and chromium contexts very well.

The best approach might be to have a "Lingo" button in the subtitle menu, that starts a new window when pressed with your larger menu (because powder has a very small minimum window size for obvious reasons, this has even been requested by a user in the past). The new window can load with angular, react or any other templating system and send changes to the main window through websockets. I was planning on making a small library for this so it would be easier for plugins to make new windows with whatever they want and send data back to the app from it.

without dual subtitles or word saving features.

I could go into details, but it's much to soon for that. I'm pretty confident we can make anything you want. We're developers, apps follow our will.. there are no limitations. :)