[Devember 2021] What to Watchlist

[davidbfg]

Thanks for honorable mention for devember project. Also I’d love users what2watchlist.com
Project TLDR; (current state)

• Track shows/movies you are interested in watching
• See availability by region (Great for vpn users)
• Get metrics on streaming providers (who has more movies, etc.)
• Find free media in your watchlist and where to watch it.
• Ready up with a friend in the lobby to find what’s matching between your watchlists.

---

Goal: Combine services from “The Movie DB” and “Privacy.com”

This project is my attempt at creating a service I have wished existed but found myself starting and stopping too many times since the start of Covid. I’m posting in hopes to force myself to stay on target.

I will update below with specifics about how these services will work together once I am further along. I just think it’s a good simple idea that a more experienced developer might bang out quick and then I’d have no ownership over it.

Here

I’ve watched a lot of Netflix in my time. There have been months without watching anything and others where I’d seen all that was good where I’ve scrolled so hard I passed the same movie in 4 different categories.

There is a limit to how much media can be on Netflix. The recommendation algorithm is nowhere as good as Youtube where the media never ends and click-bait is plenty.

I had the Idea that you don’t need an algorithm pushing content on you. Just make a list of media you are actually interested in and waht2watchlist will point you in the direction of streaming services that have movies and shows you actually want to watch.

Manage canceling and starting service by just pausing payment and starting it back up all from the same place with the help of privacy/lithic API.

Here

I have some things to show so far and will host on linode what2watchlist.com with weekly updates.

I’m using Meteor js for development. Currently you can search for media, see some details on movies & tv, make an account, and edit your watchlist. Each week I’ll wipe the server so don’t expect anything you do to be saved while playing around. Project is now in released mode so user data will be persistent.

Current Functions:

• Search
  
• Movie Page
  
• Create User
  
• Add/Remove
  

---

Edit: project link removed IP address reference was waiting 24 hrs from post for dns records to propagate. (For anything I missed either now or later) etc…

Edit2: Service I’m trying to provide descriptor.

Edit3: what2watchlist.com now being served on default port 80/443

Edit: Project tldr and thanks for recognizing my hard work.

[davidbfg]

This week Has been mainly working on features that I had working previously on a different API. TMDB has great documentation and all the features my project needs. Most important of all is they give you permission to use it vs just copying the REST requests of a private IMDB like service.

New pages: (New functions require an account. (Not verifying email yet dummy data is fine.()))

• Watchlist
• Lobby

“What” links to home with the same functionality as before.

---

About Watchlist
Watchlist has all the media you have added.

You can choose a service to see the matches between your watchlist and their media library.

---

About Lobby
Lobby is a location/path to link/share with your friends to see what people want to watch for movie night. Share the web link to your lobby for others to join.

Get everyone ready then you can compare watchlists and see what people want to watch.

The drop down list changes the view to see movies or shows with n matches in the group. Disabled if no matches or only one option. Otherwise the list works the same way as watchlist does.

---

Next week I should finish something implementing the API for Privacy.com. It will all be running in their sandbox so only use dummy data.

[davidbfg]

This week I have been dealing with the Privacy API and their rebrand to lithic.

I had previously seen the Privacy api and stumbled with their documentation. Took some time running into the same issues until I noticed the banner at the top of the page letting me know lithic is the new home of their AIP service.

After reading through the new documentation things started going smoother. I got some signup forms started and can get the user to the stage of issuing cards.

In order to display the cards they have an Iframe you can embed. I have no interest in the added responsibility for holding card info on my app, so it was a must to get working. When I was confused about how exactly to implement and generate the security hashes I looked into Their demo app.

I got it running locally and since both apps were running in Node.js the code was portable. The app with some modifications helped in debugging and validating. I could easily follow how the calls made by my app generated records on the privacy servers.

---

Signup Forms:
Identity verification

Funding Source

---

Card View:

---

I will not be updating the server this week. The functionality is not all there and it won’t be very fun for anybody to throw dummy data into some forms without any next steps available.

I’m getting close to intertwining the two API services. I hope to have something to show off next week but I’m expecting to need more time before the next milestone I can showoff in a post.

[davidbfg]

Note: I edited my top post to mention what feature I’m chasing by combining these two APIs.

