forked from mirror/misskey
Display Exif
This commit is contained in:
parent
303ccaa2f7
commit
c88097298f
@ -3,6 +3,7 @@
|
|||||||
*/
|
*/
|
||||||
|
|
||||||
import * as childProcess from 'child_process';
|
import * as childProcess from 'child_process';
|
||||||
|
import * as fs from 'fs';
|
||||||
import * as Path from 'path';
|
import * as Path from 'path';
|
||||||
import * as gulp from 'gulp';
|
import * as gulp from 'gulp';
|
||||||
import * as gutil from 'gulp-util';
|
import * as gutil from 'gulp-util';
|
||||||
@ -180,7 +181,9 @@ gulp.task('build:client:pug', [
|
|||||||
.pipe(pug({
|
.pipe(pug({
|
||||||
locals: {
|
locals: {
|
||||||
themeColor: constants.themeColor,
|
themeColor: constants.themeColor,
|
||||||
facss: fontawesome.dom.css()
|
facss: fontawesome.dom.css(),
|
||||||
|
//hljscss: fs.readFileSync('./node_modules/highlight.js/styles/default.css', 'utf8')
|
||||||
|
hljscss: fs.readFileSync('./src/web/assets/code-highlight.css', 'utf8')
|
||||||
}
|
}
|
||||||
}))
|
}))
|
||||||
.pipe(htmlmin({
|
.pipe(htmlmin({
|
||||||
|
@ -441,6 +441,7 @@ mobile:
|
|||||||
rename: "Rename"
|
rename: "Rename"
|
||||||
move: "Move"
|
move: "Move"
|
||||||
hash: "Hash (md5)"
|
hash: "Hash (md5)"
|
||||||
|
exif: "EXIF"
|
||||||
|
|
||||||
mk-entrance-signin:
|
mk-entrance-signin:
|
||||||
signup: "Sign up"
|
signup: "Sign up"
|
||||||
|
@ -441,6 +441,7 @@ mobile:
|
|||||||
rename: "名前を変更"
|
rename: "名前を変更"
|
||||||
move: "移動"
|
move: "移動"
|
||||||
hash: "ハッシュ (md5)"
|
hash: "ハッシュ (md5)"
|
||||||
|
exif: "EXIF"
|
||||||
|
|
||||||
mk-entrance-signin:
|
mk-entrance-signin:
|
||||||
signup: "新規登録"
|
signup: "新規登録"
|
||||||
|
@ -97,6 +97,7 @@
|
|||||||
"escape-regexp": "0.0.1",
|
"escape-regexp": "0.0.1",
|
||||||
"event-stream": "3.3.4",
|
"event-stream": "3.3.4",
|
||||||
"eventemitter3": "3.0.0",
|
"eventemitter3": "3.0.0",
|
||||||
|
"exif-js": "^2.3.0",
|
||||||
"express": "4.16.2",
|
"express": "4.16.2",
|
||||||
"file-type": "7.4.0",
|
"file-type": "7.4.0",
|
||||||
"fuckadblock": "3.2.1",
|
"fuckadblock": "3.2.1",
|
||||||
@ -113,6 +114,7 @@
|
|||||||
"gulp-typescript": "3.2.3",
|
"gulp-typescript": "3.2.3",
|
||||||
"gulp-uglify": "3.0.0",
|
"gulp-uglify": "3.0.0",
|
||||||
"gulp-util": "3.0.8",
|
"gulp-util": "3.0.8",
|
||||||
|
"highlight.js": "^9.12.0",
|
||||||
"inquirer": "4.0.1",
|
"inquirer": "4.0.1",
|
||||||
"is-root": "1.0.0",
|
"is-root": "1.0.0",
|
||||||
"is-url": "1.2.2",
|
"is-url": "1.2.2",
|
||||||
|
@ -24,6 +24,9 @@ html
|
|||||||
//- FontAwesome style
|
//- FontAwesome style
|
||||||
style #{facss}
|
style #{facss}
|
||||||
|
|
||||||
|
//- highlight.js style
|
||||||
|
style #{hljscss}
|
||||||
|
|
||||||
body
|
body
|
||||||
noscript: p
|
noscript: p
|
||||||
| JavaScriptを有効にしてください
|
| JavaScriptを有効にしてください
|
||||||
|
@ -1,6 +1,6 @@
|
|||||||
<mk-drive-file-viewer>
|
<mk-drive-file-viewer>
|
||||||
<div class="preview">
|
<div class="preview">
|
||||||
<img if={ kind == 'image' } src={ file.url } alt={ file.name } title={ file.name }>
|
<img if={ kind == 'image' } src={ file.url } alt={ file.name } title={ file.name } onload={ onImageLoaded } ref="img">
|
||||||
<virtual if={ kind != 'image' }>%fa:file%</virtual>
|
<virtual if={ kind != 'image' }>%fa:file%</virtual>
|
||||||
<footer if={ kind == 'image' && file.properties && file.properties.width && file.properties.height }>
|
<footer if={ kind == 'image' && file.properties && file.properties.width && file.properties.height }>
|
||||||
<span class="size">
|
<span class="size">
|
||||||
@ -39,6 +39,14 @@
|
|||||||
</button>
|
</button>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
<div class="exif" show={ exif }>
|
||||||
|
<div>
|
||||||
|
<p>
|
||||||
|
%fa:camera%%i18n:mobile.tags.mk-drive-file-viewer.exif%
|
||||||
|
</p>
|
||||||
|
<pre ref="exif" class="json">{ exif ? JSON.stringify(exif, null, 2) : '' }</pre>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
<div class="hash">
|
<div class="hash">
|
||||||
<div>
|
<div>
|
||||||
<p>
|
<p>
|
||||||
@ -178,12 +186,45 @@
|
|||||||
white-space nowrap
|
white-space nowrap
|
||||||
overflow auto
|
overflow auto
|
||||||
font-size 0.8em
|
font-size 0.8em
|
||||||
|
color #222
|
||||||
|
border solid 1px #dfdfdf
|
||||||
|
border-radius 2px
|
||||||
|
background #f5f5f5
|
||||||
|
|
||||||
|
> .exif
|
||||||
|
padding 14px
|
||||||
|
border-top solid 1px #dfdfdf
|
||||||
|
|
||||||
|
> div
|
||||||
|
max-width 500px
|
||||||
|
margin 0 auto
|
||||||
|
|
||||||
|
> p
|
||||||
|
display block
|
||||||
|
margin 0
|
||||||
|
padding 0
|
||||||
|
color #555
|
||||||
|
font-size 0.9em
|
||||||
|
|
||||||
|
> [data-fa]
|
||||||
|
margin-right 4px
|
||||||
|
|
||||||
|
> pre
|
||||||
|
display block
|
||||||
|
width 100%
|
||||||
|
margin 6px 0 0 0
|
||||||
|
padding 8px
|
||||||
|
height 128px
|
||||||
|
overflow auto
|
||||||
|
font-size 0.9em
|
||||||
border solid 1px #dfdfdf
|
border solid 1px #dfdfdf
|
||||||
border-radius 2px
|
border-radius 2px
|
||||||
background #f5f5f5
|
background #f5f5f5
|
||||||
|
|
||||||
</style>
|
</style>
|
||||||
<script>
|
<script>
|
||||||
|
import EXIF from 'exif-js';
|
||||||
|
import hljs from 'highlight.js';
|
||||||
import bytesToSize from '../../../common/scripts/bytes-to-size';
|
import bytesToSize from '../../../common/scripts/bytes-to-size';
|
||||||
import gcd from '../../../common/scripts/gcd';
|
import gcd from '../../../common/scripts/gcd';
|
||||||
|
|
||||||
@ -195,6 +236,17 @@
|
|||||||
this.file = this.opts.file;
|
this.file = this.opts.file;
|
||||||
this.kind = this.file.type.split('/')[0];
|
this.kind = this.file.type.split('/')[0];
|
||||||
|
|
||||||
|
this.onImageLoaded = () => {
|
||||||
|
const self = this;
|
||||||
|
EXIF.getData(this.refs.img, function() {
|
||||||
|
const allMetaData = EXIF.getAllTags(this);
|
||||||
|
self.update({
|
||||||
|
exif: allMetaData
|
||||||
|
});
|
||||||
|
hljs.highlightBlock(self.refs.exif);
|
||||||
|
});
|
||||||
|
};
|
||||||
|
|
||||||
this.rename = () => {
|
this.rename = () => {
|
||||||
const name = window.prompt('名前を変更', this.file.name);
|
const name = window.prompt('名前を変更', this.file.name);
|
||||||
if (name == null || name == '' || name == this.file.name) return;
|
if (name == null || name == '' || name == this.file.name) return;
|
||||||
|
93
src/web/assets/code-highlight.css
Normal file
93
src/web/assets/code-highlight.css
Normal file
@ -0,0 +1,93 @@
|
|||||||
|
.hljs {
|
||||||
|
font-family: Consolas, 'Courier New', Courier, Monaco, monospace;
|
||||||
|
}
|
||||||
|
|
||||||
|
.hljs,
|
||||||
|
.hljs-subst {
|
||||||
|
color: #444;
|
||||||
|
}
|
||||||
|
|
||||||
|
.hljs-comment {
|
||||||
|
color: #888888;
|
||||||
|
}
|
||||||
|
|
||||||
|
.hljs-keyword {
|
||||||
|
color: #2973b7;
|
||||||
|
}
|
||||||
|
|
||||||
|
.hljs-number {
|
||||||
|
color: #ae81ff;
|
||||||
|
}
|
||||||
|
|
||||||
|
.hljs-string {
|
||||||
|
color: #e96900;
|
||||||
|
}
|
||||||
|
|
||||||
|
.hljs-regexp {
|
||||||
|
color: #e9003f;
|
||||||
|
}
|
||||||
|
|
||||||
|
.hljs-attribute,
|
||||||
|
.hljs-selector-tag,
|
||||||
|
.hljs-meta-keyword,
|
||||||
|
.hljs-doctag,
|
||||||
|
.hljs-name {
|
||||||
|
font-weight: bold;
|
||||||
|
}
|
||||||
|
|
||||||
|
.hljs-type,
|
||||||
|
.hljs-selector-id,
|
||||||
|
.hljs-selector-class,
|
||||||
|
.hljs-quote,
|
||||||
|
.hljs-template-tag,
|
||||||
|
.hljs-deletion {
|
||||||
|
color: #880000;
|
||||||
|
}
|
||||||
|
|
||||||
|
.hljs-title,
|
||||||
|
.hljs-section {
|
||||||
|
color: #880000;
|
||||||
|
font-weight: bold;
|
||||||
|
}
|
||||||
|
|
||||||
|
.hljs-symbol,
|
||||||
|
.hljs-variable,
|
||||||
|
.hljs-template-variable,
|
||||||
|
.hljs-link,
|
||||||
|
.hljs-selector-attr,
|
||||||
|
.hljs-selector-pseudo {
|
||||||
|
color: #BC6060;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Language color: hue: 90; */
|
||||||
|
|
||||||
|
.hljs-literal {
|
||||||
|
color: #78A960;
|
||||||
|
}
|
||||||
|
|
||||||
|
.hljs-built_in,
|
||||||
|
.hljs-bullet,
|
||||||
|
.hljs-code,
|
||||||
|
.hljs-addition {
|
||||||
|
color: #397300;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Meta color: hue: 200 */
|
||||||
|
|
||||||
|
.hljs-meta {
|
||||||
|
color: #1f7199;
|
||||||
|
}
|
||||||
|
|
||||||
|
.hljs-meta-string {
|
||||||
|
color: #4d99bf;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Misc effects */
|
||||||
|
|
||||||
|
.hljs-emphasis {
|
||||||
|
font-style: italic;
|
||||||
|
}
|
||||||
|
|
||||||
|
.hljs-strong {
|
||||||
|
font-weight: bold;
|
||||||
|
}
|
Loading…
Reference in New Issue
Block a user