jangbl’s gists

jangbl / VideoInfoBox.scss

Created December 15, 2018 14:04

Youtube in React: kicking out hard-coded magic numbers

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

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

jangbl / VideoMetadata.js

Last active December 15, 2018 10:28

Youtube in React: wiring video metadata component up with Watch

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

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

jangbl / VideoInfoBox.js

Last active December 11, 2018 06:56

Youtube in React: video info box markup that applies dynamic styling

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

jangbl / VideoInfoBox.js

Created December 11, 2018 06:52

Youtube in React: applying different SCSS classes depending on the component's local state

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

	/* ... */

jangbl / VideoInfoBox.scss

Last active December 11, 2018 07:15

Youtube in React: CSS classes for dynamic styling of the video info box

	.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;

jangbl / VideoInfoBox.js

Created December 10, 2018 07:21

Youtube in React: adding local state to video info Box

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

	render() {
	/* ... */

jangbl / VideoInfoBox.js

Last active December 11, 2018 06:42

Youtube in React: content of VideoInfo box render function

	<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>

jangbl / VideoInfoBox.scss

Last active December 10, 2018 06:30

Youtube in React: refining video info box

jangbl / Video.js

Created December 7, 2018 07:10

Youtube in React: URL for auto playing Youtube video

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

jangbl / VideoPreview.scss

Created December 3, 2018 18:58

Youtube in React: VideoPreview layout using CSS-Grid

Jan Goebel jangbl