From 3db3eb3f9ce478476b29c6a065d72582af0ef2c6 Mon Sep 17 00:00:00 2001
From: svetlagasheva <svetulka_24@mail.bg>
Date: Wed, 19 Sep 2018 14:16:57 +0300
Subject: [PATCH] 'ShareAddon' component

---
 src/common/ShareAddon/ShareAddon.js | 71 +++++++++++++++++++++++++
 src/common/ShareAddon/index.js      |  3 ++
 src/common/ShareAddon/styles.less   | 80 +++++++++++++++++++++++++++++
 src/common/index.js                 |  4 +-
 src/routes/Board/Board.js           |  6 +--
 5 files changed, 159 insertions(+), 5 deletions(-)
 create mode 100644 src/common/ShareAddon/ShareAddon.js
 create mode 100644 src/common/ShareAddon/index.js
 create mode 100644 src/common/ShareAddon/styles.less

diff --git a/src/common/ShareAddon/ShareAddon.js b/src/common/ShareAddon/ShareAddon.js
new file mode 100644
index 000000000..4b3509f40
--- /dev/null
+++ b/src/common/ShareAddon/ShareAddon.js
@@ -0,0 +1,71 @@
+import React, { Component } from 'react';
+import PropTypes from 'prop-types';
+import Icon from 'stremio-icons/dom';
+import styles from './styles';
+
+class ShareAddon extends Component {
+    renderX() {
+        return(
+            <div className={styles['x-container']}>
+                <Icon className={styles['x-icon']} icon={'ic_x'}/>
+            </div>
+        );
+    }
+
+    renderShareLabel() {
+        return (
+            <span className={styles['share-label']}>Share Add-on</span>
+        );
+    }
+
+    renderButtons() {
+        return (
+            <div className={styles['buttons']}>
+                <div className={styles['facebook-button']}>
+                    <Icon className={styles['facebook-icon']} icon={'ic_facebook'}/>FACEBOOK
+                </div>
+                <div className={styles['twitter-button']}>
+                    <Icon className={styles['twitter-icon']} icon={'ic_twitter'}/>TWITTER
+                </div>
+                <div className={styles['gplus-button']}>
+                    <Icon className={styles['gplus-icon']} icon={'ic_gplus'}/>GOOGLE+
+                </div>
+            </div>
+        );
+    }
+
+    renderUrl() {
+        if(this.props.url.length === 0) {
+            return null;
+        }
+
+        return (
+            <div className={styles['url-container']}>
+                <input className={styles['url']} defaultValue={this.props.url}/>
+                <span className={styles['copy-label']}>Copy</span>
+            </div>
+        );
+    }
+
+    render() {
+        return (
+            <div className={styles['share-addon']}>
+                {this.renderX()}
+                <div className={styles['info-container']}>
+                    {this.renderShareLabel()}
+                    {this.renderButtons()}
+                    {this.renderUrl()}
+                </div>
+            </div>
+        );
+    }
+}
+
+ShareAddon.propTypes = {
+    url: PropTypes.string.isRequired
+};
+ShareAddon.defaultProps = {
+    url: ''
+};
+
+export default ShareAddon;
\ No newline at end of file
diff --git a/src/common/ShareAddon/index.js b/src/common/ShareAddon/index.js
new file mode 100644
index 000000000..f5ae618df
--- /dev/null
+++ b/src/common/ShareAddon/index.js
@@ -0,0 +1,3 @@
+import ShareAddon from './ShareAddon';
+
+export default ShareAddon;
diff --git a/src/common/ShareAddon/styles.less b/src/common/ShareAddon/styles.less
new file mode 100644
index 000000000..62b6d119b
--- /dev/null
+++ b/src/common/ShareAddon/styles.less
@@ -0,0 +1,80 @@
+@import 'stremio-colors';
+.share-addon {
+    width: 380px;
+    height: 200px;
+    padding: 10px;
+    color: @colorwhite;
+    background-color: @colorwhite;
+    .x-container {
+        display: flex;
+        justify-content: flex-end;
+        .x-icon {
+            height: 10px;
+            fill: @colorneutrallight;
+        }
+    }
+    .info-container {
+        padding: 6px 20px 0px 20px;
+        .share-label {
+            color: @colorblack;
+            font-weight: 600;
+        }
+        .buttons {
+            display: flex;
+            font-size: 11px;
+            margin: 22px 0px;
+            font-family: LatoLight;
+            justify-content: space-between;
+            .facebook-icon, .twitter-icon, .gplus-icon {
+                width: 14px;
+                height: 14px;
+                margin-right: 6px;
+                fill: @colorwhite;
+            }
+            .facebook-button {
+                background-color: @colorfb;
+            }
+            .twitter-button {
+                background-color: @coloraccent;
+            }
+            .gplus-button {
+                background-color: #dd4b39;
+            }
+            .facebook-button, .twitter-button, .gplus-button {
+                display: flex;
+                cursor: pointer;
+                width: 100px;
+                height: 32px;
+                align-items: center;
+                justify-content: center;
+            }
+        }
+        .url-container {
+            display: flex;
+            border-radius: 4px;
+            text-align: center;
+            border: 1px solid @colorneutrallight;
+            .url, .copy-label {
+                padding: 10px;
+                font-weight: 600;
+                color: @colorblack40;
+            }
+            .url {
+                width: 90%;
+                outline: none;
+                font-size: 12px;
+                text-align: center;
+                border-radius: 4px;
+                padding-right: 30px;
+                text-overflow: ellipsis;
+            }
+            .copy-label {
+                width: 30%;
+                cursor: pointer;
+                border-top-right-radius: 3px;
+                border-bottom-right-radius: 3px;
+                background-color: @colorblack20;
+            }
+        }
+    }
+}
\ No newline at end of file
diff --git a/src/common/index.js b/src/common/index.js
index 4bbbfb998..a5122e878 100644
--- a/src/common/index.js
+++ b/src/common/index.js
@@ -9,6 +9,7 @@ import Episode from './Episode';
 import LibraryItemList from './LibraryItemList';
 import LibraryItemGrid from './LibraryItemGrid';
 import Addon from './Addon';
