Develop

app/components/Navigation/Navigation.js

@@ -75,7 +75,7 @@ function NavItem(props: NavItemProps) {
     return <Link href={props.link} className={navItemClass}>{props.children}</Link>
 }
 
-const MENU_WIDTH = 1395;
+const MENU_WIDTH = 1420;
 
 class Navigation extends React.Component<NavigationProps, NavigationState> {
 

app/pages/Partners/Partners.js

@@ -226,7 +226,7 @@ function Partners() {
                     <div className='partners-table-section'>
                         <table className='table'>
                             <tbody>
-                                <tr className='table__row'>
+                                <tr className='table__row sold-out-text-table'>
                                     <td className='partners-desc-column'>Tickets for employees (Late-Bird)</td>
                                     <td className='partners-price-column'>NOK 6.190,-</td>
                                 </tr>

app/pages/Program/Program.js

@@ -11,6 +11,7 @@ import Page from '../../components/Page/Page';
 import { Grid, Row, Col } from 'react-flexbox-grid';
 import { Circle, CheckCircle } from 'react-feather';
 import * as React from 'react';
+import { PlayCircle } from 'react-feather';
 import Button from '../../components/Button/Button.js';
 import { Container, Heading, LargeHeading, SmallHeading } from '../../components/page';
 import { Block, Header, Content, P } from '../../components/block';
@@ -94,6 +95,7 @@ function SessionItem(props: SessionItemProps) {
             <Row>
                 <Col xs={12} sm={10} md={11} lg={11}>
                     <Row className="program-simple-session-title">
+                        {props.session.video ? <PlayCircle className="program-video-icon" size={32} /> : null}
                         <Link href={`/program/${props.session.sessionId}`}>{props.session.title}</Link>
                     </Row>
                     <Row>

app/pages/Program/Program.less

@@ -175,4 +175,25 @@
 
 .text-wrap {
     white-space: pre-wrap;
+}
+
+.program-details-video {
+    width: 100%;
+    height: 600px;
+    @media only screen and (max-width: @screen-md) {
+        height: 450px;
+    }
+    @media only screen and (max-width: @screen-sm) {
+        height: 350px;
+    }
+    @media only screen and (max-width: @screen-xs) {
+        height: 300px;
+    }
+    @media only screen and (max-width: @screen-xxs) {
+        height: 240px;
+    }
+}
+
+.program-video-icon {
+    margin-right: 0.7rem;
 }

app/pages/Program/ProgramDetails.js

@@ -69,34 +69,39 @@ class ProgramDetails extends React.Component<ProgramDetailsProps, ProgramDetails
     }
 
     render() {
+        console.log('state', this.state.session);
         const title = this.state.session.title;
         const speakerString = this.generateSpeakerString(this.state.session.speakers);
         const abstract = this.state.session.abstract;
         const speakers = this.state.session.speakers;
         const audience = this.state.session.intendedAudience;
         const room = this.state.session.room;
         const language = this.state.session.language;
+        const video = this.state.session.video;
         const format = this.transformFormat(this.state.session.format);
         if (this.state.session.title === undefined) {
             return (
                 <Page name='programDetails'>
                     <PageHeader subHeader=''>Program details</PageHeader>
-                    <Section class="program-loader" dark><Loader /></Section>
+                    <Section className="program-loader" dark><Loader /></Section>
                 </Page>
             )
         } else {
             return (
                 <Page name='programDetails'>
                     <PageHeader subHeader={speakerString}>{title}</PageHeader>
+                    {video ? <Section alternate pixel>
+                        <iframe className='program-details-video' src={`https://player.vimeo.com/video/${video}`} frameBorder="0" allowFullScreen></iframe>
+                    </Section> : null}
                     <Section>
                         <LeftBlock header="abstract">
-                            <p class="text-wrap">
+                            <p className="text-wrap">
                                 {abstract}
                             </p>
                         </LeftBlock>
                         {speakers ? speakers.map(speaker => {
                             return <LeftBlock key={speaker.name} header={speaker.name}>
-                                        <p class="text-wrap">
+                                        <p className="text-wrap">
                                             {speaker.bio}
                                         </p>
                                     </LeftBlock>
@@ -107,17 +112,17 @@ class ProgramDetails extends React.Component<ProgramDetailsProps, ProgramDetails
                             </p>
                         </LeftBlock>
                         <LeftBlock header="Location">
-                            <p class="too-small">
+                            <p className="too-small">
                                 {room}
                             </p>
                         </LeftBlock>
                         <LeftBlock header="Language">
-                            <p class="too-small">
+                            <p className="too-small">
                                 {language === 'en' ? 'English' : 'Norwegian'}
                             </p>
                         </LeftBlock>
                         <LeftBlock header="Format">
-                            <p class="too-small">
+                            <p className="too-small">
                                 {format}
                             </p>
                         </LeftBlock>