mboinet / ttrss-mobile

A mobile webapp for Tiny Tiny RSS

ttrss-mobile

A mobile webapp for Tiny Tiny RSS

What is it?

This webapp is a client for Tiny Tiny RSS. It uses its JSON API.

I started working on this because the default mobile version was somtimes slow, limited and not in good shape for future development.

ttrss-mobile is using:

• jQuery Mobile
• Backbone.js
• RequireJS

How to install?

• Download the latest release available here.
• Unpack the archive somewhere on your server.
• Alternatively, you can clone the repository where you want it on your web server.
• In the scripts dir, copy conf.js-dist to conf.js and set the variable window.apiPath pointing to your Tiny Tiny RSS installation.

Updates

• Download the update
• Unpack it over your previous installation
• Compare the new conf.js-dist with yours and merge them
• It should be ready
• (Don't forget to clear your cache if you see something strange)

How to hack on it?

You need node.js to make a build but you can still hack without it.

• Clone this repo on your webserver
• Hack on the files in src
• Test on the version in src
• Build with make/make.sh
• Test with the built version in build
• Make a pull request with your awesome contribution

Caveats

• You should not put this webapp in a subdir of your Tiny Tiny RSS install. On update, it could be wiped. For more info, see this post from HunterZ on the forum.

• Make sure that the user you'll use to connect has the API activated in Tiny Tiny RSS preferences :

  • in Tiny Tiny RSS go into Actions -> Preferences
  • Configuration -> Enable external API

• If you want to host this webapp on another hostname than your Tiny Tiny RSS instance, you'll find a solution using CORS in this issue.

Current features

• mark all as read/unread
• categories support
• feeds icon display
• image & objects adapted to the screen size (max-width: 100% in CSS)
• link to the original article
• unread count display
• special feeds
• publish/unpublish article support
• star/unstar article support
• mark as read/unread article support
• iPhone webapp support (startup image & icon)
• SINGLE_USER_MODE support
• settings page: only number of articles to load as of now

Other features to come are tracked as issues. Feel free to give a hand or request things :-)

License

ttrss-mobile is Free Software under the AGPLv3

ttrss-mobile's Issues

Feature request: Previous and Next buttons at the top (option)

Some of the RSS feeds I read can be long, and have adverts. When I'm reading through the feeds, it would be nice if the there was an option to have the "previous" and "next" button bar was at the top, just underneath the main bar so I can quickly pass over articles I'm not interested in, without having to scroll down to the end.

Appreciate this wouldn't be for everybody, but could it be an option?

Thanks for looking, Gas.

Jump back to page with new articles

Imagine this situation
I have read all articles of a feed, and press the "back" button on the feed list page.
I am now brought back to the category page.

If the category does not hold any new articles any more, then I would appreciate if I would be brought back directly to a higher level where are still unread articles.

Ability to open links in Google Chrome instead of Safari

It would be nice if the app could open all external links in Chrome instead of Safari. This requires changing all URLs in the header and article.

I coded a short hack today that works for me:

diff --git a/conf.js-dist b/conf.js-dist
index 6e43e61..716d0f5 100644
--- a/conf.js-dist
+++ b/conf.js-dist
@@ -10,3 +10,6 @@ window.apiPath="/tt-rss/";
 /* relative URL from the root to access this webapp */
 window.webappPath="/ttrss-mobile/";

