rejetto forum

Responsive small screen template

0 Members and 1 Guest are viewing this topic.

Offline dj

  • Tireless poster
  • ****
    • Posts: 275
  • 👣 🐾
    • View Profile
    • PWAs
Yes.
Add querystring ?shuffle=true or
set var shuffle=true


Offline dj

  • Tireless poster
  • ****
    • Posts: 275
  • 👣 🐾
    • View Profile
    • PWAs
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

« Last Edit: April 13, 2021, 08:17:44 AM by dj »


Offline danny

  • Tireless poster
  • ****
    • Posts: 263
    • View Profile
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.
« Last Edit: March 04, 2021, 06:47:09 PM by danny »


Offline dj

  • Tireless poster
  • ****
    • Posts: 275
  • 👣 🐾
    • View Profile
    • PWAs
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
« Last Edit: March 05, 2021, 04:39:26 AM by dj »


Offline danny

  • Tireless poster
  • ****
    • Posts: 263
    • View Profile
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? 
« Last Edit: March 12, 2021, 07:20:09 PM by danny »


Offline dj

  • Tireless poster
  • ****
    • Posts: 275
  • 👣 🐾
    • View Profile
    • PWAs
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>
« Last Edit: March 11, 2021, 05:52:10 AM by dj »


Offline danny

  • Tireless poster
  • ****
    • Posts: 263
    • View Profile
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? 


Offline dj

  • Tireless poster
  • ****
    • Posts: 275
  • 👣 🐾
    • View Profile
    • PWAs
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>
« Last Edit: March 15, 2021, 05:10:34 AM by dj »


Offline danny

  • Tireless poster
  • ****
    • Posts: 263
    • View Profile
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. 


Offline dj

  • Tireless poster
  • ****
    • Posts: 275
  • 👣 🐾
    • View Profile
    • PWAs
Audioplayer(srt) shows srt subtitles (srt to vtt on-the-fly)
« Last Edit: April 16, 2021, 10:10:54 AM by dj »


Offline danny

  • Tireless poster
  • ****
    • Posts: 263
    • View Profile
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


Offline dj

  • Tireless poster
  • ****
    • Posts: 275
  • 👣 🐾
    • View Profile
    • PWAs
Adding an i before the closing bracket causes the value to be compared case-insensitively
a[href$=".mp3" i]


Offline danny

  • Tireless poster
  • ****
    • Posts: 263
    • View Profile
Thanks!  That looks more efficient
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],a[href$=".mp4" i]'