From 2b9a5febd7b65c0169be7de9e087f5b50d64b5a7 Mon Sep 17 00:00:00 2001 From: tizerm Date: Thu, 6 Jun 2024 01:11:44 +0900 Subject: [PATCH 01/11] =?UTF-8?q?=E5=89=8D=E5=BE=8C=E3=81=AELTL=E3=82=92?= =?UTF-8?q?=E5=8F=96=E5=BE=97=E6=A9=9F=E8=83=BD=E3=82=92=E8=BF=BD=E5=8A=A0?= =?UTF-8?q?.=20=E3=81=BE=E3=81=A0=E6=9A=AB=E5=AE=9A.?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/index.html | 1 + src/js/mist_main_event.js | 3 ++ src/js/module/class_status.js | 36 ++++++++++++++++++++++++ src/js/module/class_timeline.js | 49 ++++++++++++++++++++++++++++++--- 4 files changed, 85 insertions(+), 4 deletions(-) diff --git a/src/index.html b/src/index.html index 9472baa..67288d7 100644 --- a/src/index.html +++ b/src/index.html @@ -315,6 +315,7 @@
返信/引用元
  • ギャラリー
    • +
  • 前後のLTLを取得
  • 編集(Mastodon)
  • 削除
    • diff --git a/src/js/mist_main_event.js b/src/js/mist_main_event.js index 714e152..157937e 100644 --- a/src/js/mist_main_event.js +++ b/src/js/mist_main_event.js @@ -1295,6 +1295,9 @@ $(document).on("click", "#pop_context_menu>.ui_menu ul#__menu_post_open_layout>li", e => Status.TEMPORARY_CONTEXT_STATUS.openScrollableWindow($(e.target).closest("li").attr("name"))) + $(document).on("click", "#pop_context_menu>.ui_menu .__menu_post_open_localtimeline", + e => Status.getStatus($("#pop_context_menu").attr("name")).then(post => post.openLocalTimelineWindow("default"))) + /** * #Event #Contextmenu * 投稿系メニュー: 編集. diff --git a/src/js/module/class_status.js b/src/js/module/class_status.js index 2fb80b7..c1b8265 100644 --- a/src/js/module/class_status.js +++ b/src/js/module/class_status.js @@ -256,6 +256,7 @@ class Status { default: break } + this.host = host // このステータスを一意に決定するためのキーを設定 this.sort_date = new Date(original_date) @@ -1950,6 +1951,41 @@ class Status { scroll_tl.createScrollableTimeline(this.id) } + openLocalTimelineWindow(layout) { + const auth_account = Account.getByDomain(this.host) + let tl_pref = { // タイムライン設定 + "external": true, + "host": this.host, + "platform": this.platform, + "color": auth_account?.pref.acc_color ?? getRandomColor(), + "timeline_type": "local", + "exclude_reblog": false, + "expand_cw": false, + "expand_media": false, + } + const gp_pref = { // グループ設定 + "multi_user": false, + "multi_timeline": false, + "tl_layout": layout + } + switch (this.platform) { + case 'Mastodon': // Mastodon + tl_pref.rest_url = `https://${this.host}/api/v1/timelines/public` + tl_pref.query_param = { 'local': true } + break + case 'Misskey': // Misskey + tl_pref.rest_url = `https://${this.host}/api/notes/local-timeline` + tl_pref.query_param = {} + break + default: + break + } + + // ローカルタイムラインオブジェクトを生成 + const scroll_tl = new Timeline(tl_pref, new Group(gp_pref, null)) + scroll_tl.createLocalTimeline(this.id) + } + // Getter: Electronの通知コンストラクタに送る通知文を生成して返却 get notification() { let title = null diff --git a/src/js/module/class_timeline.js b/src/js/module/class_timeline.js index 6bfc8bd..7b4c44a 100644 --- a/src/js/module/class_timeline.js +++ b/src/js/module/class_timeline.js @@ -41,8 +41,9 @@ class Timeline { * 引数を指定した場合は、指定した投稿よりも前を30件取得する * * @param max_id この投稿よりも前の投稿を取得する起点のID + * @param since_id この投稿よりも後ろの投稿を取得する起点のID */ - async getTimeline(max_id) { + async getTimeline(max_id, since_id) { // 外部サーバーでなくターゲットのアカウントが存在しない場合はreject if (!this.pref.external && !this.target_account) return Promise.reject('account not found.') // クエリパラメータにlimitプロパティを事前に追加(これはMastodonとMisskeyで共通) @@ -55,7 +56,8 @@ class Timeline { // ヘッダにアクセストークンをセット(認証済みの場合) let header = {} if (!this.pref.external) header = { "Authorization": `Bearer ${this.target_account.pref.access_token}` } - if (max_id) query_param.max_id = max_id // ページ送りの場合はID指定 + if (max_id) query_param.max_id = max_id + if (since_id) query_param.min_id = since_id // REST APIで最新TLを30件取得、する処理をプロミスとして格納 response = await $.ajax({ type: "GET", @@ -64,11 +66,14 @@ class Timeline { headers: header, data: query_param }) + // Mastodonの場合逆順にする + if (since_id) response = response.reverse() break case 'Misskey': // Misskey // クエリパラメータにアクセストークンをセット(認証済みの場合) if (!this.pref.external) query_param.i = this.target_account.pref.access_token - if (max_id) query_param.untilId = max_id // ページ送りの場合はID指定 + if (max_id) query_param.untilId = max_id + if (since_id) query_param.sinceId = since_id // REST APIで最新TLを30件取得、する処理をプロミスとして格納 response = await $.ajax({ type: "POST", @@ -184,7 +189,7 @@ class Timeline { if (!this.reload_timer_id) clearInterval(this.reload_timer_id) // 実行中の場合は一旦削除 this.reload_timer_id = setInterval(() => (async () => { // 最新のタイムラインを取得 - const recent = await this.getTimeline(null) + const recent = await this.getTimeline() // 逆から順にタイムラインに追加 recent.reverse().forEach(post => this.parent_group.prepend(post)) })(), this.pref.reload_span * 60000) @@ -321,6 +326,42 @@ class Timeline { })) } + createLocalTimeline(id) { + this.createScrollableWindow(id, (tl, ref_id, window_key) => { + $(`#${window_key}>.timeline>ul`).append("
  • 起点
    • ") + tl.getTimeline(ref_id).then(body => { // 下方向のローダーを生成 + // ロード画面を削除 + $(`#${window_key}>.timeline>.col_loading`).remove() + createScrollLoader({ // スクロールローダーを生成 + data: body, + target: $(`#${window_key}>.timeline>ul`), + bind: (data, target) => { // ステータスマップに挿入して投稿をバインド + data.forEach(p => tl.ref_group.addStatus(p, () => target.append(p.timeline_element))) + // max_idとして取得データの最終IDを指定 + return data.pop()?.id + }, + load: async max_id => tl.getTimeline(max_id) + }) + }) + tl.getTimeline(null, ref_id).then(body => { // 上方向のローダーを生成 + const target = $(`#${window_key}>.timeline>ul`) + body.forEach(p => tl.ref_group.addStatus(p, () => target.prepend(p.timeline_element))) + /* + createScrollLoader({ // スクロールローダーを生成 + data: body, + target: $(`#${window_key}>.timeline>ul`), + bind: (data, target) => { // ステータスマップに挿入して投稿をバインド + data.forEach(p => tl.ref_group.addStatus(p, () => target.append(p.timeline_element))) + // max_idとして取得データの最終IDを指定 + return data.pop()?.id + }, + load: async max_id => tl.getTimeline(max_id) + })//*/ + }) + }) + + } + /** * #StaticMethod * ローカルにキャッシュされているタイムラインウィンドウオブジェクトを取得する. From 9d0a78a976aa2cdb82117bf798def0e3cf326729 Mon Sep 17 00:00:00 2001 From: tizerm Date: Sat, 8 Jun 2024 00:47:21 +0900 Subject: [PATCH 02/11] =?UTF-8?q?=E5=A4=96=E9=83=A8=E3=82=BF=E3=82=A4?= =?UTF-8?q?=E3=83=A0=E3=83=A9=E3=82=A4=E3=83=B3=E3=82=A6=E3=82=A3=E3=83=B3?= =?UTF-8?q?=E3=83=89=E3=82=A6=E3=82=92=E4=B8=8A=E4=B8=8B=E4=B8=A1=E6=96=B9?= =?UTF-8?q?=E5=90=91=E3=81=AB=E3=83=AD=E3=83=BC=E3=83=89=E5=8F=AF=E8=83=BD?= =?UTF-8?q?=E3=81=AB=E4=BF=AE=E6=AD=A3.?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/css/mist_timeline.css | 23 +++++++++++++ src/index.html | 11 +++++- src/js/mist_main_event.js | 5 +-- src/js/mist_ui.js | 57 ++++++++++++++++++++++++++++++ src/js/mist_utils.js | 35 ------------------- src/js/module/class_status.js | 10 ++++-- src/js/module/class_timeline.js | 61 ++++++++++++++++----------------- 7 files changed, 130 insertions(+), 72 deletions(-) diff --git a/src/css/mist_timeline.css b/src/css/mist_timeline.css index 0a1d69c..7008099 100644 --- a/src/css/mist_timeline.css +++ b/src/css/mist_timeline.css @@ -1085,6 +1085,29 @@ background-repeat: no-repeat; height: 32px; } + > li.__on_top_loader { + background-image: url("../resources/ic_top.png"); + background-position: center left; + background-repeat: no-repeat; + background-color: #415687; + border-radius: 16px; + font-size: 16px; + font-weight: bold; + text-align: center; + padding: 4px 0px; + &:hover { + background-color: #3562cc; + cursor: pointer; + } + &.loader_loading { + background-image: url("../resources/illust/ani_wait.png"); + background-position: center center; + height: 32px; + } + } + > li.mark_target_post:not(.chat_timeline), > li.mark_target_post.chat_timeline>.content { + border: solid 2px #cccccc; + } > li>.label_head.label_reblog { background-position: center right; diff --git a/src/index.html b/src/index.html index 67288d7..1889cc7 100644 --- a/src/index.html +++ b/src/index.html @@ -315,7 +315,16 @@
    返信/引用元
  • ギャラリー
    • -
  • 前後のLTLを取得
    • +
  • 前後のLTLを取得
    +
      +
    • ノーマル
      • +
    • ノーマル2
      • +
    • チャット
      • +
    • リスト
      • +
    • メディア
      • +
    • ギャラリー
      • +
    +
  • 編集(Mastodon)
  • 削除
    • diff --git a/src/js/mist_main_event.js b/src/js/mist_main_event.js index 157937e..33e1f3d 100644 --- a/src/js/mist_main_event.js +++ b/src/js/mist_main_event.js @@ -1295,8 +1295,9 @@ $(document).on("click", "#pop_context_menu>.ui_menu ul#__menu_post_open_layout>li", e => Status.TEMPORARY_CONTEXT_STATUS.openScrollableWindow($(e.target).closest("li").attr("name"))) - $(document).on("click", "#pop_context_menu>.ui_menu .__menu_post_open_localtimeline", - e => Status.getStatus($("#pop_context_menu").attr("name")).then(post => post.openLocalTimelineWindow("default"))) + $(document).on("click", "#pop_context_menu>.ui_menu ul#__menu_post_open_localtimeline>li", + e => Status.getStatus($("#pop_context_menu").attr("name")) + .then(post => post.openLocalTimelineWindow($(e.target).closest("li").attr("name")))) /** * #Event #Contextmenu diff --git a/src/js/mist_ui.js b/src/js/mist_ui.js index b2b11a2..2a861e4 100644 --- a/src/js/mist_ui.js +++ b/src/js/mist_ui.js @@ -251,3 +251,60 @@ function getRandomColor() { const index = Math.floor(Math.random() * color_palette.length) return color_palette[index] } + +/** + * #Util + * 要素を表示したら続きを読み込むスクロールローダーを生成する + * + * @param arg パラメータオブジェクト + */ +function createScrollLoader(arg) { + // 最初に取得したデータをもとにデータのバインド処理を行う(返り値はページング用max_id) + const max_id = arg.bind(arg.data, arg.target) + if (!max_id) return // max_idが空の場合はデータ終端として終了 + + // Loader Elementを生成 + arg.target.append(`
  •  
    • `) + + // Intersection Observerを生成 + const observer = new IntersectionObserver((entries, obs) => (async () => { + const e = entries[0] + if (!e.isIntersecting) return // 見えていないときは実行しない + console.log('ローダー表示: ' + max_id) + // Loaderを一旦解除してロード画面に変更 + obs.disconnect() + $(e.target).css('background-image', 'url("resources/illust/ani_wait.png")') + + // Loaderのmax_idを使ってデータ取得処理を実行 + arg.data = await arg.load(max_id) + // Loaderを削除して再帰的にLoader生成関数を実行 + $(e.target).remove() + createScrollLoader(arg) + })(), { + root: arg.target.get(0), + rootMargin: "0px", + threshold: 1.0, + }) + observer.observe(arg.target.find(".__scroll_loader").get(0)) +} + +function createTopLoader(arg) { + // 最初に取得したデータをもとにデータのバインド処理を行う(返り値はページング用since_id) + const since_id = arg.bind(arg.data, arg.target) + if (!since_id) return // since_idが空の場合はデータ終端として終了 + + // Loader Elementを生成してクリックイベントを生成(一回だけ実行) + arg.target.prepend(`
  • 続きをロード
    • `) + arg.target.find(".__on_top_loader").get(0).addEventListener('click', e => (async () => { + console.log('トップリロード: ' + since_id) + // ボタンをロード画面に変更 + $(e.target).empty().addClass('loader_loading') + + // Loaderのsince_idを使ってデータ取得処理を実行 + arg.data = await arg.load(since_id) + // Loaderを削除して再帰的にLoader生成関数を実行 + $(e.target).remove() + createTopLoader(arg) + })(), { once: true }) +} + diff --git a/src/js/mist_utils.js b/src/js/mist_utils.js index efa8633..b31f210 100644 --- a/src/js/mist_utils.js +++ b/src/js/mist_utils.js @@ -120,38 +120,3 @@ function shiftArray(array, obj, limit) { return true } -/** - * #Util - * 要素を表示したら続きを読み込むスクロールローダーを生成する - * - * @param arg パラメータオブジェクト - */ -function createScrollLoader(arg) { - // 最初に取得したデータをもとにデータのバインド処理を行う(返り値はページング用max_id) - const max_id = arg.bind(arg.data, arg.target) - if (!max_id) return // max_idが空の場合はデータ終端として終了 - - // Loader Elementを生成 - arg.target.append(`
  •  
    • `) - - // Intersection Observerを生成 - const observer = new IntersectionObserver((entries, obs) => (async () => { - const e = entries[0] - if (!e.isIntersecting) return // 見えていないときは実行しない - console.log('ローダー表示: ' + max_id) - // Loaderを一旦解除してロード画面に変更 - obs.disconnect() - $(e.target).css('background-image', 'url("resources/illust/ani_wait.png")') - - // Loaderのmax_idを使ってデータ取得処理を実行 - arg.data = await arg.load(max_id) - // Loaderを削除して再帰的にLoader生成関数を実行 - $(e.target).remove() - createScrollLoader(arg) - })(), { - root: arg.target.get(0), - rootMargin: "0px", - threshold: 1.0, - }) - observer.observe(arg.target.find(".__scroll_loader").get(0)) -} diff --git a/src/js/module/class_status.js b/src/js/module/class_status.js index c1b8265..997c984 100644 --- a/src/js/module/class_status.js +++ b/src/js/module/class_status.js @@ -1948,13 +1948,14 @@ class Status { this.from_timeline?.pref, new Group(structuredClone(this.from_group?.pref), null)) // タイムラインレイアウトが指定されている場合は変更 if (layout) scroll_tl.ref_group.pref.tl_layout = layout - scroll_tl.createScrollableTimeline(this.id) + scroll_tl.createLoadableTimeline(this) } openLocalTimelineWindow(layout) { const auth_account = Account.getByDomain(this.host) let tl_pref = { // タイムライン設定 - "external": true, + "key_address": auth_account?.full_address, + "external": auth_account ? false : true, "host": this.host, "platform": this.platform, "color": auth_account?.pref.acc_color ?? getRandomColor(), @@ -1983,7 +1984,10 @@ class Status { // ローカルタイムラインオブジェクトを生成 const scroll_tl = new Timeline(tl_pref, new Group(gp_pref, null)) - scroll_tl.createLocalTimeline(this.id) + this.from_timeline = scroll_tl + this.from_account = auth_account + this.detail_flg = false + scroll_tl.createLoadableTimeline(this) } // Getter: Electronの通知コンストラクタに送る通知文を生成して返却 diff --git a/src/js/module/class_timeline.js b/src/js/module/class_timeline.js index 7b4c44a..9206f39 100644 --- a/src/js/module/class_timeline.js +++ b/src/js/module/class_timeline.js @@ -326,40 +326,39 @@ class Timeline { })) } - createLocalTimeline(id) { - this.createScrollableWindow(id, (tl, ref_id, window_key) => { - $(`#${window_key}>.timeline>ul`).append("
  • 起点
    • ") - tl.getTimeline(ref_id).then(body => { // 下方向のローダーを生成 - // ロード画面を削除 + createLoadableTimeline(post) { + this.createScrollableWindow(post.id, (tl, ref_id, window_key) => { + // 起点の投稿を表示して変数にマークする + post.getLayoutElement(tl.ref_group.pref.tl_layout) + .closest('li').addClass('mark_target_post').appendTo(`#${window_key}>.timeline>ul`) + const mark_elm = $(`#${window_key}>.timeline>ul>li:first-child`).get(0) + + // 上下方向のローダーを生成 + Promise.all([tl.getTimeline(ref_id).then(body => createScrollLoader({ // 下方向のローダーを生成 + data: body, + target: $(`#${window_key}>.timeline>ul`), + bind: (data, target) => { // ステータスマップに挿入して投稿をバインド + data.forEach(p => tl.ref_group.addStatus(p, () => target.append(p.timeline_element))) + // max_idとして取得データの最終IDを指定 + return data.pop()?.id + }, + load: async max_id => tl.getTimeline(max_id) + })), tl.getTimeline(null, ref_id).then(body => createTopLoader({ // 上方向のローダーを生成 + data: body, + target: $(`#${window_key}>.timeline>ul`), + bind: (data, target) => { // ステータスマップに挿入して投稿をバインド + const first_elm = target.find('li:first-child').get(0) + data.forEach(p => tl.ref_group.addStatus(p, () => target.prepend(p.timeline_element))) + first_elm.scrollIntoView({ block: 'center' }) + // since_idとして取得データの最終IDを指定 + return data.pop()?.id + }, + load: async since_id => tl.getTimeline(null, since_id) + }))]).then(() => { // 両方ロードが終わったらロード画面を削除してマークした要素にスクロールを合わせる $(`#${window_key}>.timeline>.col_loading`).remove() - createScrollLoader({ // スクロールローダーを生成 - data: body, - target: $(`#${window_key}>.timeline>ul`), - bind: (data, target) => { // ステータスマップに挿入して投稿をバインド - data.forEach(p => tl.ref_group.addStatus(p, () => target.append(p.timeline_element))) - // max_idとして取得データの最終IDを指定 - return data.pop()?.id - }, - load: async max_id => tl.getTimeline(max_id) - }) - }) - tl.getTimeline(null, ref_id).then(body => { // 上方向のローダーを生成 - const target = $(`#${window_key}>.timeline>ul`) - body.forEach(p => tl.ref_group.addStatus(p, () => target.prepend(p.timeline_element))) - /* - createScrollLoader({ // スクロールローダーを生成 - data: body, - target: $(`#${window_key}>.timeline>ul`), - bind: (data, target) => { // ステータスマップに挿入して投稿をバインド - data.forEach(p => tl.ref_group.addStatus(p, () => target.append(p.timeline_element))) - // max_idとして取得データの最終IDを指定 - return data.pop()?.id - }, - load: async max_id => tl.getTimeline(max_id) - })//*/ + mark_elm.scrollIntoView({ block: 'center' }) }) }) - } /** From 3a92d9458108db2a0f0b44ee9dc1dcf0eb2ebca8 Mon Sep 17 00:00:00 2001 From: tizerm Date: Sun, 9 Jun 2024 00:04:29 +0900 Subject: [PATCH 03/11] =?UTF-8?q?=E3=83=A6=E3=83=BC=E3=82=B6=E3=83=BC?= =?UTF-8?q?=E3=83=8D=E3=83=BC=E3=83=A0=E3=83=96=E3=83=AD=E3=83=83=E3=82=AF?= =?UTF-8?q?=E3=81=AE=E3=83=AC=E3=82=A4=E3=82=A2=E3=82=A6=E3=83=88=E3=82=92?= =?UTF-8?q?=E5=BE=AE=E8=AA=BF=E6=95=B4.?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/css/mist_timeline.css | 67 ++++++++++++++++----------------- src/js/module/class_status.js | 33 ++++++++-------- src/js/module/class_timeline.js | 25 ++---------- 3 files changed, 55 insertions(+), 70 deletions(-) diff --git a/src/css/mist_timeline.css b/src/css/mist_timeline.css index 7008099..a3e2405 100644 --- a/src/css/mist_timeline.css +++ b/src/css/mist_timeline.css @@ -286,7 +286,7 @@ /*=== User Info ======================================================================*/ > .user { position: relative; - margin: -2px -4px 0px; + margin: -2px -8px 0px; > .usericon { border-radius: 12px; @@ -294,37 +294,38 @@ height: 48px; cursor: pointer; } - > .username { + > .name_info { position: absolute; - left: 60px; - top: 2px; + top: 0px; + left: 58px; + width: calc(100% - 60px); + } + .username { color: #ffffff; font-size: 18px; font-weight: bold; margin: 0px; - width: calc(100% - 60px); + width: 100%; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; } - > .userid { - position: absolute; - left: 60px; - top: 28px; + .userid { display: block; font-family: Arial, "メイリオ", sans-selif; color: #bbbbbb; font-size: 14px; - width: calc(100% - 60px); + width: 100%; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; > a { text-decoration: underline; + color: #b5a5ab; cursor: pointer; &:hover { text-decoration: none; - color: #eeeeee; + color: #dddddd; } } } @@ -337,12 +338,11 @@ /*=== User Info (Normal2 Layout) =================================================*/ &.prof_normal2 { - position: absolute; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; width: calc(100% - 16px); - margin: -4px -6px 2px; + margin: -4px -6px 4px; > .usericon { border-radius: 12px; width: 24px; @@ -350,17 +350,22 @@ display: inline-block; vertical-align: text-bottom; } - > .username { - position: static; - font-size: 13px; - font-weight: bold; - display: inline; - > .inline_emoji { height: 18px; } - } - > .userid { - position: static; - display: inline; - font-size: 12px; + > .name_info { + position: absolute; + top: 0px; + left: 28px; + > .username { + position: static; + font-size: 13px; + font-weight: bold; + display: inline; + > .inline_emoji { height: 18px; } + } + > .userid { + position: static; + display: inline; + font-size: 13px; + } } } } @@ -396,8 +401,6 @@ overflow-wrap: break-word; } } - > .prof_normal2+.content { margin-top: 24px; } - &:has(.label_head)>.prof_normal2+.content { margin-top: 30px; } /*=== Reaction Emoji Info ============================================================*/ > .reaction_emoji { @@ -949,20 +952,16 @@ font-size: 11px; } > .user { - margin: 0px 8px; + margin: 0px 6px; > .usericon { border-radius: 18px; width: 36px; height: 36px; } - > .username, > .userid { font-size: 13px; } - > .username { - left: 48px; - top: 1px; - } - > .userid { + > .name_info { left: 48px; - top: 20px; + width: calc(100% - 48px); + > .username, > .userid { font-size: 13px; } } } > .content { diff --git a/src/js/module/class_status.js b/src/js/module/class_status.js index 997c984..5b2e2d5 100644 --- a/src/js/module/class_status.js +++ b/src/js/module/class_status.js @@ -720,6 +720,7 @@ class Status { html += `
    +
    `; switch (Preference.GENERAL_PREFERENCE.normal_name_format) { case 'both_prename': // ユーザーネーム+ユーザーID html += ` @@ -753,16 +754,18 @@ class Status { default: break } - html += '
    ' + html += '
    ' } else html /* ノーマルレイアウトの場合 */ += `
    -

    ${target_emojis.replace(this.user.username)}

    - - - @${this.detail_flg || this.popout_flg ? this.user.full_address : this.user.id} - - +
    +

    ${target_emojis.replace(this.user.username)}

    + + + @${this.detail_flg || this.popout_flg ? this.user.full_address : this.user.id} + + +
    ` } @@ -1270,14 +1273,14 @@ class Status { html /* ユーザーアカウント情報 */ += `
    -

    ${target_emojis.replace(this.user.username)}

    - - - @${this.user.id} - - - ` - html += ` +
    +

    ${target_emojis.replace(this.user.username)}

    + + + @${this.user.id} + + +
    ` // 本文よりも先にメディアを表示 diff --git a/src/js/module/class_timeline.js b/src/js/module/class_timeline.js index 9206f39..8ed5f9b 100644 --- a/src/js/module/class_timeline.js +++ b/src/js/module/class_timeline.js @@ -305,32 +305,15 @@ class Timeline { /** * #Method - * 対象の投稿IDからこのタイムラインの設定で遡りウィンドウを生成 + * 対象の投稿IDからこのタイムラインの設定で外部タイムラインウィンドウを生成 * - * @param id 起点にする投稿ID + * @param post 取得の起点にするStatusオブジェクト */ - createScrollableTimeline(id) { - this.createScrollableWindow(id, (tl, ref_id, window_key) => tl.getTimeline(ref_id).then(body => { - // ロード画面を削除 - $(`#${window_key}>.timeline>.col_loading`).remove() - createScrollLoader({ // スクロールローダーを生成 - data: body, - target: $(`#${window_key}>.timeline>ul`), - bind: (data, target) => { // ステータスマップに挿入して投稿をバインド - data.forEach(p => tl.ref_group.addStatus(p, () => target.append(p.timeline_element))) - // max_idとして取得データの最終IDを指定 - return data.pop()?.id - }, - load: async max_id => tl.getTimeline(max_id) - }) - })) - } - createLoadableTimeline(post) { this.createScrollableWindow(post.id, (tl, ref_id, window_key) => { // 起点の投稿を表示して変数にマークする - post.getLayoutElement(tl.ref_group.pref.tl_layout) - .closest('li').addClass('mark_target_post').appendTo(`#${window_key}>.timeline>ul`) + tl.ref_group.addStatus(post, () => post.getLayoutElement(tl.ref_group.pref.tl_layout) + .closest('li').addClass('mark_target_post').appendTo(`#${window_key}>.timeline>ul`)) const mark_elm = $(`#${window_key}>.timeline>ul>li:first-child`).get(0) // 上下方向のローダーを生成 From 1805dde5fd6400aaa70cccfc82e84251cfd08c65 Mon Sep 17 00:00:00 2001 From: tizerm Date: Tue, 11 Jun 2024 00:37:03 +0900 Subject: [PATCH 04/11] =?UTF-8?q?=E3=83=AC=E3=82=A4=E3=82=A2=E3=82=A6?= =?UTF-8?q?=E3=83=88=E5=BE=AE=E4=BF=AE=E6=AD=A3.?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- package.json | 2 +- src/help/help_main.html | 2 +- src/js/module/class_user.js | 18 ++++++++++++------ 3 files changed, 14 insertions(+), 8 deletions(-) diff --git a/package.json b/package.json index e0e1193..c884844 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "Mistdon", - "version": "1.2.2", + "version": "1.3.0a", "description": "The integrated client application of Mastodon and Misskey.", "main": "main.js", "scripts": { diff --git a/src/help/help_main.html b/src/help/help_main.html index 369c345..acaebf8 100644 --- a/src/help/help_main.html +++ b/src/help/help_main.html @@ -1489,7 +1489,7 @@

    設定ファイルの場所について

    Mistdonについて

    -
    Current Version: 1.2.2 (2024/06/02)
    +
    Current Version: 1.3.0a (2024/06/09)

    Mistdonは、MastodonとMisskeyの統合Fediverseクライアントです。
    OSSですが基本的にはぜるま(@tizerm@mofu.kemo.no)(@tizerm@misskey.dev)が主導になって開発を行っています(というかコントリビューターは今のところいない……)。
    diff --git a/src/js/module/class_user.js b/src/js/module/class_user.js index ed77ba1..d9cc4e8 100644 --- a/src/js/module/class_user.js +++ b/src/js/module/class_user.js @@ -279,8 +279,10 @@ class User { html /* ユーザーアカウント情報 */ += `

    -

    ${target_emojis.replace(this.username)}

    - ${this.full_address} +
    +

    ${target_emojis.replace(this.username)}

    + ${this.full_address} +
    ` let bookmarks = '' let instance = '' @@ -376,8 +378,10 @@ class User { html /* ユーザーアカウント情報 */ += `
    -

    ${target_emojis.replace(this.username)}

    - ${this.full_address} +
    +

    ${target_emojis.replace(this.username)}

    + ${this.full_address} +
    ` switch (this.platform) { case 'Mastodon': // Mastodon @@ -421,8 +425,10 @@ class User {
  • -

    ${this.username}

    - ${this.full_address} +
    +

    ${this.username}

    + ${this.full_address} +
    • `)) From 8f7f31aff7951af7dd1bd0ba72c78bbd9db36bac Mon Sep 17 00:00:00 2001 From: tizerm Date: Sat, 22 Jun 2024 03:07:10 +0900 Subject: [PATCH 05/11] =?UTF-8?q?=E3=82=BF=E3=82=A4=E3=83=A0=E3=83=A9?= =?UTF-8?q?=E3=82=A4=E3=83=B3=E3=81=AB=E3=82=A4=E3=83=B3=E3=83=97=E3=83=AC?= =?UTF-8?q?=E3=83=83=E3=82=B7=E3=83=A7=E3=83=B3=E3=82=BB=E3=82=AF=E3=82=B7?= =?UTF-8?q?=E3=83=A7=E3=83=B3=E3=82=92=E8=BF=BD=E5=8A=A0.?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/css/mist_main.css | 2 +- src/css/mist_preference.css | 2 +- src/css/mist_timeline.css | 61 ++++++++------ src/js/module/class_status.js | 154 +++++++++++++++++++--------------- 4 files changed, 124 insertions(+), 95 deletions(-) diff --git a/src/css/mist_main.css b/src/css/mist_main.css index 68a8077..d80e933 100644 --- a/src/css/mist_main.css +++ b/src/css/mist_main.css @@ -837,7 +837,7 @@ background-image: url("../resources/ic_reblog.png"); } &.impress_fav { - background-color: #a8880a; + background-color: #825e1b; background-image: url("../resources/ic_favorite.png"); } } diff --git a/src/css/mist_preference.css b/src/css/mist_preference.css index bc5cde7..54114e1 100644 --- a/src/css/mist_preference.css +++ b/src/css/mist_preference.css @@ -235,7 +235,7 @@ &.default { background-color: #3562cc; } &.btrn { background-color: #408a08; } &.media { background-color: #cc355d; } - &.notification { background-color: #a8880a; } + &.notification { background-color: #825e1b; } } & button.__on_layout_close { width: 100%; } } diff --git a/src/css/mist_timeline.css b/src/css/mist_timeline.css index a3e2405..04c58d2 100644 --- a/src/css/mist_timeline.css +++ b/src/css/mist_timeline.css @@ -574,12 +574,25 @@ font-size: 18px; font-weight: bold; text-align: right; - &.count_reblog { background-image: url("../resources/ic_reblog.png"); } - &.count_fav { background-image: url("../resources/ic_favorite.png"); } - &.count_reaction_total { background-image: url("../resources/ic_emoji.png"); } } } + /*=== Impressions Info ===============================================================*/ + > .impressions { + background-color: rgba(31,31,31,0.683); + border-radius: 8px; + > .counter { + display: inline-block; + border-radius: 12px; + padding: 3px 8px 3px 30px; + background-position: center left; + background-repeat: no-repeat; + background-size: 24px 24px; + font-family: Arial, "メイリオ", sans-selif; + } + > .reaction_section { display: inline; } + } + /*=== Detail Info ====================================================================*/ > .detail_info { margin: 6px 8px; @@ -642,14 +655,7 @@ cursor: pointer; } } - .counter { width: calc(33% - 48px); } - .count_post { background-image: url("../resources/ic_rpl.png"); } - .count_follow { background-image: url("../resources/ic_cnt_flw.png"); } - .count_follower { background-image: url("../resources/ic_cnt_flwr.png"); } - .count_reply { background-image: url("../resources/ic_rpl.png"); } - .count_reblog { background-image: url("../resources/ic_reblog.png"); } - .count_fav { background-image: url("../resources/ic_favorite.png"); } - .count_reaction_total { background-image: url("../resources/ic_emoji.png"); } + .counter { width: calc(33% - 48px); } .count_reaction { background-color: rgba(0,172,255,0.2); padding-right: 8px; @@ -1105,7 +1111,7 @@ } } > li.mark_target_post:not(.chat_timeline), > li.mark_target_post.chat_timeline>.content { - border: solid 2px #cccccc; + background-color: #415687; } > li>.label_head.label_reblog { @@ -1130,18 +1136,25 @@ /*=== General Timeline Preference ================================================================*/ -.label_reply { background-color: #cc355d; } -.label_reblog { background-color: #408a08; } -.label_favorite { background-color: #a8880a; } -.label_postcount { background-color: #606060; } -.label_follow { background-color: #3562cc; } -.label_follower { background-color: #cc6a35; } -.label_bookmark { background-color: #c10000; } -.label_cw { background-color: #8c720b; } -.label_sensitive { background-color: #a10000; } -.label_limitover { background-color: #0b638c; } -.label_private { background-color: #bbbbbb; color: #333333; } -.cw_content { display: none; } +.label_reply { background-color: #cc355d; } +.label_reblog { background-color: #408a08; } +.label_favorite { background-color: #825e1b; } +.label_postcount { background-color: #606060; } +.label_follow { background-color: #3562cc; } +.label_follower { background-color: #cc6a35; } +.label_bookmark { background-color: #c10000; } +.label_cw { background-color: #8c720b; } +.label_sensitive { background-color: #a10000; } +.label_limitover { background-color: #0b638c; } +.label_private { background-color: #bbbbbb; color: #333333; } +.cw_content { display: none; } +.count_post { background-image: url("../resources/ic_rpl.png"); } +.count_follow { background-image: url("../resources/ic_cnt_flw.png"); } +.count_follower { background-image: url("../resources/ic_cnt_flwr.png"); } +.count_reply { background-image: url("../resources/ic_rpl.png"); } +.count_reblog { background-image: url("../resources/ic_reblog.png"); } +.count_fav { background-image: url("../resources/ic_favorite.png"); } +.count_reaction_total { background-image: url("../resources/ic_emoji.png"); } /*=== Profile Column Layout ======================================================================*/ diff --git a/src/js/module/class_status.js b/src/js/module/class_status.js index 5b2e2d5..856ba16 100644 --- a/src/js/module/class_status.js +++ b/src/js/module/class_status.js @@ -242,7 +242,7 @@ class Status { this.count_reply = data.repliesCount this.count_reblog = data.renoteCount // リアクションがある場合はリアクション一覧をリスト化する - if ((this.detail_flg || this.notif_type == 'reaction' || this.notif_type == 'renote') && data.reactions) { + if (data.reactions) { const reactions = [] Object.keys(data.reactions).forEach(key => reactions.push({ shortcode: key, @@ -822,30 +822,10 @@ class Status { } else alias = this.reaction_emoji // Unicode絵文字はそのまま渡す html += `
    ${alias}
    ` } - if (this.medias.length > 0) { // 添付メディア(現状は画像のみ) + if (this.medias.length > 0) { // 添付メディア const img_class = this.medias.length > 4 ? 'img_grid_16' : 'img_grid_4' - html += '
    ' - if (this.sensitive) html /* 閲覧注意 */ += ` - 閲覧注意の画像があります -
    - `; else html += '
    ' - // アスペクト比をリンクオプションとして設定 - this.medias.forEach(media => { - if (media.type == 'audio') html /* 音声ファイル(サムネなしで直接埋め込む) */+= ` - - `; else html /* 画像か動画ファイル(サムネから拡大表示) */ += ` - - - - ` - }) - html += ` -
    -
    - ` + html += this.bindMediaSection(img_class) } - // 一部の通知はインプレッション数値を表示する if (Preference.GENERAL_PREFERENCE.enable_notified_impression && ['favourite', 'reblog', 'reaction', 'renote'].includes(this.notif_type)) { @@ -862,7 +842,7 @@ class Status { break } html += '
    ' - } + } else if (!this.detail_flg) html += this.impression_section if (this.detail_flg) { // 詳細表示の場合はリプライ、BTRN、ふぁぼ数を表示 html += '
    ' @@ -957,7 +937,7 @@ class Status { if (this.reply_to) jqelm.closest('li').addClass('replied_post') if (this.reblog) { // BTRNにはクラスをつけて背景をセット jqelm.closest('li').addClass('rebloged_post') - jqelm.find('.label_reblog').css("background-image", `url("${this.reblog_by_icon}")`) + jqelm.find('.label_head.label_reblog').css("background-image", `url("${this.reblog_by_icon}")`) } if (this.profile_post_flg || this.detail_flg) // プロフィールと詳細表示は投稿時刻で色分けする jqelm.find('.post_footer>.created_at').addClass(`from_address ${this.relative_time.color_class}`) @@ -1099,29 +1079,12 @@ class Status { `; else html += `
    ${target_emojis.replace(this.quote.content)}
    ` html += '
    ' } - if (this.medias.length > 0) { // 添付メディア(現状は画像のみ) + if (this.medias.length > 0) { // 添付メディア const img_class = this.medias.length > 4 ? 'img_grid_64' : 'img_grid_16' - html += '
    ' - if (this.sensitive) html /* 閲覧注意 */ += ` - 閲覧注意の画像があります -
    - `; else html += '
    ' - // アスペクト比をリンクオプションとして設定 - this.medias.forEach(media => { - if (media.type == 'audio') html /* 音声ファイル(サムネなしで直接埋め込む) */+= ` - - `; else html /* 画像か動画ファイル(サムネから拡大表示) */ += ` - - - - ` - }) - html += ` -
    -
    - ` + html += this.bindMediaSection(img_class) } + // インプレッション(反応とリアクション) + html += this.impression_section html += ` ` @@ -1130,7 +1093,10 @@ class Status { const jqelm = $($.parseHTML(html)) jqelm.find('.from_address>div').css("background-color", `#${this.account_color}`) jqelm.find('.from_address>.from_auth_user').css("background-image", `url("${this.from_account?.pref.avatar_url}")`) - jqelm.find('.label_reblog').css("background-image", `url("${this.reblog_by_icon}")`) + if (this.reblog) { // BTRNにはクラスをつけて背景をセット + jqelm.closest('li').addClass('rebloged_post') + jqelm.find('.label_head.label_reblog').css("background-image", `url("${this.reblog_by_icon}")`) + } // 期限切れか投票済みの場合は投票ボタンを消して結果を表示する if (this.poll_options && !this.detail_flg && (this.poll_voted || (!this.poll_unlimited && this.poll_expired))) jqelm.find('.post_poll').after(this.poll_graph).remove() @@ -1284,30 +1250,11 @@ class Status {
    ` // 本文よりも先にメディアを表示 - if (this.medias.length > 0) { // 添付メディア(現状は画像のみ) + if (this.medias.length > 0) { // 添付メディア let img_class = 'img_grid_single' if (this.medias.length > 4) img_class = 'img_grid_16' else if (this.medias.length > 1) img_class = 'img_grid_4' - html += '
    ' - if (this.sensitive) html /* 閲覧注意 */ += ` - 閲覧注意の画像があります -
    - `; else html += '
    ' - // アスペクト比をリンクオプションとして設定 - this.medias.forEach(media => { - if (media.type == 'audio') html /* 音声ファイル(サムネなしで直接埋め込む) */+= ` - - `; else html /* 画像か動画ファイル(サムネから拡大表示) */ += ` - - - - ` - }) - html += ` -
    -
    - ` + html += this.bindMediaSection(img_class) } html += `
    @@ -1323,6 +1270,8 @@ class Status {
    ` + // インプレッション(反応とリアクション) + html += this.impression_section html /* 投稿(ステータス)日付 */ += `
    ${this.date_text} @@ -1353,7 +1302,7 @@ class Status { jqelm.closest('li').addClass('self_post') if (this.reblog) { // BTRNにはクラスをつけて背景をセット jqelm.closest('li').addClass('rebloged_post') - jqelm.find('.label_reblog').css("background-image", `url("${this.reblog_by_icon}")`) + jqelm.find('.label_head.label_reblog').css("background-image", `url("${this.reblog_by_icon}")`) } // 時間で色分け jqelm.closest('li').css('border-left-color', this.relative_time.color) @@ -1411,6 +1360,73 @@ class Status { `)) } + bindMediaSection(img_class) { + let html = '
    ' + if (this.sensitive) html /* 閲覧注意 */ += ` + 閲覧注意の画像があります +
    + `; else html += '
    ' + // アスペクト比をリンクオプションとして設定 + this.medias.forEach(media => { + if (media.type == 'audio') html /* 音声ファイル(サムネなしで直接埋め込む) */+= ` + + `; else html /* 画像か動画ファイル(サムネから拡大表示) */ += ` + + + + ` + }) + html += ` +
    +
    + ` + return html + } + + get impression_section() { + let html = '
    ' + if ((this.reactions?.length ?? 0) > 0 || this.count_fav > 0) { // インプレッション(反応とリアクション) + // リプライ数とブースト/リノート数(あるやつだけ表示) + if (this.count_reply > 0) html += ` + ${this.count_reply} + `; if (this.count_reblog > 0) html += ` + ${this.count_reblog} + `; switch (this.platform) { + case 'Mastodon': // Mastodon + // ふぁぼの表示だけする + html += `${this.count_fav}` + break + case 'Misskey': // Misskey + let reaction_html = '' // リアクションHTMLは後ろにつける + let reaction_count = 0 // リアクション合計値を保持 + this.reactions?.forEach(reaction => { + if (reaction.url) reaction_html /* URLの取得できているカスタム絵文字 */ += ` + + `; else if (reaction.shortcode.lastIndexOf('@') > 0) reaction_html /* 取得できなかった絵文字 */ += ` + + :${reaction.shortcode.substring(1, reaction.shortcode.lastIndexOf('@'))}: + + `; else reaction_html /* それ以外はそのまま表示 */ += ` + ${reaction.shortcode} + ` + reaction_count += Number(reaction.count) + }) + // 先にリアクションの合計値を表示 + const emojis = this.host_emojis ?? Emojis.get(this.host) + html += ` +
    ${emojis.replace(reaction_html)}
    + ${reaction_count} + ` + break + default: + break + } + } + html += '
    ' + return html + } + /** * #Method * この投稿のアンケートに対して投票する From a3ed9a8754a18b91fcb9ba477ee0cf128238ecfa Mon Sep 17 00:00:00 2001 From: tizerm Date: Sat, 22 Jun 2024 17:11:40 +0900 Subject: [PATCH 06/11] =?UTF-8?q?=E3=82=A4=E3=83=B3=E3=83=97=E3=83=AC?= =?UTF-8?q?=E3=83=83=E3=82=B7=E3=83=A7=E3=83=B3=E8=87=AA=E5=8B=95=E6=9B=B4?= =?UTF-8?q?=E6=96=B0=E6=A9=9F=E8=83=BD=E3=82=92=E8=BF=BD=E5=8A=A0.?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/js/mist_main_load.js | 5 ++++- src/js/module/class_preference.js | 14 +++++++++++++- src/js/module/class_status.js | 3 +++ src/js/module/class_timeline.js | 21 +++++++++++++++++++++ src/pref_general.html | 16 ++++++++++++++++ 5 files changed, 57 insertions(+), 2 deletions(-) diff --git a/src/js/mist_main_load.js b/src/js/mist_main_load.js index 74f5a81..1ae2247 100644 --- a/src/js/mist_main_load.js +++ b/src/js/mist_main_load.js @@ -102,7 +102,10 @@ rest_promises.push(tl.getTimeline()) // WebSocket接続が無効な場合は自動更新タイマーをセット if (tl.pref.disable_websocket) tl.initAutoReloader() - else tl.setSocketParam() + else { // WebSocket通信する場合は自動インプレッション更新タイマーをセット + tl.setSocketParam() + tl.initAutoMerger() + } }) // タイムラインをDOMにバインド gp.onLoadTimeline(rest_promises) diff --git a/src/js/module/class_preference.js b/src/js/module/class_preference.js index 8091b55..69f574b 100644 --- a/src/js/module/class_preference.js +++ b/src/js/module/class_preference.js @@ -66,7 +66,7 @@ class Preference { "chat_omit" : pref?.font_size?.chat_omit ?? 11, // チャット(省略) "chat_quote" : pref?.font_size?.chat_quote ?? 11, // チャット(引用) "list" : pref?.font_size?.list ?? 13, // リスト - "media" : pref?.font_size?.media ?? 13 // メディア + "media" : pref?.font_size?.media ?? 13 // メディア }, this.media_height_limit = { // メディアの高さ制限 "default" : pref?.media_height_limit?.default ?? 240, // ノーマル @@ -79,6 +79,10 @@ class Preference { "default" : pref?.contents_limit?.default ?? 250, // ノーマル "chat" : pref?.contents_limit?.chat ?? 140 // チャット }, + this.tl_impression = { // タイムラインインプレッション表示 + "enabled" : pref?.tl_impression?.enabled ?? false, // 有効/無効 + "span" : pref?.tl_impression?.span ?? 3 // 更新間隔 + }, this.history_limit = pref?.history_limit ?? 200, // 送信履歴件数 this.reaction_history_limit = pref?.reaction_history_limit ?? 20, // リアクション履歴件数 this.scroll_speed = { // スクロールスピード @@ -328,6 +332,10 @@ class Preference { $("#__txt_gen_content_limit_default") .val(Preference.GENERAL_PREFERENCE.contents_limit?.default) $("#__txt_gen_content_limit_chat") .val(Preference.GENERAL_PREFERENCE.contents_limit?.chat) + // タイムラインインプレッション表示 + $("#__chk_gen_show_tl_impression") .prop("checked", Preference.GENERAL_PREFERENCE.tl_impression?.enabled) + $("#__txt_gen_tl_impression_span") .val(Preference.GENERAL_PREFERENCE.tl_impression?.span) + // 履歴件数 $("#__txt_gen_history_limit") .val(Preference.GENERAL_PREFERENCE.history_limit) $("#__txt_gen_reaction_history_limit") .val(Preference.GENERAL_PREFERENCE.reaction_history_limit) @@ -422,6 +430,10 @@ class Preference { "default" : $("#__txt_gen_content_limit_default").val(), "chat" : $("#__txt_gen_content_limit_chat").val(), }, + "tl_impression": { // タイムラインインプレッション表示 + "enabled" : $("#__chk_gen_show_tl_impression").prop("checked"), + "span" : $("#__txt_gen_tl_impression_span").val() + }, "history_limit" : $("#__txt_gen_history_limit").val(), "reaction_history_limit" : $("#__txt_gen_reaction_history_limit").val(), "scroll_speed": { // スクロールスピード diff --git a/src/js/module/class_status.js b/src/js/module/class_status.js index 856ba16..a7ea1d6 100644 --- a/src/js/module/class_status.js +++ b/src/js/module/class_status.js @@ -1385,6 +1385,9 @@ class Status { } get impression_section() { + // インプレッション表示をしない場合は無効化 + if (!Preference.GENERAL_PREFERENCE.tl_impression?.enabled) return '' + let html = '
    ' if ((this.reactions?.length ?? 0) > 0 || this.count_fav > 0) { // インプレッション(反応とリアクション) // リプライ数とブースト/リノート数(あるやつだけ表示) diff --git a/src/js/module/class_timeline.js b/src/js/module/class_timeline.js index 8ed5f9b..4d0ac69 100644 --- a/src/js/module/class_timeline.js +++ b/src/js/module/class_timeline.js @@ -195,6 +195,27 @@ class Timeline { })(), this.pref.reload_span * 60000) } + async initAutoMerger() { + if (!Preference.GENERAL_PREFERENCE.tl_impression?.enabled + || this.pref.timeline_type == 'notification') return // 通知は実行しない + if (!this.reload_timer_id) clearInterval(this.reload_timer_id) // 実行中の場合は一旦削除 + this.reload_timer_id = setInterval(() => this.mergeImpressions(), + Preference.GENERAL_PREFERENCE.tl_impression?.span * 60000) + } + + async mergeImpressions() { + // 最新のタイムラインを取得 + const recent = await this.getTimeline() + const group = this.parent_group + + recent.forEach(post => { + if (!group.status_map.has(post.status_key)) return // ないときは省略 + group.status_map.set(post.status_key, post) // ステータスを更新 + // インプレッションの表示内容を更新 + group.getStatusElement(post.status_key).find('.impressions').replaceWith(post.impression_section) + }) + } + /** * #Method * このタイムラインから外部インスタンスにWebSocket接続する diff --git a/src/pref_general.html b/src/pref_general.html index 96ca7d0..f6ee6c7 100644 --- a/src/pref_general.html +++ b/src/pref_general.html @@ -460,6 +460,22 @@
    ユーザープロフィール
    +
    タイムラインインプレッション表示 + +
    +
    +
      +
    • + + +
      • +
    • + 分 +
      • +
    +
    送信履歴の最大保存件数 From 775a432ce4e2d4488d59c9811f804f1d3f92097b Mon Sep 17 00:00:00 2001 From: tizerm Date: Sat, 22 Jun 2024 21:58:00 +0900 Subject: [PATCH 07/11] =?UTF-8?q?=E3=82=A4=E3=83=B3=E3=83=97=E3=83=AC?= =?UTF-8?q?=E3=83=83=E3=82=B7=E3=83=A7=E3=83=B3=E3=82=BB=E3=82=AF=E3=82=B7?= =?UTF-8?q?=E3=83=A7=E3=83=B3=E3=81=AB=E3=83=AA=E3=83=A2=E3=83=BC=E3=83=88?= =?UTF-8?q?=E3=83=95=E3=82=A7=E3=83=83=E3=83=81=E3=83=9C=E3=82=BF=E3=83=B3?= =?UTF-8?q?=E3=82=92=E8=BF=BD=E5=8A=A0.?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/css/mist_timeline.css | 36 +++++++++++++++++++++++++++++++ src/js/mist_main_event.js | 10 +++++++++ src/js/module/class_preference.js | 2 +- src/js/module/class_status.js | 35 ++++++++++++++++++++++-------- src/js/module/class_user.js | 2 +- 5 files changed, 74 insertions(+), 11 deletions(-) diff --git a/src/css/mist_timeline.css b/src/css/mist_timeline.css index 04c58d2..1e69731 100644 --- a/src/css/mist_timeline.css +++ b/src/css/mist_timeline.css @@ -579,8 +579,11 @@ /*=== Impressions Info ===============================================================*/ > .impressions { + position: relative; background-color: rgba(31,31,31,0.683); border-radius: 8px; + color: #bbbbbb; + &:empty { display: none; } > .counter { display: inline-block; border-radius: 12px; @@ -591,6 +594,39 @@ font-family: Arial, "メイリオ", sans-selif; } > .reaction_section { display: inline; } + > .count_reaction_total { + background-image: none; + padding-left: 8px; + } + > .warn_remote, > .__fetch_remote_impression { + display: inline-block; + border-radius: 12px; + vertical-align: text-bottom; + > img { + width: 24px; + height: 24px; + vertical-align: text-bottom; + } + &.warn_remote { background-color: #a10000; } + &.__fetch_remote_impression { + position: absolute; + bottom: 0px; + right: 0px; + } + } + > .__fetch_remote_impression+.__tooltip { + display: none; + position: absolute; + top: -36px; + right: 0px; + padding: 2px 6px; + border: solid 1px #cccccc; + background-color: rgba(82,66,62,0.88); + color: #ffffff; + font-size: 14px; + border-radius: 8px; + } + > .__fetch_remote_impression:hover+.__tooltip { display: inline-block; } } /*=== Detail Info ====================================================================*/ diff --git a/src/js/mist_main_event.js b/src/js/mist_main_event.js index 33e1f3d..3b0e2f8 100644 --- a/src/js/mist_main_event.js +++ b/src/js/mist_main_event.js @@ -761,6 +761,16 @@ $(document).on("click", ".__on_datelink", e => Status.getStatus($(e.target).closest("li").attr("name")).then(post => post.createDetailWindow())) + if (Preference.GENERAL_PREFERENCE.tl_impression?.enabled) + $(document).on("click", ".__fetch_remote_impression", e => { + const target_li = $(e.target).closest("li") + Status.getStatus(target_li.attr("name")).then(post => { + // インプレッションセクションを最新の状態で置き換える + target_li.find('.impressions').replaceWith(post.impression_section) + if (post.platform == 'Misskey') Emojis.replaceDomAsync(target_li.find('.impressions'), post.host) + }) + }) + /** * #Event #Hold * リストレイアウトの投稿本体を長押し. diff --git a/src/js/module/class_preference.js b/src/js/module/class_preference.js index 69f574b..496c865 100644 --- a/src/js/module/class_preference.js +++ b/src/js/module/class_preference.js @@ -432,7 +432,7 @@ class Preference { }, "tl_impression": { // タイムラインインプレッション表示 "enabled" : $("#__chk_gen_show_tl_impression").prop("checked"), - "span" : $("#__txt_gen_tl_impression_span").val() + "span" : ($("#__txt_gen_tl_impression_span").val() || 3) }, "history_limit" : $("#__txt_gen_history_limit").val(), "reaction_history_limit" : $("#__txt_gen_reaction_history_limit").val(), diff --git a/src/js/module/class_status.js b/src/js/module/class_status.js index a7ea1d6..14d6641 100644 --- a/src/js/module/class_status.js +++ b/src/js/module/class_status.js @@ -32,7 +32,7 @@ class Status { this.allow_context = !(this.type == 'notification' && ['follow', 'follow_request'].includes(json.type)) original_date = json.created_at // ブーストフラグとブースト関係の専用項目 - this.reblog = json.reblog ? true : false + this.reblog = !!json.reblog this.reblog_by = this.reblog ? json.account.acct : null this.reblog_by_icon = this.reblog ? json.account.avatar : null this.reblog_origin_time = this.reblog ? new RelativeTime(new Date(json.reblog.created_at)) : null @@ -44,6 +44,7 @@ class Status { this.notif_id = json.status?.id // 通知のID this.use_emoji_cache = false // Mastodonの場合絵文字キャッシュは使わない + this.remote_flg = data.account.acct.match(/@/) // ユーザーに関するデータ this.user = { @@ -163,6 +164,7 @@ class Status { // Misskeyの場合、自鯖の絵文字が渡ってこないのでキャッシュを利用する this.use_emoji_cache = !data.uri if (this.notif_type == 'reaction') this.reaction_emoji = data.reaction // リアクションを保存 + this.remote_flg = !!data.user?.host // ユーザーに関するデータ this.user = { @@ -1389,7 +1391,14 @@ class Status { if (!Preference.GENERAL_PREFERENCE.tl_impression?.enabled) return '' let html = '
    ' - if ((this.reactions?.length ?? 0) > 0 || this.count_fav > 0) { // インプレッション(反応とリアクション) + if ((this.reactions?.length ?? 0) > 0 || this.count_reply > 0 + || this.count_reblog > 0 || this.count_fav > 0) { // インプレッション(反応とリアクション) + // リモートの投稿の場合は警告アイコンを表示 + if (this.remote_flg) html += ` + + + + ` // リプライ数とブースト/リノート数(あるやつだけ表示) if (this.count_reply > 0) html += ` ${this.count_reply} @@ -1398,7 +1407,7 @@ class Status { `; switch (this.platform) { case 'Mastodon': // Mastodon // ふぁぼの表示だけする - html += `${this.count_fav}` + if (this.count_fav > 0) html += `${this.count_fav}` break case 'Misskey': // Misskey let reaction_html = '' // リアクションHTMLは後ろにつける @@ -1415,16 +1424,24 @@ class Status { ` reaction_count += Number(reaction.count) }) - // 先にリアクションの合計値を表示 - const emojis = this.host_emojis ?? Emojis.get(this.host) - html += ` -
    ${emojis.replace(reaction_html)}
    - ${reaction_count} - ` + if (reaction_count > 0) { // リアクションが存在する場合はカウンターをバインド + const emojis = this.host_emojis ?? Emojis.get(this.host) + // 絵文字キャッシュが取得できる場合のみ置換処理を実行 + if (emojis) reaction_html = emojis.replace(reaction_html) + html += ` +
    ${reaction_html}
    + ${reaction_count} + ` + } break default: break } + if (this.remote_flg) html /* リモートフェッチボタンの表示 */ += ` + + リモートのインプレッションを表示 + ` } html += '
    ' return html diff --git a/src/js/module/class_user.js b/src/js/module/class_user.js index d9cc4e8..b36e3f7 100644 --- a/src/js/module/class_user.js +++ b/src/js/module/class_user.js @@ -90,7 +90,7 @@ class User { this.all_account_flg = arg.auth // Mistdonに認証情報のあるホストの場合は対象アカウントを引っ張ってくる this.authorized = Account.getByDomain(host) - if (this.platform == 'Misskey') this.use_emoji_cache = this.authorized ? true : false + if (this.platform == 'Misskey') this.use_emoji_cache = !!this.authorized this.user_uuid = crypto.randomUUID() } From 7d5e00bb29f8261764045ce8c80d04f9571960b5 Mon Sep 17 00:00:00 2001 From: tizerm Date: Sun, 23 Jun 2024 16:29:27 +0900 Subject: [PATCH 08/11] =?UTF-8?q?=E3=83=A1=E3=83=87=E3=82=A3=E3=82=A2?= =?UTF-8?q?=E3=83=AC=E3=82=A4=E3=82=A2=E3=82=A6=E3=83=88=E3=81=AE=E3=83=AC?= =?UTF-8?q?=E3=82=A4=E3=82=A2=E3=82=A6=E3=83=88=E3=82=92=E5=BE=AE=E4=BF=AE?= =?UTF-8?q?=E6=AD=A3.=20=E3=82=AB=E3=82=B9=E3=82=BF=E3=83=A0=E7=B5=B5?= =?UTF-8?q?=E6=96=87=E5=AD=97=E3=81=ABalt=E5=B1=9E=E6=80=A7=E3=82=92?= =?UTF-8?q?=E8=BF=BD=E5=8A=A0.?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/css/mist_timeline.css | 25 ++++++++++++++++--------- src/js/module/class_emojis.js | 18 +++++++++--------- src/js/module/class_status.js | 12 ++++++++---- src/js/module/class_timeline.js | 3 ++- 4 files changed, 35 insertions(+), 23 deletions(-) diff --git a/src/css/mist_timeline.css b/src/css/mist_timeline.css index 1e69731..11449ce 100644 --- a/src/css/mist_timeline.css +++ b/src/css/mist_timeline.css @@ -1009,15 +1009,22 @@ > .content { position: relative; width: 100%; - min-height: 1.15em; - >.main_content { - position: absolute; - margin: 2px 8px; - padding: 0px; - width: calc(100% - 12px); - overflow: hidden; - white-space: nowrap; - text-overflow: ellipsis; + > .main_content { + display: inline-block; + margin: 0px; + padding: 2px 8px; + width: calc(100% - 16px); + > .inner_content { + display: inline-block; + position: absolute; + width: calc(100% - 48px); + top: 2px; + left: 36px; + overflow: hidden; + white-space: nowrap; + text-overflow: ellipsis; + } + &.expand_label { background-image: url("../resources/ic_right.png"); } } } > .media a.__on_media_expand { diff --git a/src/js/module/class_emojis.js b/src/js/module/class_emojis.js index 08fd466..5cbd8ec 100644 --- a/src/js/module/class_emojis.js +++ b/src/js/module/class_emojis.js @@ -119,14 +119,14 @@ class Emojis { if (!text) return "" return text.replace(new RegExp(':[a-zA-Z0-9_]+:', 'g'), match => { const target = this.emoji_map.get(match) - if (target) return `` + if (target) return `:${target.shortcode}:` else return match }) } else { // 投稿データに付随してきた絵文字データの場合 // 文字の入力がない場合は空文字を返却 if (!text) return "" - return this.list.reduce((str, emoji) => str.replace( - new RegExp(`:${emoji.shortcode}:`, 'g'), ``), text) + return this.list.reduce((str, emoji) => str.replace(new RegExp(`:${emoji.shortcode}:`, 'g'), + `:${emoji.shortcode}:`), text) } } @@ -152,8 +152,8 @@ class Emojis { const emoji_map = auth.emojis.emoji_map return shortcodes.reduce((str, code) => { const emoji = emoji_map.get(code) - return str.replace( - new RegExp(emoji.shortcode, 'g'), ``) + return str.replace(new RegExp(emoji.shortcode, 'g'), + `:${emoji.shortcode}:`) }, text) } else { // 認証アカウント外のインスタンスの場合は現地のAPIから絵文字を取得 const emoji_promises = [] @@ -174,8 +174,8 @@ class Emojis { // 取得に成功したショートコードを抜き出して置換処理を実行 return await Promise.allSettled(emoji_promises).then(results => { return results.filter(res => res.status == 'fulfilled').map(res => res.value) - .reduce((str, emoji) => str.replace( - new RegExp(emoji.shortcode, 'g'), ``), text) + .reduce((str, emoji) => str.replace(new RegExp(emoji.shortcode, 'g'), + `:${emoji.shortcode}:`), text) }) } } @@ -221,8 +221,8 @@ class Emojis { // 取得に成功したショートコードを抜き出して置換処理を実行 const replace_text = await Promise.allSettled(emoji_promises).then(results => { return results.filter(res => res.status == 'fulfilled').map(res => res.value) - .reduce((str, emoji) => str.replace( - new RegExp(emoji.shortcode, 'g'), ``), text) + .reduce((str, emoji) => str.replace(new RegExp(emoji.shortcode, 'g'), + `:${emoji.shortcode}:`), text) }) jqelm.html(replace_text) } diff --git a/src/js/module/class_status.js b/src/js/module/class_status.js index 14d6641..232e90f 100644 --- a/src/js/module/class_status.js +++ b/src/js/module/class_status.js @@ -819,7 +819,7 @@ class Status { let alias = null if (this.reaction_emoji.match(/^:[a-zA-Z0-9_]+:$/g)) { // カスタム絵文字 const emoji = this.host_emojis.emoji_map.get(this.reaction_emoji) - if (emoji) alias = `` + if (emoji) alias = `:${emoji.shortcode}:` else alias = `${this.reaction_emoji} (未キャッシュです)` } else alias = this.reaction_emoji // Unicode絵文字はそのまま渡す html += `
    ${alias}
    ` @@ -1264,11 +1264,15 @@ class Status { // カスタム絵文字が渡ってきていない場合はアプリキャッシュを使う target_emojis = this.use_emoji_cache && this.host_emojis ? this.host_emojis : this.emojis if (this.cw_text) html /* CWテキスト */ += ` - ${target_emojis.replace(this.cw_text)} - `; html += '
    ' +
    + ${target_emojis.replace(this.cw_text)} + `; else html /* 本文(絵文字を置換) */ += ` +
    + ${target_emojis.replace(this.content_text)} + ` - html /* 本文(絵文字を置換) */ += target_emojis.replace(this.content_text) html += ` +  
    ` diff --git a/src/js/module/class_timeline.js b/src/js/module/class_timeline.js index 4d0ac69..d9b7cf4 100644 --- a/src/js/module/class_timeline.js +++ b/src/js/module/class_timeline.js @@ -197,7 +197,8 @@ class Timeline { async initAutoMerger() { if (!Preference.GENERAL_PREFERENCE.tl_impression?.enabled - || this.pref.timeline_type == 'notification') return // 通知は実行しない + || this.pref.timeline_type == 'notification' + || this.parent_group.pref.tl_layout == 'gallery') return // 通知とギャラリーは実行しない if (!this.reload_timer_id) clearInterval(this.reload_timer_id) // 実行中の場合は一旦削除 this.reload_timer_id = setInterval(() => this.mergeImpressions(), Preference.GENERAL_PREFERENCE.tl_impression?.span * 60000) From 149ae3aa2c0a2d504361baa1457a071faa77f1bd Mon Sep 17 00:00:00 2001 From: tizerm Date: Sat, 29 Jun 2024 01:20:09 +0900 Subject: [PATCH 09/11] =?UTF-8?q?=E3=82=BF=E3=82=A4=E3=83=A0=E3=83=A9?= =?UTF-8?q?=E3=82=A4=E3=83=B3=E3=82=A4=E3=83=B3=E3=83=97=E3=83=AC=E3=83=83?= =?UTF-8?q?=E3=82=B7=E3=83=A7=E3=83=B3=E3=81=AB=E8=87=AA=E5=88=86=E3=81=AE?= =?UTF-8?q?=E5=8F=8D=E5=BF=9C=E3=81=AE=E6=83=85=E5=A0=B1=E3=81=A8=E6=8A=95?= =?UTF-8?q?=E7=A8=BF=E3=81=AE=E5=B1=9E=E6=80=A7=E3=82=92=E8=BF=BD=E5=8A=A0?= =?UTF-8?q?.?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/css/mist_timeline.css | 31 ++++++++++++++++++++--------- src/js/module/class_preference.js | 3 +++ src/js/module/class_status.js | 33 ++++++++++++++++++++++++++++++- src/js/module/class_timeline.js | 1 + 4 files changed, 58 insertions(+), 10 deletions(-) diff --git a/src/css/mist_timeline.css b/src/css/mist_timeline.css index 11449ce..7547dc7 100644 --- a/src/css/mist_timeline.css +++ b/src/css/mist_timeline.css @@ -598,7 +598,7 @@ background-image: none; padding-left: 8px; } - > .warn_remote, > .__fetch_remote_impression { + .warn_remote, .__fetch_remote_impression, .bottom_info { display: inline-block; border-radius: 12px; vertical-align: text-bottom; @@ -608,25 +608,38 @@ vertical-align: text-bottom; } &.warn_remote { background-color: #a10000; } - &.__fetch_remote_impression { - position: absolute; - bottom: 0px; - right: 0px; + } + > .info_section { + border-radius: 12px; + background-color: rgba(0,172,255,0.2); + position: absolute; + bottom: 0px; + right: 0px; + &:empty { display: none; } + .flg_reblog { + filter: brightness(80%) sepia(100%) hue-rotate(45deg) saturate(200%); + } + .flg_fav { + filter: brightness(80%) sepia(100%) saturate(200%); + } + .flg_bookmark { + filter: brightness(50%) sepia(100%) hue-rotate(330deg) saturate(300%); } } - > .__fetch_remote_impression+.__tooltip { + .__fetch_remote_impression+.__tooltip { display: none; position: absolute; top: -36px; right: 0px; padding: 2px 6px; border: solid 1px #cccccc; + width: max-content; background-color: rgba(82,66,62,0.88); color: #ffffff; font-size: 14px; border-radius: 8px; } - > .__fetch_remote_impression:hover+.__tooltip { display: inline-block; } + .__fetch_remote_impression:hover+.__tooltip { display: inline-block; } } /*=== Detail Info ====================================================================*/ @@ -1012,13 +1025,13 @@ > .main_content { display: inline-block; margin: 0px; - padding: 2px 8px; + padding: 6px 8px; width: calc(100% - 16px); > .inner_content { display: inline-block; position: absolute; width: calc(100% - 48px); - top: 2px; + top: 5px; left: 36px; overflow: hidden; white-space: nowrap; diff --git a/src/js/module/class_preference.js b/src/js/module/class_preference.js index 496c865..1cc1ee1 100644 --- a/src/js/module/class_preference.js +++ b/src/js/module/class_preference.js @@ -493,6 +493,9 @@ class Preference { if (Preference.GENERAL_PREFERENCE.default_textwindow) toggleTextarea() if (Preference.GENERAL_PREFERENCE.hide_additional_account) // 投稿オプションの投稿アカウントを自動で閉じる $("#header>#post_options .additional_users .__on_option_close").click() + + if (Preference.GENERAL_PREFERENCE.tl_impression.enabled) // インプレッション表示をする場合は簡易ボタン削除 + $("#pop_expand_action>.std_action>.__short_impression").remove() } /** diff --git a/src/js/module/class_status.js b/src/js/module/class_status.js index 232e90f..594ce54 100644 --- a/src/js/module/class_status.js +++ b/src/js/module/class_status.js @@ -132,6 +132,10 @@ class Status { this.count_reblog = data.reblogs_count this.count_fav = data.favourites_count + this.flg_reblog = data.reblogged + this.flg_fav = data.favourited + this.flg_bookmark = data.bookmarked + break case 'Misskey': // Misskey this.notif_type = this.type == 'notification' ? json.type : null @@ -254,6 +258,7 @@ class Status { this.reactions = reactions this.count_fav = reactions.reduce((sum, react) => sum + Number(react.count), 0) } + this.reaction_self = data.myReaction break default: break @@ -1408,7 +1413,9 @@ class Status { ${this.count_reply} `; if (this.count_reblog > 0) html += ` ${this.count_reblog} - `; switch (this.platform) { + ` + let reaction_self = null + switch (this.platform) { case 'Mastodon': // Mastodon // ふぁぼの表示だけする if (this.count_fav > 0) html += `${this.count_fav}` @@ -1436,16 +1443,40 @@ class Status {
    ${reaction_html}
    ${reaction_count} ` + if (this.reaction_self && emojis) reaction_self = // 自分のリアクションを表示 + emojis.replace(`:${this.reaction_self.substring(1, this.reaction_self.lastIndexOf('@'))}:`) } break default: break } + html += '
    ' + if (this.flg_reblog) html += '' + if (this.flg_fav) html += '' + if (this.flg_bookmark) html += '' + if (reaction_self) html += `${reaction_self}` + if (this.reply_to) html += '' + switch (this.visibility) { // 公開範囲がパブリック以外の場合は識別アイコンを配置 + case 'unlisted': + case 'home': // ホーム + html += '' + break + case 'private': + case 'followers': // フォロ限 + html += '' + break + default: + break + } + if (this.from_timeline?.pref?.timeline_type != 'channel' && this.local_only) // 連合なし + html += '' if (this.remote_flg) html /* リモートフェッチボタンの表示 */ += ` リモートのインプレッションを表示 ` + html += '
    ' + } html += '
    ' return html diff --git a/src/js/module/class_timeline.js b/src/js/module/class_timeline.js index d9b7cf4..d716d84 100644 --- a/src/js/module/class_timeline.js +++ b/src/js/module/class_timeline.js @@ -86,6 +86,7 @@ class Timeline { default: break } + // 投稿データをソートマップ可能なオブジェクトにして返却 const posts = [] response.forEach(p => posts.push(new Status(p, this, this.target_account))) From abc201f23e2f6bc70873c430148ec7c85aca5233 Mon Sep 17 00:00:00 2001 From: tizerm Date: Sun, 7 Jul 2024 15:24:33 +0900 Subject: [PATCH 10/11] =?UTF-8?q?=E3=83=AA=E3=83=A2=E3=83=BC=E3=83=88?= =?UTF-8?q?=E3=82=A4=E3=83=B3=E3=83=97=E3=83=AC=E3=83=83=E3=82=B7=E3=83=A7?= =?UTF-8?q?=E3=83=B3=E3=81=AB=E9=96=A2=E3=81=99=E3=82=8B=E3=83=90=E3=82=B0?= =?UTF-8?q?=E3=82=92=E4=BF=AE=E6=AD=A3.=20Doc=E3=82=B3=E3=83=A1=E3=83=B3?= =?UTF-8?q?=E3=83=88=E3=82=92=E8=BF=BD=E8=A8=98.?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/js/mist_main_event.js | 14 +++++++++++++- src/js/mist_ui.js | 8 +++++++- src/js/module/class_status.js | 17 +++++++++++++++-- src/js/module/class_timeline.js | 8 ++++++++ 4 files changed, 43 insertions(+), 4 deletions(-) diff --git a/src/js/mist_main_event.js b/src/js/mist_main_event.js index 3b0e2f8..de87871 100644 --- a/src/js/mist_main_event.js +++ b/src/js/mist_main_event.js @@ -761,13 +761,21 @@ $(document).on("click", ".__on_datelink", e => Status.getStatus($(e.target).closest("li").attr("name")).then(post => post.createDetailWindow())) + /** + * #Event + * リモートインプレッション取得ボタン. + * => リモートのインプレッション数を直接取得してタイムラインインプレッションを書き換える. + */ if (Preference.GENERAL_PREFERENCE.tl_impression?.enabled) $(document).on("click", ".__fetch_remote_impression", e => { const target_li = $(e.target).closest("li") Status.getStatus(target_li.attr("name")).then(post => { // インプレッションセクションを最新の状態で置き換える target_li.find('.impressions').replaceWith(post.impression_section) - if (post.platform == 'Misskey') Emojis.replaceDomAsync(target_li.find('.impressions'), post.host) + if (post.platform == 'Misskey') { // Misskeyの場合未変換のカスタム絵文字を置換 + target_li.find('.impressions .__yet_replace_reaction:not(:empty)').removeClass('__yet_replace_reaction') + Emojis.replaceDomAsync(target_li.find('.impressions .__yet_replace_reaction'), post.host) + } }) }) @@ -1305,6 +1313,10 @@ $(document).on("click", "#pop_context_menu>.ui_menu ul#__menu_post_open_layout>li", e => Status.TEMPORARY_CONTEXT_STATUS.openScrollableWindow($(e.target).closest("li").attr("name"))) + /** + * #Event #Contextmenu + * 投稿系メニュー: 前後のLTLを取得. + */ $(document).on("click", "#pop_context_menu>.ui_menu ul#__menu_post_open_localtimeline>li", e => Status.getStatus($("#pop_context_menu").attr("name")) .then(post => post.openLocalTimelineWindow($(e.target).closest("li").attr("name")))) diff --git a/src/js/mist_ui.js b/src/js/mist_ui.js index 2a861e4..4d688ab 100644 --- a/src/js/mist_ui.js +++ b/src/js/mist_ui.js @@ -254,7 +254,7 @@ function getRandomColor() { /** * #Util - * 要素を表示したら続きを読み込むスクロールローダーを生成する + * 要素を表示したら続きを読み込むスクロールローダーを生成する. * * @param arg パラメータオブジェクト */ @@ -288,6 +288,12 @@ function createScrollLoader(arg) { observer.observe(arg.target.find(".__scroll_loader").get(0)) } +/** + * #Util + * 上方向に続きを読み込むローダーボタンを生成する. + * + * @param arg パラメータオブジェクト + */ function createTopLoader(arg) { // 最初に取得したデータをもとにデータのバインド処理を行う(返り値はページング用since_id) const since_id = arg.bind(arg.data, arg.target) diff --git a/src/js/module/class_status.js b/src/js/module/class_status.js index 594ce54..265b48e 100644 --- a/src/js/module/class_status.js +++ b/src/js/module/class_status.js @@ -1205,7 +1205,7 @@ class Status { const emoji = this.host_emojis.emoji_map.get(this.reaction_emoji) if (emoji) alias = `` else alias = '×' - } else if (this.reaction_emoji.match(/^[a-zA-Z0-9\.:@_]+$/g)) // リモートの絵文字 + } else if (this.reaction_emoji.match(/^[a-zA-Z0-9\.\-:@_]+$/g)) // リモートの絵文字 alias = '' else alias = this.reaction_emoji // Unicode絵文字はそのまま渡す jqelm.find('.notif_footer').prepend(alias) @@ -1371,6 +1371,12 @@ class Status { `)) } + /** + * #Method + * メディア表示セクションのHTMLを返却. + * + * @param img_class 付与するグリッドサイズクラス + */ bindMediaSection(img_class) { let html = '
    ' if (this.sensitive) html /* 閲覧注意 */ += ` @@ -1395,6 +1401,7 @@ class Status { return html } + // Getter: タイムラインインプレッションセクション get impression_section() { // インプレッション表示をしない場合は無効化 if (!Preference.GENERAL_PREFERENCE.tl_impression?.enabled) return '' @@ -1427,7 +1434,7 @@ class Status { if (reaction.url) reaction_html /* URLの取得できているカスタム絵文字 */ += ` `; else if (reaction.shortcode.lastIndexOf('@') > 0) reaction_html /* 取得できなかった絵文字 */ += ` - + :${reaction.shortcode.substring(1, reaction.shortcode.lastIndexOf('@'))}: `; else reaction_html /* それ以外はそのまま表示 */ += ` @@ -2025,6 +2032,12 @@ class Status { scroll_tl.createLoadableTimeline(this) } + /** + * #Method + * この投稿の前後のローカルタイムラインを取得するウィンドウを生成 + * + * @param layout タイムラインレイアウト + */ openLocalTimelineWindow(layout) { const auth_account = Account.getByDomain(this.host) let tl_pref = { // タイムライン設定 diff --git a/src/js/module/class_timeline.js b/src/js/module/class_timeline.js index d716d84..42c0c16 100644 --- a/src/js/module/class_timeline.js +++ b/src/js/module/class_timeline.js @@ -196,6 +196,10 @@ class Timeline { })(), this.pref.reload_span * 60000) } + /** + * #Method + * インプレッション自動マージタイマーをセットする + */ async initAutoMerger() { if (!Preference.GENERAL_PREFERENCE.tl_impression?.enabled || this.pref.timeline_type == 'notification' @@ -205,6 +209,10 @@ class Timeline { Preference.GENERAL_PREFERENCE.tl_impression?.span * 60000) } + /** + * #Method + * タイムラインを取得して最新のインプレッション情報をセットする + */ async mergeImpressions() { // 最新のタイムラインを取得 const recent = await this.getTimeline() From a019bca9000608c2fe5b6924409ca175630e26fd Mon Sep 17 00:00:00 2001 From: tizerm Date: Sun, 7 Jul 2024 19:13:37 +0900 Subject: [PATCH 11/11] =?UTF-8?q?=E3=83=98=E3=83=AB=E3=83=97=E3=82=92?= =?UTF-8?q?=E8=BF=BD=E8=A8=98.=20=E3=83=AC=E3=82=A4=E3=82=A2=E3=82=A6?= =?UTF-8?q?=E3=83=88=E3=81=AA=E3=81=A9=E5=BE=AE=E4=BF=AE=E6=AD=A3.?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- package.json | 2 +- src/css/mist_timeline.css | 10 ++++++++-- src/help/help_main.html | 29 +++++++++++++++++++++++++++-- src/help/help_tips.html | 2 ++ src/js/module/class_instance.js | 3 +++ src/js/module/class_status.js | 12 +++++++----- src/js/module/class_timeline.js | 4 +++- 7 files changed, 51 insertions(+), 11 deletions(-) diff --git a/package.json b/package.json index c884844..eafd571 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "Mistdon", - "version": "1.3.0a", + "version": "1.3.0", "description": "The integrated client application of Mastodon and Misskey.", "main": "main.js", "scripts": { diff --git a/src/css/mist_timeline.css b/src/css/mist_timeline.css index 7547dc7..7dde089 100644 --- a/src/css/mist_timeline.css +++ b/src/css/mist_timeline.css @@ -704,10 +704,16 @@ cursor: pointer; } } + > .count_reaction_list { + background-color: rgba(31,31,31,0.683); + border-radius: 8px; + } .counter { width: calc(33% - 48px); } .count_reaction { - background-color: rgba(0,172,255,0.2); - padding-right: 8px; + color: #bbbbbb; + font-weight: normal; + padding: 0px; + margin: 0px 2px;; } } diff --git a/src/help/help_main.html b/src/help/help_main.html index acaebf8..0418d1e 100644 --- a/src/help/help_main.html +++ b/src/help/help_main.html @@ -707,12 +707,19 @@

    投稿本体

    一覧化されたハッシュタグをクリックすると、検索ウィンドウが開いて自動的にハッシュタグ検索を行います。

    -
    インプレッション表示(一部の通知と詳細表示のみ)
    +
    インプレッション表示

    詳細表示画面では、投稿にどれぐらい反応があったかの数字が表示されます。
    リプライ数、ブースト/リノート数、Mastodonの場合はお気に入り数、Misskeyの場合はリアクション数合計値と個別のリアクションが表示されます。

    +

    + v1.3.0から全体オプションの「タイムラインインプレッション表示」をオンにするとタイムライン上の表示でもリプライ/ブースト/リノート/お気に入り/リアクションの数が表示されるようになりました。
    + この表示の場合、リモートの投稿は正確な数字が表示できないため、 + + のボタンをクリックすることで詳細表示を開かなくてもリモートのインプレッション数が表示できます。
    + (※この機能は一定時間でインプレッション数を更新する処理を行っているため、リモートの投稿を取得しても数分経つとまたもとの表示に戻ります。一時的な確認としてお使いください。) +

    投稿時間
    @@ -837,6 +844,17 @@

    簡易アクションバーとコンテキストメ そのため「カラム上はチャットだけど遡るときはリストで見たい」、「メディアをまとめて見たいのでギャラリーで遡りたい」というようなことが可能になります。

    +
    前後のLTLを取得
    +
    +

    + Mastodon推奨の機能です。Misskeyでも一応使用できますが一定時間よりも古い投稿は正しく取得できない可能性があります。
    + v1.3.0からの機能で、「対象のユーザーが所属しているインスタンスのローカルタイムラインを対象の投稿を起点にして前後を取得」します。
    + どのタイムラインから参照した投稿であっても必ず「対象ユーザーの所属インスタンスのローカルタイムライン」を見に行くため、対象インスタンス内でのローカルタイムラインの前後の文脈を確認したり、他のインスタンスのローカルタイムラインを一時的に覗き見ることができます。 +

    +

    + 特に対象のインスタンスがMastodonの場合は、外部リンク、ピン留め投稿、検索、お気に入り/ブックマークなどから「非常に古い投稿」に対してこのアクションを実行した場合、はるか昔のローカルタイムラインの内容を遡って表示することができます。 +

    +
    編集(Mastodon専用)

    @@ -1449,6 +1467,13 @@

    全体設定

    投稿履歴とアクティビティ履歴の最大保存件数を設定します。これを超えると古い順から履歴から消えていきます。

    +
    タイムラインインプレッション表示
    +
    +

    + オンにすると、お気に入り/ブースト/リノート/リアクションのついている投稿を詳細表示しなくてもタイムライン上で見られるようにします。
    + リアルタイム更新を有効にしているタイムラインのみ有効で、設定した更新間隔で内容を更新します。 +

    +
    リアクション履歴の最大保存件数

    @@ -1489,7 +1514,7 @@

    設定ファイルの場所について

    Mistdonについて

    -
    Current Version: 1.3.0a (2024/06/09)
    +
    Current Version: 1.3.0 (2024/07/07)

    Mistdonは、MastodonとMisskeyの統合Fediverseクライアントです。
    OSSですが基本的にはぜるま(@tizerm@mofu.kemo.no)(@tizerm@misskey.dev)が主導になって開発を行っています(というかコントリビューターは今のところいない……)。
    diff --git a/src/help/help_tips.html b/src/help/help_tips.html index bb4a233..bbd2877 100644 --- a/src/help/help_tips.html +++ b/src/help/help_tips.html @@ -61,6 +61,8 @@ サーバー側のエラーでリアルタイム更新が切断されているアカウントがある場合は左下に「再接続」が表示される。

  • Tips Misskeyのカスタム絵文字はキャッシュから表示している。表示されないときは左のメニューからキャッシュを更新してみよう。
    • +
  • Tips + タイムラインインプレッションはリモートのインプレッション数を正確に表示できない。右の表示アイコンをクリックしよう。
  • Tips 閲覧注意設定の画像は、自動展開する場合でも必ず閲覧注意だとわかるラベルが表示されている。リモートへ流す時の参考に。
  • Tips diff --git a/src/js/module/class_instance.js b/src/js/module/class_instance.js index ff72b73..5503270 100644 --- a/src/js/module/class_instance.js +++ b/src/js/module/class_instance.js @@ -560,6 +560,9 @@ class Instance { if (!domain) { // 空の場合はメッセージを初期化 target.text("(URLを入力してください)") return null + } else if (domain.match(new RegExp(`[/\?#:]`, 'g'))) { + target.text("!無効な文字が入力されています!") + return null } // ロード待ち画面を生成 target.html(" ").css('background-image', 'url("resources/illust/ani_wait.png")') diff --git a/src/js/module/class_status.js b/src/js/module/class_status.js index 265b48e..3bce9b3 100644 --- a/src/js/module/class_status.js +++ b/src/js/module/class_status.js @@ -894,10 +894,12 @@ class Status { ` reaction_count += Number(reaction.count) }) - // 先にリアクションの合計値を表示 - html += `${reaction_count}` - html += `
    ${reaction_html}
    ` + html /* リアクション合計とリアクション一覧を表示 */ += ` + + ${reaction_count} + +
    ${reaction_html}
    + ` break default: break @@ -2042,7 +2044,7 @@ class Status { const auth_account = Account.getByDomain(this.host) let tl_pref = { // タイムライン設定 "key_address": auth_account?.full_address, - "external": auth_account ? false : true, + "external": !auth_account, "host": this.host, "platform": this.platform, "color": auth_account?.pref.acc_color ?? getRandomColor(), diff --git a/src/js/module/class_timeline.js b/src/js/module/class_timeline.js index 42c0c16..f2b45c3 100644 --- a/src/js/module/class_timeline.js +++ b/src/js/module/class_timeline.js @@ -93,7 +93,9 @@ class Timeline { return posts } catch (err) { // 取得失敗時、取得失敗のtoastを表示してrejectしたまま次に処理を渡す console.log(err) - Notification.error(`${this.parent_column.pref.label_head}の${this.account_key}のタイムラインの取得に失敗しました.`) + if (this.parent_column?.pref?.label_head) // 通常タイムラインの取得ミス + Notification.error(`${this.parent_column.pref.label_head}の${this.account_key}のタイムラインの取得に失敗しました.`) + else Notification.error(`${this.host}のタイムラインの取得に失敗しました.`) return Promise.reject(err) } }