Skip to content

Commit b3b0e26

Browse files
committed
1.8.2
1 parent 7675da1 commit b3b0e26

6 files changed

Lines changed: 271 additions & 31 deletions

File tree

VideoNotes.html

Lines changed: 37 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -39,7 +39,7 @@
3939
</style>
4040
</head>
4141

42-
<body>
42+
<body dir="ltr">
4343
<div id="load-cover">
4444
<!-- <img src="./res/VideoNotesLQ.png" alt="" width="128" height="128">
4545
<h1 style="font-size: 60px;font-weight: normal;margin: 0;">VideoNotes</h1> -->
@@ -116,6 +116,10 @@ <h1 style="font-size: 60px;font-weight: normal;margin: 0;">VideoNotes</h1> -->
116116
<i class="ms-Icon ms-Icon--Settings" id="settings-icon" aria-hidden="true"></i>
117117
<iconlabel class="important">设置 (s)</iconlabel>
118118
</interaction>
119+
<interaction id="help-btn" data-modal="welcome" title="帮助">
120+
<i class="ms-Icon ms-Icon--Help" id="help-icon" aria-hidden="true"></i>
121+
<iconlabel class="important">帮助</iconlabel>
122+
</interaction>
119123
<interaction id="winontop" title="窗口置顶">
120124
<i class="ms-Icon ms-Icon--Checkbox" aria-hidden="true"></i>
121125
<iconlabel class="important">窗口置顶</iconlabel>
@@ -149,7 +153,11 @@ <h2>打开文件</h2>
149153
<!-- <p id="grant-clipboard">建议您先允许剪贴板权限。<help onclick="settingUtils.interaction.grantClipboard()">点击以允许</help>
150154
</p> -->
151155
<p id="file-info" class="hidden"></p>
152-
<p>您可以从本地选取文件,或粘贴视频网站链接/视频源文件链接。<help data-modal="settings">查看帮助</help>
156+
<p>您可以从本地选取文件,或粘贴视频网站链接/视频源文件链接。<help data-modal="welcome">查看帮助</help>
157+
</p>
158+
<p id="history" class="hidden">
159+
您上次打开了
160+
<interaction id="history-btn" small style="width: fit-content;display: inline; line-height: 3em;"></interaction>
153161
</p>
154162
</div>
155163
</div>
@@ -176,8 +184,9 @@ <h1>信息</h1>
176184
<!-- <img src="./VideoNotes.svg" alt="" style="width: 100%;height: 100%;"> -->
177185
</div>
178186
<div>
179-
<h3 style="margin: 0.1em 0 0.5em;">VideoNotes 1.8.0</h3>
180-
<p style="margin: 0 0 0.5em;">@smallg0at 编写, 2020/5/11</p>
187+
<h3 style="margin: 0.1em 0 0.5em;">VideoNotes 1.8.2</h3>
188+
<p style="margin: 0 0 0.5em;">@smallg0at 编写, 2020/5/27</p>
189+
<p style="margin: 0 0 0.5em;"><a href="https://github.com/smallg0at/VideoNotes" class="help">Github 仓库</a></p>
181190
<!-- <p style="margin: 0 0 0.5em;">服务器由 @steven12138z 提供</p> -->
182191
</div>
183192
</div>
@@ -193,21 +202,40 @@ <h3>设置</h3>
193202
<input type="checkbox" name="enable-force-method" id="enable-force-method" style="width: 20px;height: 20px">
194203
<label for="enable-force-method">启用暴力的本地文件读取方式(不建议开启)</label>
195204
</setting>
205+
<p>打开暴力方法后,请<strong>务必不要打开100MB以上的本地文件</strong>,否则页面可能崩溃</p>
196206
<interaction id="reset-everything" style="color: rgba(255, 255, 0, 0.5); width: fit-content;" small>
197207
<i class="ms-Icon ms-Icon--Delete" aria-hidden="true"></i>
198208
<iconlabel class="important">重置设置与所有笔记</iconlabel>
199209
</interaction>
210+
</div>
211+
</div>
212+
</modal>
213+
<modal id="welcome" class="hidden fadeout">
214+
<div class="modal-card">
215+
<div class="close-button">×</div>
216+
<div class="modal-content">
217+
<h1>欢迎使用 VideoNotes!</h1>
218+
<p>这个应用能使你在看视频时更方便的记录笔记。<br>您目前正在使用
219+
<span id="is-app">网页应用,部分操作可能不适用。<a href="https://github.com/smallg0at/VideoNotes/releases" class="help">请在这里下载本地应用</a></span>
220+
</p>
221+
<p>如果显示出现问题,请通过 <code>ctrl+r</code> 刷新。</p>
222+
<h2>更新日志</h2>
223+
<p>1.8.2:历史记录、帮助、部分优化。</p>
224+
<h2>帮助</h2>
225+
<p>每次启动时我们会帮您启动打开对话框,方便您填入链接。如需更改设置、进行各种操作,请查看右下角(或者右侧)诸多按钮提供的选项,如看不到请提高亮度。</p>
200226
<h3>快捷键帮助</h3>
201227
<ul>
202228
<li><code>Ctrl+i</code>插入当前视频的时间(本地应用支持网页)</li>
229+
<li><code>Ctrl+u</code>播放/暂停左侧视频(仅本地应用)</li>
230+
<li><code>Ctrl+]</code>开关永远高亮(无提示)</li>
203231
<li><code>s</code>打开设置</li>
204-
<li><code>o</code>打开</li>
232+
<li><code>o</code>打开文件</li>
233+
<li><code>f</code>全屏</li>
205234
<li><code>Tab</code>切换到笔记区域</li>
206235
<li><code>Ctrl</code>点亮笔记区域</li>
207236
<li>其余按钮上有提示</li>
208237
</ul>
209238
<h3>打开文件帮助</h3>
210-
<p>打开暴力方法后,请<strong>务必不要打开100MB以上的本地文件</strong>,否则页面可能崩溃</p>
211239
<p>
212240
以下类型可用:
213241
</p>
@@ -218,13 +246,13 @@ <h3>打开文件帮助</h3>
218246
<li>网页:输入网页后在输入框内 <code>Shift+Enter</code>。有些网站可能拒绝接受iframe。</li>
219247
<li>mp4 视频:输入视频URL即可。打开视频后如需再次打开,请刷新页面。</li>
220248
</ul>
249+
<p>除此之外,您还能选择</p>
221250
<h3>笔记区帮助</h3>
222-
<p>在大尺寸设备上,笔记在不操作时会变暗。此时,可选中笔记区后 上下滚动/进行选择/任意击键,或在页面内其他位置戳<code>Ctrl</code></p>
251+
<p>在大尺寸设备上,笔记在不操作时会变暗。此时,可选中笔记区后 上下滚动/进行选择/任意击键,或在页面内其他位置戳<code>Ctrl</code><br>也可以按<code>Tab</code>来将焦点切换到笔记区。</p>
223252
<h3>声明</h3>
224253
<p>本程序“按原样”提供,不会收集您的个人信息;但通过框架访问的网页无法控制,这类问题与我们无关。</p>
254+
225255
</div>
226-
</div>
227-
</modal>
228256
</body>
229257
<link rel="stylesheet" href="./src/main.css">
230258
<script id="flag"></script>