+/* Should links be opened in Google Chrome instead Safari? */
+window.useChrome=0
+
diff --git a/main.js b/main.js
index 30168ea..129618f 100644
--- a/main.js
+++ b/main.js
@@ -832,6 +832,11 @@ function defineViews(){
         // apply content filters
         article = cleanArticle(article, this.model.get("link"));

+        if (window.useChrome)
+        {
+          article = article.replace(/(<a href=")http/g, "$1googlechrome");
+        }
+
         // display article
         $contentDiv.html(article);

The only cases where this wouldn’t work (and I could think of at the moment) are:

1. Environments outside of iOS where googlechrome(s):// is not present.
2. <pre> and similar environments that don’t render HTML and where the regular expression would match nonetheless.

Allow configuration of # of items per page

There's a sensible default of 10 entries in main.js .

It would be nice to be able to configure it via conf.js.

Poor performance with 305 feeds / 1375 unread items

OS X 10.8.2 Chrome 26.0.1410.43
Here's my testcase.

• Login (this is fine)
• Click "Uncategorized" category (this is fine)
• Click the first feed in the list (this is fine)
• Click the back button
  When I click the back button, my late 2012 laptop shows Chrome running at 100% CPU utilization for 21s !!
  During that time the app is unusable.

Using Chrome Dev Tools I profiled this and here's what I see.
Backbone's done callback eventually calls FeedsPageView.render which iterates
through each feed calling FeedRowView.render. Near the bottom of the
FeedRowView.render method you call $lv.listview("refresh");
This method takes ~ 70ms on my machine.
And since that's 70ms per feed * 305 feeds it's ~21s to refresh alone.

  var $lv = window.feedsPageView.$("div:jqmData(role='content') " +
    "ul:jqmData(role='listview')");
  $lv.listview("refresh");

I dont think this code is needed, and if it is needed it would be better to call it once in FeedsPageView.renderList(). Either way, I removed it and everything still refreshes/updates fine, just much faster.

The other thing I noticed is FeedsPageView.renderList() is actually called twice every time you press the Back button which hurts performance too.
This happens due to the feeds route method (line 1348 https://github.com/mboinet/ttrss-mobile/blob/master/main.js#L1348)
The FeedsPageView's render method is called directly and then the next line of code feedsModel.fetch() ends up calling render() too. This happens via Backbone's sync method calling the collection.reset method.

Rendering the view twice hurts performance. I don't know backbone but I changed

this.goto(window.feedsPageView.render().$el);

to

this.goto(window.feedsPageView.$el);

to eliminate the double render.

With these two changes ttrss-mobile is much faster for me.

Some items empty

Items for some feeds like the one for viedemerde.fr appear empty in ttrss-mobile.

1.0 doesn't work on iPod Touch with iOS 4.2.1

ttrss-mobile version 0.9.2 worked fine, but 1.0 doesn't load anything. All I see after login is top bar with:

[Settings] Categories [Menu]

... but no content is loaded. It works on my desktop (with Chrome) so it's not a configuration error. I'm using tt-rss 1.7.9.

Support for SINGLE_USER_MODE?

I'm running tt-rss in SINGLE_USER_MODE. That means that no authentication is done in tt-rss.

Still, ttrss-mobile wants me to log in. Which is a serious problem since there is no account to log into.

Any chance to add support for the tt-rss SINGLE_USER_MODE?

Allow configuration of the articles list ordering

When the configuration page will be ready, we need to add an item to let the user specify ordering:

• the most recent fist
• the oldest first

"Hosted on same domain name" note not completely true

The readme states that ttrss-mobile " should be hosted on the same domain name." Without additional configuration this true, but with a simple .htaccess file it is possible to install ttrss-mobile in any domain you want.

My ttrss is installed on http://rss.mydomain.com. I wanted ttrss-mobile install on http://mrss.mydomain.com. After setting everything up the browsers throws a cross-origin resource sharing exception and that is expected.

If ttrss is running with an Apache web server this is easy to solve. I only had to copy this .htaccess file into the ttrss/api folder and everything works.

Header set Access-Control-Allow-Methods "POST, OPTIONS"
Header set Access-Control-Allow-Origin "http://mrss.mydomain.com"
Header set Access-Control-Allow-Headers "Content-Type"

My conf.js looks like this:

window.apiPath="http://rss.mydomain.com/";
window.webappPath="http://mrss.mydomain.com/";

Not sure if I set the window.webappPath variable correctly. But it looks like everything works.

release 0.9.2 ReferenceError: logout is not defined

Hi, first many thanks for this. : )

Second :
it's impossible to logout, Firefox console show :

ReferenceError: logout is not defined
/scripts/main.js
Line : 133

Fixed header as an option

http://tt-rss.org/forum/viewtopic.php?p=11153#p11153

Make the header in an article view always on top. As an option.

Crash on launch with Chrome Mobile 25.0.1410.58?

I have a Galaxy Nexus that launches the site fine, but if I try to launch it on my Samsung Reverb it simply crashes Chrome :-/

Feature Request: Mark read and refresh

Option in the settings to enable auto refresh (load new articles) after using "Mark as Read" button. Need not apply to "Mark as Unread"

Option to hide feeds with no items.

Hi,

I would like an option that would allow hiding of feeds that don't have new/unread items.

Thanks for your work, it's otherwise great for me.

Remember last selected feed

Upon login it would be nice to automatically continue the feed which was last read.

Blackberry 10 issues

When loading your mobile interface on a Blackberry Q10 everything appears to be working just fine except for the browser swipe gestures.

I'm supposed to be able to swipe from the left and right of the screen to bring up browser specific menus like 'New Tab' and 'Add Bookmark'.

Seems some how your webapp disables them. Please let me know how I can provide more info for fixing this problem. I haven't had it occur with any other webpages on my Q10.

Few tips

Hi,

at first, nice piece of work, with Tiny Tiny RSS it's almost perfect replacement. Just a few tips:

1. have you consider using some sort of transcompiled language instead of pure Javascript? I started using Coffescript, there's also TypeScript, and more for sure. It would be more readable (well, after some time, one needs to get used to it), translates directly to JS, even JS form is cleaner and tidier, and shields author from some JS weirdnes. Not mentioning it's smaller in result :)

To put it short - I really like your code but before I started making my changes, I translated it to coffeescript. If you're interested just take a look, I think it might be useful for future development. Its funcionality is the same as yours, I just added few things I really liked to have in RSS reader (swipe to mark articles as read or starred, reversed order -newest first - and loading older articles when you sroll to the bottom of page) - it's still far from perfect, I'd like to clean it up a bit, but I find it more easier to modify then pure JS...

https://github.com/happz/ttrss-mobile/blob/master/main2.coffee

2. how about using Issues section for ToDo and planned features? With pull requests it would probably allow more people to participate.

Better documentation for updates with cache clean

ttrss is accessible for me at http://mydomain/index.php with 1200 entries. I enabled the API, set conf.js to apiPath: "/index.php" and webappPath: "/", and put it and the other ttrss-mobile files at the same level as index.php.

When I fetch http://mydomain/, I see what appears to be your default page (Settings button, Categories label, Menu button), but after hours, "Loading" does not disappear.

LastPass detects a login challenge, but it's not visible.

How can I debug this?

Unable to load jQuery and jQuery Mobile over SSL with HSTS enabled

I serve ttrss-mobile over SSL and have HTTP Strict Transport Security (HSTS) enabled. The latter is an HTTP header that prevents the browser from getting resources over plain HTTP to mitigate the risk of SSL stripping. The problem is that ttrss-mobile loads both jQuery and jQuery Mobile from jQuery's CDN that unfortunately (and surprisingly) doesn't offer the option to serve content over SSL.
Right now I see three ways to solve this: a) convince the jQuery CDN guys to serve their code over SSL, b) switch to another CDN such as CloudFlare (however, they don't have jQuery Mobile 1.3.0 yet), or c) bundle jQuery and jQuery Mobile with your code.
You don't have to take action on any of those (I don't think a lot of people already use that header to begin with), I just want to inform you that this could be a problem for some users.

