#162 image viewer

app/js/tl/parse.js

@@ -569,6 +569,7 @@ function parse(obj, mix, acct_id, tlid, popup, mutefilter, type) {
 					var purl = media.preview_url
 					media_ids = media_ids + media.id + ','
 					var url = media.url
+					var remote_url = media.remote_url
 					var nsfwmes = ''
 					if (toot.sensitive && nsfw) {
 						var sense = 'sensitive'
@@ -615,7 +616,7 @@ function parse(obj, mix, acct_id, tlid, popup, mutefilter, type) {
 							viewer =
 								viewer +
 								`<a onclick="imgv('${id}','${key2}','${acct_id}')" 
-										id="${id}-image-${key2}" data-url="${url}" data-type="${media.type}" 
+										id="${id}-image-${key2}" data-url="${url}" data-original="${remote_url}" data-type="${media.type}" 
 										class="img-parsed img-link" style="width:calc(${cwdt}% - 1px); height:${imh};">
 									<img draggable="false" src="${purl}" class="${sense} toot-img pointer" 
 										onerror="this.src=\'../../img/loading.svg\'" title="${desc}">

app/js/ui/img.js

@@ -2,41 +2,25 @@
 //postのimg.jsとは異なります。
 function imgv(id, key, acct_id) {
 	$('#imgprog').text(0)
+	$('#imgsec').text(0)
 	$('#imgmodal').hide()
 	$('#imgmodal').attr('src', '../../img/loading.svg')
 	var murl = $('#' + id + '-image-' + key).attr('data-url')
+	var ourl = $('#' + id + '-image-' + key).attr('data-original')
 	var type = $('#' + id + '-image-' + key).attr('data-type')
 	$('#imagemodal').attr('data-id', id)
 	$('#imagemodal').attr('data-acct', acct_id)
+	$('#imagemodal').attr('data-original', ourl)
+	$('#imagemodal').attr('data-image', murl)
+	//表示はリモートを使うか(どちらにしろコピーはオリジナル)
+	var remote_img = localStorage.getItem('remote_img')
+	if (remote_img == 'yes') {
+		murl = ourl
+	}
 	$(document).ready(function() {
 		if (type == 'image') {
 			$('#imagemodal').modal('open')
-			xhr = new XMLHttpRequest()
+			imageXhr(id, key, murl)
-			xhr.open('GET', murl, true)
-			xhr.addEventListener(
-				'progress',
-				function(event) {
-					if (event.lengthComputable) {
-						var total = event.total
-						var now = event.loaded
-						var per = (now / total) * 100
-						$('#imgprog').text(Math.floor(per))
-					}
-				},
-				false
-			)
-			xhr.addEventListener(
-				'loadend',
-				function(event) {
-					var total = event.total
-					var now = event.loaded
-					var per = (now / total) * 100
-					$('#imgprog').text(Math.floor(per))
-				},
-				false
-			)
-			xhr.send()
-			$('#imgmodal').attr('src', murl)
 			$('#imagewrap').dragScroll() // ドラッグスクロール設定
 			$('#imgmodal').show()
 			$('#imagemodal').attr('data-key', key)
@@ -46,55 +30,12 @@ function imgv(id, key, acct_id) {
 			$('#videomodal').modal('open')
 			$('#imgmodal').show()
 		}
-		var element = new Image()
-		var width
-		element.onload = function() {
-			var width = element.naturalWidth
-			var height = element.naturalHeight
-			var windowH = $(window).height()
-			var windowW = $(window).width()
-			$('#imagemodal').css('bottom', '0')
-			$('#imagemodal img').css('width', 'auto')
-			if (height < windowH) {
-				$('#imagemodal').css('height', height + 60 + 'px')
-				$('#imagemodal img').css('height', '100%')
-				if (width > windowW * 0.8) {
-					$('#imagemodal').css('width', '80vw')
-					$('#imagemodal img').css('width', '100%')
-					var heightS = ((windowW * 0.8) / width) * height
-					$('#imagemodal').css('height', heightS + 60 + 'px')
-				} else {
-					$('#imagemodal').css('width', width + 'px')
-				}
-			} else {
-				$('#imagemodal img').css('width', 'auto')
-				var widthS = (windowH / height) * width
-				if (widthS < windowW) {
-					$('#imagemodal').css('width', widthS + 'px')
-				} else {
-					$('#imagemodal').css('width', '100vw')
-				}
-
-				$('#imagemodal').css('height', '100vh')
-				$('#imagemodal img').css('height', 'calc(100vh - 60px)')
-			}
-		}
-		if ($('#' + id + '-image-' + (key * 1 + 1)).length == 0) {
-			$('#image-next').prop('disabled', true)
-		} else {
-			$('#image-next').prop('disabled', false)
-		}
-		if ($('#' + id + '-image-' + (key * 1 - 1)).length == 0) {
-			$('#image-prev').prop('disabled', true)
-		} else {
-			$('#image-prev').prop('disabled', false)
-		}
-		element.src = murl
 	})
 }
 //イメージビューワーの送り
 function imgCont(type) {
 	$('#imgprog').text(0)
+	$('#imgsec').text(0)
 	var key = $('#imagemodal').attr('data-key')
 	var id = $('#imagemodal').attr('data-id')
 	if (type == 'next') {
@@ -103,38 +44,23 @@ function imgCont(type) {
 		key = key * 1 - 1
 	}
 	var murl = $('#' + id + '-image-' + key).attr('data-url')
+	var ourl = $('#' + id + '-image-' + key).attr('data-original')
+	var type = $('#' + id + '-image-' + key).attr('data-type')
+	$('#imagemodal').attr('data-id', id)
+	$('#imagemodal').attr('data-acct', acct_id)
+	$('#imagemodal').attr('data-original', ourl)
+	$('#imagemodal').attr('data-image', murl)
+	//表示はリモートを使うか(どちらにしろコピーはオリジナル)
+	var remote_img = localStorage.getItem('remote_img')
+	if (remote_img == 'yes') {
+		murl = ourl
+	}
 	if (murl) {
 		$('#imgmodal').attr('src', '../../img/loading.svg')
 		var type = $('#' + id + '-image-' + key).attr('data-type')
 		$(document).ready(function() {
 			if (type == 'image') {
-				xhr = new XMLHttpRequest()
+				imageXhr(id, key, murl)
-				xhr.open('GET', murl, true)
-				xhr.responseType = 'arraybuffer'
-				xhr.addEventListener(
-					'progress',
-					function(event) {
-						if (event.lengthComputable) {
-							var total = event.total
-							var now = event.loaded
-							var per = (now / total) * 100
-							$('#imgprog').text(Math.floor(per))
-						}
-					},
-					false
-				)
-				xhr.addEventListener(
-					'loadend',
-					function(event) {
-						var total = event.total
-						var now = event.loaded
-						var per = (now / total) * 100
-						$('#imgprog').text(Math.floor(per))
-					},
-					false
-				)
-				xhr.send()
-				$('#imgmodal').attr('src', murl)
 				$('#imagewrap').dragScroll() // ドラッグスクロール設定
 				$('#imagemodal').attr('data-key', key)
 				$('#imagemodal').attr('data-id', id)
@@ -142,53 +68,96 @@ function imgCont(type) {
 				$('#video').attr('src', murl)
 				$('#videomodal').modal('open')
 			}
-			var element = new Image()
-			var width
-			element.onload = function() {
-				var width = element.naturalWidth
-				var height = element.naturalHeight
-				var windowH = $(window).height()
-				var windowW = $(window).width()
-				$('#imagemodal').css('bottom', '0')
-				$('#imagemodal img').css('width', 'auto')
-				if (height < windowH) {
-					$('#imagemodal').css('height', height + 60 + 'px')
-					$('#imagemodal img').css('height', '100%')
-					if (width > windowW * 0.8) {
-						$('#imagemodal').css('width', '80vw')
-						$('#imagemodal img').css('width', '100%')
-						var heightS = ((windowW * 0.8) / width) * height
-						$('#imagemodal').css('height', heightS + 60 + 'px')
-					} else {
-						$('#imagemodal').css('width', width + 'px')
-					}
-				} else {
-					$('#imagemodal img').css('width', 'auto')
-					var widthS = (windowH / height) * width
-					if (widthS < windowW) {
-						$('#imagemodal').css('width', widthS + 'px')
-					} else {
-						$('#imagemodal').css('width', '100vw')
-					}
-
-					$('#imagemodal').css('height', '100vh')
-					$('#imagemodal img').css('height', 'calc(100vh - 60px)')
-				}
-			}
-			if ($('#' + id + '-image-' + (key * 1 + 1)).length === 0) {
-				$('#image-next').prop('disabled', true)
-			} else {
-				$('#image-next').prop('disabled', false)
-			}
-			if ($('#' + id + '-image-' + (key * 1 - 1)).length === 0) {
-				$('#image-prev').prop('disabled', true)
-			} else {
-				$('#image-prev').prop('disabled', false)
-			}
-			element.src = murl
 		})
 	}
 }
+function imageXhr(id, key, murl) {
+	var startTime = new Date();
+	xhr = new XMLHttpRequest()
+	xhr.open('GET', murl, true)
+	xhr.responseType = 'arraybuffer'
+	xhr.addEventListener(
+		'progress',
+		function(event) {
+			if (event.lengthComputable) {
+				var total = event.total
+				var now = event.loaded
+				var per = (now / total) * 100
+				$('#imgprog').text(Math.floor(per))
+			}
+		},
+		false
+	)
+	xhr.addEventListener(
+		'loadend',
+		function(event) {
+			var total = event.total
+			var now = event.loaded
+			var per = (now / total) * 100
+			$('#imgprog').text(Math.floor(per))
+		},
+		false
+	)
+	xhr.onreadystatechange = function() {
+		if (this.readyState == 4 && this.status == 200) {
+			r = new FileReader()
+			r.readAsDataURL(this.response)
+			r.onload = function() {
+				var b64 = r.result
+				var element = new Image()
+				var width
+				element.onload = function() {
+					var width = element.naturalWidth
+					var height = element.naturalHeight
+					var windowH = $(window).height()
+					var windowW = $(window).width()
+					$('#imagemodal').css('bottom', '0')
+					$('#imagemodal img').css('width', 'auto')
+					if (height < windowH) {
+						$('#imagemodal').css('height', height + 60 + 'px')
+						$('#imagemodal img').css('height', '100%')
+						if (width > windowW * 0.8) {
+							$('#imagemodal').css('width', '80vw')
+							$('#imagemodal img').css('width', '100%')
+							var heightS = ((windowW * 0.8) / width) * height
+							$('#imagemodal').css('height', heightS + 60 + 'px')
+						} else {
+							$('#imagemodal').css('width', width + 'px')
+						}
+					} else {
+						$('#imagemodal img').css('width', 'auto')
+						var widthS = (windowH / height) * width
+						if (widthS < windowW) {
+							$('#imagemodal').css('width', widthS + 'px')
+						} else {
+							$('#imagemodal').css('width', '100vw')
+						}
+
+						$('#imagemodal').css('height', '100vh')
+						$('#imagemodal img').css('height', 'calc(100vh - 60px)')
+					}
+				}
+				if ($('#' + id + '-image-' + (key * 1 + 1)).length == 0) {
+					$('#image-next').prop('disabled', true)
+				} else {
+					$('#image-next').prop('disabled', false)
+				}
+				if ($('#' + id + '-image-' + (key * 1 - 1)).length == 0) {
+					$('#image-prev').prop('disabled', true)
+				} else {
+					$('#image-prev').prop('disabled', false)
+				}
+				element.src = b64
+				var endTime = new Date();
+				var proctime = endTime.getTime() - startTime.getTime()
+				$('#imgsec').text(proctime)
+				$('#imgmodal').attr('src', b64)
+			}
+		}
+	}
+	xhr.responseType = 'blob'
+	xhr.send()
+}
 //ズームボタン(z:倍率)
 function zoom(z) {
 	var wdth = $('#imagewrap img').width()
@@ -287,13 +256,18 @@ function detFromImg() {
 }
 //画像保存
 function dlImg() {
-	var url = $('#imgmodal').attr('src')
+	var ourl = $('#imagemodal').attr('data-original')
+	var murl = $('#imagemodal').attr('data-image')
+	var remote_img = localStorage.getItem('remote_img')
+	if (remote_img == 'yes') {
+		murl = ourl
+	}
 	if (localStorage.getItem('savefolder')) {
 		var save = localStorage.getItem('savefolder')
 	} else {
 		var save = ''
 	}
-	postMessage(['generalDL', [url, save, false]], '*')
+	postMessage(['generalDL', [murl, save, false]], '*')
 }
 function openFinder(dir) {
 	postMessage(['openFinder', dir], '*')
@@ -301,3 +275,8 @@ function openFinder(dir) {
 function stopVideo() {
 	document.getElementById('video').pause()
 }
+function copyImgUrl() {
+	var murl = $('#imagemodal').attr('data-original')
+	execCopy(murl)
+	M.toast({ html: lang.lang_img_copyDone, displayLength: 1500 })
+}

app/view/make/index.sample.html

@@ -694,12 +694,16 @@
 		</div>
 		<div class="modal-footer">
 			DL:<span id="imgprog"></span>%
+			(<span id="imgsec"></span>ms)
 			<a class="waves-effect white-text" onclick="zoom(2)">
 				<i class="material-icons">zoom_in</i>
 			</a>
 			<a class="waves-effect white-text" onclick="zoom(0.5)">
 				<i class="material-icons">zoom_out</i>
 			</a>
+			<button class="btn waves-effect blue" onclick="copyImgUrl()">
+				<i class="material-icons left">link</i>@@copy@@
+			</button>
 			<button class="btn waves-effect purple" onclick="dlImg()">
 				<i class="material-icons">file_download</i>
 			</button>

app/view/make/language/en/main.json

@@ -114,6 +114,7 @@
     "lang_tl_postmarkers_title": "Process...",
     "lang_tl_postmarkers": "POST markers data. Please wait",
     "lang_img_DLDone": "Downloaded:",
+    "lang_img_copyDone": "Copied: URL of this image",
     "lang_layout_gotop": "Go top of this column. When icon is red, this column cannot connect straming API. Please reload.",
     "lang_layout_thisacct": "{{notf}} of this account",
     "lang_layout_delthis": "Remove this column",

app/view/make/language/ja/main.json

@@ -114,6 +114,7 @@
     "lang_tl_postmarkers_title": "処理中",
     "lang_tl_postmarkers": "未読マーカーを送信しています。3秒以内に閉じられます。",
     "lang_img_DLDone": "ダウンロード先:",
+    "lang_img_copyDone": "画像のURLをコピーしました。",
     "lang_layout_gotop": "一番上へ。アイコンが赤のときはストリーミングに接続できていません。F5等で再読込をお試し下さい。",
     "lang_layout_thisacct": "このアカウントの{{notf}}",
     "lang_layout_delthis": "このカラムを削除",