Redesign

[amilajack]

Redesign

[amilajack]

Maybe the recently watched movies could be retieved from trakt.tv or tvshowtime, but needs scrobbling

This is extra work. I was thinking of simply using a local database or storage for this. When the user clicks a movie, save its imdb to a list.

Where you are planning to place the movie categories?

Movie categories are going to be placed in the 'Movies' page. The featured page simply shows what's trending, recommendations and personalized content. 'Movies' and 'Shows' will be similar to the existing movies and shows pages in the current app. In those pages, users will be able to filter movies by category and change the category of movies.

What information should the hover design show?

Good question. I have no idea. I'll need to think it through. There's lots of information I could show but I dont want to clutter the UI too much. Here's a list of components I'm thinking of showing on hover inside the Movie component:

• Progress of movie: How much percentage of the movie the user has watched
• Genre
• Title
• Rating
• Year

Idea:

(I know, too much questions ^^)

Also one of my goals with this project is to keep communication as open as possible. I really want to encourage open discussion about how we can improve this client. So, in my opinion, there's no such thing as too many questions.

[amilajack]

Updated Movies page

The animation shown below will occur when users click on the 'filter' button

[amilajack]

Yes. It isnt shown in the demo but it would look something like this:

Note that these designs are subject to change.

[z11h]

I love how the Popcorn Icon is in the middle. Also, I like how there would (is there?) be a large cover picture of trending movies in the forefront. Do you have a color pallet already made?

💯

[amilajack]

A basic idea

Useful links:
https://tympanus.net/Development/ImageGridEffects/index2.html

[vzamanillo]

Looks very cool!

About the "popular" section, I think should not really needed if you can sort by popularity, so the main view could be used to show more movies.

[amilajack]

@ZakariaRidouh The biggest gray rectangle is for that. And I dont have a theme yet. I'm just working on wireframing.

[amilajack]

@vzamanillo That makes sense. I'll make an updated version today with the changes.

[vzamanillo]

Something like this, maybe?

[amilajack]

I was thinking of something like this:

Featured Page V1

I think V2 should include the categories of the movies. I should also add the hover design of a card should look like.

What do you think?

[vzamanillo]

I think that looks really cool! love it, but, how to select the featured movies? A carousel for 'Popular' and 'Recently Watched' movies (with a limited number of movies by a fixed default value or a configurable value) could be great too. Maybe the recently watched movies could be retieved from trakt.tv or tvshowtime, but needs scrobbling... Where you are planning to place the movie categories? What information should the hover design show? (I know, too much questions ^^) great work :)

[vzamanillo]

This is extra work. I was thinking of simply using a local database or storage for this. When the user clicks a movie, save its imdb to a list.

For 'Recently watched' the movie should be saved when the user view the complete movie (or at least 99%), if the user click to watch a movie and view one minute only (imagine, the film is so bad) the movie should be on a 'pending' state for resume, a possibility is bring to the user an option to remove the pending movies only, I think adding another section to pending movies has no sense.

An adapter to save to db, trakt.tv or tvshowtime will be optimal.

What do you think about adding an 'Upcoming movies section'? some API like tmdb offers this feature, taking this opportunity I like the way to show the movie rating from tmdb, less space and more rating accuracy.

Movie categories are going to be placed in the 'Movies' page. The featured page simply shows what's trending, recommendations and personalized content. 'Movies' and 'Shows' will be similar to the existing movies and shows pages in the current app. In those pages, users will be able to filter movies by category and change the category of movies.

Based on the categories of the recently watched movies, rating... etc, sounds good.

Good question. I have no idea. I'll need to think it through. There's lots of information I could show but I dont want to clutter the UI too much. Here's a list of components I'm thinking of showing on hover inside the Movie component:

'Director' and 'Awards', but 'Awards' could disturb a bit.

Also one of my goals with this project is to keep communication as open as possible. I really want to encourage open discussion about how we can improve this client. So, in my opinion, there's no such thing as too many questions.

Completely agree, good philosophy, that's how great things are done.

[amilajack]

An adapter to save to db, trakt.tv or tvshowtime will be optimal.

