+5

Adding Currently Reading label to comics

lostndessence 1 month ago updated by ListerD 1 week ago 10

Hello, I'm new to Ubooquity and I've taken to using it primarily for comics. With so many to sort through, it can be hard to keep track of where you are in any given series. So I've been trying to figure out how to mark them as Read or Started Reading. I couldn't find any solutions online or here on the forum so I decided to try doing it myself. (However if this info was already out there, please let me know)

This solution is currently only tested in the plex theme for Ubooquity as that's the theme I use, and only works for comics.

This Theme: https://ubooquity.userecho.com/communities/1/topics/666-plex-based-theme

Through tweaking and digging in the code, I discovered that a GET pathway exists where one can request some data if they have the id of a comic. That path looks like this:

host_name:port/user-api/bookmark?docId=****

where host_name is your ip or domain, port is the port, and **** is the id of the comic.

The returned JSON looks like this:

{

"docId" : 3326,

"isBook" : false,

"mark" : "0",

"isFinished" : false,

"lastUpdate" : 1576387903971

}

It's important to note that "mark" in the above JSON is the current page saved in the bookmark of that particular comic. Therefore, using a GET request we can determine if a comic has been started or not based on that value. Also, if a comic has never been opened, the GET request will return null.

The last bit of information we need is where to get that ID for the comic, and this can be found by looking at the source url of the cover image displayed. It will say /comics/****/comic_filename?params (again where **** is the comic id).

The following JS code will loop through all of the comics (exluding folders) on the current page, make a GET request for each, and (so long as the value of mark is not 0 or null) will add a "reading" label.

///////////////////

//MODS

///////////////////

// Anonymous "self-invoking" function

(function() {

var startingTime = new Date().getTime();

// Load the script

var script = document.createElement("SCRIPT");

script.src = 'https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js';

script.type = 'text/javascript';

document.getElementsByTagName("head")[0].appendChild(script);

// Poll for jQuery to come into existance

var checkReady = function(callback) {

if (window.jQuery) {

callback(jQuery);

}

else {

window.setTimeout(function() { checkReady(callback); }, 20);

}

};

// Start polling...

checkReady(function($) {

//////////////////////////////////

//Add currently reading condition to comic

//////////////////////////////////

$('.thumb a img').each(function(){

raw_src = $(this).attr('src')

page_num = '0';

//sort comics from folders

if (raw_src.search("folder") >= 0){

//console.log("raw_src: "+raw_src);

} else {

//extract Comic ID

thing = $(this);

src = $(this).attr('src');

//console.log("source: "+src);

$(this).closest('.thumb').append('');

var comicid = src.split('/');

//console.log("Comic ID: "+comicid[2]);

//get comic meta from server

json_url = window.location.origin+"/user-api/bookmark?docId="+comicid[2];

console.log("url: "+json_url);

$.getJSON( json_url, function() {

console.log( "success" );

}).done(function( data ) {

current_this = thing;

if (data != null){

var items = [];

var c_id = '';

$.each( data, function( key, val ) {

if (key == 'docId'){c_id = val;}

if (key == 'mark'){

page_num = val;

if (page_num != '0'){

$("img[src*='"+c_id+"']").closest('.thumb').find('.number').html("reading");

$("img[src*='"+c_id+"']").closest('.thumb').find('.numberblock').addClass("reading");

}

//console.log("page_num "+page_num);

}

});

}

}).fail(function(){});

}

//console.log("triggered");

});

});

})();

// end Anonymous "self-invoking" function

Add this script at the bottom of themeScript.js in the plextheme files. Note: This script can only determine if the comic has been started, not when it is completed. So to clear the "reading" label, simply return the comic to page 1 and exit it. I also added some styles to make the label itself look ok. This can be added to comics.css

.reading{ bottom: 0; background-color: #009218 !important; top: initial !important;}

Anyone with knowledge of js and css should be able to modify this for their own favorite theme, or hopefully this can help someone more clever than me develop a universal script that can do the same thing for everyone.

thanks, this is a feature i really miss. Can you share your modified files because I tried but I didn't get it to work.

Another question, if the returned JSON looks like this:

{

"docId" : 3326,

"isBook" : false,

"mark" : "0",

"isFinished" : false,

"lastUpdate" : 1576387903971

}

Cannot be used "isFinished" to flag the comic as finished or whatever instead still showing the "reading" tag?

+1

The isFinished value always seems to be false for comics. I've tried getting all the way to the last page of the comic, closing, refreshing, clearing cache. It remains false. Not sure what it's purpose is, but maybe it's an eBook only variable.
If any Ubooquity devs are reading this, having that work for comics as well would be a blessing. Thanks in advance.
Actually going back into the code, I've learned that the structure of this bookmark object is meant to be used as a cookie. If you have the cookie version of the bookmark enabled in the server settings, the isFinished value tells it if the cookie is expired, or something along those lines, but has nothing to do with your place in the book, unfortunately. 

As for the modified files, I went ahead and added them to git here:
https://github.com/nullredirect/modifiedPlexTheme-Ubooquity.git

Hey thanks for your quick reply. I have it working now with your repo :)

