show price on embeds in markdown

lbrytv/component/fileViewerEmbeddedEnded/view.jsx

@@ -36,12 +36,7 @@ function FileViewerEmbeddedEnded(props: Props) {
   return (
     <div className="file-viewer__overlay">
       <div className="file-viewer__overlay-secondary">
-        <Button
-          className="file-viewer__overlay-logo file-viewer__embedded-title-logo"
-          label="LBRY"
-          icon={ICONS.LBRY}
-          href={URL}
-        />
+        <Button className="file-viewer__overlay-logo" label="LBRY" icon={ICONS.LBRY} href={URL} />
       </div>
       <div className="file-viewer__overlay-title">{prompt}</div>
       <div className="file-viewer__overlay-actions">

ui/component/fileViewerEmbeddedTitle/view.jsx

@@ -1,6 +1,7 @@
 // @flow
 import React from 'react';
 import Button from 'component/button';
+import FilePrice from 'component/filePrice';
 import { formatLbryUrlForWeb } from 'util/url';
 import { withRouter } from 'react-router';
 import { URL } from 'config';
@@ -25,13 +26,12 @@ function FileViewerEmbeddedTitle(props: Props) {
   const lbryLinkProps = isInApp ? { navigate: '/' } : { href: URL };
 
   return (
-    <div className="file-viewer__embedded-title">
-      <Button label={title} button="link" {...contentLinkProps} />
-      <Button
-        className="file-viewer__overlay-logo file-viewer__embedded-title-logo"
-        icon={ICONS.LBRY}
-        {...lbryLinkProps}
-      />
+    <div className="file-viewer__embedded-header">
+      <Button label={title} button="link" className="file-viewer__embedded-title" {...contentLinkProps} />
+      <div className="file-viewer__embedded-info">
+        <Button className="file-viewer__overlay-logo" icon={ICONS.LBRY} {...lbryLinkProps} />
+        <FilePrice uri={uri} />
+      </div>
     </div>
   );
 }

ui/scss/component/_file-render.scss

@@ -197,11 +197,11 @@
   }
 }
 
-.file-viewer--is-playing:not(:hover) .file-viewer__embedded-title {
+.file-viewer--is-playing:not(:hover) .file-viewer__embedded-header {
   display: none;
 }
 
-.file-viewer__embedded-title {
+.file-viewer__embedded-header {
   position: absolute;
   display: flex;
   justify-content: space-between;
@@ -226,14 +226,32 @@
     &:hover {
       color: var(--color-white);
     }
+  }
 
-    &:first-of-type {
-      max-width: 90%;
+  .credit-amount,
+  .icon--Key {
+    margin-right: var(--spacing-medium);
+  }
+}
 
-      @media (max-width: $breakpoint-small) {
-        max-width: 80%;
-      }
-    }
+.file-viewer__embedded-title {
+  max-width: 75%;
+
+  @media (max-width: $breakpoint-small) {
+    max-width: 50%;
+    font-size: var(--font-small);
+  }
+}
+
+.file-viewer__embedded-info {
+  display: flex;
+  align-items: center;
+  font-size: var(--font-small);
+  margin-left: var(--spacing-medium);
+  white-space: nowrap;
+
+  & > *:not(:last-child) {
+    margin-right: var(--spacing-small);
   }
 }
 

ui/scss/component/_purchase.scss

@@ -5,7 +5,7 @@
   color: var(--color-purchased-text);
 
   .credit-amount,
-  .icon {
+  .icon--Key {
     position: relative;
     margin-left: var(--spacing-medium);
     white-space: nowrap;