Fix placement of icon in public share page for audio files

When the preview for audio files is used an HTML 5 audio element is
shown in the public share page. This element is added by the template,
so it is already there when the mimetype icon is added to the
"#imgframe" element. Instead of appended the icon is now prepended, so
it appears before the audio element (prepending instead of appending
should make no difference for other types of files, as in that case the
"#imgframe" element is empty). Besides that, the CSS was modified to
show the icon centered above the audio preview instead of next to it.

Signed-off-by: Daniel Calviño Sánchez <danxuliu@gmail.com>

2 files changed, 10 insertions, 1 deletions

diff --git a/apps/files_sharing/css/public.scss b/apps/files_sharing/css/public.scss
index 83cba309da7..b2456baeeba 100644
--- a/apps/files_sharing/css/public.scss
+++ b/apps/files_sharing/css/public.scss
@@ -25,6 +25,12 @@
 	max-width: 100% !important;
 }
 
+#imgframe audio {
+	display: block;
+	margin-left: auto;
+	margin-right: auto;
+}
+
 #imgframe .text-preview {
 	display: inline-block;
 	position: relative;
diff --git a/apps/files_sharing/js/public.js b/apps/files_sharing/js/public.js
index fe59f2ce523..b4f76ca0678 100644
--- a/apps/files_sharing/js/public.js
+++ b/apps/files_sharing/js/public.js
@@ -177,7 +177,10 @@ OCA.Sharing.PublicApp = {
 		} else if (mimetype.substr(0, mimetype.indexOf('/')) !== 'video') {
 			img.attr('src', mimetypeIcon);
 			img.attr('width', 128);
-			imgcontainer.appendTo('#imgframe');
+			// "#imgframe" is either empty or it contains an audio preview that
+			// the icon should appear before, so the container should be
+			// prepended to the frame.
+			imgcontainer.prependTo('#imgframe');
 		}
 		else if (previewSupported === 'true') {
 			$('#imgframe > video').attr('poster', OC.generateUrl('/apps/files_sharing/publicpreview/' + token + '?' + OC.buildQueryString(params)));