sharing with lId, fix autoplay bump,

package.json

@@ -143,7 +143,7 @@
     "imagesloaded": "^4.1.4",
     "json-loader": "^0.5.4",
     "lbry-format": "https://github.com/lbryio/lbry-format.git",
-    "lbry-redux": "lbryio/lbry-redux#609f13991fa2dfd5b7d4357189bb05e3e172c3a4",
+    "lbry-redux": "lbryio/lbry-redux#4dfc4689c61f46e4133929a1cce3161b65724e07",
     "lbryinc": "lbryio/lbryinc#8f9a58bfc8312a65614fd7327661cdcc502c4e59",
     "lint-staged": "^7.0.2",
     "localforage": "^1.7.1",

ui/component/fileActions/view.jsx

@@ -6,7 +6,7 @@ import * as ICONS from 'constants/icons';
 import React from 'react';
 import Button from 'component/button';
 import FileDownloadLink from 'component/fileDownloadLink';
-import { buildURI } from 'lbry-redux';
+import { buildURI, COLLECTIONS_CONSTS } from 'lbry-redux';
 import * as RENDER_MODES from 'constants/file_render_modes';
 import { useIsMobile } from 'effects/use-screensize';
 import ClaimSupportButton from 'component/claimSupportButton';
@@ -50,7 +50,7 @@ function FileActions(props: Props) {
   } = props;
   const {
     push,
-    location: { pathname },
+    location: { pathname, search },
   } = useHistory();
   const isMobile = useIsMobile();
   const webShareable = costInfo && costInfo.cost === 0 && RENDER_MODES.WEB_SHAREABLE_MODES.includes(renderMode);
@@ -75,6 +75,9 @@ function FileActions(props: Props) {
     editUri = buildURI(uriObject);
   }
 
