Merge pull request #60 from armateam/tusbar/better-quality-preview

Display better quality preview
armateam · May 24, 2018 · 5e569c8 · 5e569c8
2 parents bda8ca4 + c69e1ae
commit 5e569c8
Show file tree

Hide file tree

Showing 3 changed files with 23 additions and 22 deletions.
diff --git a/src/popup/components/online.js b/src/popup/components/online.js
@@ -26,21 +26,13 @@ export default class Online extends React.Component {
       window.close()
     }
 
-    generatePreviewUrl = (width, height) => {
-      const {channel} = this.props
-
-      return channel.preview.template
-        .replace('{width}', width)
-        .replace('{height}', height) + `?${channel.channel.updated_at}`
-    }
-
     render() {
       const {channel, refreshing, status} = this.props
 
       return (
         <main>
           <a onClick={() => this.openChannel(channel.channel.url)}>
-            <img alt='' src={this.generatePreviewUrl(400, 225)} />
+            <img alt='' src={channel.preview.large} />
             <div className='top'>
               <Title>{status}</Title>
             </div>
@@ -49,10 +41,16 @@ export default class Online extends React.Component {
             </div>
             <div className='right'>
               {channel.delay > 0 && (
-                <Widget icon={<DelayIcon />} label={chrome.i18n.getMessage('delay')} />
+                <Widget icon={<DelayIcon />}>
+                  {chrome.i18n.getMessage('delay')}
+                </Widget>
               )}
-              <Widget icon={<DesktopIcon />} label={`${channel.video_height}p`} />
-              <Widget icon={<UserIcon />} label={channel.viewers.toLocaleString()} />
+              <Widget icon={<DesktopIcon />}>
+                {channel.video_height}p
+              </Widget>
+              <Widget icon={<UserIcon />}>
+                {channel.viewers.toLocaleString()}
+              </Widget>
             </div>
           </a>
 
@@ -63,6 +61,7 @@ export default class Online extends React.Component {
               right: 0;
               top: 0;
               bottom: 0;
+              background-color: #880d10;
             }
 
             h1 {
@@ -79,6 +78,8 @@ export default class Online extends React.Component {
             img {
               opacity: 0.95;
               transition: opacity 0.1s ease-in-out;
+              width: 400px;
+              height: 225px;
             }
 
             a {
@@ -103,21 +104,21 @@ export default class Online extends React.Component {
 
             .top {
               position: absolute;
-              top: 4px;
-              left: 4px;
-              right: 4px;
+              top: 5px;
+              left: 5px;
+              right: 5px;
             }
 
             .left {
               position: absolute;
               bottom: 4px;
-              left: 4px;
+              left: 5px;
             }
 
             .right {
               position: absolute;
               bottom: 4px;
-              right: 4px;
+              right: 5px;
             }
           `}</style>
         </main>

diff --git a/src/popup/components/title.js b/src/popup/components/title.js
@@ -10,7 +10,7 @@ const Title = ({children}) => (
     <style jsx>{`
       div {
         display: inline-block;
-        background-color: rgba(255, 255, 255, 0.9);
+        background-color: rgba(255, 255, 255, 0.96);
         color: black;
         font-weight: 500;
         padding: 3px 7px 3px 6px;

diff --git a/src/popup/components/widget.js b/src/popup/components/widget.js
@@ -3,10 +3,10 @@ import PropTypes from 'prop-types'
 
 // ## //
 
-const Widget = ({label, icon, spin}) => (
+const Widget = ({children, icon, spin}) => (
   <div className={spin && 'spin'}>
     {icon}
-    {label && <span>{label}</span>}
+    {children && <span>{children}</span>}
 
     <style jsx>{`
       @keyframes icon-spin {
@@ -44,13 +44,13 @@ const Widget = ({label, icon, spin}) => (
 )
 
 Widget.propTypes = {
+  children: PropTypes.node,
   icon: PropTypes.node.isRequired,
-  label: PropTypes.string,
   spin: PropTypes.bool
 }
 
 Widget.defaultProps = {
-  label: null,
+  children: null,
   spin: false
 }