rejetto forum

Responsive small screen template

Chris Harris · 154 · 139073

0 Members and 1 Guest are viewing this topic.

Offline mandoz

  • Occasional poster
  • *
    • Posts: 34
    • View Profile
hi Dj. i use hfs 2.4.0 rc7. your .tpl doesn't run. where am i wrong? problem also with diff.tpl ....... thanks
 :'( :'(


Offline dj

  • Tireless poster
  • ****
    • Posts: 291
  • 👣 🐾
    • View Profile
    • PWAs
This message you get, if you try to load a tpl, which is not compatible with hfs2.4rc

I work also with rc7.
Which version of the tpl you use?

Download the actual version from the forum or github
if it still doesn't work then post the template here in the forum or send it with a message to me.

Change file to... mobil-light_V5.5.5.12.tpl (not hfs.filelist.tpl!)
« Last Edit: January 08, 2021, 04:51:18 PM by dj »



Offline dj

  • Tireless poster
  • ****
    • Posts: 291
  • 👣 🐾
    • View Profile
    • PWAs
start making a template:
Code: [Select]
[]
<!DOCTYPE html>
<head><meta name="viewport" content="width=device-width, initial-scale=1"></head>
<nav><a href="..">Up</a></nav><br><br>
%list%

[file=folder=link]
<a href="%item-url%">%item-name%</a><br>


[api level]
2



start making a Single-Page-template (like mobillight) begin with piccolo.tpl

Mobil-light V5.6 will base on piccolo, have less features and be smaller (about 5k)
« Last Edit: January 24, 2021, 05:07:54 AM by dj »


Offline dj

  • Tireless poster
  • ****
    • Posts: 291
  • 👣 🐾
    • View Profile
    • PWAs
changelog:
5.6.1: "images" folder grid view
5.6.2: opt. stick navigation
5.6.3: translate and modify date (use ISO Date Format)
5.6.4: home symbol, fixed search, hfs2.3 suited
« Last Edit: February 09, 2021, 07:20:11 AM by dj »


Offline dj

  • Tireless poster
  • ****
    • Posts: 291
  • 👣 🐾
    • View Profile
    • PWAs
changelog:
playlists (list m3u)
module (audioplayerscript only loads if you have mp3 files)
« Last Edit: February 24, 2021, 06:51:58 PM by dj »


Offline danny

  • Tireless poster
  • ****
    • Posts: 281
    • View Profile
Would like to see a Mobil-Light 5x with 'live list' like standard, throwback, takeback, Mobil-Light 3x. 

If you put the list back in the template, then it is more responsive in rough conditions, such as wifi, dish, high traffic, very large folders, multiple-users, etc... and no need for a wait animation because live list can stream the page load (like throwback/takeback), so it looks 'alive' even on slow connections. 

Even with 5k more page overhead live list looks Much faster on large folders.
Also, easier to install if only 1 file (not using hfs.filelist.tpl).   
« Last Edit: February 09, 2021, 07:25:24 AM by danny »


Offline dj

  • Tireless poster
  • ****
    • Posts: 291
  • 👣 🐾
    • View Profile
    • PWAs
I removed the streaming from V5.6 for keep simple, but you can reinstall it.

There are reasons to use hfs.filelist.tpl: performance, traffic and ability to use with HFS3
P.S V5.6 works without hfs.filelist.tpl, but then you don't have size and date
« Last Edit: February 11, 2021, 04:07:25 PM by dj »


Offline danny

  • Tireless poster
  • ****
    • Posts: 281
    • View Profile
For test, I set speed-limit to 1  And then I went to a folder with 6280 files. 
Success!  mobil-lightV5.6.old-fashioned(demo only).tpl  can stream the file list (load-while-draw-async works fine). 
No hangs and still good speed!  Awesome!!!

mobil-lightV5.6.old-fashioned(demo only).tpl is much better in a broad variety of real-life conditions.  THANKS!!!   
The old fashioned demo version is the Only mobil-light that I can use with large folders.
« Last Edit: February 22, 2021, 06:23:03 AM by danny »


Offline dj

  • Tireless poster
  • ****
    • Posts: 291
  • 👣 🐾
    • View Profile
    • PWAs
FAQ

Select files: click date
Rename: select file - Search - enter newname
date is too big: use ISO-Date-Format and set dateopt = { year: '2-digit', month: 'short', day: 'numeric' } (not demo)
folders are counted as files: should be named items?

Move files: use rename and add path, e.g. /test/neu.txt (V5.5)
Newfolder: Search - enter newfolder/
Sort: click files
« Last Edit: February 10, 2021, 03:34:31 AM by dj »


Offline danny

  • Tireless poster
  • ****
    • Posts: 281
    • View Profile
...Select files: click date...
to fix the 'easter egg', it needs tiny date (no time), and the word 'Select' so that the user knows
such as
select   12.12.21

...folders are counted as files: should be named items?...
can change the word 'files' to the word 'items'

...use ISO-Date-Format and set dateopt = { year: '2-digit', month: 'short', day: 'numeric' } ...
ISO date format:
Code: [Select]
[special:import]
{.set ini|use-iso-date-format=yes.}

P.S.
mobil-lightV5.6.old-fashioned(demo only).tpl  browse and file list functions work Much Better than any version which requires hfs.filelist.tpl.  In fact mobil-lightV5.6.old-fashioned(demo only).tpl is the only mobil-light that I could use (because very large folders). 
« Last Edit: February 10, 2021, 07:12:46 AM by danny »


Offline dj

  • Tireless poster
  • ****
    • Posts: 291
  • 👣 🐾
    • View Profile
    • PWAs
to fix the 'easter egg'
Code: [Select]
[+]
<style>
main span:last-child::after {content:" ☐"}
</style>

Quote
{.set ini|use-iso-date-format=yes.}
how to reset, if user change tpl?


changelog: Add hfs.filelist.tpl (and opt. stream)
5.6.5: opt. add select checkboxes, fixed empty lines
« Last Edit: February 23, 2021, 04:39:29 PM by dj »


Offline danny

  • Tireless poster
  • ****
    • Posts: 281
    • View Profile
For your 'classic' audioplayer in Stripes.tpl, how do I....?
something like <script> function ap(){
if(!document.querySelector('a[href$=".mp3"]')) return...

Well, how do I load the audioplayer6.js with the existing retry; but, only if files like these are present?:  '.mp3','.ogg','.m4a','.aac','flac','.MP3','.OGG','.M4A','.AAC','FLAC'

P.S.  Existing loader script is: 
<script defer src="/~audioplayer6.js" onerror="setTimeout(()=> this.src='/~audioplayer6.js',509)"></script>
So, that's the part that needs filtered to, load the audioplayer, only if music exists.  Halp? 
« Last Edit: February 24, 2021, 05:45:59 PM by danny »


Offline dj

  • Tireless poster
  • ****
    • Posts: 291
  • 👣 🐾
    • View Profile
    • PWAs
For your 'classic' audioplayer in Stripes.tpl, how do I....?
When I have time, I'll try to write a module version of the classic audioplayer.

In the meantime you can use Audioplayer5(module).
It works also with hfs2.4 default and Stripes.tpl.

Code: [Select]
if(!document.querySelector('a[href$=".mp3"], a[href$=".ogg"], a[href$=".m4a"]')) return  //add fileext here
import('/~audiopl.js')
 .then(obj => obj.audiop())
 .catch(error => console.log("err"))  //do error handling here  // setTimeout(ap, 509)

yes, the classic audio player seems loading just fine.
modules are deferred automatically

version7 will show subtitles (set vtt=true)
« Last Edit: March 03, 2021, 05:14:21 PM by dj »


Offline danny

  • Tireless poster
  • ****
    • Posts: 281
    • View Profile
Can the new audioplayer 5 or 6 do Shuffle+Repeat (can find and play a cached file when I drive through a no-signal area)?