[github/Chocobozzz/PeerTube.git] / client / src / app / shared / shared-share-modal / video-share.component.html

<ng-template #modal let-hide="close">
  <div class="modal-header">
    <h4 i18n class="modal-title">Share</h4>

    <button class="border-0 p-0" (click)="hide()">
      <my-global-icon iconName="cross" aria-label="Close" role="button" ></my-global-icon>
    </button>
  </div>


  <div class="modal-body">

    <div class="playlist" *ngIf="playlist">
      <h5 i18n *ngIf="video">Share the playlist</h5>

      <div *ngIf="isPrivatePlaylist()" class="alert-private alert alert-warning">
        <div i18n>This playlist is private so you won't be able to share it with external users</div>

        <a i18n class="peertube-button-link orange-button" [routerLink]="[ '/my-library/video-playlists/update', playlist.uuid ]" target="_blank" rel="noopener noreferrer">
          Update playlist privacy
        </a>
      </div>

      <div ngbNav #nav="ngbNav" class="nav-tabs" [(activeId)]="activePlaylistId">

        <ng-container ngbNavItem="url">
          <a ngbNavLink i18n>URL</a>

          <ng-template ngbNavContent>
            <div class="nav-content">
              <my-input-text [value]="playlistUrl" [withToggle]="false" [withCopy]="true" [show]="true" [readonly]="true"></my-input-text>
            </div>
          </ng-template>
        </ng-container>

        <ng-container ngbNavItem="qrcode">
          <a ngbNavLink i18n>QR-Code</a>

          <ng-template ngbNavContent>
            <div class="nav-content">
              <qrcode [qrdata]="playlistUrl" [width]="256" level="Q"></qrcode>
            </div>
          </ng-template>
        </ng-container>

        <ng-container ngbNavItem="embed">
          <a ngbNavLink i18n>Embed</a>

          <ng-template ngbNavContent>
            <div class="nav-content">
              <my-input-text
                [value]="customizations.onlyEmbedUrl ? playlistEmbedUrl : playlistEmbedHTML" (change)="onUpdate()"
                [withToggle]="false" [withCopy]="true" [show]="true" [readonly]="true"
              ></my-input-text>

              <div i18n *ngIf="notSecure()" class="alert alert-warning">
                The url is not secured (no HTTPS), so the embed video won't work on HTTPS websites (web browsers block non secured HTTP requests on HTTPS websites).
              </div>

              <div class="embed" [innerHTML]="playlistEmbedSafeHTML"></div>
            </div>
          </ng-template>
        </ng-container>

      </div>

      <div [ngbNavOutlet]="nav"></div>

      <div class="filters">

        <div class="form-group" *ngIf="video">
          <my-peertube-checkbox
            inputName="includeVideoInPlaylist" [(ngModel)]="customizations.includeVideoInPlaylist"
            i18n-labelText labelText="Share the playlist at this video position"
          ></my-peertube-checkbox>
        </div>

        <ng-container *ngIf="isInPlaylistEmbedTab()">
          <div class="form-group">
            <my-peertube-checkbox
              inputName="onlyEmbedUrl" [(ngModel)]="customizations.onlyEmbedUrl"
              i18n-labelText labelText="Only display embed URL"
            ></my-peertube-checkbox>
          </div>

          <div class="form-group">
            <my-peertube-checkbox
              inputName="responsive" [(ngModel)]="customizations.responsive"
              i18n-labelText labelText="Responsive embed"
            ></my-peertube-checkbox>
          </div>
        </ng-container>

        <my-plugin-placeholder pluginId="share-modal-playlist-settings"></my-plugin-placeholder>
      </div>
    </div>


    <div class="video" *ngIf="video">
      <h5 *ngIf="playlist" i18n>Share the video</h5>

      <div *ngIf="isPrivateVideo()" class="alert-private alert alert-warning">
        <div i18n>This video is private so you won't be able to share it with external users</div>

        <a i18n class="peertube-button-link orange-button" [routerLink]="[ '/videos/', 'update', video.shortUUID ]" target="_blank" rel="noopener noreferrer">
          Update video privacy
        </a>
      </div>

      <div ngbNav #nav="ngbNav" class="nav-tabs" [(activeId)]="activeVideoId">

        <ng-container ngbNavItem="url">
          <a ngbNavLink i18n>URL</a>

          <ng-template ngbNavContent>
            <div class="nav-content">
              <my-input-text [value]="videoUrl" [withToggle]="false" [withCopy]="true" [show]="true" [readonly]="true"></my-input-text>
            </div>
          </ng-template>
        </ng-container>

        <ng-container ngbNavItem="qrcode">
          <a ngbNavLink i18n>QR-Code</a>

          <ng-template ngbNavContent>
            <div class="nav-content">
              <qrcode [qrdata]="videoUrl" [width]="256" level="Q"></qrcode>
            </div>
          </ng-template>
        </ng-container>

        <ng-container ngbNavItem="embed">
          <a ngbNavLink i18n>Embed</a>

          <ng-template ngbNavContent>
            <div class="nav-content">
              <my-input-text
                [value]="customizations.onlyEmbedUrl ? videoEmbedUrl : videoEmbedHTML" (ngModelChange)="onUpdate()"
                [withToggle]="false" [withCopy]="true" [show]="true" [readonly]="true"
              ></my-input-text>

              <div i18n *ngIf="notSecure()" class="alert alert-warning">
                The url is not secured (no HTTPS), so the embed video won't work on HTTPS websites (web browsers block non secured HTTP requests on HTTPS websites).
              </div>

              <div class="embed" [innerHTML]="videoEmbedSafeHTML"></div>
            </div>
          </ng-template>
        </ng-container>

      </div>

      <div [ngbNavOutlet]="nav"></div>

      <div class="filters">
        <div class="form-group start-at" *ngIf="!video.isLive">
          <my-peertube-checkbox
            inputName="startAt" [(ngModel)]="customizations.startAtCheckbox"
            i18n-labelText labelText="Start at"
          ></my-peertube-checkbox>

          <my-timestamp-input
            [timestamp]="customizations.startAt"
            [maxTimestamp]="video.duration"
            [disabled]="!customizations.startAtCheckbox"
            [(ngModel)]="customizations.startAt"
          >
          </my-timestamp-input>
        </div>

        <div *ngIf="videoCaptions.length !== 0" class="form-group video-caption-block">
          <my-peertube-checkbox
            inputName="subtitleCheckbox" [(ngModel)]="customizations.subtitleCheckbox"
            i18n-labelText labelText="Auto select subtitle"
          ></my-peertube-checkbox>

          <div class="peertube-select-container" [ngClass]="{ disabled: !customizations.subtitleCheckbox }">
            <select [(ngModel)]="customizations.subtitle" [disabled]="!customizations.subtitleCheckbox" class="form-control">
              <option *ngFor="let caption of videoCaptions" [value]="caption.language.id">{{ caption.language.label }}</option>
            </select>
          </div>
        </div>

        <div class="form-group" *ngIf="isInVideoEmbedTab()">
          <my-peertube-checkbox
            inputName="onlyEmbedUrl" [(ngModel)]="customizations.onlyEmbedUrl"
            i18n-labelText labelText="Only display embed URL"
          ></my-peertube-checkbox>
        </div>

        <my-plugin-placeholder pluginId="share-modal-video-settings"></my-plugin-placeholder>

        <div class="advanced-filters" [ngbCollapse]="isAdvancedCustomizationCollapsed" [animation]="true">
          <div class="form-group stop-at" *ngIf="!video.isLive">
            <my-peertube-checkbox
              inputName="stopAt" [(ngModel)]="customizations.stopAtCheckbox"
              i18n-labelText labelText="Stop at"
            ></my-peertube-checkbox>

            <my-timestamp-input
              [timestamp]="customizations.stopAt"
              [maxTimestamp]="video.duration"
              [disabled]="!customizations.stopAtCheckbox"
              [(ngModel)]="customizations.stopAt"
            >
            </my-timestamp-input>
          </div>

          <div class="form-group">
            <my-peertube-checkbox
              inputName="autoplay" [(ngModel)]="customizations.autoplay"
              i18n-labelText labelText="Autoplay"
            ></my-peertube-checkbox>
          </div>

          <div class="form-group">
            <my-peertube-checkbox
              inputName="muted" [(ngModel)]="customizations.muted"
              i18n-labelText labelText="Muted"
            ></my-peertube-checkbox>
          </div>

          <div class="form-group" *ngIf="!video.isLive">
            <my-peertube-checkbox
              inputName="loop" [(ngModel)]="customizations.loop"
              i18n-labelText labelText="Loop"
            ></my-peertube-checkbox>
          </div>

          <div *ngIf="!isLocalVideo() && !isInVideoEmbedTab()" class="form-group">
            <my-peertube-checkbox
              inputName="originUrl" [(ngModel)]="customizations.originUrl"
              i18n-labelText labelText="Use origin instance URL"
            ></my-peertube-checkbox>
          </div>

          <ng-container *ngIf="isInVideoEmbedTab()">
            <div class="form-group">
              <my-peertube-checkbox
                inputName="responsive" [(ngModel)]="customizations.responsive"
                i18n-labelText labelText="Responsive embed"
              ></my-peertube-checkbox>
            </div>

            <div class="form-group">
              <my-peertube-checkbox
                inputName="title" [(ngModel)]="customizations.title"
                i18n-labelText labelText="Display video title"
              ></my-peertube-checkbox>
            </div>

            <div class="form-group">
              <my-peertube-checkbox
                inputName="embedP2P" [(ngModel)]="customizations.embedP2P"
                i18n-labelText labelText="P2P"
              ></my-peertube-checkbox>
            </div>

            <div class="form-group">
              <my-peertube-checkbox
                inputName="warningTitle" [(ngModel)]="customizations.warningTitle"
                i18n-labelText labelText="Display privacy warning" [disabled]="!customizations.embedP2P"
              ></my-peertube-checkbox>
            </div>

            <div class="form-group">
              <my-peertube-checkbox
                inputName="controlBar" [(ngModel)]="customizations.controlBar"
                i18n-labelText labelText="Display player control bar"
              ></my-peertube-checkbox>
            </div>

            <div class="form-group">
              <my-peertube-checkbox
                inputName="peertubeLink" [(ngModel)]="customizations.peertubeLink"
                i18n-labelText labelText="Display PeerTube button link"
              ></my-peertube-checkbox>
            </div>
          </ng-container>
        </div>

        <button
          class="border-0 p-0 mt-4 mx-auto fw-semibold d-block"
          (click)="isAdvancedCustomizationCollapsed = !isAdvancedCustomizationCollapsed"
          [attr.aria-expanded]="!isAdvancedCustomizationCollapsed" aria-controls="collapseBasic"
        >
          <ng-container *ngIf="isAdvancedCustomizationCollapsed">
            <span class="chevron-down"></span>

            <ng-container i18n>
              More customization
            </ng-container>
          </ng-container>

          <ng-container *ngIf="!isAdvancedCustomizationCollapsed">
            <span class="chevron-up"></span>

            <ng-container i18n>
              Less customization
            </ng-container>
          </ng-container>
        </button>
      </div>
    </div>
  </div>

