added thubmnail channel to publish saga

config/speechConfig.js.example

@@ -29,7 +29,8 @@ module.exports = {
     description: 'Open-source, decentralized image and video sharing.'
   },
   publish: {
-    thumbnailChannel: '@channelName:channelId',  // create a channel to use for thumbnail images
+    thumbnailChannel  : '@channelName',  // create a channel to use for thumbnail images
+    thumbnailChannelId: 'xyz123...',  // the channel_id (claim id) for the channel above
   }
   claim: {
     defaultTitle      : 'Spee.ch',

helpers/publishHelpers.js

@@ -29,7 +29,6 @@ module.exports = {
     };
   },
   parsePublishApiRequestFiles ({file}) {
-    logger.debug('file', file);
     // make sure a file was provided
     if (!file) {
       throw new Error('no file with key of [file] found in request');
@@ -45,7 +44,6 @@ module.exports = {
     }
     // validate the file name
     if (/'/.test(file.name)) {
-      logger.debug('publish > file validation > file name had apostrophe in it');
       throw new Error('apostrophes are not allowed in the file name');
     }
     // validate the file

react/containers/PublishThumbnailInput/view.jsx

@@ -78,7 +78,10 @@ class PublishThumbnailInput extends React.Component {
     canvas.height = video.videoHeight;
     canvas.getContext('2d').drawImage(video, 0, 0, canvas.width, canvas.height);
     const dataUrl = canvas.toDataURL();
-    const snapshot = dataURItoBlob(dataUrl);
+    const blob = dataURItoBlob(dataUrl);
+    const snapshot = new File([blob], `thumbnail.png`, {
+      type: 'image/png',
+    });
     // set the thumbnail in redux store
     if (snapshot) {
       this.props.onNewThumbnail(snapshot);

react/reducers/publish.js

@@ -20,13 +20,13 @@ const initialState = {
   claim   : '',
   metadata: {
     title      : '',
-    thumbnail  : '',
     description: '',
     license    : '',
     nsfw       : false,
   },
-  thumbnailChannel: publish.thumbnailChannel,
-  thumbnail       : null,
+  thumbnailChannel  : publish.thumbnailChannel,
+  thumbnailChannelId: publish.thumbnailChannelId,
+  thumbnail         : null,
 };
 
 export default function (state = initialState, action) {

react/sagas/publish.js

@@ -4,15 +4,17 @@ import * as publishStates from 'constants/publish_claim_states';
 import { updateError, updatePublishStatus, clearFile } from 'actions/publish';
 import { selectPublishState } from 'selectors/publish';
 import { selectChannelState } from 'selectors/channel';
+import { selectSiteState } from 'selectors/site';
 import { validateChannelSelection, validatePublishParams } from 'utils/validate';
-import { createPublishMetadata, createPublishFormData } from 'utils/publish';
+import { createPublishMetadata, createPublishFormData, createThumbnailUrl } from 'utils/publish';
 import { makePublishRequestChannel } from 'channels/publish';
 
 function * publishFile (action) {
   console.log('publishing file');
   const { history } = action.data;
-  const { publishInChannel, selectedChannel, file, claim, metadata, error: { url: urlError } } = yield select(selectPublishState);
+  const { publishInChannel, selectedChannel, file, claim, metadata, thumbnailChannel, thumbnailChannelId, thumbnail, error: { url: urlError } } = yield select(selectPublishState);
   const { loggedInChannel } = yield select(selectChannelState);
+  const { host } = yield select(selectSiteState);
   // validate the channel selection
   try {
     validateChannelSelection(publishInChannel, selectedChannel, loggedInChannel);
@@ -26,19 +28,26 @@ function * publishFile (action) {
     return yield put(updateError('publishSubmit', error.message));
   }
   // create metadata
-  const publishMetadata = createPublishMetadata(claim, file, metadata, publishInChannel, selectedChannel);
-  // create form data
+  let publishMetadata = createPublishMetadata(claim, file, metadata, publishInChannel, selectedChannel);
+  if (thumbnail) {
+    // add thumbnail to publish metadata
+    publishMetadata['thumbnail'] = createThumbnailUrl(thumbnailChannel, thumbnailChannelId,  claim, host);
+  }
+  // create form data for main publish
   const publishFormData = createPublishFormData(file, publishMetadata);
   // make the publish request
-  const channel = yield call(makePublishRequestChannel, publishFormData);
-  while (true) {
-    const {loadStart, progress, load, success, error} = yield take(channel);
+  const publishChannel = yield call(makePublishRequestChannel, publishFormData);
+  let publishInProgress = true;
+  while (publishInProgress) {
+    const {loadStart, progress, load, success, error} = yield take(publishChannel);
     if (error) {
-      return yield put(updatePublishStatus(publishStates.FAILED, error.message));
+      yield put(updatePublishStatus(publishStates.FAILED, error.message));
+      publishInProgress = false;
     }
     if (success) {
       yield put(clearFile());
-      return history.push(`/${success.data.claimId}/${success.data.name}`);
+      history.push(`/${success.data.claimId}/${success.data.name}`);
+      publishInProgress = false;
     }
     if (loadStart) {
       yield put(updatePublishStatus(publishStates.LOAD_START, null));
@@ -50,6 +59,41 @@ function * publishFile (action) {
       yield put(updatePublishStatus(publishStates.PUBLISHING, null));
     }
   }
+  // publish thumbnail
+  if (thumbnail) {
+    // create form data for thumbnail publish
+    const thumbnailMetadata = {
+      name        : `${claim}-thumb`,
+      title       : `${claim} thumbnail`,
+      description : `a thumbnail for ${claim}`,
+      license     : publishMetadata.license,
+      nsfw        : publishMetadata.nsfw,
+      type        : 'image/png',
+      channel_name: thumbnailChannel,
+      channel_id  : thumbnailChannelId,
+    };
+    const thumbnailFormData = createPublishFormData(thumbnail, thumbnailMetadata);
+    // make the publish reqeust
+    const thumbnailPublishChannel = yield call(makePublishRequestChannel, thumbnailFormData);
+    while (true) {
+      const {loadStart, progress, load, success, error} = yield take(thumbnailPublishChannel);
+      if (error) {
+        return console.log('thumbnail error:', error.message);
+      }
+      if (success) {
+        return console.log('thumbnail success:', success.data);
+      }
+      if (loadStart) {
+        console.log('thumbnail load started.');
+      }
+      if (progress) {
+        console.log('thumbnail progress:', `${progress}%`);
+      }
+      if (load) {
+        console.log('thumbnail load completed.');
+      }
+    }
+  }
 };
 
 export function * watchPublishStart () {

react/selectors/site.js

@@ -0,0 +1,3 @@
+export const selectSiteState = (state) => {
+  return state.site;
+};

react/utils/publish.js

@@ -1,8 +1,7 @@
-export const createPublishMetadata = (claim, { type }, { title, thumbnail, description, license, nsfw }, publishInChannel, selectedChannel) => {
+export const createPublishMetadata = (claim, { type }, { title, description, license, nsfw }, publishInChannel, selectedChannel) => {
   let metadata = {
     name: claim,
     title,
-    thumbnail,
     description,
     license,
     nsfw,
@@ -26,3 +25,7 @@ export const createPublishFormData = (file, metadata) => {
   }
   return fd;
 };
+
+export const createThumbnailUrl = (channel, channelId, claim, host) => {
+  return `${host}/${channel}:${channelId}/${claim}-thumb.png`;
+};