- <div className="episode-start me-3 fs-4 text-end">
- {t('schedule.startTime', { date: new Date(episode.start) })}
- </div>
- <div className="flex-fill">
- <div className="d-flex align-items-start justify-content-between">
- <div>
- {episode.title ?
- <div className="episode-title fs-4">
- {episode.title}
- </div>
- : null}
- {episode.event ?
- <div className="episode-event">
- {episode.event.title}
- </div>
- : null}
- </div>
- <div className="episode-channel-links text-end">
- {hasChannels ?
- <Channels
- channels={episode.channels}
- episode={episode}
- onEditRestream={onEditRestream}
- />
- : null}
- {!hasChannels && hasPlayers ?
- <MultiLink players={episode.players} />
- : null}
- {onAddRestream && canRestreamEpisode(user, episode) ?
- <div>
- <Button
- onClick={() => onAddRestream(episode)}
- title={t('episodes.addRestream')}
- variant="outline-secondary"
- >
- <Icon.ADD title="" />
- </Button>
- </div>
- : null}
- </div>
+ <div className="d-flex align-items-stretch">
+ <div className="episode-start me-3 fs-5 fs-md-4 text-end">
+ {t('schedule.startTime', { date: new Date(episode.start) })}
+ </div>
+ <div className="episode-titlebar">
+ {episode.title || episode.event ?
+ <div className="episode-title fs-5 fs-md-4">
+ {episode.title || episode.event.title}
+ </div>
+ : null}
+ {episode.comment ?
+ <div className="episode-comment">
+ {episode.comment}
+ </div>
+ : null}