web intf: displaying media thumbnails in the html

Signed-off-by: Felix Paul Kühne <fkuehne@videolan.org>

Resources/web/style.css

@@ -201,6 +201,7 @@ div.main.drop {
   height: 40px;
   padding: 0 20px;
   position: relative;
+  margin: 10px auto;
 }
 .downloads a {
     line-height: 25px;
@@ -208,6 +209,15 @@ div.main.drop {
     color: white;
 }
 
+.downloads img {
+    width: 80px;
+    height: 45px;
+    -webkit-border-radius: 5px;
+    -moz-border-radius: 5px;
+    border-radius: 5px;
+    vertical-align:middle;
+}
+
 .downloads lu {
   font-size: 16px;
   line-height: 50px;

Sources/VLCHTTPConnection.m

@@ -173,22 +173,22 @@
 
         for (NSManagedObject *mo in allMedia) {
             if ([mo isKindOfClass:[MLFile class]])
-                [mediaInHtml addObject:[NSString stringWithFormat:@"<li><a href=\"download/%@\" download>%@</a> — <a href=\"thumbnail/%@.png\">preview</a></li>", [[(MLFile *)mo url] stringByReplacingOccurrencesOfString:@"file://"withString:@""], [(MLFile *)mo title], mo.objectID.URIRepresentation]];
+                [mediaInHtml addObject:[NSString stringWithFormat:@"<li><img src=\"thumbnail/%@.png\" alt="" /> - <a href=\"download/%@\" download>%@</a></li>", mo.objectID.URIRepresentation, [[(MLFile *)mo url] stringByReplacingOccurrencesOfString:@"file://"withString:@""], [(MLFile *)mo title]]];
             else if ([mo isKindOfClass:[MLShow class]]) {
                 NSArray *episodes = [(MLShow *)mo sortedEpisodes];
-                [mediaInHtml addObject:[NSString stringWithFormat:@"<li>%@ — <a href=\"thumbnail/%@.png\">preview</a></li>", [(MLShow *)mo name], mo.objectID.URIRepresentation]];
+                [mediaInHtml addObject:[NSString stringWithFormat:@"<li><img src=\"thumbnail/%@.png\" alt="" /> - %@</li>", mo.objectID.URIRepresentation, [(MLShow *)mo name]]];
                 for (MLShowEpisode *showEp in episodes)
-                    [mediaInHtml addObject:[NSString stringWithFormat:@"<lu><a href=\"download/%@\" download>%@</a> — <a href=\"thumbnail/%@.png\">preview</a></lu><br />", [[(MLFile *)[[showEp files] anyObject] url] stringByReplacingOccurrencesOfString:@"file://"withString:@""], showEp.name, showEp.objectID.URIRepresentation]];
+                    [mediaInHtml addObject:[NSString stringWithFormat:@"<lu><img src=\"thumbnail/%@.png\" alt="" /> - <a href=\"download/%@\" download>%@</a></lu><br />", showEp.objectID.URIRepresentation, [[(MLFile *)[[showEp files] anyObject] url] stringByReplacingOccurrencesOfString:@"file://"withString:@""], showEp.name]];
             } else if ([mo isKindOfClass:[MLLabel class]]) {
                 NSArray *folderItems = [(MLLabel *)mo sortedFolderItems];
-                [mediaInHtml addObject:[NSString stringWithFormat:@"<li>%@ — <a href=\"thumbnail/%@.png\">preview</a></li>", [(MLLabel *)mo name], mo.objectID.URIRepresentation]];
+                [mediaInHtml addObject:[NSString stringWithFormat:@"<li><img src=\"thumbnail/%@.png\" alt="" /> - %@</li>",  mo.objectID.URIRepresentation, [(MLLabel *)mo name]]];
                 for (MLFile *file in folderItems)
-                    [mediaInHtml addObject:[NSString stringWithFormat:@"<lu><a href=\"download/%@\" download>%@</a> — <a href=\"thumbnail/%@.png\">preview</a></lu><br />", [[file url] stringByReplacingOccurrencesOfString:@"file://"withString:@""], file.title, file.objectID.URIRepresentation]];
+                    [mediaInHtml addObject:[NSString stringWithFormat:@"<lu><img src=\"thumbnail/%@.png\" alt="" /> - <a href=\"download/%@\" download>%@</a></lu><br />", file.objectID.URIRepresentation, [[file url] stringByReplacingOccurrencesOfString:@"file://"withString:@""], file.title]];
             } else if ([mo isKindOfClass:[MLAlbum class]]) {
                 NSArray *albumTracks = [(MLAlbum *)mo sortedTracks];
-                [mediaInHtml addObject:[NSString stringWithFormat:@"<li>%@ — <a href=\"thumbnail/%@.png\">preview</a></li>", [(MLAlbum *)mo name], mo.objectID.URIRepresentation]];
+                [mediaInHtml addObject:[NSString stringWithFormat:@"<li><img src=\"thumbnail/%@.png\" alt="" /> - %@</li>", mo.objectID.URIRepresentation, [(MLAlbum *)mo name]]];
                 for (MLAlbumTrack *track in albumTracks)
-                    [mediaInHtml addObject:[NSString stringWithFormat:@"<lu><a href=\"download/%@\" download>%@</a> — <a href=\"thumbnail/%@.png\">preview</a></lu><br />", [[(MLFile *)[[track files] anyObject] url] stringByReplacingOccurrencesOfString:@"file://"withString:@""], track.title, track.objectID.URIRepresentation]];
+                    [mediaInHtml addObject:[NSString stringWithFormat:@"<lu><img src=\"thumbnail/%@.png\" alt="" /> - <a href=\"download/%@\" download>%@</a></lu><br />", track.objectID.URIRepresentation, [[(MLFile *)[[track files] anyObject] url] stringByReplacingOccurrencesOfString:@"file://"withString:@""], track.title]];
             }
         }