---

Two new pages with features this week.
http://www.what2watchlist.com:3000/manager/ (requires account created)
http://www.what2watchlist.com:3000/manager/cards (requires Customer Identification)

---

Finished this last week it’s now live. Customer identification needed to issue cards through the privacy/lithic api. See link below.
http://www.what2watchlist.com:3000/manager/signup
Using sandbox so 000-00-0000 is a perfectly valid ssn as all data entered should be dummy data.

---

/manager

Start by selecting what streaming services you are interested in and your preferred plan if drop-down available.

Apply changes at the bottom then toggle list.

The toggle brings up your preferred streaming services, if they have media that’s in your watchlist.

At the bottom there is a button to start streaming manager. The idea is you rotate through your top 1, 2, or 3 streaming services each month. End of the month the last on the list will be pushed out for you to put the next best service on the top of your queue. Select 1-3 from drop-down and click “Start Streaming Manager”.

Right now it is just a list you add, you remove.

Fill up your queue and if you are not verified there wont be a link.

If you are verified through the customer identification you will see a link to card management.

---

/manager/cards

Here you have your queue of top streaming services. Add card for each.

You get a card for each with limits matching the preferred plan you set at the beginning (top of /manager page.) Edit the selected plan or open/pause card service.

View card buttons are just placeholders for future work.

---

Overall I’m quite pleased with my progress. I plan to go back and throw in css/bootstrap (or some other library) to use the jpeg files from “The Movie DB” to make movie and streaming lists easier to view/manage.

[davidbfg]

Gone through existing pages adding a new coat of paint doing styling. Chose to use Semantic UI library. Using css only version tried js version but project borked for their meteor branch.

---

Home search

new look updates site-wide. now have movie posters and icons for streaming services.

---

Watchlist, new top nav clearly highlights current page

new look achieved using Card implementation to wrap based on screen size.

---

Manager, Edit/Select favorite streaming services

Manager, Sort services by metrics to manage queue of streaming services to rotate through.

---

Card Manager

From the queue you made add cards for a streaming service and view existing cards.

---

next week goals:

1. Plug into email service for domain to get email validation and other features
2. Add option to watchlist for all media available free
3. Maybe some bug fixes and other stuff.

[davidbfg]

Note: server currently bugged due to email. Am working on fixing. Requires some IRL work due to regulatory requirements. Linode has opened email ports for me so user email validation is up and running.

Milestones:

• Free media search
• Fixed bugs. Mainly some issues I saw in ‘movie night lobby’. I wrote this code a while ago and had hoped it was solid because it was complex enough that I didn’t want to deal with it again.
• Card manager page now shows transaction history.
• Plugged into free email service zoho to get domain email. Got email validation and a monthly email suggesting what streaming service to rotate in.

The stream manager now tracks user state. Starting from when they okayed/filled their queue. Next, tracking last payment to the bottom service that is going to be rotated out. Lastly, a little before a full month has passed to recommend the next streaming service to rotate in.

The cycle
Okayed > paid > recommend new service
And repeat.

The recommendation email required cron job scheduling and using mongoDB aggregate pipeline to generate reports/lists.

The aggregate pipeline was used to get all users who were due for a new recommendation and compare libraries. The comparison is a code port of the logic and metrics in the manager table of streaming services.

The aggregate pipeline should free up the web server so it is not locking up for this batch process. Otherwise I would have loved to use the same code functions but node.js is known for it’s single threaded model.

Example email

The Streaming Manager is scheduled to rotate in a new service soon.
Based on your watchlist and favorite steraming providers we recomend Netflix.

Biggest
1. Netflix: 11
2. Amazon Prime Video: 6
3. Epix: 1

Most Popular
1. Netflix: 2053
2. Amazon Prime Video: 298
3. Epix: 281

Top Rated
1. Epix: 7.7
2. Netflix: 7.61
3. Amazon Prime Video: 7.14

Top Weighted
1. Netflix: 7.81
2. Epix: 7.7
3. Amazon Prime Video: 7.37

Go to http://www.what2watchlist.com:3000/manager to select your prefered steraming service.
Thanks, W2W team

After pushing updates, the email service stopped working. Ran into this, a policy to prevent spam email. Was hoping email would be no cost but if I have a nightly promotional email I’d need a po box address as a legal requirement.

