Times

client/scripts/main.js

@@ -743,15 +743,18 @@ var __listen_to_the_ft = (function(){
 				var readBtn = document.createElement('a');
 				var downloadBtn = document.createElement('a');
 
+				var duration = document.createElement('div');
 				var dropDownArrow = document.createElement('span');
 
 				textContainer.setAttribute('class', 'textContainer');
 				actionsContainer.setAttribute('class', 'actionsContainer');
+				duration.setAttribute('class', 'duration');
 				dropDownArrow.setAttribute('class', 'dropDownArrow');
 
 				headline.textContent = item.title;
 				byline.textContent = item.byline;
 				standfirst.textContent = item.standfirst;
+				duration.textContent = item.duration.humantime;
 
 				playBtn.textContent = 'Listen';
 				readBtn.textContent = 'Read';
@@ -767,6 +770,8 @@ var __listen_to_the_ft = (function(){
 				readBtn.setAttribute('href', 'https://ft.com/content/' + item.id);
 				readBtn.setAttribute('target', '_blank');
 
+				downloadBtn.dataset.size = `(${ (item.size / 1048576).toLocaleString('en', {maximumFractionDigits : 2}) } mb)`;
+
 				checkFileAvailability(item.audioUrl)
 					.then(available => {
 
@@ -896,6 +901,7 @@ var __listen_to_the_ft = (function(){
 				textContainer.appendChild(actionsContainer);
 
 				li.appendChild(textContainer);
+				li.appendChild(duration);
 				li.appendChild(dropDownArrow);
 
 				li.dataset.uuid = item.id;

client/styles.css

@@ -305,6 +305,16 @@ body[data-offline="true"] .offline{
   background-image: url('https://www.ft.com/__origami/service/image/v2/images/raw/fticon%3Aarrow-up?url=fticon%253Aarrow-up&source=ftlabs-listen-to-the-ft&tint=%23999999&fit=cover&format=auto&quality=medium');  
 }
 
+.view#audioItems div.duration{
+  font-weight: 600;
+  color: #d3d3d3;
+  font-size: 0.9em;
+  position: relative;
+  margin-left: auto;
+  min-width: 40px;
+  text-align: center;
+}
+
 .view#audioItems span.dropDownArrow{
   width: 20px;
   height: 10px;
@@ -341,6 +351,13 @@ body[data-offline="true"] .offline{
   cursor: default;
 }
 
+.view#audioItems .textContainer a.download:not([data-downloaded="true"])::after{
+    content: attr(data-size);
+    color: white;
+    font-size: 0.8em;
+    margin-left: 0.3em;
+}
+
 .view#audioItems .textContainer a[data-downloading="true"], .view#audioItems .textContainer a[data-downloaded="true"]{
   color: #676767;
 }