Customizing Vimeography Pro #2 – Player-Container

Vimeography Player Container Customization
/**
 * Customize Timber display for non-subscribing users
 * Relies on Vimeography Pro "Timber" theme, as well as MemberPress (for "rules") and
 * Advanced Custom Fields
 */
add_action( 'admin_head', 'custom_player_container' ) ;
add_action( 'wp_head', 'custom_player_container' ) ;

function custom_player_container() {
  
  $rules = 'rules:' . get_field( 'memberpress_access', 'option' ) ;
  if ( ! ( current_user_can( 'mepr-active', $rules  ) ) ) {
  
    $replacement =       get_field( 'replacement_for_video', 'option' ) ;
    $line_1 =            get_field( 'line_1', 'option' ) ;
    $line_2_link_text =  get_field( 'line_2_link_text', 'option' ) ;
    $line_2_link =       get_field( 'line_2_link', 'option' ) ;
    $line_2_text =       get_field( 'line_2_text', 'option' ) ;
    $line_3 =            get_field( 'line_3', 'option' ) ;
$design_class = 1 == get_field( 'replacement_or_pre-designed', 'option' ) ? ' replacement' : ' pre-designed' ; ob_start() ; ?> <script type="text/x-template" id="vimeography-component-modal-modern-touch"> <div class="vimeography-modal-modern-touch"> <div class="vimeography-header"> <h2 class="vimeography-title">{{activeVideo.name}}</h2> <div class="vimeography-controls"> <router-link class="vimeography-next" :to="nextVideoUrl" exact exact-active-class="vimeography-next-active"> <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1" stroke-linecap="round" stroke-linejoin="round" class="feather feather-arrow-right"><line x1="4" y1="12" x2="20" y2="12"></line><polyline points="14 6 20 12 14 18"></polyline></svg> </router-link> <a href="#" @click="$modal.hide(modalId)"> <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1" stroke-linecap="round" stroke-linejoin="round" class="feather feather-x"> <line x1="18" y1="6" x2="6" y2="18"></line> <line x1="6" y1="6" x2="18" y2="18"></line> </svg> </a> </div> </div> <!-- BEGIN REPLACE INJECTED JS --> <div class="vimeography-player-container" itemprop="video" itemscope itemtype="http://schema.org/VideoObject"> <meta itemprop="name" :content="this.activeVideo.name" /> <meta itemprop="description" :content="this.activeVideo.description" /> <meta itemprop="thumbnailUrl" :content="this.activeVideo.thumbnail_large" /> <meta itemprop="uploadDate" :content="this.activeVideo.created_time" /> <div class="vimeography-no-player"> <div class="unauthorized-message<?php echo $design_class ; ?>"> <?php if ( 2 == get_field( 'replacement_or_pre-designed', 'option') ) { ?> <!-- REPLACE WITH ACF VARS --> <p><?php echo $line_1 ; ?></p> <h3> <a href="<?php echo $line_2_link ; ?>" target="_blank" > <?php echo $line_2_link_text ; ?> </a><?php echo $line_2_text ; ?> </h3> <p><?php echo $line_3 ; ?></p> <?php } else { echo '<!-- REPLACE WITH ACF WYSIWYG OUTPUT -->' ; echo $replacement ; } ?> </div> </div> </div> <!--/ END REPLACE INJECTED JS --> <div class="vimeography-description" v-html="activeVideo.description"> </div> <download-link :video="activeVideo"></download-link> <span class="vimeography-plays" v-if="activeVideo.stats.plays">({{activeVideo.stats.plays}} views) </span> <span class="vimeography-tags" v-if="this.tags.length > 0">Filed under {{this.tags}}</span> </div> </script> <?php echo ob_get_clean() ; } }

Default Vimeography Player:

Customized Player Container for Non-Subscribers:

Advanced Custom Fields Back End:

Leave a Reply