Releases on SF

http://sourceforge.net/publish/?source=github

Feature Request: Pocket Support

Could you please add Support for Pocket (Read it Later), so that i can add a Article to my Pocket List?

Http Basic Auth

When basic auth is required on /tt-rss, loading /ttrss-mobile will also prompt for basic auth before showing you the standard login screen.

ttrss-mobile should either detect that an "Authorisation" header has been set or have a config setting in conf.js to require basic auth and use that rather than its login screen.

Credentials don’t get saved if app is added to Home Screen

Title basically says everything. When I log in directly in Safari, I don’t have to login each time I visit the page. When I add the app to the Home Screen, I have to login every time I open the app container.

login/password storage

i must type my user name and password again when i swith to ios's home and back to ttrss-mobile.can you help?

Feature Request: Sorting or hiding of feeds by unread

In .9 my feeds with unread articles were at the top, in 1.0 they're all mixed together. When you have a lot of feeds, this is not so great. Ideally I'd like the option to have it filter out feeds with no unread articles so it only shows those with unread articles. That seems like the cleanest option.

Thanks for the great work on this so far!

Try to remove the webappPath property from the conf

It should be possible to get it from the current URL.

Hide feeds & categories with no new articles

I'd like to see an option to hide any feeds & categories that do not contain any unread articles.