is there any way to get the total pages of a comic? because i'm thinking if we could get that it can be used to match it with the mark value and if the mark is equal to total pages tag it as Completed or something like that.

+2

I think I found a way to get that value. I'll try to get this setup on my system and if it works I'll update the git and then come back here and leave an explanation. 

Also someone was asking for a progress bar a while ago in the forum. With both those values, it's possible. 

This is such a good starting point. Thank you so much.

I cannot get my head around how JS works. I've only taught myself enough Python to accomplish what little projects I come up with and have time for.

How would importing this to another theme work? I don't understand where themescript.js is called.

The existence of the "page_num = val;" pointer also opens up changing the default "total number" when browsing comics and being able to do an unread value, if that pointer is exposed when the server cycles through the series view.  I'm about to spent 4 sleepless days in the hospital, maybe I'll take my laptop and give it a go.

I don't know anything about Python so I totally understand that feeling of disconnect between one language and another. 

So the Ubooquity server seems to be built in JAVA as an applet, but really it's just an html server, meaning it's job is to give out some html when a user goes to a specific url on the server.

Quick note JAVA and Javascript are two completely different things.  

Now to understand JS, you have to think in terms of things that happen on the serverside of an html request (what we sometimes call a site visit or page visit), and what happens on the browser side. On the server side, html is compiled from separate files and consolidated into a response that your browser then interprets and displays. Once the browser gets hold of the code, then we're talking about the browser side of things. Here, the original server no longer has control of the content it sent over, leaving us room to make all sorts of modifications. One of the ways we can do that is using Javascript, a browser-side scripting language. So I think the best way to view JS is as an after the fact patch tool. 

Take photography for instance. You start by taking a photo with the camera, then you might tidy it up in photoshop. Well the act of taking the picture with the camera is the serverside part, and the tidying it up in photoshop is the browserside part. In this analogy, JS would be a sick suite of tools in photoshop that lets you go beyond the normal limitations of photoshop. 

Of course JS can also be used in a host of other projects that aren't web based. I'm not familiar with these applications so I wont talk about them here, but at least now I think you'll have the most basic idea of how you would use JS. 
-----

Now lets talk about the themescript.js file. Ubooquity is designed with a theme system in place, giving us the ability to change the appearance of the server. The way these theme customizations work: within the theme files are files with names identical to the default theme files, and the system lets us use our version of that file instead of the originals. 
This is still pretty limited in some respects since we have a limited pool of files to override, but the file themescript.js is one of those files, and as long as it is in our theme, Ubooquity will automatically load up that code. So if you're looking through the theme code hoping to see where that file is being called, you wont. That part is somewhere in the server code. 

Using another theme, it may have it's own themescript.js file setup, in which case you would NOT want to just delete all the content in there and replace it with the code in my themescript.js file. You would lose some of the code uniquely added to let your own theme function. That's why I was saying to paste the above code at the bottom of said file, as this should allow the original code to still work, and ALSO add on this functionality. 
-----

Also yes, the script can be modified to say unread instead by changing some of the code. 
Currently the code is ignoring comics with null bookmarks, but you would want to target those first. 
Then after that check through the comics with bookmarks and target the unread ones like this:
if (page_num < 1)

and lastly change this:
$("img[src*='"+c_id+"']").closest('.thumb').find('.number').html("reading");

to this:
$("img[src*='"+c_id+"']").closest('.thumb').find('.number').html("unread");

Hi !

Splendid idea !

I'm quite new to Ubooquity(a week ?) and I love it.

Beeing able to know what your are reading is so great ! When the comics are hidden deeply in subfolders on the other hand,  it is still difficult to remember what you are reading.

Do you think of a way to list first all the comics you are reading atthe moment first (like in Plex where you see first all the movies you are watching) ? I know that it is not so easy on the client side... I could be helpfull because I know js/html/css. 

Thanks !

Hi lostndessence !

I made another mod on yours (I forked your Gitub repo) to avoid comic duplicates : The deduplicator.

I'm planning to try to make a special page with all the currently reading comics to put on your great mod too. It would be like Plex for movies. I miss too much this on Ubooquity.

We can talk about that when you want if you like.

C U soon !

Love the reading tag, nice work!  Any updates on whether completed or a progress bar will be possible?

Thx!