Responsive small screen template

[dj]

Yes.
Add querystring ?shuffle=true or
set var shuffle=true

[dj]

Now let's sing karaoke 🤷
(only sad songs at the moment)

Code: [Select]

WEBVTT

00:01.000 --> 00:07.000
<c>Never drink</c> <00:03.000><c>liquid</c><00:05.000> <c>nitrogen.</c>

00:08.000 --> 00:09.000
Ever drink banana nitrogen.
Audioplayer(cover) shows embeded cover of ogg files (FF only)

P.S. to play videos with subtitle: a mp3 file must be in folder (to trigger videoplayer), select a mp4 and click it
SRTtoVTT
LRCtoVTT

[danny]

Audioplayer 6&7: 
1).  Play button doesn't start initial playback. 
2).  Browser title doesn't change to file name.
3).  Can I have 'compact' version without meta & without thumbnail?
4).  Doesn't play capitalized extension .MP3

RE:  #2 above:  mozGetMetadata doesn't work with other browser (and doesn't work with untagged mp3); however, title=filename works for all cases.

[dj]

1. todo
2. not necessary (press MediaKeys on keyboard or lockscreen on cell phone to see title(filename))
   mozGetMetadata works with FF and ogg files (Chrome shows duration instead)
3. remove function art
4. plays all kind of possible audio, when you select it first

[danny]

I have noticed that templates with server-management top menu causes all users to expect that they Should be doing server-management (the purpose). 

Instead, howabout a footer menu? 
with the page in this order: 
🏠/nav
File List
menu (at the bottom)

P.S.
I mention this. . . because I was investigating adding a menu to one of the 'easy view' templates (Stripes and White); and, did notice the 'easy view' benefit is lost if a top menu were installed; but, the 'easy view' benefit is not lost if a bottom menu were installed. 

P.P.S.
Avoiding css redraw (bouncing menu) = exclusive screen area (files vs menu divs which don't overlap).  So, probably, the scrollbar goes on the files div, not the whole page? 

[dj]

I have noticed that templates with server-management top menu causes all users to expect that they Should be doing server-management

try mobil-light ≥ 5.6.2 (opt. stick navigation)
Note the differences when scrolling before and after selecting an item

alt. menu after files:

Code: [Select]

[+]
<style>
header {order:1}
/* bottom: 0px; position: sticky */
</style>

[danny]

I think that the most efficient way to load player and features scripts is:

Code: [Select]

<a href="#" onclick="var script = document.createElement('script'); script.src = '/~player1.js'; document.head.appendChild(script) ; ; var script = document.createElement('script')">&nbsp;&#128065;&nbsp;</a>
Then you can include more features; and, the scripts don't load until user clicks icon. 

How do I make it work with audioplayer, such as no button, generic browser (no moz, no webkit) and start shuffle+repeat at script load? 

[dj]

I think that the most efficient way to load ... scripts is: ...

yes, it's the old way before modules:

Code: [Select]

<span onclick="import('/~audiopl.js').then(obj => obj.audiop())">👁</span>

[danny]

yes, it's the old way before modules:

Code: [Select]

<span onclick="import('/~audiopl.js').then(obj => obj.audiop())">👁</span>

That is freedom to include/add a large amount more 'standard' features. 
And, there is also benefit to easier/effective quality control because when features are included, they are more sure to work. 

[dj]

Audioplayer(srt) shows srt subtitles (srt to vtt on-the-fly)

[danny]

Does javascript have a case-blind option, or does it need something like this?:

Code: [Select]

var ext='a[href$=".mp3"],a[href$=".Mp3"],a[href$=".MP3"],a[href$=".ogg"],a[href$=".OGG"],a[href$=".m4a"],a[href$=".M4A"],a[href$=".flac"],a[href$=".FLAC"],a[href$=".wma"],a[href$=".WMA"],a[href$=".aac"],a[href$=".AAC"],a[href$=".mp4"],a[href$=".MP4"]'  //edit here

[dj]

Adding an i before the closing bracket causes the value to be compared case-insensitively
a[href$=".mp3" i]

[danny]

Thanks! 

Code: [Select]

var ext='a[href$=".mp3" i],a[href$=".ogg" i],a[href$=".m4a" i],a[href$=".flac" i],a[href$=".wma" i],a[href$=".aac" i]'

[dj]

Happy new year 🚀

[dj]

mobillight-template for hfs3

changelog:
03.01. v0.1: website serving ✓
todo next 04.01. v0.2: login (tested with hfs r0.3) ✓
todo next 05.01. v0.3: search ✓
todo next 06.01. v0.4: archive ✓
todo next 07.01. v0.5: sort (click on "files") ✓
17.01. v0.6: login changed, fixed image preview ✓
22.01. v0.7: archive selected files + (video)thumbs ✓

show	tag=	tbfolder=	help
audiocover	.mp3	thumb	thumbs
video	.mp4		preload
image	.jpg		fullsize

review: autorefresh