From d6ae79ce9eddbd5b7b888ab1b9f7e342d9d9ff9e Mon Sep 17 00:00:00 2001
From: sephrat <34862846+sephrat@users.noreply.github.com>
Date: Fri, 25 Feb 2022 14:10:22 +0100
Subject: [PATCH] feat(media-details): Add Trakt to social icons (#4522)

[skip ci]
---
 .../shared/social-icons/social-icons.component.html    |  3 +++
 .../shared/social-icons/social-icons.component.scss    | 10 ++++++++++
 src/Ombi/wwwroot/images/trakt.svg                      |  1 +
 3 files changed, 14 insertions(+)
 create mode 100644 src/Ombi/wwwroot/images/trakt.svg

diff --git a/src/Ombi/ClientApp/src/app/media-details/components/shared/social-icons/social-icons.component.html b/src/Ombi/ClientApp/src/app/media-details/components/shared/social-icons/social-icons.component.html
index 98bb999b2..d97bb4c02 100644
--- a/src/Ombi/ClientApp/src/app/media-details/components/shared/social-icons/social-icons.component.html
+++ b/src/Ombi/ClientApp/src/app/media-details/components/shared/social-icons/social-icons.component.html
@@ -17,6 +17,9 @@
     <a *ngIf="imdbId" class="media-icons imdb" [href]="doNotAppend ? imdbid : 'https://imdb.com/title/' + imdbId" target="_blank">
         <i matTooltip="Imdb" class="fab fa-imdb fa-2x grow-social"></i>
     </a>
+    <a *ngIf="theMoviedbId" class="media-icons trakt" href="https://trakt.tv/search/tmdb/{{theMoviedbId}}?id_type={{type === RequestType.movie ? 'movie' : 'show'}}" target="_blank">
+        <img matTooltip="Trakt" src="{{baseUrl}}/images/trakt.svg" />
+    </a>
     <a *ngIf="twitter" class="media-icons" [href]="doNotAppend ? twitter : 'https://twitter.com/' + twitter" target="_blank">
         <i matTooltip="Twitter" class="fab fa-twitter fa-2x grow-social"></i>
     </a>
diff --git a/src/Ombi/ClientApp/src/app/media-details/components/shared/social-icons/social-icons.component.scss b/src/Ombi/ClientApp/src/app/media-details/components/shared/social-icons/social-icons.component.scss
index 1da3e6841..fd31c4b6f 100644
--- a/src/Ombi/ClientApp/src/app/media-details/components/shared/social-icons/social-icons.component.scss
+++ b/src/Ombi/ClientApp/src/app/media-details/components/shared/social-icons/social-icons.component.scss
@@ -4,6 +4,16 @@ a.media-icons:hover{
     color:$ombi-active;
 }
 
+a.media-icons:hover img{
+    filter: sepia(100%) hue-rotate(190deg) saturate(500%) brightness(190%);
+}
+
+a.media-icons img{
+    filter: contrast(0) brightness(3);
+    height: 2em;
+    padding: 0;
+}
+
 button.admin-cog{
     margin-left:40px;
     color:$ombi-active;
diff --git a/src/Ombi/wwwroot/images/trakt.svg b/src/Ombi/wwwroot/images/trakt.svg
new file mode 100644
index 000000000..782305d6a
--- /dev/null
+++ b/src/Ombi/wwwroot/images/trakt.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" enable-background="new 0 0 24 24" viewBox="0 0 24 24"><path fill="#DE2318" d="M19.178 18.464c1.541-1.71 2.484-3.99 2.484-6.466 0-3.885-2.287-7.215-5.568-8.76l-6.089 6.076L19.178 18.464zM12.348 11.071v-.008l-.678-.676 4.788-4.79.679.689L12.348 11.071zM16.211 3.806l.677.682-5.517 5.517-.68-.679L16.211 3.806zM4.89 18.531c1.756 1.92 4.294 3.113 7.11 3.113 1.439 0 2.801-.313 4.027-.876l-6.697-6.68L4.89 18.531z"/><path fill="#DE2318" d="M12,24c6.615,0,12-5.385,12-12S18.615,0,12,0S0,5.385,0,12S5.385,24,12,24z M12,1.211c5.95,0,10.79,4.839,10.79,10.789S17.95,22.79,12,22.79S1.211,17.95,1.211,12S6.05,1.211,12,1.211z"/><path fill="#DE2318" d="M4.276,17.801l5.056-5.055l0.359,0.329l7.245,7.245c0.15-0.082,0.285-0.164,0.42-0.266L9.33,12.05l-4.854,4.855l-0.679-0.679l5.535-5.535l0.359,0.331l8.46,8.437c0.135-0.1,0.255-0.215,0.375-0.316L9.39,10.027l-0.083,0.015l-0.006-0.007L4.227,15.09l-0.679-0.68L15.115,2.849C14.137,2.521,13.095,2.34,12,2.34C6.663,2.337,2.337,6.663,2.337,12C2.337,14.172,3.05,16.178,4.276,17.801z"/></svg>
\ No newline at end of file