Skip to content
GitLab
Menu
Projects
Groups
Snippets
Loading...
Help
Help
Support
Community forum
Keyboard shortcuts
?
Submit feedback
Contribute to GitLab
Sign in / Register
Toggle navigation
Menu
Open sidebar
hive
condenser
Commits
8618a755
Commit
8618a755
authored
Oct 01, 2021
by
Dan Notestein
Browse files
Merge branch 'fix-youtube-css' into 'develop'
Fix Youtube CSS See merge request
!290
parents
278eaa88
1afab8b8
Changes
1
Hide whitespace changes
Inline
Side-by-side
src/app/components/elements/YoutubePreview.jsx
View file @
8618a755
...
...
@@ -5,23 +5,23 @@ import PropTypes from 'prop-types';
const
{
string
,
number
}
=
PropTypes
;
/** Lots of iframes in a post can be very slow. This component only inserts the iframe when it is actually needed. */
export
default
class
YoutubePreview
extends
React
.
Component
{
static
propTypes
=
{
youTubeId
:
string
.
isRequired
,
width
:
number
,
height
:
number
,
startTime
:
number
,
dataParams
:
string
,
};
const
propTypes
=
{
youTubeId
:
string
.
isRequired
,
width
:
number
,
height
:
number
,
startTime
:
number
,
dataParams
:
string
,
};
static
defaultProps
=
{
width
:
640
,
height
:
360
,
startTime
:
0
,
dataParams
:
'
enablejsapi=0&rel=0&origin=https://hive.blog
'
,
};
const
defaultProps
=
{
width
:
640
,
height
:
360
,
startTime
:
0
,
dataParams
:
'
enablejsapi=0&rel=0&origin=https://hive.blog
'
,
};
/** Lots of iframes in a post can be very slow. This component only inserts the iframe when it is actually needed. */
export
default
class
YoutubePreview
extends
React
.
Component
{
constructor
()
{
super
();
this
.
state
=
{};
...
...
@@ -35,8 +35,8 @@ export default class YoutubePreview extends React.Component {
render
()
{
const
{
youTubeId
,
width
,
height
,
startTime
,
dataParams
}
=
this
.
props
;
youTubeId
,
width
,
height
,
startTime
,
dataParams
}
=
this
.
props
;
const
{
play
}
=
this
.
state
;
if
(
!
play
)
{
...
...
@@ -44,8 +44,8 @@ export default class YoutubePreview extends React.Component {
// hqdefault.jpg (high quality version, 480px × 360px
// sddefault.jpg (standard definition version, 640px × 480px)
const
thumbnail
=
width
<=
320
?
'
mqdefault.jpg
'
:
width
<=
480
?
'
mqdefault.jpg
'
:
width
<=
480
?
'
hqdefault.jpg
'
:
'
0.jpg
'
;
const
previewLink
=
`https://img.youtube.com/vi/
${
youTubeId
}
/
${
thumbnail
}
`
;
...
...
@@ -67,8 +67,17 @@ export default class YoutubePreview extends React.Component {
}
const
autoPlaySrc
=
`https://www.youtube.com/embed/
${
youTubeId
}
?autoplay=1&autohide=1&
${
dataParams
}
&start=
${
startTime
}
`
;
const
aspectRatioPercent
=
(
height
/
width
)
*
100
;
return
(
<
div
className
=
"videoWrapper"
>
<
div
className
=
"videoWrapper"
style
=
{
{
position
:
'
relative
'
,
width
:
'
100%
'
,
height
:
0
,
paddingBottom
:
`
${
aspectRatioPercent
}
%`
,
}
}
>
<
iframe
width
=
{
width
}
height
=
{
height
}
...
...
@@ -81,3 +90,6 @@ export default class YoutubePreview extends React.Component {
);
}
}
YoutubePreview
.
propTypes
=
propTypes
;
YoutubePreview
.
defaultProps
=
defaultProps
;
Write
Preview
Markdown
is supported
0%
Try again
or
attach a new file
.
Attach a file
Cancel
You are about to add
0
people
to the discussion. Proceed with caution.
Finish editing this message first!
Cancel
Please
register
or
sign in
to comment