+  const urlParams = new URLSearchParams(search);
+  const collectionId = urlParams.get(COLLECTIONS_CONSTS.COLLECTION_ID);
+
   function handleRepostClick() {
     if (!hasChannels) {
       clearPlayingUri();
@@ -106,7 +109,7 @@ function FileActions(props: Props) {
         icon={ICONS.SHARE}
         label={__('Share')}
         title={__('Share')}
-        onClick={() => openModal(MODALS.SOCIAL_SHARE, { uri, webShareable })}
+        onClick={() => openModal(MODALS.SOCIAL_SHARE, { uri, webShareable, collectionId })}
       />
     </>
   );

ui/component/socialShare/view.jsx

@@ -22,11 +22,13 @@ type Props = {
   referralCode: string,
   user: any,
   position: number,
+  collectionId?: number,
 };
 
 function SocialShare(props: Props) {
-  const { claim, title, referralCode, user, webShareable, position } = props;
+  const { claim, title, referralCode, user, webShareable, position, collectionId } = props;
   const [showEmbed, setShowEmbed] = React.useState(false);
+  const [includeCollectionId, setIncludeCollectionId] = React.useState(Boolean(collectionId)); // unless it *is* a collection?
   const [showClaimLinks, setShowClaimLinks] = React.useState(false);
   const [includeStartTime, setincludeStartTime]: [boolean, any] = React.useState(false);
   const [startTime, setStartTime]: [string, any] = React.useState(secondsToHms(position));
@@ -46,14 +48,22 @@ function SocialShare(props: Props) {
   const rewardsApproved = user && user.is_reward_approved;
   const lbryUrl: string = generateLbryContentUrl(canonicalUrl, permanentUrl);
   const lbryWebUrl: string = generateLbryWebUrl(lbryUrl);
-  const encodedLbryURL: string = generateEncodedLbryURL(SHARE_DOMAIN, lbryWebUrl, includeStartTime, startTimeSeconds);
+  const includedCollectionId = collectionId && includeCollectionId ? collectionId : null;
+  const encodedLbryURL: string = generateEncodedLbryURL(
+    SHARE_DOMAIN,
+    lbryWebUrl,
+    includeStartTime,
+    startTimeSeconds,
+    includedCollectionId
+  );
   const shareUrl: string = generateShareUrl(
     SHARE_DOMAIN,
     lbryUrl,
     referralCode,
     rewardsApproved,
     includeStartTime,
-    startTimeSeconds
+    startTimeSeconds,
+    includedCollectionId
   );
   const downloadUrl = `${generateDownloadUrl(name, claimId)}`;
 
@@ -70,7 +80,7 @@ function SocialShare(props: Props) {
     <React.Fragment>
       <CopyableText copyable={shareUrl} />
       {showStartAt && (
-        <div className="section__start-at">
+        <div className="section__checkbox">
           <FormField
             type="checkbox"
             name="share_start_at_checkbox"
@@ -87,6 +97,17 @@ function SocialShare(props: Props) {
           />
         </div>
       )}
+      {Boolean(collectionId) && (
+        <div className="section__checkbox">
+          <FormField
+            type="checkbox"
+            name="share_collection_id_checkbox"
+            onChange={() => setIncludeCollectionId(!includeCollectionId)}
+            checked={includeCollectionId}
+            label={__('Include List ID')}
+          />
+        </div>
+      )}
       <div className="section__actions">
         <Button
           className="share"

ui/modal/modalSocialShare/view.jsx

@@ -8,14 +8,18 @@ type Props = {
   closeModal: () => void,
   uri: string,
   webShareable: boolean,
+  collectionId?: number,
 };
 
 class ModalSocialShare extends React.PureComponent<Props> {
   render() {
-    const { closeModal, uri, webShareable } = this.props;
+    const { closeModal, uri, webShareable, collectionId } = this.props;
     return (
       <Modal isOpen onAborted={closeModal} type="card">
-        <Card title={__('Share')} actions={<SocialShare uri={uri} webShareable={webShareable} />} />
+        <Card
+          title={__('Share')}
+          actions={<SocialShare uri={uri} webShareable={webShareable} collectionId={collectionId} />}
+        />
       </Modal>
     );
   }

ui/scss/component/section.scss

@@ -191,7 +191,7 @@
   margin-top: 0;
 }
 
-.section__start-at {
+.section__checkbox {
   display: flex;
   align-items: center;
   margin-top: var(--spacing-l);

ui/util/url.js

@@ -1,6 +1,7 @@
 // Can't use aliases here because we're doing exports/require
+
 const PAGES = require('../constants/pages');
-const { parseURI, buildURI } = require('lbry-redux');
+const { parseURI, buildURI, COLLECTIONS_CONSTS } = require('lbry-redux');
 
 function encodeWithSpecialCharEncode(string) {
   // encodeURIComponent doesn't encode `'` and others
@@ -92,18 +93,39 @@ export const generateLbryWebUrl = (lbryUrl) => {
   return lbryUrl.replace(/#/g, ':');
 };
 
-export const generateEncodedLbryURL = (domain, lbryWebUrl, includeStartTime, startTime) => {
+export const generateEncodedLbryURL = (domain, lbryWebUrl, includeStartTime, startTime, listId) => {
-  const queryParam = includeStartTime ? `?t=${startTime}` : '';
+  let urlParams = new URLSearchParams();
-  const encodedPart = encodeWithSpecialCharEncode(`${lbryWebUrl}${queryParam}`);
+
+  if (includeStartTime) {
+    urlParams.append('t', startTime.toString());
+  }
+
+  if (listId) {
+    urlParams.append(COLLECTIONS_CONSTS.COLLECTION_ID, listId);
+  }
+  const urlParamsString = urlParams.toString();
+  const encodedPart = encodeWithSpecialCharEncode(`${lbryWebUrl}?${urlParamsString}`);
   return `${domain}/${encodedPart}`;
 };
 
-export const generateShareUrl = (domain, lbryUrl, referralCode, rewardsApproved, includeStartTime, startTime) => {
+export const generateShareUrl = (
+  domain,
+  lbryUrl,
+  referralCode,
+  rewardsApproved,
+  includeStartTime,
+  startTime,
+  listId
+) => {
   let urlParams = new URLSearchParams();
   if (referralCode && rewardsApproved) {
     urlParams.append('r', referralCode);
   }
 
+  if (listId) {
+    urlParams.append(COLLECTIONS_CONSTS.COLLECTION_ID, listId);
+  }
+
   if (includeStartTime) {
     urlParams.append('t', startTime.toString());
   }

yarn.lock

@@ -6970,9 +6970,9 @@ lazy-val@^1.0.4:
     yargs "^13.2.2"
     zstd-codec "^0.1.1"
 
-lbry-redux@lbryio/lbry-redux#609f13991fa2dfd5b7d4357189bb05e3e172c3a4:
+lbry-redux@lbryio/lbry-redux#4dfc4689c61f46e4133929a1cce3161b65724e07:
   version "0.0.1"
-  resolved "https://codeload.github.com/lbryio/lbry-redux/tar.gz/609f13991fa2dfd5b7d4357189bb05e3e172c3a4"
+  resolved "https://codeload.github.com/lbryio/lbry-redux/tar.gz/4dfc4689c61f46e4133929a1cce3161b65724e07"
   dependencies:
     proxy-polyfill "0.1.6"
     reselect "^3.0.0"