hummingbird-me/kitsu-web

View on GitHub
app/templates/components/stream-feed/items/review.hbs

Summary

Maintainability
Test Coverage
{{! Legacy }}

{{#if review}}
  <div class="stream-item-wrapper stream-review-wrapper col-sm-12">
    <div class="stream-review row">
      {{#unless hideImage}}
        <div class="stream-item--media col-xs-4 col-sm-3">
          <a href={{href-to (concat media.modelType ".show") media.slug}}>
            {{lazy-image src=(image media.posterImage "large")}}
          </a>
        </div>
      {{/unless}}
      <div class="col-xs no-padding-left">
        <div class="stream-review-content">
          <header class="author-header">
            <a class="review-avatar" href={{href-to "users.index" review.user}}>
              {{lazy-image src=(image review.user.avatar "small")}}
            </a>
            <h5 class="name-heading person-heading left">
              {{! TODO: Use helper function to include href-to in translation }}
              <small>{{t "components.stream-feed.review.by"}}</small>
              <a href={{href-to "users.index" review.user}}>{{review.user.name}}</a>
            </h5>
          </header>
          <small class="media-heading">
            <h6>
              <a href={{href-to (concat media.modelType ".show") media.slug}}>
                {{media.computedTitle}}
              </a>
              {{library-entry/readonly-rating rating=review.rating tagName="span" class="stream-review-rating"}}
            </h6>

            {{! review media progress -- progress > 0 && !(progress === unitCount) }}
            {{#if (and (gt review.progress 0) (not (eq review.progress media.unitCount)))}}
              <small class="review-media-progress">
                {{t "feeds.review.progress" type=media.modelType num=review.progress}}
              </small>
            {{/if}}
          </small>

          {{! review content }}
          <div class="comment-body">
            {{! spoiler }}
            {{#if isHidden}}
              <div class="spoiler-gate">
                <a href="#" {{action (toggle "isHidden" this)}}>
                  <div class="gate--label">
                    {{t "components.stream-feed.review.spoiler"}}
                  </div>
                  <div class="gate--hover">
                    {{t "components.stream-feed.review.spoiler-hover"}}
                  </div>
                </a>
              </div>
            {{else}}
              {{#if isExpanded}}
                {{format-content review.contentFormatted}}
              {{else}}
                {{#read-more text=(format-content review.contentFormatted) length=480 maxLines=50 isHTML=true as |rm|}}
                  {{#if rm.wasTruncated}}
                    <div class="view-more">
                      <a href="#" {{action rm.toggleVisibility}}>
                        {{#if rm.isTruncated}}
                          {{t "feeds.post.more"}}
                        {{else}}
                          {{t "feeds.post.less"}}
                        {{/if}}
                      </a>
                    </div>
                  {{/if}}
                {{/read-more}}
              {{/if}}
            {{/if}}
          </div>
        </div>
      </div>
    </div>

    {{! review likes }}
    <div class="stream-item-activity">
      {{likeable-resource
        resource=review
        likesCount=review.likesCount
        likesCountUpdate=(action (mut review.likesCount))
        showUsers=true
      }}
    </div>

    <div class="stream-item-options">
      <a href={{tweetLink}} target="_blank" {{action "trackEngagement" "click" preventDefault=false}}>
        {{svg-jar "l-twitter"}}
        {{t "components.stream-feed.review.share.twitter"}}
      </a>
      <a href={{facebookLink}} target="_blank" {{action "trackEngagement" "click" preventDefault=false}}>
        {{svg-jar "l-facebook"}}
        {{t "components.stream-feed.review.share.facebook"}}
      </a>

      {{! options }}
      <span class="more-wrapper">
        <a href="#" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false" class="more-drop">
          {{svg-jar "more"}}
        </a>
        <div class="dropdown-menu dropdown-menu-right">
          <a href="#" data-clipboard-text={{concat host (href-to "reviews" review.id)}} class="dropdown-item" {{action "trackEngagement" "click"}}>
            {{t "components.stream-feed.review.copy-link"}}
          </a>

          {{! Re-hide the review }}
          {{#if review.spoiler}}
            {{#if isHidden}}
              <a class="dropdown-item" href="#" {{action (toggle "isHidden" this)}}>{{t "components.stream-feed.review.show"}}</a>
            {{else}}
              <a class="dropdown-item" href="#" {{action (toggle "isHidden" this)}}>{{t "components.stream-feed.review.hide"}}</a>
            {{/if}}
          {{/if}}

          {{! edit/delete review }}
          {{#if (can "edit review" review)}}
            <a href="#" class="dropdown-item" {{action (toggle "editReview" this)}}>{{t "components.stream-feed.review.edit"}}</a>
            {{#if editReview}}
              {{to-elsewhere named="modal" send=(component "modals/media-review"
                onClose=(toggle-action "editReview" this)
                review=review
              )}}
            {{/if}}

            <a class="dropdown-item" href="#" {{action (toggle "deleteModalOpened" this)}}>{{t "components.stream-feed.review.delete"}}</a>
            {{#if deleteModalOpened}}
              {{to-elsewhere named="modal" send=(component "modals/confirm-action"
                onConfirm=(action "deleteReview")
                onClose=(toggle-action "deleteModalOpened" this)
              )}}
            {{/if}}
          {{/if}}

          {{! report }}
          {{#if (and session.hasUser (not (is-self review.user)))}}
            <a class="dropdown-item" href="#" {{action (toggle "reportReview" this)}}>{{t "components.stream-feed.review.report"}}</a>
            {{#if reportReview}}
              {{to-elsewhere named="modal" send=(component "modals/report-content"
                content=review
                onClose=(toggle-action "reportReview" this)
              )}}
            {{/if}}
          {{/if}}
        </div>
      </span>
    </div>
  </div>
{{else}}
  <div class="stream-error-wrapper col-sm-12">
    {{t "errors.load"}}
  </div>
{{/if}}