I've looked into this before and its actually a lot of work. For that, we'll need to manage authentication, storage of credentials, and other information. If users want this functionality, I can expose the underlying API so that I can be extended to devs, who can write their own plugins for trakt and other providers.

Here's what I think the basic functionality of playback position capture should be like:

1. Detect the player (PCT, vlc, chromecast, etc) and retrieve the current playback
2. Save the current playback position in minutes along with the movie's IMDB id. This information will be persisted to a local database or cache.
3. On playback of a movie, check the database to see if the movie was played previously. if it was, retrieve the progress of the movie (where the user left off) and start the movie from there.

What do you think about adding an 'Upcoming movies section'?

Adding new releases is actually pretty difficult. We need to guarantee that our providers can actually supply the movie source of these new movies, and thats usually very unlikely.

'Director' and 'Awards', but 'Awards' could disturb a bit.

This functionality will likely be added to the Movie (not movies) page. In my opinion, adding it to the movie card is a bit too much clutter. We can always prototype this out to check if that's the case.

Completely agree, good philosophy, that's how great things are done.

Couldn't agree more!

[vzamanillo]

Awesome, easy categories access and navigation.

[amilajack]

Check out the live demo for the animation:

git clone https://github.com/amilajack/animation-experiments.git
cd animation-experiments
npm i
open staggered-cards/index.html

[amilajack]

Also the source for the designs is in this repo:

https://github.com/amilajack/popcorn-time-desktop-design

[onbjerg]

@amilajack Very nice. Can we still have control over the video quality somewhere, though?

[aurnik]

For the featured page, would the jumbotron/spotlight area be a slider? It seems like it would be a good place to showcase a few different movies in a way that looks slightly different from the individual movie page.
And for hover information I wanted to add: is there currently anything in place to track the viewcount/popularity of an item? If so that would be cool to see.

(Also just wanted to introduce myself real quick, just found the project through the official PT github trying to look for an Electron version of the project. Hope I can be of help both design and development -wise.)

Edit: Here's an example I did using your Sketch file, forgot to include the play button but this is just a rough idea. It gives the full artwork a little more of a spotlight and if you didn't want to wait for the slider you could click the thumbnails at the bottom. I also was messing around with a tab design for the different pages taking inspiration from Chrome, though I do also just like the simplicity that's already there with just the words. Just throwing ideas out there though.

[aurnik]

@amilajack Is this still an active project?

[amilajack]

I've been having a bunch of finals in school so I haven't had much time to contribute to this project or any other project that I contribute to 😔 Right now, my time is divided between eslint-plugin-flowtype-errors, eslint-plugin-compat, and mostly electron-react-boilerplate.

But over winter break, I will very likely make a significant number of contributions to this project. Also this project could really benefit from some contributors. If you're interested in being a contributor, let me know.

[aurnik]

I'd love to contribute -- I was sad to see that this project was dead on the official repo but happy to find that you were reviving it. Do you have any data on the performance improvements between this and the currently used PC app? It could help to bring in new contributors.

…

On Dec 13, 2016, at 10:30 PM, Amila Welihinda ***@***.***> wrote: I've been having a bunch of finals in school so I haven't had much time to contribute to this project or any other project that I contribute to 😔 Right now, my time is divided between eslint-plugin-flowtype-errors, eslint-plugin-compat, and mostly electron-react-boilerplate. But over winter break, I will very likely make a significant number of contributions to this project. Also this project could really benefit from some contributors. If you're interested in being a contributor, let me know. — You are receiving this because you commented. Reply to this email directly, view it on GitHub, or mute the thread.

[amilajack]

Contrary to popular belief, this project is not a fork of any popcorn time or butter project. Its actually a fork of electron-react-boilerplate. So its not related to the official repo.

I've been looking for contributor for a while but couldn't seem to get any. I think two people is actually enough to bring this project back to life. Lets discuss this in #617.

[amilajack]

@aurnik I've invited you to the gitter chat.

[aurnik]

@amilajack For this project or for electron-react-boilerplate?

[amilajack]

Maybe we can have a logo like this:
https://codepen.io/amilajack/full/xXWRmo/
https://codepen.io/amilajack/pen/LzdbaY
https://codepen.io/amilajack/full/KXoNYR/