Better tt-rss integration

I think a recommended location for installing ttrss-mobile should be defined.

This might allow an easy detection by Tiny Tiny RSS, and mobile support would be available "out of the box" in TT-RSS.
See my discussion with @gothfox at https://github.com/gothfox/Tiny-Tiny-RSS/pull/75#issuecomment-15808026

Can't login

I am not able to login using an Android device on Jelly Bean. Tried the stock browser and Chrome. Cleared the cache on both. It gets stuck on the initial loading screen.

Tried it on my desktop (Chrome) and it worked fine. Any ideas?

Added - I tried it on an iPhone 5. Current version of iOS. Same issue.

Faster load time

With the switch to RequireJS, the load time went down.

I need to find a way to get to the first screen faster. Maybe reorganize the modules loading order: make jQueryMobile load sooner.

URL in main.js trouble

Hi,

I don't know what i'm doing wrong, but with this configuration ttrss-mobile don't allow me to login:

my ttrss installation (working perfectly): http://jbalmes.com/rss/
my ttrss-mobile installation: http://jbalmes.com/rssm/

I set main.js "global config variables":

/* relative URL from the root to acces your Tiny Tiny RSS
installation /
window.apiPath="/rss/";
/ relative URL from the root to access this webapp */
window.webappPath="/rssm/";

It ask me for login and using the tiny tiny rss user it says:

"Specified username and password are incorrect."

Share RSS Feed ?

It will be cool if you can add an option to share the feed on twitter/facebook (like in tiny tiny rss web interface) !

Preload content of articles

Currently when a list of articles is loaded in the view #articles, only their titles are loaded. Consider going through a list of 10 or (yet to be made configurable items, see suggestion in #8 ) requires a separate request to the API/server.

This can cause lag and delay on mobile devices if your connection is flaky.

I suggest to be able to preload the whole content of the an article so no more requests are needed and the reading experience is like I'm reading the articles offline (of course this doesn't work with articles not publishing their whole content).

Option to show full title and some of the body in feed

I believe it would be great to add the option to show the full title in the feed view along with a sample 2-3 lines of the actual body of the article. Thanks, love this!
rss.bittfuel.com

Add a "subscribe to feed" action in the mobile UI

Hi, thanks for your great work on the mobile ui for tt-rss.
I tend to use it on my old laptop because it's less resource-intensive than the default UI, so I'd like to be able to subscribe to feeds using it. At the moment I'm forced to open up the full UI and watch my laptop burn as I try to subscribe to a new feed.

This is a followup from http://tt-rss.org/forum/viewtopic.php?f=10&t=1283&e=0

Any chance you could add a button in the prefs dialog, allowing to subscribe to a feed and assign it a category?

Thanks

Save state to return to last viewed page when in webclip mode.

