kodi-echo/src/modules/views/main/options.js at 35c26bf9160c1fb0e9c25e2cdc939887acfeb0f8 · jaylinski/kodi-echo · GitHub

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
import { getBrowser } from './../../utils/browser.js';
import { html } from './../../utils/dom.js';

const browser = getBrowser();

export default (store, i18n) => {
  const reload = () => browser.runtime.reload();

  return html`
    <div class="c-options c-section__content">
      <!-- TODO Use more visually appealing on-off switches:
         https://material.angular.io/components/slide-toggle/overview -->
      <table cellspacing="0" cellpadding="0">
        <tbody>
          <tr>
            <th>
              <label for="detect_embedded_media">${i18n.getMessage('optionsAutoDetectEmbeddedMediaLinks')}</label>
              <small>${i18n.getMessage('optionsExperimental')}</small>
            </th>
            <td>
              <input
                @change="${store.actions.updateOptions}"
                type="checkbox"
                id="detect_embedded_media"
                data-option="autoDetectEmbeddedMediaLinks"
                role="switch"
                .checked=${store.options.autoDetectEmbeddedMediaLinks}
                ?checked=${store.options.autoDetectEmbeddedMediaLinks}
                aria-checked="${store.options.autoDetectEmbeddedMediaLinks ? 'true' : 'false'}"
              />
            </td>
          </tr>
          <tr>
            <th>
              <label for="replay_notification">${i18n.getMessage('optionsReplayNotifications')}</label>
              <small>${i18n.getMessage('optionsExperimental')}</small>
            </th>
            <td>
              <input
                @change="${store.actions.updateOptions}"
                type="checkbox"
                id="replay_notification"
                data-option="replayNotification"
                role="switch"
                .checked=${store.options.replayNotification}
                ?checked=${store.options.replayNotification}
                aria-checked="${store.options.replayNotification ? 'true' : 'false'}"
              />
            </td>
          </tr>
        </tbody>
      </table>
      <hr />
      <p class="c-options__notice">${i18n.getMessage('optionsReloadInfo')}</p>
      <button @click="${reload}" class="c-options__button">${i18n.getMessage('optionsReloadButton')}</button>
    </div>
  `;
};