core/templates/components/summary-tile/exploration-summary-tile.component.html - develop - githubmirror/oppia

core/templates/components/summary-tile/exploration-summary-tile.component.html
160 строк8 KB
tanmaygoyal2007
Fix part of #26609: Removed play later functionality (#26610)
03 авг 2026, 09:18
03 авг 2026, 09:183d1dd30
<div *ngIf="!mobileCardToBeShown && !isInNewLessonPlayer()" class="e2e-test-lesson-card">
  <mat-card (keydown.enter)="$event.stopPropagation(); explorationAnchor.click()"
            [ngClass]="{'oppia-activity-summary-tile-mobile': isCollectionPreviewTile, 'oppia-activity-summary-tile': !isCollectionPreviewTile, 'small-width': !isWindowLarge}"
            *ngIf="!isRefresherExploration"
            tabindex="0"
            [style.padding]="0"
            class="oppia-exploration-dashboard-card e2e-test-exploration-dashboard-card oppia-focus-indicator-blue"
            (mouseenter)="setHoverState(true)"
            (mouseleave)="setHoverState(false)"
            [ngStyle]="{'margin': '5px'}">
    <a #explorationAnchor
       [href]="getExplorationLink()"
       tabindex="-1"
       target="{{ openInNewWindow ? '_blank' : '_self' }}">
      <div class="title-section" [ngStyle]="{'background-color': thumbnailBgColor}">
        <img class="thumbnail-image" [src]="thumbnailIcon" [alt]="'category: ' + category + '.'">
        <span class="activity-title e2e-test-exp-summary-tile-title">
          <span *ngIf="isWindowLarge">
            <span *ngIf="!isHackyExpTitleTranslationDisplayed()"
                  [attr.aria-label]="'exploration title:' + explorationTitle + '.'"
                  class="e2e-test-exploration-tile-title">
              {{ explorationTitle | truncate:40 }}
            </span>
            <span *ngIf="isHackyExpTitleTranslationDisplayed()"
                  [attr.aria-label]="'exploration title:' + expTitleTranslationKey + '.'">
              {{ expTitleTranslationKey | translate | truncate:40 }}
            </span>
          </span>
          <span *ngIf="!isWindowLarge">
            <span *ngIf="!isHackyExpTitleTranslationDisplayed()"
                  [attr.aria-label]="'exploration title:' + explorationTitle + '.'">
              {{ explorationTitle | truncate:40 }}
            </span>
            <span *ngIf="isHackyExpTitleTranslationDisplayed()"
                  [attr.aria-label]="'exploration title:' + expTitleTranslationKey + '.'">
              {{ expTitleTranslationKey | translate | truncate:40 }}
            </span>
          </span>
        </span>
      </div>
      <div *ngIf="!isPlaylistTile" class="title-section-mask"></div>
      <div class="summary-section"
           section="{isWindowLarge?undefined:'right-section'}">
        <div *ngIf="isWindowLarge" class="objective e2e-test-exp-summary-tile-objective">
          <span *ngIf="!isHackyExpObjectiveTranslationDisplayed()"
                [attr.aria-label]="'objective:' + objective + '.'">
            {{ objective | truncateAndCapitalize:95 }}
          </span>
          <span *ngIf="isHackyExpObjectiveTranslationDisplayed()"
                [attr.aria-label]="'objective:' + expObjectiveTranslationKey + '.'">
            {{ expObjectiveTranslationKey | translate | truncateAndCapitalize:95 }}
          </span>
        </div>
        <div *ngIf="!objective" class="objective">
          <span [innerHTML]="'I18N_LIBRARY_NO_OBJECTIVE' | translate">
          </span>
        </div>
        <ul *ngIf="!isCollectionPreviewTile" class="metrics layout-row">
          <li>
            <span class="e2e-test-exp-summary-tile-rating" [ngClass]="{'rating-disabled': !avgRating}">
              <span class="fas fa-star" [ngbTooltip]="'I18N_LIBRARY_RATINGS_TOOLTIP' | translate" placement="top" container="body">
                <span class="oppia-icon-accessibility-label" [innerHTML]="'I18N_LIBRARY_RATINGS_TOOLTIP' | translate"></span>
              </span>
              <span *ngIf="avgRating">
                {{ avgRating | number:'1.1-1' }}
              </span>
              <span *ngIf="!avgRating" [innerHTML]="'I18N_LIBRARY_N/A' | translate" class="oppia-inactive-summary-tile-attribute">
              </span>
            </span>
          </li>
          <li>
            <span class="far fa-eye" [ngbTooltip]="'I18N_LIBRARY_VIEWS_TOOLTIP' | translate" placement="top" container="body">
              <span class="oppia-icon-accessibility-label" [innerHTML]="'I18N_LIBRARY_VIEWS_TOOLTIP' | translate"></span>
            </span>
            <span *ngIf="numViews" class="e2e-test-exp-summary-tile-views">
              {{ numViews | summarizeNonnegativeNumber }}
            </span>
            <span *ngIf="!numViews" [innerHTML]="'I18N_LIBRARY_N/A' | translate" class="oppia-inactive-summary-tile-attribute">
            </span>
          </li>
          <li>
            <span *ngIf="lastUpdatedDateTime">
              <span class="oppia-icon-accessibility-label">Last Updated</span>
              {{ lastUpdatedDateTime }}
            </span>
            <span *ngIf="!lastUpdatedDateTime" [innerHTML]="'I18N_LIBRARY_N/A' | translate" class="oppia-inactive-summary-tile-attribute">
            </span>
          </li>
        </ul>
        <div *ngIf="tags && tags.length > 0" class="tags-section">
          <span *ngFor="let tag of tags" class="tag-badge">
            {{ tag }}
          </span>
        </div>
        <button *ngIf="isCollectionPreviewTile" class="oppia-learner-confirm-button oppia-play-exploration-button mat-button  mat-default-theme e2e-test-play-exploration-button">
          <span [innerHTML]="'I18N_PLAYER_PLAY_EXPLORATION' | translate"></span>
        </button>
      </div>
    </a>
  </mat-card>
  <button mat-button class="oppia-learner-confirm-button oppia-return-to-parent-button e2e-test-return-to-parent-button"
            *ngIf="isRefresherExploration" (click)="loadParentExploration()">
    <span translate="I18N_PLAYER_RETURN_TO_PARENT"></span>
    <i class="fas fa-arrow-right oppia-arrow-icon">
    </i>
  </button>
