-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
333 lines (291 loc) · 25.6 KB
/
index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<!-- Wow! valid XHTML -->
<head>
<title>Janeth vkontakte-scrobbler. Last.fm + Vkontakte = ♥</title>
<style type="text/css">
body { margin: 0 auto; width: 40em; font: normal 12pt Times, serif; line-height: 1.3em; }
.root { border-top: .5em solid #000; }
#copyright { border-top: 2px solid #333; background: #eee; padding: .5em 1em; font-size: .8em; margin-top: 3em; line-height: 1.2em; }
#header { overflow: hidden; zoom: 1; background: url(i/bg.png) no-repeat top right; padding-bottom: 100px; margin-bottom: -100px; }
#content { margin: 2.5em .5em 0; }
p { margin: 1em 0; }
h1 { margin: .8em .5em; font-size: 2em; color: #333; }
h1 .ver { font-size: .4em; color: #aaa; margin-left: -.5em; }
h1 .ver a { color: #aaa; }
h1, h2, h3 { font-family: 'Trebuchet MS', sans-serif; font-weight: normal; }
#menu { background: #000; color: #eee; margin-left: 1px; float: left; }
#menu ul { background: #000; list-style: none; margin: 1px -2px 1px 0; padding: .5em 0em .5em 1em; position: relative; left: -1px; }
#menu li { display: inline; margin: 0 1em 0 0; }
#menu a { color: #fff; }
h3 { display: inline-block; zoom: 1; _display: inline; margin: 1em 0 0; padding: 0em .6em; border-bottom: 2px solid #333; color: #333; }
h4 { float: left; margin: 0; border: 1px dotted #666; color: #333; margin: -.2em .7em 0em 0; padding: .0em .3em; }
h5 { font-size: 1em; margin: 1em 0; }
ol, ul { clear: left; } /* list after h4 */
.installlink { /*width: 10em; background: #faa; border: 1px solid #f88; margin: .5em 0em; padding: .2em 1em;*/
/* color: #333; font: 1.4em normal 'Trebuchet MS', sans-serif; */
text-align: center; margin: -.5em auto 0; }
.installlink img { border: 0; }
.nospam { display: none; }
li .highlight { margin: 0.1em 0 0.2em; font-size: 0.8em; line-height: 1.1em; color: #999; }
h4 img { margin-right: 5px; vertical-align: middle; }
.screenshots { margin: 1em 0; }
.screenshots div { border: 0px solid #999; padding: .5em; width: 100px; margin-right: 1em;
zoom: 1; display: inline-block; _display: inline; vertical-align: top; }
.screenshots div a img { border: 2px solid #00f; }
.screenshots div p { margin: 0; font-size: .8em; text-align: center; color: #333; }
li .icon { vertical-align: middle; margin-right: .5em; }
</style>
<script type="text/javascript">
var gaJsHost = (("https:" == document.location.protocol) ? "https://ssl." : "http://www.");
document.write(unescape("%3Cscript src='" + gaJsHost + "google-analytics.com/ga.js' type='text/javascript'%3E%3C/script%3E"));
</script>
<script type="text/javascript">
try {
var pageTracker = _gat._getTracker("UA-836471-5");
pageTracker._trackPageview();
} catch(err) {}</script>
</head>
<body>
<div id="about" class="root">
<div id="header">
<h1>Janeth <span class="ver"><a href="#changelog">бета 8</a></span></h1>
<div id="menu">
<ul>
<li><a href="#screenshots">Скриншоты</a></li>
<li><a href="#usage">Применение</a></li>
<li><a href="#install">Установка</a></li>
<li><a href="vkontakte-scrobbler.user.js" onclick="javascript: pageTracker._trackPageview('/vkontakte-scrobbler/vkontakte-scrobbler.user.js'); ">Скачать</a></li>
<li><a href="#code">Код</a></li>
</ul>
</div> <!-- #menu -->
</div> <!-- #header -->
<div id="content">
<p>Только что пришли с <a href="http://nichtverstehen.de/verstehen">зеленого сайта</a>? — расслабьтесь: здесь не будет зеленого.</p>
<p>Кстати, у нас новинка: после долгого отсутствия Жанет снова возвращается в родной контакт, Оперу и Firefox. Но, к сожалению, пока не в Хром. Надеюсь мы, пользователи Хрома, ее дождемся.</p>
<h3><a name="about">Что это?</a></h3>
<p>Очень много людей слушают музыку <a href="http://vkontakte.ru">вконтакте</a>.
Не меньше людей любят скробблить свои прослушивания на <a href="http://last.fm">Last.fm</a>.
Janeth vkontakte-scrobbler создан для того, чтобы совместить эти два пристрастия. Если вы не пользуетесь ни тем,
ни другим, информация на этой странице может быть для вас неинтересна.</p>
<p>Собственно говоря, эта штука есть user-скрипт (расширение) для браузеров Opera, Firefox <del>и Google Chrome</del>, которое
автоматически отправляет информацию о прослушанных композициях на сервер Last.fm. Разумеется,
«listening-now» оповещения тоже отправляются.</p>
<p>Пока что скробблер находится в бета-версии, так что возможны всякие разные глюки.
Просьба сообщить о них <a href="http://vkontakte.ru/notes.php?act=s&nid=8367692&oid=1584415">в комментариях</a> к заметке вконтакте.
И проверяйте появление обновлений здесь на сайте почаще (текущая версия в заголовке страницы).</p>
<h3><a name="screenshots">Скриншоты</a></h3>
<div class="screenshots">
<div><a href="i/in_opera.png"><img src="i/in_opera_s.png" alt="scrobbler in opera"/></a>
<p>В Опере</p></div>
<div><a href="i/in_ff.png"><img src="i/in_ff_s.png" alt="scrobbler in firefox"/></a>
<p>В Firefox</p></div>
<div><a href="i/in_group.png"><img src="i/in_group_s.png" alt="playing on a group page"/></a>
<p>На странице группы</p></div>
</div>
<h3>Разве не прелесть?</h3>
<ul>
<li>работает в Firefox, Opera;
<p class="highlight">Совместимость с Оперой было делом приоритетным. Знаете ли, из 1200 строк кода код для Оперы занимает 500.</p></li>
<li>не требует ввода пароля;
<p class="highlight">А это значит, можно не думать о безопасности.</p></li>
<li>надежен в условиях нестабильного соединения;
<p class="highlight">Скробблер сам переподключится, когда ему нужно будет что-нибудь отправить.</p></li>
<li>правильно отслеживает длительность проигрывания;
<p class="highlight">Если нажмете паузу — счетчик остановится. Вы скажете, это естесственно, но другой аналогичный скрипт не учитывает пауз!</p></li>
<li>загружает дополнительную информацию о треке и показывает вместе с обложкой альбома прямо вконтакте.
<p class="highlight">Почему бы и не насладиться красивыми картинками, пока музыка играет?..</p>
</li>
</ul>
<h4>О безопасности</h4>
<p>Хорошей новостью будет то, что скрипт вообще не запрашивает вашего пароля ни от вконтакте,
ни от Last.fm (и, стало быть, нигде не хранит и никуда не отправляет). Не то, что я просто вам это обещаю,
любой может <em>сам проверить</em> это, так как исходники полностью открыты.</p>
<h3><a name="usage">Применение</a></h3>
<p>Собственно говоря, делать ничего не надо. <a href="#install">Установите скрипт</a>, слушайте музыку, получайте рекомендации
на Last.fm, смотрите статистику. Оно будет работать само.</p>
<p>Однако пытливому читателю,
я все же расскажу чуть-чуть подробнее. Лишь только вы установите скрипт
и загрузите любую страницу с аудиозаписями
вконтакте в правом верхнем углу (или ниже меню, если это страница профиля или группы) появится значок
Last.fm. Он бывает:</p>
<ul>
<li><img src="i/inactive_i.png" alt="gray box" class="icon" />серым, если еще не подключился к серверу
<p class="highlight">Если кликнуть, он начнет подключаться.</p></li>
<li><img src="i/working_i.png" alt="loading box" class="icon"/>серым анимированным, когда идет процесс соединения с сервером</li>
<li><img src="i/error_i.png" alt="red box" class="icon"/>красным с крестиком, если при подключении произошла ошибка
<p class="highlight">Если кликнуть, он попробует подключиться снова.</p></li>
<li><img src="i/anon_i.png" alt="yellow box" class="icon" />желтым с вопросиком, если вы не залогинились на last.fm.
<p class="highlight">Если кликнуть, вы окажетесь на страничке входа на last.fm.</p></li>
<li><img src="i/ready_i.png" alt="blue box" class="icon"/>синим, когда все прошло хорошо и скробблер готов, простите, скробблить
<p class="highlight">Если кликнуть, вы попадете в свой профиль на Last.fm.</p></li>
</ul>
<p>Когда вы слушаете песню рядом отображается забавная иконка <img src="i/playing_i.png" alt="playing icon"/>
(анимированная, пока песня играет, и остановленная во время паузы).
А во всплывающей подсказке к ней пишут, сколько времени осталось играть песни до того, как она заскробблится.
После отправки на сервер информации о том, что вы прослушали песню,
появится галочка или крестик, показывающие, успешно ли все прошло.</p>
<p>Если кликнуть во время проигрывания на вышеупомянутую забавную иконку, можно отредактировать автора и название композиции,
которые будут отправлены на last.fm, а также форсировать или отменить отправку.</p>
<h3><a name="install">Установка</a></h3>
<p>Проверено, Жанет работает в Opera 9.6—10.5, Firefox 3—3.6 (Greasemonkey 0.8) и еще в Google Chrome 2.0 и 3.0 (но не в 4.0 и выше).
Впрочем, если у вас другая версия браузера все равно попробуйте — скорее всего, все будет нормально.</p>
<p>В будущем возможно портирование скробблера под IE и Safari. Если вы JS-разработчик,
можете <a href="#code">этим заняться</a>. А если нет, просто заходите почаще ;).</p>
<p>Итак, внимание, главная кнопка:</p>
<div class="installlink"><a href="vkontakte-scrobbler.user.js" onclick="javascript: pageTracker._trackPageview('/vkontakte-scrobbler/vkontakte-scrobbler.user.js'); "><img src="i/install.png" alt="Установить"/></a></div>
<h4><img src="i/ff_icon.png" alt="ff icon"/>Firefox</h4>
<ol>
<li>Установите расширение <a href="https://addons.mozilla.org/ru/firefox/addon/748">Greasemonkey</a>.</li>
<li>Перейдите по ссылке «Установить» выше и согласитесь на установку скрипта.</li>
<li>???</li>
<li>profit ;)</li>
</ol>
<p>После этого на страницах с аудиозаписями вконтакте появится кнопочка Last.fm, и
при проигрывании будет отображаться статус скробблера.</p>
<h4><img src="i/opera_icon.png" alt="opera icon"/>Opera</h4>
<p>Здесь чуть посложнее.</p>
<ol>
<li>Сначала создайте папку, в которую будете складывать user-скрипты, в любом удобном месте.</li>
<li>Кликните кнопку «Установить» выше и сохраните скрипт в выбранную папку.</li>
<li>Затем откройте окно настроек Оперы (Tools — Preferences или Инструменты — Настройки) и на вкладке Advanced (Дополнительно) в разделе Content (Содержимое) кликните кнопку «Javascript options» («Настроить JavaScript»).
В появившемся окне в поле User Javascript files (Папка пользовательских файлов Javascript) выберите ту папку, которую создали на первом шаге.</li>
</ol>
<h4><img src="i/chrome_icon.png" alt="chrome icon"/>Google Chrome</h4>
<p><em>В последних альфа-билдах Хрома скрипт не работает из-за ужесточения политики безопасности.</em></p>
<h3><a name="issues">Что ожидается и текущие проблемы</a></h3>
<ol>
<li>откуда еще поскробблим?? Пишите!</li>
<li>Chrome! Chrome! Chrome!</li>
</ol>
<p>Остальные известные мне проблемы уже решены. Так что присылайте отчеты о багах
и запросы на дополнительные возможности <a href="http://vkontakte.ru/notes.php?act=s&nid=8367692&oid=1584415">в комментарии</a>.</p>
<h3><a name="changelog">История версий</a></h3>
<h5>Бета 8 (2010-10-05)</h5>
<ul>
<li>Пофиксан скробблинг в заметках.</li>
<li>Пофиксан скробблинг в группах с микроблогом без аудиозаписей. Скробблер загружается вместе с компонентами плеера вконтакте.</li>
</ul>
<h5>Бета 7 (2010-09-27)</h5>
<ul>
<li>Прошел целый год! Вы представляете?</li>
<li>Скрипты вконтакте изменились, и Джанет стала с ними не совместима</li>
<li>И вот теперь, ура, я исправил скрипт!</li>
<li>Поддерживаются модные стены, музыка в сообщениях и прочие новшества вконтакте</li>
<li>Инфа об альбоме снова отображается</li>
</ul>
<h5>Бета 5 (2009-09-29)</h5>
<ul>
<li>поддерживается vk.com. Спасибо <a href="http://dubinkin.com/">Никите Дубинкину</a> за указание на проблему и патч.</li>
</ul>
<h5>Бета 4 (2009-06-27)</h5>
<ul>
<li>багфикс насчет русских названий треков</li>
<li>отображение информации о версии по клику на серый значок скробблера</li>
</ul>
<h5>Бета 3 (2009-05-26)</h5>
<ul>
<li>багфикс для ФФ</li>
</ul>
<h5>Бета 2 (2009-05-24)</h5>
<ul>
<li>Совместимость с новым интерфейсом поиска вконтакте</li>
<li>Поддержка Google Chrome</li>
<li>И еще, спасибо <a href="http://vkontakte.ru/id327373">Павлу Мельникову</a> за поддержку скрипта пока мне было не до того</li>
</ul>
<h5>Бета 1 (2009-04-07)</h5>
<ul>
<li>Получен client identifier. Можно и бетой назваться ;)</li>
<li>При обновлении в FF не забудьте удалить старую версию (а не то у вас будет два скробблера установлено)</li>
</ul>
<h5>Альфа 6 (2009-03-28)</h5>
<ul>
<li>теперь скробблер называется Janeth. Вообще практика называть программы женскими именами очень сексуальна. Спасибо <a href="http://chebotaev.ru/">Антону Че</a> за придумывание такого прекрасного называния, и <a href="http://geevee.ru">Евгению Геращенко</a> за убеждение меня, что оно прекрасно.</li>
<li>сэкономлена память</li>
<li>сообщения об ошибках ближе к пользователю</li>
<li>переписан Requester</li>
</ul>
<h5>Альфа 5 (2009-03-19)</h5>
<ul>
<li>minor bug-fixes</li>
</ul>
<h5>Альфа 4 (2009-03-18)</h5>
<ul>
<li>трек-инфо при скробллинге больше уезжает из поля зрения</li>
<li>большие обложки теперь не вылезают куда не следует</li>
<li>красивая кнопочка Установить</li>
<li>мелкие багфиксы</li>
<li>подвинул album-art ближе к названию альбома, а не названию трека</li>
<li>редактирование автора-названия для отправки (кликните значок играющего трека)</li>
<li>скробблим со стен</li>
<li>возможность включить/выключить скробблер</li>
<li>больше не даем пользователю подключаться по собственному желанию</li>
<li>возможность отменить или повторить неудачный скробблинг</li>
<li>сильно переделана архитектура: убрал рисование кнопочек из объекта scrobbler, и хранение состояния из conn</li>
<li>добился еще большей надежности. Ни один трек не будет забыт</li>
</ul>
<h5>Альфа 3 (2009-03-03)</h5>
<ul>
<li>аааааа… В FF в имени исполнителя дважды экранировались пробелы. Теперь все хорошо.</li>
<li>еще пара каких-то мелочей</li>
</ul>
<h5>Альфа 2 (2009-03-01)</h5>
<ul>
<li>появилась загрузка картинок альбома и информации о произведении с Last.fm</li>
<li>написан нормальный текст здесь, руководство по использованию и установке</li>
<li>решена проблема с анимацией в Firefox: иногда значок воспроизведения замирает</li>
</ul>
<h5>Альфа 1 (2009-02-28)</h5>
<ul>
<li>Первый релиз. Что еще сказать?</li>
</ul>
<h3><a name="code">Код</a></h3>
<p>Вот <a href="http://code.google.com/p/vkontakte-scrobbler/">репозиторий на Google Code</a>. Не стесняйтесь его клонировать.</p>
<p>Если вы JS-программист, никто вам не мешает что-нибудь в этом скрипте изменить,
так как лицензия — LGPL.
Особенно приветствуется, если вы портируете его под Chrome, Safari или IE
(для них есть свои Greasemonkey движки).
Также приветствуется отправка патчей мне на email (cyril7<span class="nospam">NOSPAM</span>@<span class="nospam">NOSPAM</span>gmail.com)</p>
<p>Мне в данный момент лень описывать как это все работает. Перечислю лишь объекты, задействованные в процессе:</p>
<ul>
<li>scrobbler — объект, инкапсулирующий поведение на странице вконтакте. Когда музыку включают/выключают,
у него вызываются соответствующие методы. Он ответственен за то, чтобы создавать объекты Track и отправлять им
соответствующие внешние события.</li>
<li>scrobbler.fm. Он инкапсулирует сервис Last.fm. Логинит, когда надо, когда надо ставит запрос в очередь,
склонен парсить ответы ласт.фма. В него слудует со временем передвинуть хранение состояния из scrobbler.fm.conn.</li>
<li>ScrobblerIcon демонстрирует значок ласт.фма и отображает статус соединения. Является observer'ом scrobbler.fm'а.</li>
<li>PlayingIcon отображает статус проигрываемого трека. Является observer'ом Track'а.</li>
<li>AdvancedControl инкапсулирует интерфейс редактирования информации о треке и управления его скробблингом (то, что отображается по клику на PlayingIcon). Является observer'ом Track'а.</li>
<li>InfoPanel — панелька с информациейй о композиции. Следит за Track'ом.</li>
<li>Track инкапсулирует проигрываемый трек.</li>
<li>scrobbler.fm.conn. Инкапсулирует соединение. Бывает разным для Оперы и для FF. Все потому что Опера не
разрешает кросс-доменных запросов даже из UserJS (и, видимо, не разрешит). FF-ный conn работает
просто и естесственно — вызовами GM_xmlhttpRequest. Оперный — ужасно запутанным образом
делает запросы в Iframe'ах, передавая данные через window.name.
Для этого использует вспомогательный объект
Requester, который в свою очередь возвращает данные через самопальный Deferred. Кто разберется в таких
дебрях — большой молодец.</li>
</ul>
<p>Таким образом браузерно-специфичной частью является fm.conn. Он зависит от способа отправки асинхронных запросов.
Таким образом, меняя его можно заставить скробблер работать в других браузерах.</p>
<p>Сайто-специфичными являются scrobbler, ScrobblerIcon, PlayingIcon, AdvancedControl и InfoPanel.
Для того, чтоб скробблер работал на других сайтах (кроме вконтакте) надо реализовать интерфейс scrobbler и, опционально,
объекты отображающие состояние.</p>
<h3><a name="more">Что еще почитать</a></h3>
<ul>
<li><a href="http://code.google.com/p/vkontakte-scrobbler/">проект на Google Code</a></li>
<li><a href="http://vkontakte.ru/notes.php?act=s&nid=8367692&oid=1584415">моя заметка вконтакте</a>, где я жду ваших комментариев</li>
<li><a href="http://vkontakte.ru/club128">группа про last.fm</a> вконтакте (они там спали и видели такой скрипт)</li>
<li><a href="http://userscripts.org/scripts/show/41711" onclick="javascript: pageTracker._trackPageview('/out/userscripts.org/41711'); ">другой скробблер vkontakte</a> (но он хреновый: ненадежный, просит пароль, не совместим с оперой, неправильно считает время воспроизведения)</li>
<li><a href="http://userscripts.org/scripts/show/23867">прекрасный скрипт</a>, чтобы напрямую ходить по внешним ссылкам (под Оперой лучше его дополнить <a href="http://userscripts.org/scripts/show/26237">этим</a>).</li>
<li><a href="http://www.greasespot.net/">про Greasemonkey</a></li>
<li><a href="http://www.opera.com/docs/userjs/">про UserJS</a></li>
</ul>
</div> <!-- #content -->
<div id="copyright">
<div>© 2010 Кирилл Николаев.</div>
<div>Распространяется под лицензией <a href="http://www.gnu.org/copyleft/lesser.html">GNU LGPL</a>. Автор никак не связан с орагнизациями Вконтакте и Last.fm.</div>
</div>
</div> <!-- #about.root -->
</body>
</html>