diff --git a/.gitattributes b/.gitattributes index ef1581d..818b09f 100644 --- a/.gitattributes +++ b/.gitattributes @@ -1,3 +1,4 @@ /.gitattributes export-ignore /.github export-ignore +/.gitignore export-ignore /CODE_OF_CONDUCT.md export-ignore diff --git a/.gitignore b/.gitignore new file mode 100644 index 0000000..722d5e7 --- /dev/null +++ b/.gitignore @@ -0,0 +1 @@ +.vscode diff --git a/CODE_OF_CONDUCT.md b/CODE_OF_CONDUCT.md index 236f45d..31b16fa 100644 --- a/CODE_OF_CONDUCT.md +++ b/CODE_OF_CONDUCT.md @@ -8,19 +8,19 @@ In the interest of fostering an open and welcoming environment, we as contributo Examples of behavior that contributes to creating a positive environment include: -* Using welcoming and inclusive language -* Being respectful of differing viewpoints and experiences -* Gracefully accepting constructive criticism -* Focusing on what is best for the community -* Showing empathy towards other community members +- Using welcoming and inclusive language +- Being respectful of differing viewpoints and experiences +- Gracefully accepting constructive criticism +- Focusing on what is best for the community +- Showing empathy towards other community members Examples of unacceptable behavior by participants include: -* The use of sexualized language or imagery and unwelcome sexual attention or advances -* Trolling, insulting/derogatory comments, and personal or political attacks -* Public or private harassment -* Publishing others' private information, such as a physical or electronic address, without explicit permission -* Other conduct which could reasonably be considered inappropriate in a professional setting +- The use of sexualized language or imagery and unwelcome sexual attention or advances +- Trolling, insulting/derogatory comments, and personal or political attacks +- Public or private harassment +- Publishing others' private information, such as a physical or electronic address, without explicit permission +- Other conduct which could reasonably be considered inappropriate in a professional setting ## Our Responsibilities @@ -34,7 +34,7 @@ This Code of Conduct applies both within project spaces and in public spaces whe ## Enforcement -Instances of abusive, harassing, or otherwise unacceptable behavior may be reported by contacting the project team at github@jonnitto.ch. The project team will review and investigate all complaints, and will respond in a way that it deems appropriate to the circumstances. The project team is obligated to maintain confidentiality with regard to the reporter of an incident. Further details of specific enforcement policies may be posted separately. +Instances of abusive, harassing, or otherwise unacceptable behavior may be reported by contacting the project team at hello@uhlmann.pro. The project team will review and investigate all complaints, and will respond in a way that it deems appropriate to the circumstances. The project team is obligated to maintain confidentiality with regard to the reporter of an incident. Further details of specific enforcement policies may be posted separately. Project maintainers who do not follow or enforce the Code of Conduct in good faith may face temporary or permanent repercussions as determined by other members of the project's leadership. diff --git a/Configuration/NodeTypes.Collection.Track.yaml b/Configuration/NodeTypes.Collection.Track.yaml deleted file mode 100644 index 579a9bf..0000000 --- a/Configuration/NodeTypes.Collection.Track.yaml +++ /dev/null @@ -1,19 +0,0 @@ -'Jonnitto.PrettyEmbedVideo:Collection.Track': - superTypes: - 'Neos.Neos:ContentCollection': true - constraints: - nodeTypes: - '*': false - 'Jonnitto.PrettyEmbedVideo:Content.Track': true - properties: - setFirstTrackToDefault: - type: boolean - defaultValue: true - ui: - label: i18n - reloadIfChanged: true - help: - message: i18n - inspector: - group: look - position: 100 diff --git a/Configuration/NodeTypes.Content.Track.yaml b/Configuration/NodeTypes.Content.Track.yaml deleted file mode 100644 index b8d7b27..0000000 --- a/Configuration/NodeTypes.Content.Track.yaml +++ /dev/null @@ -1,82 +0,0 @@ -'Jonnitto.PrettyEmbedVideo:Content.Track': - superTypes: - 'Neos.Neos:Content': true - label: "${String.cropAtWord((I18n.translate('Jonnitto.PrettyEmbedVideo:NodeTypes.Content.Track:properties.kind.selectBoxEditor.values.' + q(node).property('kind')) || String.firstLetterToUpperCase(q(node).property('kind'))) + (q(node).property('srclang') ? ' (' + q(node).property('srclang') + ')' : '') + (q(node).property('label') ? ': ' + String.trim(q(node).property('label')) : ''), 100, '...')}" - ui: - label: i18n - icon: 'fas fa-closed-captioning' - inspector: - groups: - track: - label: i18n - icon: 'fas fa-closed-captioning' - position: 100 - properties: - src: - type: 'Neos\Media\Domain\Model\Asset' - ui: - label: i18n - reloadIfChanged: true - help: - message: i18n - inspector: - group: track - position: 10 - editorOptions: - accept: 'text/vtt' - kind: - type: string - defaultValue: subtitles - ui: - label: i18n - reloadIfChanged: true - help: - message: i18n - inspector: - group: track - position: 20 - editor: Neos.Neos/Inspector/Editors/SelectBoxEditor - editorOptions: - allowEmpty: false - values: - subtitles: - label: i18n - captions: - label: i18n - descriptions: - label: i18n - chapters: - label: i18n - metadata: - label: i18n - label: - type: string - ui: - label: i18n - reloadIfChanged: true - help: - message: i18n - inspector: - group: track - position: 30 - - srclang: - type: string - validation: - Neos.Neos/Validation/StringLengthValidator: - minimum: 2 - maximum: 2 - ui: - label: i18n - reloadIfChanged: true - help: - message: i18n - inspector: - group: track - position: 50 - - -'Neos.Neos:ContentCollection': - constraints: - nodeTypes: - 'Jonnitto.PrettyEmbedVideo:Content.Track': false diff --git a/Configuration/Settings.Jonnitto.yaml b/Configuration/Settings.Jonnitto.yaml deleted file mode 100644 index 2611aee..0000000 --- a/Configuration/Settings.Jonnitto.yaml +++ /dev/null @@ -1,36 +0,0 @@ -Jonnitto: - PrettyEmbedVideo: - defaults: - # Should the video be opened on a lightbox? Per default this is set via the node properties - lightbox: false - - # If true, the video automatically begins to play back as soon - # as it can do so without stopping to finish loading the data. - autoplay: false - - # If true, the browser will offer controls to allow the user to control - # video playback, including volume, seeking, and pause/resume playback. - controls: true - - # If true, the browser will automatically seek back - # to the start upon reaching the end of the video. - loop: false - - # Whether the video is muted upon loading. Set automatically to true if autoplay is enabled - muted: false - - # This enumerated attribute is intended to provide a hint to the browser about what - # the author thinks will lead to the best user experience with regards to what content - # is loaded before the video is played. It may have one of the following values: - # - none Indicates that the video should not be preloaded. - # - metadata Indicates that only video metadata (e.g. length) is fetched. - # - auto Indicates that the whole video file can be downloaded, even if the user is not expected to use it - preload: none - - # Whether the video plays inline on supported mobile devices. - # Note that if set to false it does not imply that the video will always be played in fullscreen. - playsinline: true - - # https://developer.mozilla.org/en-US/docs/Web/HTML/Element/video#attr-crossorigin - # anonymous || use-credentials || true || false - crossorigin: false diff --git a/Configuration/NodeTypes.Content.Video.yaml b/NodeTypes/Content/Video.yaml similarity index 94% rename from Configuration/NodeTypes.Content.Video.yaml rename to NodeTypes/Content/Video.yaml index fb1db2a..6331cce 100644 --- a/Configuration/NodeTypes.Content.Video.yaml +++ b/NodeTypes/Content/Video.yaml @@ -3,7 +3,7 @@ 'Neos.Neos:Content': true 'Jonnitto.PrettyEmbedHelper:Mixin.Groups': true 'Jonnitto.PrettyEmbedVideo:Mixin.Sources': true - 'Jonnitto.PrettyEmbedVideo:Collection.Track': true + 'Jonnitto.PrettyEmbedVideo:Mixin.Tracks': true 'Jonnitto.PrettyEmbedHelper:Mixin.Image': true 'Jonnitto.PrettyEmbedHelper:Mixin.Lightbox': true 'Jonnitto.PrettyEmbedHelper:Mixin.Title': true diff --git a/Configuration/NodeTypes.Mixin.Assets.yaml b/NodeTypes/Mixin/Assets.yaml similarity index 85% rename from Configuration/NodeTypes.Mixin.Assets.yaml rename to NodeTypes/Mixin/Assets.yaml index c85bbf4..a857b49 100644 --- a/Configuration/NodeTypes.Mixin.Assets.yaml +++ b/NodeTypes/Mixin/Assets.yaml @@ -1,7 +1,7 @@ 'Jonnitto.PrettyEmbedVideo:Mixin.Assets': abstract: true superTypes: - 'Jonnitto.PrettyEmbedHelper:Mixin.Metadata.Duration': true + 'Jonnitto.PrettyEmbedHelper:Mixin.Metadata': true properties: assets: type: array diff --git a/Configuration/NodeTypes.Mixin.ExternalSources.yaml b/NodeTypes/Mixin/ExternalSources.yaml similarity index 100% rename from Configuration/NodeTypes.Mixin.ExternalSources.yaml rename to NodeTypes/Mixin/ExternalSources.yaml diff --git a/Configuration/NodeTypes.Mixin.Sources.yaml b/NodeTypes/Mixin/Sources.yaml similarity index 100% rename from Configuration/NodeTypes.Mixin.Sources.yaml rename to NodeTypes/Mixin/Sources.yaml diff --git a/NodeTypes/Mixin/Tracks.yaml b/NodeTypes/Mixin/Tracks.yaml new file mode 100644 index 0000000..ad175d6 --- /dev/null +++ b/NodeTypes/Mixin/Tracks.yaml @@ -0,0 +1,57 @@ +'Jonnitto.PrettyEmbedVideo:Mixin.Tracks': + properties: + setFirstTrackToDefault: + type: boolean + defaultValue: true + ui: + label: i18n + help: + message: i18n + inspector: + group: captions + position: 10 + hidden: 'ClientEval: node.properties.tracks.length === 0' + tracks: + type: repeatable + ui: + help: + message: i18n + inspector: + group: captions + position: 20 + editorOptions: + # https://github.com/mireo91/RepeatableFields/issues/19 + buttonAddLabel: + + properties: + asset: + type: 'Neos\Media\Domain\Model\Asset' + label: Jonnitto.PrettyEmbedVideo:NodeTypes.Mixin.Tracks:properties.tracks.asset + editorOptions: + accept: 'text/vtt' + kind: + defaultValue: subtitles + label: Jonnitto.PrettyEmbedVideo:NodeTypes.Mixin.Tracks:properties.tracks.kind + editor: Neos.Neos/Inspector/Editors/SelectBoxEditor + editorOptions: + allowEmpty: false + values: + subtitles: + label: Jonnitto.PrettyEmbedVideo:NodeTypes.Mixin.Tracks:properties.tracks.kind.subtitles + captions: + label: Jonnitto.PrettyEmbedVideo:NodeTypes.Mixin.Tracks:properties.tracks.kind.captions + descriptions: + label: Jonnitto.PrettyEmbedVideo:NodeTypes.Mixin.Tracks:properties.tracks.kind.descriptions + chapters: + label: Jonnitto.PrettyEmbedVideo:NodeTypes.Mixin.Tracks:properties.tracks.kind.chapters + metadata: + label: Jonnitto.PrettyEmbedVideo:NodeTypes.Mixin.Tracks:properties.tracks.kind.metadata + label: + type: string + label: Jonnitto.PrettyEmbedVideo:NodeTypes.Mixin.Tracks:properties.tracks.label + srclang: + type: string + label: Jonnitto.PrettyEmbedVideo:NodeTypes.Mixin.Tracks:properties.tracks.srclang + validation: + Neos.Neos/Validation/StringLengthValidator: + minimum: 2 + maximum: 2 diff --git a/README.md b/README.md index a4980eb..3b33b6a 100644 --- a/README.md +++ b/README.md @@ -2,27 +2,35 @@ # Jonnitto.PrettyEmbedVideo +**For a detail guide, please visit the [PrettyEmbed Wiki](https://github.com/jonnitto/Jonnitto.PrettyEmbedHelper/wiki)** + Prettier embeds for your native videos in [Neos CMS] - with excellent options like high-res preview images, lightbox feature, captions, and advanced customization of embed options. ![Screenshot] -![Screenshot with captions] -| Version | Neos | Maintained | -| ------- | --------------- | :--------: | -| 1.\* | ^4.2.\* + 5.\* | | -| 2.\* | ^4.2.\* + 5.\* | | -| 3.\* | ^4.2.\* + >= 5 | ✓ | -| 4.\* | >= 5.3 | ✓ | +| Version | Neos | Maintained | +| ------- | -------------- | :--------: | +| 1.\* | ^4.2.\* + 5.\* | ✗ | +| 2.\* | ^4.2.\* + 5.\* | ✗ | +| 3.\* | ^4.2.\* + >= 5 | ✗ | +| 4.\* | >= 5.3 | ✗ | +| 6.\* | >= 7.3 | ✓ | + +> The version jump was made to have all packages from the PrettyEmbed series on the same number ## Installation -Most of the time, you have to make small adjustments to a package (e.g., a configuration in `Settings.yaml`). Thus, it is essential to add the corresponding package to the composer from your theme package. Mostly this is the site package located under `Packages/Sites/`. To install it correctly, go to your theme package (e.g.`Packages/Sites/Foo.Bar`) and run the following command: +Most of the time, you have to make small adjustments to a package (e.g., configuration in `Settings.yaml`). Because of +that, it is essential to add the corresponding package to the composer from your theme package. Navigate to this package +in your CLI and run the following command: ```bash composer require jonnitto/prettyembedvideo --no-update ``` -The `--no-update` command prevent the automatic update of the dependencies. After the package was added to your theme `composer.json`, go back to the Neos installation's root and run `composer update`. Et voilà! Your desired package is now installed correctly. +The `--no-update` command prevent the automatic update of the dependencies. After the package was added to your package +`composer.json`, go back to the root of the Neos installation and run `composer update`. Et voilà! Your desired package +is now installed correctly. ## PrettyEmbedCollection @@ -48,48 +56,11 @@ If you install the PrettyEmbedCollection, the video players get grouped into an | Preview image | ✓ | | | Lightbox included | ✓ | | | Preview image (for videos) | ✓ | | -| Javascript API | | ✓ | +| Javascript API | ✓ | ✓ | | Filesize (JS & CSS) | smaller | bigger | All packages from the PrettyEmbed series benefit from a better frontend performance since the player gets only loaded on request. So, no iframe/video gets loaded until the user wants to watch a video. -## Customization - -### Configuration - -If you want to customize the default settings, take a look at the [Settings.Jonnitto.yaml] file. If no node property is giving, these default values will be taken. If you, for example, don't want to let the editor choose if the video should open in a lightbox, you can deactivate the mixin in your Configuration folder like this: - -```yaml -'Jonnitto.PrettyEmbedVideo:Content.Video': - superTypes: - 'Jonnitto.PrettyEmbedHelper:Mixin.Lightbox': false -``` - -These are the available mixins used for the video: - -| Mixin name (Prefix: `Jonnitto.PrettyEmbed`) | Description | Default value | Enabled per default | -| ------------------------------------------- | ---------------------------------------------------------------- | :-----------: | :-----------------: | -| `Helper:Mixin.Groups` | Enables the inspector groups | | ✓ | -| `Video:Mixin.Sources` | Includes the properties for external and internal sources | | ✓ | -| `Video:Collection.Track` | Include the possibility to set tracks to the video | | ✓ | -| `Helper:Mixin.Image` | Add the preview image property | | ✓ | -| `Helper:Mixin.Lightbox` | Open the video in a lightbox | `false` | ✓ | -| `Helper:Mixin.Title` | Set the title to identify the video in the content tree easily, and pass the title as `aria-label` to the video. | | ✓ | -| `Helper:Mixin.Loop` | Loop the video | `false` | | -| `Helper:Mixin.Controls` | Show the controls | `true` | | -| `Helper:Mixin.Autoplay` | Autoplays the video, | `false` | | -| `Helper:Mixin.Muted` | Mutes the video | `false` | | - -If you want to use only internal or only external sources, you have to disable the supertype [`Jonnitto.PrettyEmbedVideo:Mixin.Sources`] and enable [`Jonnitto.PrettyEmbedVideo:Mixin.Assets`] (internal sources) or [`Jonnitto.PrettyEmbedVideo:Mixin.ExternalSources`] (external sources) - -[`Jonnitto.PrettyEmbedVideo:Collection.Track`] adds the possability to add [`Jonnitto.PrettyEmbedVideo:Content.Track`] for subtitles, captions, descriptions, chapters or metadata. - -### Fusion - -If you want to use the player as a pure component, you can use the [`Jonnitto.PrettyEmbedVideo:Component.Video`] fusion prototype. - -If you want to read the node properties and let the package handle all for you, you should use the [`Jonnitto.PrettyEmbedVideo:Content.Video`] prototype. For easier including in your node types, you can disable the content element wrapping with `contentElement = false`. This is useful if you want to create, for example, a text with a video node type. - [packagist]: https://packagist.org/packages/jonnitto/prettyembedvideo [latest stable version]: https://poser.pugx.org/jonnitto/prettyembedvideo/v/stable [total downloads]: https://poser.pugx.org/jonnitto/prettyembedvideo/downloads @@ -108,19 +79,9 @@ If you want to read the node properties and let the package handle all for you, [stargazers]: https://github.com/jonnitto/Jonnitto.PrettyEmbedVideo/stargazers [subscription]: https://github.com/jonnitto/Jonnitto.PrettyEmbedVideo/subscription [followers]: https://github.com/jonnitto/followers -[license]: LICENSE [neos cms]: https://www.neos.io [prettyembedcollection]: https://github.com/jonnitto/Jonnitto.PrettyembedCollection [prettyembedvideo]: https://github.com/jonnitto/Jonnitto.PrettyEmbedVideo [prettyembedvideoplatforms]: https://github.com/jonnitto/Jonnitto.PrettyEmbedVideoPlatforms [jonnitto.plyr]: https://github.com/jonnitto/Jonnitto.Plyr -[settings.jonnitto.yaml]: Configuration/Settings.Jonnitto.yaml -[`jonnitto.prettyembedvideo:component.video`]: Resources/Private/Fusion/Component/Video.fusion -[`jonnitto.prettyembedvideo:content.video`]: Resources/Private/Fusion/Content/Video.fusion -[`jonnitto.prettyembedvideo:mixin.sources`]: Configuration/NodeTypes.Mixin.Sources.yaml -[`jonnitto.prettyembedvideo:mixin.assets`]: Configuration/NodeTypes.Mixin.Assets.yaml -[`jonnitto.prettyembedvideo:mixin.externalsources`]: Configuration/NodeTypes.Mixin.ExternalSources.yaml -[`jonnitto.prettyembedvideo:collection.track`]: Configuration/NodeTypes.Collection.Track.yaml -[`jonnitto.prettyembedvideo:content.track`]: Configuration/NodeTypes.Content.Track.yaml -[screenshot]: https://user-images.githubusercontent.com/4510166/76709933-3fbaf000-6703-11ea-8281-007d48174992.png -[screenshot with captions]: https://user-images.githubusercontent.com/4510166/76709937-447fa400-6703-11ea-9793-4eec0c7fb90f.png +[screenshot]: https://github.com/jonnitto/Jonnitto.PrettyEmbedVideo/assets/4510166/beb36d49-d274-4887-9ac3-89fde42e2cdf diff --git a/Resources/Private/Fusion/Component/Backend.fusion b/Resources/Private/Fusion/Component/Backend.fusion deleted file mode 100644 index e4af97b..0000000 --- a/Resources/Private/Fusion/Component/Backend.fusion +++ /dev/null @@ -1,43 +0,0 @@ -prototype(Jonnitto.PrettyEmbedVideo:Component.Backend) < prototype(Neos.Fusion:Component) { - identifier = ${q(node).property('_identifier')} - setFirstTrackToDefault = ${null} - - @context.setFirstTrackToDefault = ${this.setFirstTrackToDefault} - - @if.render = ${node.context.inBackend && q(node).is('[instanceof Jonnitto.PrettyEmbedVideo:Collection.Track]')} - lang = ${Carbon.Backend.translate('lang', 'en', [], 'Main', 'Jonnitto.PrettyEmbedVideo')} - - renderer = afx` - - - - - - - - - - - - - -
- {Carbon.Backend.translate('properties.src', 'File', [], 'NodeTypes/Content/Track', 'Jonnitto.PrettyEmbedVideo')} - - {Carbon.Backend.translate('properties.kind', 'Type', [], 'NodeTypes/Content/Track', 'Jonnitto.PrettyEmbedVideo')} - - {Carbon.Backend.translate('properties.label', 'Label', [], 'NodeTypes/Content/Track', 'Jonnitto.PrettyEmbedVideo')} - - {Carbon.Backend.translate('properties.srclang', 'Language', [], 'NodeTypes/Content/Track', 'Jonnitto.PrettyEmbedVideo')} - - {Carbon.Backend.translate('default', 'Default', [], 'NodeTypes/Content/Track', 'Jonnitto.PrettyEmbedVideo')} -
- ` -} diff --git a/Resources/Private/Fusion/Component/Source.fusion b/Resources/Private/Fusion/Component/Source.fusion deleted file mode 100644 index 572f754..0000000 --- a/Resources/Private/Fusion/Component/Source.fusion +++ /dev/null @@ -1,26 +0,0 @@ -prototype(Jonnitto.PrettyEmbedVideo:Component.Source) < prototype(Neos.Fusion:Component) { - asset = ${null} - uri = ${null} - fileextension = ${null} - - @if.render = ${this.fileextension && this.uri || (this.asset && this.asset.resource.fileextension == this.fileextension)} - - renderer = Neos.Fusion:Tag { - tagName = 'source' - attributes { - type = ${'video/' + props.fileextension} - src = Neos.Fusion:Case { - hasUri { - condition = ${props.uri} - renderer = ${props.uri} - } - resource { - condition = true - renderer = Neos.Fusion:ResourceUri { - resource = ${props.asset.resource} - } - } - } - } - } -} diff --git a/Resources/Private/Fusion/Component/Track.fusion b/Resources/Private/Fusion/Component/Track.fusion deleted file mode 100644 index a445c65..0000000 --- a/Resources/Private/Fusion/Component/Track.fusion +++ /dev/null @@ -1,18 +0,0 @@ -prototype(Jonnitto.PrettyEmbedVideo:Component.Track) < prototype(Neos.Fusion:Component) { - asset = ${null} - kind = ${null} - label = ${null} - srclang = ${null} - default = ${null} - - @if { - render = ${this.asset && this.kind && this.asset.resource.fileextension == 'vtt'} - languageSet = ${this.kind == 'subtitles' ? !!this.srclang : true} - } - - renderer = afx` - - - - ` -} diff --git a/Resources/Private/Fusion/Component/Video.fusion b/Resources/Private/Fusion/Component/Video.fusion deleted file mode 100644 index fee4ecb..0000000 --- a/Resources/Private/Fusion/Component/Video.fusion +++ /dev/null @@ -1,66 +0,0 @@ -prototype(Jonnitto.PrettyEmbedVideo:Component.Video) < prototype(Neos.Fusion:Component) { - configuration = ${Configuration.setting('Jonnitto.PrettyEmbedVideo')} - - lightbox = ${this.configuration.defaults.lightbox} - autoplay = ${this.configuration.defaults.autoplay} - controls = ${this.configuration.defaults.controls} - loop = ${this.configuration.defaults.loop} - muted = ${this.configuration.defaults.muted} - preload = ${this.configuration.defaults.preload} - playsinline = ${this.configuration.defaults.playsinline} - crossorigin = ${this.configuration.defaults.crossorigin} - - wrapper = ${Configuration.setting('Jonnitto.PrettyEmbedHelper.wrapper')} - - width = ${null} - height = ${null} - - id = ${null} - - poster = ${null} - alternativeText = ${null} - title = ${null} - - playButton = Jonnitto.PrettyEmbedHelper:Button.Play - pauseButton = Jonnitto.PrettyEmbedHelper:Button.Pause - - sources = ${null} - tracks = ${null} - content = ${(Type.isString(this.sources) ? this.sources : '') + (Type.isString(this.tracks) ? this.tracks : '')} - ownPreview = ${null} - - // Internal - type = ${this.lightbox ? 'lightbox' : 'inline'} - setAutoplay = ${this.lightbox ? null : this.autoplay} - - renderer = afx` -
- - - {props.setAutoplay ? '' : props.playButton} - {props.controls || props.setAutoplay ? '' : props.pauseButton} - - {props.ownPreview} - {props.alternativeText} - -
- ` - renderer.@process.wrapper = Jonnitto.PrettyEmbedHelper:Wrapper { - wrapper = ${props.wrapper} - } -} diff --git a/Resources/Private/Fusion/Content/Video.fusion b/Resources/Private/Fusion/Content.Video.fusion similarity index 51% rename from Resources/Private/Fusion/Content/Video.fusion rename to Resources/Private/Fusion/Content.Video.fusion index 8feec46..16bb941 100644 --- a/Resources/Private/Fusion/Content/Video.fusion +++ b/Resources/Private/Fusion/Content.Video.fusion @@ -1,5 +1,29 @@ -prototype(Jonnitto.PrettyEmbedVideo:Content.Video) < prototype(Jonnitto.PrettyEmbedHelper:Content) { - package = 'Video' +prototype(Jonnitto.PrettyEmbedVideo:Content.Video) < prototype(Jonnitto.PrettyEmbed:Content) { + @propTypes { + // These properties are already defined in Jonnitto.PrettyEmbed:Content + label = ${PropTypes.string} + id = ${PropTypes.string} + async = ${PropTypes.boolean} + debug = ${PropTypes.boolean} + class = ${PropTypes.anyOf( PropTypes.string, PropTypes.arrayOf( PropTypes.string ) )} + maximumWidth = ${PropTypes.integer} + wrapper = ${PropTypes.anyOf(PropTypes.string, PropTypes.boolean)} + loadImageStrategy = ${PropTypes.oneOf(['lazy', 'eager', null, false])} + width = ${PropTypes.integer} + height = ${PropTypes.integer} + image = ${PropTypes.instanceOf('Neos\Media\Domain\Model\ImageInterface')} + metadata = ${PropTypes.shape({ + 'duration': PropTypes.integer + })} + + // Use this for a custom poster src set + posterSrcset = ${PropTypes.string} + + // This can used as alternative preview + preview = null + } + + player = 'Video' videoFileTypes = ${['mp4', 'webm', 'ogg']} assets = ${q(node).property('assets')} @@ -9,45 +33,35 @@ prototype(Jonnitto.PrettyEmbedVideo:Content.Video) < prototype(Jonnitto.PrettyEm externalWebm = ${q(node).property('externalWebm')} externalOgg = ${q(node).property('externalOgg')} - tracks = ${q(node).children('[instanceof Jonnitto.PrettyEmbedVideo:Content.Track]').get()} + tracks = ${q(node).property('tracks')} setFirstTrackToDefault = ${q(node).property('setFirstTrackToDefault')} - title = ${q(node).filter('[instanceof Jonnitto.PrettyEmbedHelper:Mixin.Title]').property('title')} - alternativeText = ${this.title} - - # Use this if you want to set a own Preview - ownPreview = ${null} + label = ${q(node).filter('[instanceof Jonnitto.PrettyEmbedHelper:Mixin.Title]').property('title')} # Should the video be opened on a lightbox? - lightbox = Jonnitto.PrettyEmbedHelper:GetProperty { + lightbox = Jonnitto.PrettyEmbed:GetProperty { property = 'lightbox' } - # Whether the video plays inline on supported mobile devices. - # Note that if set to false it does not imply that the video will always be played in fullscreen. - playsinline = Jonnitto.PrettyEmbedHelper:GetProperty { - property = 'playsinline' - } - # If true, the browser will automatically seek back # to the start upon reaching the end of the video. - loop = Jonnitto.PrettyEmbedHelper:GetProperty { + loop = Jonnitto.PrettyEmbed:GetProperty { property = 'loop' } # If true, the browser will offer controls to allow the user to control # video playback, including volume, seeking, and pause/resume playback. - controls = Jonnitto.PrettyEmbedHelper:GetProperty { + controls = Jonnitto.PrettyEmbed:GetProperty { property = 'controls' } # Whether the video is muted upon loading. Set automatically to true if autoplay is enabled - muted = Jonnitto.PrettyEmbedHelper:GetProperty { + muted = Jonnitto.PrettyEmbed:GetProperty { property = 'muted' } # If true, the video automatically begins to play back as soon # as it can do so without stopping to finish loading the data. - autoplay = Jonnitto.PrettyEmbedHelper:GetProperty { + autoplay = Jonnitto.PrettyEmbed:GetProperty { property = 'autoplay' } @@ -57,19 +71,16 @@ prototype(Jonnitto.PrettyEmbedVideo:Content.Video) < prototype(Jonnitto.PrettyEm # - none Indicates that the video should not be preloaded. # - metadata Indicates that only video metadata (e.g. length) is fetched. # - auto Indicates that the whole video file can be downloaded, even if the user is not expected to use it - preload = Jonnitto.PrettyEmbedHelper:GetProperty { + preload = Jonnitto.PrettyEmbed:GetProperty { property = 'preload' } # https://developer.mozilla.org/en-US/docs/Web/HTML/Element/video#attr-crossorigin # anonymous || use-credentials - crossorigin = Jonnitto.PrettyEmbedHelper:GetProperty { + crossorigin = Jonnitto.PrettyEmbed:GetProperty { property = 'crossorigin' } - width = ${null} - height = ${null} - renderer = Neos.Fusion:Component { @apply { props = ${props} @@ -77,15 +88,27 @@ prototype(Jonnitto.PrettyEmbedVideo:Content.Video) < prototype(Jonnitto.PrettyEm poster = Neos.Neos:ImageUri { @if.set = ${props.image} asset = ${props.image} - async = true + async = ${props.async} maximumWidth = ${props.maximumWidth} } + poster2x = Neos.Neos:ImageUri { + @if { + noCustomSrcSet = ${!props.posterSrcset} + noCustomPreview = ${!props.preview} + hasAsset = ${props.image} + hasEnoughPixel = ${props.image.width >= props.maximumWidth * 2} + } + asset = ${props.image} + async = ${props.async} + maximumWidth = ${props.maximumWidth * 2} + } assets = Neos.Fusion:Loop { items = ${props.videoFileTypes} itemName = 'fileextension' itemRenderer = Neos.Fusion:Loop { items = ${props.assets} - itemRenderer = Jonnitto.PrettyEmbedVideo:Component.Source { + itemRenderer = Jonnitto.PrettyEmbed:Presentation.Source { + type = 'video' asset = ${item} fileextension = ${fileextension} } @@ -102,7 +125,8 @@ prototype(Jonnitto.PrettyEmbedVideo:Content.Video) < prototype(Jonnitto.PrettyEm itemRenderer = Neos.Fusion:Loop { // Split by line break items = ${String.pregSplit(item, '/\r?\n/')} - itemRenderer = Jonnitto.PrettyEmbedVideo:Component.Source { + itemRenderer = Jonnitto.PrettyEmbed:Presentation.Source { + type = 'video' uri = ${String.trim(item)} fileextension = ${fileextension} } @@ -111,33 +135,56 @@ prototype(Jonnitto.PrettyEmbedVideo:Content.Video) < prototype(Jonnitto.PrettyEm sources = ${props.hasExternalSwitch ? (props.external ? this.external : this.assets) : this.assets + this.external} tracks = Neos.Fusion:Loop { items = ${props.tracks} - itemRenderer = Jonnitto.PrettyEmbedVideo:Content.Track { - contentElement = false - node = ${item} - default = ${iterator.isFirst && props.setFirstTrackToDefault} + itemRenderer = Jonnitto.PrettyEmbed:Presentation.Track { + default = ${props.setFirstTrackToDefault && iterator.isFirst} + @apply.props = ${item} } } } } renderer = Neos.Fusion:Case { + @process.debug = Neos.Fusion:Debug.Console { + @if.debug = ${props.debug} + package = 'PrettyEmbedVideo' + props = ${props} + } noVideoAndPoster { condition = ${!props.sources && !props.poster} - renderer = afx`` + renderer = afx`` } noVideo { condition = ${!props.sources} - renderer = afx`` + renderer = afx`` } - noPoster { - condition = ${!props.poster} - renderer = afx`` + needPreviewImage { + condition = ${!props.poster && !props.preview} + renderer = afx`` } default { condition = true renderer = afx` - - + ` } } diff --git a/Resources/Private/Fusion/Content/Track.fusion b/Resources/Private/Fusion/Content/Track.fusion deleted file mode 100644 index 7771f98..0000000 --- a/Resources/Private/Fusion/Content/Track.fusion +++ /dev/null @@ -1,31 +0,0 @@ -prototype(Jonnitto.PrettyEmbedVideo:Content.Track) < prototype(Neos.Neos:ContentComponent) { - contentElement = true - - node = ${node} - asset = ${q(this.node).property('src')} - kind = ${q(this.node).property('kind')} - label = ${q(this.node).property('label')} - srclang = ${q(this.node).property('srclang')} - default = ${iterator.isFirst && setFirstTrackToDefault} - - // Internal - needSrclang = ${this.kind == 'subtitles' && !this.srclang} - - renderer = afx` - - - {props.asset ? props.asset.resource.filename : ''} - - {Carbon.Backend.translate('properties.kind.selectBoxEditor.values.' + props.kind, String.firstLetterToUpperCase(props.kind), [], 'NodeTypes/Content/Track', 'Jonnitto.PrettyEmbedVideo')} - - {props.label} - - {props.needSrclang ? Carbon.Backend.translate('needSrclang', 'The language need to be set', [], 'NodeTypes/Content/Track', 'Jonnitto.PrettyEmbedVideo') : props.srclang} - - {props.default ? '✓' : ''} - - ` - - @context.contentElement = ${this.contentElement} - @process.contentElementWrapping.@if.contentElementWrapping = ${contentElement} -} diff --git a/Resources/Private/Translations/de/Main.xlf b/Resources/Private/Translations/de/Main.xlf deleted file mode 100644 index 79dc472..0000000 --- a/Resources/Private/Translations/de/Main.xlf +++ /dev/null @@ -1,24 +0,0 @@ - - - - - - You need to define at least one video file and a preview image. - Es muss mindestens ein Video und ein Vorschaubild definiert werden. - - - You need to define at least one video. - Es muss mindestens ein Video definiert werden. - - - You need to define a preview image. - Es muss ein Vorschaubild definiert werden. - - - en - de - - - - diff --git a/Resources/Private/Translations/de/NodeTypes/Collection/Track.xlf b/Resources/Private/Translations/de/NodeTypes/Collection/Track.xlf deleted file mode 100644 index 050827c..0000000 --- a/Resources/Private/Translations/de/NodeTypes/Collection/Track.xlf +++ /dev/null @@ -1,16 +0,0 @@ - - - - - - Set first caption as default - Erster Untertitel ist Standarduntertitel - - - If set, the first caption will be enabled unless the user's preferences indicate that another one is more appropriate. - Falls dies gesetzt ist, wird der erste Untertitel aktiviert, solange nicht die Benutzereinstellungen so gesetzt ist, das ein anderer Untertitel besser passt. - - - - diff --git a/Resources/Private/Translations/de/NodeTypes/Content/Track.xlf b/Resources/Private/Translations/de/NodeTypes/Mixin/Tracks.xlf similarity index 53% rename from Resources/Private/Translations/de/NodeTypes/Content/Track.xlf rename to Resources/Private/Translations/de/NodeTypes/Mixin/Tracks.xlf index 006190b..d19e5d4 100644 --- a/Resources/Private/Translations/de/NodeTypes/Content/Track.xlf +++ b/Resources/Private/Translations/de/NodeTypes/Mixin/Tracks.xlf @@ -3,19 +3,15 @@ xmlns="urn:oasis:names:tc:xliff:document:1.2"> - - Captions - Untertitel - - - Captions - Untertitel + + Set first caption as default + Erster Untertitel ist Standarduntertitel - - Type - Typ + + If set, the first caption will be enabled unless the user's preferences indicate that another one is more appropriate. + Falls dies gesetzt ist, wird der erste Untertitel aktiviert, solange nicht die Benutzereinstellungen so gesetzt ist, das ein anderer Untertitel besser passt. - + ### Subtitles Subtitles provide translation of content that cannot be understood by the viewer. For example dialogue or text that is not English in an English language film. They may also contain additional content, usually extra background information. For example the text at the beginning of the Star Wars films, or the date, time, and location of a scene. @@ -47,66 +43,46 @@ Kapiteltitel sind für die Navigation innerhalb des Videos vorgesehen. ### Metadata Diese können von Programmiercode verwendet werden. Sie sind nicht sichtbar für den Benutzer. - + + Add caption + Untertitel hinzufügen + + + File (.vtt only) + Datei (nur .vtt Dateien) + + + Type + Typ + + Subtitles Untertitel audiomediale Inhalte - + Captions Untertitel visuelle Medieninhalte - + Descriptions Beschreibungen (descriptions) - + Chapters titles Kapiteltitel - + Metadata Metadata - + Label Label - - A user-readable title of the text track which is used by the browser when listing available text tracks - Ein lesbarer Titel von dem Untertitel welcher bei der Auflistung vom Browser verwendet wird - - - File - Datei - - - Must be an `.vtt` file. Other filetypes will be ignored. - Muss eine `.vtt` Datei sein. Andere Dateitypen werden ignoriert. - - + Language Sprache - - Language of the track text data. If the kind attribute is set to Subtitles, then it must be defined. - Sprache von dem Untertitel. Wenn der Typ auf *Untertitel audiomediale Inhalte* gesetzt ist, muss dieser Wert definiert werden. - - - Show tracks - Zeige Untertitel - - - Hide tracks - Blende Untertitel aus - - - Default - Standard - - - The language need to be set - Die Sprache muss gesetzt werden - diff --git a/Resources/Private/Translations/en/Main.xlf b/Resources/Private/Translations/en/Main.xlf deleted file mode 100644 index 0d9ecb8..0000000 --- a/Resources/Private/Translations/en/Main.xlf +++ /dev/null @@ -1,24 +0,0 @@ - - - - - - You need to define at least one video file and a preview image. - You need to define at least one video file and a preview image. - - - You need to define at least one video. - You need to define at least one video. - - - You need to define a preview image. - You need to define a preview image. - - - en - en - - - - diff --git a/Resources/Private/Translations/en/NodeTypes/Collection/Track.xlf b/Resources/Private/Translations/en/NodeTypes/Collection/Track.xlf deleted file mode 100644 index 8c96d97..0000000 --- a/Resources/Private/Translations/en/NodeTypes/Collection/Track.xlf +++ /dev/null @@ -1,16 +0,0 @@ - - - - - - Set first caption as default - Set first caption as default - - - If set, the first caption will be enabled unless the user's preferences indicate that another one is more appropriate. - If set, the first caption will be enabled unless the user's preferences indicate that another one is more appropriate. - - - - diff --git a/Resources/Private/Translations/en/NodeTypes/Content/Track.xlf b/Resources/Private/Translations/en/NodeTypes/Mixin/Tracks.xlf similarity index 53% rename from Resources/Private/Translations/en/NodeTypes/Content/Track.xlf rename to Resources/Private/Translations/en/NodeTypes/Mixin/Tracks.xlf index fba772a..264ad54 100644 --- a/Resources/Private/Translations/en/NodeTypes/Content/Track.xlf +++ b/Resources/Private/Translations/en/NodeTypes/Mixin/Tracks.xlf @@ -3,19 +3,15 @@ xmlns="urn:oasis:names:tc:xliff:document:1.2"> - - Captions - Captions - - - Captions - Captions + + Set first caption as default + Set first caption as default - - Type - Type + + If set, the first caption will be enabled unless the user's preferences indicate that another one is more appropriate. + If set, the first caption will be enabled unless the user's preferences indicate that another one is more appropriate. - + ### Subtitles Subtitles provide translation of content that cannot be understood by the viewer. For example dialogue or text that is not English in an English language film. They may also contain additional content, usually extra background information. For example the text at the beginning of the Star Wars films, or the date, time, and location of a scene. @@ -47,66 +43,46 @@ Chapter titles are intended to be used when the user is navigating the media res ### Metadata Tracks used by scripts. Not visible to the user. - + + Add caption + Add caption + + + File (.vtt only) + File (.vtt only) + + + Type + Type + + Subtitles Subtitles - + Captions Captions - + Descriptions Descriptions - + Chapters titles Chapters titles - + Metadata Metadata - + Label Label - - A user-readable title of the text track which is used by the browser when listing available text tracks - A user-readable title of the text track which is used by the browser when listing available text tracks - - - File - File - - - Must be an `.vtt` file. Other filetypes will be ignored. - Must be an `.vtt` file. Other filetypes will be ignored. - - + Language Language - - Language of the track text data. If the kind attribute is set to Subtitles, then it must be defined. - Language of the track text data. If the kind attribute is set to Subtitles, then it must be defined. - - - Show tracks - Show tracks - - - Hide tracks - Hide tracks - - - Default - Default - - - The language need to be set - The language need to be set - diff --git a/composer.json b/composer.json index c51b51f..67967b0 100644 --- a/composer.json +++ b/composer.json @@ -23,7 +23,8 @@ } ], "require": { - "jonnitto/prettyembedhelper": "^4.0 || dev-master" + "jonnitto/prettyembedhelper": "^6.0 || dev-master", + "mireo91/repeatablefields": "^2.2.0" }, "autoload": { "psr-4": {