</div>

<div *ngIf="mobileCardToBeShown && !isInNewLessonPlayer()">
  <mat-card class="mobile-activity-summary-card" *ngIf="!isRefresherExploration" [ngStyle]="{'margin': '5px'}">
    <a [href]="getExplorationLink()" target="{{ openInNewWindow ? '_blank' : '_self' }}">
      <div class="mobile-exploration-card-image-container" [ngStyle]="{'background-color': thumbnailBgColor}">
        <img class="mobile-exploration-card-image" [src]="thumbnailIcon" alt="{{ category }}">
      </div>
      <div class="mobile-activity-card-details">
        <h3 class="mobile-exploration-title e2e-test-exp-summary-tile-title">
          <span *ngIf="!isHackyExpTitleTranslationDisplayed()">{{ explorationTitle | truncate:40 }}</span>
          <span *ngIf="isHackyExpTitleTranslationDisplayed()">{{ expTitleTranslationKey | translate | truncate:40 }}</span>
        </h3>
        <div class="mobile-activity-card-summary-section">
          <ul *ngIf="!isCollectionPreviewTile" class="mobile-activity-card-summary-elements">
            <li>
              <span *ngIf="numViews">{{ numViews | summarizeNonnegativeNumber }}</span>
              <span *ngIf="!numViews" [innerHTML]="'I18N_LIBRARY_N/A' | translate" class="oppia-inactive-summary-tile-attribute">
              </span>
              <span *ngIf="numViews === 1"  class="views-text">view</span>
              <span *ngIf="numViews !== 1" class="views-text">views</span>
            </li>
            <li>
              <span>
                <i class="fas fa-circle bullet-separator"></i>
              </span>
            </li>
            <li>
              <span *ngIf="lastUpdatedDateTime">
                <span class="oppia-icon-accessibility-label">Last Updated</span>
                {{ relativeLastUpdatedDateTime }}
              </span>
              <span *ngIf="!lastUpdatedDateTime" [innerHTML]="'I18N_LIBRARY_N/A' | translate" class="oppia-inactive-summary-tile-attribute">
              </span>
            </li>
          </ul>
        </div>
      </div>
    </a>
  </mat-card>
  <button mat-button class="oppia-learner-confirm-button oppia-return-to-parent-button e2e-test-return-to-parent-button"
            *ngIf="isRefresherExploration" (click)="loadParentExploration()">
    <span translate="I18N_PLAYER_RETURN_TO_PARENT"></span>
    <i class="fas fa-arrow-right oppia-arrow-icon">
    </i>
  </button>
</div>

<a [href]="getExplorationLink()" *ngIf="isInNewLessonPlayer()">
  <button class="exploration-summary-btn" tabindex="0">
    <i class="fa-solid fa-arrow-right arrow-icon"></i>
    <p>{{ explorationTitle }}<br><span><i class="fa-solid fa-star star-icon"></i>{{avgRating ? avgRating : 'N/A'}}</span></p>
  </button>
</a>