Responsive small screen template

[bmartino1]

That might take a while--Can you recommend a website that seems effective at teaching me how to read javascript?

w3 schools???

https://www.w3schools.com/jsref/event_oncontextmenu.asp

https://www.w3schools.com/js/

[dj]

center on screen with with object-fit zooms small images
Exit from fullscreen with Esc Button (or back button on android ◁ )

P.S. to dim the background add

Code: [Select]

outline: 9999px solid rgba(0,0,0,0.5)
update: v2 centers images

[dj]

@danny set the last audio.preload to 'none' (untested at the moment)

[dj]

That solved the problem of doing stuff before play clicked.  New problem:  downloading songs twice while playing.

don't have the mistake
can you post the template?
what does network analysis say in the browser?

[dj]

The double-download problem is intermittent.  Also the number of get requests varies.

I don't know. I think, theres no double-download, the browser downloads parts (can see in browser network analysis) (it's the filesize of your song 2M?)
stackoverflow don't help really
the multiple requests have status 206 (partial content load)


update: yes, you make a mistake in the editing (changing the play button is not nessary)

[dj]

@danny replace audio.onerror

Code: [Select]

audio.onerror=function(){audio.onended()}
P.S.
Also, it can play playlists (m3u) and webradio


I'm on holidays next week's
latest template+audioplayer+pictureviewer

[bmartino1]

i like the new html content and template desing, but i'm having a hard time following where the current version for the template are and go.

can you link the attachment or tell me what post on the thread to download them at?

[dj]

time to present your vacation photos

update: v2.2 swipe to next image
update: v3 works with mobil-light_4.6 & viewthumbs|audioplayer

@bmartino1 latest template here
changelog: fixed multiple urlvars

update: videoplayer_addon only useful if you want to show subtitles
subtitle must have the same name (tuxi9.ogg.vtt)
you also need video5.htm

[dj]

@danny
code from audioplayer:

Code: [Select]

  //audioplayer for all (click on audio icon)
if I understand the question, have you tryed to click on any audio file icon?
it already exists

[dj]

I would like to see your template and accessories all in One file.  This method could help: 

yes, you can also run the batchfile in the zip
it creates a template with viewthumbs included

[dj]

the filelist.tpl ist not installed in your screenshot

I couldn't figure out how to put the [files] section back inside the template (so there's no separate filelist.tpl). 
So, howabout "click-once-go," a 1 file instantly ready-to-use template?

version 4 never reloads the page. It's fast because it only updates the filelist and not the template.

Maybe CSS isn't working; because, text and background same/similar, is so hard to read

you use the dark theme
you can change the theme with rightclick on files

the css for dark theme you find in line 31 and 32

Code: [Select]

.dark {background:#555; color:white}
@media (prefers-color-scheme: dark) {  body {   background-color: #555;   color: white;  }}
todo: better contrast for dark theme
update: replace body with body, a
this will go to mobil-light_V4.6.4:

Code: [Select]

@media (prefers-color-scheme: dark) {  body, li a, li span, small a {   background-color: #555;   color: white;  }}

[dj]

On PC screen, item.size makes a zigzag down the center of the screen.  A possible fix is to remove </span><span> from in-

replace li span {margin-left:auto}
with li a+span {margin:0px 10px 0px auto}


Edit:

perhaps this line is not needed:
#upload {width:74px; background: no-repeat -74px linear-gradient(#cde,#cde), #f0f0f0; transition:none}

it's for upload progress

N/A is displayed as file size for virtual folder.  Need blank instead of N/A. (I didn't figure out how to do that)

will be fixed in next version

Edit:
the #FFF0D4 gradient background is nice
you have two more themes, if you set OS color to light

what is margins="0" in the body tag?

[dj]

a bug: the month is not displayed: 21.01.2019 18
it should be displayed like this

be carefully with cutting the date. It depends on OS. What's your OS language? En?
use ISO-dateformat in HFS to remove seconds

[dj]

Otherwise, there could be need of progress indicator after click, such as "Please Wait" or perhaps a whirl animation.

you can use waiting_cssonly
the streaming load can possibly be done with the streaming API, but this is a greater thing (Edit: a first test sounds promising)

[dj]

changelog: (thaks danny for the hints)

stream filelist (for slow connections)
blank file size for virtual folder
higher contrast for dark theme

Add hfs.filelist.tpl from zip to folder, that contains hfs.exe


changelog audioplayer: reduce traffic (load from cache)