Use font awesome for star rating

data/interfaces/default/css/plexpy.css

@@ -1241,7 +1241,7 @@ a:hover .summary-poster-face-track .summary-poster-face-overlay span {
     height: auto;
     max-width: 75pt;
     max-height: 15px;
-    margin: 0 10px;
+    margin: 0 5px;
 }
 .summary-content-summary {
     overflow: hidden;
@@ -1319,31 +1319,25 @@ a:hover .summary-poster-face-track .summary-poster-face-overlay span {
     line-height: 18px;
     color: #fff;
 }
-.rateit {
-    display: -moz-inline-box;
+.star-rating {
     display: inline-block;
-    -webkit-user-select: none;
-    -khtml-user-select: none;
-    -moz-user-select: none;
-    -o-user-select: none;
-    -ms-user-select: none;
-    user-select: none;
-    -webkit-touch-callout: none;
+    font-size: 15px;
     overflow: hidden;
     white-space: nowrap;
-    float: right;
     margin-top: 3px;
     height: 21px;
+    position: absolute;
+    right: 0;
 }
-.rateit .rateit-range {
-    background: url(../images/star-gray-32.png);
-    background-size: contain;
-    height: 16px;
+.star-rating .star-icon {
+    width: auto;
+    margin-left: 2px;
+    color: #F9AA03;
 }
-.rateit .rateit-selected {
-    background: url(../images/star-32.png);
-    background-size: contain;
-    height: 16px;
+.star-rating .star-icon-o {
+    width: auto;
+    margin-left: 2px;
+    color: #999;
 }
 #children-list, #search-results-list {
     position: relative;

data/interfaces/default/info.html

@@ -108,9 +108,9 @@ DOCUMENTATION :: END
                 <div class="col-md-9">
                     <div class="summary-content-poster hidden-xs hidden-sm">
                         % if data['media_type'] == 'track':
-                        <a href="http://app.plex.tv/web/app#!/server/${config['pms_identifier']}/details/%2Flibrary%2Fmetadata%2F${data['parent_rating_key']}" target="Plex/Web" title="View in Plex/Web">
+                        <a href="http://app.plex.tv/web/app#!/server/${config['pms_identifier']}/details/%2Flibrary%2Fmetadata%2F${data['parent_rating_key']}" target="Plex" title="View in Plex Web">
                         % else:
-                        <a href="http://app.plex.tv/web/app#!/server/${config['pms_identifier']}/details/%2Flibrary%2Fmetadata%2F${data['rating_key']}" target="Plex/Web" title="View in Plex/Web">
+                        <a href="http://app.plex.tv/web/app#!/server/${config['pms_identifier']}/details/%2Flibrary%2Fmetadata%2F${data['rating_key']}" target="Plex" title="View in Plex Web">
                         % endif
                             % if data['media_type'] == 'episode':
                             <div class="summary-poster-face-episode" style="background-image: url(pms_image_proxy?img=${data['thumb']}&width=500&height=280&fallback=poster);">
@@ -189,20 +189,16 @@ DOCUMENTATION :: END
                     <div class="summary-content">
                         <div class="summary-content-details-wrapper">
                             % if data['rating']:
-                            <div class="star-rating hidden-xs hidden-sm">
-                                <span class="star"><i class="star-icon glyphicon star"></i>
-                                <span class="empty-icon"></span></span>
-                                
-                                <i class="star-icon glyphicon star"></i>
-                                <i class="star-icon glyphicon star"></i>
-                                <i class="star-icon glyphicon star"></i>
-                                <i class="star-icon glyphicon star"></i>
+                            <div class="star-rating hidden-xs hidden-sm" title="${data['rating']}">
+                                % for i in range(0,5):
+                                % if round(float(data['rating']) / 2) > i:
+                                <i class="star-icon fa fa-star"></i>
+                                % else:
+                                <i class="star-icon-o fa fa-star-o"></i>
+                                % endif
+                                % endfor
                             </div>
                             % endif
-                            % if data['rating']:
-                            <div id="stars" class="rateit hidden-xs hidden-sm" data-rateit-value=""
-                                 data-rateit-ispreset="true" data-rateit-readonly="true"></div>
-                            % endif
                             <div class="summary-content-details-tag">
                                 % if data['directors']:
                                 Directed by <strong> ${data['directors'][0]}</strong>
@@ -518,13 +514,6 @@ DOCUMENTATION :: END
     });
 </script>
 % endif
-% if data['rating']:
-<script>
-    // Convert rating to 5 star rating type
-    var starRating = Math.round(${data['rating']} / 2);
-    $('#stars').attr('data-rateit-value', starRating);
-</script>
-% endif
 <script>
     $('#row-edit-mode').after('<a href="update_metadata?rating_key=${data['rating_key']}" class="btn btn-danger btn-edit" id="fix-metadata"> \
         <i class="fa fa-wrench"></i> Fix Metadata</a>');