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