spacedeck-open/views/partials/tool/search.html

<div id="search" class="relative w-8" style="height:350px">
  <ul class="dialog-side-tabs">
    <li>
      <button class="btn btn-xl btn-transparent btn-icon-labeled hover" v-class="active:media_search_target=='google'" v-on="click:search_google(generic_search_query)">
        <span class="icon icon-social-google"></span>
        <span class="icon-label">Google</span>
      </button>
    </li>
    <li>
      <button class="btn btn-xl btn-transparent btn-icon-labeled hover" v-class="active:media_search_target=='youtube'" v-on="click:search_youtube(generic_search_query)">
        <span class="icon icon-social-youtube"></span>
        <span class="icon-label">Youtube</span>
      </button>
    </li>
    <li>
      <button class="btn btn-xl btn-transparent btn-icon-labeled hover" v-class="active:media_search_target=='tumblr'" v-on="click:search_tumblr(generic_search_query)">
        <span class="icon icon-social-tumblr"></span>
        <span class="icon-label">Tumblr</span>
      </button>
    </li>
    <li>
      <button class="btn btn-xl btn-transparent btn-icon-labeled hover" v-class="active:media_search_target=='soundcloud'" v-on="click:search_soundcloud(generic_search_query)">
        <span class="icon icon-social-soundcloud"></span>
        <span class="icon-label">Soundcloud</span>
      </button>
    </li>
  </ul>

  <div class="dialog-search-input">
    <!-- generic search box placeholder -->
    <div class="relative">
      <span class="icon icon-zoom absolute-top-left no-events" style="margin-top: -2px;"></span>
      <input type="text" v-model="generic_search_query" v-focus class="input input-white input-round input-block no-b p-l-60" placeholder="[[__("search_media_placeholder")]]" v-on="keyup: search_generic(generic_search_query) | key enter">
    </div>

    <!-- <button type="button" class="btn btn-sm btn-icon btn-round btn-darken absolute-top-right clear-search" style="margin-right: 42px; margin-top: 40px;">
      <span class="icon icon-cross-1"></span>
    </button> -->
  </div>

  <div class="overflow-y-scroll fit dialog-search-results dialog-section" v-if="search_loading">
    <span class="middle">Searching...</span>
  </div>


  <!-- search results audio -->
  <div class="overflow-y-scroll fit dialog-search-results dialog-section" v-if="audio_search_results.length">
    <div class="search-result search-result-audio relative" v-repeat="r : audio_search_results" v-on="click:create_artifact_via_embed_url(r.permalink_url)">
      <iframe frameborder="0" seamless width="100%" v-attr="src:r.embed_url"></iframe>
    </div>
  </div>

  <!-- search results images -->
  <div class="overflow-y-scroll fit dialog-search-results dialog-section" v-if="image_search_results.length">
    <div class="search-result search-result-image" v-repeat="r : image_search_results" v-on="click:handle_insert_image_url(r.link)">
      <img v-attr="src:r.thumb"/>
    </div>
  </div>

  <!-- search results video -->
  <div class="overflow-y-scroll fit dialog-search-results dialog-section" v-if="video_search_results.length">
    <div class="search-result search-result-video relative" v-repeat="r : video_search_results"  v-on="click:create_artifact_via_embed_url('https://youtube.com/?v='+r.id.videoId)">

      <div class="thumbnail" v-style="background-image: 'url(https://img.youtube.com/vi/'+r.id.videoId+'/hqdefault.jpg)'"> </div>
      <span>{{r.snippet.title}}</span>
      <!-- <span>{{r.snippet.description}}</span> -->
      <!-- <span>{{r.snippet.thumbnails.medium.url}}</span> -->
    </div>
  </div>
</div>