VideoAdminService,
VideoListComponent
} from './overview'
-import { PluginListInstalledComponent } from './plugins/plugin-list-installed/plugin-list-installed.component'
-import { PluginSearchComponent } from './plugins/plugin-search/plugin-search.component'
-import { PluginShowInstalledComponent } from './plugins/plugin-show-installed/plugin-show-installed.component'
-import { PluginsComponent } from './plugins/plugins.component'
-import { PluginApiService } from './plugins/shared/plugin-api.service'
+import {
+ PluginApiService,
+ PluginCardComponent,
+ PluginListInstalledComponent,
+ PluginsComponent,
+ PluginSearchComponent,
+ PluginShowInstalledComponent
+} from './plugins'
import { JobService, LogsComponent, LogsService } from './system'
import { DebugComponent, DebugService } from './system/debug'
import { JobsComponent } from './system/jobs/jobs.component'
PluginListInstalledComponent,
PluginSearchComponent,
PluginShowInstalledComponent,
+ PluginCardComponent,
JobsComponent,
LogsComponent,
export * from './plugins.component'
+export * from './shared'
+export * from './plugin-list-installed'
+export * from './plugin-search'
+export * from './plugin-show-installed'
+
--- /dev/null
+export * from './plugin-list-installed.component'
</div>
<div class="plugins" myInfiniteScroller (nearOfBottom)="onNearOfBottom()" [dataObservable]="onDataSubject.asObservable()">
- <div class="card plugin" *ngFor="let plugin of plugins">
- <div class="card-body">
- <div class="first-row">
- <span class="plugin-name">{{ plugin.name }}</span>
-
- <span class="plugin-version">{{ plugin.version }}</span>
-
- <a class="plugin-icon" target="_blank" rel="noopener noreferrer" [href]="plugin.homepage" i18n-title title="Plugin homepage (new window)">
- <my-global-icon iconName="home"></my-global-icon>
- </a>
-
- <a class="plugin-icon" target="_blank" rel="noopener noreferrer" [href]="getPluginOrThemeHref(plugin.name)" i18n-title title="Plugin homepage (new window)">
- <my-global-icon iconName="npm"></my-global-icon>
- </a>
-
- <div class="buttons">
- <my-edit-button
- *ngIf="!isTheme(plugin)" [routerLink]="getShowRouterLink(plugin)" label="Settings" i18n-label
- [responsiveLabel]="true"
- ></my-edit-button>
-
- <my-button
- class="update-button" *ngIf="isUpdateAvailable(plugin)" (click)="update(plugin)" [loading]="isUpdating(plugin)"
- [label]="getUpdateLabel(plugin)" icon="refresh" [attr.disabled]="isUpdating(plugin)" [responsiveLabel]="true"
- ></my-button>
-
- <my-delete-button (click)="uninstall(plugin)" label="Uninstall" i18n-label [responsiveLabel]="true"></my-delete-button>
- </div>
- </div>
-
- <div class="second-row">
- <div class="description">{{ plugin.description }}</div>
+ <ng-container *ngFor="let plugin of plugins">
+ <my-plugin-card [plugin]="plugin" [version]="plugin.version" [pluginType]="pluginType">
+ <div ngProjectAs="buttons">
+ <my-edit-button
+ *ngIf="!isTheme(plugin)" [routerLink]="getShowRouterLink(plugin)" label="Settings" i18n-label
+ [responsiveLabel]="true"
+ ></my-edit-button>
+
+ <my-button
+ class="update-button" *ngIf="isUpdateAvailable(plugin)" (click)="update(plugin)" [loading]="isUpdating(plugin)"
+ [label]="getUpdateLabel(plugin)" icon="refresh" [attr.disabled]="isUpdating(plugin)" [responsiveLabel]="true"
+ ></my-button>
+
+ <my-delete-button (click)="uninstall(plugin)" label="Uninstall" i18n-label [responsiveLabel]="true"></my-delete-button>
</div>
- </div>
- </div>
+ </my-plugin-card>
+ </ng-container>
</div>
.update-button[disabled=true] ::ng-deep .action-button {
cursor: default !important;
}
+
+my-edit-button,
+my-button {
+ @include margin-right(10px);
+}
templateUrl: './plugin-list-installed.component.html',
styleUrls: [
'../shared/toggle-plugin-type.scss',
- '../shared/plugin-list.component.scss',
'./plugin-list-installed.component.scss'
]
})
--- /dev/null
+export * from './plugin-search.component'
</div>
<div class="plugins" myInfiniteScroller (nearOfBottom)="onNearOfBottom()" [dataObservable]="onDataSubject.asObservable()">
- <div class="card plugin" *ngFor="let plugin of plugins">
- <div class="card-body">
- <div class="first-row">
- <span class="plugin-name">{{ plugin.name }}</span>
-
- <span class="plugin-version">{{ plugin.latestVersion }}</span>
-
- <a class="plugin-icon" target="_blank" rel="noopener noreferrer" [href]="plugin.homepage" i18n-title title="Plugin homepage (new window)">
- <my-global-icon iconName="home"></my-global-icon>
- </a>
-
- <a class="plugin-icon" target="_blank" rel="noopener noreferrer" [href]="getPluginOrThemeHref(plugin.name)" i18n-title title="Plugin npm package (new window)">
- <my-global-icon iconName="npm"></my-global-icon>
- </a>
-
- <span *ngIf="plugin.installed" class="badge badge-success">Installed</span>
-
+ <ng-container *ngFor="let plugin of plugins" >
+ <my-plugin-card [plugin]="plugin" [version]="plugin.latestVersion" [pluginType]="pluginType">
+ <div ngProjectAs="badges">
+ <span i18n *ngIf="plugin.installed" class="badge badge-success">Installed</span>
<span *ngIf="plugin.official" class="badge badge-primary" i18n i18n-title title="This plugin is developed by Framasoft">
Official
</span>
-
- <div class="buttons">
- <my-edit-button
- *ngIf="plugin.installed === true && !isThemeSearch()" [routerLink]="getShowRouterLink(plugin)"
- label="Settings" i18n-label [responsiveLabel]="true"
- ></my-edit-button>
-
- <my-button
- class="update-button" *ngIf="plugin.installed === false" (click)="install(plugin)"
- [loading]="isInstalling(plugin)" label="Install" [responsiveLabel]="true"
- icon="cloud-download" [attr.disabled]="isInstalling(plugin)"
- ></my-button>
- </div>
</div>
- <div class="second-row">
- <div class="description">{{ plugin.description }}</div>
+ <div ngProjectAs="buttons">
+ <my-edit-button
+ *ngIf="plugin.installed === true && !isThemeSearch()" [routerLink]="getShowRouterLink(plugin)"
+ label="Settings" i18n-label [responsiveLabel]="true"
+ ></my-edit-button>
+
+ <my-button
+ class="update-button" *ngIf="plugin.installed === false" (click)="install(plugin)"
+ [loading]="isInstalling(plugin)" label="Install" [responsiveLabel]="true"
+ icon="cloud-download" [attr.disabled]="isInstalling(plugin)"
+ ></my-button>
</div>
- </div>
- </div>
+
+ </my-plugin-card>
+ </ng-container>
</div>
templateUrl: './plugin-search.component.html',
styleUrls: [
'../shared/toggle-plugin-type.scss',
- '../shared/plugin-list.component.scss',
'./plugin-search.component.scss'
]
})
return !!this.installing[plugin.npmName]
}
- getPluginOrThemeHref (name: string) {
- return this.pluginApiService.getPluginOrThemeHref(this.pluginType, name)
- }
-
getShowRouterLink (plugin: PeerTubePluginIndex) {
return [ '/admin', 'plugins', 'show', this.pluginService.nameToNpmName(plugin.name, this.pluginType) ]
}
--- /dev/null
+export * from './plugin-show-installed.component'
--- /dev/null
+export * from './plugin-api.service'
+export * from './plugin-card.component'
--- /dev/null
+<div class="card plugin">
+ <div class="card-body">
+ <div class="first-row">
+ <span class="plugin-name">{{ plugin.name }}</span>
+
+ <span class="plugin-version">{{ version }}</span>
+
+ <a class="plugin-icon" target="_blank" rel="noopener noreferrer" [href]="plugin.homepage" i18n-title title="Plugin homepage (new window)">
+ <my-global-icon iconName="home"></my-global-icon>
+ </a>
+
+ <a class="plugin-icon" target="_blank" rel="noopener noreferrer" [href]="getPluginOrThemeHref(plugin.name)" i18n-title title="Plugin homepage (new window)">
+ <my-global-icon iconName="npm"></my-global-icon>
+ </a>
+
+ <ng-content select="badges"></ng-content>
+
+ <div class="buttons">
+ <ng-content select="buttons"></ng-content>
+ </div>
+ </div>
+
+ <div class="second-row">
+ <div class="description">{{ plugin.description }}</div>
+ </div>
+ </div>
+</div>
.buttons {
@include margin-left(auto);
- width: max-content;
- > *:not(:last-child) {
- @include margin-right(10px);
- }
+ width: max-content;
}
}
--- /dev/null
+import { Component, Input } from '@angular/core'
+import { PeerTubePlugin, PeerTubePluginIndex, PluginType } from '@shared/models'
+import { PluginApiService } from './plugin-api.service'
+
+@Component({
+ selector: 'my-plugin-card',
+ templateUrl: './plugin-card.component.html',
+ styleUrls: [ './plugin-card.component.scss' ]
+})
+
+export class PluginCardComponent {
+ @Input() plugin: PeerTubePluginIndex | PeerTubePlugin
+ @Input() version: string
+ @Input() pluginType: PluginType
+
+ constructor (
+ private pluginApiService: PluginApiService
+ ) {
+ }
+
+ getPluginOrThemeHref (name: string) {
+ return this.pluginApiService.getPluginOrThemeHref(this.pluginType, name)
+ }
+}