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>

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;

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)));