productioncoder

@import '../../styles/shared.scss';

.video-info-box {
  /* ... */
  grid: auto auto / calc(#{$avatar-diameter} + #{$avatar-margin}) auto max-content;
  /* ... */
}

productioncoder

import React from 'react';
import {Button, Divider, Icon} from "semantic-ui-react";
import './VideoMetadata.scss';

export function VideoMetadata(props) {
  /* Todo */
  return (<div/>);
}

productioncoder

render() {
  /* ... */
  return (
    <div>
      <div className='video-info-box'>
        {/* ... */}
        <div className="video-description">
          <div className={descriptionTextClass}>
            {descriptionParagraphs}
          </div>

productioncoder

/* ... */
render() {
    let descriptionTextClass = 'collapsed';
    let buttonTitle = 'Show More';
    if (!this.state.collapsed) {
      descriptionTextClass = 'expanded';
      buttonTitle = 'Show Less';
    }
  
  /* ... */

productioncoder

.video-description {
    /* Leave the old content just as it was and add the code below */

    p {
      line-height: 1.4rem;
      margin-bottom: 0;
    }

    .collapsed {
      max-height: 2.8rem;

productioncoder

export class VideoInfoBox extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      collapsed: true,
    };
  }

  render() {
    /* ... */

productioncoder

<div className='video-info-box'>
  <Image className='channel-image' src='http://via.placeholder.com/48x48' circular/>
  <div className="video-info">
    <div className='channel-name'>Channel Name</div>
    <div className='video-publication-date'>Thu 24, 2017</div>
  </div>
  <Button color='youtube'>91.5K Subscribe</Button>
  <div className="video-description">
    <p>Paragraph 1</p>
    <p>Paragraph 2</p>

productioncoder

.video-info-box {
  /* ... */
  .channel-image {
    grid-row: 1 / 2;
    grid-column: 1 / 2;
  }

  .video-info {
    grid-row: 1 / 2;
    grid-column: 2 / 3;

productioncoder

const embedUrl = `${BASE_EMBED_URL}${props.id}?autoplay=1`;

productioncoder

@import '../../styles/shared.scss';

.video-preview {
  display: grid;
  grid: 118px auto / 210px;
}

.image-container {
  position: relative;
  grid-row: 1 / 2;