When using the app from a saved webclip (iOS, don't know about Android) the application resets its state every time you re-enter it. It acts kind of counter what people are used to with iOS apps (and web pages loaded via safari) suspending and returning to the state that you left them.
Meaning, if you click on the source link of an article to read it in safari, when you go back to the app you will not be returned to the article or category you where at but instead back to the main landing page.

What I would propose is upon clicking on each article / label / category that the app saves that link in localStorage so that it can be referenced the next time the app is loaded and transparently direct the user back to the last thing they where on, thus making it feel like a "normal" app.

Load next elements when arriving at the end of a list

As requested by xtaz on the forum.

I see two cases:

1. as described, when you're reading article by article using the next link, at the end of the preloaded articles, if there are more (but not yet loaded), they should be fetch.
2. by extension, when arriving at the end of the list of articles, there should be a special row that let the user load more items.

Mark all as read

I would love a menu option for "Mark All as Read".

Ajax Error Handler

Hi !
I try to use ttrss-mobile but i can't !

my rss instance is in /var/www/rss/ and i set ttrss-mobile in /var/www/rss/mob/
and i wrote the entire path in conf.js.

When i launch the website on my phone, i got the interface (with the Menu bouton/categories) and i can see "Loading". A few seconds after that, a popup message appeares and show "Ajax Error Handler".

I using TTRSS 1.7.2. Any idea ?

Swipe to navigate between articles

I would love to be able to navigate between articles by swiping left/right.

Feed name not shown when using Special with unread

In my setup with Tiny Tiny RSS 1.7.8 and ttrss-mobile, the mobile version does not show the feed title (shows "loading" instead), when I use the "Special category" » "With unread All articles" (see image). When I open the feed directly, the feed title is shown.

Mark all items as read

Currently it's not possible to mark all items in a list as read.

Suggestion: at the end of the list, provide a button to "mark items as read".

To be more specific: I mean all items in a list I currently see (not all in that folder or special folder).

IE support

Details zum Fehler auf der Webseite

Benutzer-Agent: Mozilla/4.0 (compatible; MSIE 8.0; Windows NT 6.1; WOW64; Trident/4.0; SLCC2; .NET CLR 2.0.50727; .NET CLR 3.5.30729; .NET CLR 3.0.30729; .NET4.0C; .NET4.0E; InfoPath.2; MS-RTC LM 8)
Zeitstempel: Fri, 26 Apr 2013 10:55:33 UTC

Meldung: 'console' ist undefiniert
Zeile: 133
Zeichen: 127422
Code: 0
URI: https://mysite.de/ttrssm/scripts/main.js

Meldung: 'console' ist undefiniert
Zeile: 133
Zeichen: 127422
Code: 0
URI: https://mysite.de/ttrssm/scripts/main.js

Meldung: 'console' ist undefiniert
Zeile: 133
Zeichen: 127422
Code: 0
URI: https://mysite.de/ttrssm/scripts/main.js

ReferenceError: window is not defined

When I try to run ttrss-mobile 1.0 I get this error message:

$ node main.js

/opt/ttrss-mobile/scripts/main.js:133
.amd&&define.amd.jQuery&&define("jquery",[],function(){return b})})(window),fu
                                                                    ^
ReferenceError: window is not defined
    at Object.<anonymous> (/opt/ttrss-mobile/scripts/main.js:133:93106)
    at Module._compile (module.js:456:26)
    at Object.Module._extensions..js (module.js:474:10)
    at Module.load (module.js:356:32)
    at Function.Module._load (module.js:312:12)
    at Function.Module.runMain (module.js:497:10)
    at startup (node.js:119:16)
    at node.js:901:3

iPad

Are there plans to add an iPad version? Again, really nice work!

Nested sub-Categories not working

Nested sub-categories do not work (and confuse feeds in the first level category):

(best tested with new/clean tt-rss user)

• create a category, fill it with feeds
• create a category with the first category as parent
• fill this second category with feeds

Expected:

If the first category is clicked the second category and it's (unread) feeds with unread counters shown, same as the first level view for the second level. Deeper levels equivalent

Actual:

No category is shown and allready read feeds are shown (with 0s as counters)

Doesn't work on Maemo / N900

Hi, I know that Maemo is a still very outdated platform, but maybe it can be fixed easily.

It's the default browser (MicroB 3.6) with a mozilla gecko engine. I'm not sure if there can be enable some backwards compatibility within the jQuery-mobile?

Anyway, thank you very much for your work :) 👍

startup images for iPhone 4/4S and iPhone 5

I only have a 3GS, so I could prepare cb979fe.

People with other iPhones, could you prepare the same thing or send me PNGs of any page of the webapp?

For more info:

• iPhone 5 Web App Startup Image by Taylor Fausak
• example: https://gist.github.com/tfausak/2222823

Multiple Prev/Next buttons

Sometimes, at the end of an article there are multiple buttons.