vr.php 5.1 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156
  1. <?php
  2. // VR Viewer Shortcode
  3. // converts [vr] shortcode to an iframe viewer hosted on vr.me.sh
  4. /**
  5. * Scrub URL paramaters for VR viewer
  6. * @param url_params - parameter array which is passed to the jetpack_vr_viewer
  7. * @param url_params['url'] - url of 360 media
  8. * @param url_params['guid'] - guid for videopress
  9. * @param url_params['view'] - cinema, 360 - controls if panaroma view, or 360
  10. * @param url_params['rotation'] - number for rotating media
  11. * @param url_params['preview'] - show preview image or not
  12. * @return url_params array or false
  13. */
  14. function jetpack_vr_viewer_get_viewer_url_params( $params ) {
  15. $url_params = array();
  16. if ( isset( $params['rotation'] ) ) {
  17. $url_params['rotation'] = intval( $params['rotation'], 10 );
  18. }
  19. if ( isset( $params['view'] ) && in_array( $params['view'], array( 'cinema', '360' ), true ) ) {
  20. $url_params['view'] = $params['view'];
  21. }
  22. if ( isset( $params['preview'] ) && $params['preview'] ) {
  23. $url_params['preview'] = 1;
  24. }
  25. if ( isset( $params['url'] ) ) {
  26. return array_merge( $url_params, array( 'url' => $params['url'] ) );
  27. } else if ( isset( $params['guid'] ) ) {
  28. return array_merge( $url_params, array( 'guid' => $params['guid'] ) );
  29. }
  30. return false;
  31. }
  32. /**
  33. * Get padding for IFRAME depending on view type
  34. * @param view - string cinema, 360 - default cinema
  35. * @return css padding
  36. */
  37. function jetpack_vr_viewer_iframe_padding( $view ) {
  38. if ( $view === '360' ) {
  39. return '100%'; // 1:1 square aspect for 360
  40. }
  41. return '50%'; // 2:1 panorama aspect
  42. }
  43. /**
  44. * Create HTML for VR Viewer IFRAME and wrapper
  45. * The viewer code is hosted on vr.me.sh site which is then displayed
  46. * within posts via an IFRAME. This function returns the IFRAME html.
  47. * @param url_params - parameter array which is passed to the jetpack_vr_viewer
  48. * @param url_params['url'] - url of 360 media
  49. * @param url_params['guid'] - guid for videopress
  50. * @param url_params['view'] - cinema, 360 - controls if panaroma view, or 360
  51. * @param url_params['rotation'] - number for rotating media
  52. * @param url_params['preview'] - show preview image or not
  53. * @return html - an iframe for viewer
  54. */
  55. function jetpack_vr_viewer_get_html( $url_params ) {
  56. global $content_width;
  57. $iframe = add_query_arg( $url_params, 'https://vr.me.sh/view/' );
  58. // set some defaults
  59. $maxwidth = ( isset( $content_width ) ) ? $content_width : 720;
  60. $view = ( isset( $url_params['view'] ) ) ? $url_params['view'] : 'cinema';
  61. $rtn = '<div style="position: relative; max-width: ' . $maxwidth . 'px; margin-left: auto; margin-right: auto; overflow: hidden;">';
  62. $rtn .= '<div style="padding-top: '. jetpack_vr_viewer_iframe_padding( $view ).';"></div>';
  63. $rtn .= '<iframe style="position: absolute; top: 0; right: 0; bottom: 0; left: 0; height: 100%" allowfullscreen="true" frameborder="0" width="100%" height="300" src="'.esc_url( $iframe ).'">';
  64. $rtn .= '</iframe>';
  65. $rtn .= '</div>';
  66. return $rtn;
  67. }
  68. /**
  69. * Convert [vr] shortcode to viewer
  70. *
  71. * Shortcode example:
  72. * [vr url="https://en-blog.files.wordpress.com/2016/12/regents_park.jpg" view="360"]
  73. *
  74. * VR Viewer embed code:
  75. * <div style="position: relative; max-width: 720px; margin-left: auto; margin-right: auto; overflow: hidden;">
  76. * <div style="padding-top: 100%;"></div>
  77. * <iframe style="position: absolute; top: 0; right: 0; bottom: 0; left: 0; height: 100%" allowfullscreen="true" frameborder="0" width="100%" height="400" src="https://vr.me.sh/view/?view=360&amp;url=https://en-blog.files.wordpress.com/2016/12/regents_park.jpg">
  78. * </iframe>
  79. * </div>
  80. *
  81. * @return html - complete vr viewer html
  82. */
  83. function jetpack_vr_viewer_shortcode( $atts ) {
  84. $params = shortcode_atts( array(
  85. 0 => null,
  86. 'url' => null,
  87. 'src' => null,
  88. 'guid' => null,
  89. 'rotation' => null,
  90. 'view' => null,
  91. 'preview' => false,
  92. ), $atts );
  93. // We offer a few ways to specify the URL
  94. if ( $params[0] ) {
  95. $params['url'] = $params[0];
  96. } else if ( $params['src'] ) {
  97. $params['url'] = $params['src'];
  98. }
  99. $url_params = jetpack_vr_viewer_get_viewer_url_params( $params );
  100. if ( $url_params ) {
  101. return jetpack_vr_viewer_get_html( $url_params );
  102. }
  103. // add check for user
  104. if ( current_user_can( 'edit_posts' ) ) {
  105. return '[vr] shortcode requires a data source to be given';
  106. } else {
  107. return '';
  108. }
  109. }
  110. add_shortcode( 'vr', 'jetpack_vr_viewer_shortcode' );
  111. // Gutenberg!
  112. add_action( 'admin_init', 'jetpack_register_block_type_vr' );
  113. function jetpack_register_block_type_vr() {
  114. if ( ! function_exists( 'register_block_type' ) ) {
  115. return;
  116. }
  117. wp_register_script(
  118. 'jetpack_vr_viewer_shortcode_editor_script',
  119. Jetpack::get_file_url_for_environment( '_inc/build/shortcodes/js/blocks/vr-block.min.js', 'modules/shortcodes/js/blocks/vr-block.js' ),
  120. array( 'wp-blocks', 'wp-element', 'wp-i18n' )
  121. );
  122. wp_register_style(
  123. 'jetpack_vr_viewer_shortcode_editor_style',
  124. plugins_url( 'modules/shortcodes/css/blocks/vr-block.css', JETPACK__PLUGIN_FILE ),
  125. array( 'wp-edit-blocks' )
  126. );
  127. register_block_type( 'jetpack/vr', array(
  128. 'editor_script' => 'jetpack_vr_viewer_shortcode_editor_script',
  129. 'editor_style' => 'jetpack_vr_viewer_shortcode_editor_style',
  130. 'render_callback' => 'jetpack_vr_viewer_shortcode',
  131. ) );
  132. }