lbry-desktop/ui/component/publishStreamReleaseDate/view.jsx

// @flow
import React, { useEffect } from 'react';
import { FormField } from 'component/common/form';
import DateTimePicker from 'react-datetime-picker';
import moment from 'moment';

function linuxTimestampToDate(linuxTimestamp: number) {
  return new Date(linuxTimestamp * 1000);
}

function dateToLinuxTimestamp(date: Date) {
  return Number(Math.round(date.getTime() / 1000));
}

type Props = {
  isScheduled: boolean,
  releaseTime: ?number,
  updatePublishForm: ({}) => void,
};
const PublishStreamReleaseDate = (props: Props) => {
  const { isScheduled, releaseTime, updatePublishForm } = props;

  const [date, setDate] = React.useState(releaseTime ? linuxTimestampToDate(releaseTime) : 'DEFAULT');
  const [publishLater, setPublishLater] = React.useState(isScheduled);

  const handleToggle = () => {
    const shouldPublishLater = !publishLater;
    setPublishLater(shouldPublishLater);
    onDateTimePickerChanged(
      shouldPublishLater ? moment().add('1', 'hour').add('30', 'minutes').startOf('hour').toDate() : 'DEFAULT'
    );
  };

  const onDateTimePickerChanged = (value) => {
    if (value === 'DEFAULT') {
      setDate(undefined);
      updatePublishForm({ releaseTimeEdited: undefined, releaseAnytime: true });
    } else {
      setDate(value);
      updatePublishForm({ releaseTimeEdited: dateToLinuxTimestamp(value), releaseAnytime: false });
    }
  };

  useEffect(() => {
    if (!isScheduled) updatePublishForm({ releaseTimeEdited: undefined, releaseAnytime: true });
    return () => updatePublishForm({ releaseTimeEdited: undefined, releaseAnytime: false });
  }, []);

  const helpText = !publishLater
    ? __(
        'Confirmation process takes a few minutes, but then you can go live anytime. The stream is not shown anywhere until you are broadcasting.'
      )
    : __(
        'Your scheduled streams will appear on your channel page and for your followers. Chat will not be active until 5 minutes before the start time.'
      );

  return (
    <div className="">
      <label htmlFor="date-picker-input">{__('When do you want to go live?')}</label>

      <div className={'w-full flex flex-col mt-s md:mt-0 md:h-12 md:items-center md:flex-row'}>
        <FormField
          type="radio"
          name="anytime"
          disabled={false}
          onChange={handleToggle}
          checked={!publishLater}
          label={__('Anytime')}
        />

        <div className={'md:ml-m mt-s md:mt-0'}>
          <FormField
            type="radio"
            name="scheduled_time"
            disabled={false}
            onChange={handleToggle}
            checked={publishLater}
            label={__('Scheduled Time')}
          />
        </div>
        {publishLater && (
          <div className="form-field-date-picker mb-0 controls md:ml-m">
            <DateTimePicker
              className="date-picker-input w-full md:w-auto mt-s md:mt-0"
              calendarClassName="form-field-calendar"
              onChange={onDateTimePickerChanged}
              value={date}
              format="y-MM-dd h:mm a"
              disableClock
              clearIcon={null}
              minDate={moment().add('30', 'minutes').toDate()}
            />
          </div>
        )}
      </div>

      <p className={'form-field__hint mt-m'}>{helpText}</p>
    </div>
  );
};

export default PublishStreamReleaseDate;