package.json

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
{
22
"name": "videonotes",
3-
"version": "1.8.0",
4-
"description": "Taking Notes while Watching Video",
3+
"version": "1.8.2",
4+
"description": "视频笔记",
55
"main": "VideoNotes.html",
66
"scripts": {
77
"babel": "node ./babelgen.js",

src/main-comp.js

Lines changed: 117 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -8,8 +8,9 @@ var DEBUGMODE = {
88
setting: false,
99
devAction: false,
1010
quickRefresh: false,
11-
timefilterDebug: true
11+
timefilterDebug: false
1212
};
13+
var version = "1.8.2";
1314
var settings = {
1415
isIE: false,
1516
localStorage: true,
@@ -19,8 +20,10 @@ var settings = {
1920
hasPasteApi: true,
2021
hasPermission: true,
2122
enableBruteForce: false,
22-
usingNW: false
23+
usingNW: false,
24+
lastUsedVersion: ''
2325
};
26+
var isFirstRun = false;
2427
var settingUtils = {
2528
read: function read() {
2629
if (settings.localStorage) {
@@ -71,8 +74,7 @@ var settingUtils = {
7174
reset: function reset() {
7275
if (settings.localStorage) {
7376
if (confirm('确认清除设置与笔记?本操作无法撤销!')) {
74-
localStorage.videoNotes = '';
75-
localStorage.VNSettings = '';
77+
localStorage.clear();
7678
alert('清除完毕,页面将会刷新。');
7779
location.reload();
7880
}
@@ -129,6 +131,13 @@ settingUtils.read();
129131
settingUtils.interaction.checkIfIE();
130132
settingUtils.interaction.checkPasteAPI();
131133
settingUtils.interaction.checkNW();
134+
135+
if (version != settings.lastUsedVersion) {
136+
isFirstRun = true;
137+
console.log('isFirstRun:', settings.lastUsedVersion);
138+
settings.lastUsedVersion = version;
139+
}
140+
132141
settingUtils.write();
133142
var nwWindow = null;
134143
var nwClip = null;
@@ -157,6 +166,11 @@ String.prototype.assignClick = function (func) {
157166
'#reset-everything'.assignClick(function (event) {
158167
settingUtils.reset();
159168
});
169+
170+
if (settings.usingNW) {
171+
document.querySelector('#is-app').textContent = "本地应用。";
172+
}
173+
160174
var gui = {
161175
el: {
162176
left: document.querySelector('.left'),
@@ -288,6 +302,7 @@ document.addEventListener('fullscreenchange', function () {
288302
});
289303
var notes = {
290304
container: document.querySelector('group'),
305+
isAlwaysOn: false,
291306
activeTimeout: -1,
292307
item: function item() {
293308
var id = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : 0;
@@ -307,6 +322,7 @@ var notes = {
307322
var _this = this;
308323

309324
var force = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : false;
325+
var alwaysLight = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : false;
310326
this.save();
311327
this.container.classList.add('isactive');
312328

@@ -316,7 +332,7 @@ var notes = {
316332
console.error(error);
317333
}
318334

319-
if (textareaItem.value != "" && !force && window.innerWidth > 1024) {
335+
if (textareaItem.value != "" && !force && window.innerWidth > 1024 && !this.isAlwaysOn) {
320336
this.activeTimeout = setTimeout(function () {
321337
_this.container.classList.remove('isactive');
322338
}, 2500);
@@ -617,6 +633,39 @@ var shortcut = {
617633
notes.insertText(event.target, fnstr);
618634
}
619635
});
636+
637+
if (settings.usingNW) {
638+
shortcut.add('ctrl+p', function (event) {
639+
var targetVideoElement = null;
640+
641+
if (webFrame.isAvailable == true) {
642+
var frame1 = document.querySelector('iframe').contentWindow;
643+
644+
if (frame1.document.querySelector('video')) {
645+
targetVideoElement = frame1.document.querySelector('video');
646+
} else if (frame1.document.querySelector('iframe').contentWindow.document.querySelector('video')) {
647+
targetVideoElement = frame1.document.querySelector('iframe').contentWindow.document.querySelector('video');
648+
}
649+
} else if (videoPlayer.isAvailable) {
650+
targetVideoElement = videoPlayer.el;
651+
}
652+
653+
if (targetVideoElement) {
654+
if (targetVideoElement.paused) {
655+
targetVideoElement.play();
656+
} else {
657+
targetVideoElement.pause();
658+
}
659+
}
660+
});
661+
shortcut.add('ctrl+r', function () {
662+
location.reload();
663+
});
664+
}
665+
666+
shortcut.add('ctrl+]', function () {
667+
notes.isAlwaysOn = !notes.isAlwaysOn;
668+
});
620669
shortcut.apply();
621670
}
622671

@@ -741,6 +790,37 @@ function videoUrlParser() {
741790
document.querySelector('.left').classList.add('bilibili');
742791
}
743792
};
793+
} else if (url.indexOf('youtube.com') != -1 && !url.startsWith('||')) {
794+
var urlOBJ = new URL(url);
795+
796+
if (settings.isIE) {
797+
return {
798+
mode: 'frame',
799+
parsed: url,
800+
interaction: function interaction() {
801+
webFrame.load(targetURL, false);
802+
document.querySelector('.left').classList.remove('bilibili');
803+
}
804+
};
805+
}
806+
807+
var videoID = urlOBJ.searchParams.get('v');
808+
var timeiter = urlOBJ.searchParams.get('t');
809+
targetURL = 'https://www.youtube.com/embed/' + videoID;
810+
811+
if (timeiter) {
812+
timeiter = timeiter.replace('s', '');
813+
targetURL = targetURL + '?start=' + timeiter;
814+
}
815+
816+
return {
817+
mode: 'youtube',
818+
parsed: targetURL,
819+
interaction: function interaction() {
820+
webFrame.load(targetURL, true);
821+
document.querySelector('.left').classList.add('bilibili');
822+
}
823+
};
744824
} else if (url.startsWith('||')) {
745825
targetURL = url.replace('||', '');
746826

@@ -847,6 +927,7 @@ function onSubmitVideoURL() {
847927
document.querySelector('#file-info').innerHTML = '⏳ 正在处理链接并加载中...';
848928
openFile.el.textBox.disabled = true;
849929
gui.mode = res.mode;
930+
history.change(inputURL);
850931
document.querySelector('#file-info').classList.toggle('hidden');
851932

852933
if (!res.error) {
@@ -1115,12 +1196,37 @@ var modal = {
11151196
modal.init();
11161197

11171198
if (navigator.userAgent.indexOf('Firefox') == -1) {
1118-
modal.open('settings'); //Temporary fix for rendering issue
1199+
modal.open('welcome'); //Temporary fix for rendering issue
11191200

1120-
modal.close('settings');
1201+
modal.close('welcome');
11211202
console.info('Doing settings workaround'); // document.querySelector('modal#settings').classList.add('fadeout')
11221203
}
11231204

1205+
var history = {
1206+
cur: '',
1207+
setup: function setup(obj) {
1208+
if (settings.localStorage) {
1209+
var a = localStorage.getItem('VNHistory');
1210+
1211+
if (a) {
1212+
this.cur = a;
1213+
document.querySelector('#history-btn').innerHTML = a;
1214+
document.querySelector('#history').classList.remove('hidden');
1215+
}
1216+
}
1217+
},
1218+
change: function change(str) {
1219+
if (settings.localStorage) {
1220+
localStorage.setItem('VNHistory', str);
1221+
this.setup();
1222+
}
1223+
}
1224+
};
1225+
'#history-btn'.assignClick(function (event) {
1226+
openFile.el.textBox.value = history.cur;
1227+
onSubmitVideoURL();
1228+
});
1229+
history.setup();
11241230
setTimeout(function () {
11251231
if (shortcut.count <= 1) {
11261232
modal.open('openfile'); // modal.open('settings')
@@ -1129,6 +1235,10 @@ setTimeout(function () {
11291235
if (!DEBUGMODE.devAction) {
11301236
document.querySelector('#load-cover').parentElement.removeChild(document.querySelector('#load-cover'));
11311237
}
1238+
1239+
if (isFirstRun) {
1240+
modal.open('welcome');
1241+
}
11321242
}, 1000);
11331243

11341244
if (DEBUGMODE.devAction) {

src/main.css

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -674,8 +674,13 @@
674674
a.help {
675675
display: inline;
676676
border-bottom: rgb(92, 92, 92) solid 1px;
677+
color: rgba(255, 255, 255, 0.7);
678+
text-decoration: none;
677679
cursor: pointer;
678680
}
681+
a[href]::before{
682+
content: '🔗 ';
683+
}
679684

680685
@media (max-width: 600px) {
681686
#open-network-url {

0 commit comments

Comments
 (0)