Media Kraken: keep track of your media in your POD

Build a Solid App
#1

After some months of side-project work, here’s the first version of my new Solid app. This time, I’ve developed an application to help you keep track of your media (Movies, TV shows, etc.). This first version only tracks movies, and I can’t promise anything, but it’s very likely that I’ll add support for TV Shows and other forms of media in the future.

You can use it here: https://noeldemartin.github.io/media-kraken/

I’d appreciate any feedback you can tell me, be it from a developer or a user perspective.

Something I’ve done different from my previous app is the way data is stored in the client. Like before, users have the option to log in using Solid or browser storage. But this time, the data stored in the browser is also semantic data. Thanks to this, the application comes with functionality to import and export using JSON-LD. I also updated my library soukai-solid to be more consistent with Solid’s data model (HT to @aveltens for helping me understand it better in this thread :D).

Using browser storage, the application can even work offline for the most part (except the external API to search new movies). It doesn’t go as far as working offline with Solid and synchronizing going back online, but that’s definitely something I’d like to do and this is a step forward in that direction.

If you want to learn more, you can read the documentation and browse the source code in github: https://github.com/NoelDeMartin/media-kraken

8 Likes
#2

For the version without a Solid pod, you could take a look at solid-rest. It tries to provide a Solid-like API for custom backends and includes file://, localStorage and BrowserFS out of the box. It’s probably not 100% production ready, but it could simplify the switch between Solid Pod and local pod

1 Like
#3

Great work, impression of first use / try is very nice. Will look a bit under the hood during the next days

1 Like
#4

That’s nice, I didn’t know solid-rest and I’ll take a look. Although my application is using IndexedDB at the moment, because I am running the initial loading within a Web Worker and they don’t have access to the Local Storage API.

#5

Ok thank you :).

Related with the things we talked in that thread, the application does support moving the WatchActions around (as long as you keep at least the schema:object within the same document). What is not supported yet is having resources where the url doesn’t match the document url, for example moving a movie to /movies/spirited-away#it would not work. I am aware of that limitation and I have a couple of TODOs here and here. I think it should be relatively easy to implement, but I had been working on the app for a long time and I wanted to release a first version already :sweat_smile:. If it’s a problem for someone I’ll prioritize it, but for data generated with this app it should be ok. I’d be thrilled if someone wants to use this application with existing data :).

1 Like
#6

That looks great, congrats on the beta launch. I really liked that one can check out the app without the requirement to log in.

1 Like
#7

Nice work @NoelDeMartin. It’s very slick and I like the onboarding - getting the tone right when speaking as the app to the user is hard. Usually that just annoys me, but this worked a treat. Well done!

There was some issue with Auth. Everything worked to start: I chose to load the 100 best movies and when that was done, clicked on a couple, marked one as watched. But then I got a popup telling me there was a problem with auth and that I should login again (sorry didn’t make a note of any details as it was late). When I went back to home, I was logged out so I left it there.

I was using Firefox on Android tablet.

#8

Nice work @NoelDeMartin. It’s very slick and I like the onboarding - getting the tone right when speaking as the app to the user is hard. Usually that just annoys me, but this worked a treat. Well done!

Thank you :). I’d like to improve the copy and the way things are communicated because I’m sure many users will get confused on what the app does. But I guess that’s a never ending task.

There was some issue with Auth. Everything worked to start: I chose to load the 100 best movies and when that was done, clicked on a couple, marked one as watched. But then I got a popup telling me there was a problem with auth and that I should login again (sorry didn’t make a note of any details as it was late). When I went back to home, I was logged out so I left it there.

I implemented something to handle the login when an authentication token expires. But it shouldn’t be happening so soon, so maybe it’s something else. I think this can also happen when there is an error during boot up, do you remember if you refreshed the page before getting the error?

#9

I don’t think I reloaded the page, but it happened when navigating. It might have been five minutes or so as I left it loading the initial movies which was quite slow, so maybe it just expired.

Although after the movies loaded I was first able to visit at least one movie and mark it as read. So there was no significant delay between that and navigating.

#11

Is it possible that the popup said “We couldn’t validate your credentials, please login again”? And it was a native popup? (it’s implemented with a native alert , no custom UI)

If that’s so, that only happens when the auth session is updated, triggered by a listener from solid-auth-client. So it must have something to do with the session, but I’m not sure what.