</ng-template>
Commit	Line	Data
	1	<ng-template #modal let-hide="close">
	2	<div class="modal-header">
	3	<h4 i18n class="modal-title">Share</h4>
	4
	5	<button class="border-0 p-0" (click)="hide()">
	6	<my-global-icon iconName="cross" aria-label="Close" role="button" ></my-global-icon>
	7	</button>
	8	</div>
	9
	10
	11	<div class="modal-body">
	12
	13	<div class="playlist" *ngIf="playlist">
	14	<h5 i18n *ngIf="video">Share the playlist</h5>
	15
	16	<div *ngIf="isPrivatePlaylist()" class="alert-private alert alert-warning">
	17	<div i18n>This playlist is private so you won't be able to share it with external users</div>
	18
	19	<a i18n class="peertube-button-link orange-button" [routerLink]="[ '/my-library/video-playlists/update', playlist.uuid ]" target="_blank" rel="noopener noreferrer">
	20	Update playlist privacy
	21	</a>
	22	</div>
	23
	24	<div ngbNav #nav="ngbNav" class="nav-tabs" [(activeId)]="activePlaylistId">
	25
	26	<ng-container ngbNavItem="url">
	27	<a ngbNavLink i18n>URL</a>
	28
	29	<ng-template ngbNavContent>
	30	<div class="nav-content">
	31	<my-input-text [value]="playlistUrl" [withToggle]="false" [withCopy]="true" [show]="true" [readonly]="true"></my-input-text>
	32	</div>
	33	</ng-template>
	34	</ng-container>
	35
	36	<ng-container ngbNavItem="qrcode">
	37	<a ngbNavLink i18n>QR-Code</a>
	38
	39	<ng-template ngbNavContent>
	40	<div class="nav-content">
	41	<qrcode [qrdata]="playlistUrl" [width]="256" level="Q"></qrcode>
	42	</div>
	43	</ng-template>
	44	</ng-container>
	45
	46	<ng-container ngbNavItem="embed">
	47	<a ngbNavLink i18n>Embed</a>
	48
	49	<ng-template ngbNavContent>
	50	<div class="nav-content">
	51	<my-input-text
	52	[value]="customizations.onlyEmbedUrl ? playlistEmbedUrl : playlistEmbedHTML" (change)="onUpdate()"
	53	[withToggle]="false" [withCopy]="true" [show]="true" [readonly]="true"
	54	></my-input-text>
	55
	56	<div i18n *ngIf="notSecure()" class="alert alert-warning">
	57	The url is not secured (no HTTPS), so the embed video won't work on HTTPS websites (web browsers block non secured HTTP requests on HTTPS websites).
	58	</div>
	59
	60	<div class="embed" [innerHTML]="playlistEmbedSafeHTML"></div>
	61	</div>
	62	</ng-template>
	63	</ng-container>
	64
	65	</div>
	66
	67	<div [ngbNavOutlet]="nav"></div>
	68
	69	<div class="filters">
	70
	71	<div class="form-group" *ngIf="video">
	72	<my-peertube-checkbox
	73	inputName="includeVideoInPlaylist" [(ngModel)]="customizations.includeVideoInPlaylist"
	74	i18n-labelText labelText="Share the playlist at this video position"
	75	></my-peertube-checkbox>
	76	</div>
	77
	78	<ng-container *ngIf="isInPlaylistEmbedTab()">
	79	<div class="form-group">
	80	<my-peertube-checkbox
	81	inputName="onlyEmbedUrl" [(ngModel)]="customizations.onlyEmbedUrl"
	82	i18n-labelText labelText="Only display embed URL"
	83	></my-peertube-checkbox>
	84	</div>
	85
	86	<div class="form-group">
	87	<my-peertube-checkbox
	88	inputName="responsive" [(ngModel)]="customizations.responsive"
	89	i18n-labelText labelText="Responsive embed"
	90	></my-peertube-checkbox>
	91	</div>
	92	</ng-container>
	93
	94	<my-plugin-placeholder pluginId="share-modal-playlist-settings"></my-plugin-placeholder>
	95	</div>
	96	</div>
	97
	98
	99	<div class="video" *ngIf="video">
	100	<h5 *ngIf="playlist" i18n>Share the video</h5>
	101
	102	<div *ngIf="isPrivateVideo()" class="alert-private alert alert-warning">
	103	<div i18n>This video is private so you won't be able to share it with external users</div>
	104
	105	<a i18n class="peertube-button-link orange-button" [routerLink]="[ '/videos/', 'update', video.shortUUID ]" target="_blank" rel="noopener noreferrer">
	106	Update video privacy
	107	</a>
	108	</div>
	109
	110	<div ngbNav #nav="ngbNav" class="nav-tabs" [(activeId)]="activeVideoId">
	111
	112	<ng-container ngbNavItem="url">
	113	<a ngbNavLink i18n>URL</a>
	114
	115	<ng-template ngbNavContent>
	116	<div class="nav-content">
	117	<my-input-text [value]="videoUrl" [withToggle]="false" [withCopy]="true" [show]="true" [readonly]="true"></my-input-text>
	118	</div>
	119	</ng-template>
	120	</ng-container>
	121
	122	<ng-container ngbNavItem="qrcode">
	123	<a ngbNavLink i18n>QR-Code</a>
	124
	125	<ng-template ngbNavContent>
	126	<div class="nav-content">
	127	<qrcode [qrdata]="videoUrl" [width]="256" level="Q"></qrcode>
	128	</div>
	129	</ng-template>
	130	</ng-container>
	131
	132	<ng-container ngbNavItem="embed">
	133	<a ngbNavLink i18n>Embed</a>
	134
	135	<ng-template ngbNavContent>
	136	<div class="nav-content">
	137	<my-input-text
	138	[value]="customizations.onlyEmbedUrl ? videoEmbedUrl : videoEmbedHTML" (ngModelChange)="onUpdate()"
	139	[withToggle]="false" [withCopy]="true" [show]="true" [readonly]="true"
	140	></my-input-text>
	141
	142	<div i18n *ngIf="notSecure()" class="alert alert-warning">
	143	The url is not secured (no HTTPS), so the embed video won't work on HTTPS websites (web browsers block non secured HTTP requests on HTTPS websites).
	144	</div>
	145
	146	<div class="embed" [innerHTML]="videoEmbedSafeHTML"></div>
	147	</div>
	148	</ng-template>
	149	</ng-container>
	150
	151	</div>
	152
	153	<div [ngbNavOutlet]="nav"></div>
	154
	155	<div class="filters">
	156	<div class="form-group start-at" *ngIf="!video.isLive">
	157	<my-peertube-checkbox
	158	inputName="startAt" [(ngModel)]="customizations.startAtCheckbox"
	159	i18n-labelText labelText="Start at"
	160	></my-peertube-checkbox>
	161
	162	<my-timestamp-input
	163	[timestamp]="customizations.startAt"
	164	[maxTimestamp]="video.duration"
	165	[disabled]="!customizations.startAtCheckbox"
	166	[(ngModel)]="customizations.startAt"
	167	>
	168	</my-timestamp-input>
	169	</div>
	170
	171	<div *ngIf="videoCaptions.length !== 0" class="form-group video-caption-block">
	172	<my-peertube-checkbox
	173	inputName="subtitleCheckbox" [(ngModel)]="customizations.subtitleCheckbox"
	174	i18n-labelText labelText="Auto select subtitle"
	175	></my-peertube-checkbox>
	176
	177	<div class="peertube-select-container" [ngClass]="{ disabled: !customizations.subtitleCheckbox }">
	178	<select [(ngModel)]="customizations.subtitle" [disabled]="!customizations.subtitleCheckbox" class="form-control">
	179	<option *ngFor="let caption of videoCaptions" [value]="caption.language.id">{{ caption.language.label }}</option>
	180	</select>
	181	</div>
	182	</div>
	183
	184	<div class="form-group" *ngIf="isInVideoEmbedTab()">
	185	<my-peertube-checkbox
	186	inputName="onlyEmbedUrl" [(ngModel)]="customizations.onlyEmbedUrl"
	187	i18n-labelText labelText="Only display embed URL"
	188	></my-peertube-checkbox>
	189	</div>
	190
	191	<my-plugin-placeholder pluginId="share-modal-video-settings"></my-plugin-placeholder>
	192
	193	<div class="advanced-filters" [ngbCollapse]="isAdvancedCustomizationCollapsed" [animation]="true">
	194	<div class="form-group stop-at" *ngIf="!video.isLive">
	195	<my-peertube-checkbox
	196	inputName="stopAt" [(ngModel)]="customizations.stopAtCheckbox"
	197	i18n-labelText labelText="Stop at"
	198	></my-peertube-checkbox>
	199
	200	<my-timestamp-input
	201	[timestamp]="customizations.stopAt"
	202	[maxTimestamp]="video.duration"
	203	[disabled]="!customizations.stopAtCheckbox"
	204	[(ngModel)]="customizations.stopAt"
	205	>
	206	</my-timestamp-input>
	207	</div>
	208
	209	<div class="form-group">
	210	<my-peertube-checkbox
	211	inputName="autoplay" [(ngModel)]="customizations.autoplay"
	212	i18n-labelText labelText="Autoplay"
	213	></my-peertube-checkbox>
	214	</div>
	215
	216	<div class="form-group">
	217	<my-peertube-checkbox
	218	inputName="muted" [(ngModel)]="customizations.muted"
	219	i18n-labelText labelText="Muted"
	220	></my-peertube-checkbox>
	221	</div>
	222
	223	<div class="form-group" *ngIf="!video.isLive">
	224	<my-peertube-checkbox
	225	inputName="loop" [(ngModel)]="customizations.loop"
	226	i18n-labelText labelText="Loop"
	227	></my-peertube-checkbox>
	228	</div>
	229
	230	<div *ngIf="!isLocalVideo() && !isInVideoEmbedTab()" class="form-group">
	231	<my-peertube-checkbox
	232	inputName="originUrl" [(ngModel)]="customizations.originUrl"
	233	i18n-labelText labelText="Use origin instance URL"
	234	></my-peertube-checkbox>
	235	</div>
	236
	237	<ng-container *ngIf="isInVideoEmbedTab()">
	238	<div class="form-group">
	239	<my-peertube-checkbox
	240	inputName="responsive" [(ngModel)]="customizations.responsive"
	241	i18n-labelText labelText="Responsive embed"
	242	></my-peertube-checkbox>
	243	</div>
	244
	245	<div class="form-group">
	246	<my-peertube-checkbox
	247	inputName="title" [(ngModel)]="customizations.title"
	248	i18n-labelText labelText="Display video title"
	249	></my-peertube-checkbox>
	250	</div>
	251
	252	<div class="form-group">
	253	<my-peertube-checkbox
	254	inputName="embedP2P" [(ngModel)]="customizations.embedP2P"
	255	i18n-labelText labelText="P2P"
	256	></my-peertube-checkbox>
	257	</div>
	258
	259	<div class="form-group">
	260	<my-peertube-checkbox
	261	inputName="warningTitle" [(ngModel)]="customizations.warningTitle"
	262	i18n-labelText labelText="Display privacy warning" [disabled]="!customizations.embedP2P"
	263	></my-peertube-checkbox>
	264	</div>
	265
	266	<div class="form-group">
	267	<my-peertube-checkbox
	268	inputName="controlBar" [(ngModel)]="customizations.controlBar"
	269	i18n-labelText labelText="Display player control bar"
	270	></my-peertube-checkbox>
	271	</div>
	272
	273	<div class="form-group">
	274	<my-peertube-checkbox
	275	inputName="peertubeLink" [(ngModel)]="customizations.peertubeLink"
	276	i18n-labelText labelText="Display PeerTube button link"
	277	></my-peertube-checkbox>
	278	</div>
	279	</ng-container>
	280	</div>
	281
	282	<button
	283	class="border-0 p-0 mt-4 mx-auto fw-semibold d-block"
	284	(click)="isAdvancedCustomizationCollapsed = !isAdvancedCustomizationCollapsed"
	285	[attr.aria-expanded]="!isAdvancedCustomizationCollapsed" aria-controls="collapseBasic"
	286	>
	287	<ng-container *ngIf="isAdvancedCustomizationCollapsed">
	288	<span class="chevron-down"></span>
	289
	290	<ng-container i18n>
	291	More customization
	292	</ng-container>
	293	</ng-container>
	294
	295	<ng-container *ngIf="!isAdvancedCustomizationCollapsed">
	296	<span class="chevron-up"></span>
	297
	298	<ng-container i18n>
	299	Less customization
	300	</ng-container>
	301	</ng-container>
	302	</button>
	303	</div>
	304	</div>
	305	</div>
	306
	307	</ng-template>