All files / app/mods/media playlist.ts

100% Statements 4/4
100% Branches 0/0
100% Functions 0/0
100% Lines 4/4

Press n or j to go to the next uncovered block, b, p or k for the previous block.

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 92117x         117x                                     117x                                                                                                                     117x                
import { DateTime } from 'luxon';
import { Plugin } from '../../model/plugin';
import { Mod } from '../../model/tag';
import { Template } from '../../model/template';
 
export const playlistPlugin: Plugin = {
  tag: 'plugin/playlist',
  name: $localize`⏭️ Playlist`,
  config: {
    name: $localize`⏭️ Playlist`,
    version: 1,
    type: 'semantic',
    default: true,
    add: true,
    embeddable: true,
    generated: $localize`Generated by jasper-ui ${DateTime.now().toISO()}`,
    description: $localize`Create a playlist from the list of sources`,
    icons: [{ label: $localize`⏭️`, order: 1 }],
    filters: [
      { query: 'plugin/playlist', label: $localize`⏭️ playlist`, title: $localize`Playlists`, group: $localize`Media 🎬️` },
    ],
  },
};
 
export const playlistTemplate: Template = {
  tag: 'plugin/playlist',
  name: $localize`⏭️ Playlist`,
  config: {
    name: $localize`⏭️ Playlist`,
    type: 'semantic',
    default: true,
    generated: $localize`Generated by jasper-ui ${DateTime.now().toISO()}`,
    view: $localize`♟️`,
    // language=CSS
    css: `
      app-ref-list.plugin_playlist {
        .list-container {
          grid-auto-flow: row dense;
          padding: 4px;
          gap: 8px;
          grid-template-columns:  1fr;
          @media (min-width: 1000px) {
            grid-template-columns:  1fr 1fr;
          }
          @media (min-width: 1500px) {
            grid-template-columns: 1fr 1fr 1fr;
          }
          @media (min-width: 2000px) {
            grid-template-columns: 1fr 1fr 1fr 1fr;
          }
          .list-number {
            display: none;
          }
          .ref {
            break-inside: avoid;
            .toggle {
              display: none;
            }
            @media (max-width: 740px) {
              .actions, .info {
                height: 28px;
              }
            }
          }
        }
      }
    `,
    advancedForm: [{
      key: 'defaultExpanded',
      type: 'boolean',
      defaultValue: true,
      props: {
        label: $localize`Default Expanded:`,
      },
    }],
  },
  defaults: {
    defaultExpanded: true,
    defaultSort: ['modified,DESC'],
    defaultCols: 0, // Leave to CSS screen size detection, but show cols dropdown
  }
};
 
export const playlistMod: Mod = {
  plugin: [
    playlistPlugin,
  ],
  template: [
    playlistTemplate
  ],
};