I’ve been thinking of a way to help users with this kind of errors, but I’m really not sure how to go about it :/. Using something like Sentry would be ideal, but it goes totally against my idea of what I want the app to be. I don’t want it to interact with any server that isn’t the POD (even though in this particular app I also need to call the tmdb api for searching movies). I thought about asking for opt-in to use something like that, but I really don’t like it at all. So for now I have no way to help users unless they help me debugging, I’ll see if I do something about it in the future.

#12

Well, if it’s opt-in, I’d be happy to add Sentry to my tracker blocker’s allowlist for Media Kraken :slight_smile:

1 Like
#13

Maybe Glitchtip does the job for you. I didn’t check features all that much, but they were created, partially forked from Sentry before their license change. They are cloud-based but can be self-hosted too, and are fully OSS with MIT license.

3 Likes
#14

I don’t think so. I think it was more wordy and feels like it was the app but I’m not sure. I’ll try to generate it again later.

#15

I just released a new version with some improvements given the feedback I got, thank you!

The most relevant thing is that I’ve added an opt-in setting to send reports to Sentry. If the application doesn’t even boot up, this can be forced by passing ?error_reporting=on in the url. This will hopefully help me do better support :).

@aschrijver, I tried using GlitchTip but I couldn’t get it to display any errors. Not locally nor using their cloud service. So I don’t know, at least the client side is the same so I won’t have to change my code when it works. Thanks for the heads up!

@happybeing, you should be able to activate error reporting and maybe I’ll be able to see what’s going on with that authentication issue if it happens again.

3 Likes
#16

Tried last night, first the login was hanging (seen quite a few times with different apps logging in using Solid.community) but the login did appear to have worked when I reloaded. Since then I’m stuck with this and no console to view (Firefox on Android):

20200725_134707135
20200725_134707135800×1280 39.2 KB

#17

Ok, that seems to happen after the movies container is loaded so at least something is working. It may be something wrong with a movie. It looks like a bug in the app, but without any debugging information I can’t do anything about it.

I have to improve that error, I hadn’t thought about mobile users not being able to look at the console :sweat_smile: (and I use the app in mobile myself). But I also don’t want to show things like stacktraces or exception messages in the UI.

Right now what I can think of is that you can either log in on a desktop device and look at the console or append ?error_reporting=on to the address and I should receive the error report. I know it’s not ideal and I understand if you don’t want to bother anymore. If you want you can also send me a private message and I can help you there, so that we don’t pollute this thread going back and forth :).

Sorry and thanks for helping!

1 Like
#18

@moderators can you make a new topic with the posts about this error, thanks.

@NoelDeMartin I’ve just repeated the error with ?error_reporting=on so hopefully you have some info (again on Firefox/Android).

#19

Great effort!

On-boarding worked nicely.

Questions:

  1. Bearing in mind that I authenticated using my WebID, shouldn’t the movie data be in my inbox, or some other folder associated with my pod?

  2. Regarding local storage, which appears to be IndexedDB based, how do I get at the movie data imported?

Screen Shot 2020-07-26 at 6.39.47 PM
Screen Shot 2020-07-26 at 6.39.47 PM1815×858 511 KB

#20

I got the error but it only tells me “NetworkError when attempting to fetch resource.” At least we know it has something to do with the network. I remember having problems with movies starting with a dash in their name but I couldn’t reproduce it after a while, not sure if that has anything to do with it.

I think I’ll release a new version with better error handling, both the “look at the console” and that UI can be improved a lot, I’m just not handling any errors in the bootup. I’ll try to find a good compromise between not confusing users and giving them enough information for proper debugging/support :).

1 Like
#21

Thank you :slight_smile:

At the moment, I am looking for a container of schema:Movie in your private type index and if it doesn’t exist I create a new one in /movies. This is briefly documented here.

The movies that you see when you search in the header are not in your pod, those come from tmdb api, and they’ll be added to your pod if you mark them as watched/watch later. The 100 imdb movies is an exception to this rule to get you started if you don’t know what movies to look for.

If you go to your collection, there is a menu that opens by clicking on the kebab menu icon and you can import/export your data in JSON-LD format.

If you’re using Solid, the IndexedDB is only a cache. And even if you’re using browser storage, this should be transparent for the user and you can interact with the data using the UI. Besides importing/exporting, you can delete movies if you use the kebab menu on the movie profile like the one on that screenshot.