Will be working on requirements for this and update this thread once finished.

[davidbfg]

After some deving to give users a profile page to be in compliance with can-spam. I have gone through linode support to get ports opened for email access. After that it seems that I have gotten to the point where I achieved my original goal and while it’s not perfect the structure of the app is there.

Moving forward I am going to be focusing on getting a production worthy deployment. It will actually have the lithic/privacy API removed because Issuing cards for people is in their enterprise tier. As a well to do developer I assume I am a bit far off from having all my ducks in a row to call myself an enterprise.

Anyways…

This weeks milestones:

• Short circuit js syntax update using ‘Optional Chaining’. Awesome addition to language found and went over my code to refactor/easily simplify certain sections of my code.
• Changed how I use ID’s for media. Found this and knew it would be an issue.
• added basic user profile page.
• limited space used by the list of streaming providers. It easily got out of hand after the first dozen of movies in a watchlist.
• On the page for an individual piece of media you can browse what streaming services are available for a region.

Changing media ID’s
I had tried to not deviate to much from the base api TMDB gave me. Even though it is significantly easier for me to just throw tv shows and movies in the same collection. I had code where I do the same query on both collections separately and then combine the results. After seeing there is the possibility for ID collisions I modify it by adding ‘m’ or ‘t’ to the beginning. Now it’s all in the same collection and there is just a little bit of conversion before I cache things locally. A lot of code throughout the project has been cleaned up by this simplification.

User Profile

Compact Services

Streaming Regions

[davidbfg]

This weeks milestone is getting a version pushed to my server with a proper release procedure that I am now serving with https on the default port what to watchlist link.

I’ve gone through drinking from the fire hose of configuration, documenting procedure as best as I can for my records so I’m not lost later on looking at something I setup months ago.

Started by setting up an old laptop to run as a server locally. Went through Meteor documentation tried meteor-up package and the auto-magic configuration was not working for me. Decided to go the process of building package locally and pushing it up to the server.

I could have gone the easy route and had my app hosted on their galaxy platform. Overall the free tier did not seem great and I’m always happy to learn something to save myself money.

After quite a bit of reading documentation and proper release procedures, I ended up using these tools

• Nginx
• letsencrypt for https cert
• Meteor build
• ufw server firewall
• mongodb (local access only with user and password access only)
• helmet js lib to define a Content Security Policy for XSS protection

I will still be working on this in the future. I’ve looked at vue.js and hoped to use that for ui instead of the meteor default. So while there are still some things that don’t seem too polished I had left them behind hoping they will be easier to address later on.

One day I hope to add Privacy/Lithic API functionality back and not just pointing to sandbox server. With the dev sprint I’ve been in I left unit testing behind. Proper testing is a must before releasing that kind of full-fledged feature.

Thanks to those who have followed along and pushed the like on my post.

[davidbfg]

I have recently pushed a server update.

Goals achieved:

• ported frontend code to vue.js.
• I have added Element UI to the project. It has a lot of features I like.
• Element UI drawer for favorite streaming services selection.
• Coded new login functionality.
• UI cleanup: card borders were unappealing, etc.
• Easier to navigate view for where media is streaming.
• backend unit tests.

---

Utilized cool features of element UI tables. Embedded sorting and select-able rows with the ability to remember selection while changing table sorting. It made my code simpler and more efficient.

---

The streaming service manager page had a lot going on that you didn’t need to be dealing with all the time.

So I added drawer functionality with a pinned button on the side to open it. You can select your favorite streams once then put it off to the side.

Just a solid quality of life UI improvement.

---

New login page. Had been using a drop in package that was convenient and required meteor’s default blaze UI. Ditched it to use only vue.js code for the UI. Wrote functionality for it with this mit licensed boilerplate project as a jumping off point.

---

Googled how to clean up the borders on these cards. It is so much easier to look at now.

---

Cleaned up region list to not be so long. Group together regions that have the same streaming services available. Example a Netflix exclusive would be in all regions meaning there used to be about 20 regions with the same result. This fixes that.

Separated streaming services by if you are getting them for free or not. So if you are just looking for where something is streaming for free you don’t have to click through all regions to find it.