From e0fdb36551a280caf09bc2f786a69e93ea79b7dd Mon Sep 17 00:00:00 2001
From: bill bittner <bittner.w@gmail.com>
Date: Sat, 24 Feb 2018 10:05:28 -0800
Subject: [PATCH 1/2] added height and width constraints to showlite

---
 public/assets/css/general.css           | 25 ++++++++++++++++++-------
 react/components/AssetDisplay/view.jsx  | 18 +++++++++---------
 react/components/ShowAssetLite/view.jsx | 14 +++++++-------
 3 files changed, 34 insertions(+), 23 deletions(-)

diff --git a/public/assets/css/general.css b/public/assets/css/general.css
index 3f6d439c..4ac2a76c 100644
--- a/public/assets/css/general.css
+++ b/public/assets/css/general.css
@@ -540,19 +540,30 @@ table {
 	margin : 0px
 }
 
+/* show */
+
 .asset {
-	width: 100%;
+	max-width: 100%;
 }
 
-#show-body #asset-boilerpate {
-	display: none;
-}
-
-#showlite-body #asset-display-component {
-	max-width: 50%;
+/* show lite */
+#show-lite-container {
 	text-align: center;
 }
 
+#show-lite-container #asset-display-component {
+	max-height: calc(100vh - 3em);
+}
+
+#show-lite-container #asset-display-component .asset {
+	max-height: calc(100vh - 3em);
+	max-width: 100vw;
+}
+
+#asset-boilerplate {
+	max-height: 3em;
+}
+
 /* video */
 
 #video-asset {
diff --git a/react/components/AssetDisplay/view.jsx b/react/components/AssetDisplay/view.jsx
index 733f1bd1..bfc85ca5 100644
--- a/react/components/AssetDisplay/view.jsx
+++ b/react/components/AssetDisplay/view.jsx
@@ -10,7 +10,7 @@ class AssetDisplay extends React.Component {
   render () {
     const { status, error, asset: { claimData: { name, claimId, contentType, fileExt, thumbnail } } } = this.props;
     return (
-      <div id="asset-display-component">
+      <div id='asset-display-component'>
         {(status === LOCAL_CHECK) &&
         <div>
           <p>Checking to see if Spee.ch has your asset locally...</p>
@@ -19,14 +19,14 @@ class AssetDisplay extends React.Component {
         {(status === UNAVAILABLE) &&
         <div>
           <p>Sit tight, we're searching the LBRY blockchain for your asset!</p>
-          <ProgressBar size={12}/>
-          <p>Curious what magic is happening here? <a className="link--primary" target="blank" href="https://lbry.io/faq/what-is-lbry">Learn more.</a></p>
+          <ProgressBar size={12} />
+          <p>Curious what magic is happening here? <a className='link--primary' target='blank' href='https://lbry.io/faq/what-is-lbry'>Learn more.</a></p>
         </div>
         }
         {(status === ERROR) &&
         <div>
-          <p>Unfortunately, we couldn't download your asset from LBRY.  You can help us out by sharing the below error message in the <a className="link--primary" href="https://discord.gg/YjYbwhS" target="_blank">LBRY discord</a>.</p>
-          <i><p id="error-message">{error}</p></i>
+          <p>Unfortunately, we couldn't download your asset from LBRY.  You can help us out by sharing the below error message in the <a className='link--primary' href='https://discord.gg/YjYbwhS' target='_blank'>LBRY discord</a>.</p>
+          <i><p id='error-message'>{error}</p></i>
         </div>
         }
         {(status === AVAILABLE) &&
@@ -37,21 +37,21 @@ class AssetDisplay extends React.Component {
             case 'image/png':
               return (
                 <img
-                  className="asset"
+                  className='asset'
                   src={`/${claimId}/${name}.${fileExt}`}
-                  alt={name}/>
+                  alt={name} />
               );
             case 'image/gif':
               return (
                 <img
-                  className="asset"
+                  className='asset'
                   src={`/${claimId}/${name}.${fileExt}`}
                   alt={name}
                 />
               );
             case 'video/mp4':
               return (
-                <video id="video" className="asset" controls poster={thumbnail}>
+                <video id='video' className='asset' controls poster={thumbnail}>
                   <source
                     src={`/${claimId}/${name}.${fileExt}`}
                   />
diff --git a/react/components/ShowAssetLite/view.jsx b/react/components/ShowAssetLite/view.jsx
index 9b483249..f8049c97 100644
--- a/react/components/ShowAssetLite/view.jsx
+++ b/react/components/ShowAssetLite/view.jsx
@@ -9,18 +9,18 @@ class ShowLite extends React.Component {
     if (asset) {
       const { name, claimId } = asset.claimData;
       return (
-        <div className='row row--tall flex-container--column flex-container--center-center'>
+        <div id='show-lite-container' className='row row--tall flex-container--column flex-container--center-center'>
           <SEO pageTitle={name} asset={asset} />
-          <div>
-            <AssetDisplay />
-            <Link id='asset-boilerpate' className='link--primary fine-print' to={`/${claimId}/${name}`}>hosted
-              via Spee.ch</Link>
-          </div>
+          <AssetDisplay />
+          <Link id='asset-boilerpate' className='link--primary fine-print' to={`/${claimId}/${name}`}>hosted
+            via Spee.ch</Link>
         </div>
       );
     }
     return (
-      <p>loading asset data...</p>
+      <div className='row row--tall row--padded flex-container--column flex-container--center-center'>
+        <p>loading asset data...</p>
+      </div>
     );
   }
 };
-- 
2.45.3


From ba5f9ba390207f622b554c29e5ee68c407d0291b Mon Sep 17 00:00:00 2001
From: bill bittner <bittner.w@gmail.com>
Date: Sat, 24 Feb 2018 10:12:56 -0800
Subject: [PATCH 2/2] fixed video css

---
 public/assets/css/general.css | 22 +++++++++-------------
 1 file changed, 9 insertions(+), 13 deletions(-)

diff --git a/public/assets/css/general.css b/public/assets/css/general.css
index 4ac2a76c..7b4f2af4 100644
--- a/public/assets/css/general.css
+++ b/public/assets/css/general.css
@@ -546,6 +546,15 @@ table {
 	max-width: 100%;
 }
 
+#video {
+	cursor: pointer;
+	background-color: #ffffff;
+	width: calc(100% - 12px - 12px - 2px);
+	margin: 6px;
+	padding: 6px;
+	border: 1px solid #d0d0d0;
+}
+
 /* show lite */
 #show-lite-container {
 	text-align: center;
@@ -564,19 +573,6 @@ table {
 	max-height: 3em;
 }
 
-/* video */
-
-#video-asset {
-    background-color: #000000;
-	cursor: pointer;
-}
-#showlite-body #video-asset {
-	background-color: #ffffff;
-	width: calc(100% - 12px - 12px - 2px);
-	margin: 6px;
-	padding: 6px;
-	border: 1px solid #d0d0d0;
-}
 
 /* item lists */
 
-- 
2.45.3