From 4a4d4ac737d560f2fc1eb6b390426fdc6f920618 Mon Sep 17 00:00:00 2001
From: vrde <agranzot@gmail.com>
Date: Thu, 3 Sep 2015 16:11:41 +0200
Subject: [PATCH] Add support for long file names

---
 js/components/ascribe_media/media_player.js | 12 ++++++++++--
 sass/ascribe_media_player.scss              |  7 ++++++-
 2 files changed, 16 insertions(+), 3 deletions(-)

diff --git a/js/components/ascribe_media/media_player.js b/js/components/ascribe_media/media_player.js
index ad53b61f..e4b69c69 100644
--- a/js/components/ascribe_media/media_player.js
+++ b/js/components/ascribe_media/media_player.js
@@ -28,12 +28,20 @@ let Other = React.createClass({
     },
 
     render() {
-        let ext = this.props.url.split('.').pop();
+        let filename = this.props.url.split('/').pop();
+        let tokens = filename.split('.');
+        let preview;
+
+        if (tokens.length > 1) {
+            preview = '.' + tokens.pop();
+        } else {
+            preview = 'file';
+        }
 
         return (
             <Panel className="media-other">
                 <p className="text-center">
-                    .{ext}
+                    {preview}
                 </p>
             </Panel>
         );
diff --git a/sass/ascribe_media_player.scss b/sass/ascribe_media_player.scss
index f3b87618..213fbafa 100644
--- a/sass/ascribe_media_player.scss
+++ b/sass/ascribe_media_player.scss
@@ -12,8 +12,13 @@
     }
 
     .media-other {
-        font-size: 500%;
         color: #cccccc;
+        font-size: 500%;
+        p {
+            overflow: hidden;
+            text-overflow: ellipsis;
+            white-space: nowrap;
+        }
     }
 
     .audiojs {