forked from adobe/adobe-dx
-
Notifications
You must be signed in to change notification settings - Fork 0
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
- video component (no group) that outputs one video tag per breakpoint, - dialog that comes with it, - add ability to include fields in a responsive loop, - add video to flex that way
- Loading branch information
Showing
8 changed files
with
177 additions
and
126 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
5 changes: 5 additions & 0 deletions
5
apps/content/app/jcr_root/apps/dx/content/components/video/.content.xml
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,5 @@ | ||
| <?xml version="1.0" encoding="UTF-8"?> | ||
| <jcr:root xmlns:sling="http://sling.apache.org/jcr/sling/1.0" xmlns:cq="http://www.day.com/jcr/cq/1.0" xmlns:jcr="http://www.jcp.org/jcr/1.0" | ||
| jcr:primaryType="cq:Component" | ||
| jcr:title="Video" | ||
| componentGroup=".dx"/> |
135 changes: 135 additions & 0 deletions
135
apps/content/app/jcr_root/apps/dx/content/components/video/_cq_dialog/.content.xml
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,135 @@ | ||
| <?xml version="1.0" encoding="UTF-8"?> | ||
| <jcr:root | ||
| xmlns:sling="http://sling.apache.org/jcr/sling/1.0" | ||
| xmlns:cq="http://www.day.com/jcr/cq/1.0" | ||
| xmlns:granite="http://www.adobe.com/jcr/granite/1.0" | ||
| xmlns:jcr="http://www.jcp.org/jcr/1.0" | ||
| xmlns:nt="http://www.jcp.org/jcr/nt/1.0" | ||
| jcr:primaryType="nt:unstructured" | ||
| jcr:title="Video" | ||
| sling:resourceType="cq/gui/components/authoring/dialog"> | ||
| <content jcr:primaryType="nt:unstructured" | ||
| sling:resourceType="granite/ui/components/coral/foundation/fixedcolumns"> | ||
| <items jcr:primaryType="nt:unstructured"> | ||
| <column | ||
| jcr:primaryType="nt:unstructured" | ||
| sling:resourceType="granite/ui/components/coral/foundation/container"> | ||
| <items jcr:primaryType="nt:unstructured"> | ||
| <videoURL | ||
| jcr:primaryType="nt:unstructured" | ||
| sling:resourceType="granite/ui/components/coral/foundation/form/pathfield" | ||
| fieldLabel="Video" | ||
| fieldDescription="Must be an MP4 file." | ||
| name="./videoURL" | ||
| rootPath="/content/dam"> | ||
| </videoURL> | ||
| <videoLoop | ||
| jcr:primaryType="nt:unstructured" | ||
| sling:resourceType="granite/ui/components/coral/foundation/form/checkbox" | ||
| text="Loop Video" | ||
| checked="{Boolean}true" | ||
| value="true" | ||
| uncheckedValue="{Boolean}false" | ||
| name="./videoLoop"> | ||
| </videoLoop> | ||
| <videoLoopTypeHint | ||
| jcr:primaryType="nt:unstructured" | ||
| sling:resourceType="granite/ui/components/coral/foundation/form/hidden" | ||
| value="Boolean" | ||
| name="./videoLoop@TypeHint"/> | ||
| <videoPlayOnEnterView | ||
| jcr:primaryType="nt:unstructured" | ||
| sling:resourceType="granite/ui/components/coral/foundation/form/checkbox" | ||
| text="Play video when it enters the view." | ||
| checked="{Boolean}true" | ||
| value="true" | ||
| uncheckedValue="{Boolean}false" | ||
| name="./videoPlayOnEnterView"> | ||
| </videoPlayOnEnterView> | ||
| <videoPlayOnEnterViewTypeHint | ||
| jcr:primaryType="nt:unstructured" | ||
| sling:resourceType="granite/ui/components/coral/foundation/form/hidden" | ||
| value="Boolean" | ||
| name="./videoPlayOnEnterView@TypeHint"/> | ||
| <videoPlayOnHover | ||
| jcr:primaryType="nt:unstructured" | ||
| sling:resourceType="granite/ui/components/coral/foundation/form/checkbox" | ||
| text="Play video when a cursor hovers over it." | ||
| checked="{Boolean}true" | ||
| value="true" | ||
| uncheckedValue="{Boolean}false" | ||
| name="./videoPlayOnHover"> | ||
| </videoPlayOnHover> | ||
| <videoPlayOnHoverTypeHint | ||
| jcr:primaryType="nt:unstructured" | ||
| sling:resourceType="granite/ui/components/coral/foundation/form/hidden" | ||
| value="Boolean" | ||
| name="./videoPlayOnHover@TypeHint"/> | ||
| <videoCrop | ||
| jcr:primaryType="nt:unstructured" | ||
| granite:class="cq-dialog-dropdown-showhide" | ||
| sling:resourceType="granite/ui/components/coral/foundation/form/select" | ||
| fieldLabel="Cropping" | ||
| name="./videoCrop"> | ||
| <granite:data | ||
| jcr:primaryType="nt:unstructured" | ||
| cq-dialog-dropdown-showhide-target=".list-option-video-crop"/> | ||
| <items jcr:primaryType="nt:unstructured"> | ||
| <video | ||
| jcr:primaryType="nt:unstructured" | ||
| text="Crop Video" | ||
| value="crop-video"/> | ||
| <content | ||
| granite:hide="${cqDesign.disableMobileAbsolute}" | ||
| jcr:primaryType="nt:unstructured" | ||
| text="Crop Content" | ||
| value="crop-content"/> | ||
| </items> | ||
| </videoCrop> | ||
| <cropVideoContainer | ||
| granite:class="hide list-option-video-crop" | ||
| jcr:primaryType="nt:unstructured" | ||
| sling:resourceType="granite/ui/components/coral/foundation/container"> | ||
| <granite:data | ||
| jcr:primaryType="nt:unstructured" | ||
| showhidetargetvalue="crop-video"/> | ||
| <items jcr:primaryType="nt:unstructured"> | ||
| <note | ||
| jcr:primaryType="nt:unstructured" | ||
| sling:resourceType="granite/ui/components/coral/foundation/alert" | ||
| size="S" | ||
| jcr:title="This will crop the video to fit the size of the component."/> | ||
| </items> | ||
| </cropVideoContainer> | ||
| <cropContentContainer | ||
| granite:class="hide list-option-video-crop" | ||
| jcr:primaryType="nt:unstructured" | ||
| sling:resourceType="granite/ui/components/coral/foundation/container"> | ||
| <granite:data | ||
| jcr:primaryType="nt:unstructured" | ||
| showhidetargetvalue="crop-content"/> | ||
| <items jcr:primaryType="nt:unstructured"> | ||
| <note | ||
| jcr:primaryType="nt:unstructured" | ||
| sling:resourceType="granite/ui/components/coral/foundation/alert" | ||
| size="S" | ||
| jcr:title="Video will be full-size. If contents go beyond this size, they will be cropped."/> | ||
| <videoControls | ||
| jcr:primaryType="nt:unstructured" | ||
| sling:resourceType="granite/ui/components/coral/foundation/form/checkbox" | ||
| text="Show Controls" | ||
| fieldDescription="If checked, content on top of video will not be selectable so controls can be used by the visitor." | ||
| value="true" | ||
| name="./videoControls"/> | ||
| <videoControlsTypeHint | ||
| jcr:primaryType="nt:unstructured" | ||
| sling:resourceType="granite/ui/components/coral/foundation/form/hidden" | ||
| value="Boolean" | ||
| name="./videoControls@TypeHint"/> | ||
| </items> | ||
| </cropContentContainer> | ||
| </items> | ||
| </column> | ||
| </items> | ||
| </content> | ||
| </jcr:root> |
8 changes: 8 additions & 0 deletions
8
apps/content/app/jcr_root/apps/dx/content/components/video/video.html
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,8 @@ | ||
| <div class="video-Wrapper ${properties.videoCrop || 'crop-video'} ${properties.videoPlayOnView ? 'has-playOnView' : ''} ${properties.videoPlayOnHover ? 'has-playOnHover' : ''}" | ||
| data-sly-list.bp="${breakpoints}"> | ||
| <video data-sly-test.src="${resprops.videoURL[bp.key]}" class="${resprops.videoURL.mobile ? 'video-mobile' : ''} ${!resprops.videoURL.tablet ? 'video-tablet' : ''} ${!resprops.videoURL.tablet && !resprops.videoURL.desktop ? 'video-desktop' : ''}" | ||
| preload="${wcmmode.disabled ? 'none' : 'metadata'}" | ||
| playsinline muted loop="${resprops.videoLoop[bp.key]}" controls="${resprops.videoControls[bp.key]}"> | ||
| <source src="${src}" type="video/mp4"> | ||
| </video> | ||
| </div> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Oops, something went wrong.