discourse-translator/assets/javascripts/discourse/components/translated-post.gjs

import Component from "@glimmer/component";
import { service } from "@ember/service";
import { htmlSafe } from "@ember/template";
import ConditionalLoadingSpinner from "discourse/components/conditional-loading-spinner";
import { i18n } from "discourse-i18n";

export default class TranslatedPost extends Component {
  static shouldRender(args) {
    return args.post.isTranslated || args.post.isTranslating;
  }

  @service siteSettings;

  get loading() {
    return this.post.isTranslating;
  }

  get isTranslated() {
    return this.post.isTranslated;
  }

  get post() {
    return this.args.outletArgs.post;
  }

  get translatedText() {
    return this.post.translatedText;
  }

  get translatedTitle() {
    return this.post.translatedTitle;
  }

  get showTranslation() {
    return !this.siteSettings.experimental_inline_translation;
  }

  <template>
    <div class="post-translation">
      <ConditionalLoadingSpinner
        class="post-translation"
        @condition={{this.loading}}
        @size="small"
      >
        {{#if this.showTranslation}}
          <hr />
          {{#if this.translatedTitle}}
            <div class="topic-attribution">
              {{this.translatedTitle}}
            </div>
          {{/if}}
          <div class="post-attribution">
            {{i18n
              "translator.translated_from"
              language=this.post.detectedLang
              translator=this.siteSettings.translator_provider
            }}
          </div>
          <div class="cooked">
            {{htmlSafe this.post.translatedText}}
          </div>
        {{/if}}
      </ConditionalLoadingSpinner>
    </div>
  </template>
}