Skip to content
GitLab
Menu
Projects
Groups
Snippets
Help
Projects
Groups
Snippets
Help
Help
Support
Community forum
Keyboard shortcuts
?
Submit feedback
Contribute to GitLab
Sign in
Toggle navigation
Menu
Open sidebar
pounced-on.me
mastodon
Commits
6ebd74f4
Unverified
Commit
6ebd74f4
authored
5 years ago
by
Eugen Rochko
Committed by
GitHub
5 years ago
Browse files
Options
Download
Email Patches
Plain Diff
Fix media editing modal changing dimensions when image loads (#12131)
parent
915f3712
Changes
4
Hide whitespace changes
Inline
Side-by-side
Showing
4 changed files
app/javascript/mastodon/components/gifv.js
+75
-0
app/javascript/mastodon/components/gifv.js
app/javascript/mastodon/features/ui/components/focal_point_modal.js
+34
-2
...ript/mastodon/features/ui/components/focal_point_modal.js
app/javascript/mastodon/features/ui/components/media_modal.js
+2
-4
...javascript/mastodon/features/ui/components/media_modal.js
app/javascript/styles/mastodon/components.scss
+2
-1
app/javascript/styles/mastodon/components.scss
with
113 additions
and
7 deletions
+113
-7
app/javascript/mastodon/components/
extended_video_player
.js
→
app/javascript/mastodon/components/
gifv
.js
+
75
-
0
View file @
6ebd74f4
import
React
from
'
react
'
;
import
PropTypes
from
'
prop-types
'
;
export
default
class
ExtendedVideoPlayer
extends
React
.
PureComponent
{
export
default
class
GIFV
extends
React
.
PureComponent
{
static
propTypes
=
{
src
:
PropTypes
.
string
.
isRequired
,
alt
:
PropTypes
.
string
,
width
:
PropTypes
.
number
,
height
:
PropTypes
.
number
,
time
:
PropTypes
.
number
,
controls
:
PropTypes
.
bool
.
isRequired
,
muted
:
PropTypes
.
bool
.
isRequired
,
onClick
:
PropTypes
.
func
,
};
handleLoadedData
=
()
=>
{
if
(
this
.
props
.
time
)
{
this
.
video
.
currentTime
=
this
.
props
.
time
;
}
}
componentDidMount
()
{
this
.
video
.
addEventListener
(
'
loadeddata
'
,
this
.
handleLoadedData
);
}
state
=
{
loading
:
true
,
};
componentWillUnmount
()
{
this
.
video
.
removeEventListener
(
'
loadeddata
'
,
this
.
handleLoadedData
);
handleLoadedData
=
()
=>
{
this
.
setState
({
loading
:
false
}
);
}
setRef
=
(
c
)
=>
{
this
.
video
=
c
;
componentWillReceiveProps
(
nextProps
)
{
if
(
nextProps
.
src
!==
this
.
props
.
src
)
{
this
.
setState
({
loading
:
true
});
}
}
handleClick
=
e
=>
{
e
.
stopPropagation
();
const
handler
=
this
.
props
.
onClick
;
if
(
handler
)
handler
();
const
{
onClick
}
=
this
.
props
;
if
(
onClick
)
{
e
.
stopPropagation
();
onClick
();
}
}
render
()
{
const
{
src
,
muted
,
controls
,
alt
}
=
this
.
props
;
const
{
src
,
width
,
height
,
alt
}
=
this
.
props
;
const
{
loading
}
=
this
.
state
;
return
(
<
div
className
=
'
extended-video-player
'
>
<
div
className
=
'
gifv
'
style
=
{{
position
:
'
relative
'
}}
>
{
loading
&&
(
<
canvas
width
=
{
width
}
height
=
{
height
}
role
=
'
button
'
tabIndex
=
'
0
'
aria
-
label
=
{
alt
}
title
=
{
alt
}
onClick
=
{
this
.
handleClick
}
/
>
)}
<
video
ref
=
{
this
.
setRef
}
src
=
{
src
}
autoPlay
width
=
{
width
}
height
=
{
height
}
role
=
'
button
'
tabIndex
=
'
0
'
aria
-
label
=
{
alt
}
title
=
{
alt
}
muted
=
{
muted
}
controls
=
{
controls
}
loop
=
{
!
controls
}
muted
loop
autoPlay
playsInline
onClick
=
{
this
.
handleClick
}
onLoadedData
=
{
this
.
handleLoadedData
}
style
=
{{
position
:
loading
?
'
absolute
'
:
'
static
'
,
top
:
0
,
left
:
0
}}
/
>
<
/div
>
);
...
...
This diff is collapsed.
Click to expand it.
app/javascript/mastodon/features/ui/components/focal_point_modal.js
+
34
-
2
View file @
6ebd74f4
...
...
@@ -16,6 +16,7 @@ import UploadProgress from 'mastodon/features/compose/components/upload_progress
import
CharacterCounter
from
'
mastodon/features/compose/components/character_counter
'
;
import
{
length
}
from
'
stringz
'
;
import
{
Tesseract
as
fetchTesseract
}
from
'
mastodon/features/ui/util/async-components
'
;
import
GIFV
from
'
mastodon/components/gifv
'
;
const
messages
=
defineMessages
({
close
:
{
id
:
'
lightbox.close
'
,
defaultMessage
:
'
Close
'
},
...
...
@@ -41,6 +42,36 @@ const removeExtraLineBreaks = str => str.replace(/\n\n/g, '******')
const
assetHost
=
process
.
env
.
CDN_HOST
||
''
;
class
ImageLoader
extends
React
.
PureComponent
{
static
propTypes
=
{
src
:
PropTypes
.
string
.
isRequired
,
width
:
PropTypes
.
number
,
height
:
PropTypes
.
number
,
};
state
=
{
loading
:
true
,
};
componentDidMount
()
{
const
image
=
new
Image
();
image
.
addEventListener
(
'
load
'
,
()
=>
this
.
setState
({
loading
:
false
}));
image
.
src
=
this
.
props
.
src
;
}
render
()
{
const
{
loading
}
=
this
.
state
;
if
(
loading
)
{
return
<
canvas
width
=
{
this
.
props
.
width
}
height
=
{
this
.
props
.
height
}
/>
;
}
else
{
return
<
img
{...
this
.
props
}
alt
=
''
/>
;
}
}
}
export
default
@
connect
(
mapStateToProps
,
mapDispatchToProps
)
@
injectIntl
class
FocalPointModal
extends
ImmutablePureComponent
{
...
...
@@ -60,6 +91,7 @@ class FocalPointModal extends ImmutablePureComponent {
description
:
''
,
dirty
:
false
,
progress
:
0
,
loading
:
true
,
};
componentWillMount
()
{
...
...
@@ -242,8 +274,8 @@ class FocalPointModal extends ImmutablePureComponent {
<
div
className
=
'
focal-point-modal__content
'
>
{
focals
&&
(
<
div
className
=
{
classNames
(
'
focal-point
'
,
{
dragging
})}
ref
=
{
this
.
setRef
}
onMouseDown
=
{
this
.
handleMouseDown
}
onTouchStart
=
{
this
.
handleTouchStart
}
>
{
media
.
get
(
'
type
'
)
===
'
image
'
&&
<
img
src
=
{
media
.
get
(
'
url
'
)}
width
=
{
width
}
height
=
{
height
}
alt
=
''
/>
}
{
media
.
get
(
'
type
'
)
===
'
gifv
'
&&
<
video
src
=
{
media
.
get
(
'
url
'
)}
width
=
{
width
}
height
=
{
height
}
loop
muted
autoPlay
/>
}
{
media
.
get
(
'
type
'
)
===
'
image
'
&&
<
ImageLoader
src
=
{
media
.
get
(
'
url
'
)}
width
=
{
width
}
height
=
{
height
}
alt
=
''
/>
}
{
media
.
get
(
'
type
'
)
===
'
gifv
'
&&
<
GIFV
src
=
{
media
.
get
(
'
url
'
)}
width
=
{
width
}
height
=
{
height
}
/>
}
<
div
className
=
'
focal-point__preview
'
>
<
strong
><
FormattedMessage
id
=
'
upload_modal.preview_label
'
defaultMessage
=
'
Preview ({ratio})
'
values
=
{{
ratio
:
'
16:9
'
}}
/></
strong
>
...
...
This diff is collapsed.
Click to expand it.
app/javascript/mastodon/features/ui/components/media_modal.js
+
2
-
4
View file @
6ebd74f4
...
...
@@ -3,13 +3,13 @@ import ReactSwipeableViews from 'react-swipeable-views';
import
ImmutablePropTypes
from
'
react-immutable-proptypes
'
;
import
PropTypes
from
'
prop-types
'
;
import
Video
from
'
mastodon/features/video
'
;
import
ExtendedVideoPlayer
from
'
mastodon/components/extended_video_player
'
;
import
classNames
from
'
classnames
'
;
import
{
defineMessages
,
injectIntl
,
FormattedMessage
}
from
'
react-intl
'
;
import
IconButton
from
'
mastodon/components/icon_button
'
;
import
ImmutablePureComponent
from
'
react-immutable-pure-component
'
;
import
ImageLoader
from
'
./image_loader
'
;
import
Icon
from
'
mastodon/components/icon
'
;
import
GIFV
from
'
mastodon/components/gifv
'
;
const
messages
=
defineMessages
({
close
:
{
id
:
'
lightbox.close
'
,
defaultMessage
:
'
Close
'
},
...
...
@@ -169,10 +169,8 @@ class MediaModal extends ImmutablePureComponent {
);
}
else
if
(
image
.
get
(
'
type
'
)
===
'
gifv
'
)
{
return
(
<
ExtendedVideoPlayer
<
GIFV
src
=
{
image
.
get
(
'
url
'
)}
muted
controls
=
{
false
}
width
=
{
width
}
height
=
{
height
}
key
=
{
image
.
get
(
'
preview_url
'
)}
...
...
This diff is collapsed.
Click to expand it.
app/javascript/styles/mastodon/components.scss
+
2
-
1
View file @
6ebd74f4
...
...
@@ -6092,7 +6092,8 @@ noscript {
background
:
$base-shadow-color
;
img
,
video
{
video
,
canvas
{
display
:
block
;
max-height
:
80vh
;
width
:
100%
;
...
...
This diff is collapsed.
Click to expand it.
Write
Preview
Supports
Markdown
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
Menu
Projects
Groups
Snippets
Help