rejetto forum
Software => HFS ~ HTTP File Server => HTML & templates => Topic started by: Chris Harris on June 04, 2016, 10:24:29 AM
-
I am looking for a template that is responsive to screen size. I have tried many of the available ones and found Live template was responsive but I do not like the output.
Is there a template that gives the layout like the default BUT I would prefer the layout of the default template but with the User, Folder, Search, Select, Actions and Server information dialogs located below the file list.
How do I do this??
Chris
-
you can try mobil-light http://www.rejetto.com/forum/html-templates/file-upload-with-drag-and-drop/msg1061004/#msg1061004 (http://www.rejetto.com/forum/html-templates/file-upload-with-drag-and-drop/msg1061004/#msg1061004).
The dialogs are not located below the file list, but you can show/hide them.
Edit: latest (http://rejetto.com/forum/index.php?topic=11754.msg1066583#msg1066583)version (https://github.com/dj0001/hfs-template/releases/latest)
Features:
never reloads the page
logout(Edge)
searchcategorie
web-app-capable (http://rejetto.com/forum/index.php?topic=11754.msg1064594#msg1064594)
generate thumbnails on upload
build-in pictureviewer(chrome77)
build-in audioplayer
only 10k
-
I added hfs.diff.tpl and then selected this template. I then get a blank screen??
When switch to another template all works again.
I have done something wrong!!
Chris
-
rename mobil-ligh.tpl to hfs.diff.tpl and add it.
-
in the default template the main, section contain those lines
<body>
<!--{.comment|--><h1 style='margin-bottom:100em'>WARNING: this template is only to be used with HFS 2.3 (and macros enabled)</h1> <!--.} -->
{.$box panel.}
{.$list.}
</body>
</html>
<!-- Build-time: %build-time% -->
if you reverse lines {.$box panel.} and {.$list.}, you will find that the file list is displayed first. then just update the values in the [style.css | no log] and [impromptu.css | no log] to make a good layout.
if the purpose of this new layout is to alternate between landscape mode and portrait mode on a mobile phone, it may be more complex because it will be necessary to have actually two different models to systematically recharge to change orientation, or it will be necessary to combine the two versions into one with javascript hide unwanted parts
-
rename mobil-ligh.tpl to hfs.diff.tpl and add it.
In mobil-light.zip the file is already hfs.diff.tpl . If I select this file I get blank screen. If I chose hfs.tpl I get original layout
-
My bad.
In hfs Add a new real folder. In explorer Add the file hfs.diff.tpl to this folder.
Or If you wan't use in the root, select /, Properties, Diff template and copy the text of the hfs.diff.tpl to it.
Don't change template file.
http://www.rejetto.com/wiki/index.php?title=HFS:_Hidden_things (http://www.rejetto.com/wiki/index.php?title=HFS:_Hidden_things)
-
My bad.
In hfs Add a new real folder. In explorer Add the file hfs.diff.tpl to this folder.
Or If you wan't use in the root, select /, Properties, Diff template and copy the text of the hfs.diff.tpl to it.
Don't change template file.
http://www.rejetto.com/wiki/index.php?title=HFS:_Hidden_things (http://www.rejetto.com/wiki/index.php?title=HFS:_Hidden_things)
Great. This now works well on the desktop and a small mopbile phone. Thanks
Is there a way to change the sort direction if required?
Chris
-
To change the sort direction
add before </select> (line 27 33)
<option value="{.get|url|rev={.not|{.?rev.}.}.}">order &{.if|{.?rev.}|u|d.}arr;</option>
-
Hi
This sort option works.
Thanks
Chris
PS
The </select> code is on line 33 in hfs.diff.tpl
-
this sounds more like a CSS thing then an hfs/html code stuff:
http://stackoverflow.com/questions/25817589/auto-adjusting-web-page-to-screen-size-html
it worth a look into...
-
the template without pictureviewer
[file=folder]
{.set|mask|{:{.match|jpg;png;gif|%item-ext%.}:}.}
<tr id="%item-url%" {.if|{.^mask.}|class="media".}><td style="width:72px">
<img src= {.if|{.^mask.}|"thumb/%item-url%" style="width:64px;height:64px;object-fit:cover" onclick='show|"%item-icon%" onclick='location=.}("%item-url%")' alt="🌄" title="%item-name%" /></td>
[+file=+folder]
<td style="text-align:initial">
<div><a href="%item-url%" style="color:black; font-size:16px">%item-name%</a></div>
<div style="width:200px" title="%item-comment%">%item-modified% {.if|{.get|is new.}|🆕.}</div>
<div style="width:100px" title="%item-dl-count%">{.or|%item-size%|.}</div>
</td>
<td style="width:72px;text-align:center">
<input type="checkbox" class='selector' name='selection' value="%item-url%" {.if not|{.or|{.get|can delete.}|{.get|can access.}|{.get|can archive item.}.}|disabled='disabled'.} ></td>
</tr>
[list]
<div id='files_outer'>
<div style='height:1.6em;'></div>
{.if not| %number% |{: <div style='font-size:200%; padding:1em;'>{.!No {.if|{.length|{.?search.}.}|results|files.}.}</div> :}|{:
<form method='post'>
<table id='files' style="width:100%; border-spacing:0px 1px; font-family:Helvetica">
<tr>
<th><a id="menu">≡</a>
<th><select onchange='location=this.value'>
<option {.if|{.=|{.urlvar|sort.}|n.}|selected.} value="{.get|url|sort=n|rev={.?sort=n.}.}">Name</option>
<option {.if|{.=|{.urlvar|sort.}|s.}|selected.} value="{.get|url|sort=s|rev={.?sort=s.}.}">Size</option>
<option {.if|{.=|{.urlvar|sort.}|t.}|selected.} value="{.get|url|sort=t|rev={.?sort=t.}.}">Timestamp</option>
<option value="{.get|url|rev={.not|{.?rev.}.}.}">order &{.if|{.?rev.}|u|d.}arr;</option>
</select><th>
</tr>
%list%
</table>
</form>
:}.}
</div>
<script>
(function() {
var menu = document.getElementById("menu")
menu.onclick = function() {
var pan = document.getElementById("panel");
pan.style.display = pan.style.display ? "" : "none";
document.getElementById("files_outer").style.overflow = pan.style.display ? "initial" : "auto"
}
if (window.innerWidth < 640) menu.click() //if template is slow remove this line
})();
</script>
[box panel]
<script>
(function() {
//add viewport to head
var tmp = document.createElement("meta");
tmp.name = 'viewport';
tmp.content = 'width=device-width';
document.head.appendChild(tmp)
var tmp = document.createElement('style');
tmp.innerHTML = 'tr:hover td {background: #EEE} \ntd div[title] {opacity:.54; font-size:14px; display:inline-block}';
document.head.appendChild(tmp)
})();
</script>
<div id='panel'>
{.$box messages.}
{.$box login.}
{.$box folder.}
{.$box search.}
{.$box selection.}
{.$box upload.}
{.$box actions.}
{.$box server info.}
</div>
Perhaps it's faster
-
This was much faster BUT the menu button to to turn the box panel on/off does not work. I cannot see where this in in the code.
Chris
-
Corrected
-
Hi
This now works as expected and is much faster than the original template on my smartphone.
Thanks to all
Chris
-
Sorry to reply to this old topic. I need a template with preview pict. I try this and just get the blank screen.
Maybe I install in bad way. Please someone advice. Help!
-
Put the hfs.diff.tpl in your picture-folder.
Added close × (Esc) button,
fullscreen ⛶ (click first image on the left)
(https://raw.githubusercontent.com/dj0001/pwa/gh-pages/test/AnimatedPNGs.com_1531111723400.png)
-
Inspired by the throwback template http://rejetto.com/forum/index.php?topic=12055.msg1062882#msg1062882 (http://rejetto.com/forum/index.php?topic=12055.msg1062882#msg1062882)
I changed mobil-light to a lightweight and accessible stand-alone template without jquery
Thanks danny
and the pictureviewer for this template as diff template
-
V2 loads the javascript part from browser cache
http://rejetto.com/forum/index.php?topic=12054.msg1062730#msg1062730 (http://rejetto.com/forum/index.php?topic=12054.msg1062730#msg1062730)
Update: 5+ themes (as diff template)
-
V3 comes with a user selectable (dark) theme ⚙
https://youtu.be/bxFavyESPMw (https://youtu.be/bxFavyESPMw)
Update: 5+ addons (as diff template)
-
add a logout button [➔
works currently only in IE, Edge
this addon works also with the standard-template
-
I just tried version 3 mobil-light_wo_picV3.1.zip. It is very past. I could add the switchable hteme and the thumbnails but I have a major problem.
There is nothing under the menu hamburger/arrow!
What have I done wrong?
I want to be able select some/all files and then download or delete
-
Have you set the folder permissions in hfs?
If no permission is set, no button appears.
There are buttons for upload, new folder, delete and rename.
Archive comes to the to-to-list.
the files have been updated, download mobil-light_wo_picV3.1.zip again,
you get mobil-light_wo_picV3.2.tpl and two alternative panels (a modal dialog and a select)
(Sorry, the javascript modal screen from Leo isn't included)
Or use mobil-light_wo_picV3.3.tpl (it's included in the pagination_theme)
Update: archive_as_zip replaces TAR Archive with ZIP Archive
this addon works also with the standard-template
-
I have now installed mobil-light_wo_picV3.3.tpl
"Have you set the folder permissions in hfs?
If no permission is set, no button appears"
No I had NOT set the permissions and this was the problem.
Thanks
Chris
-
http://rejetto.com/forum/index.php?topic=6855.0
Will have to run some test for other browser
add a logout button [➔
works currently only in IE, Edge
this addon works also with the standard-template
-
Added screenshots from the latest stable version 3.4/3.5
and version 3.5, which spares your data volume (removed inline styles in tbody)
update: added Move-Button (just navigate to target directory instead of typing)
works different to standard-tpl
- standard-tpl: select file; click Move; type destination folder in popup; click ok
- move_addon: select file; click Cut; navigate to destination folder; click Paste
update: added Select All
Use shift+click to select range of checkboxes
this addon works also with the standard-template
updated audioplayer (now works also with the standard-template, play m3u, remebers last song)
-
a new theme
update: batchrename renames multiple files (number files)
-
a preview of version 4, which never reloads the page
update: 4.1beta can use archive addon
update: v3.7 works with HFS v2.4
dnd_upload_thumb generates thumbnails (works also with the new standard-tpl)
-
a new version of the comment addon (works now with UTF-8)
update: dnd_upload_comment generates comment from image title (edit in file explorer)
-
changelog: touch feedback, disable upload, links
-
moved ot discussion to http://rejetto.com/forum/index.php?topic=13081
-
Results:
mobil-light_wo_picV3.5 Works nicely!
mobil-light_V3.7 thumb code missing, display quirk. Not a standalone template?
mobil-light_V4.1beta mostly blank screen. Not a standalone template?
mobil-light_V4.2beta mostly blank screen. Not a standalone template?
I agree with you danny, most templates done by dj are great, but most of them are not standalone templates (in most cases, they are only 'diff templates' of the default template). As my suggestion, I hope dj could in the future release also standalone templates, since this way is much more easier to see the final results to the end-user. ;)
-
@danny, Add hfs.filelist.tpl from zip to folder, that contains hfs.exe
-
I think that I have not installed it right.
The best thing you can do (to let one of us help you out), is use either LICEcap (https://www.cockos.com/licecap/), ScreenToGif (https://github.com/NickeManarin/ScreenToGif/) (both Open Source) or GifCam (http://blog.bahraniapps.com/gifcam/) (Freeware), to record your template install procedure, and then upload the resulting GIF to Imgur (https://imgur.com/upload) or any other image hosting (and obviously posting the results here on the forum). This way, we can help you out installing the template (and see if you are doing some mistake when installing it). ;)
-
changelog: better readable code, added delete and sort and logout(Edge)
viewthumbs addon included, works also with dnd_upload and searchcategorie addon (http://rejetto.com/forum/index.php?topic=13060.msg1064345#msg1064345)
and audioplayerlight and pictureviewer (wrap script in function addon and set compatible=1)
dark_theme sets dark mode by OS and will work with FF67 and Safari 12.1-TP (untested ;))
languages_addon works also with hfs2.4 (language-files (http://rejetto.com/forum/index.php?topic=11880.msg1062163#msg1062163))
-
preload addon preloads subfolders
and shows number files in subfolders
audioplayer changelog: show duration
-
changelog: added archive
-
a new theme ;)
V4.4.2 viewthumbs addon updated: thumbs must have the same name (frag_bunny.mp4 or frag_bunny.mp4.jpg)
-
a new theme ;)
I know this template 'mobil-light_V4.4.2beta.zip' is intended for ultra-modern browsers, but it doesn't work on some older browsers, like Chromium 31. When browsing http://127.0.0.1/ it redirects to http://127.0.0.1/~files.lst showing this result:
#04/04/2019 22:52:06,0
some-folder-here/
#,1
On Firefox v52 works almost fine (and it's super-fast! :D ), but on older browsers is not usable at all (I guess it needs some compatibility-fix). Just a suggestion... ;)
-
thanks for review
yes,
version 4 is written for modern browsers (>97% (https://www.w3counter.com/globalstats.php)),
version 3 should be compatible with older browsers
-
Now it works beautifully on old browsers! 8) (with some details)
Design/Layout .... Okay.
Search function .. OK, it works.
Login function ... OK, works fine.
Archive button ... No, it does nothing.
Delete button .... No, it doesn't delete.
Upload button .... No, nothing gets uploaded.
» Summarizing: the 'archive', 'delete' and 'upload' button doesn't work on the 'oldbrowsers.tpl (http://rejetto.com/forum/index.php?action=dlattach;topic=11754.0;attach=9077)' version (I already know that file selection is done clicking on the time-stamp, but even selecting a file or folder those buttons doesn't work). Otherwise than that, great work!... :)
» Researching: I noticed you used 'XMLHttpRequest GET' instead of 'fetch' to add support to legacy/old browsers. This is great, but doing this you have to release a special version for old browsers every time. My main idea/suggestion was using a 'polyfill', and after doing a search, I've found THIS (https://github.com/developit/unfetch):
<script src="https://unpkg.com/unfetch/polyfill"></script>
I've added that line on your normal 'mobil-light_V4.4.tpl (http://rejetto.com/forum/index.php?action=dlattach;topic=11754.0;attach=9067)' (you can directly embed THIS (https://unpkg.com/unfetch@4.1.0/polyfill/index.js) file content on your template), and the page loads fine now on old browsers. Using this polyfill the buttons loads okay, but the files and folders are not shown. Perhaps doing some small tweaks, that polyfill can work with your original 'fetch' code (and that way you get the best of both worlds: you can continue using 'fetch', and when 'fetch' is not supported by the browser, that XHR polyfill does the rest).
On my search on internet, I've also found two interesting articles: Why I still use XHR instead of the Fetch API (https://gomakethings.com/why-i-still-use-xhr-instead-of-the-fetch-api/) (and how to use a Promise-based XHR (https://gomakethings.com/promise-based-xhr/)). A very nice read, even for 2019 (this blog (https://gomakethings.com/articles) also has very nice articles!).
-
» Summarizing: the 'archive', 'delete' and 'upload' button doesn't work on the 'oldbrowsers.tpl' version
I forgot to say, you must additional add the hfs.diff_oldbrowser.tpl (or add the script at the end).
I tested it with IE11.
I also forgot to mention, that click on the clock sorts (by date) (should I add some sorting symbol like ↑ ?).
The polyfill doesn't work with IE11 (because needs Promise is polyfilled of course!)
changelog: works with old browsers
querystringparameter ?update checks for template updates
textedit can also be used for single-comment files
-
I forgot to say, you must additional add the hfs.diff_oldbrowser.tpl (or add the script at the end).
At least on Chrome 30, the problem continues (it doesn't work those 3 buttons). It's very strange (I'm doing all correct: I'm using 'hfs.diff.tpl' from "oldbrowsers_addon.zip", overwriting the files of 'mobil-light_V4.5.zip').
You can download HERE (http://download1.srware.net/old/iron/win/portable/IronPortable_30.zip) a portable version of Chrome 30 to make some tests (here (http://download1.srware.net/old/iron/win/portable/) you will find more portable versions to make tests). Using Chrome 30, you will see in the console some errors (for example: "Uncaught ReferenceError: del is not defined").
The polyfill doesn't work with IE11 (because needs Promise is polyfilled of course!)
I didn't know IE11 not had Promises (https://caniuse.com/promises). Perhaps that's why on Chrome 30 fails those 3 buttons: 'archive', 'delete' and 'upload' (since Chrome 30 doesn't support promises).
I've found HERE (https://github.com/taylorhakes/promise-polyfill) a extremely lightweight 'Promise Polyfill' that works with IE8+, Chrome, Firefox, IOS 4+, Safari 5+ and Opera. This polyfill makes promises work on browsers that natively doesn't support it...
I've tried modifiying your 'mobil-light_V4.5.tpl' and adding the folowing (marked in red color):
<body>
<script src="https://cdn.jsdelivr.net/npm/promise-polyfill@8/dist/polyfill.min.js"></script>
<script src="https://unpkg.com/unfetch/polyfill"></script>
<header>
...and now it works on Chrome 30 :) (untested on IE11), but the 'archive', 'delete' and 'upload' buttons continues failing. There must be something else to modify (to make it work with Chrome 30).
Perhaps if you embed the content of those 2 polyfills in your code (and do some small tweaks), you can make only one version that works on any browser.
-
At least on Chrome 30, the problem continues
I tried it with chromium 30 and I found, when you in windows explorer copy hfs.diff.tpl in your root, it don't work (it doesn't load hfs.diff.tpl),
but when you in hfs copy the code from hfs.diff.tpl to properties-diff template it works :)
I don't know why.
-
I tried it with chromium 30 and I found, when you in windows explorer copy hfs.diff.tpl in your root, it don't work (it doesn't load hfs.diff.tpl),
but when you in hfs copy the code from hfs.diff.tpl to properties-diff template it works :)
I don't know why.
Yes, it's true. I'm glad you also found this error. I've already reported that "hfs.diff.tpl" doesn't work on root HERE (http://rejetto.com/forum/index.php?topic=13060.msg1064489#msg1064489), but I didn't get any reply about it. The normal behavior is that "hfs.diff.tpl" should work on root too. I hope Rejetto get attention to this.
-
hfs.exe, hfs.events, hfs.diff.tpl... Files starting with hfs. can not be downloaded for security reasons.
hfs.diff.tpl is usable in individual real folders.
if f.isFile() and (dlForbiddenForWholeFolder or f.isDLforbidden() or ansiStartsStr('hfs.', f.name) or ansiEndsStr('.pem', f.name)) then
begin
getPage('deny', data);
exit;
end;
-
hfs.diff.tpl
[+]
{.add to log| main section from diff template.}
[+files]
{.add to log| list section from diff template.}
[+file=link=folder]
{.add to log| item section from diff template.}
Uses this example, your log must become several lines of comments
Otherwise, in the text box of the Diff Template tab of the ROOT property, put on a single line without a carriage return the full name of the file that will be added as a diff template.
If the file with absolute path exists then it will be used,
otherwise with relative path
- the file will be searched first from hfs.exe folder,
- and then from the resource item if this item is real folder.
- by default the line will be displayed on the web page as a string
note that if you fill the tab "Diff template" with some sections, and that there is a hfs.diff.tpl in the associated real directory, the diff.tpl will be loaded then the content of "Diff template" will be added
[+]
{.add to log| main section from "DIFF Template".}
[+files]
{.add to log| list section from "DIFF Template".}
[+file=link=folder]
{.add to log| item section from "DIFF Template".}
[+]
{.add to log| main section from "hfs.diff.tpl".}
[+files]
{.add to log| list section from "hfs.diff.tpl".}
[+file=link=folder]
{.add to log| item section from "hfs.diff.tpl".}
-
New folder
-
changelog: template works also with HFS3 (nodejs). (beta)
-
changelog:
- template works also with HFS3 (nodejs). (beta)
- web-app-capable: using Chrome for Android's "Add to Home screen" menu item and have the app launch in full-screen "app mode" (add icon to root)
- sets dark mode by OS (https://docs.microsoft.com/en-us/windows-hardware/customize/desktop/set-dark-mode) (FF and Safari, tested with FF67beta)
(https://raw.githubusercontent.com/dj0001/pwa/gh-pages/test/Screenshot_20190422-184755.jpg) (https://raw.githubusercontent.com/dj0001/pwa/gh-pages/test/Screenshot_20190422-180707.jpg) (https://raw.githubusercontent.com/dj0001/pwa/gh-pages/test/screenshot.jpg)
Lighthouse report: Performance:100, Accessibility: 93, Best Practises:93, SEO: 100
-
changelog:
- autocomplete search
- searchcategorie (https://raw.githubusercontent.com/dj0001/pwa/gh-pages/test/screenshot.jpg) and DnD-upload included
- darktheme (longtouch clock)
-
animate clock while waiting use wait_cssonly (http://rejetto.com/forum/index.php?topic=13069.msg1064122#msg1064122) - removed inline script
- createthumbs addon included
Lighthouse report: Performance:100, Accessibility: 100, Best Practises:93, SEO: 100
-
on upload write lastModifiedDate to comments
useful to show when photos taken
works also with HFS2.4 (on DnD upload)
update audioplayer shows nexttrack button on lock screen (chrome). Future version will also show artwork (put it in subfolder thumb).
update: add li {display:inline-block} li>img+div {display:none} to lazyimages-style to show symbols (photos) only.
-
audioplayer:
- What form of clickable link allows the end user to achieve playback with your script?
Have you seen the play button (at the end of body)?
You can add id='menu-bar' to the element the play button should appear.
- the audio file downloads
add mime types (http://rejetto.com/forum/index.php?topic=11773.msg1061512#msg1061512)
- It immediately caused 5 Gigabytes of traffic
Set var dur=0 to avoid preload (duration shows audio length)
-
The audio player is working mostly well. There's one little bug: Starts playing in the middle of a file, which happens if: 1). play the folder, 2). refresh, 3). play the folder again.
it's not a bug, it's a feature. It later remembers last playing position.
But on shuffle play it's make no sense (I disabled it on shuffle play)
changelog:
- fixed Starts playing in the middle of a file on shuffleplay
- add sleep timer in s ?300
- added repeat to the editable vars (update @danny: set it to true)
-
Yes, it's true. I'm glad you also found this error. I've already reported that "hfs.diff.tpl" doesn't work on root HERE (http://rejetto.com/forum/index.php?topic=13060.msg1064489#msg1064489), but I didn't get any reply about it. The normal behavior is that "hfs.diff.tpl" should work on root too. I hope Rejetto get attention to this.
looks like you guys may have already answered or solved it. ive foi d that if you dont bind folder to root.
so hfs main directory tree 8s set to a primary folder and dif tpl is i that folder.
-
That works much better! Only problem is that it stopped playing at the end of the playlist (you wouldn't want an internet radio that stops). Can we get a playlist-repeat?
added (http://rejetto.com/forum/index.php?topic=11754.msg1064704#msg1064704) repeat to the editable vars (update @danny: set it to true)
-
you can try my other pictureviewer (http://rejetto.com/forum/index.php?topic=13060.msg1064013#msg1064013)
It uses the same window. Click the X (in the right top corner) to return to filelist
-
I'd like to try your lazyimages with picviewer_addon in Throwback-XM2.
I recommend to use native (https://addyosmani.com/blog/lazy-loading/) lazy loading
Simply add loading="lazy" to the image tag
It will work in future browser versions
P.S.
the pictureviewer.zip works,
if you add id="files" to the table tag (with %list%)
update: pictureviewer works also with mobil-light_4.6 (set compatible=1)
FAQ pictureviewer:
click on image icon, next pic click on pic, close click on X
previous pic click on left side of pic (fullscreen click on left side of first pic (exit=Esc))
-
Can't find the X. How do I close the slideshow?
fixed need to scroll to find X, added background shadow for better visibility
Need image Centered on PC screen (not far left)
Need 50%transparent gray (or black) background for slideshow
top:50%; left:50%; transform:translate(-50%,-50%)
Perhaps click bottom edge of photo to begin 7 seconds automated advance slideshow? Would be nice, but I can't find the controls.
longtouch (rightclick) on image to start slideshow
-
Longtouch method isn't really PC compatible
longtouch=rightclick
but feel free to put the mod.oncontextmenu function to a another control like ▶
-
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/
-
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
outline: 9999px solid rgba(0,0,0,0.5)
update: v2 centers images
-
@danny set the last audio.preload to 'none' (
untested at the moment)
-
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?
-
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 (https://stackoverflow.com/questions/3504008/html5-audio-player-makes-multiple-get-requests-when-loading-why) 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)
-
@danny replace audio.onerror
audio.onerror=function(){audio.onended()}
P.S.
Also, it can play playlists (m3u) and webradio (http://dir.xiph.org/)
I'm on holidays next week's
latest template (http://rejetto.com/forum/index.php?topic=11754.msg1064605#msg1064605)+audioplayer (http://rejetto.com/forum/index.php?topic=11754.msg1064704#msg1064704)+pictureviewer (http://rejetto.com/forum/index.php?topic=11754.msg1064755#msg1064755)
-
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?
-
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 (http://rejetto.com/forum/index.php?topic=13173.msg1064794#msg1064794)
-
@danny
code from audioplayer:
//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
-
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 (http://rejetto.com/forum/index.php?topic=11754.msg1064795#msg1064795)
it creates a template with viewthumbs included
-
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
.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:
@media (prefers-color-scheme: dark) { body, li a, li span, small a { background-color: #555; color: white; }}
-
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?
-
a bug: the month is not displayed: 21.01.2019 18
it should be displayed like this (http://rejetto.com/forum/index.php?topic=11754.msg1064594#msg1064594)
be carefully with cutting the date. It depends on OS. What's your OS language? En?
use ISO-dateformat in HFS to remove seconds
-
Otherwise, there could be need of progress indicator after click, such as "Please Wait" or perhaps a whirl animation.
you can use waiting_cssonly (http://rejetto.com/forum/index.php?topic=13069.msg1064122#msg1064122)
the streaming load can possibly be done with the streaming API (https://developer.mozilla.org/en-US/docs/Web/API/Streams_API), but this is a greater thing (Edit: a first test sounds promising)
-
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)
-
same as V.4.6
Add hfs.filelist.tpl from zip to folder, that contains hfs.exe
which browser?
-
Can you change that file so that it has date, time AM/PM in PC/wide mode, but has date-only (no clock) in Phone/narrow mode?
I can't (http://rejetto.com/forum/index.php?topic=11754.msg1064906#msg1064906) (with non ISO Date Format), but I can hide the full date
@media (max-width:480px) {li span:last-child {display: none}}
Edit: with ISO Date Format:
@media (max-width:480px) {li span:last-child {width:10ch; height:1em; overflow:hidden}}
-
changelog:
shows thumbs from subfolders thumb or lazy full-img-thumbs(chrome 77) without addon
new folder (rightclick upload) without addon
show number selected files
and a preview of tile_theme_v2, which comes next days
my goal is a theme, which looks like Files Go (https://play.google.com/store/apps/details?id=com.google.android.apps.nbu.files&hl=en)
-
tile_theme_v2
-
changelog:
build-in pictureviewer(chrome77)
What do you want to see in next version? audioplayer (http://rejetto.com/forum/index.php?topic=11754.msg1064962#msg1064962), languages, archiveaszip (http://rejetto.com/forum/index.php?topic=11754.msg1064576#msg1064576) or something else
-
I love the shuffle audio player. By now, I though it was standard though. So, go ahead and restore that function.
It was never (http://rejetto.com/forum/index.php?topic=11754.msg1064914#msg1064914) removed except in audioplayer_light (http://rejetto.com/forum/index.php?topic=11754.msg1064962#msg1064962)(minimalistic)
I have added shuffle to the editable vars. Set it to true. I hope, this helps.
-
thanks for review. Add:
@media (min-width:480px) {.grid li, .grid li>img, .grid li div {width:256px;height:256px} .grid li{margin:2%}}
h265 works (http://rejetto.com/forum/index.php?topic=13173.msg1064839#msg1064839) for me in Edge
V5.2 with audioplayer comes on halloween next days
-
changelog (http://rejetto.com/forum/index.php?topic=11754.msg1061351#msg1061351):
build-in (basic) audioplayer (http://rejetto.com/forum/index.php?action=dlattach;topic=11754.0;attach=9233;image)
works best with chrome and media keys
generate (http://rejetto.com/forum/index.php?topic=4600.msg1064111#msg1064111) artwork (on upload)
autocreate subfolders thumb on image upload
create thumbs from videos (first frame)
-
create thumbs from audios
opt. renames audio to %artist% - %title%
lastModifiedV2 renames images to %lastModified% - %title% (https://www.windowscentral.com/how-edit-picture-metadata-windows-10) on upload
lastModifiedV3 restores lastModified after upload (with help of powershell)
useful to show when photos taken
changelog: changepwd and rename (rightclick login and upload)
pictureviewer works also with thumbnails (click folder again)
-
dj.. danny.. Great work. Stay strong. Look forward :
-*
-
halloween has enchanted the date :-[
show relative date as yesterday
onerror="this.src='%item-url%'"
you should add this.onerror=null; otherwise you can get endless loops (https://developer.mozilla.org/en-US/docs/Web/API/GlobalEventHandlers/onerror#element.onerror). Retry-After could help too
Menu > debug > run script to restore default settings (after switching from Throwback to Default tpl)
{.set ini|use-system-icons=yes.}{.set ini|tray-icon-for-each-download=yes.}{.set ini|max-ips=0.}{.set ini|max-connections=0.}{.set ini|max-ips-downloading=0.}{.set ini|max-contemporary-dls=0.}{.set ini|enable-fingerprints=yes.}{.set ini|send-hfs-identifier=yes.}{.set ini|support-descript.ion=yes.}{.set ini|tray-instead-of-quit=no.}{.set ini|load-single-comment-files=yes.}{.set ini|hints4newcomers=yes.}{.set ini|save-totals=yes.}{.set ini|tray-shows=download.}{.set ini|flash-on=download.}{.set ini|browse-localhost=yes.}{.set ini|max-connections-by-ip=0.}
autoban addon (http://rejetto.com/forum/index.php?topic=6757.msg1043503#msg1043503) "Uploaded by" add [upload completed] event with blue text (http://rejetto.com/forum/index.php?topic=9078.msg1051959#msg1051959) and show comments (http://rejetto.com/forum/index.php?topic=11754.msg1064576#msg1064576)
changelog: improved picviewer (hide header)
slideshowV2 repeats and reloads (photoframe)
-
@danny: Edit: onerror="this.onerror=null; setTimeout(function(){this.src='%item-url%'}.bind(this),157)"
(to test endless loop: add .jpg to a textfile)
Santa clause will bring a photoframe with blured background (ambilight) on 1. Advent
-
photoframe comes with play button, ambilight and more 🕯
Edit: 🎅
add weather to slideshow (uncommend last line)
add remote (https://play.google.com/store/apps/details?id=io.appground.blek) control (space key)
add videoclips covert (https://ezgif.com/video-to-webp) them to webp (https://raw.githubusercontent.com/dj0001/pwa/gh-pages/test/ezgif.com-gif-maker(1).webp)
Videoframe works with all templates (with Motion Photo Viewer (https://dj0001.github.io/Motion-Photo-Viewer/test.htm))
Videothumbs shows first frame (also tested with HFS2.4) 🍀
-
I would like to see integrated (pre-assembled) version with mp3-player + photoviewer already within.
Edit: latest version (http://rejetto.com/forum/index.php?topic=11754.msg1065143#msg1065143)
Features:
never reloads the page
logout(Edge)
searchcategorie
web-app-capable (http://rejetto.com/forum/index.php?topic=11754.msg1064594#msg1064594)
generate thumbnails on upload
build-in pictureviewer(chrome77)
build-in audioplayer
only 10k
only 10k, this is why additional Slideshow (photoframe) is a addon,
but you can simply add the code at the end
changelog: better addons (with custom event), selectall
-
Thanks for review.
shuffle play needs addon
this fixes also nexttrack
there's no extra button for shuffle-play
Lazyimages don't load on cellular network.
prevent lazyload until clicking image link:
[+]
<script>
var thumbsize=0;
document.querySelector('#files').addEventListener('click', function(){
var c=[...document.querySelectorAll('a[href$=".jpg"]')]
if(!c.includes(event.target)) return
thumbsize=64
render(b) //
})
</script>
lazyimages for FF needs adding if(!thumbsize) return;
On firefox, With lazyimages installed, slideshow works. @danny: In your (deleted) file you have removed class gri.
nothing new: newtemplate was bundled with V5.3
-
halloween has enchanted the date :-[
show relative date as
/
Its photoshopped ;)
-
(deleted)
Could you help me do only-on-demand thumbnails for this version of Throwback?
Replace
document.addEventListener("DOMContentLoaded", function() {
with
document.addEventListener("click", function(e) {if(!e.target.href||!e.target.href.endsWith('.jpg')) return;e.preventDefault();
or (with a extra button)
document.querySelector('#mylazyloadbutton').addEventListener("click", function() {
-
danny.. dj.. hardcore.. 8) 8) 8)
-
Mobil-Light with several add-ons pre-installed.
Mint theme, and a new hfs.filelist.tpl which provides short-date.
Why hide time on large screens?
I recommend to use formatmodified instead of changing hfs.filelist.tpl
-
But, just imagine that full file thumbnails ARE needed via mobile data, but only as needed.
In lazyimages for V5.4 (http://rejetto.com/forum/index.php?topic=11754.msg1065143#msg1065143) full file thumbnails are also shown on mobile, if they are cached
Show a image, refresh folder and you will see the thumbnail.
Or load a page on wifi, then turn wifi off (go to mobile), refresh and you will see thumbnails.
This works currently only in FF for Android, because Chrome native lazy load.
I've re-uploaded file, which also works with Chrome Android.
P.S. Edge79 (I don't have it yet) supports native lazy loading via flag (https://caniuse.com/#feat=loading-lazy-attr)
Edit: Listen to music offline
load the music folder over WiFi with urlvar /?cacheAll=1
then jogging in a forest without cell phone reception and listen to music
and let others know in advance where you go :)
Edit: Select songs for playlist
queue_audio will build-in in next version (probably in mid-February)
Edit: Review: MP_theme (http://rejetto.com/forum/index.php?topic=11754.msg1064914#msg1064914) is a clone from dannys Throwback
-
...Edit: Review: MP_theme (http://rejetto.com/forum/index.php?topic=11754.msg1064914#msg1064914) is a clone from dannys Throwback
See the attached file. It has the looks and it has your older music player which is far-out better for music. I like it ever so much.
-
changelog:
select songs, topbanner
-
Here's a css color icon example, which looks similar on both Firefox and Chrome.
\FE0E turns off the Firefox emoticon feature, so that you can theme the icon.
The ;color: is for Chrome, so that it doesn't monochrome all of the icons.
If those are used together, that icon appears the same on firefox/chrome/edge/opera, etc...
Or, if the Firefox emoticon is useful, Chrome still needs the color.
li a[href$="/"]::before {content:"\1f4c1\FE0E ";color:#FB0}
a[href*="."]::before {content:"\1f4c4 ";color:#BCC}
a[href$=".jpg"]::before, a[href$=".jpeg"]::before, a[href$=".webp"]::before, a[href$=".png"]::before, a[href$=".gif"]::before{content:"\1f4f7 ";color:black}
a[href$=".mp3"]::before, a[href$=".aac"]::before, a[href$=".m4a"]::before, a[href$=".ogg"]::before {content:"\1f50a\FE0E ";color:green}
a[href$=".mp4"]::before, a[href$=".avi"]::before, a[href$=".webm"]::before, a[href$=".mkv"]::before {content:"\1f4fa ";color:teal}
a[href$=".tar"]::before, a[href$=".rar"]::before, a[href$=".7z"]::before, a[href$=".zip"]::before {content:"\1f381 ";color:brown}
a[href$=".exe"]::before, a[href$=".vbs"]::before, a[href$=".bat"]::before, a[href$=".ps1"]::before, a[href$=".js"]::before, a[href$=".apk"]::before {content:"\1f537 ";color:#5AE}
nav a[href*="."]::before {content:""}
img+div a[href$=".jpg"]::before, a[href$=".jpeg"]::before, a[href$=".webp"]::before, a[href$=".png"]::before, a[href$=".gif"]::before{content:""}
It is an efficient solution, utilizing icons already present in the client.
-
if you need more file-icons
[+]
<script>
var style = document.createElement('style')
style.innerHTML = `
li a::before {font: normal normal normal 16px/1 FontAwesome; color:black}
a[href$=".xls"]::before {content:"\\f1c3 "}
a[href$=".pdf"]::before {content:"\\f1c1 "}
a[href$=".doc"]::before {content:"\\f1c2 "}
`
document.head.appendChild(style)
var style = document.createElement('link')
style.rel='stylesheet'
style.href='https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css'
document.head.appendChild(style)
</script>
-
number multiple files and optional add random digits for security (http://rejetto.com/forum/index.php?topic=13281.msg1065488;topicseen#msg1065488)
-
form based login with browser login popup bypass
you need additional add autologin_b4 (http://rejetto.com/forum/index.php?topic=13283.msg1065525;topicseen#msg1065525) (or Alternative login form v2.0 (http://rejetto.com/forum/index.php?topic=13054.msg1065523;topicseen#msg1065523) and change ~loginb to ~box%20login)
Review
bundled is nothing new, but (almost) all in one
-
This will probably go to next version (will come after HFS2.4rc5 beta)
3 files removed: use mobil-light_V5.5.1.zip (http://rejetto.com/forum/index.php?topic=11754.msg1065742#msg1065742)
Review
bundled is nothing new. Logout works with hfs24rc5(pre05) (https://github.com/rejetto/hfs2/releases/tag/v2.4-alpha05)
-
changelog: added logout, autologin, unicode, ⚿
autologin and sha works with hfs2.4beta1 (http://rejetto.com/forum/index.php?topic=13060.msg1065747;topicseen#msg1065747) (use /~login for old 2.4rc4)
as requested also on github (https://github.com/dj0001/hfs-template/releases/latest)
now working on copyURLwithpassword in browser
hfs.diff.md5.tpl removed: use sha256.diff.tpl
« on: Thu, 21 May 2020
began adding my older addons to github (https://github.com/dj0001/hfs-template/tree/master/addons)
files beginning with a capital letter works also with the default(2.4) template
sha256.diff.tpl removed: use mobil-light_V5.5.3.zip (http://rejetto.com/forum/index.php?topic=11754.msg1065774#msg1065774) and hfs24beta05
the only mobile-friendly template (http://rejetto.com/forum/index.php?topic=11754.msg1061351#msg1061351), who isn't stickyed ツ
-
i just saw this message "Add hfs.filelist.tpl from zip to folder, that contains hfs.exe"
why don't you copy it automatically?
-
there is a problem with next hfs release when enabling "include password in pages".
Check that if you have time.
This whole system icons thing in HFS is a waste, i'll probably change it in the default template asap.
By the way, you are doing a great job keeping up to date :D
-
changelog:
fixed sort
+ url-icon added
- md5 removed
i just saw this message "Add hfs.filelist.tpl from zip to folder, that contains hfs.exe"
why don't you copy it automatically?
I don't want everything to be automatically changed, as some other templates do, because later changing to the default template can lead to problems (http://rejetto.com/forum/index.php?topic=11754.msg1065073#msg1065073)
« on: Tue, 26 May 2020
mobil-light_V5.5.2.zip removed: use mobil-light_V5.5.4.zip
changelog:
fixed Keep me loggedin
- crypto.js replaced
« on: Thu, 28 May 2020
changelog:
+ optional thumbs ondemand
+ comment-icon added
® works correctly with hfs2.4beta
-
changelog:
modal login box
loginbox improved
Mobil-light (http://rejetto.com/forum/index.php?topic=11754.msg1061351#msg1061351) aka Responsive small screen template the first and currently only user template, that works with the new login system
-
Chris, dj,
I've sticked this topic. ;)
-
changelog:
fixed delete
Review
bundled is nothing new, comes with 4 languages
This will probably go to next version
[+]
<style>
button::after, #Login>span::after {background:#cde}
</style>
latest version (https://github.com/dj0001/hfs-template/releases/latest)
-
further work on File Icon Theme (http://rejetto.com/forum/index.php?topic=11754.msg1065343#msg1065343) as wished (http://rejetto.com/forum/index.php?topic=13304.0)
Tested also with 2.4default theme and takeback
-
changelog:
works with 2.4rc1
modal changepassword
buttons colored
mobil-light_V5.5.7.zip removed: use mobil-light_V5.5.7a.zip
🆕 Download (https://dj0001.github.io/hfs-template/addons/languages/) yourlanguage addon
-
changelog:
change password will be sent base64encoded to the server
for rc5
new urlvar thumbsize (?thumbsize)
fixed folder login bug (V5.5.10)
colored folder icon
autoupdate_hfs.events (https://github.com/dj0001/hfs-template/blob/master/addons/autoupdate_hfs.events)
🆕 Configure template (https://dj0001.github.io/hfs-template/addons/config.html)
-
Tiles/Gallery layout is particularly difficult for HFS, with at least 2 problems:
On a fast connection, the amount of data (if page scroll+download/archive) can jam the ui and get stuck.
On a slow connection, the amount of incomplete requests can snowball an overlarge 'todo' list; also stuck.
Main fix (for template): Ondemand--no tiles shown until user clicks button to enable higher load for only current page.
-If ondemand, then you don't need to block tiles for mobile. Sometimes, even mobile users want to see tiles (just not every page).
Is there a javascript method to Coarsely estimate client speed individually? If that was possible, then the gallery view can be made adaptive to speed by regulating image and margin sizes (adapting to how many can load in ~2 seconds).
-
changelog:
moderner buttons
build in server thumbs (set jpgimgth=0 to disable)
additional show fullimgth, if no jpgimgth
[+]
<script>
window.addEventListener('error', (e) => {if(e.target.tagName=='IMG' && e.target.src.endsWith('?mode=thumb')) e.target.src=e.target.src.replace('?mode=thumb','') }, true)
</script>
- A template that can open a document and let several users (clients) edit it cooperatively.
see updated textedit (https://github.com/dj0001/hfs-template/blob/master/addons/textedit.diff.tpl)
-
textedit with shoutbox
textfile must end with .gb.txt (e.g. chat.gb.txt)
always prepends first line
: adds timestamp and user
autorefresh, if not focused
-
Textedit V2 comes with some formatting: select+(bold, italic, superscript*)
In chrome also CTRL+(b,i,u) works
You don't need formatting for bold. Use can also use Unicode: 𝗔𝗕𝗖𝗗𝗘𝗙𝗚𝗛𝗜𝗝𝗞𝗟𝗠𝗡𝗢𝗣𝗤𝗥𝗦𝗧𝗨𝗩𝗪𝗫𝗬𝗭𝗮𝗯𝗰𝗱𝗲𝗳𝗴𝗵𝗶𝗷𝗸𝗹𝗺𝗻𝗼𝗽𝗾𝗿𝘀𝘁𝘂𝘃𝘄𝘅𝘆𝘇𝟬𝟭𝟮𝟯𝟰𝟱𝟲𝟳𝟴𝟵
« on: Sat, 17 Oct 2020
adding animation to starry night: ☆twinkle (https://dj0001.github.io/hfs-template/addons/themes/Starry_night_background.diff.tpl.htm), ❄snow (https://dj0001.github.io/hfs-template/addons/themes/Snow_background.diff.tpl.htm)
if you are interested in other themes like a Fire background leave comment here 🎃
-
A tweak that makes mobil-light friendlier to computer (still responsive to mobile) :) See attach
-
Thanks.
Will look, what goes to next version.
Tomorrow is halloween (https://dj0001.github.io/hfs-template/addons/themes/Latern_background.diff.tpl.htm).
Santa clause will bring next version of mobil-light 🎅
register(for an account)V2 with a light admin panel (enables account, if loggedin as admin)
Lighthouse report: Performance: 93, Accessibility: 100, Best Practises: 93, SEO: 92
-
Ditto to what Squiggler said, its amazing and thats no doubt about it. This must be the first responsive theme/template weve ever had on this community.
-
New year brings a alternativ theme with fixed navigation bar
-
hi Dj. i use hfs 2.4.0 rc7. your .tpl doesn't run. where am i wrong? problem also with diff.tpl ....... thanks
:'( :'(
-
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 (http://rejetto.com/forum/index.php?topic=11754.msg1066583#msg1066583) or github (https://github.com/dj0001/hfs-template/releases/tag/5.5.12)
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!)
-
Resolved. thanks ;D
-
start making a template:
[]
<!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)
-
changelog:
5.6.1: "images" folder grid view
5.6.2: opt. stick navigation
5.6.3: translate and modify (https://www.w3schools.com/jsref/jsref_tolocalestring.asp) date (use ISO Date Format)
5.6.4 (https://github.com/dj0001/hfs-template/blob/efd01de63d8db31cf3985abe2b54b8a884a03755/mobil-lightV5.6.tpl): home symbol, fixed search, hfs2.3 suited
-
changelog:
playlists (list m3u)
module (audioplayerscript only loads if you have mp3 files)
-
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).
-
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 (https://github.com/dj0001/hfs-template/blob/master/addons/fileserver_for_node(hfs).js) with HFS3
P.S V5.6 works without hfs.filelist.tpl, but then you don't have size and date
-
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.
-
FAQ
Select files: click date
Rename: select file - Search - enter newname
date is too big: use ISO-Date-Format and set (https://www.w3schools.com/jsref/jsref_tolocalestring.asp) 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
-
...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 (https://www.w3schools.com/jsref/jsref_tolocalestring.asp) dateopt = { year: '2-digit', month: 'short', day: 'numeric' } ...
ISO date format:[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).
-
to fix the 'easter egg'
[+]
<style>
main span:last-child::after {content:" ☐"}
</style>
{.set ini|use-iso-date-format=yes.}
how to reset, if user change tpl?
changelog: Add hfs.filelist.tpl (https://github.com/dj0001/hfs-template/blob/gh-pages/hfs.filelist.tpl) (and opt. stream (http://rejetto.com/forum/index.php?topic=11754.msg1066673#msg1066673))
5.6.5 (https://github.com/dj0001/hfs-template/blob/gh-pages/mobil-lightV5.6.tpl): opt. add select checkboxes, fixed empty lines
-
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?
-
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.
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 (https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Modules) are deferred automatically
version7 will show subtitles (set vtt=true)
-
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)?
-
Yes.
Add querystring ?shuffle=true or
set var shuffle=true
-
Now let's sing karaoke 🤷
(only sad songs at the moment)
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 (http://www.webvtt.org/)
LRCtoVTT (https://transcribefiles.net/other/pages/caption-subtitle-converter.htm)
-
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.
-
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
-
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?
-
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 (https://github.com/dj0001/hfs-template/blob/gh-pages/mobil-lightV5.6.tpl) (opt. stick navigation)
Note the differences when scrolling before and after selecting an item
alt. menu after files:
[+]
<style>
header {order:1}
/* bottom: 0px; position: sticky */
</style>
-
I think that the most efficient way to load player and features scripts is:
<a href="#" onclick="var script = document.createElement('script'); script.src = '/~player1.js'; document.head.appendChild(script) ; ; var script = document.createElement('script')"> 👁 </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?
-
I think that the most efficient way to load ... scripts is: ...
yes, it's the old (https://stackoverflow.com/a/40808588) way before modules (https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Modules):
<span onclick="import('/~audiopl.js').then(obj => obj.audiop())">👁</span>
-
yes, it's the old (https://stackoverflow.com/a/40808588) way before modules (https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Modules):
<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.
-
Audioplayer(srt) shows srt subtitles (srt to vtt on-the-fly)
-
Does javascript have a case-blind option, or does it need something like this?:
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
-
Adding an i before the closing bracket causes the value to be compared case-insensitively (https://developer.mozilla.org/en-US/docs/Web/CSS/Attribute_selectors#syntax)
a[href$=".mp3" i]
-
Thanks!
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]'
-
Happy (https://dj0001.github.io/hfs-template/addons/themes/Firework_background.diff.tpl.html) new year 🚀
-
mobillight-template for hfs3 (https://rejetto.com/forum/index.php?topic=13506.0)
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 (https://rejetto.com/forum/index.php?topic=11754.msg1066450#msg1066450)
-
Hi!
I can't make my audioplayer show the thumbnail of the playing audio. I was experimenting with variours formats and covers built in these files (ogg, mp3, flac...)
I am using RC7 version and a standard but modified visually template. The most working diff turned out to be "Audioplayer7d(srt)" but i've tested all of them - they are good but the artwork did not work with any of the diff templates. Am I doing someting wrong?
Would be nice if you give me advice. Thank you.
-
@ r1132:
this audioplayer can't read buildin covers of audiofiles
artwork-thumbs-pictures must have same name and be in subfolder thumb
you can extract cover here (https://dj0001.github.io/hfs-template/addons/mp3toion.htm)
you can also edit const ext_th='png', if your artwork are png files
-
Thank you @dj.
So as I understand... If I want to set the image for the album - I should put png in the subfolder called "thumb", right?
But when I want to set the same thumbnail for all the audio played on my HFS, where should I put the png? Near the template? Would be nice to year your advice 🙂
-
@ r1132:
replace
src: audio.src.replace(folder,folder+'thumb/')+ext_th,
with
src: folder+'thumb/folder.jpg',
and put folder.jpg in subfolder thumb
works for me with mobil-light template.
latest (https://rejetto.com/forum/index.php?topic=11754.msg1067169#msg1067169) Mobillight for Hfs3