ui/page/embedWrapper/index.js

@@ -1,7 +1,14 @@
 import { connect } from 'react-redux';
 import EmbedWrapperPage from './view';
-import { doResolveUri, makeSelectClaimForUri, buildURI } from 'lbry-redux';
+import {
+  doResolveUri,
+  makeSelectClaimForUri,
+  buildURI,
+  makeSelectStreamingUrlForUri,
+  makeSelectIsUriResolving,
+} from 'lbry-redux';
 import { doPlayUri } from 'redux/actions/content';
+import { makeSelectCostInfoForUri, doFetchCostInfoForUri } from 'lbryinc';
 
 const select = (state, props) => {
   const { match } = props;
@@ -11,6 +18,9 @@ const select = (state, props) => {
   return {
     uri,
     claim: makeSelectClaimForUri(uri)(state),
+    costInfo: makeSelectCostInfoForUri(uri)(state),
+    streamingUrl: makeSelectStreamingUrlForUri(uri)(state),
+    isResolvingUri: makeSelectIsUriResolving(uri)(state),
   };
 };
 
@@ -18,6 +28,7 @@ const perform = dispatch => {
   return {
     resolveUri: uri => dispatch(doResolveUri(uri)),
     doPlayUri: uri => dispatch(doPlayUri(uri)),
+    doFetchCostInfoForUri: uri => dispatch(doFetchCostInfoForUri(uri)),
   };
 };
 

ui/page/embedWrapper/view.jsx

@@ -7,29 +7,40 @@ type Props = {
   resolveUri: string => void,
   claim: Claim,
   doPlayUri: string => void,
+  costInfo: any,
+  streamingUrl: string,
+  doFetchCostInfoForUri: string => void,
+  isResolvingUri: boolean,
 };
 // $FlowFixMe apparently flow thinks this is wrong.
 export const EmbedContext = React.createContext();
 const EmbedWrapperPage = (props: Props) => {
-  const { resolveUri, claim, uri, doPlayUri } = props;
+  const { resolveUri, claim, uri, doPlayUri, costInfo, streamingUrl, doFetchCostInfoForUri, isResolvingUri } = props;
   const haveClaim = Boolean(claim);
 
   useEffect(() => {
     if (resolveUri && uri && !haveClaim) {
       resolveUri(uri);
     }
-    if (uri && haveClaim) {
+    if (uri && haveClaim && costInfo && costInfo.cost === 0) {
       doPlayUri(uri);
     }
-  }, [resolveUri, uri, doPlayUri, haveClaim]);
+  }, [resolveUri, uri, doPlayUri, haveClaim, costInfo]);
+
+  useEffect(() => {
+    if (haveClaim && uri && doFetchCostInfoForUri) {
+      doFetchCostInfoForUri(uri);
+    }
+  }, [uri, haveClaim, doFetchCostInfoForUri]);
 
   return (
     <div className={'embed__wrapper'}>
-      {claim && (
+      <EmbedContext.Provider value>
-        <EmbedContext.Provider value>
+        {claim && streamingUrl && <FileRender uri={uri} embedded />}
-          <FileRender uri={uri} embedded />
+        {!claim && isResolvingUri && <h1>Loading...</h1>}
-        </EmbedContext.Provider>
+        {!claim && !isResolvingUri && <h1>No content at this link.</h1>}
-      )}
+        {claim && costInfo && costInfo.cost > 0 && <h1>Paid content cannot be embedded.</h1>}
+      </EmbedContext.Provider>
     </div>
   );
 };

ui/scss/component/_embed-player.scss

@@ -7,6 +7,9 @@
   justify-content: space-between;
   align-items: center;
   background-color: var(--color-black);
+  h1 {
+    color: white;
+  }
 }
 
 .embed__inline-button {