+import ShareAddon from './ShareAddon';
 
 export {
     Checkbox,
@@ -21,5 +22,6 @@ export {
     Episode,
     LibraryItemList,
     LibraryItemGrid,
-    Addon
+    Addon,
+    ShareAddon
 };
diff --git a/src/routes/Board/Board.js b/src/routes/Board/Board.js
index b3fef6eb7..e3534888c 100644
--- a/src/routes/Board/Board.js
+++ b/src/routes/Board/Board.js
@@ -6,6 +6,7 @@ import { Episode } from 'stremio-common';
 import { LibraryItemList } from 'stremio-common';
 import { LibraryItemGrid } from 'stremio-common';
 import { Addon } from 'stremio-common';
+import { ShareAddon } from 'stremio-common';
 
 class Board extends PureComponent {
     constructor(props) {
@@ -34,10 +35,7 @@ class Board extends PureComponent {
     render() {
         return (
             <div style={{ paddingTop: 40, color: 'yellow' }}>
-                <Addon logo={'ic_series'} name={'Watch Hub'} version={'1.3.0'} isInstalled={false} types={['Movies', 'Series']} description={'Find where to stream your favourite movies and shows amongst iTunes, Hulu, Amazon and other UK/US services.'} urls={['http://nfxaddon.strem.io/stremioget', 'http://127.0.0.1:11470/addons/com.stremio.subtitles/stremioget', 'http://127.0.0.1:11470/addons/com.stremio.localfiles/stremioget']}></Addon>
-                <Addon name={'Cinemeta'} version={'2.4.0'} isInstalled={true} types={['Movies', 'Series']} description={'Watch your favourite YouTube channels ad-free and get notified when they upload new videos.'} urls={['https://channels.strem.io/stremioget/stremio/v1', 'https://channels.strem.io/stremioget/stremio/v1']}></Addon>
-                <Addon logo={'ic_youtube_small'} name={'YouTube'} version={'1.3.0'} isInstalled={true} types={['Channels', 'Videos']} description={'Watch your favourite YouTube channels ad-free and get notified when they upload new videos.'} urls={['https://channels.strem.io/stremioget/stremio/v1', 'https://channels.strem.io/stremioget/stremio/v1']}></Addon>
-                <Addon name={'OpenSubtitles'} version={'1.3.0'} isInstalled={false} types={['Movies', 'Series']} description={'Watch your favourite YouTube channels ad-free and get notified when they upload new videos.'} urls={['https://channels.strem.io/stremioget/stremio/v1', 'https://channels.strem.io/stremioget/stremio/v1', 'http://127.0.0.1:11470/addons/com.stremio.subtitles/stremioget', 'https://channels.strem.io/stremioget/stremio/v1']}></Addon>
+                <ShareAddon url={'http://nfxaddon.strem.io/stremioget'}></ShareAddon>
             </div>
         );
     }