藍モード (#7687)

* wip

* wip

* シンボリックリンクやめた

* install lib dependency

* bring live2d assets from misskey-dev/assets

* refactor

* nanka iroiro

* コミット忘れ

* random motion

* wip

* run git submodule update --init

* コミット忘れ

* refactor

* fix bug

* Update misskey-assets

* lint

* lint

* lint

* 藍モード修正 (#7702)

* lazy load live2d script

* fix typo

* lazy load also widget

* hot link to cubism core

* https://github.com/misskey-dev/misskey/pull/7702/files#r695623821

* fix lint

* remove live2d stuff

* use iframe

* update

* Update gulpfile.ts

* update

* Update .gitattributes

* update

Co-authored-by: tamaina <tamaina@hotmail.co.jp>
This commit is contained in:
syuilo 2021-09-04 17:54:24 +09:00 committed by GitHub
parent e1a8b158e0
commit 8407702b38
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
20 changed files with 158 additions and 34 deletions

View file

@ -29,6 +29,8 @@ jobs:
steps: steps:
- uses: actions/checkout@v2 - uses: actions/checkout@v2
with:
submodules: true
- name: Use Node.js ${{ matrix.node-version }} - name: Use Node.js ${{ matrix.node-version }}
uses: actions/setup-node@v1 uses: actions/setup-node@v1
with: with:
@ -48,6 +50,8 @@ jobs:
runs-on: ubuntu-latest runs-on: ubuntu-latest
steps: steps:
- uses: actions/checkout@v2 - uses: actions/checkout@v2
with:
submodules: true
- uses: actions/setup-node@v1 - uses: actions/setup-node@v1
with: with:
node-version: 12.x node-version: 12.x

3
.gitmodules vendored Normal file
View file

@ -0,0 +1,3 @@
[submodule "misskey-assets"]
path = misskey-assets
url = https://github.com/misskey-dev/assets.git

View file

@ -20,6 +20,7 @@ RUN apk add --no-cache \
python3 \ python3 \
zlib-dev zlib-dev
RUN git submodule update --init
COPY package.json yarn.lock .yarnrc ./ COPY package.json yarn.lock .yarnrc ./
RUN yarn install RUN yarn install
COPY . ./ COPY . ./

View file

@ -83,10 +83,11 @@ Just `docker-compose up -d`. GLHF!
1. `git stash` 1. `git stash`
2. `git checkout master` 2. `git checkout master`
3. `git pull` 3. `git pull`
4. `git stash pop` 4. `git submodule update --init`
5. `docker-compose build` 5. `git stash pop`
6. Check [ChangeLog](../CHANGELOG.md) for migration information 6. `docker-compose build`
7. `docker-compose stop && docker-compose up -d` 7. Check [ChangeLog](../CHANGELOG.md) for migration information
8. `docker-compose stop && docker-compose up -d`
### How to execute [cli commands](manage.en.md): ### How to execute [cli commands](manage.en.md):
`docker-compose run --rm web node built/tools/mark-admin @example` `docker-compose run --rm web node built/tools/mark-admin @example`

View file

@ -50,10 +50,11 @@ Utilisez la commande `docker-compose up -d`. GLHF!
1. `git stash` 1. `git stash`
2. `git checkout master` 2. `git checkout master`
3. `git pull` 3. `git pull`
4. `git stash pop` 4. `git submodule update --init`
5. `docker-compose build` 5. `git stash pop`
6. Consultez le [ChangeLog](../CHANGELOG.md) pour avoir les éventuelles informations de migration 6. `docker-compose build`
7. `docker-compose stop && docker-compose up -d` 7. Consultez le [ChangeLog](../CHANGELOG.md) pour avoir les éventuelles informations de migration
8. `docker-compose stop && docker-compose up -d`
### Comment exécuter des [commandes](manage.fr.md) ### Comment exécuter des [commandes](manage.fr.md)
`docker-compose run --rm web node built/tools/mark-admin @example` `docker-compose run --rm web node built/tools/mark-admin @example`

View file

@ -83,10 +83,11 @@ docker-compose run --rm web yarn run init
1. `git stash` 1. `git stash`
2. `git checkout master` 2. `git checkout master`
3. `git pull` 3. `git pull`
4. `git stash pop` 4. `git submodule update --init`
5. `docker-compose build` 5. `git stash pop`
6. [ChangeLog](../CHANGELOG.md)でマイグレーション情報を確認する 6. `docker-compose build`
7. `docker-compose stop && docker-compose up -d` 7. [ChangeLog](../CHANGELOG.md)でマイグレーション情報を確認する
8. `docker-compose stop && docker-compose up -d`
### cliコマンドを実行する方法: ### cliコマンドを実行する方法:

View file

@ -83,10 +83,11 @@ docker-compose run --rm web yarn run init
1. `git stash` 1. `git stash`
2. `git checkout master` 2. `git checkout master`
3. `git pull` 3. `git pull`
4. `git stash pop` 4. `git submodule update --init`
5. `docker-compose build` 5. `git stash pop`
6. 检查 [更新日志](../CHANGELOG.md) 以获取升级迁移信息。 6. `docker-compose build`
7. `docker-compose stop && docker-compose up -d` 7. 检查 [更新日志](../CHANGELOG.md) 以获取升级迁移信息。
8. `docker-compose stop && docker-compose up -d`
### 如何执行 [控制台指令](manage.zh.md): ### 如何执行 [控制台指令](manage.zh.md):
`docker-compose run --rm web node built/tools/mark-admin @example` `docker-compose run --rm web node built/tools/mark-admin @example`

View file

@ -131,11 +131,12 @@ You can check if the service is running with `systemctl status misskey`.
### How to update your Misskey server to the latest version ### How to update your Misskey server to the latest version
1. `git checkout master` 1. `git checkout master`
2. `git pull` 2. `git pull`
3. `yarn install` 3. `git submodule update --init`
4. `NODE_ENV=production yarn build` 4. `yarn install`
5. `yarn migrate` 5. `NODE_ENV=production yarn build`
6. Restart your Misskey process to apply changes 6. `yarn migrate`
7. Enjoy 7. Restart your Misskey process to apply changes
8. Enjoy
If you encounter any problems with updating, please try the following: If you encounter any problems with updating, please try the following:
1. `yarn clean` or `yarn cleanall` 1. `yarn clean` or `yarn cleanall`

View file

@ -126,9 +126,10 @@ Vous pouvez vérifier si le service a démarré en utilisant la commande `system
### Méthode de mise à jour vers la plus récente version de Misskey ### Méthode de mise à jour vers la plus récente version de Misskey
1. `git checkout master` 1. `git checkout master`
2. `git pull` 2. `git pull`
3. `yarn install` 3. `git submodule update --init`
4. `NODE_ENV=production yarn build` 4. `yarn install`
5. `yarn migrate` 5. `NODE_ENV=production yarn build`
6. `yarn migrate`
---------------------------------------------------------------- ----------------------------------------------------------------

View file

@ -133,9 +133,10 @@ yarn run init
### Misskeyを最新バージョンにアップデートする方法: ### Misskeyを最新バージョンにアップデートする方法:
1. `git checkout master` 1. `git checkout master`
2. `git pull` 2. `git pull`
3. `yarn install` 3. `git submodule update --init`
4. `NODE_ENV=production yarn build` 4. `yarn install`
5. `yarn migrate` 5. `NODE_ENV=production yarn build`
6. `yarn migrate`
なにか問題が発生した場合は、`yarn clean`または`yarn cleanall`すると直る場合があります。 なにか問題が発生した場合は、`yarn clean`または`yarn cleanall`すると直る場合があります。

View file

@ -131,11 +131,12 @@ yarn run init
### 如何将您的 Misskey 服务器升级至最新版本 ### 如何将您的 Misskey 服务器升级至最新版本
1. `git checkout master` 1. `git checkout master`
2. `git pull` 2. `git pull`
3. `yarn install` 3. `git submodule update --init`
4. `NODE_ENV=production yarn build` 4. `yarn install`
5. `yarn migrate` 5. `NODE_ENV=production yarn build`
6. 重启您的 Misskey 进程来应用改变。 6. `yarn migrate`
7. 尽情享受吧! 7. 重启您的 Misskey 进程来应用改变。
8. 尽情享受吧!
如果您在更新时遇到任何问题,请尝试以下操作: 如果您在更新时遇到任何问题,请尝试以下操作:
1. `yarn clean` 或是 `yarn cleanall` 1. `yarn clean` 或是 `yarn cleanall`

View file

@ -779,6 +779,7 @@ translate: "翻訳"
translatedFrom: "{x}から翻訳" translatedFrom: "{x}から翻訳"
accountDeletionInProgress: "アカウントの削除が進行中です" accountDeletionInProgress: "アカウントの削除が進行中です"
usernameInfo: "サーバー上であなたのアカウントを一意に識別するための名前。アルファベット(a~z, A~Z)、数字(0~9)、およびアンダーバー(_)が使用できます。ユーザー名は後から変更することは出来ません。" usernameInfo: "サーバー上であなたのアカウントを一意に識別するための名前。アルファベット(a~z, A~Z)、数字(0~9)、およびアンダーバー(_)が使用できます。ユーザー名は後から変更することは出来ません。"
aiChanMode: "藍モード"
keepCw: "CWを維持する" keepCw: "CWを維持する"
_accountDelete: _accountDelete:
@ -1189,6 +1190,7 @@ _widgets:
jobQueue: "ジョブキュー" jobQueue: "ジョブキュー"
serverMetric: "サーバーメトリクス" serverMetric: "サーバーメトリクス"
aiscript: "AiScriptコンソール" aiscript: "AiScriptコンソール"
aichan: "藍"
_cw: _cw:
hide: "隠す" hide: "隠す"

1
misskey-assets Submodule

@ -0,0 +1 @@
Subproject commit 0179793ec891856d6f37a3be16ba4c22f67a81b5

View file

@ -45,6 +45,10 @@
</FormSwitch> </FormSwitch>
</FormGroup> </FormGroup>
<FormGroup>
<FormSwitch v-model:value="aiChanMode">{{ $ts.aiChanMode }}</FormSwitch>
</FormGroup>
<FormRadios v-model="fontSize"> <FormRadios v-model="fontSize">
<template #desc>{{ $ts.fontSize }}</template> <template #desc>{{ $ts.fontSize }}</template>
<option value="small"><span style="font-size: 14px;">Aa</span></option> <option value="small"><span style="font-size: 14px;">Aa</span></option>
@ -149,6 +153,7 @@ export default defineComponent({
enableInfiniteScroll: defaultStore.makeGetterSetter('enableInfiniteScroll'), enableInfiniteScroll: defaultStore.makeGetterSetter('enableInfiniteScroll'),
useReactionPickerForContextMenu: defaultStore.makeGetterSetter('useReactionPickerForContextMenu'), useReactionPickerForContextMenu: defaultStore.makeGetterSetter('useReactionPickerForContextMenu'),
squareAvatars: defaultStore.makeGetterSetter('squareAvatars'), squareAvatars: defaultStore.makeGetterSetter('squareAvatars'),
aiChanMode: defaultStore.makeGetterSetter('aiChanMode'),
}, },
watch: { watch: {
@ -184,6 +189,10 @@ export default defineComponent({
this.reloadAsk(); this.reloadAsk();
}, },
aiChanMode() {
this.reloadAsk();
},
showGapBetweenNotesInTimeline() { showGapBetweenNotesInTimeline() {
this.reloadAsk(); this.reloadAsk();
}, },

View file

@ -210,6 +210,10 @@ export const defaultStore = markRaw(new Storage('base', {
where: 'device', where: 'device',
default: '' default: ''
}, },
aiChanMode: {
where: 'device',
default: false
},
})); }));
// TODO: 他のタブと永続化されたstateを同期 // TODO: 他のタブと永続化されたstateを同期

View file

@ -21,7 +21,8 @@
"baseUrl": ".", "baseUrl": ".",
"paths": { "paths": {
"@/*": ["../*"], "@/*": ["../*"],
"@client/*": ["./*"] "@client/*": ["./*"],
"@lib/*": ["../../lib/*"],
}, },
"typeRoots": [ "typeRoots": [
"node_modules/@types", "node_modules/@types",

View file

@ -54,12 +54,14 @@
<XWidgets v-if="widgetsShowing" class="tray"/> <XWidgets v-if="widgetsShowing" class="tray"/>
</transition> </transition>
<iframe v-if="$store.state.aiChanMode" class="ivnzpscs" ref="live2d" src="https://misskey-dev.github.io/mascot-web/?scale=2&y=1.4"></iframe>
<XCommon/> <XCommon/>
</div> </div>
</template> </template>
<script lang="ts"> <script lang="ts">
import { defineComponent, defineAsyncComponent } from 'vue'; import { defineComponent, defineAsyncComponent, markRaw } from 'vue';
import { instanceName } from '@client/config'; import { instanceName } from '@client/config';
import { StickySidebar } from '@client/scripts/sticky-sidebar'; import { StickySidebar } from '@client/scripts/sticky-sidebar';
import XSidebar from './default.sidebar.vue'; import XSidebar from './default.sidebar.vue';
@ -131,6 +133,19 @@ export default defineComponent({
this.isMobile = (window.innerWidth <= MOBILE_THRESHOLD); this.isMobile = (window.innerWidth <= MOBILE_THRESHOLD);
this.isDesktop = (window.innerWidth >= DESKTOP_THRESHOLD); this.isDesktop = (window.innerWidth >= DESKTOP_THRESHOLD);
}, { passive: true }); }, { passive: true });
if (this.$store.state.aiChanMode) {
const iframeRect = this.$refs.live2d.getBoundingClientRect();
window.addEventListener('mousemove', ev => {
this.$refs.live2d.contentWindow.postMessage({
type: 'moveCursor',
body: {
x: ev.clientX - iframeRect.left,
y: ev.clientY - iframeRect.top,
}
}, '*');
}, { passive: true });
}
}, },
methods: { methods: {
@ -201,6 +216,10 @@ export default defineComponent({
} }
}], e); }], e);
}, },
onAiClick(ev) {
//if (this.live2d) this.live2d.click(ev);
}
} }
}); });
</script> </script>
@ -458,5 +477,15 @@ export default defineComponent({
overflow: auto; overflow: auto;
background: var(--bg); background: var(--bg);
} }
> .ivnzpscs {
position: fixed;
bottom: 0;
right: 0;
width: 300px;
height: 600px;
border: none;
pointer-events: none;
}
} }
</style> </style>

View file

@ -0,0 +1,59 @@
<template>
<MkContainer :naked="props.transparent" :show-header="false">
<iframe class="dedjhjmo" ref="live2d" @click="touched" src="https://misskey-dev.github.io/mascot-web/?scale=1.5&y=1.1&eyeY=100"></iframe>
</MkContainer>
</template>
<script lang="ts">
import { defineComponent, markRaw } from 'vue';
import define from './define';
import MkContainer from '@client/components/ui/container.vue';
import * as os from '@client/os';
const widget = define({
name: 'ai',
props: () => ({
transparent: {
type: 'boolean',
default: false,
},
})
});
export default defineComponent({
extends: widget,
components: {
MkContainer,
},
data() {
return {
};
},
mounted() {
window.addEventListener('mousemove', ev => {
const iframeRect = this.$refs.live2d.getBoundingClientRect();
this.$refs.live2d.contentWindow.postMessage({
type: 'moveCursor',
body: {
x: ev.clientX - iframeRect.left,
y: ev.clientY - iframeRect.top,
}
}, '*');
}, { passive: true });
},
methods: {
touched() {
//if (this.live2d) this.live2d.changeExpression('gurugurume');
}
}
});
</script>
<style lang="scss" scoped>
.dedjhjmo {
width: 100%;
height: 350px;
border: none;
pointer-events: none;
}
</style>

View file

@ -19,6 +19,7 @@ export default function(app: App) {
app.component('MkwJobQueue', defineAsyncComponent(() => import('./job-queue.vue'))); app.component('MkwJobQueue', defineAsyncComponent(() => import('./job-queue.vue')));
app.component('MkwButton', defineAsyncComponent(() => import('./button.vue'))); app.component('MkwButton', defineAsyncComponent(() => import('./button.vue')));
app.component('MkwAiscript', defineAsyncComponent(() => import('./aiscript.vue'))); app.component('MkwAiscript', defineAsyncComponent(() => import('./aiscript.vue')));
app.component('MkwAichan', defineAsyncComponent(() => import('./aichan.vue')));
} }
export const widgets = [ export const widgets = [
@ -40,4 +41,5 @@ export const widgets = [
'jobQueue', 'jobQueue',
'button', 'button',
'aiscript', 'aiscript',
'aichan',
]; ];

View file

@ -164,6 +164,7 @@ module.exports = {
], ],
alias: { alias: {
'@client': __dirname + '/src/client', '@client': __dirname + '/src/client',
'@lib': __dirname + '/lib',
'@': __dirname + '/src', '@': __dirname + '/src',
'const.styl': __dirname + '/src/client/const.styl' 'const.styl': __dirname + '/src/client/const.styl'
} }