mirror of
https://github.com/lrsjng/h5ai.git
synced 2024-09-19 12:18:50 -04:00
Add audio preview.
This commit is contained in:
Lars Jung
parent
b7081b32de
commit
af29d651b5
7 changed files with 150 additions and 6 deletions
|
|
@ -12,6 +12,7 @@
|
|||
* adds option to hide unreadable files
|
||||
* adds option where to place folders (top, inplace, bottom)
|
||||
* adds markdown support for custom header and footer files
|
||||
* adds video and audio preview via HTML5 elements (no fallback, works best in Chrome)
|
||||
* removes server side file manipulation extensions `dropbox`, `delete` and `rename`
|
||||
* fixes QR code URI origin (issue [#287](https://github.com/lrsjng/h5ai/issues/287))
|
||||
* improves preview GUI
|
||||
|
|
|
|||
9
src/_h5ai/client/css/inc/preview-aud.less
Normal file
9
src/_h5ai/client/css/inc/preview-aud.less
Normal file
|
|
@ -0,0 +1,9 @@
|
|||
|
||||
#pv-aud-audio {
|
||||
position: absolute;
|
||||
|
||||
max-width: 100%;
|
||||
max-height: 100%;
|
||||
|
||||
box-shadow: 0 0 8px 2px rgba(0, 0, 0, 0.3);
|
||||
}
|
||||
|
|
@ -12,8 +12,10 @@
|
|||
@import "inc/tree";
|
||||
@import "inc/qrcode";
|
||||
@import "inc/preview";
|
||||
@import "inc/preview-aud";
|
||||
@import "inc/preview-img";
|
||||
@import "inc/preview-txt";
|
||||
@import "inc/preview-vid";
|
||||
@import "inc/notify";
|
||||
|
||||
@import "inc/content";
|
||||
|
|
|
|||
122
src/_h5ai/client/js/inc/ext/preview-aud.js
Normal file
122
src/_h5ai/client/js/inc/ext/preview-aud.js
Normal file
|
|
@ -0,0 +1,122 @@
|
|||
|
||||
modulejs.define('ext/preview-audio', ['_', '$', 'moment', 'core/settings', 'core/event', 'ext/preview'], function (_, $, moment, allsettings, event, preview) {
|
||||
|
||||
var settings = _.extend({
|
||||
enabled: false,
|
||||
types: []
|
||||
}, allsettings['preview-aud']),
|
||||
|
||||
preloadAudio = function (src, callback) {
|
||||
|
||||
var $audio = $('<audio/>')
|
||||
.one('loadedmetadata', function () {
|
||||
|
||||
callback($audio);
|
||||
// setTimeout(function () { callback($img); }, 1000); // for testing
|
||||
})
|
||||
.attr('autoplay', 'autoplay')
|
||||
.attr('controls', 'controls')
|
||||
.attr('src', src);
|
||||
},
|
||||
|
||||
onEnter = function (items, idx) {
|
||||
|
||||
var currentItems = items,
|
||||
currentIdx = idx,
|
||||
currentItem = items[idx],
|
||||
|
||||
onAdjustSize = function () {
|
||||
|
||||
var $content = $('#pv-content'),
|
||||
$audio = $('#pv-aud-audio');
|
||||
|
||||
if ($audio.length) {
|
||||
|
||||
$audio.css({
|
||||
'left': '' + (($content.width()-$audio.width())*0.5) + 'px',
|
||||
'top': '' + (($content.height()-$audio.height())*0.5) + 'px'
|
||||
});
|
||||
|
||||
preview.setLabels([
|
||||
currentItem.label,
|
||||
moment(0).add('seconds', $audio[0].duration).format('m:ss')
|
||||
]);
|
||||
}
|
||||
},
|
||||
|
||||
onIdxChange = function (rel) {
|
||||
|
||||
currentIdx = (currentIdx + rel + currentItems.length) % currentItems.length;
|
||||
currentItem = currentItems[currentIdx];
|
||||
|
||||
var spinnerTimeout = setTimeout(function () { preview.showSpinner(true); }, 200);
|
||||
|
||||
if ($('#pv-aud-audio').length) {
|
||||
$('#pv-aud-audio')[0].pause();
|
||||
}
|
||||
preloadAudio(currentItem.absHref, function ($preloaded_audio) {
|
||||
|
||||
clearTimeout(spinnerTimeout);
|
||||
preview.showSpinner(false);
|
||||
|
||||
$('#pv-content').fadeOut(100, function () {
|
||||
|
||||
$('#pv-content').empty().append($preloaded_audio.attr('id', 'pv-aud-audio')).fadeIn(200);
|
||||
|
||||
// small timeout, so $preloaded_audio is visible and therefore $preloaded_audio.width is available
|
||||
setTimeout(function () {
|
||||
onAdjustSize();
|
||||
|
||||
preview.setIndex(currentIdx + 1, currentItems.length);
|
||||
preview.setRawLink(currentItem.absHref);
|
||||
}, 10);
|
||||
});
|
||||
});
|
||||
};
|
||||
|
||||
onIdxChange(0);
|
||||
preview.setOnIndexChange(onIdxChange);
|
||||
preview.setOnAdjustSize(onAdjustSize);
|
||||
preview.enter();
|
||||
},
|
||||
|
||||
initItem = function (item) {
|
||||
|
||||
if (item.$view && _.indexOf(settings.types, item.type) >= 0) {
|
||||
item.$view.find('a').on('click', function (event) {
|
||||
|
||||
event.preventDefault();
|
||||
|
||||
var matchedEntries = _.compact(_.map($('#items .item'), function (item) {
|
||||
|
||||
item = $(item).data('item');
|
||||
return _.indexOf(settings.types, item.type) >= 0 ? item : null;
|
||||
}));
|
||||
|
||||
onEnter(matchedEntries, _.indexOf(matchedEntries, item));
|
||||
});
|
||||
}
|
||||
},
|
||||
|
||||
onLocationChanged = function (item) {
|
||||
|
||||
_.each(item.content, initItem);
|
||||
},
|
||||
|
||||
onLocationRefreshed = function (item, added, removed) {
|
||||
|
||||
_.each(added, initItem);
|
||||
},
|
||||
|
||||
init = function () {
|
||||
|
||||
if (!settings.enabled) {
|
||||
return;
|
||||
}
|
||||
|
||||
event.sub('location.changed', onLocationChanged);
|
||||
event.sub('location.refreshed', onLocationRefreshed);
|
||||
};
|
||||
|
||||
init();
|
||||
});
|
||||
|
|
@ -16,7 +16,6 @@ modulejs.define('ext/preview-vid', ['_', '$', 'core/settings', 'core/event', 'ex
|
|||
})
|
||||
.attr('autoplay', 'autoplay')
|
||||
.attr('controls', 'controls')
|
||||
.attr('preload', 'auto')
|
||||
.attr('src', src);
|
||||
},
|
||||
|
||||
|
|
@ -35,9 +34,7 @@ modulejs.define('ext/preview-vid', ['_', '$', 'core/settings', 'core/event', 'ex
|
|||
|
||||
$vid.css({
|
||||
'left': '' + (($content.width()-$vid.width())*0.5) + 'px',
|
||||
'top': '' + (($content.height()-$vid.height())*0.5) + 'px',
|
||||
'max-width': $content.width(),
|
||||
'height': $content.height()
|
||||
'top': '' + (($content.height()-$vid.height())*0.5) + 'px'
|
||||
});
|
||||
|
||||
preview.setLabels([
|
||||
|
|
@ -64,6 +61,7 @@ modulejs.define('ext/preview-vid', ['_', '$', 'core/settings', 'core/event', 'ex
|
|||
preview.showSpinner(false);
|
||||
|
||||
$('#pv-content').fadeOut(100, function () {
|
||||
|
||||
$('#pv-content').empty().append($preloaded_vid.attr('id', 'pv-vid-video')).fadeIn(200);
|
||||
|
||||
// small timeout, so $preloaded_vid is visible and therefore $preloaded_vid.width is available
|
||||
|
|
|
|||
|
|
@ -63,9 +63,10 @@ modulejs.define('ext/preview', ['_', '$', 'core/settings', 'core/resource', 'cor
|
|||
|
||||
onEnter = function () {
|
||||
|
||||
$(window).on('keydown', onKeydown);
|
||||
$('#pv-content').empty();
|
||||
setLabels([]);
|
||||
$('#pv-overlay').stop(true, true).fadeIn(200);
|
||||
$(window).on('keydown', onKeydown);
|
||||
|
||||
adjustSize();
|
||||
},
|
||||
|
|
@ -75,6 +76,7 @@ modulejs.define('ext/preview', ['_', '$', 'core/settings', 'core/resource', 'cor
|
|||
$(window).off('keydown', onKeydown);
|
||||
$('#pv-overlay').stop(true, true).fadeOut(200, function () {
|
||||
$('#pv-content').empty();
|
||||
setLabels([]);
|
||||
});
|
||||
},
|
||||
|
||||
|
|
|
|||
|
|
@ -198,6 +198,16 @@ Options
|
|||
"idSite": 1
|
||||
},
|
||||
|
||||
/*
|
||||
Play a audio preview on click.
|
||||
|
||||
- types: array of types
|
||||
*/
|
||||
"preview-aud": {
|
||||
"enabled": true,
|
||||
"types": ["aud"]
|
||||
},
|
||||
|
||||
/*
|
||||
Show an image preview on click.
|
||||
|
||||
|
|
@ -250,7 +260,7 @@ Options
|
|||
},
|
||||
|
||||
/*
|
||||
Show a video preview on click.
|
||||
Play a video preview on click.
|
||||
|
||||
- types: array of types
|
||||
*/
|
||||
|
|
|
|||
Loading…
Reference in a new issue