mirrors/mostlymatter
1
0
Форкнуть 0
Код Задачи Запросы на слияние Действия Пакеты Проекты Релизы Вики Активность

Add stop button to stop animated gifs

Просмотр исходного кода
Этот коммит содержится в:
Florian Orben
2015-10-19 22:30:00 +02:00
родитель 420c754ca3
Коммит cd5df514c7
5 изменённых файлов: 123 добавлений и 44 удалений
Скачать Patch файл Скачать Diff файл Показать все файлы Свернуть все файлы

101
web/react/components/file_attachment.jsx
Просмотреть файл

@@ -11,6 +11,8 @@ export default class FileAttachment extends React.Component {
this.loadFiles = this.loadFiles.bind(this); this.loadFiles = this.loadFiles.bind(this);
this.playGif = this.playGif.bind(this); this.playGif = this.playGif.bind(this);
this.stopGif = this.stopGif.bind(this);
this.addBackgroundImage = this.addBackgroundImage.bind(this);
this.canSetState = false; this.canSetState = false;
this.state = {fileSize: -1, mime: '', playing: false, loading: false}; this.state = {fileSize: -1, mime: '', playing: false, loading: false};
@@ -29,15 +31,9 @@ export default class FileAttachment extends React.Component {
var filename = this.props.filename; var filename = this.props.filename;
if (filename) { if (filename) {
var fileInfo = utils.splitFileLocation(filename); var fileInfo = this.getFileInfoFromName(filename);
var type = utils.getFileType(fileInfo.ext); var type = utils.getFileType(fileInfo.ext);
// This is a temporary patch to fix issue with old files using absolute paths
if (fileInfo.path.indexOf('/api/v1/files/get') !== -1) {
fileInfo.path = fileInfo.path.split('/api/v1/files/get')[1];
}
fileInfo.path = utils.getWindowLocationOrigin() + '/api/v1/files/get' + fileInfo.path;
if (type === 'image') { if (type === 'image') {
var self = this; // Need this reference since we use the given "this" var self = this; // Need this reference since we use the given "this"
$('<img/>').attr('src', fileInfo.path + '_thumb.jpg').load(function loadWrapper(path, name) { $('<img/>').attr('src', fileInfo.path + '_thumb.jpg').load(function loadWrapper(path, name) {
@@ -59,11 +55,7 @@ export default class FileAttachment extends React.Component {
$(imgDiv).addClass('normal'); $(imgDiv).addClass('normal');
} }
var re1 = new RegExp(' ', 'g'); self.addBackgroundImage(name, path);
var re2 = new RegExp('\\(', 'g');
var re3 = new RegExp('\\)', 'g');
var url = path.replace(re1, '%20').replace(re2, '%28').replace(re3, '%29');
$(imgDiv).css('background-image', 'url(' + url + '_thumb.jpg)');
} }
}; };
}(fileInfo.path, filename)); }(fileInfo.path, filename));
@@ -111,6 +103,39 @@ export default class FileAttachment extends React.Component {
e.stopPropagation(); e.stopPropagation();
} }
stopGif(e, filename) {
this.setState({playing: false});
this.addBackgroundImage(filename);
e.stopPropagation();
}
getFileInfoFromName(name) {
var fileInfo = utils.splitFileLocation(name);
// This is a temporary patch to fix issue with old files using absolute paths
if (fileInfo.path.indexOf('/api/v1/files/get') !== -1) {
fileInfo.path = fileInfo.path.split('/api/v1/files/get')[1];
}
fileInfo.path = utils.getWindowLocationOrigin() + '/api/v1/files/get' + fileInfo.path;
return fileInfo;
}
addBackgroundImage(name, path) {
var fileUrl = path;
if (name in this.refs) {
if (!path) {
fileUrl = this.getFileInfoFromName(name).path;
}
var imgDiv = ReactDOM.findDOMNode(this.refs[name]);
var re1 = new RegExp(' ', 'g');
var re2 = new RegExp('\\(', 'g');
var re3 = new RegExp('\\)', 'g');
var url = fileUrl.replace(re1, '%20').replace(re2, '%28').replace(re3, '%29');
$(imgDiv).css('background-image', 'url(' + url + '_thumb.jpg)');
}
}
removeBackgroundImage(name) { removeBackgroundImage(name) {
if (name in this.refs) { if (name in this.refs) {
$(ReactDOM.findDOMNode(this.refs[name])).css('background-image', 'initial'); $(ReactDOM.findDOMNode(this.refs[name])).css('background-image', 'initial');
@@ -123,13 +148,13 @@ export default class FileAttachment extends React.Component {
var fileUrl = utils.getFileUrl(filename); var fileUrl = utils.getFileUrl(filename);
var type = utils.getFileType(fileInfo.ext); var type = utils.getFileType(fileInfo.ext);
var playButton = ''; var playbackControls = '';
var loadedFile = ''; var loadedFile = '';
var loadingIndicator = ''; var loadingIndicator = '';
if (this.state.mime === 'image/gif') { if (this.state.mime === 'image/gif') {
playButton = ( playbackControls = (
<div <div
className='file-play-button' className='file-playback-controls play'
onClick={(e) => this.playGif(e, filename)} onClick={(e) => this.playGif(e, filename)}
> >
{"►"} {"►"}
@@ -143,7 +168,14 @@ export default class FileAttachment extends React.Component {
src={fileUrl} src={fileUrl}
/> />
); );
playButton = ''; playbackControls = (
<div
className='file-playback-controls stop'
onClick={(e) => this.stopGif(e, filename)}
>
{"◼"}
</div>
);
} }
if (this.state.loading) { if (this.state.loading) {
loadingIndicator = ( loadingIndicator = (
@@ -152,22 +184,35 @@ export default class FileAttachment extends React.Component {
src='/static/images/load.gif' src='/static/images/load.gif'
/> />
); );
playButton = ''; playbackControls = '';
} }
var thumbnail; var thumbnail;
if (type === 'image') { if (type === 'image') {
thumbnail = ( if (this.state.playing) {
<div thumbnail = (
ref={filename} <div
className='post__load' ref={filename}
style={{backgroundImage: 'url(/static/images/load.gif)'}} className='post__load'
> style={{backgroundImage: 'url(/static/images/load.gif)'}}
{loadingIndicator} >
{playButton} {playbackControls}
{loadedFile} {loadedFile}
</div> </div>
); );
} else {
thumbnail = (
<div
ref={filename}
className='post__load'
style={{backgroundImage: 'url(/static/images/load.gif)'}}
>
{loadingIndicator}
{playbackControls}
{loadedFile}
</div>
);
}
} else { } else {
thumbnail = <div className={'file-icon ' + utils.getIconClassName(type)}/>; thumbnail = <div className={'file-icon ' + utils.getIconClassName(type)}/>;
} }

45
web/react/components/view_image.jsx
Просмотреть файл

@@ -147,6 +147,14 @@ export default class ViewImageModal extends React.Component {
e.stopPropagation(); e.stopPropagation();
e.preventDefault(); e.preventDefault();
} }
stopGif(e, filename) {
var isPlaying = this.state.isPlaying;
delete isPlaying[filename];
this.setState({isPlaying});
e.stopPropagation();
e.preventDefault();
}
componentDidMount() { componentDidMount() {
$(window).on('keyup', this.handleKeyPress); $(window).on('keyup', this.handleKeyPress);
@@ -179,7 +187,7 @@ export default class ViewImageModal extends React.Component {
var fileType = Utils.getFileType(fileInfo.ext); var fileType = Utils.getFileType(fileInfo.ext);
if (fileType === 'image') { if (fileType === 'image') {
if (typeof this.state.isPlaying[filename] !== 'undefined') { if (filename in this.state.isPlaying) {
return this.state.isPlaying[filename]; return this.state.isPlaying[filename];
} }
@@ -232,16 +240,27 @@ export default class ViewImageModal extends React.Component {
); );
} }
var playButton = ''; var playbackControls = '';
if (this.state.fileMimes[filename] === 'image/gif' && !(filename in this.state.isLoading) && !(filename in this.state.isPlaying)) { if (this.state.fileMimes[filename] === 'image/gif' && !(filename in this.state.isLoading)) {
playButton = ( if (filename in this.state.isPlaying) {
<div playbackControls = (
className='file-play-button' <div
onClick={(e) => this.playGif(e, filename, fileUrl)} className='file-playback-controls stop'
> onClick={(e) => this.stopGif(e, filename)}
{"►"} >
</div> {"◼"}
); </div>
);
} else {
playbackControls = (
<div
className='file-playback-controls play'
onClick={(e) => this.playGif(e, filename, fileUrl)}
>
{"►"}
</div>
);
}
} }
var loadingIndicator = ''; var loadingIndicator = '';
@@ -252,7 +271,7 @@ export default class ViewImageModal extends React.Component {
src='/static/images/load.gif' src='/static/images/load.gif'
/> />
); );
playButton = ''; playbackControls = '';
} }
// image files just show a preview of the file // image files just show a preview of the file
@@ -262,7 +281,7 @@ export default class ViewImageModal extends React.Component {
target='_blank' target='_blank'
> >
{loadingIndicator} {loadingIndicator}
{playButton} {playbackControls}
<img <img
style={{maxHeight: this.state.imgHeight}} style={{maxHeight: this.state.imgHeight}}
ref='image' ref='image'

2
web/react/utils/utils.jsx
Просмотреть файл

@@ -544,7 +544,7 @@ export function applyTheme(theme) {
if (theme.buttonBg) { if (theme.buttonBg) {
changeCss('.btn.btn-primary', 'background:' + theme.buttonBg, 1); changeCss('.btn.btn-primary', 'background:' + theme.buttonBg, 1);
changeCss('.btn.btn-primary:hover, .btn.btn-primary:active, .btn.btn-primary:focus', 'background:' + changeColor(theme.buttonBg, -0.25), 1); changeCss('.btn.btn-primary:hover, .btn.btn-primary:active, .btn.btn-primary:focus', 'background:' + changeColor(theme.buttonBg, -0.25), 1);
changeCss('.file-play-button', 'color:' + changeColor(theme.buttonBg, -0.25), 1); changeCss('.file-playback-controls', 'color:' + changeColor(theme.buttonBg, -0.25), 1);
} }
if (theme.buttonColor) { if (theme.buttonColor) {

15
web/sass-files/sass/partials/_files.scss
Просмотреть файл

@@ -153,6 +153,9 @@
height: 100px; height: 100px;
max-width: initial; max-width: initial;
} }
&:hover .file-playback-controls.stop {
@include opacity(1);
}
} }
.post-image__thumbnail { .post-image__thumbnail {
float: left; float: left;
@@ -230,11 +233,19 @@
} }
} }
.file-play-button { .file-playback-controls {
position: absolute; position: absolute;
right: 0; right: 5px;
bottom: 0; bottom: 0;
font-size: 22px; font-size: 22px;
cursor: pointer; cursor: pointer;
z-index: 2; z-index: 2;
-webkit-transition: opacity 0.6s;
-moz-transition: opacity 0.6s;
-o-transition: opacity 0.6s;
transition: opacity 0.6s;
&.stop {
@include opacity(0);
}
} }

4
web/sass-files/sass/partials/_modal.scss
Просмотреть файл

@@ -229,6 +229,10 @@
display: table-cell; display: table-cell;
vertical-align: middle; vertical-align: middle;
position: relative; position: relative;
&:hover .file-playback-controls.stop {
@include opacity(1);
}
} }
img { img {
max-width: 100%; max-width: 100%;