Redesign #145

amilajack · 2016-08-22T01:30:01Z

An initial base design for release 0.0.6

The gray represents cover images of movies.

Thoughts?

z11h · 2016-08-22T08:02:48Z

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?

💯

vzamanillo · 2016-08-22T16:13:29Z

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 · 2016-08-22T16:53:03Z

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

amilajack · 2016-08-22T16:55:24Z

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

vzamanillo · 2016-08-23T08:30:35Z

Something like this, maybe?

amilajack · 2016-08-23T17:49:26Z

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 · 2016-08-23T20:26:23Z

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 :)

amilajack · 2016-08-23T21:02:12Z

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.

vzamanillo · 2016-08-24T07:48:00Z

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 · 2016-08-24T16:06:34Z

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:

Detect the player (PCT, vlc, chromecast, etc) and retrieve the current playback
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.
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!

amilajack · 2016-08-28T18:19:45Z

Updated Movies page

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

vzamanillo · 2016-08-29T07:43:02Z

Awesome, easy categories access and navigation.

amilajack · 2016-09-08T22:37:07Z

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 · 2016-09-08T22:39:38Z

Also the source for the designs is in this repo:

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

amilajack · 2016-09-16T19:50:12Z

A basic idea

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

onbjerg · 2016-10-16T22:54:41Z

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

amilajack · 2016-10-16T22:58:07Z

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

Note that these designs are subject to change.

aurnik · 2016-11-14T09:30:08Z

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 · 2016-12-14T05:53:05Z

@amilajack Is this still an active project?

amilajack · 2016-12-14T06:30:30Z

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 · 2016-12-14T06:46:23Z

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 · 2016-12-14T07:00:45Z

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 · 2016-12-14T07:03:54Z

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

aurnik · 2016-12-14T07:35:46Z

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

amilajack · 2017-10-08T17:14:24Z

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/

amilajack added the design label Aug 22, 2016

amilajack added this to the Release 0.0.6 Alpha milestone Sep 17, 2016

amilajack mentioned this issue Oct 6, 2016

Some video codecs are not supported #171

Closed

amilajack mentioned this issue Oct 14, 2016

Discussion: switch to using Noto font #188

Closed

amilajack closed this as completed Aug 26, 2018

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Redesign #145

Redesign #145

amilajack commented Aug 22, 2016 •

edited

Loading

z11h commented Aug 22, 2016

vzamanillo commented Aug 22, 2016 •

edited

Loading

amilajack commented Aug 22, 2016 •

edited

Loading

amilajack commented Aug 22, 2016

vzamanillo commented Aug 23, 2016

amilajack commented Aug 23, 2016 •

edited

Loading

vzamanillo commented Aug 23, 2016 •

edited

Loading

amilajack commented Aug 23, 2016 •

edited

Loading

vzamanillo commented Aug 24, 2016 •

edited

Loading

amilajack commented Aug 24, 2016

amilajack commented Aug 28, 2016 •

edited

Loading

vzamanillo commented Aug 29, 2016

amilajack commented Sep 8, 2016

amilajack commented Sep 8, 2016

amilajack commented Sep 16, 2016 •

edited

Loading

onbjerg commented Oct 16, 2016

amilajack commented Oct 16, 2016 •

edited

Loading

aurnik commented Nov 14, 2016 •

edited

Loading

aurnik commented Dec 14, 2016

amilajack commented Dec 14, 2016

aurnik commented Dec 14, 2016 via email

amilajack commented Dec 14, 2016

amilajack commented Dec 14, 2016

aurnik commented Dec 14, 2016

amilajack commented Oct 8, 2017 •

edited

Loading

Redesign #145

Redesign #145

Comments

amilajack commented Aug 22, 2016 • edited Loading

z11h commented Aug 22, 2016

vzamanillo commented Aug 22, 2016 • edited Loading

amilajack commented Aug 22, 2016 • edited Loading

amilajack commented Aug 22, 2016

vzamanillo commented Aug 23, 2016

amilajack commented Aug 23, 2016 • edited Loading

Featured Page V1

vzamanillo commented Aug 23, 2016 • edited Loading

amilajack commented Aug 23, 2016 • edited Loading

vzamanillo commented Aug 24, 2016 • edited Loading

amilajack commented Aug 24, 2016

amilajack commented Aug 28, 2016 • edited Loading

vzamanillo commented Aug 29, 2016

amilajack commented Sep 8, 2016

amilajack commented Sep 8, 2016

amilajack commented Sep 16, 2016 • edited Loading

onbjerg commented Oct 16, 2016

amilajack commented Oct 16, 2016 • edited Loading

aurnik commented Nov 14, 2016 • edited Loading

aurnik commented Dec 14, 2016

amilajack commented Dec 14, 2016

aurnik commented Dec 14, 2016 via email

amilajack commented Dec 14, 2016

amilajack commented Dec 14, 2016

aurnik commented Dec 14, 2016

amilajack commented Oct 8, 2017 • edited Loading

amilajack commented Aug 22, 2016 •

edited

Loading

vzamanillo commented Aug 22, 2016 •

edited

Loading

amilajack commented Aug 22, 2016 •

edited

Loading

amilajack commented Aug 23, 2016 •

edited

Loading

vzamanillo commented Aug 23, 2016 •

edited

Loading

amilajack commented Aug 23, 2016 •

edited

Loading

vzamanillo commented Aug 24, 2016 •

edited

Loading

amilajack commented Aug 28, 2016 •

edited

Loading

amilajack commented Sep 16, 2016 •

edited

Loading

amilajack commented Oct 16, 2016 •

edited

Loading

aurnik commented Nov 14, 2016 •

edited

Loading

amilajack commented Oct 8, 2017 •

edited

Loading